Efeito Cascata e Herana

CSS - Style Sheet

Professor: Jolvani
Aula 09

Efeito Cascata e Herana - CSS

Ol, Na aula passada vimos os seletores Compostos (Pseudo

seletores e pseudo elementos) ...

Nesta aula vamos conhecer o efeito cascata e herana

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 pargrafo.

Agora vamos criar um outro seletor e aplicar ao pargrafo que

esta dentro de uma div, usando outra cor.

Efeito Cascata e Herana - 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 Herana - CSS

Temos trs (3) fontes distintas de folhas de estilos:

Do

autor, que esta construindo.

Do

usurio, que pode vincular ao browser

Folha

de Estilos do prprio browser.

Como a ordem de aplicao da folha de estilo?

A cascata funciona atribuindo uma importncia a cada regra.

Ento:
Folha

de estilos do autor, so mais importantes, seguindo do

Usurio
Do

e finalmente

browser ou navegador.

Efeito Cascata e Herana - CSS

Seguindo a seguinte ordem:

Menos importante 1 folha do Navegador, seguido

Menos importante 2 folha do usurio

Assim por diante: 5 + (mais) importante & 1 (menos) importante.

As regrar marcadas com !important so as mais importantes do CSS

Efeito Cascata e Herana - CSS

Vamos aplicar o estilo !importante, vejamos:

Efeito Cascata e Herana - CSS

Clculo de especificidade: as regras so ordenadas pelo grau de

especificidade do seletor:

As regras com os seletores mais especficos sobre escrevem as dos

menos especficos.

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 nveis constituintes:

Efeito Cascata e Herana - CSS

Ento, para o estilo Inline conferimos o valor 1. a = 1.

b = nmero 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 Herana - 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 Herana - 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 Herana - CSS

Herana

Herda de seus descendentes

Ex:

Posso agrupar elementos para que todos recebessem a cor preta.... Ou.

Atribusse ao corpo do documento, ou div a cor preta que os outros

elementos herdam a mesma propriedade, caracterizando a herana.

Prxima Aula: BoxModel