@import与link的区别

我们在网页中使用引用css的经典方式如下所示：

/* Error on CSS文件 : Something went wrong: URL 无效。 */

关于link标签，请参阅link属性详解除了使用link的方式引入CSS外，我们还可以@import方式来引入样式表文件，语法如下：

或者

@import url(css文件的路径); /*要放在样式表文件的开头部分，否则不加载；加载顺序：最后加载*/

既然两者都能够加载CSS文件，那么两者的区别在哪里呢？下面就来说说@import与link的区别
1.最主要的区别在于link标签是属于xhtml范畴，而@import则是css2.1中特有的
2.加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@import则在整个页面加载完成后才加载
3.兼容性的区别，因@import是CSS2.1才特有的，所以对于不兼容CSS2.1的浏览器来说，无效
4.在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别，此时@import就无能为力了

为了演示上述区别，特增加一个示例，内容如下：

说明：这些样式文件内容一样，除了a.css的内容如下：

@import url(”1.css”);/*请放在样式文件的最前面*/
p{font-size:12px; color:#FF0000;}

我们通过使用firefox的Firebug查看文件加载时的情况如下：

通过研究我们发现，a.css中的@import url(”1.css”);在最后才加载，其它的则按正常的顺序加载。所以我们在书写样式时，尽量使用link的方式。当然在IE中是否也是这样，就没有考量了。

本页重点：@import与link的区别