css外部样式导入方式：link和@import对比

相同：

都是外部引入CSS样式的方式

不同：

1 语法结构

link 

只能在html中引用 

<link rel="stylesheet" type="text/css" href="css文件路径">

@import

1）在html中引用，必须加标签<style type="text/css"></style>

@import url(CSS文件路径)

2）在css中引用

@import url(CSS文件路径)

注意：在css文件中再引入css文件，这样多个CSS文件的做法，会增加http的请求次数，影响浏览器的并行下载，还会导致下载顺序混乱。

2 本质区别

link属于XHTML标签，除了可以加载CSS外，还可以定义联系信息、定义 RSS、rel 连接属性等。

@import是CSS提供的一种方式，就只能加载CSS。

3 兼容性问题

link不具有兼容性问题，@import是CSS2.1才有的语法，只能在IE5+才支持。

4 加载顺序不同

link引入的文件在页面加载的同时就会被加载，@import引入的文件需要等页面加载完成后才会被加载

5 使用DOM控制样式的差别

link是html标签，所以可以使用JavaScript操作DOM改变样式，@import无法使用

 

注意： link引入的样式权重大于@import引入的样式

 

参考链接：https://www.jianshu.com/p/fc1f27ce2e4f