Elementos da Cascata - Regras CSS
FOLHA DE ESTILO PADRÃO DO NAVEGADOR:os navegadores possuem as suas respectivas folhas de estilo padrão, cujas características são determinadas pelo fabricante. Estas folhas são editáveis pelo usuário, o que no Internet Explorer, apenas a título exemplificativo, pode ser dar da seguinte maneira: na guia ferramentas clique em opções da internet e, depois, em acessibilidade. O usuário poderá alterar as declarações de estilo do fabricante através de uma folha de estilo linkada. Este é o primeiro degrau da escada e o que vier depois, como óbvio, estará acima dele e, portanto, terá precedência.
ESTILO DEFINIDO PELO USUÁRIO: como mencionamos acima, o usuário pode alterar o estilo-padrão estabelecido pelo fabricante de determinado navegador. Desta maneira, caso você estabeleça as mesmas características de estilo em diferentes navegadores, você poderá visualizar documentos Web com a mesma aparência em cada um dos respectivos navegadores: este é o segundo grau da escada.
REGRAS DE ESTILO DEFINIDAS PELO AUTOR: O terceiro e próximo degrau, em escala ascendente, é definido pelo autor de determinado documento Web, através de uma das quatro maneiras mencionadas nos tutoriais de números 2 e 3 (regras de estilo internas e externas). Aqui faremos uma breve consideração sobre a diretiva !important, criada especificamente para definir prioridade em caso de regras conflitantes originadas em um mesmo patamar. Veja o exemplo:
<head>
<style type="text-css">
body {
background-color: #000000;
}
p {
width: 250px;
font-family: verdana;
font-size: 10px;
color: red;
}
</style>
</head>
Veja o resultado do exemplo supracitado sem a declaração !important
Façamos uma alteração criando, propositalmente, uma regra de usuário conflitante, nos moldes do exemplo a seguir:
<head>
<style type="text-css">
body {
background-color: #000000;
}
body {
background-color: #336699 !important;
}
p {
width: 250px;
font-family: verdana;
font-size: 10px;
color: red;
}
</style>
</head>
Veja o resultado do exemplo supracitado com a declaração !important
Há no exemplo acima, como dissemos, regras conflitantes para o mesmo seletor, no caso, body. A primeira regra CSS define como preta (#000000) a cor do background. A segunda regra CSS, para o mesmo seletor, define como sendo azul (#336699) a cor do background, destacando a presença da diretiva !important na segunda regra CSS.
Vamos relembrar agora qual é a ordem da cascata, conforme mencionado do tutorial anterior:
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.
Será correto afirmar, portanto, que a hierarquia das Folhas de Estilo em Cascata dá-se pela definição de sua origem (navegador, usuário e autor); por sua forma de expressão quando se tratar de regras definidas pelo autor, que conterá uma hierarquia peculiar, em ordem crescente, assim estabelecida: 1 - estilo externo; 2 - estilo incorporado e; 3 - estilo inline. Por fim, as declarações que contarem com a diretiva !important, onde uma declaração do usuário terá precedência sobre uma declaração do autor.
Em síntese: declaração do usuário com a diretiva !important É MAIOR, hierarquicamente, do que uma declaração do autor com a mesma diretiva.
DESTAQUE: A regra CSS definida pelo usuário sem a diretiva !important ocupa menor nível hierárquico que a regra CSS definida pelo autor nas mesmas condições. Já uma regra CSS definida pelo usuário com a diretiva !important ocupa maior nível hierárquico que a regra CSS definida pelo autor, também com a diretiva !important.
Vamos a um interessante exemplo prático que lhe dará uma idéia da poderosa ferramenta que você disporá ao utilizar as regras CSS.
1 - Copie o código abaixo em editor de textos (bloco de notas por exemplo) e salve-o com o nome altera-paragrafo.css;
p {
font-size: 2em;
}
2 - Abra o navegador Internet Explorer 6.0 ou 7.0;
3 - Selecione a opção "Ferramentas";
4 - Em aparência, selecione "Acessibilidade";
5 - Selecione "Ignorar estilos de fonte especificados em páginas da Web";
6 - Selecione, ainda, "Formatar documentos usando minha folha de estilos" e;
7 - Na caixa de diálogo "Folhas de estilos do usuário" que se abre, coloque o endereço do arquivo criado no item "1" e clique em "Ok".
Todos os documentos Web que contiverem o seletor "p" (parágrafo) serão reestilizados com uma fonte de 2em (ou 32px) !
Você terá inúmeras oportunidades de melhor conhecer e assimilar a hierarquia das regras CSS, processo que poderá ser acelerado se se propuser a fazer experimentos simulando diferentes situações de expressão de regras de estilo conflitantes.
Como elemento, ainda básico de nosso estudo resta saber, exatamente, o que é uma regra CSS e quais elementos a compõe.
REGRA CSS: é a menor porção de um código capaz de definir um efeito de estilização. Podemos utilizar como exemplo o código acima referido em que estabelecemos como sendo de 32px (ou 2em) o tamanho da fonte utilizada nos seletores p (parágrafos). Vamos, agora, nomear as suas componentes:
p (seletor) {
font-size (propriedade): 2em (valor);
}
Ao conjunto propriedade + valor damos o nome de DECLARAÇÃO.
À soma de todos estes elementos, ordenadamente dispostos, chamamos REGRA CSS.
Em síntese, podemos afirmar que uma regra de estilo é constituída por um seletor e uma declaração, assuntos que serão abordados em nosso próximo tutorial.
Publicado em: 21/03/2008 Última atualização: 10/03/2009