1. link和@import都可以為頁面引入CSS檔案,其區別是?

將樣式定義在單獨的.css的檔案裡，link和@import都可以在html頁面引入CSS檔案。

link和@import 有2種方式,匯入方式如下: 

• link方式: 

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

• @import方式:

  <style type="text/css">
      @import "xxx.css";
  </style>

link 和 @import 兩種匯入CSS檔案的區別:  

• 祖先的區別。 link屬於XHTML標籤,而@import完全是CSS提供的一種方式。link標籤除了可以載入CSS外,還可以做很多其它的事情,比如定義RSS,定義rel連結屬性等;@import就只能載入CSS了;
• 載入順序的差別。當一個頁面被載入的時候(瀏覽器瀏覽的時候),link引用的CSS會同時被載入, 而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽器@import載入CSS的頁面時開始會沒有樣式(就是閃爍),網速慢時更為明顯;
• 相容性的差別。由於@import引用的CSS2.1提出的所以老的瀏覽器不支援,@import只有在IE5以上的才能識別,而link尿潛無此問題。
• 使用DOM控制樣式時的差別。當使用JS控制DOM去改變樣式的時候,只能使用link標籤,因為@import不是DOM可以控制的;
• @import可以在CSS中再次引入其他樣式表,比如可以建立一個主樣式表,在住樣式表中在引入其他樣式表。

2. 如何理解CSS樣式表的層疊性?