What methods does CSS introduce? What is the difference between link and @ import?

HTML files are displayed through CSS styles, that is, the page content is displayed in combination with XHTML and CSS. So what methods are there to introduce CSS styles into the XHTML file?

I. inline reference CSS

Add the style attribute directly to individual component labels. <component (Label) style = "Property (attribute) 1: Set Value 1; Property (attribute) 2: value 2 ;...}
For example:

<TD style = "color: # c00; font-size: 15px; line-Height: 18px;>
No worries about templates-www.mb5u.com
</TD>

Advantages of this method: the labels can be applied flexibly. It is easy to use when writing code.
Disadvantages of this method: It is difficult to modify a style without the "uniformity" of the entire file.

Ii. Reference CSS internally

Write the style rules in the <style>... </style> label.

<Style type = "text/CSS">
<! --
Style rule table
-->
</Style>
Generally, the entire <style>... </style> structure is written in the Advantages of this method: the whole article has uniformity, as long as there is a declared component, this style rule will apply.
Disadvantages of this method: the flexibility of individual components is insufficient, and the entire site has weak functionality.

Iii. External Reference link tag reference CSS

Write the style rules in the. CSS style file, and then introduce them with the <link> label.
Assume that we save the sample rules into an example.css file. We only need to add the following content to the webpage:

<LINK rel = stylesheet type = "text/CSS" href = "example.css">

After the CSS style sheet file is introduced, you can directly apply the style set in the style file. The link tag is usually written in the Advantages of this method: You can specify several files to apply the same style rules to the same style file, you can make unified modifications, and make it easy to set a unified style for the whole site.
This method is generally used for CSS webpage layout.
Disadvantages of this method: lack of flexibility in individual files or elements.

IV,External Reference@ Import reference CSS

It is similar to the link method, but must be placed in <style>... </style>: <style type = "text/CSS">
<! --
@ Import URL (the address, path, and file name of the imported style sheet );
-->
</Style>

Example: <style type = "text/CSS">
<! --
@ Import URL (CSS/example.css );
-->
</Style>

Note that the semicolon at the end of the line is required! Never miss writing!
Advantages of this method: You can flexibly introduce CSS files to control XHTML elements. Sometimes it is also used to write some CSS hack.
Disadvantages of this method: lack of flexibility in individual files or elements.

Essentially, both methods are used to load CSS files, but there are still slight differences.

Difference 1:Old ancestor's difference. Link is An XHTML label, and @ import is a method provided by CSS.

In addition to loading CSS, link labels can also do many other things, such as defining RSS and rel connection attributes. @ import can only load CSS.

Difference 2:The differences in the loading sequence. When a page is loaded (that is, when it is browsed by the browser), the CSS referenced by link will be simultaneously loaded, the CSS referenced by @ import will be loaded after all the pages are downloaded. So sometimes, when you browse the page where @ import loads CSS, there will be no style (that is, flashing) at the beginning, and the speed is quite slow (mengzhidu loads CSS by using @ import, the above problem occurs when I download and browse the dream capital web page ).

Difference 3:Compatibility differences. Because @ import is proposed by css2.1, it is not supported by the old browser. @ import can be identified only when it is later than ie5, but the link label does not have this problem.

Difference 4:Differences when using Dom to control styles. When using JavaScript to control the Dom to change the style, only link labels can be used, because @ import is not controllable by Dom.

Basically, there are several differences (if there are any differences, let me know and I will add them). The others are the same. From the above analysis, it is better to use the link label.

When creating and loading CSS files for standard web pages, you should also select the media to be loaded, such as screen, print, or all. I will introduce it to you in the CSS advanced tutorial.

Note:

1. comehope raised another difference in the message.

Difference 5:@ Import can introduce other style sheets in CSS again. For example, you can create a primary style sheet and then introduce other style sheets in the primary style sheet, for example:

Main.css
--------
@ Import into sub1.css ";
@ Import into sub2.css ";

Sub1.css
--------
P {color: red ;}

Sub2.css
--------
. Myclass {color: Blue}

This is more conducive to modification and expansion.

Monkey tip: There is a drawback in this way, it will generate too many HTTP requests to the website server. Previously it was a file, but now it is two or more files, and the pressure on the server increases, exercise caution when using websites with large page views. If you are interested, you can observe the homepage code of a website such as Sina. They always write CSS or JS directly in HTML without using external files.