css link與import的差別是什麼

區別：link屬於html標籤，而@import是css提供的一種方式，link標籤不僅可以引入css，還可以做其他事，而@import只能引入css；@import只有在IE5以上才支援；而link標籤不存在相容性問題。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在html中引入外部的CSS有2種方式，link標籤和@import，那麼它們之間什麼區別呢？

1、從屬關係區別

@import是CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標籤，不只可以載入CSS文件，還可以定義RSS、rel 連線屬性等。

2、載入順序差異

載入頁面時，link標籤引入的 CSS 同時載入；@import引入的 CSS 會在頁面載入後載入。

3、相容性差異

@import是CSS2.1 才有的語法，故只可在IE5 才能辨識；link標籤作為HTML 元素，不存在相容性問題。

4、DOM可控性區別

可以透過JS 操作DOM ，插入link標籤來改變樣式；由於DOM 方法是基於文件的，無法使用@import的方式插入樣式。

【推薦教學：CSS影片教學 】

#補充說明：

@import的書寫方式

<style type="text/css">
    @import &#39;style.css&#39; //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(&#39;style.css&#39;) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
    @import url("style.css") //Windows NS4, Macintosh NS4不识别
</style>

其中，@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" />

整體來說：link優於@import，強烈建議使用link標籤，慎用@import方式。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是css link與import的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！