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 knowledge points: transaction, index, lock principle and usage analysis
This article uses examples to explain the princip...
JavaScript implements the generation of 4-digit random verification code
This article example shares the specific code for...
Teach you how to use vscode to build a react-native development environment
question The code has no prompt: Many non-front-e...
MYSQL replaces the time (year, month, day) field with unchanged hours, minutes, and seconds. Example analysis
Writing method 1: update sas_order_supply_month_p...
Nginx tp3.2.3 404 problem solution
Recently I changed Apache to nginx. When I moved ...
A detailed analysis of the murder caused by a misplaced double quote in MySQL
1. Introduction Recently, I often encounter devel...
Detailed tutorial on jdk installation and environment variable configuration under Win10
Table of contents Preface 1. Preparation 2. Insta...
MySQL 5.7 installation and configuration tutorial under CentOS7 (YUM)
Installation environment: CentOS7 64-bit, MySQL5....
How to generate random numbers with specified digits in MySQL and how to generate random numbers in batches
1. First introduce several commonly used MySQL fu...
Detailed explanation of the use of this.$set in Vue
Table of contents Use of this.$set in Vue use Why...
What is flex and a detailed tutorial on flex layout syntax
Flex Layout Flex is the abbreviation of Flexible ...
Google Translate Tool: Quickly implement multilingual websites
Google China has released a translation tool that ...
Stealing data using CSS in Firefox
0x00 Introduction A few months ago, I found a vul...
Solve the problem that the element DateTimePicker+vue pop-up box only displays hours
Three knowledge points: 1. CSS descendant selecto...
Tomcat Nginx Redis session sharing process diagram
1. Preparation Middleware: Tomcat, Redis, Nginx J...