The difference between CSS link and @import

There are three main ways to use CSS in a page: 1. Add a definition of the Style property value in a row. 2. The page header is called inline. 3. External link call.

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

xml/html Code

<link href= "stylesheet" href= "CSS file" type= "Text/css"/>

xml/html Code

<style type= "Text/css" >    @import url ("CSS file") </style>

Both are external ways of referencing CSS, but there are some differences:

The difference between 1:link is XHTML tags, 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 raised in CSS2.1, the lower version of the browser is not.

The difference 4:link supports using JavaScript to control the DOM to change styles, while @import does not.

The weight of the difference 5:link way style is higher than that of @import.

Supplement: @import the best wording
@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.