編碼的世界 / 優質文選 / 生涯

link和@import的區別

2022年3月24日
-   

  • link屬於html標簽，而@import是css提供的。
  • 頁面被加載時，link會同時被加載，而@import引用的css會等到頁面加載結束後加載。
  • link是html標簽，因此沒有兼容性，而@import只有IE5以上才能識別。
  • link方式樣式的權重高於@import的。

補充： @import的書寫方式
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別
@import url(style.css) //Windows NS4, Macintosh NS4不識別
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import url("style.css") //Windows NS4, Macintosh NS4不識別
其中，@import url(style.css) 和@import url("style.css")是最優的選擇，兼容的瀏覽器最多。從字節優化的角度來看@import url(style.css)最值得推薦。

link的書寫方式
<link href="style.css" rel="stylesheet" type="text/css">

另外link還有其他的一些用途，比如引入圖標
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

熱門文章