Difference in the usage of css file introduced by link and @ import in css

1. Two methods for referencing external CSS in a webpage

There are two ways to reference external CSS files on a webpage: link and @ import. The two methods are the same on the page.
Link reference is as follows:
<Link href = "styles.css" type = "text/css"/> The @ import reference method is as follows:
<Style type = "text/css"> @ import url ("styles.css"); </style>
2 Difference

2.1 different applicability
@ Import can be used on webpages or css files to introduce multiple css files to one css file; link can only introduce css files to webpages.
   
2.2 Different functions
Link is an XHTML label, while @ import is a method provided by CSS. In addition to loading CSS, link labels can also define RSS and rel connection attributes, @ import can only load CSS.

2.3 different loading sequence
When a page is loaded, the CSS referenced by link is loaded at the same time, and the CSS referenced by @ import is loaded after the page is downloaded. So sometimes when you browse the page where @ import loads CSS, there will be no style (that is, flashing) at the beginning, and the speed is quite slow.

2.4 Compatibility
Because @ import is proposed by css2.1, it is not supported by the old browser. @ import can be identified only when it is later than IE5, but the link label does not have this problem.

2.5 Differences in style control
The link method allows users to switch CSS styles. modern browsers such as Firefox, Opera, and Safari support the rel = "alternate stylesheet" attribute (you can select different styles on the browser ), of course, you can also use Javascript to enable IE to change the style.

Of course, if you write styles directly on a webpage, the HTTP requests generated by the website server will be reduced to avoid loading slow problems, but the maintenance volume will increase.