Aplicação avançada de estilo aos links

Vemos como atribuir estilos aos links da página de uma maneira potente, para fazer interessantes barras de navegação.

Neste artigo vamos ver como poderíamos criar uma barra de navegação bastante dinâmica utilizando unicamente as Folhas de Estilo em Cascata. No exemplo vamos construir uma barra de navegação que contem links de várias cores que mudam de tonalidade ao passar o mouse por cima.

Podemos ver o resultado de nossa barra clicando este link, para ter uma idéia mais exata do que queremos conseguir.

Como colocar estilo aos links

Como vimos nos capítulos anteriores de nosso manual de CSS, mas o repetiremos aquí. Define-se o estilo dos links atribuindo sua aparência em seus distintos estados:

Link não visitado. Define-se com o atributo link.
Link visitado. Define-se com o atributo visited.
Link ativo (quando se está clicando). Define-se com active.
Link com o mouse em cima. Define-se com hover.

Esta definição se realiza no cabeçalho da página, entre as etiquetas <STYLE> e </STYLE>, e é global a toda a página.

Um exemplo disto pode ser visto nesta declaração de estilos:

<STYLE type="text/css">
    A:link {text-decoration:none;color:#0000cc;}
    A:visited {text-decoration:none;color:#ffcc33;}
    A:active {text-decoration:none;color:#ff0000;}
    A:hover {text-decoration:underline;color:#999999;}
</STYLE>

Como dar estilo a um link em concreto

Se queremos ressaltar nossa barra de navegação provavelmente vamos querer colocá-la em uma tabela de nossa página web, com uma cor que contraste um pouco com o fundo. Em um caso como este, será necessário que os links da barra de navegação e os links normais da página tenham cores diferentes, por estarem situados sobre dois tipos de fundos distintos.

É por isso que os links da barra vão ter uma cor diferente das definidas no cabeçalho da página, com os estilos. Isto pode ser conseguido desta maneira:

<a href="#" style="color:#ff0000">Meu link</a>

Definimos a cor de um link de uma maneira, utilizando o atributo style, de modo que este link sempre terá a cor indicada, independentemente de seu estado.

É um link amarelo que ficaria muito bem realçado sobre um fundo escuro, como se pode ver no seguinte exemplo de barra de navegação.

Link 1

Outro link

Link 3

Na tabela anterior temos links amarelos em uma web onde os links são azuis por padrão.

Como utilizar as classes ao aplicar estilo aos links

Também vimos nos capítulos anteriorres que o uso de classes pode ser muito útil na hora de definir estilos especiais que podemos aplicar às etiquetas que quisermos. Na hora de trabalhar com os links também podemos aplicar as classes para definir distintos tipos de links, que têm distintos tipos de estilos.

A.classe1:visited {color:#ff0000;}
A.classe1:active {color:#ff0000;}
A.classe1:link {color:#ff0000}
A.classe1:hover {color:#00ff00}

A vantagem ao utilizar as classes com os estilos dos links é que podemos especificar um formato distinto ao link dependendo de seu estado: visitado ou não, ativo ou com o mouse sobre ele.

Se não está claro, ao especificar o estilo com o atributo style do link só podíamos dizer que queremos o link em amarelo, e sempre o teremos em amarelo (seja visitado ou não, ativo, ou estando com o mouse em cima). Com as classes definimos um novo tipo de link ao qual podemos dar distintos formatos dependendo de seu estado.

Outras vantagens de utilizar as classes consistem em que escrevemos somente uma vez os os estilos e que podemos mudar a cor de todos os links da classe ao mudar a declaração.

A partir do que acabamos de aprender podemos criar o exemplo de barra de navegação dinâmica utilizando CSS que havíamos visto ao princípio do capítulo. O código seria o seguinte:

<html>
<head>
    <title>Exemplo CSS para links</title>
<style type="text/css">
    A:link {color:#0000cc;}
    A:visited {color:#0000cc;}
    A:active {color:#0000cc;}
    A:hover {color:#0000ff;}

    A.classe1:visited {color:#ffff00;}
    A.classe1:active {color:#ffff00;}
    A.classe1:link {color:#ffff00}
    A.classe1:hover {color:#00ff00}

    A.classe2:visited {font-size:12;color:#ffffff;}
    A.classe2:active {font-size:12;color:#ffffff;}
    A.classe2:link {font-size:12;color:#ffffff;}
    A.classe2:hover {font-size:12;color:#ffff33;}

    body {font-family:arial;font-size:11;font-weight:bold}
    td {font-family:arial;font-size:11;font-weight:bold}
</style>
</head>

<body>
<a href="#">Este link é normal</a>
<br>
<br>
<br>
<span style="font-weight:normal;font-size:10">
Os links desta barra são especiais,
<br>
estão definidos por classes
</span>
<br>
<table width="110" cellspacing="1" cellpadding="2" border="0">
<tr>
    <td bgcolor="#aa0000"><a href="#" class="clase2">Opções 1</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Link classe1</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Outro de classe1</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="classe1">Mais links</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Ainda mais</a></td>
</tr>
</table>

</body>
</html>

Pode-se ver a página em funcionamento neste link. Esperamos que este pequeno manual de CSS seja bastante proveitoso para suas criações.