The difference between link and @import in external reference CSS

difference 1:link is an XHTML tag, and @import is completely a way to provide CSS.

In addition to the link tag can be loaded CSS, but also can do a lot of other things, such as the definition of RSS, the definition of REL connection properties, @import can only load CSS.

Difference 2: the difference in the loading order. When a page is loaded (when viewed by the browser), the CSS referenced by the link is loaded at the same time, and the CSS referenced by @import waits until the page has been downloaded and loaded.

Difference 3: differences in compatibility. Because @import is CSS2.1 proposed by the old browser does not support, @import only in IE5 above the ability to identify, and link tag does not have this problem.

Difference 4: The difference between using the DOM to control the style. When using JavaScript to control the DOM to change styles, you can only use the link tag, because @import is not controlled by the DOM.

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

Difference 5:@import can introduce another style sheet in the CSS, such as creating a main stylesheet and introducing other stylesheets in the main style sheet, such as:

Main.css
———————-
@import "Sub.css";
@import "Sub1.css";

Sub.css
———————-
p {color:red;}

Sub1.css
———————-
. MyClass {Color:blue}

This is more conducive to modification and extension.

Tip: There is a drawback to this, will produce too many HTTP requests to the Web server, formerly a file, and now is two or more files, the pressure of the server, the large number of Web sites are still cautious use. Interested can look at such as Sina, such as the homepage of the website or the column home code, they will always put CSS or JS directly in the HTML, rather than external files.

The difference between link and @import in external reference CSS