**:
大家都知道,css的中文名叫做層疊樣式表,而css在控制樣式的時候,有三種引入方式,這裡簡單介紹下css控制樣式的三種方式
1>外部樣式表 : 將樣式規則直接寫在*.css檔案中,然後再*.html頁面中通過標籤引入的方式
2>內部樣式表 :(位於
外部樣式表
顯示效果:
下面我們開始驗證吧。
2>外部樣式表 vs 內部樣式表(先定義內部樣式表,再引入外部樣式表定義檔案) 加入內部樣式表,也就是說,直接在
外部樣式表(藍色) vs 內部樣式表(綠色)
顯示效果:
得出優先順序結果:外部樣式表 > 內部樣式表
3>外部樣式表 vs 內部樣式表(先引入外部樣式表定義檔案,再定義內部樣式表)這步很簡單,其實就是直接將link標籤剪下移動到上面到head標籤中定義內部樣式表的前面:
xiaoxuetu.html
複製**
**如下:
外部樣式表(藍色) vs 內部樣式表(綠色)
顯示效果:
得出優先順序結果:內部樣式表 > 外部樣式表
從<2>和<3>這兩部測試我們可以知道,在直接對標籤的樣式進行定義時,外部樣式表和內部樣式表的優先與他們的引入順序有關,嘿嘿,是不是很慶幸沒有完全相信官網所說的咧……
4>外部樣式表 vs 內聯樣式 直接在div標籤中定義樣式,這個時候我們修改下xiaoxuetu.html的**:
xiaoxuetu.html
複製**
**如下:
外部樣式表(藍色) vs 內聯樣式(紅色)
顯示效果:
得出優先順序結果:內聯樣式 > 外部樣式表
5>內聯樣式 vs 內部樣式表,這個時候我們修改下xiaoxuetu.html**:
xiaoxuetu.html
複製**
**如下:
內部樣式表(綠色) vs 內聯樣式(紅色)
顯示效果:
得出優先順序結果:內聯樣式 > 內部樣式表
從上面步驟<2>到<5>的對比中我們可以知道:內部樣式的優先順序是最大的,而內部樣式表和外部樣式表的優先順序得看他們的引入和定
義順序,如果先用內部樣式表定義了樣式,然後再引入通過外部樣式表定義的樣式,你們外部樣式表的樣式將會覆蓋內部樣式表定義的樣式,反之亦是一樣。
當然,這個情況只是用id或者class選擇的時候,也是一樣的。如果對乙個標籤的樣式定義既有class也有id選擇器的時候,同時又包含了三種樣式定義方式的,就得先看完下面的優先順序測試了。
三、判斷用id、class以及標籤選擇器定義樣式的優先順序
本次測試中,為了減少其他因素的影響,只採用內部樣式表來定義樣式,同時分別使用了id選擇器和class選擇器來選擇使用樣式的標籤。
1>三種方式並存的時候
xiaoxuetu.html
複製**
**如下:
單一顯示效果
只使用id(綠色)
只使用class(藍色)
先引入id定義的樣式再引入class定義的樣式
小學徒先引入class定義的樣式再引入id定義的樣式
小學徒顯示效果:
得出優先順序結果 id選擇器 > class選擇器 > 標籤選擇器
2>當只有兩個class或者兩個id的時候
xiaoxuetu.html
複製**
**如下:
兩個class的時候
classtest2(黃色)先classtest(藍色)後
classtest(藍色)先classtest2(黃色)後
兩個id的時候
idtest(綠色)先idtest2(黃綠色)後
idtest2(黃綠色)先idtes(綠色)t後
顯示效果:
得出優先順序結果:當且僅當有兩個或者是多個class或者id的時候,誰在前面就誰的優先順序高。
3>只有標籤div選擇器的時候
xiaoxuetu.html(藍色樣式先,紅色樣式後)
複製**
**如下:
藍色樣式先,紅色樣式後
顯示效果:
xiaoxuetu2.html(紅色樣式先,藍色樣式後)
複製**
**如下:
紅色樣式先,藍色樣式後
顯示效果:
從兩個結果我們可以知道,當只有標籤選擇器的時候,後面定義的樣式表的優先順序就越高。
四、總結
1.當只使用id選擇器、class選擇器或者標籤選擇器的時候,不管是使用多少種樣式表定義方式,都是內嵌樣式的優先順序最高,接下來外部樣式表和內部樣式表的就得看他們的引入順序了;
2.當只使用id選擇器或者class選擇器的時候,同乙個標籤內不管使用了多少個,都是排在前面的優先順序更高;
3.當只使用標籤選擇器的時候,如果定義了多個一樣的,你們寫在最後面的標籤選擇器生效,也就是它的優先順序最高;
4.當同乙個標籤中既有id選擇器,又有class選擇器,同時又有標籤選擇器的時候,優先順序的次序是id選擇器 > class選擇器 > 標籤選擇器;
5.當每一種都有的時候,那就根據具體情況具體分析吧,嘿嘿,哈哈……
CSS控制樣式的三種方式 優先順序對比驗證
大家都知道,css的中文名叫做層疊樣式表,而css在控制樣式的時候,有三種引入方式,這裡簡單介紹下css控制樣式的三種方式 1 外部樣式表 將樣式規則直接寫在 css檔案中,然後再 html頁面中通過標籤引入的方式 2 內部樣式表 位於 外部樣式表 顯示效果 下面我們開始驗證吧。2 外部樣式表 vs...
css的三種引入方式及優先順序
第一 css的三種引入方式 1.行內樣式 最直接最簡單的一種,直接對html標籤使用style 例如 缺點 html頁面不純淨,檔案體積大,不利於蜘蛛爬行,後期維護不方便。2.內嵌樣式 內嵌樣式就是將css 寫在之間,並且用進行宣告,例如 優缺點 頁面使用公共css 也是每個頁面都要定義的,如果乙個...
CSS的三種樣式表和優先順序
1 外部樣式表 當樣式需要應用於很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變乙個檔案來改變整個站點的外觀。每個頁面使用 標籤鏈結到樣式表。css1.1樣式表 h1 2 內部樣式表 當單個文件需要特殊的樣式時,就應該使用內部樣式表。你可以使用我是乙個div 3 內聯樣...