@import和link 引入css的區別（收藏）

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

　　link

Example Source Code [www.52css.com]

　　link就是把外部CSS與網頁連接起來,具體形式
　　<link href="http://www.52css.com/styles.css" type="text/css" />

　　@import

Example Source Code [www.52css.com]

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

　　爲什麼使用@import
　　大部分使用@import方式的人是因爲舊的瀏覽器是不支持@import方式的,這意味着我們可以使用@import來引入只讓現代瀏覽器解析的CSS樣式.
　　使用以下代碼可以使IE6及以下的瀏覽器無法解析該CSS(IE6以下的屬於年久失修在這裏略去方法)
　　@import url(../style.css) screen;
　　另一個主要的原因就是當你的網頁需要引入幾個外部CSS文件時.你需要使用link引入一個CSS,然後在這個CSS文件中用@import方式引入其它幾個CSS文件.

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

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

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

　　文章部分翻譯自What’s the Difference Between @import and link for CSS? 以作學習之用,歡迎補充.