眾多周知，有兩種方法可以在頁面中匯入樣式檔案。
-
<link href="a.css" rel="stylesheet"> -
<style> @import url('a.css'); </style>
1. 用法區別
@import是 CSS 提供的語法規則，只有匯入樣式表的作用；link是HTML提供的標籤，不僅可以載入 CSS 檔案，還可以定義 RSS、rel等屬性 。
2. 載入順序區別
載入頁面時，link標籤引入的 CSS 被同時載入；@import引入的 CSS 會等到頁面全部被下載完再被載入。該規則必須在樣式表頭部最先宣告。並且其後的分號是必需的，如果省略了此分號，外部樣式表將無法正確匯入，並會生成錯誤資訊,而事實證明，避免使用@import 同樣對網站效能有益。
3. 相容性區別
@import是 CSS2.1提出的語法，故只可在 IE5+ 才能識別；link標籤作為 HTML 元素，不存在相容性問題。
4. DOM可控性區別
可以通過 JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於文件的，無法使用@import的方式插入樣式。
5. 載入機制區別
@import @import
// 如果一直使用@import，那麼就沒有什麼效能問題 兩個樣式檔案將同時並行下載
<style>
@import url('a.css');
@import url('b.css');
</style>
LINK @import
這個LINK @import的例子使用LINK載入a.css，使用@import匯入b.css:
// 會導致樣式表檔案逐個載入，並行下載資源是加速頁面的一個關鍵,在IE中link混合@import 會破壞並行下載
<link href="a.css" rel="stylesheet" type="text/css">
<style>
@import url('b.css');
</style>
LINK巢狀@import
a.css 通過LINK插入到頁面中，然後a.css 通過@import規則來引入b.css:
// 這種方式同樣阻止並行載入程式碼，但是這次是對於所有的瀏覽器,其實這個應該不會感到奇怪吧，簡單的想一下就能理解了。瀏覽器必須先下載a.css，並分析它，這個時候，瀏覽器發現了@import 規則，然後才會開始載入b.css.
<link href="a.css" rel="stylesheet" type="text/css">
//在a.css中:
@import url('b.css');
LINK 阻斷 @import
使用LINK匯入a.css 和一個新的樣式檔案proxy.css。proxy.css沒有新增額外的樣式，它只是用來通過@import 規則匯入b.css
// 在下載a.css完成之前，IE不會開始下載b.css。但是在其它所有的瀏覽器中，這種情況不會發生
<link href="a.css" rel="stylesheet" type="text/css">
<link href="proxy.css" rel="stylesheet" type="text/css">
//proxy.css的程式碼:
@import url('b.css');
多個@imports
IE中使用@import會引起資源被按照一個不同於預期的順序下載,在IE中，如果指令碼中包含的程式碼，來自樣式表檔案中應用的樣式(比如getElementsByClassName)， 那麼就將可能會發生意外的結果，因為指令碼先於樣式被載入，儘管開發人員將其置於程式碼的最後面。
// @import在IE中引發資原始檔的下載順序被打亂
<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>
<script src="one.js" type="text/javascript"></script>
LINK LINK
使用LINK來引入樣式更簡單和安全,使用LINK 可確保樣式在所有瀏覽器裡面都能被並行下載,同樣能保證資源按照開發人員制定的順序下載。
<link href="a.css" rel="stylesheet" type="text/css">
<link href="b.css" rel="stylesheet" type="text/css">
6. 關於權重的區別，一直有爭議
link引入的樣式權重大於@import引入的樣式。
@import只是一個引入外部檔案而已，怎麼會有高於link的權重呢？閱讀了前輩的文章，我覺得說的是正確的，我也就懶得寫demo了，總結一下就是：
參考文獻: 高效能網站設計：不要使用@import 、由link和@import的區別引發的CSS渲染雜談
-
CSS 中的權重: 指的是選擇器的優先順序。
-
CSS 的優先順序特性表現為: 對同一 HTML 元素設定樣式時，不同選擇器的優先順序不同，優先順序低的樣式將被高優先順序的樣式層疊掉。
-
元素最終的表現樣式：
-
優先以選擇器權重為參考，CSS 選擇器的權重高，即選擇器的優先順序高；
-
其次以樣式載入順序為參考，相同權重時，後載入的優先順序越高（最近優先原則）
-
-
CSS 權重優先順序順序簡單表示為：!important > 行內樣式 > ID > 類、偽類、屬性 > 標籤名 > 繼承 > 萬用字元
為了便於理解權重的計算方式，我們按以下方式進行數值假設分析：
| 選擇器 | 權重 |
|---|---|
| 萬用字元 | 0 |
| 標籤 | 1 |
| 類/偽類/屬性 | 10 |
| ID | 100 |
| 行內樣式 | 1000 |
| !important | ∞（無窮大） |