CSS引用方式import與link的具體區(qū)別_CSS教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

　　我們知道在網(wǎng)頁(yè)中引用外部CSS有兩種方式，即:@import與link,我們也經(jīng)常聽到有人說(shuō)要使用link來(lái)引入CSS更好,但是你知道為什么嗎?

　　link

示例代碼 [www.wf0088.com]

　　link就是把外部CSS與網(wǎng)頁(yè)連接起來(lái),具體形式
　　<link href="/tz.php?url=www.wf0088.com/styles.css" type="text/css" />

　　@import

示例代碼 [www.wf0088.com]

　　import文字上與link的區(qū)別就是它可以把在一個(gè)CSS文件中引入其它幾個(gè)CSS文件,具體形式
　　<style type="text/css">@import url("http://www.wf0088.com/styles.css");</style>

　　為什么使用@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文件.

　　為什么使用link
　　使用link方式一個(gè)最主要的原因就是你可以讓用戶切換CSS樣式.現(xiàn)代瀏覽器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”屬性(即可在瀏覽器上選擇不同的風(fēng)格),當(dāng)然你還可以使用Javascript使得IE也支持用戶更換樣式.

　　@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)格.要避免這樣的問(wèn)題,你需要確保head里至少有一個(gè)script或是link標(biāo)簽

　　到底要用那種方式
　　就目前看來(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ǔ)充.
　　
　　