css文件引入:link @import

import用法:

<style type="text/css">
?@import "style.css";@import url("style.css");
</style>

注意:不過最好不要使用@import,因為使用它加載的樣式文件會等到頁面都加載完成再被加載,這樣可能會導致頁面瀏覽出現問題,建議使用標簽替代。使用import相當于把css放于底部加載。(這個是百度出來的說法)

我們確實要避免使用css @import, 但原因卻不是什么相當于放在了頁面底部,而是這樣做會導致css無法并行下載,因為使用@import引用的文件只有在引用它的那個css文件被下載、解 析之后,瀏覽器才會知道還有另外一個css需要下載,這時才去下載,然后下載后開始解析、構建render tree等一系列操作。 星球瀏覽器在頁面所有css下載并解析完成后才會開始渲染頁面,因此css @import引起的css解析延遲會加長頁面留白期。 所以,要盡量避免使用css @import而盡量采用link標簽的方式引入。

對@import url()做一下總結:

  1. @import url()機制是不同于link的,link是在加載頁面前把css加載完畢,而@import url()則是讀取完文件后在加載,所以會出現一開始沒有css樣式,閃爍一下出現樣式后的頁面(網速慢的情況下)。
  2. @import 是css2里面的,所以古老的ie5不支持。
  3. 當使用javascript控制dom去改變樣式的時候,只能使用link標簽,因為@import不是dom可以控制的。
  4. link除了能加載css外還能定義RSS,定義rel連接屬性,@import只能加載css。
  5. @import url(xxx.css); 有最大次數的限制,經測試IE6的最大次數是31次,第32個import及以后的都不能生效
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,837評論 18 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • 問答題1 /72瀏覽器頁面有哪三層構成,分別是什么,作用是什么?參考答案構成:結構層、表示層、行為層分別是:HTM...
    _Yfling閱讀 1,223評論 0 23
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,593評論 32 459
  • 嘿,你還好嗎? 還記得那年那個午后,我與你的第一眼遇見。你可能不知道,當時我的心跳的很快,我想那就是一...
    虞西涼閱讀 237評論 0 0