CSS @import與link的具體區(qū)別

link
link就是把外部CSS與網(wǎng)頁連接起來,具體形式:
<link rel='stylesheet' href='style.css' type='text/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;
另一個主要的原因就是當你的網(wǎng)頁需要引入幾個外部CSS文件時.你可以使用link引入一個CSS,然后在這個CSS文件中用@import方式引入其它幾個CSS文件.這樣看起來更容易管理.
為什么使用link
使用link方式一個最主要的原因就是你可以讓用戶切換CSS樣式.現(xiàn)代瀏覽器如Firefox,Opera,Safari都支持rel="alternate stylesheet"屬性(即可在瀏覽器上選擇不同的風格),當然你還可以使用Javascript使得IE也支持用戶更換樣式.
如不明白,請進入這個頁面,然后在Firefox中點擊"查看-頁面風格".
@import的小毛病
如果你網(wǎng)頁head標簽里面十分簡單,只有@import屬性的話,當用戶瀏覽的網(wǎng)速較慢時,他會看到一個沒有風格樣式的頁面,然后隨著CSS文件被下載完成才可以看到應有的風格.要避免這樣的問題,你需要確保head里至少有一個script或是link標簽.
04-11更新: @import會使得CSS整體載入時間變長.并且在IE中會導致文件下載次序被更改,例如放置在@import后面的script文件會在CSS之前被下載.
詳情請參考http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
到底要用那種方式
就目前看來小型的網(wǎng)站還是使用link比較合適(或者說比較流行),當然如果將來我們需要把CSS進行模塊化管理也肯定要用到@import.
參考資料:What's the Difference Between @import and link for CSS? 以作學習之用,歡迎補充.
相關文章
- 這篇文章主要介紹了css link與@import區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習2019-10-14
CSS中l(wèi)ink和@import的區(qū)別說明
link與@import這兩種方式都是為了加載CSS文件,但還是存在著細微的差別。下面腳本之家小編給大家介紹CSS中l(wèi)ink和@import的區(qū)別說明,感興趣的朋友一起看下吧2016-08-12css中l(wèi)ink和@import的區(qū)別分析詳解
本文章詳細的介紹了關于link和@import的區(qū)別,有需要了解的朋友可以參考一下本文章2012-03-31- 看到淘寶網(wǎng)頁中這樣寫使用的是import,而很多網(wǎng)站都是使用link,當然還有一些頁面比較簡單,流量很大的網(wǎng)站,是直接將CSS寫在html代碼中的?他們有什么區(qū)別?2009-11-19
- 網(wǎng)頁制作Webjx文章簡介:這兩天剛寫完XHTML加載CSS的幾種方式,其中外部引用CSS分為兩種方式link和@import。 有很多網(wǎng)頁中的CSS鏈接與引用是這樣寫的:2009-04-02
CSS兩種方式link和@import-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
看到淘寶網(wǎng)頁中大部分是這樣寫的 <style type="text/css" media="screen"> @import url("http://www.taobao.com/home/css/global/v2.0.2008-10-31css用import還是link的區(qū)別-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
看到淘寶網(wǎng)頁中這樣寫使用的是import,而很多網(wǎng)站都是使用link,當然還有一些頁面比較簡單,流量很大的網(wǎng)站,是直接將CSS寫在html代碼中的?他們有什么區(qū)別?css用impor2008-10-17- CSS的link和@import都是用于引入外部CSS文件的方法,但它們有一些區(qū)別和不同的用法,本文通過一個簡單的代碼演示,展示了link和@import的用法,感興趣的朋友跟隨小編一起看2023-05-04