Aula 09. efeito cascata e herança
-
Upload
jolvani-morgan -
Category
Technology
-
view
30 -
download
0
Transcript of Aula 09. efeito cascata e herança
Efeito Cascata e Herança
CSS - Style SheetProfessor: Jolvani
Aula 09
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.
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?
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.
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
Efeito Cascata e Herança - CSS Vamos aplicar o estilo !importante, vejamos:
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:
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{...}
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
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 é.
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.
Próxima Aula: BoxModel