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