CSS基礎:@import與link的具體區別

來源:互聯網
上載者:User
2009-04-15 15:45作者:網頁教學網出處:天極網責任編輯:盛曉瑩



  一般在網頁中引用外部CSS有兩種方式,即:@import與link。常有人說要使用link來引入CSS更好,本文就簡單講解一下其中的區別。

  link:link就是把外部CSS與網頁串連起來,具體形式

  @import:import文字上與link的區別就是它可以把在一個CSS檔案中引入其它幾個CSS檔案,具體形式

  

  為什麼使用@import ?

  大部分使用@import方式的人是因為舊的瀏覽器是不支援@import方式的,這意味著我們可以使用@import來引入只讓現代瀏覽器解析的CSS樣式。

  另一個主要的原因就是當你的網頁需要引入幾個外部CSS檔案時.你可以使用link引入一個CSS,然後在這個CSS檔案中用@import方式引入其它幾個CSS檔案.這樣看起來更容易管理.

  為什麼使用link ?

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

  @import的小毛病

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

  04-11更新: @import會使得CSS整體載入時間變長.並且在IE中會導致檔案下載次序被更改,例如放置在@import後面的script檔案會在CSS之前被下載.

  到底要用那種方式:

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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.