link和@import导入css的区别

在群里面有人提出link和@import的区别,细想一下,我还真不知道,于是乎google了一下，记录于此。

 

首先展示一下二者的写法

 

    大部分网站采用的link方式：

   

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

 

    @import 方式

<style type="text/css" media="screen">
@import url("style.css");
</style>

 二者均是为了加载css文件，但有如下几个小小的差别：

 

1. 本质区别：

link是为当前页服务，属于XHTML标签，除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性

@import是为css服务，是属于css的一种方式，只能用来引入css

2. 加载顺序:

当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，页面会出现闪烁。

3.兼容性:

link所有浏览器均可以兼容

@import是css2.1才提出来的，所有一些老的浏览器不支持，只有IE5以上的才能识别。

4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。