区别
- 加载顺序
- link引入的css在加载页面时同时加载,而@import中的css要在页面加载完毕后加载
- 从属关系
- link是HTML提供的标签
- @import是css的语法规则,只能加载在style标签内和css文件中
- 兼容性
- @import是css2.1时提出的,只能用于IE5+,而link不受兼容影响
- DOM可控性
- link支持js控制DOM改变样式,而@import不支持
@import 的用法
- @import必须写在样式顶部,即import规则一定要先于除了@charset的其他任何CSS规则 ———MDN
- 引入位置
- 在html中
<style>@import url(引入的css路径);/*这个必须要写在style的第一行*/</style>
- 在css中
@import url(引入的css路径);
@import "引入的css路径"; /*这个@import必须要写在CSS的第一行*/
- 在html中
不推荐使用@import
- 影响浏览器的并行下载
- 多个@import的使用会使浏览器下载顺序紊乱