網頁 CSS 優先順序

網頁 CSS 優先順序

2645

Preview Summary

website Reviews : 37 5.0

網頁設計基礎中不可避免的網頁技術之一 CSS,在越複雜的結構與多樣化外部插件越有遭遇無法按照設計正確呈現的情形。因此,了解 CSS 優先順序得以解釋目前的網頁樣式。通用的 CSS 優先順序可以歸納三點大原則,本章除了介紹樣式的構成,另附加 CSS 優先順序的進階密技。

網頁所呈現的樣式取決於 CSS 規則運用

當前網頁設計基礎中不可避免的網頁技術之一 CSS (層疊樣式表文件),無論採用既定的模板設計或是自行修改調整,皆有機會遭遇無法按照設計正確呈現的情形。越複雜的結構與多樣化外部插件越是容易發生狀況,再加上各式瀏覽器解析差異,不免有局部樣式脫離了原設計。因此,了解 CSS 優先權的規則得以解釋目前的網頁樣式。

CSS 優先規則

CSS 優先順序可以網路搜尋更多詳論,為避免混淆觀念,以下僅略述常用種類。首先應具備的概念是樣式間的關係。將網頁文檔看成一顆樹(Document tree、DOM tree),裡面的所有區塊空間或元素彼此存在著關聯。或許是層疊、相鄰,也或者是父子繼承般上下、共用等關係。

一級預設樣式

一級樣式粗略將網頁畫成草圖,這些元素先架構最基本的輪廓;像是樹根、房屋框架的作用。只要有這些元素樣式足以顯示基本網頁,至於開枝散葉又是往後的事了。

p {
  padding: 5px 10px;
  background: #FFF;
  font: normal 12/24pt #555 Arial;
  ...
  }
 
div, ul, li {
  margin: 0;
  padding: 0;
  ...
  }

CSS 於 HTML 結構中的位置

相同的樣式安排在 HTML 的不同位置時有相異的優先權。

  • A: <link> 標籤在 <head> 當中
  • B: @import 屬性在 CSS 當中
  • C: <style> 標籤在 <head> 當中
  • D: style 屬性在 HTML 當中
  • E: !important

E > D > C > B > A

選擇器樣式

Selector 是最常用的元素,例如 class=”wrap”,id=”slide-wrap”。當選擇器的樣式處於父子層疊元素繼承的關係時,沒有明確賦予規則有可能影響網頁最後的顯示效果。其原因在於選擇器的效力有數值當成參考,瀏覽器依據該數據決定誰才是老大。

若將基本元素(一級樣式 Tag 標籤)當成數值 1 (Element = 1),則 Selector(選擇器) class = 10,id = 100。1 與 10 之間、10 與 100 之間則是由複合型元素或 API 接口等數據填充效力,基本上形成四組數值的分配結構(a b c d)。範例如下:

選擇器

* (通配符) { … }

li { … }

li:first-line { … }

ul li { … }

ul ol+li { … }

h1 + *[rel=up] { … }

ul ol li.red { … }

li.red.level { … }

#wrap { … }

style =” … “

!important

分配數值

a=0 b=0 c=0 d=0

a=0 b=0 c=0 d=1

a=0 b=0 c=0 d=2

a=0 b=0 c=0 d=2

a=0 b=0 c=0 d=3

a=0 b=0 c=1 d=1

a=0 b=0 c=1 d=3

a=0 b=0 c=2 d=1

a=0 b=1 c=0 d=0

a=1 b=0 c=0 d=0

a=2 b=0 c=0 d=0

樣式權重

0, 0, 0, 0

0, 0, 0, 1

0, 0, 0, 2

0, 0, 0, 2

0, 0, 0, 3

0, 0, 1, 1

0, 0, 1, 3

0, 0, 2, 1

0, 1, 0, 0

1, 0, 0, 0

1, 0, 0, 0, 0

 

覆蓋樣式的特性

即使在相同位置與權重的同名樣式,為了避免顯示上的矛盾,後面載入讀取的 CSS 會覆蓋之前載入的樣式。

JavaScript 樣式

對於文檔目錄樹而言,透過 JavaScript 宣告樣式或外部載入的 js、jQuery 如包含樣式,會成為最後的 CSS 優先級別。即是會覆蓋其他原訂的樣式,這也是發生樣式冥頑難改的主因之一。

<script>
  document.getElementById( id ).style.property=new style;
  ...
</script>
 
<script>
  $( "p" ).css( "background-color", "yellow" );
  ...
</script>

通用 CSS 優先規則

由於 CSS 的構成規則繁多而雜,再加上行動版的特定樣式使得網頁修改「牽一髮而動全身」,看過上述的基本的 CSS 運用方式,可以歸納以下三點大原則:

  • 細節大於粗略。位於 DOM tree 末端為優先
  • 後者大於前者。載入先後的覆蓋關係
  • 特化大於通用。特殊而明確指定的樣式優先

當中需要注意的部份:外部插件的撰寫方式非我所能控制,例如:JavaScript 包圍函數外溢以致覆蓋全域樣式(JS bug)。!important 雖然具有最高級強制力,容易造成樣式的混雜與難以維護、修改,盡量少用。

CSS 優先順序 進階密技

前面章節的修改網頁掌握 CSS 優先權三大原則已經足夠。「馬克十二」的經常讀者也知道我對鐵桿粉絲比較偏心的,會分享一點獨家的小小心得在加密內容。


37
· ·