A brief analysis of the four import methods and priorities in CSS
|
First: 4 ways to introduce CSS There are four ways to introduce CSS: inline style, embedded style, link style, and import style. 1. Inline styles The most direct and simplest one is to use style="" directly on the HTML tag, for example:
Disadvantages: HTML pages are not pure, the file size is large, it is not conducive to spider crawling, and the subsequent maintenance is inconvenient. 2. Inline styles Inline style means writing CSS code between
<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
</style>Advantages and disadvantages: The page uses public CSS code, which must be defined for each page. If a website has many pages, each file will become larger and difficult to maintain later. If there are few files and not much CSS code, this style is still very good. 3. Link Style The link style is the most frequently used and practical style. You only need to add
Advantages and disadvantages: It realizes the complete separation of page framework code and presentation CSS code, making pre-production and post-maintenance very convenient 4. Import style (not recommended) Importing styles is similar to linking styles. The @import style is used to import CSS style sheets. When HTML is initialized, it will be imported into the HTML or CSS file and become part of the file, similar to the second embedded style. @import is used in HTML as follows: <style type="text/css"> @import url(style.css); </style> @import is used in CSS as follows:
Second: The priority of four CSS introduction methods 1. Proximity principle 2. In theory: Inline > Embed > Link > Import 3. In fact: embedding, linking, and importing are in the same file header, whichever is closer to the corresponding code has a higher priority Experience:
Summarize This concludes this article on the four import methods and priorities in CSS. For more information on the priority of CSS import methods, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: The process of building and configuring the Git environment in Docker
>>: Vue implements mobile phone verification code login
Recommend
Detailed explanation of the misunderstanding between MySQL and Oracle
Table of contents Essential Difference Database s...
Should I use UTF-8 or GB2312 encoding when building a website?
Often when we open foreign websites, garbled char...
Detailed tutorial on installing Docker on CentOS 8.4
Table of contents Preface: System Requirements: I...
MySQL 5.7.21 decompression version installation and configuration method graphic tutorial (win10)
The installation and configuration method of MySQ...
Detailed tutorial for upgrading MySQL 5.7.17 free installation version on Windows (x86, 64bit)
MySQL needs to be upgraded to version 5.5.3 or ab...
Docker exposes port 2375, causing server attacks and solutions
I believe that students who have learned about th...
Vue implements button switching picture
This article example shares the specific code of ...
Tips on setting HTML table borders
For many people who are new to HTML, table <ta...
How to build a DHCP server in Linux
Table of contents 1. Basic knowledge: 2. DHCP ser...
Docker installation steps for Redmine
Download the image (optional step, if omitted, it...
Introduction to the usage of props in Vue
Preface: In Vue, props can be used to connect ori...
Solve the problems encountered when installing MySQL 8.0 on Win10 system
The problems and solutions encountered when insta...
Detailed explanation of how to access MySQL database remotely through Workbench
Preface Workbench is installed on one computer, a...
Solution to abnormal connection table caused by inconsistent MySQL character sets
Table of contents 1. Solution 2. MySQL character ...
Introduction to MySQL <> and <=> operators
<> Operator Function: Indicates not equal t...