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
Sample code for html list box, text field, and file field
Drop-down box, text field, file field The upper p...
WeChat applet implements SMS login in action
Table of contents 1. Interface effect preview 2.u...
Nginx+FastDFS to build an image server
Installation Environment Centos Environment Depen...
Detailed explanation of JS memory space
Table of contents Overview 1. Stack and Heap 2. V...
How to remove MySQL from Ubuntu and reinstall it
First delete mysql: sudo apt-get remove mysql-* T...
How to write DROP TABLE in different databases
How to write DROP TABLE in different databases 1....
js canvas realizes rounded corners picture
This article shares the specific code of js canva...
How to use skeleton screen in vue project
Nowadays, application development is basically se...
The leftmost matching principle of MySQL database index
Table of contents 1. Joint index description 2. C...
Notes on using $refs in Vue instances
During the development process, we often use the ...
Detailed explanation of HTML table tags (suitable for beginners)
TABLE> <TR> <TD> <TH> <CA...
MySQL automatically inserts millions of simulated data operation code
I use Navicat as my database tool. Others are sim...
Four ways to create objects in JS
Table of contents 1. Create objects by literal va...
Vue Element UI custom description list component
This article example shares the specific code of ...
MySQL query method with multiple conditions
mysql query with multiple conditions Environment:...