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 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.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] 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 define a: hover ANTES de a: visited, esta prevalecerá sobre a: hover e em consequência: O link visitado pela primeira vez assumirá a regra definida em a: visited e a partir de então a: hover não mais funcionará naquele link pois a: visited prevalecerá sobre a: 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:



2-) Adicionando sublinhado e sobrelinhado
Este efeito semelhante ao anterior, consiste em um sobrelinhado adicional no link hover.
Abaixo a regra para esse efeito:



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:



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:



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:



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:






ESTE É O LINK DA classe1


ESTE É O LINK DA classe2