歡迎來到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

CSS技巧:import與link的詳細(xì)區(qū)別

發(fā)布時(shí)間:2024-07-05 文章來源:本站  瀏覽次數(shù):988
我們知道在網(wǎng)頁中引證外部CSS有兩種方法,即:@import與link,我們也經(jīng)常聽到有人說要運(yùn)用link來引進(jìn)CSS更好,可是你知道為什么嗎?
 
  link
 
  link便是把外部CSS與網(wǎng)頁連接起來,詳細(xì)方法
 
  @import
 
  import文字上與link的區(qū)別便是它能夠把在一個(gè)CSS文件中引進(jìn)其它幾個(gè)CSS文件,
 
 。!--
 
  @import url("styles.css");
 
  -->
 
  為什么運(yùn)用@import
 
  大部分運(yùn)用@import方法的人是因?yàn)榕f的閱讀器是不支撐@import方法的,這意味著我們能夠運(yùn)用@import來引進(jìn)只讓現(xiàn)代閱讀器解析的CSS款式.
 
  運(yùn)用以下代碼能夠使IE6及以下的閱讀器無法解析該CSS(IE6以下的歸于年久失修在這里略去辦法)
 
  @import url(../style.css) screen;另一個(gè)首要的原因便是當(dāng)你的網(wǎng)頁需求引進(jìn)幾個(gè)外部CSS文件時(shí).你能夠運(yùn)用link引進(jìn)一個(gè)CSS,然后在這個(gè)CSS文件中用@import方法引進(jìn)其它幾個(gè)CSS文件.這樣看起來更簡(jiǎn)略辦理.
 
  為什么運(yùn)用link
 
  運(yùn)用link方法一個(gè)首要的原因便是你能夠讓用戶切換CSS款式.現(xiàn)代閱讀器如Firefox,Opera,Safari都支撐rel=”alternate stylesheet”特點(diǎn)(即可在閱讀器上選擇不同的風(fēng)格),當(dāng)然你還能夠運(yùn)用Javascript使得IE也支撐用戶替換款式.
 
  如不明白,請(qǐng)進(jìn)入這個(gè)頁面,然后在Firefox中點(diǎn)擊”查看-頁面風(fēng)格”.
 
  @import的小毛病
 
  假如你網(wǎng)頁head標(biāo)簽里面十分簡(jiǎn)略,只有@import特點(diǎn)的話,當(dāng)用戶閱讀的網(wǎng)速較慢時(shí),他會(huì)看到一個(gè)沒有風(fēng)格款式的頁面,然后跟著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之前被下載.
 
  到底要用那種方法
 
  就目前看來小型的網(wǎng)站還是運(yùn)用link比較合適(或者說比較盛行),當(dāng)然假如將來我們需求把CSS進(jìn)行模塊化辦理也肯定要用到@import.但在某些特定的場(chǎng)景下,可能會(huì)根據(jù)具體需求選擇 import 。

上一條:網(wǎng)頁CSS教程之內(nèi)容設(shè)置...

下一條:網(wǎng)頁中的H1標(biāo)記運(yùn)用七大...