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:

<p style="color:#F00; "></p>

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 <head></head> and declaring it with <style></style> , for example:

<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 <link…/> between <head></head> , as follows:

<link type="text/css" rel="stylesheet" href="style.css" />

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:

@import url(style.css);

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:

1. If the same CSS definition is distributed in two CSS files, the style is taken from the CSS file introduced later.
2. It is best to put the CSS of third-party components in the front of HTML and the customized CSS in the back of HTML.

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