Você já deve ter reparado, na sintaxe de diversos exemplos desse tutorial o uso dos elementos <STYLE>, <DIV>, <LINK> e <SPAN> e dos atributos STYLE, CLASS e ID. Nesta seção irei apresentar o que eles são, como funcionam e alguns modelos práticos com suas respectivas sintaxe.
Já sabemos que uma vez definido o layout do link dentro das tags <BODY> ou <STYLE> de uma página, todos os links dessa página apresentarão este mesmo layout. Porém, vamos supor que esta página possua 10 links (de um total de 50, digamos) que preciso apresentar maior ênfase com uma formatação diferente àquela predefinida em <BODY> ou <STYLE>, é aqui que entra o atributo CLASS (classes). Uma classe pode ser definida como um subgrupo de um estilo. Através dela podemos selecionar grupos de objetos de uma mesma categoria e configura-los com uma formatação diferente àquela predefinida. A fórmula é a seguinte:
|
<STYLE TYPE="text/css"> seletor.classe {propriedade:valor; propriedade:valor; ... } seletor.classe {propriedade:valor; propriedade:valor; ... } </STYLE> |
Onde "seletor" representa qualquer tag, depois, separado por um ponto vem a "classe" que representa um nome qualquer dado a classe e, entre as chaves, "propriedade:valor" que representa a formatação dessa classe. Agora a mesma fórmula acima com valores reais:
|
<STYLE TYPE="text/css"> A:hover.link-cinza {COLOR:#888888; font-weight:bold} A:hover.link-vermelho {COLOR:#FF0000; font-weight:bold} A:hover.link-azul {COLOR:#1E90FF; font-weight:bold} A:hover.link-verde {COLOR:#008000; font-weight:bold} </STYLE> |
Depois adiciono o atributo CLASS="link..." aos links que quero fazer distinção de cor:
|
<A CLASS="link-cinza" HREF="ab.htm">Glossário WWW</A> <A CLASS="link-vermelho" HREF="javascript.htm">JavaScript</A> <A CLASS="link-azul" HREF="tutorial.htm">Tutorial DHTML/CSS</A> <A CLASS="link-verde" HREF="ferramentas.htm">Buscadores</A> |
Agora passe o ponteiro do mouse sobre a relação de links abaixo.
Glossário WWW
JavaScript
Tutorial DHTML/CSS
Buscadores
Continuando... Na verdade você pode criar alguns efeitos bem exóticos em links. Usando o mesmo princípio de classes de estilo podemos aplicar bordas, trocar o tamanho/estilo da fonte, inserir background ou até mesmo filtros. Tudo irá depender da sua imaginação. Alguns exemplos:
|
<STYLE TYPE="text/css"> A:hover.link-bordas {border-style:dashed; border-width:1px} A:hover.link-glow {height:1; filter:glow(color=#FF0000)"; color:#FFDEAD} A:hover.link-sublinhado {border-bottom-style:double 2px; color:#FF0000} A:hover.link-background {background-image:url(imagens/back1.gif)} A:hover.link-invert {filter:fliph; height:1} </STYLE> |
O código da classe de estilo (acima) pode ser inserido em qualquer lugar dentro do código fonte do arquivo.html porém aconselho colocá-lo logo após o final do cabeçalho </HEAD> assim, quando precisar fazer alguma alteração, fica mais fácil localizá-lo. Em seguida crio o atributo CLASS="link..." configurando seus respectivos links.
|
<A CLASS="link-bordas" HREF="ab.htm">Link com bordas tracejada</A> <A CLASS="link-glow" HREF="javascript.htm">Link com filtro glow</A> <A CLASS="link-sublinhado" HREF="tutorial.htm">Link com sublinhado</A> <A CLASS="link-background" HREF="ferramentas.htm">Link com background</A> <A CLASS="link-invert" HREF="a24.htm">Link invertido</A> |
Link com bordas tracejada
Link com filtro glow
Link com sublinhado
Link com background
Link invertido
Agora, usando este mesmo exemplo com imagens, criamos alguns efeitos interessantes:
|
<A CLASS="link-glow" HREF="http://www.cade.com.br/"> <IMG SRC="imagens/achei.gif" HSPACE="20"></A> <A CLASS="link-background" HREF="http://www.cade.com.br/"> <IMG SRC="imagens/achei.gif" HSPACE="20"></A> <A CLASS="link-invert" HREF="http://www.cade.com.br/"> <IMG SRC="imagens/achei.gif" HSPACE="20"></A> |
Embora os links comuns já estejam pré-configurados em <BODY>, criei diversas classes de links com suas respectivas formatações. A isso chamamos de CLASSES DE ESTILOS. Ainda sobre este mesmo tema vamos ao nosso último exemplo...
Aparentemente ela parece ser um texto dentro de uma tabela, certo?... Mas não é, é apenas um parágrafo! Um parágrafo configurado com CLASS. No início deste arquivo, logo após </HEAD> criei uma relação de tags configuradas com classes de estilo e entre elas está a sintaxe deste parágrafo:
<STYLE TYPE="text/css">
P.barra01 {background-image:url(imagens/bg_t14.jpg); text-indent:1in;
font-family:courier new; font-weight:bold; font-size:18px; BORDER-color:#b22222;
BORDER-style:double}
</STYLE>
Depois simplesmente adiciono o atributo CLASS="barra01" dentro de <P> no parágrafo que quero destacar como título e pronto.
<P CLASS="barra01">Observe esta barra com um texto
Se porventura existirem 20 parágrafos iguais a este, dentro do arquivo, estarei otimizando o seu tamanho evitando de escrever (ou copiar) 20 vezes a sua sintaxe (que por sinal não é pequena). E caso queira fazer alguma alteração o trabalho será fácil e rápido bastando mexer em <classe de estilo> uma única vez.
A classe de estilo é muito útil para economizar tempo, diminuir o tamanho do código fonte e com isso as possibilidades de erros de digitação, sua página irá carregar mais rápida, aumenta o controle do layout tornando mais fácil sua manutenção e/ou alteração, e outras coisas mais que irá descobrir depois...
Para saber mais sobre esse assunto vá para:
Método Embedding.