Efeito Cascata - A Hierarquia dos Comandos CSS
A HIERARQUIA NA CASCATA:nos dois últimos tutoriais abordamos as maneiras possíveis de utilizar as CSS em um documento web. Agora vamos cuidar da maneira como estas formas de vinculação relacionam-se entre si, bem como frente a outros elementos definidores de estilo e formatação.
Iniciaremos respondendo as perguntas formuladas no tutorial anterior. Sim, nós podemos aplicar regras de estilo e formatação CSS de diversas maneiras para um mesmo elemento. Assim o resultado final de estilo e formatação decorrente de aplicação de determinadas regras a um mesmo seletor - um parágrafo, por exemplo - ocorrerá em função da precedência hierárquica de uma norma em relação à outra. Veja o exemplo a seguir:
<head>
<link rel="stylesheet" type="text/css" href="emprimeiro4.css">
</head>
Sabemos que o documento que possuir a seção head supracitada terá suas regras de estilo definidas em um arquivo CSS que resolvemos nomear emprimeiro4. Observe a sintaxe do documento:
<head>
<link rel="stylesheet" type="text/css" href="emprimeiro.css">
</head>
<body>
<p>Emprimeiro: aqui você estará sempre em primeiro lugar</p>
</body>
O arquivo denominado emprimeiro4.css terá o seguinte conteúdo:
body {
background-color: #000000;
}
p {
width: 250px;
font-family: verdana;
font-size: 10px;
color: red;
}
Veja o resultado do exemplo supracitado: exemplo1
Note que este exemplo difere-se daqueles utilizados nas lições anteriores pelo acréscimo do seletor "body", da propriedade "background-color", com valor por nós atribuído de #000000 (ou seja, cor preta). A esta porção de código definida acima chamamos Regra CSS. Correto, portanto, afirmar que uma regra css é composta de um seletor; de uma propriedade e; de um valor. Para melhor esclarecer, é correto afirmar que o arquivo utilizado em nosso exemplo "emprimeiro4.css" possui 2 (duas) regras CSS, o que permite inferir que a quantidade de regras é definida pelo número de seletores, no caso em análise, "background" e "p". Pois bem, veja agora o exemplo a seguir:
<head>
<link rel="stlylesheet" type="text/css" href="emprimeiro4.css" media="screen">
<style type="text-css">
body {
background-color: #336699;
}
p {
width: 280px;
font-family: verdana;
font-size: 12px;
color: white;
}
</style>
</head>
Construímos uma página que tem regras definidas através de uma folha "linkada" e de estilo "incorporado" - para relembrar reveja: tutorial lições preliminares I e tutorial lições preliminares II - definindo regras CSS distintas para os mesmos seletores, no caso, background-color e p. Os valores estabelecidos no arquivo "emprimeiro4.css" e aqueles definidos de maneira incorporada são distintos, à exceção do valor qualitativo estabelecido para a propriedade font-family que tem o mesmo valor para o estilo incorporado e para o estilo linkado, qual seja: verdana.
Veja a aparência que terá esta página: exemplo2
Isto já lhe permite chegar a algumas conclusões, não é ?
Vamos promover uma alteração no código ora utilizado, que passará a ter a seguinte sintaxe:
<head>
<link rel="stlylesheet" type="text/css" href="emprimeiro4.css" media="screen">
<style type="text-css">
body {
background-color: #336699;
}
p {
width: 280px;
font-face: verdana;
font-size: 12px;
color: white;
}
</style>
</head>
<body style:"background-color: #336699;">
<p style="width: 400px; color: green; font-family: arial; font-size: 11px;">Emprimeiro: aqui você estará sempre em primeiro lugar</p>
</body>
Veja qual a aparência desta página: exemplo3
Definitivamente uma regra CSS pode anular outra. Ou melhor: há hierarquia entre entre as CSS, o que dá às folhas de estilo uma admirável versatilidade, abrindo ao desenvolvedor um sem-número de possibilidades.
Vamos conhecer qual é a ordem (hierarquia), em ordem crescente (da menos importante para a mais importante), da cascata:
a) folha de estilo padrão do navegador (internet-explorer, firefox, ópera, safari e etc.);
b) folha de estilo do usuário;
c) folha de estilo do autor:
c.1 - estilo externo (importado ou linkado);
c.2 - estilo incorporado;
c3) - estilo inline.
d) - declaração do autor com !important e;
e) - declaração do usuário com !important.
No próximo tutorial abordaremos detalhes específicos dos elementos que integram esta ordem hierárquica, assim como trataremos, de maneira detalhada, dos elementos que compõem as regras CSS.
Publicado em: 14/03/2008 Última atualização: 10/03/2009