HTML
Dicas de Uso para a Construção de Páginas Web

Ordem Correta em Links Usando 2 Estilos em Links

As folhas de estilo podem ser aplicadas em várias situações dentro de seu site. Vimos na parte 4 alguns exemplos individualizados de uso nos casos de hiperlinks. Vamos nos aprofundar agora um pouco mais, falando de:

• ordem correta de uso de CSS para o seletor A;
• uso de dois tipos de estilos para o seletor A;

ORDEM CORRETA EM LINKS

Uma das mais utilizadas aplicações de CSS é para alterar a formatação básica dos links dentro de uma página. Podemos usar as seguintes propriedades em links básicos.

É importante, aliás muito importante, notar que deve-se manter a sequência definida no exemplo acima. Isto é: primeiro define-se o estilo LINK NORMAL, depois o estilo LINK VISITADO, depois o LINK EM HOVER, e finalmente se define o LINK ATIVO.

Esta condição se deve ao fato de que para estilos de mesmo ordem/tipo, a prioridade sempre se dará na sequência de cima para baixo (está é a parte CASCADING do CSS). Este regra garante que o segundo estilo tem maior prioridade que o primeiro estilo, porém tem menor prioridade que o estilo que for definido à seguir.

Obviamente que não será necessário utilizar uma redefinição dos 4 estados diferentes de um link, porém jamais use o estado HOVER antes do VISITED, pois você verá que o HOVER jamais aparecerá após a primeira visita, mesmo que você teimar em deixar o mouse pousado sobre o link o tempo que quiser. Isto porque a prioridade de HOVER será MENOR que a de VISITED e após, ser o link visitado, este estado terá sempre prioridade máxima, não se deixando visualizar o estado anterior.

topo

USANDO DOIS ESTILOS DE LINKS NA MESMA PÁGINA

Quando se desejar ter dois tipos diferenciados de estilos para dois tipos de links, numa mesma página, deve-se lançar mão de definir, além do estilo básico, uma nova CLASS específica para o segundo tipo de link. Este é um truque que pode-se utilizar, por exemplo,  quando você tem links em áreas de cores de fundo muito distintas, onde o próprio contraste de um ou mais dos estados possa ser prejudicado por um dos fundos escolhidos para a página.

A sintaxe mais comum desse método é a seguinte:

<STYLE TYPE="text/css"> <!- A.lnkdois:link {color: blue; text-decoration: none;} A.lnkdois:visited {color: green; text-decoration: none;} A.lnkdois:hover {color: brown;text-decoration:underline;} A.lnkdois:active {color: salmon; text-decoration: none;} -> </STYLE> Para se aplicar este estilo CLASS deve-se apenas mudar levemente a sintaxe do comando <a href>, como no exemplo:  <a href="pagina.htm" class="lnkdois">Veja este Link</a> Exemplo:  Veja este Link   o link, enquanto você não o clicar nenhuma vez, estará na cor AZUL (COLOR: BLUE) e não há o sublinhado tradicional (TEXT-DECORATION: NONE) - após ser visitado ficará com a cor VERDE e continuará sem o sublinhado - mas enquanto estiver com o mouse sobre o link, este aparecerá na cor MARRON e agora com sublinhado tradicional - e finalmente enquanto estiver como um link ativo ficará na cor SALMÃO e sem o sublinhado.

topo

É importante que você teste por si mesmo estes exemplos numa página nova, onde possa fazer diversas experiências, variando parâmetros, acoplando outros estilos, sem prejudicar uma página real de seu site.