The difference between css link and @import

There are three main ways to use CSS on the page: 1. Add and define the style attribute value inline. 2. Inline call in the page header. 3. External link call.

There are two types of external references: link and @import.

XML/HTML code

<link href="stylesheet" href="CSS文件" type="text/css"/>

XML/HTML code

<style type="text/css">
    @import url("CSS文件")
</style>

Both are ways of externally referencing CSS, but there are certain differences:

Difference 1: link is an XHTML tag. In addition to loading CSS, it can also define other transactions such as RSS; @import belongs to the category of CSS , only CSS can be loaded.

Difference 2: When link references CSS, it is loaded at the same time when the page is loaded; @import requires the page to be fully loaded before loading.

Difference 3: link is an XHTML tag, so there is no compatibility issue; @import was proposed in CSS2.1, and lower version browsers are not eligible.

Difference 4: link supports using Javascript to control the DOM to change the style; while @import does not qualify.

Difference 5: The link style has a higher weight than @import.

Supplement: The best way to write @import
The writing methods of @import generally include the following:

@import 'style.css' //Windows IE4/ Not recognized by NS4, Mac OS /Windows NS4, Macintosh NS4 does not recognize
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 does not recognize
@import url("style.css" ") //Windows NS4, Macintosh NS4 does not recognize
From the above analysis, we know that @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.

For more differences between css link and @import, please pay attention to the PHP Chinese website for related articles!