我們知道在網頁中引用外部css有兩種方式，即:@import與link,我們也經常聽到有人說要使用link來引入css更好,但是你知道為什么嗎?

link

link就是把外部css與網頁連接起來,具體形式

@import

import文字上與link的區(qū)別就是它可以把在一個css文件中引入其它幾個css文件,具體形式

<!--@import url("styles.css");-->

為什么使用@import

大部分使用@import方式的人是因為舊的瀏覽器是不支持@import方式的,這意味著我們可以使用@import來引入只讓現(xiàn)代瀏覽器解析的css樣式.

使用以下代碼可以使ie6及以下的瀏覽器無法解析該css(ie6以下的屬于年久失修在這里略去方法)

@import url(../style.css) screen;

另一個主要的原因就是當你的網頁需要引入幾個外部css文件時.你可以使用link引入一個css,然后在這個css文件中用@import方式引入其它幾個css文件.這樣看起來更容易管理.

為什么使用link

使用link方式一個最主要的原因就是你可以讓用戶切換css樣式.現(xiàn)代瀏覽器如firefox,opera,safari都支持rel=”alternate stylesheet”屬性(即可在瀏覽器上選擇不同的風格),當然你還可以使用javascript使得ie也支持用戶更換樣式.

如不明白,請進入這個頁面,然后在firefox中點擊”查看-頁面風格”.

@import的小毛病

如果你網頁head標簽里面十分簡單,只有@import屬性的話,當用戶瀏覽的網速較慢時,他會看到一個沒有風格樣式的頁面,然后隨著css文件被下載完成才可以看到應有的風格.要避免這樣的問題,你需要確保head里至少有一個script或是link標簽.

04-11更新:  @import會使得css整體載入時間變長.并且在ie中會導致文件下載次序被更改,例如放置在@import后面的script文件會在css之前被下載.

詳情請參考http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

到底要用那種方式

就目前看來小型的網站還是使用link比較合適(或者說比較流行),當然如果將來我們需要把css進行模塊化管理也肯定要用到@import.

文章部分翻譯自what’s the difference between @import and link for css? 以作學習之用,歡迎補充.