CSS Links

CSS  possibilita definir uma variedade infinita de layouts e efeitos para um link ou um conjunto de links.

O limite é a sua imaginação!

Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc…) diferentes através de CSS.

Abordarei neste tutorial as técnicas básicas de manipular os quatro seletores de link.

Pseudo classes

Os efeitos em links são possíveis através de declarações de regras de estilo para as pseudo classes do elemento<a>do HTML.

As pseudo classes são usadas em CSS, para adicionar efeitos diferentes a alguns seletores, ou a uma instância de alguns seletores.

Sintaxe

A sintaxe das pseudo classes:

seletor:pseudo classe {propriedade: valor}

As classes em CSS podem também ser usadas com pseudo classes.

Esta regra permite que você defina diferentes efeitos para links localizados em diferentes lugares em uma mesma página. No último item deste tutorial “Diferentes estilos de links em uma mesma página web” veremos este efeito.

seletor.class:pseudo-class {propriedade: valor}

Os “seletores:pseudo classe” de links

São quatro as pseudo classes dos links:

1. a:link……..define o estilo do link no estado inicial;
2. a:visited…define o estilo do link visitado;
3. a:hover…..define o estilo do link quando passa-se o mouse sobre ele;
4. a:active….define o estilo do link ativo (o que foi “clicado”).

Vamos a seguir analisar cada um deles detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada seletor apresento as regras CSS definidas dentro de uma folha de estilos incorporada, e a seguir os efeitos em um link, onde se aplicam as regras.

Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.

Grande flexibilidade

É perfeitamente possível com CSS definir-se um estilo diferente para cada um dos quatro seletores, de forma semelhante como é definido para qualquer texto HTML.

Prioridade nas declarações para links

É importante a ordem de definição das regras para os estados dos links. Lembre-se de que pelo “efeito cascata”, as regras mais próximas do elemento prevalecem sobre as mais distantes. Assim, por exemplo: se voce definea: hover ANTES dea: visited, esta prevalecerá sobrea: hover e em consequência: O link visitado pela primeira vez assumirá a regra definida ema: visitede a partir de entãoa: hovernão mais funcionará naquele link poisa: visited prevalecerá sobrea: hover.

Qual é a ordem normal é lógica das declarações? É simples concluir ! Senão vejamos:




1.) a: link é o estado inicial dos links;

a:link deverá ser a primeira declaração;

2.) a: active deverá acontecer mesmo

em links já visitados;

a: active deverá ser declarado depois

de a:visited;

1.) a: hover não precisa funcionar em a:active;

a:active pode ser declarado depois de a:hover.


Em consequência a ordem das declarações deve ser:
a:link
a:visited
a:hover
a:active


Exemplos de efeitos em links

A seguir exemplos dos efeitos mais comuns e simples aplicando CSS aos seletores de links

1-) Removendo o sublinhado do link

Típicamente, por default os links são sublinhados e na cor azul.

Um efeito muito comum em páginas web é o de se retirar o sublinhado do link normal, mudar a cor e fazer “aparecer” o sublinhado, quando o mouse é passado sobre ele.

Esse efeito obtém-se facilmente com CSS. Abaixo a regra para esse simples efeito:


<style type="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: underline;
color: #FF0000;
}
a:active {text-decoration: none}
-->
</style>

2-) Adicionando sublinhado e sobrelinhado

Este efeito semelhante ao anterior, consiste em um sobrelinhado adicional no link hover.

Abaixo a regra para esse efeito:


<style type="text/css">
<!--
a:link, a:visited, a:active {
text-decoration: underline;
}
a:hover {text-decoration: underline overline;
color:#FF0000;
}
-->
</style>

3-) Acrescentando um fundo

Este efeito simulando um “rollover” simples, consiste em acrescentar uma cor de fundo no link hover.

Abaixo a regra para esse efeito:


<style type="text/css">
<!--
a:link, a:visited, a:active {
text-decoration: underline;
}
a:hover {text-decoration: underline;
background:#ffc;
color: #FF0000;
}
-->
</style>

4-) Link com um fundo de uma cor que muda no link hover

Este efeito também simula um “rollover” simples, consiste em mudar a cor de fundo no link hover.

Abaixo a regra para esse efeito:


<style type="text/css">
<!--
a:link, a:visited, a:active {
text-decoration: underline;
background:#FFFFFF;
}
a:hover {text-decoration: underline;
color:#000;
background:#FFFFCC;
}
-->
</style>

5-) Link que muda o tamanho da letra no link hover

Neste efeito há uma mudança no tamanho da letra (em geral para maior) no link hover.

Abaixo a regra para esse efeito:


<style type="text/css">
<!--
a:link, a:visited, a:active {
text-decoration: none;
}
a:hover {text-decoration: underline;
color:#000000;
font-size:150%; }
-->
</style>


Diferentes estilos de links em uma mesma página web

É possível definir diferentes estilos para os 4 seletores de links para serem usados em uma mesma página.

Isso consegue-se utilizando os seletores de contexto que consiste em adicionar uma classe aos seletores.

Assim cada conjunto dos 4 seletores de uma classe assumem o comportamento daquela classe e você pode definir quantas classes quiser.

Por exemplo:

<html>
<head>
<style type="text/css">
a.classe1:link {text-decoration: none}
a.classe1:visited {text-decoration: none}
a.classe1:hover {
text-decoration: underline;
color: #FF0000;
}
a.classe1:active {text-decoration: none}

a.classe2:link {
text-decoration: underline overline
}
a.classe2:visited {
text-decoration: underline overline
}
a.classe2:hover {text-decoration: underline;
color: #00FF00;
}
a.classe2:active {
text-decoration: underline overline
}
</style>
</head>
<body>
<a href=”http://www.maujor.com” class=”classe1″>
ESTE É O LINK DA classe1
</a>

<a href=”http://www.maujor.com” class=”classe2″>
ESTE É O LINK DA classe2
</a>