溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

@import與link的區(qū)別與選擇

發(fā)布時間:2020-07-14 22:41:15 來源:網(wǎng)絡 閱讀:281 作者:愛上小媳婦 欄目:開發(fā)技術

link

1 <head>2     <link rel="stylesheet" type="text/css" href="sheet1.css" media="all">3 </head>

@import

1 <style type="text/css">2     @import url(sheet1.css);      
3 </style>

區(qū)別

  • 加載順序:

    link是先將css文件加載到網(wǎng)頁,然后再進行編譯。@import是先加載完html結構再加載css文件,如果網(wǎng)速較慢則會影響視覺效果。

    link確保并行下載css文件,@import是一個一個下載。

    在IE中,link會阻斷@import延長加載時間,多個@import的使用還會打亂資源文件的下載順序引發(fā)js問題。

  • 兼容性:link是xhtml標簽無兼容問題,@import是css2.1提出的所以不支持IE5以前的瀏覽器。

  • DOM支持:link支持DOM改變樣式,@import不支持。

  • 此外,link標簽還可以調(diào)用js文件、聲明目錄等,@import只能加載css。

選擇

  •  使用link:

     link可以選定要加載的媒體media。由于上述加載、兼容與IE的原因,普通站點應當盡量使用link?!  ?/p>

  •  使用@import:

     大型門戶網(wǎng)站(如淘寶)多個頁面link同一個css文件會造成速度下降,@import可以在css中調(diào)入樣式表,方便對css進行模塊化管理。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI