好程式設計師web前端分享CSS檔案引用的最優方法

好程式設計師 web前端分享CSS檔案引用的最優方法，在 html 總引入 css 檔案的方法：

 

　　1 連結式：

 

　　2 匯入式：

 

　　區別：

 

　　使用連結式時，會在載入頁面主體部分之前載入 css 檔案，這樣現實出來的頁面一開始就是帶有樣式效果的，而使用匯入式時，會在整個頁面裝載完成之後再裝載 css 檔案，對於有的瀏覽器來說，在一些情況下，如果頁面檔案的體積比較大，則會出現先現實無樣式的頁面，閃爍一下之後再出現設定樣式的效果。從瀏覽者的感受來說，這是使用匯入式的一個缺陷。 **

 

　　連結式比匯入式快。

 

　　當有多個檔案連結到頁面的時候會導致伺服器傳送更多的資料包，這些資料包的數量 ( 不是內容 ) 會影響下載時間。同時也不好維護。。 瀏覽器從同一個站點同時下載的檔案數量有限制。老式的瀏覽器是 2 個，現代瀏覽器是 8 個，也就是說如果有 9 個樣式表，那麼必須等下載完前 8 個才能開始下載第 9 個。所以連結或匯入多個檔案絕對不是一個好辦法。

 

　　因此這裡給大家的建議是，如果僅引入一個 css 檔案，則使用連結方式 ; 如果需要引入多個 css 檔案，則首先用連結式引入一個簡單的 css 檔案，然後再把其他的 css 檔案匯入到這個檔案中。

 

　　比如你寫了三個 css 樣式表： css_red.css ， css_blue.css ， css_green.css

 

　　這樣你就可以寫一個主樣式 style.css 把三個樣式表都匯入進去：

 

　　@import "css_red.css";

 

　　@import "css_blue.css";

 

　　@import "css_green.css";

 

　　呼叫的時候只連結 style.css 就行了。