CSS外部樣式的兩種引入方式

2021-10-03 08:34:00 字數 1171 閱讀 4884

兩種方法

"style.css" rel="stylesheet" type="text/css" />
區別

1.從屬關係區別

link是html提供的標籤,不僅可以載入css檔案,還可以定義其它屬性;@import是css提供的語法規則,只有匯入樣式表的作用。

2.載入順序區別

載入頁面時,link標籤引入的css會當瀏覽器載入到這行**的時候進行載入;@import引入的css將在頁面載入完畢後被載入。

兩者載入順序雖然不同,但其引入的樣式遵從 css 的層疊性,即就近原則(後來居上)。

3.相容性區別

link作為html元素,不存在相容性問題;@import是 css 2.1 才有的語法,故只可在 ie5+ 才能識別。

4.dom可控性區別

可以通過 js 操作 dom,插入link標籤來改變樣式;由於 dom 方法是基於文件的,無法使用@import的方式插入樣式。

5.渲染區別

亦即回答為什麼@import引入的樣式後被載入反而會被link引入的樣式覆蓋的 "矛盾"。

首先,載入和渲染是兩個不同的概念,雖然link先於@import載入,但並不意味著其也先於其渲染。實際上,渲染的動作一般都會執行多次,最後一次渲染,一定是依據之前載入過的所有樣式整合後的渲染樹進行繪製頁面的。已經被渲染過的頁面元素,也會被重新渲染。

所以,雖然@import後被載入,但卻會在載入完畢後置於樣式表頂部,最終渲染時自然會被下面的重複樣式層疊。

《css權威指南》:

@import一定要寫在除@charset外的其他任何css規則之前,如果置於其他位置將會被瀏覽器忽略,而且,在@import之後如果存在其它樣式,則@import之後的分號是必須書寫,不可省略的。」

參考:

引入CSS樣式的五種方式

一 使用style屬性 將style屬性直接加在個別的元件標籤裡,元件 標籤 style 性質 屬性 1 設定值1 性質 屬性 2 設定值2 例如 這種用法的優點 是可靈巧應用樣式於各標籤中,但是缺點則是沒有整篇檔案的 統一性 二 使用style標籤 將樣式規則寫在標籤之中。例如 通常是將整個的結構...

引入CSS樣式的五種方式

一 使用style屬性 將style屬性直接加在個別的元件標籤裡,元件 標籤 style 性質 屬性 1 設定值1 性質 屬性 2 設定值2 例如 這種用法的優點 是可靈巧應用樣式於各標籤中,但是缺點則是沒有整篇檔案的 統一性 二 使用style標籤 將樣式規則寫在標籤之中。例如 通常是將整個的結構...

類的兩種引入方式

一種是通過 import方式引入 另一種是通過 class引入 這兩種的方式的區別在於 1 import方式會包含被引用類的所有資訊,包括被引用類的變數和方法 class方式只是告訴編譯器在a.h檔案中 b b 只是類的宣告,具體這個類裡有什麼資訊,這裡不需要知道,等實現檔案中真正要用到時,才會真正...