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
Real-time refresh of long connection on Vue+WebSocket page
Recently, the Vue project needs to refresh the da...
Detailed Example of MySQL InnoDB Locking Mechanism
1. InnoDB locking mechanism The InnoDB storage en...
Using System.Drawing.Common in Linux/Docker
Preface After the project is migrated to .net cor...
VMware15/16 Detailed steps to unlock VMware and install MacOS
VMware version: VMware-workstation-full-16 VMware...
Overview of the Differences between Linux TTY/PTS
When we type a letter on the keyboard, how is it ...
CSS sprites technology integrates multiple backgrounds into one PNG image CSS positioning
The image integration technology used by American...
Multi-service image packaging operation of Dockerfile under supervisor
Writing a Dockerfile Configure yum source cd /tmp...
MySQL tutorial DML data manipulation language example detailed explanation
Table of contents 1. Data Manipulation Language (...
A brief discussion on CSS3 animation jamming solutions
Why is it stuck? There is a premise that must be ...
Button does not specify type as submit. Clicking the button does not jump to the specified URL.
Today, due to project requirements, js is needed t...
Four ways to create objects in JS
Table of contents 1. Create objects by literal va...
How to install Nginx in a specified location in Centos system
How to install Nginx in a specified location in C...
Detailed explanation of mysql download and installation process
1: Download MySql Official website download addre...
Ubuntu 19.04 installation tutorial (picture and text steps)
1. Preparation 1.1 Download and install VMware 15...
Use of filter() array filter in JS
Table of contents 1. Introduction 2. Introduction...