Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Cascading&Inheritance

Avatar for Ryan Chung Ryan Chung
March 28, 2014
Technology
0
640

CSS Cascading&Inheritance

Avatar for Ryan Chung

Ryan Chung

March 28, 2014
Tweet

More Decks by Ryan Chung

See All by Ryan Chung
MovieBot Development
Avatar for Ryan Chung ryan403
0
290
Design Voice-First Games for Alexa
Avatar for Ryan Chung ryan403
0
49
AI Teaching Talk
Avatar for Ryan Chung ryan403
0
110
Cognitive Service
Avatar for Ryan Chung ryan403
0
90
jQuery & API Practices
Avatar for Ryan Chung ryan403
0
120
CSS Practices
Avatar for Ryan Chung ryan403
1
150
JavaScript Practices
Avatar for Ryan Chung ryan403
0
93
Web Programming - Lesson 6
Avatar for Ryan Chung ryan403
1
600
Web Programming - Lesson 7
Avatar for Ryan Chung ryan403
1
610

Other Decks in Technology

See All in Technology
問 1：以下のコンパイラを証明せよ（予告編） #kernelvm / Kernel VM Study Kansai 11th
Avatar for y_taka_23 ytaka23
3
520
Cursorをﾁｮｯﾊﾟﾔインタビューライターにチューニングする方法 / how to tuning cursor for interview write
Avatar for ShuzoN shuzon
2
210
ペアーズにおける評価ドリブンな AI Agent 開発のご紹介
Avatar for fukubaka0825 fukubaka0825
9
2.6k
とあるEdTechベンチャーのシステム構成こだわりN選 / edtech-system
Avatar for k.goto gotok365
4
290
Serverlessだからこそコードと設計にはこだわろう
Avatar for Ken'ichirou Kimura kenichirokimura
2
990
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
Avatar for CARTA Engineering carta_engineering
0
27k
Global Azure2025(GitHub Copilot ハンズオン)
Avatar for tomokusaba tomokusaba
2
760
genspark_presentation.pdf
Avatar for h.uriu haruki_uiru
1
250
kernelvm-brain-net
Avatar for らすぴー raspython3
0
550
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start
Avatar for Takahiro Ikeuchi iktakahiro
1
120
Gateway H2 モジュールで
スマートホーム入門
Avatar for MinoruInachi minoruinachi
0
140
技術選定を突き詰める 懇親会LT
Avatar for Kaoru okaru
1
270

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
453
42k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
40
7.2k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k

Transcript

  1. http://MobileDev.TW 1 CSS Cascading & Inheritance 鐘祥仁 Ryan [email protected] 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