兩種方法
"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 只是類的宣告,具體這個類裡有什麼資訊,這裡不需要知道,等實現檔案中真正要用到時,才會真正...