|
|
TUTORIAL CSS
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.
e-mail para contato:
Caso queira, disponibilizamos endereço eletrônico
para contato. Alertamos para o fato de que nem
todos os e-mails recebidos serão respondidos
de maneira individualizada, sendo certo, contudo,
que todos serão atenciosamente lidos e examinados.
Fale conosco através do e-mail
tutoriaiscss@emprimeiro.com.br que
estará disponível até o dia 27 de junho do ano
corrente. Nosso próximo tutorial - Elementos
da cascata e regras CSS- será publicado
no dia 21/03/2008. Até lá.
Publicado: 14/03/2008
|
