2. CSS AVANÇADO
1.Efeito cascata
O uso das folhas de estilo para controlar o "visual" de um documento HTML, não raro resulta em
regras CSS distintas, aplicáveis a um mesmo elemento no documento. Ou seja, está estabelecido um
conflito entre regras. Qual delas, regra, prevalece? Ah , isso você já sabe, entra aqui o conhecido "Efeito
Cascata". Não lembra? Leia o último parágrafo do tutorial intitulado Introdução às CSS.
2.Especifidade
A especificidade da regra CSS as vezes nos reserva "surpresas". Você deve conhecer como funciona a
especificidade para evitar as surpresas.
E vamos a um exemplo ilustrativo que certamente irá tornar mais claro este conceito do que um extenso
parágrafo explicativo.
Observe o trecho de documento HTML abaixo
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 a
mostrar o que é especificidade. Imagine uma complexa e extensa Folha de Estilo, com várias regras
aplicavéis a um elemento.
Guardemos por enquanto o conceito de especificidade como sendo "O nível de detalhamento do seletor
da regra CSS".
Lembro a sintaxe de uma regra CSS
seletor { propriedade: valor; }
Nota: é o seletor que determina a especificidade da regra.
3.Diferença entre link e @ import
A utilização de @import dentro da tag <style> em HTML era utilizada anteriormente para esconder folhas
de estilo do Netscape 4, que não tinha suporte a @import, de maneira que, opcionalmente poderíamos
proporcionar um CSS com estilos básicos para esse browser e utilizar diferentes regras em CSS com a
utilizaçã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 (Flash
of Unstyled Content).
Fonte: site do maujor
Link: http://maujor.com/tutorial/especificidade.php
