首頁  >  文章  >  web前端  >  css link與import的差別是什麼

css link與import的差別是什麼

青灯夜游
青灯夜游原創
2021-02-24 16:31:076340瀏覽

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

css link與import的差別是什麼

本教學操作環境: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn