Difference between link and @ import in CSS tutorial

Currently, most websites have abandoned the form method, and CSS becomes the "dominant". On the CSS link, some websites have different calling methods, most of the taobao.com webpages are written in this way.

<Style type = "text/css" media = "screen">
@ Import url ("http://www.taobao.com/home/css/global/v2.0.css? T000020070518.css ");
</Style>

Many websites use link

<Link rel = "stylesheet" rev = "stylesheet" href = "default.css" type = "text/css" media = "all"/>

Websites such as google Baidu 163 are directly written on webpages.

Of course, the advantage of using link links and importing import is that it is easy to maintain. However, when the network speed is slow, loading interruption may occur, leading to page layout errors.

They work the same way.

The only difference is that the service objects are different.

@ Import serves CSS

Link is the current page service.

Some classic users say that @ import will give priority to execution.

Differences between link and @ import in CSS for external reference

In the past two days, I have just written several methods for loading CSS in XHTML. The external reference CSS is divided into two methods: link and @ import.

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

Difference 1: The 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 order of loading is different. When a page is loaded (that is, when it is browsed by a browser), the CSS referenced by link is loaded at the same time, 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: Differences in compatibility. 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.