As folhas de estilo definitivamente
facilitam o trabalho de um Web Master quando se trata de garantir uma
formatação homogênea por todas as páginas de um site, mesmo os maiores
e mais complexos sites profissionais.
Melhor ainda, mesmo que se deseje mudar todo o layout, ou um certo grupo
de formatação (tipo todos os links deverão ser apresentados SEM o
sublinhado característico dos links normais), as folhas de estilo
permitem que se faça tal alteração em minutos, e ela valha para todas
as páginas do site. Parece quase mágica, mas é apenas tecnologia.
Por
exemplo, imagine que você queira mudar todas as TAGs <hr> de uma
página (ou de um site todo, não importa!), para que sejam mostradas com
largura de 80% das linhas, alinhadas ao centro, e com uma altura de 2.
Você teria que ir em cada uma das TAGs <hr> (e para isso precisaria
procurar e alterar TODAS as ocorrências dentro da página) e alterar de <hr>
para a nova configuração: <hr width="80%"
align=center size=2>.
Nada que não pudesse ser feito em uns cinco/dez minutos. Mas agora vamos
imaginar que fosse no site todo. Aí a coisa ia pegar mesmo: um trabalho
de muito tempo mesmo...
Usando uma
folha de estilo, bastaria alterar a definição da TAG <hr> uma
única vez, e tudo estaria terminado.
As
folhas de estilo podem ser comparadas a um gabarito de formatação de
páginas HTML. Ela permite que se alterem quase todas as TAGs da linguagem
HTML.
HISTÓRIA
As
Folhas de Estilo foram introduzidas quando do lançamento do browser
Internet Explorer 3. Logo em seguida, quando lançou a versão 4 do
Communicator, a Netscape também aderiu a esse padrão.
Porém quando a Microsoft lançou a versão 4, ela já agregou várias
funcionalidades novas, que entretanto se mostraram incompatíveis com o
Netscape. Após o lançamento do Internet Explorer 5, com uma carga enorme
de funcionalidades para a CSS, as diferenças cresceram, e com elas mais
problemas de incompatibilidade entre os dois maiores browsers do momento.
Por
isso, se você pretende utilizar CSS tente nivelar "por baixo"
os recursos CSS que serão implementados em seu site, para permitir que a
maioria dos internautas possam apreciar suas páginas, em todo o seu
potencial criativo.
Uma folha de estilo é composta por regras
(as denominadas RULES, em inglês) que indicam como o browser deve
apresentar uma página HTML.
Cada regra é composta por um seletor,
que é o elemento que recebe o estilo, em geral uma TAG da linguagem HTML.
Exemplo P, B, H2, HR.
Cada TAG possui várias propriedades
que podem ser alteradas pelo CSS.
Cada propriedade deve assumir um determinado valor.
A sintaxe básica de um estilo segue um
padrão, conforme modelo abaixo:
SELETOR
{ propriedade: valor }
Seletor:
é uma TAG, exemplo: P, TABLE, HR etc.
Propriedade:
é o nome da propriedade que será formatada pelo CSS, exemplo: color,
font-size, etc.
Valor:
é o conteúdo que será atribuído a propriedade sendo
"estilizada".
Um seletor pode ter várias propriedades
estilizadas numa única linha de comando, bastando para isso separar cada
propriedade com um sinal de "ponto-e-vírgula".
P { color: #FF0000 } - torna cada
parágrafo de uma página na cor vermelha;
P { color: red; text-align=justify } -
torna cada parágrafo de uma página na cor vermelha, usando alinhamento
justificado;
H1 { color: #00FF00; background:
#0000FF } - torna todos os títulos de nível 1 de uma página na cor
verde claro, sobre um fundo na cor azul;
B { color:0000FF; font-family: Arial, Verdana; font-size=12pt } - torna todas as formatações BOLD de uma
página na cor azul, usando a fonte Arial, se ela existir no micro do
visitante (senão utiliza a fonte Verdana), com um tamanho de fonte de 12
pontos;
Atenção: não temos condição de dar suporte direto para todos os visitantes;
use nosso
Super Fórum Web Design para poder enviar suas dúvidas. O registro é gratuito!
Para um suporte diferenciado use o nosso
Clube do Help Desk.
