【对比分析三】CSS中 link 和@import 的区别

1).  link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，只有IE5以上才能识别。

2).  语法结构不同。

　　link （链接式）只能放入HTML源码中，语法为：

 <link rel="stylesheet" href="style.css" type="text/css"/>

　　@import （导入式）语法为：

 <style type="text/css">

     @import url("style.css");

 </style>

3).  使用场景不同。

　　link标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS ，定义 rel 连接属性等。

　　@import 看作为 css 的样式，就只能加载 CSS 了。

4).  加载时间不同。

　　页面被加载的时，link会和 HTML 的主体部分同时被加载，而@import引用的CSS会等到页面被加载完再加载。（所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。）

5).  当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制的。

6).  link方式的样式的权重 高于@import的权重。