Submit Search
Upload
CSS Cascading & Inheritance
•
2 likes
•
1,021 views
Ryan Chung
Follow
Technology
Report
Share
Report
Share
1 of 16
Recommended
從前端設計的角度來看 Angular - TW2018 amos
從前端設計的角度來看 Angular - TW2018 amos
Amos Lee
Dpl in action
Dpl in action
Pu Shiming
React js
React js
國昭 張
ASP.Net MVC Framework
ASP.Net MVC Framework
國昭 張
深入研究 Angular - phoebe pan
深入研究 Angular - phoebe pan
Phoebe Pan
CSS 层叠(Cascading Style Sheets)
CSS 层叠(Cascading Style Sheets)
knightwu
Share module
Share module
dpf2e
03.web sphere培训 websphere集群技术
03.web sphere培训 websphere集群技术
littlecong
Recommended
從前端設計的角度來看 Angular - TW2018 amos
從前端設計的角度來看 Angular - TW2018 amos
Amos Lee
Dpl in action
Dpl in action
Pu Shiming
React js
React js
國昭 張
ASP.Net MVC Framework
ASP.Net MVC Framework
國昭 張
深入研究 Angular - phoebe pan
深入研究 Angular - phoebe pan
Phoebe Pan
CSS 层叠(Cascading Style Sheets)
CSS 层叠(Cascading Style Sheets)
knightwu
Share module
Share module
dpf2e
03.web sphere培训 websphere集群技术
03.web sphere培训 websphere集群技术
littlecong
Presentacion cobach 05
Presentacion cobach 05
guestd5dfa3
Teletrabajo
Teletrabajo
estebanrami
Facebook SDK - JavaScript
Facebook SDK - JavaScript
Ryan Chung
Pacie bloque cierre sandra valencia
Pacie bloque cierre sandra valencia
Sandra Valencia
Air pumps for cars
Air pumps for cars
IBN AL NAFEES
L Os A Sesores I
L Os A Sesores I
guestffec1e
Olga Daniela Alvarado Flores
Olga Daniela Alvarado Flores
perla
Presentacion virginia
Presentacion virginia
virginiajaspe
Educació, cervell i aprenentatge cooperatiu. Què ens diu la neurociència? Dav...
Educació, cervell i aprenentatge cooperatiu. Què ens diu la neurociència? Dav...
CEP d'Eivissa
Criconnect
Criconnect
Ravi Jayaraman
Hipertensión arterial-salud-publica
Hipertensión arterial-salud-publica
Fernando Cortes Monardez
El treball cooperatiu a l' IES Sureda i blanes
El treball cooperatiu a l' IES Sureda i blanes
CEP d'Eivissa
Primers auxilis per a nens i nenes de primària
Primers auxilis per a nens i nenes de primària
JRoca_Font
Testigos de jehová
Testigos de jehová
E Padilla
Multiprocessor structures
Multiprocessor structures
Shareb Ismaeel
Income generation
Income generation
prj_publication
TEST ESTILOS DE APRENDIZAJE Visual-auditivo-kinestésico
TEST ESTILOS DE APRENDIZAJE Visual-auditivo-kinestésico
mirelesrafael8490
2014 huaraz araujo chabeli, chinchay pedro la percepción en las madres y la c...
2014 huaraz araujo chabeli, chinchay pedro la percepción en las madres y la c...
Jorge Mejia Valcarcel
Situación del MErcado Inmobiliario en España
Situación del MErcado Inmobiliario en España
guest25d3d3
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
More Related Content
Viewers also liked
Presentacion cobach 05
Presentacion cobach 05
guestd5dfa3
Teletrabajo
Teletrabajo
estebanrami
Facebook SDK - JavaScript
Facebook SDK - JavaScript
Ryan Chung
Pacie bloque cierre sandra valencia
Pacie bloque cierre sandra valencia
Sandra Valencia
Air pumps for cars
Air pumps for cars
IBN AL NAFEES
L Os A Sesores I
L Os A Sesores I
guestffec1e
Olga Daniela Alvarado Flores
Olga Daniela Alvarado Flores
perla
Presentacion virginia
Presentacion virginia
virginiajaspe
Educació, cervell i aprenentatge cooperatiu. Què ens diu la neurociència? Dav...
Educació, cervell i aprenentatge cooperatiu. Què ens diu la neurociència? Dav...
CEP d'Eivissa
Criconnect
Criconnect
Ravi Jayaraman
Hipertensión arterial-salud-publica
Hipertensión arterial-salud-publica
Fernando Cortes Monardez
El treball cooperatiu a l' IES Sureda i blanes
El treball cooperatiu a l' IES Sureda i blanes
CEP d'Eivissa
Primers auxilis per a nens i nenes de primària
Primers auxilis per a nens i nenes de primària
JRoca_Font
Testigos de jehová
Testigos de jehová
E Padilla
Multiprocessor structures
Multiprocessor structures
Shareb Ismaeel
Income generation
Income generation
prj_publication
TEST ESTILOS DE APRENDIZAJE Visual-auditivo-kinestésico
TEST ESTILOS DE APRENDIZAJE Visual-auditivo-kinestésico
mirelesrafael8490
2014 huaraz araujo chabeli, chinchay pedro la percepción en las madres y la c...
2014 huaraz araujo chabeli, chinchay pedro la percepción en las madres y la c...
Jorge Mejia Valcarcel
Situación del MErcado Inmobiliario en España
Situación del MErcado Inmobiliario en España
guest25d3d3
Viewers also liked
(19)
Presentacion cobach 05
Presentacion cobach 05
Teletrabajo
Teletrabajo
Facebook SDK - JavaScript
Facebook SDK - JavaScript
Pacie bloque cierre sandra valencia
Pacie bloque cierre sandra valencia
Air pumps for cars
Air pumps for cars
L Os A Sesores I
L Os A Sesores I
Olga Daniela Alvarado Flores
Olga Daniela Alvarado Flores
Presentacion virginia
Presentacion virginia
Educació, cervell i aprenentatge cooperatiu. Què ens diu la neurociència? Dav...
Educació, cervell i aprenentatge cooperatiu. Què ens diu la neurociència? Dav...
Criconnect
Criconnect
Hipertensión arterial-salud-publica
Hipertensión arterial-salud-publica
El treball cooperatiu a l' IES Sureda i blanes
El treball cooperatiu a l' IES Sureda i blanes
Primers auxilis per a nens i nenes de primària
Primers auxilis per a nens i nenes de primària
Testigos de jehová
Testigos de jehová
Multiprocessor structures
Multiprocessor structures
Income generation
Income generation
TEST ESTILOS DE APRENDIZAJE Visual-auditivo-kinestésico
TEST ESTILOS DE APRENDIZAJE Visual-auditivo-kinestésico
2014 huaraz araujo chabeli, chinchay pedro la percepción en las madres y la c...
2014 huaraz araujo chabeli, chinchay pedro la percepción en las madres y la c...
Situación del MErcado Inmobiliario en España
Situación del MErcado Inmobiliario en España
More from Ryan Chung
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Ryan Chung
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
Ryan Chung
AI in Classroom
AI in Classroom
Ryan Chung
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
Ryan Chung
MovieBot
MovieBot
Ryan Chung
Service Integration Workshop
Service Integration Workshop
Ryan Chung
MPP AI
MPP AI
Ryan Chung
Smart Home Intro Lab
Smart Home Intro Lab
Ryan Chung
Introduction to DialogFlow
Introduction to DialogFlow
Ryan Chung
Conversational AI Orientation
Conversational AI Orientation
Ryan Chung
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Ryan Chung
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Ryan Chung
Amazon Alexa Development
Amazon Alexa Development
Ryan Chung
Microsoft Professional Program - AI
Microsoft Professional Program - AI
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
Intro to AI
Intro to AI
Ryan Chung
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Ryan Chung
More from Ryan Chung
(20)
Voice-First Games for Alexa
Voice-First Games for Alexa
AI Service Integration - Education
AI Service Integration - Education
AI Service Integration
AI Service Integration
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
AI in Classroom
AI in Classroom
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
MovieBot
MovieBot
Service Integration Workshop
Service Integration Workshop
MPP AI
MPP AI
Smart Home Intro Lab
Smart Home Intro Lab
Introduction to DialogFlow
Introduction to DialogFlow
Conversational AI Orientation
Conversational AI Orientation
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Amazon Alexa Development
Amazon Alexa Development
Microsoft Professional Program - AI
Microsoft Professional Program - AI
AI Service Integration
AI Service Integration
Intro to AI
Intro to AI
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
CSS Cascading & Inheritance
1.
http://MobileDev.TW1 CSS Cascading & Inheritance Ryan@MobileDev.TW 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