CSS Cascading&Inheritance

Transcript

1. http://MobileDev.TW 1 CSS Cascading & Inheritance 鐘祥仁 Ryan RyanChung@ncu.edu.tw CSS Cascading & Inheritence
2. http://MobileDev.TW Cascading •  相同的CSS屬性被賦予多次不同的屬性值，但卻套 用在同一個元件時，最後一個屬性值才會被使用。 •  表頭樣式與行內樣式衝突 CSS Cascading & Inheritence 2
3. http://MobileDev.TW Cascading •  相同的CSS屬性被賦予多次不同的屬性值，但卻套 用在同一個元件時，最後一個屬性值才會被使用。 •  表頭樣式前後衝突 CSS Cascading & Inheritence 3
4. http://MobileDev.TW Inheritance 繼承 •  有些CSS屬性會自動繼承給指定對象的子元件。 •  段落元件p下的粗體元件b ㄨ CSS Cascading & Inheritence 4
5. http://MobileDev.TW Inheritance 繼承 •  有些CSS屬性會自動繼承給指定對象的子元件。 •  div --> p --> b CSS Cascading & Inheritence 5
6. http://MobileDev.TW Inheritance 繼承 •  極少數CSS屬性繼承時會產生多重效果。 •  div --> p --> b CSS Cascading & Inheritence 6
7. http://MobileDev.TW Inheritance 繼承 •  有些CSS屬性會自動繼承給指定對象的子元件。 •  以比例方式設定會產生繼承值之後的比例 CSS Cascading & Inheritence 7
8. http://MobileDev.TW Inheritance 繼承 •  如果沒有自動繼承至子元件，可使用inherit強制繼承。 •  段落元件p下的粗體元件b CSS Cascading & Inheritence 8
9. http://MobileDev.TW Inheritance 繼承 •  如果沒有自動繼承至子元件，可使用inherit強制繼承。 •  段落元件p下的粗體元件b CSS Cascading & Inheritence 9
10. 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
11. 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 •  :hover：10 CSS Cascading & Inheritence 11 Specificity：224
12. http://MobileDev.TW 聖旨駕到 !important •  凌駕所有優先權與位置 CSS Cascading & Inheritence 12
13. http://MobileDev.TW 一個HTML元件可以套用多個類別 •  rule1 + rule2 CSS Cascading & Inheritence 13
14. http://MobileDev.TW id 與 class 可以同時存在 •  id的優先權值比較高 CSS Cascading & Inheritence 14
15. http://MobileDev.TW 選擇器也可以巢狀使用 •  用空格隔開 CSS Cascading & Inheritence 15
16. http://MobileDev.TW 選擇器也可一次指定多個 CSS Cascading & Inheritence 16