CSS Web Design tutorial: Link and @import external reference CSS Difference

Article Introduction: The difference between link and @import in the external referencing CSS.

The difference between link and @import in the external referencing CSS

1, the difference between the ancestors

Link is an XHTML tag, and @import is a completely CSS-provided way.

In addition to loading CSS, link tag can do many other things, such as defining RSS, defining rel connection properties, @import can only load CSS.

2, loading sequence of the difference

When a page is loaded (that is, when viewed by a viewer), link-referenced CSS is loaded at the same time, and @import-referenced CSS waits until the page is all downloaded and loaded. So sometimes browsing @import loading CSS pages will start without a style (that is, flashing), the speed is slow when more obvious.

3, the difference of compatibility

Because the @import is proposed by the CSS2.1, so the old browser does not support, @import only in IE5 above the ability to identify, and the link label does not have this problem.

4, use the DOM to control the difference in style.

When you use JavaScript to control the DOM to change the style, you can only use the link tag, because @import is not a DOM control.

5, @import can be introduced in the CSS another style sheet

For example, you can create a main style sheet, and then introduce another style sheet in the main style sheet. That is more conducive to modification and expansion.

Roughly on these several differences, the other is the same, from the above analysis, or using link tag is better.

Standard Web page when you load a CSS file, you should also select the media you want to load, such as Screen,print, or all.