link 和@import 的区别

1、适用范围不同

​ @import： 可以在网页页面中使用，也可以在 CSS 文件中使用，用来将多 个 CSS 文件引入到一个 CSS 文件中；

​ link： 只能将 CSS 文件引入到网页页面中 。

2、功能范围不同

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

​ link： 属于 XHTML 标签，link 标签除 了可以加载 CSS 外，还可以定义 RSS，定义 rel 连接属性等。

3、加载顺序不同

​ 当一个页面被加载的时候，

​ @import： 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import 加载 CSS 的页 面时开始会没有样式（就是闪烁），网速慢的时候还挺明显 ；

​ link： 引用的 CSS 会同时被加载。

4、兼容性

​ @import ：是 css2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别；

​ link： 标签无此问题 。

5、控制样式时的差别

​ link： 方式可以让用户切换 CSS 样式.现代浏览器如 Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”属性(即可在浏览器上选择不同 的风格), 当然你还可以使用 Javascript 使得 IE 也支持用户更换样式

6、权重区别

​ link 引入的样式权重大于@import 引入