Your SlideShare is downloading. ×
  • Like
  • Save
CSS Cascading & Inheritance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CSS Cascading & Inheritance

  • 1,151 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,151
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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