CSS技巧：import與link的詳細區別

我們知道在網頁中引證外部CSS有兩種方法，即:@import與link,我們也經常聽到有人說要運用link來引進CSS更好,可是你知道為什么嗎?

 

　　link

 

　　link便是把外部CSS與網頁連接起來,詳細方法

 

　　@import

 

　　import文字上與link的區別便是它能夠把在一個CSS文件中引進其它幾個CSS文件,

 

　�。�!--

 

　　@import url("styles.css");

 

　　-->

 

　　為什么運用@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也支撐用戶替換款式.

 

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

 

　　@import的小毛病

 

　　假如你網頁head標簽里面十分簡略,只有@import特點的話,當用戶閱讀的網速較慢時,他會看到一個沒有風格款式的頁面,然后跟著CSS文件被下載完成才能夠看到應有的風格.要避免這樣的問題,你需求保證head里至少有一個script或是link標簽.

 

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

 

　　到底要用那種方法

 

　　就目前看來小型的網站還是運用link比較合適(或者說比較盛行),當然假如將來我們需求把CSS進行模塊化辦理也肯定要用到@import.但在某些特定的場景下，可能會根據具體需求選擇 import 。