區別: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 '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不识别 </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中文網其他相關文章!