A detailed explanation of the differences 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" >

How to @import import:

<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 I know), 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.

The above is a small part of the CSS to introduce the difference between link and @import, I hope that we have some help, if you have any questions please give me a message, small series will promptly reply to you. Thank you very much for your support for topic.alibabacloud.com!