[Change]link and @import difference

When link refers to CSS, it is loaded at the same time when the page is loaded, @import need to load the page completely, and link supports using JavaScript to control the DOM to change the style; @import does not support.

There are 3 main ways to use CSS in a page: Inline add defines style property values, page header embedded calls, and outer link calls, where there are two types of external references: link and @import. External reference CSS two ways to link and @import are:

<link rel= "stylesheet" href= "CSS file" type= "Text/css" media= "All"/> <style type= "text/css" media= "screen" >
@import url ("CSS file");
</style>   both are external references to CSS, but there are some differences: The difference between 1:link is XHTML tag, in addition to loading CSS, you can also define RSS and other transactions, @import belong to the CSS category, can only load CSS.    The difference between 2:link referencing a CSS, loading at the same time when the page loads, @import need to load the page after full loading.    The difference between 3:link is XHTML label, no compatibility problem, @import is proposed in CSS2.1, the lower version of the browser is not supported. The difference 4:ink supports using JavaScript to control the DOM to change styles, while @import does not support it. @import optimal notation  @import are generally written in the following ways: @import ' style.css '//windows ie4/ns4, Mac OS X IE5, Macintosh ie4/ie5/ns4 not recognized

  @import "Style.css"//windows ie4/ns4, Macintosh IE4/NS4 does not recognize
@import URL (style.css)//windows NS4, Macintosh NS4 does not recognize
@import url (' style.css ')//windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 not recognized
@import url ("style.css")//windows NS4, Macintosh NS4 does not recognize
By the analysis of the above, @import URLs (style.css) and @import URLs ("Style.css") are the best choice, compatible with the most browsers. From a byte-optimized point of view, the @import URL (style.css) is most recommendable.

the difference between link and @import in external reference CSS
Essentially, both of these approaches are meant to load CSS files, but there are subtle differences.
Difference 1: the difference between ancestors. 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. So sometimes browsing @import loading CSS page when there is no style (that is flashing), the speed of the slow time is quite obvious (dream of the way to load CSS is to use the @import, while downloading while browsing the dream of the Web page, the above problems will occur).
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 when using the DOM to control styles. 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.
Difference 5: @import can introduce another style sheet in the CSS, such as creating a main style sheet and introducing another style sheet into the main style sheet. Such as
@import "Sub1.css";
@import "Sub2.css";

Sub1.css

p {color:red;}

Sub2.css
. MyClass {Color:blue}

This has a disadvantage, the site server will produce too many HTTP requests, previously a file, and now is two or more files, the pressure on the server, large-scale web site is 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.

[Change]link and @import difference