The difference between link and @import

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

Link method:

<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="index.css"</span><span style="color: #0000ff;">></span>

@import import method:

 <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
  @import url('index.css');
  </span><span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>

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

The importing method is very similar to the linking method, but in fact it is equivalent to existing in the internal style sheet. Even so, its priority is still lower than the internal style sheet, and It has the same priority as the linked style sheet The level depends on the order of the position. Whoever is defined later will have a 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.