CSS Cascading & Inheritance

CSS Cascading & Inheritence 鐘祥仁 Ryan ryan@iii.org.tw CSS Cascading & Inheritence 1 http://MobileDev.TW

Cascading•  相同的CSS屬性被賦予多次不同的屬性值，但卻套用在同一個元件時，最後一個屬性值才會被使用。 •  表頭樣式與行內樣式衝突 CSS Cascading & Inheritence 2 http://MobileDev.TW

Cascading•  相同的CSS屬性被賦予多次不同的屬性值，但卻套用在同一個元件時，最後一個屬性值才會被使用。 •  表頭樣式前後衝突 CSS Cascading & Inheritence 3 http://MobileDev.TW

Inheritance 繼承•  有些CSS屬性會自動繼承給指定對象的子元件。 •  段落元件p下的粗體元件b ㄨ CSS Cascading & Inheritence 4 http://MobileDev.TW

Inheritance 繼承•  有些CSS屬性會自動繼承給指定對象的子元件。 •  div --> p --> b CSS Cascading & Inheritence 5 http://MobileDev.TW

Inheritance 繼承•  極少數CSS屬性繼承時會產生多重效果。 •  div --> p --> b CSS Cascading & Inheritence 6 http://MobileDev.TW

Inheritance 繼承•  有些CSS屬性會自動繼承給指定對象的子元件。 •  以比例方式設定會產生繼承值之後的比例 CSS Cascading & Inheritence 7 http://MobileDev.TW

Inheritance 繼承•  如果沒有自動繼承至子元件，可使用inherit強制繼承。 •  段落元件p下的粗體元件b CSS Cascading & Inheritence 8 http://MobileDev.TW

Inheritance 繼承•  如果沒有自動繼承至子元件，可使用inherit強制繼承。 •  段落元件p下的粗體元件b CSS Cascading & Inheritence 9 http://MobileDev.TW

CSS規則套用的優先權 Specificity•  直接寫在HTML元件的style屬性 •  優先權值：1000•  CSS選擇器使用ID的方式 •  優先權值：100•  CSS選擇器使用class,pseudo-class或限定屬性 •  優先權值：10•  CSS選擇器使用HTML元件、偽元件(pseudo-element) •  優先權值：1 CSS Cascading & Inheritence 10 http://MobileDev.TW

計算 Specificity•  #container ul#menu li.active ul li:hover {} •  #container：100 •  ul：1 •  #menu：100 •  li：1 •  .active：10 •  ul：1 •  li：1 Specificity：224 •  :hover：10 CSS Cascading & Inheritence 11 http://MobileDev.TW

聖旨駕到 !important•  凌駕所有優先權與位置 CSS Cascading & Inheritence 12 http://MobileDev.TW

一個HTML元件可以套用多個類別•  rule1 + rule2 CSS Cascading & Inheritence 13 http://MobileDev.TW

id 與 class 可以同時存在•  id的優先權值比較高 CSS Cascading & Inheritence 14 http://MobileDev.TW

選擇器也可以巢狀使用•  用空格隔開 CSS Cascading & Inheritence 15 http://MobileDev.TW

選擇器也可一次指定多個CSS Cascading & Inheritence 16 http://MobileDev.TW

CSS Cascading & Inheritance

by Ryan Chung on Feb 19, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 403

Statistics

CSS Cascading & Inheritance — Presentation Transcript

http://ryan403.blogspot.com	402
http://ryan403.blogspot.tw	1