link和@import匯入css檔案的區別

匯入方式

• link

<link href="index.css" rel="stylesheet">

• import

<style type="text/css"> @import "index.css"; </style>

不同點

• link除了引用樣式檔案，還可引用圖片等資原始檔，而import只能引用樣式檔案。

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu.svg"> 
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜尋" />

• 相容性不同，link不存在相容性問題，import在IE5以上支援，是css2.1新增的。
• 在樣式檔案可以使用import匯入其他樣式檔案，而link不可以。
• link引用css時，在頁面載入時同時載入，而import需要網頁完全載入後再載入。
• link支援使用js控制DOM去改變樣式，而import不支援js改變樣式。

import寫法比較多：推薦使用 @import url(style.css)

@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不識別