The difference between @import and link style calls in CSS

Link
Link is to connect the external CSS with the Web page.

@import
The difference between the import text and link is that it can introduce several other CSS files into a CSS file.

Why use @import
Most people who use the @import approach are because the old browsers do not support the @import approach, which means we can use @import to introduce CSS styles that allow only modern browsers to parse.
Another major reason is when your Web page needs to introduce several external CSS files. You can use link to introduce a CSS, and then introduce several other CSS files in this CSS file in @import. This looks easier to manage.

Why use link
One of the main reasons to use link mode is that you can allow users to switch CSS styles. Modern browsers such as Firefox,opera,safari support the rel= "Alternate stylesheet" attribute (you can choose a different style on the browser), Of course, you can also use JavaScript to enable IE to support user replacement styles.

@import little problem.
If your page head tag inside is very simple, only the @import attribute, when the user browsing speed is slow, he will see a no style style of the page, and then as the CSS file is downloaded to complete before you can see the style. To avoid such problems, You need to make sure that there is at least one script or link tag in the head.
04-11 Update: @import will make the CSS overall load time longer. And in IE it will cause the file download order to be changed, for example, the script file placed behind the @import will be downloaded before CSS.