CSS: Personalizando os Links

Hoje, no tutorial CSS vamos aprender a personalizar os links. A primeira coisa que precisa saber sobre os links é que eles possuem 4 estados, e você pode personalizar cada um desses estados com qualquer comando que vimos até agora. Podemos colocar uma cor de fundo, alterar a fonte, dar uma formatação diferente de texto etc. Enfim, como disse antes, tudo que foi visto até agora podemos fazer. Então, vamos começar com o primeiro estado que é:



1. Normal
Um link está no seu estado normal é o estado padrão. Ou seja, é o estado que ele vai estar quando não tem nada de especial com ele. Para mudar a aparência de um link em seu estado normal, fazemos da seguinte forma:

a:link{
  /* Sua formatação aqui */
}

Aqui indicamos que queremos alterar a propriedade link da tag <a>, e dentro das chaves colocamos as configurações que desejamos.

2. Link Visitado
O estade de Visitado ocorre quando você já acessou o site que o link está direcionando. Ou seja, se a exata página do link está no histórico, então o link vai assumir o estado de visitado. Para alterar a aparência de um link visitado, usamos o seguinte código:

a:visited{
  /* Sua formatação aqui */
}

3. Mouse sobre o Link
O próprio nome já diz, esse estado ocorre quando o ponteiro do mouse está sobre o link. Se o mouse sair de cima, ele voltará para o estado normal ou para o estado visitado. Para modificar esse estado:


a:hover{
  /* Sua formatação aqui */
}

4. Ativado
O estado de ativado ocorre quando o usuário está clicando no link. Geralmente a duração é rápida suficiente para passar despercebido. Entretanto, se o usuário clicar no link e segurar o botão, você poderá ver esse estado. Para modificar, usamos o seguinte código:


a:active{
  /* Sua formatação aqui */
}

5. Consiferações Finais e Exemplo
Quando você está alterando a aparência do link, tenha em mente que para funcionar corretamente, você declare na mesma ordem que foi apresentado aqui. A configuração pode não funcionar caso você declare o estado ativado antes do mouse sobre o link, portanto tenha em mente isso.

Para finalizar o tutorial, vou colocar um exemplo onde os links do site tem os seguintes comportamento:

• O link normal é sublinhado na cor azul;
• O link visitado é sublinhado na cor verde;
• O link quando o mouse está em cima fica sublinhado, em negrito na cor vermelho;
• O link quando ativado fica sem sublinhado, em negrito, na cor branca com fundo preto;

 Para esse caso, temos as seguintes configurações:

a:link{
  text-decoration:underline;
  color:#0000FF;
}
  a:visited{
  text-decoration:underline;
  color:#00FF00;
}
 
a:hover{
  text-decoration:underline;
  color:#FF0000;
  font-weight:bold;
}
 
a:active{
  text-decoration:none; 
  color:#FFFFFF; 
  font-weight:bold;
  background-color:#000000;
}