CSS 的導入方式 (link or import ?)
前言
最常看見的CSS的使用方式有三種
1. 在span, div 等標簽上直接使用 style 屬性定義CSS
<span style="color:blue">This is Blue.</span>
2. 在當前的html 文件中定義class, 在html 標簽中用class 的屬性設置。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/css"> .blue{ color:blue } </style> </HEAD> <BODY> <span class="blue">This is Blue.</span> </BODY> </HTML>
3. 第三種方式就是把CSS 的定義單獨到一個文件中， html 文件中使用link 引入css文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <link href="blue.css" rel="stylesheet" type="text/css" /> </HEAD> <BODY> <span class="blue">This is Blue.</span> </BODY> </HTML>
4. 除了以上方式之外， 還有一種方式就是使用 @import
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/css"> @import url(blue.css); </style> </HEAD> <BODY> <span class="blue">This is Blue.</span> </BODY> </HTML>
前兩種方式自不必多說， 這裏比較一下 link 和 @import 的方式？
Link 與 @import 差異
1. 來源與作用。 link 屬於 XHTML 標簽， 除了可以加載CSS外， 還可以定義RSS, 定義rel 連接屬性等其他作用；
而@import 完全是CSS提供的一種方式， 只能加載CSS。
2. 加載順序不同。 link 引用的CSS會在頁面被加載的時候同時加載；
而@import 引用的CSS會等到頁面全部被下載完再被加載， 所以有時候會出現開始沒有樣式，之後頁面閃爍一下出現樣式（在網速慢的時候會更明顯）。
3. 兼容性的差別。 @import 是CSS2.1 提出的，老的瀏覽器不支持，IE5 以上的才能識別（不過現在來說，已經不是問題了，應該很少有使用IE5及以下的瀏覽器了）。
link 瀏覽器都支持。
4. 使用javascript 可以控制到 link, 但@import 卻無法控制。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <link id="linkId" href="" rel="stylesheet" type="text/css" /> </HEAD> <BODY> <span class="blue">This is Blue.</span> <script> document.getElementById("linkId").href = "blue.css"; </script> </BODY> </HTML>
5. @import 可以在CSS 中再此引入其他樣式表。可以創建一個主樣式表， 在主樣式表中引入其他的樣式表。
這樣的好處是便於修改和擴展。
CSS拆分成文件, 雖然對於開發和維護來說比較方便和清晰， 但是有一個缺點是會對網站服務器產生較多的HTTP請求。瀏覽量大的網站還是謹慎使用，像一些大型訪問量大的網站的首頁，會直接把CSS或js 直接寫在html 中。
如果你想樣式表並行載入，以使頁面更快，請使用LINK 替代@import。
CSS 的導入方式 (link or import ?)