Difference between css link and @ import, csslink @ import

Difference between css link and @ import, csslink @ import

There are three main methods to use CSS in the page: 1. Add the defined style attribute value in the row. 2. embedded call in the page header. 3. Call the external link.

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 reference CSS methods, but there are some differences:

Difference 1: link is an XHTML tag. In addition to loading CSS, it can also define RSS and other transactions. @ import is within the CSS category and can only load CSS.

Difference 2: When link References CSS, it is loaded at the same time when the page is loaded; @ import requires that the page be loaded after the page is fully loaded.

Difference 3: link is an XHTML tag with no compatibility issues. @ import was proposed in CSS2.1, and earlier versions of browsers are not supported.

Difference 4: link supports using Javascript to control DOM to change styles, while @ import does not.

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

 

Supplement: @ import optimal syntax
@ Import is 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, which is not recognized by Macintosh IE4/NS4
@ Import url(style.css) // Windows NS4, which is not recognized by Macintosh NS4
@ Import url('style.css ') // Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 not recognized
@ Import url ("style.css") // Windows NS4, which is not recognized by Macintosh NS4
According to the analysis above, @ import url(style.css) and @ import url ("style.css") are the best choices, with the most compatible browsers. From the perspective of byte optimization, @ import url(style.css) is the most recommended.