前端面試-頁面導入樣式時，使用link和@import有什么區別

　　外部樣式表必須導入到網頁文檔（HTML）中，才能夠被瀏覽器識別和解析。外部樣式表文件可以通過兩種方法導入到 HTML 文檔中。

　　一般推薦使用 link 導入樣式表的方法，@import 可以作為補充方法使用。

　　1. 使用<link>標簽導入,鏈接樣式

示例：

　　<link href="xxx.css" rel="stylesheet" type="text/css" />

  href 屬性設置外部樣式表文件的地址，可以是相對地址，也可以是絕對地址。
  rel 屬性定義關聯的文檔，這里表示關聯的是樣式表。
  type 屬性定義導入文件的類型，同 style 元素一樣，text/css表明為 CSS 文本文件。

　　2. 使用@import關鍵字導入

示例：

<style type="text/css">
　　@import url("xxx.css")
</style>

@import是 CSS 提供的語法規則，只有導入樣式表的作用；

在 @import 關鍵字后面，利用 url() 函數包含具體的外部樣式表文件的地址。

　　兩者區別

1. 從屬關系區別：link 屬於 HTML 標簽，而 @import 是 CSS 提供的。
2. 加載順序區別：頁面被加載時，link 會同時被加載，而 @import 引用的 CSS 會等到頁面被加載完再加載。
3. @import 是 CSS2.1 才有的語法, 只在 IE 5 以上才能識別，而 link 是 HTML 標簽，無兼容問題。
4. 權重區別：link 方式的樣式的權重高於 @import 權重。
5. 兼容性區別：link 沒有兼容性問題，@import 不兼容 ie5 以下。
6. dom可控性區別：可以通過 JS 操作 DOM ，是否插入link標簽來起到改變樣式的作用；由於DOM方法是基於文檔的，無法使用 @import 的方式插入樣式。

　　除了以上兩種導入方式以外還可以通過一下兩種方式引入樣式

　　3. 內聯樣式　

示例：
<div style="background:red"></div>

就是直接在標簽里邊直接寫

　　4.嵌入樣式

示例：
<style>
.content {
　　background: red;
}
</style>

只對當前html有效

　　5. css權重計算

!important > 行內樣式 > ID > 類、偽類、屬性 > 標簽名 > 繼承 > 通配符