|
|
TUTORIAL CSS
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 que será publicado em
28/03/2208. Até lá.
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 - Sintaxe
e elementos das regras CSS- será publicado
no dia 21/03/2008. Até lá.
Publicado: 21/03/2008
|
