我們知道在網(wǎng)頁中引用外部CSS有兩種方式,即:@import與link。 【注意】 如果您不知道網(wǎng)頁中引用CSS樣式共有幾種方式,可以去看一下這節(jié)《基礎(chǔ)四:CSS如何控制頁面》 我們也經(jīng)常聽到有人說要使用link來引入CSS更好,但是你知道為什么嗎? 繼續(xù)往下看 link link就是把外部CSS與網(wǎng)頁連接起來。 @import import文字上與link的區(qū)別就是它可以把在一個CSS文件中引入其它幾個CSS文件。 為什么使用@import 大部分使用@import方式的人是因為舊的瀏覽器是不支持@import方式的,這意味著我們可以使用@import來引入只讓現(xiàn)代瀏覽器解析的CSS樣式. 另一個主要的原因就是當(dāng)你的網(wǎng)頁需要引入幾個外部CSS文件時.你可以使用link引入一個CSS,然后在這個CSS文件中用@import方式引入其它幾個CSS文件.這樣看起來更容易管理. 為什么使用link 使用link方式一個最主要的原因就是你可以讓用戶切換CSS樣式.現(xiàn)代瀏覽器如Firefox,Opera,Safari都支持rel="alternate stylesheet"屬性(即可在瀏覽器上選擇不同的風(fēng)格),當(dāng)然你還可以使用Javascript使得IE也支持用戶更換樣式. @import的小毛病 如果你網(wǎng)頁head標(biāo)簽里面十分簡單,只有@import屬性的話,當(dāng)用戶瀏覽的網(wǎng)速較慢時,他會看到一個沒有風(fēng)格樣式的頁面,然后隨著CSS文件被下載完成才可以看到應(yīng)有的風(fēng)格.要避免這樣的問題,你需要確保head里至少有一個script或是link標(biāo)簽. 04-11更新: @import會使得CSS整體載入時間變長.并且在IE中會導(dǎo)致文件下載次序被更改,例如放置在@import后面的script文件會在CSS之前被下載. 到底要用那種方式 就目前看來小型的網(wǎng)站還是使用link比較合適(或者說比較流行),當(dāng)然如果將來我們需要把CSS進行模塊化管理也肯定要用到@import. |
|
來自: 張金富 > 《Web開發(fā)》