【前端】link 和 @import 的区别

link 和 @import 的区别（ link 属于 XHTML 标签，而 @import 是 CSS 提供的）

1. 引用的方式不同：

link(外部引用): <link rel="stylesheet" href="xxx.css"  type="text/css" />

@import(导入式): @import url(xxx.css);

2. 放置的位置不同：link 一般放在 head 标签中，而 @import 必须放在 <style  type="text/css"> 标签中。

3. 加载方式不同：link 会和 dom 结构一同加载渲染，而 @import 只能等 dom 结构加载完成以后才能加载渲染页面。

4. 兼容性不同：@import 只能在 IE6 以上才能识别，而 link 是 XHTML 标签，无兼容问题。

5. 样式权重不同：link 方式的样式的权重高于 @import。

6. 改变样式：link 支持使用 JavaScript 改变样式，而 @import 不可以。

7. 加载内容不同：link 除了可以加载 css 文件以外，还可以加载 MIME 类型的文件；而 @import 只能加载 css 文件。

 

参考：

外部引用css时，link和@import两种区别

END