What is the difference between css link and import

Difference: link belongs to the html tag, and @import is a method provided by css. The link tag can not only introduce css, but also do other things, while @import can only introduce css; @import can only be used in IE5 Only the above are supported; and the link tag does not have compatibility issues.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

There are two ways to introduce external CSS into html, the link tag and @import, so what is the difference between them?

1. Difference in affiliation

@import is the syntax rule provided by CSS, which only has the function of importing style sheets; link is the tag provided by HTML, which can not only load CSS file, you can also define RSS, rel connection attributes, etc.

2. Loading order difference

When loading the page, the CSS introduced by the link tag is loaded at the same time; the CSS introduced by @import will be loaded after the page is loaded.

3. Compatibility difference

@import is a syntax only available in CSS2.1, so it can only be recognized in IE5; the link tag is an HTML element and does not exist Compatibility issues.

4. The difference in DOM controllability

You can operate the DOM through JS and insert link tags to change the style; since the DOM method is based on documents, @import cannot be used to insert styles.

[Recommended tutorial: CSS video tutorial]

Supplementary instructions:

@import writing method

<style type="text/css">
    @import &#39;style.css&#39; //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
    @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
    @import url(style.css) //Windows NS4, Macintosh NS4不识别
    @import url(&#39;style.css&#39;) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
    @import url("style.css") //Windows NS4, Macintosh NS4不识别
</style>

Among them, @import url(style.css) and @import url("style.css") are the best choices and are compatible with the most browsers. From a byte optimization perspective, @import url(style.css) is the most recommended.

How to write link

<link href="style.css" rel="stylesheet" type="text/css">

In addition, link has other uses, such as introducing icons

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

In general: link is better than @import, and it is strongly recommended to use link Tags, use @import method with caution.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of What is the difference between css link and import. For more information, please follow other related articles on the PHP Chinese website!