Introduction to 3 ways to introduce CSS in HTML_HTML/Xhtml_Web page production

In HTML, the main methods of introducing CSS are inline, embedded, imported and link
Inline: is to set the CSS style in the style attribute of the mark. This method is essentially The advantages of CSS are not reflected in the above, so the use of
is not recommended. Example:

Copy code

The code is as follows:

This is a line of Text.

Embedded: Embedded is to write the settings for various elements in the page between and . For a single web page, this method is very convenient. But for a website that contains many pages, if each page sets its own style inline, it will lose the huge advantages brought by CSS. Therefore, a website usually writes an independent CSS style sheet file, using the following two One of these ways, introduced into the HTML document.
Example:

Copy code

The code is as follows:

> ;

This is a line of Text.

This is another line of Text. h1>

Import and link: The purpose of import and link is to convert a Independent CSS files introduce HTML files, and there are corresponding differences between the two.
In fact, the biggest difference between the two is that the link type uses HTML tags to introduce external CSS files, while the import type uses CSS rules to introduce external CSS files. Therefore their syntax is also different.
If you use link style, you need to use the following statement to introduce external CSS files.

If you use import, you need to use the following statement.

Copy code

The code is as follows:

In addition, the display effects of these two methods are also slightly different. When using the link method, the CSS file will be loaded before the main part of the installation page, so that the displayed web page will have a style effect from the beginning. When using the import method, the CSS file will be loaded after the entire page is loaded. For For some browsers, in some cases, if the size of the web page file is relatively large, an unstyled page will be displayed first, and then the style-set effect will appear after a flash. From the perspective of the viewer, this is a drawback of using import. For some relatively large websites, in order to facilitate maintenance, you may want to put all CSS styles into several CSS files. In this way, if you use link import, you need several statements to import the CSS files separately. If you want to adjust the classification of CSS files, you need to adjust the HTML files at the same time. This is a drawback for maintenance work. If you use the import method, you can only import a general CSS file, and then import other independent CSS files in this file; the link method does not have this feature.

So a suggestion here is that if you need to introduce a CSS file, use the link method; if you need to introduce multiple CSS files, first use the link method to introduce a "directory" CSS file, this " Directory" CSS file and then use import to introduce other CSS files.
If you want to dynamically decide which CSS file to import through JavaScript, you must use linking to achieve this.