Talk about the difference between link and @import in CSS

We all know that link and @import can introduce CSS style sheets, so what's the difference between the two? Let's talk about their respective links, then tell them the difference.

Link link in the way:

<link rel= "stylesheet" type= "Text/css" href= "Index.css" >  @import Import Method:

<style type= "Text/css" >    @import url (' index.css ');   </style>

Priority: Embed style > Internal style sheet > import style sheet (link into style sheet)

The way you import is similar to the way you link it, but in fact it is equivalent to having an internal style sheet, although it has precedence over the inner style sheet, and its precedence over the link to the style sheet depends on the order of the position, who is defined at the back, and whose priority is higher.

Note: When you import an external style sheet, it must be at the top of the style sheet, that is, in front of the other styles.

They have a total of 5 different points (now known), if there is a new discovery and then to fill the ha.

One: Link is the XHTML tag, in addition to loading CSS, you can also define other transactions such as RSS, @import belong to the CSS category, can only load CSS.

Two: When the link refers to the CSS, it loads at the same time when the page loads, @import need to wait for the page to load completely before loading.

Three: Link is XHTML tag, there is no compatibility problem; for @import, the lower version of the browser is not supported.

Four: Link supports the use of JavaScript to control the DOM to change the style; @import does not support it.

Five: @import can introduce another style sheet in the CSS file again.