Let’s talk about the difference between link and @import in CSS

We all know that both link and @import can introduce css style sheets, so what is the difference between the two? Let’s talk about their respective linking methods first, and then talk about their differences~~~

Link linking method:

<link rel="stylesheet" type="text/css" href="index.css">  
@import导入的方式：

<style type="text/css">   
 @import url(&#39;index.css&#39;);   
</style>

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

The import method is very similar to the link method, but in fact it is equivalent to existence In the internal style sheet, despite this, its priority is still lower than that of the internal style sheet, and the priority between it and the linked style sheet depends on the order of location. Whoever defines it later will have priority. high.

Note: When importing an external style sheet, its location must be at the top of the style sheet, that is, in front of other styles.

There are a total of 5 differences between them (as far as we know so far). I will add more if there are new discoveries in the future.

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

2: When link references CSS, it is loaded at the same time when the page is loaded; @import needs to wait until the page is completely loaded before loading.

Three: link is an XHTML tag, there is no compatibility issue; for @import, lower version browsers do not support it.

Four: link supports using javascript to control the DOM to change the style; @import does not support it.

5: @import can introduce other style sheets again in the CSS file.

The above is the detailed content of Let’s talk about the difference between link and @import in CSS. For more information, please follow other related articles on the PHP Chinese website!