CSS AVANÇADOGarcia, Diogo
CSS AVANÇADO1.Efeito cascataO uso das folhas de estilo para controlar o "visual" de um documento HTML, não raro resulta em...
O documento é rederizado e apresentado na tela como mostrado abaixo.Note que foram declaradas 03 (três) regras CSS, todas ...
Próximos SlideShares
Carregando em…5
×

Css avançado

649 visualizações

Publicada em

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
649
No SlideShare
0
A partir de incorporações
0
Número de incorporações
149
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Css avançado

  1. 1. CSS AVANÇADOGarcia, Diogo
  2. 2. CSS AVANÇADO1.Efeito cascataO uso das folhas de estilo para controlar o "visual" de um documento HTML, não raro resulta emregras CSS distintas, aplicáveis a um mesmo elemento no documento. Ou seja, está estabelecido umconflito entre regras. Qual delas, regra, prevalece? Ah , isso você já sabe, entra aqui o conhecido "EfeitoCascata". Não lembra? Leia o último parágrafo do tutorial intitulado Introdução às CSS.2.EspecifidadeA especificidade da regra CSS as vezes nos reserva "surpresas". Você deve conhecer como funciona aespecificidade para evitar as surpresas.E vamos a um exemplo ilustrativo que certamente irá tornar mais claro este conceito do que um extensoparágrafo explicativo.Observe o trecho de documento HTML abaixo
  3. 3. O documento é rederizado e apresentado na tela como mostrado abaixo.Note que foram declaradas 03 (três) regras CSS, todas elas, aplicáveis ao elemento p. o primeiro parágrafo está dentro da div conteudo e lhe foi atribuida a classe nivelc; o segundo parágrafo está dentro da div conteudo; o terceiro parágrafo está fora da div conteudo dentro da tag <body>Diz-se que para aplicação no parágrafo, a regra #conteudo p.nivelc {... é mais específica que p.nivelc {...que por sua vez é mais específica que p {...Mas, isto tudo parece bastante óbvio não é? Sim concordo, no entanto este exemplo visa somente amostrar o que é especificidade. Imagine uma complexa e extensa Folha de Estilo, com várias regrasaplicavéis a um elemento.Guardemos por enquanto o conceito de especificidade como sendo "O nível de detalhamento do seletorda regra CSS".Lembro a sintaxe de uma regra CSSseletor { propriedade: valor; }Nota: é o seletor que determina a especificidade da regra.3.Diferença entre link e @ importA utilização de @import dentro da tag <style> em HTML era utilizada anteriormente para esconder folhasde estilo do Netscape 4, que não tinha suporte a @import, de maneira que, opcionalmente poderíamosproporcionar um CSS com estilos básicos para esse browser e utilizar diferentes regras em CSS com autilização de da tag <link />. Esta técnica quando não era proporcionada um estilo com a utilização de<link>, ocorria o inconveniente de o conteúdo aparecer sem qualquer estilo CSS, o famoso FOUC (Flashof Unstyled Content).Fonte: site do maujorLink: http://maujor.com/tutorial/especificidade.php

×