从实际使用分析CSS引用方式的异同

闲来无事，翻看各个门户网站的代码。发现在引用CSS的方式上存在很大的区别，主要表现为使用 import、link以及在当前页面插入。就我个人而言，一般只用到link方式，所以看到超级大站用其他两种方式不免想要探个究竟，多么可贵的学习精神……

淘宝网用的是import方式，代码如下：

<style type=”text/css” media=”screen”>
@import url(“http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css”);
</style>

而大多数网站和我一样，用的是link方式，比如 paperrater：

<link rel="stylesheet" href="http://www.paper-rater.com/wp-content/themes/paperrater/style.css" type="text/css" media="screen">

百度、google等网站则是直接在网页中书写了许多CSS代码。

直接在页面中写入CSS代码的利弊很清楚了，不方便复用，但利用率高、加载速度快（这也是百度GOOGLE这种对加载速度要求很高的网站选择这种方式的主要原因）。下面主要分析import和link两种方式的异同。

1. 从本质上说：

link方式是一种html标签，而import方式是在CSS代码域中的，因此它是一种CSS的方法，我们也可以说link是为页面提供内容的，而import是为CSS提供内容的。

2. 从加载顺序上说：

link方式引用的CSS会随着该标签所在页面中的位置而被加载，而import所导入的CSS代码则是在整个页面加载完毕之后才载入，这点区别比较重要，在加载速度受到限制时，import方式所影响的页面可能会因为CSS的加载延时而出现页面样式短时不受控制的现象。

3. 从功能上说：

link可以实现很多功能，除了加载CSS，它还可以加载许多其它文件，而import只能加载CSS文件。

4. 从技术结合上说：

link引用的CSS可以通过js寻找DOM进行样式控制，但import由于不在页面的dom中，因此难以被js控制。

5. 从兼容性上说：

link是随着HTML的出现而出现，随着HTML的发展而发展，因此基本上不存在兼容性问题，而import方式是在CSS的2.1版本中才提出来的，因此非常非常非常陈旧的浏览器不支持这一CSS方法。