Detailed explanation of three ways to import CSS files
|
There are three ways to introduce CSS: inline styles, internal style sheets, and external style sheets. 1. Inline styles Use the style attribute to introduce CSS styles. Example: <h1 style="color:red;">Application of style attribute</h1> <p style="font-size:14px;color:green;">Style set directly in HTML tags</p> It is not recommended to use it when writing pages, but it can be used when testing. For example:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Inline style</title>
</head>
<body>
<!--Use inline styles to introduce CSS-->
<h1 style="color:red;">Leaping Above The Water</h1>
<p style="color:red;font-size:30px;">I am a p tag</p>
</body>
</html>2. Internal Style Sheets Write CSS code in the style tag. The style tag is written in the head tag. Example:
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
For example:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Internal Style Sheet</title>
<!--Use internal style sheet to introduce CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>
<body>
<div>I am a DIV</div>
</body>
</html>3. External Style Sheets CSS code is saved in a style sheet with the extension .css There are two ways for HTML files to reference style sheets with a .css extension: linking and importing. grammar: 1. Linked <link type="text/css" rel="styleSheet" href="CSS file path" /> 2. Import
<style type="text/css">
@import url("css file path");
</style>
For example:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>External Style Sheet</title>
<!--Link: Recommended-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Import-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>The difference between link and import <link> 1. Belongs to XHTML 2. Prioritize loading CSS files to the page @import 1. Belongs to CSS2.1 2. Load the HTML structure first and then load the CSS file. IV. Priority in CSS 1. Style priority Inline style > internal style > external style (the latter two are based on the principle of proximity) For example: Inline styles and internal styles have a higher priority:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Priority of inline styles and internal style sheets</title>
<!--Internal style sheet-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<!--Inline style-->
<p style="color: red;">I am p paragraph</p>
</html>Browser running effect:
Conclusion: Inline styles take precedence over internal style sheets. Internal style sheets and external style sheets have a higher priority: a. Internal style sheets are above external style sheets
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Priority between internal style sheets and external style sheets</title>
<!--Internal style sheet-->
<style type="text/css">
p{
color: blue;
}
</style>
<!--External style sheet-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>I am paragraph p</p>
<div>I am div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>Browser running effect:
b. External style sheets are above internal style sheets
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Priority between internal style sheets and external style sheets</title>
<!--External style sheet-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Internal style sheet-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>I am paragraph p</p>
<div>I am div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>Browser running effect:
Conclusion: Internal style sheets and external style sheets use the principle of proximity, that is, whichever is written below shall prevail. Note: The priority of import and link types also uses the principle of proximity. 2. Selector priority Priority: ID selector > class selector > tag selector
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Selector Priority</title>
<style type="text/css">
#a{
color: green;
}
.b{
color: yellow;
}
h2{
color: red;
}
</style>
</head>
<body>
<h2>111</h2> <!--Red-->
<h2 id="a" class="b">222</h2> <!--Green-->
<h2 class="b">333</h2><!--Yellow-->
</html>Browser running effect:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: A thorough understanding of js native syntax prototype, __proto__ and constructor
>>: Convert XHTML CSS pages to printer pages
Recommend
MySQL 8.x msi version installation tutorial with pictures and text
1. Download MySQL Official website download addre...
4 ways to optimize MySQL queries for millions of data
Table of contents 1. The reason why the limit is ...
How to add website icon?
The first step is to prepare an icon making softwa...
JavaScript Closures Explained
Table of contents 1. What is a closure? 1.2 Memoi...
Get the IP and host name of all hosts on Zabbix
zabbix Zabbix ([`zæbiks]) is an enterprise-level ...
Introduction to TypeScript basic types
Table of contents 1. Basic types 2. Object Type 2...
A brief analysis of Linux resolv.conf
1. Introduction resolv.conf is the configuration ...
Apache Flink arbitrary Jar package upload leads to remote code execution vulnerability recurrence problem (vulnerability warning)
Vulnerability Description Apache Flink is an open...
Kali Linux installation VMware tools installation process and VM installation vmtools button gray
Xiaobai records the installation of vmtools: 1. S...
Installation and configuration tutorial of MongoDB under Linux
MongoDB Installation Choose to install using Yum ...
Analyzing the four transaction isolation levels in MySQL through examples
Preface In database operations, in order to effec...
HTML drawing user registration page
This article shares the specific implementation c...
MySQL foreign key constraint disable and enable commands
Disabling and enabling MySQL foreign key constrai...
Several ways to introduce pictures in react projects
The img tag introduces the image Because react ac...
Achieve 3D flip effect with pure CSS3 in a few simple steps
As a required course for front-end developers, CS...