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

<Style type = "text/CSS">
Div {margin: 0; padding: 0; Border: 1px red
Solid ;}
</Style>

This method is rarely used, and the longest seen is the portal website with a large access volume. Or the homepage of an enterprise website with a large access volume. Compared with the first method, this method has outstanding advantages and obvious drawbacks. Advantage: the speed is fast. All CSS controls are targeted at the current page tag, and there are no redundant CSS commands. Besides, no external link CSS files are needed. Read styles directly in HTML documents. The disadvantage is that the revision is troublesome. A single page is bloated, and CSS cannot be referenced by other HTML files, resulting in a relatively large amount of code and more trouble for maintenance. However, most companies that adopt this method have money. For them, the number of users is the key, and they do not need people to perform complex maintenance work.

3. Import Type

The imported format is as follows:
<Style
Type = "text/CSS">
@ Import
"Mystyle.css ";
</Style>
4. Connector

This method can be said to be the dominant method to introduce. Like IE and browsers. This is also the method that best reflects the characteristics of CSS. It can best reflect the idea of separation of Content and Display in Div + CSS, and is also the easiest to modify and maintain. The code looks the most beautiful.

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,
2
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, and the effect after the style is set is displayed. 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, import other independent CSS files in this file, but the connection does not have this feature.
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.

PS: differences between link and @ import

Question 1. What is the difference between link and @ import?
Let's take a look at their definitions.

Quote
Link Element
Both HTML and XHTML have a structure that allows webpage authors to add additional information related to HTML documents. These additional resources can be style-based information (CSS), navigation assistant, additional information (RSS), and contact information. Quote
@ Import
Specify the imported external style sheet and target device type. In fact, the most fundamental difference between link and @ import is that link is an HTML Tag, while @ import is a CSS Tag,
In addition to calling CSS, link can also have other functions, such as declaring page Link Attributes, declaring directories, RSS, etc. @ import can only
Call CSS. If CSS is referenced from external sources, their role is basically the same, but the boss above is different. :)

Question 2. Which of the following is better for Link and import?
As mentioned above, the boss is different, so there will be some detailed differences in usage. It cannot be said who is better or worse,
You can only analyze the specific situation.
1) I want to use JavaScript For style selection;
Link is used at this time, because Link is an HTML element, and javascript can be used to control DOM elements and finally change the style.

2) apply the Print Style;
As the name suggests, a print style is used to print a page.
This style is ineffective in normal browsing and only takes effect during printing.
If you want to reference the Print Style separately for the page, both link and @ import are supported.

3) Reference multiple styles;
If you want to reference multiple style combinations on a page to produce results, both link and @ import are acceptable.