Detailed explanation of 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 import method:

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

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

Import method and chain The way it is imported is very similar, but in fact it is equivalent to existing in the internal style sheet. Even so, its priority is still lower than that of the internal style sheet, and its priority compared with the linked style sheet depends on its location. In order, whoever is defined later will have higher priority.

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 I know). I will add them 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 explanation of the difference between link and @import in CSS introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. . I would also like to thank you all for your support of the PHP Chinese website!

For more detailed explanations of the differences between link and @import in CSS, please pay attention to the PHP Chinese website!