CSS Cascading & Inheritance

1,922 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,922
On SlideShare
0
From Embeds
0
Number of Embeds
659
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×