Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Cascading&Inheritance
Search
Ryan Chung
March 28, 2014
Technology
0
640
CSS Cascading&Inheritance
Ryan Chung
March 28, 2014
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
270
Design Voice-First Games for Alexa
ryan403
0
39
AI Teaching Talk
ryan403
0
95
Cognitive Service
ryan403
0
79
jQuery & API Practices
ryan403
0
98
CSS Practices
ryan403
1
130
JavaScript Practices
ryan403
0
84
Web Programming - Lesson 6
ryan403
1
560
Web Programming - Lesson 7
ryan403
1
590
Other Decks in Technology
See All in Technology
Efficient zero-copy networking using io_uring
ennael
PRO
0
410
Binary Hacks Rebooted 私選ハック集
nullpo_head
1
300
Amazon CloudWatchで小さく始めるWebサービスのオブザーバビリティ / How to start Observability for Web Sevices with Amazon CloudWatch
sms_tech
3
110
今こそ変化対応力を向上させるとき 〜ログラスが FAST に挑戦する理由〜 / Why Loglass is Talking on the Challenge of Agile Framework FAST
shioyang
0
170
入門 バックアップ
ryuichi1208
18
7.2k
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
120
AWSの初級者向けAI・ML資格『AWS Certified AI Practitioner』の傾向と対策/So You Want To Pass AWS Certified AI Practitioner
quiver
0
600
テストコードの品質を客観的な数値で担保しよう〜Mutation Testのすすめ〜
ysknsid25
12
3.7k
Applied NLP with LLMs: Beyond Black-Box Monoliths
inesmontani
PRO
0
100
Unlearn Modularity
lemiorhan
6
200
それでもやっぱり ExpressRoute が好き!
skmkzyk
0
410
Amplify Gen 2ではじめる 生成AIアプリ開発入門
tsukuboshi
0
290
Featured
See All Featured
Writing Fast Ruby
sferik
626
60k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Music & Morning Musume
bryan
46
6.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Rails Girls Zürich Keynote
gr2m
93
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
240
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Producing Creativity
orderedlist
PRO
341
39k
GraphQLとの向き合い方2022年版
quramy
43
13k
Building Adaptive Systems
keathley
38
2.2k
Transcript
http://MobileDev.TW 1 CSS Cascading & Inheritance 鐘祥仁 Ryan
[email protected]
CSS
Cascading & Inheritence
http://MobileDev.TW Cascading • 相同的CSS屬性被賦予多次不同的屬性值,但卻套 用在同一個元件時,最後一個屬性值才會被使用。 • 表頭樣式與行內樣式衝突 CSS Cascading &
Inheritence 2
http://MobileDev.TW Cascading • 相同的CSS屬性被賦予多次不同的屬性值,但卻套 用在同一個元件時,最後一個屬性值才會被使用。 • 表頭樣式前後衝突 CSS Cascading &
Inheritence 3
http://MobileDev.TW Inheritance 繼承 • 有些CSS屬性會自動繼承給指定對象的子元件。 • 段落元件p下的粗體元件b ㄨ CSS Cascading
& Inheritence 4
http://MobileDev.TW Inheritance 繼承 • 有些CSS屬性會自動繼承給指定對象的子元件。 • div --> p -->
b CSS Cascading & Inheritence 5
http://MobileDev.TW Inheritance 繼承 • 極少數CSS屬性繼承時會產生多重效果。 • div --> p -->
b CSS Cascading & Inheritence 6
http://MobileDev.TW Inheritance 繼承 • 有些CSS屬性會自動繼承給指定對象的子元件。 • 以比例方式設定會產生繼承值之後的比例 CSS Cascading &
Inheritence 7
http://MobileDev.TW Inheritance 繼承 • 如果沒有自動繼承至子元件,可使用inherit強制繼承。 • 段落元件p下的粗體元件b CSS Cascading &
Inheritence 8
http://MobileDev.TW Inheritance 繼承 • 如果沒有自動繼承至子元件,可使用inherit強制繼承。 • 段落元件p下的粗體元件b CSS Cascading &
Inheritence 9
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
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
http://MobileDev.TW 聖旨駕到 !important • 凌駕所有優先權與位置 CSS Cascading & Inheritence 12
http://MobileDev.TW 一個HTML元件可以套用多個類別 • rule1 + rule2 CSS Cascading & Inheritence
13
http://MobileDev.TW id 與 class 可以同時存在 • id的優先權值比較高 CSS Cascading &
Inheritence 14
http://MobileDev.TW 選擇器也可以巢狀使用 • 用空格隔開 CSS Cascading & Inheritence 15
http://MobileDev.TW 選擇器也可一次指定多個 CSS Cascading & Inheritence 16