Aula 09. efeito cascata e herança
-
Upload
jolvani-morgan -
Category
Documents
-
view
218 -
download
7
Transcript of Aula 09. efeito cascata e herança
![Page 1: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/1.jpg)
Efeito Cascata e Herança
CSS - Style SheetProfessor: Jolvani
Aula 09
![Page 2: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/2.jpg)
Efeito Cascata e Herança - CSS
Olá, Na aula passada vimos os seletores Compostos (Pseudoseletores e pseudo elementos) ...
Nesta aula vamos conhecer o efeito cascata e herança
Quando dois ou mais elementos afetam a mesma tag o efeitocascata, presente no css, resolve esse conflito.
Ainda na Aula04.html, vamos aplicar um estilo no nossoparágrafo.
Agora vamos criar um outro seletor e aplicar ao parágrafoque esta dentro de uma div, usando outra cor.
![Page 3: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/3.jpg)
Efeito Cascata e Herança - CSS
Observe que independente da ordem ele sempre irá escolher
a regra div > p... Pois o browser entende que essa regra é
mais importante que p{...
É efetuado o calculo do que é mais importante para ser
aplicado no efeito cascata.
Como se define o que é mais importante no efeito cascata?
![Page 4: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/4.jpg)
Efeito Cascata e Herança - CSS
Temos três (3) fontes distintas de folhas de estilos:
Do autor, que esta construindo.
Do usuário, que pode vincular ao browser
Folha de Estilos do próprio browser.
Como é a ordem de aplicação da folha de estilo?
A cascata funciona atribuindo uma importância a cada regra.
Então:
Folha de estilos do autor, são mais importantes, seguindo do
Usuário e finalmente
Do browser ou navegador.
![Page 5: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/5.jpg)
Efeito Cascata e Herança - CSS
Seguindo a seguinte ordem:
Menos importante 1 – folha do Navegador, seguido
Menos importante 2 – folha do usuário
Assim por diante: 5 + (mais) importante & 1– (menos) importante.
As regrar marcadas com !importante são as mais importantes do CSS
![Page 6: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/6.jpg)
Efeito Cascata e Herança - CSS
Vamos aplicar o estilo !importante, vejamos:
![Page 7: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/7.jpg)
Efeito Cascata e Herança - CSS
Cálculo de especificidade: as regras são ordenadas pelo grau de
especificidade do seletor:
As regras com os seletores mais específicos sobre escrevem as dos
menos específicos.
Se duas regras tiverem o mesmo grau de especificidade a ultima será
definida com precedente, como mais importante.
A especificidade de um seletor será dividido em 4 níveis constituintes:
![Page 8: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/8.jpg)
Efeito Cascata e Herança - CSS
Então, para o estilo Inline conferimos o valor 1. a = 1.
b = número toais de seletores id. Se vc tiver 5 ids, b = 5.
c = Nro de classes, pseudoclasse e atributo que existe no seletor. E
D = Nro de seletores do tipo elementos e seletores
pseudoelemento.
Calculando se eu tiver p{...}
![Page 9: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/9.jpg)
Efeito Cascata e Herança - CSS
p{}
Quantos elementos inline = 0
Quantos id = 0
Classes pseudoclasse e atributos = 0
Elementos e pseudoelemetos = 1 (elementos
P{} = 0,0,0,1 = especificidade
![Page 10: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/10.jpg)
Efeito Cascata e Herança - CSS
p{} = 0,0,0,1 = especificidade = 1
div p{} = 0,0,0,2 = especificidade = 2
p.intro{} = 0,0,1,1 = especificidade = 11
#menu{} = 0,1,0,0 = especificidade = 100
style=“” = 1,0,0,0 = especificidade = 1000
Quanto maior a especificidade mais
![Page 11: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/11.jpg)
Efeito Cascata e Herança - CSS
Herança
Herda de seus descendentes
Ex:
Posso agrupar elementos para que todos recebessem a cor preta.... Ou.
Atribuísse ao corpo do documento, ou div a cor preta que os outros
elementos herdam a mesma propriedade, caracterizando a herança.
![Page 12: Aula 09. efeito cascata e herança](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559c92721a28ab435b8b477a/html5/thumbnails/12.jpg)
Próxima Aula: BoxModel