1. Efeito Cascata e Herança
CSS - Style Sheet
Professor: Jolvani
Aula 09

2. Efeito Cascata e Herança - CSS
 Olá, Na aula passada vimos os seletores Compostos (Pseudo
seletores e pseudo elementos) ...
 Nesta aula vamos conhecer o efeito cascata e herança
 Quando dois ou mais elementos afetam a mesma tag o efeito
cascata, presente no css, resolve esse conflito.
 Ainda na Aula04.html, vamos aplicar um estilo no nosso
parágrafo.
 Agora vamos criar um outro seletor e aplicar ao parágrafo
que esta dentro de uma div, usando outra cor.

3. 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?

4. 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.

5. 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 !important são as mais importantes do CSS

6. Efeito Cascata e Herança - CSS
 Vamos aplicar o estilo !importante, vejamos:

7. 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 última será
definida com precedente, como mais importante.
 A especificidade de um seletor será dividido em 4 níveis constituintes:

8. 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{...}

9. 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

10. 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 importante ela é.

11. 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.

12. Próxima Aula: BoxModel