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
 Do
e finalmente
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 !importante 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 ultima 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
pseudoelemento.

Calculando se eu tiver p{...}
do
tipo
elementos
e
seletores

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

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