Aula 09. efeito cascata e herança

151 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
151
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 09. efeito cascata e herança

  1. 1. Efeito Cascata e Herança CSS - Style Sheet Professor: Jolvani Aula 09
  2. 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. 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. 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. 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. 6. Efeito Cascata e Herança - CSS  Vamos aplicar o estilo !importante, vejamos:
  7. 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. 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. 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. 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. 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.
  12. 12. Próxima Aula: BoxModel

×