閑來無事，翻看各個門戶網站的代碼。發現在引用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方法。