How to introduce CSS in HTML

In HTML, CSS is introduced mainly in four methods: inline, embedded, imported, and linked.

1. Inline
That is, set the CSS style in the style attribute of the tag. This method does not reflect the advantages of CSS in nature, so it is not recommended.
2. Embedded
The setting of various elements on the page is concentrated between 3. Import Type
The imported format is as follows:
<Style type = "text/CSS">
@ Import "mystyle.css ";
</Style>
4. Connector
The format is as follows:
<Link href = "mystyle.css" rel = "stylesheet" type = "text/CSS"/>

The Display Effect of the last two methods is slightly different. The differences are as follows:
1. Connector: the CSS file is loaded before the page body is loaded, so that the displayed webpage has a style effect from the beginning,
Imported: the CSS file is loaded after the entire page is loaded. For Some browsers, if the size of the webpage file is large, A page with no style is displayed first,
The effect after the style is set again after flashing. This is a defect of the pilot type from the perspective of the viewer.
For some large websites, in order to facilitate maintenance, you may want to put all CSS styles into several CSS files by category. If you use a connector, several statements are required to import the CSS file respectively.
If you want to adjust the classification of CSS files, you need to adjust the HTML files at the same time. This is a defect in the maintenance work. If you use the pilot type, you can only introduce one total CSS file, in this file
Imports other independent CSS files, but the connection does not.
Therefore, we recommend that you use the connection method if you only need to introduce one CSS file. If you need to introduce multiple CSS files, first, introduce a "directory" CSS file, the "directory"
In the CSS file, use the pilot to introduce other CSS files.
If you want to use JavaScript to dynamically decide which CSS file to introduce, you must use a connector.