The difference between link and @import in external reference CSS_html/css_WEB-ITnose

Difference 1: link belongs to the XHTML tag, while @import is completely a method provided by CSS.

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

Difference 2: Difference in loading order. When a page is loaded (that is, when viewed by a viewer), the CSS referenced by link will be loaded at the same time, while the CSS referenced by @import will wait until the page is completely downloaded before being loaded.

Difference 3: Difference in compatibility. Since @import was proposed by CSS2.1, old browsers do not support it. @import can only be recognized by IE5 or above, but the link tag does not have this problem.

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

When loading CSS files in standard web page production, you should also select the media to be loaded, such as screen, print, or all, etc.

Difference 5: @import can introduce other style sheets again in css. For example, you can create a main style sheet and introduce other style sheets 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 convenient for modification and expansion.

Tip: There is a disadvantage in doing this. It will generate too many HTTP requests to the website server. It used to be one file, but now it is two or more files. The pressure on the server increases and the number of views increases. Large websites should be used with caution. Those who are interested can observe the homepage or column homepage code of websites such as Sina. They always write css or js directly in html without using external files.