Application scenarios:
<head>
<!-- link是标签，引入外部样式表 -->
<link rel="stylesheet" href="./a.css">
<style>
/* @import 在css环境中 导入外部css */
@import url('./b.css');
.box{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
the difference:
- link belongs to html tag. @import is used in css to import external style sheets;
- When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading;
- Import can only be recognized above IE5, and link is an HTML tag, so there is no compatibility problem;
- The weight of link style style is higher than that of @import;
- link supports the use of javascript to change the style (
document.styleSheets), the latter is not