import link的具體區(qū)別

我們知道在網(wǎng)頁(yè)中引用外部CSS有兩種方式,即:@import與link,我們也經(jīng)常聽到有人說(shuō)要使用link來(lái)引入CSS更好,但是你知道為什么嗎?
link
link就是把外部CSS與網(wǎng)頁(yè)連接起來(lái),具體形式
@import
import文字上與link的區(qū)別就是它可以把在一個(gè)CSS文件中引入其它幾個(gè)CSS文件,具體形式
<!--
@import url("styles.css");
-->
為什么使用@import
大部分使用@import方式的人是因?yàn)榕f的瀏覽器是不支持@import方式的,這意味著我們可以使用@import來(lái)引入只讓現(xiàn)代瀏覽器解析的CSS樣式.
使用以下代碼可以使IE6及以下的瀏覽器無(wú)法解析該CSS(IE6以下的屬于年久失修在這里略去方法)
@import url(../style.css) screen;
另一個(gè)主要的原因就是當(dāng)你的網(wǎng)頁(yè)需要引入幾個(gè)外部CSS文件時(shí).你可以使用link引入一個(gè)CSS,然后在這個(gè)CSS文件中用@import方式引入其它幾個(gè)CSS文件.這樣看起來(lái)更容易管理.
為什么使用link
使用link方式一個(gè)最主要的原因就是你可以讓用戶切換CSS樣式.現(xiàn)代瀏覽器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”屬性(即可在瀏覽器上選擇不同的風(fēng)格),當(dāng)然你還可以使用Javascript使得IE也支持用戶更換樣式.
如不明白,請(qǐng)進(jìn)入這個(gè)頁(yè)面,然后在Firefox中點(diǎn)擊”查看-頁(yè)面風(fēng)格”.
@import的小毛病
如果你網(wǎng)頁(yè)head標(biāo)簽里面十分簡(jiǎn)單,只有@import屬性的話,當(dāng)用戶瀏覽的網(wǎng)速較慢時(shí),他會(huì)看到一個(gè)沒有風(fēng)格樣式的頁(yè)面,然后隨著CSS文件被下載完成才可以看到應(yīng)有的風(fēng)格.要避免這樣的問題,你需要確保head里至少有一個(gè)script或是link標(biāo)簽.
04-11更新: @import會(huì)使得CSS整體載入時(shí)間變長(zhǎng).并且在IE中會(huì)導(dǎo)致文件下載次序被更改,例如放置在@import后面的script文件會(huì)在CSS之前被下載.
詳情請(qǐng)參考http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
到底要用那種方式
就目前看來(lái)小型的網(wǎng)站還是使用link比較合適(或者說(shuō)比較流行),當(dāng)然如果將來(lái)我們需要把CSS進(jìn)行模塊化管理也肯定要用到@import.
文章部分翻譯自What’s the Difference Between @import and link for CSS? 以作學(xué)習(xí)之用,歡迎補(bǔ)充.
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇全面了解link與import方式的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-07-12
- link引用CSS時(shí),在頁(yè)面載入時(shí)同時(shí)加載;@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載;ink支持使用Javascript控制DOM去改變樣式;而@import不支持等等,感興趣的朋友可以參考下哈2013-04-03
引入CSS的方式有哪些?link和@import的有何區(qū)別應(yīng)如何選擇
有一些頁(yè)面比較簡(jiǎn)單,流量很大的網(wǎng)站,是直接將CSS寫在html代碼中的?他們有什么區(qū)別?CSS用import還是link好?本文搜集整理了一下,感興趣的朋友可以看看哦,希望本人對(duì)你2013-01-23- 們知道在網(wǎng)頁(yè)中引用外部CSS有兩種方式,即:@import與link,我們也經(jīng)常聽到有人說(shuō)要使用link來(lái)引入CSS更好,但是你知道為什么嗎2009-06-26
- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:本文描述了一個(gè)在IE6下用import導(dǎo)入CSS的問題! 在ie 6中可以先寫CSS再加import比如 p {} @import url("base.css");2009-04-02
- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:這兩天剛寫完XHTML加載CSS的幾種方式,其中外部引用CSS分為兩種方式link和@import。 有很多網(wǎng)頁(yè)中的CSS鏈接與引用是這樣寫的:2009-04-02
CSS兩種方式link和@import-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
看到淘寶網(wǎng)頁(yè)中大部分是這樣寫的 <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)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
看到淘寶網(wǎng)頁(yè)中這樣寫使用的是import,而很多網(wǎng)站都是使用link,當(dāng)然還有一些頁(yè)面比較簡(jiǎn)單,流量很大的網(wǎng)站,是直接將CSS寫在html代碼中的?他們有什么區(qū)別?css用impor2008-10-17CSS中l(wèi)ink和@import的區(qū)別說(shuō)明
link與@import這兩種方式都是為了加載CSS文件,但還是存在著細(xì)微的差別。下面腳本之家小編給大家介紹CSS中l(wèi)ink和@import的區(qū)別說(shuō)明,感興趣的朋友一起看下吧2016-08-12