眾多周知，有兩種方法可以在頁面中導入樣式文件。
-
<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 | ∞（無窮大） |