Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Cascading & Inheritance

1,952 views

Published on

Published in: Technology
  • Be the first to comment

CSS Cascading & Inheritance

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

×