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 (Pseudoseletores e pseudo elementos) ...

Nesta aula vamos conhecer o efeito cascata e herança

Quando dois ou mais elementos afetam a mesma tag o efeitocascata, presente no css, resolve esse conflito.

Ainda na Aula04.html, vamos aplicar um estilo no nossoparágrafo.

Agora vamos criar um outro seletor e aplicar ao parágrafoque 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 !importante 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 ultima 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

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