HTML | 外部引入 CSS 的2种方式：link和@import有什么区别？

外部引入 CSS 有2种方式，link 和 @import。就结论而言，强烈建议使用 link ，慎用 @import 方式。

两者都是外部引用 CSS 的方式，但是存在一定的区别： 

（1）从属关系区别

link是HTML / XHTML标签，除了能够加载CSS，还可以定义rel、RSS等属性；

<link rel="stylesheet" href="style.css">

而@import属于CSS范畴，只可以加载CSS。

<style>
  @import url("theme.css");
  body {
    font-size: 20px;
  }
</style>

因此，link可以在HTML中使用，而@import只能在CSS中使用。 

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

（2）加载顺序区别
link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。

加载页面时，link标签引入的 CSS 在加载页面时会被同时加载；@import引入的 CSS 将在页面加载完毕后才会被加载，因此，可能会导致页面加载速度变慢。

（3）兼容性区别

link是HTML / XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持，只可在 IE5+ 才能识别；

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素 / 标签，不存在兼容性问题。

（4）DOM可控性区别 (DOM操作能力)

link支持使用Javascript控制DOM改变样式；而@import不支持。

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

‌（5）两者的权重不同（有争议）‌

@import 的权重要高于 link‌。

也有说，link 引入的样式权重大于 @import 引入的样式

相关参考

引入外部样式表：link和@import有什么区别？