@import与link的区别

  • 发表于
  • 前端

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

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

或者

既然两者都能够加载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的内容如下:

我们通过使用firefox的Firebug查看文件加载时的情况如下:
@import与link的区别

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

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