What is the difference between link and @ import? What is the difference between link @ import?

What is the difference between link and @ import? What is the difference between link @ import?

There are three main methods to use CSS on the page: adding the defined style attribute values in the row, calling the embedded page header and calling the external link. There are two types of external reference: link and @ import. The link and @ import methods for external reference of CSS are:

XML/HTML code
<Link rel = "stylesheet" rev = "stylesheet" href = "CSS file" type = "text/css" media = "all"/>
XML/HTML code
<Style type = "text/css" media = "screen">
@ 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 label and does not have compatibility issues. @ import was proposed in CSS2.1 and is not supported by browsers of earlier versions.

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