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.