Estilização de links

Introdução

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 é conforme mostrada a seguir:

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}

O seletor :pseudo-classe para links

São quatro as pseudo classes para links:

Vamos a seguir analisar cada uma delas detalhadamente com uso 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 navegador. 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", quando duas ou mais regras são conflitantes aquela ocupando uma posição na folha de estilo é sobrescrita ("perde para") um regra posterior a ela na folha. 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;
3. 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 apresento alguns exemplos mostrando efeitos simples aplicando CSS às pseudo-classes para links

1-) Removendo o sublinhado do link

Típicamente, por padrão, 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 em seu estado 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:

a:link, a:visited {
	text-decoration: none
	}
a:hover {
	text-decoration: underline;
	color: #f00
	}
a:active {
	text-decoration: none
	}

2-) Adicionando sublinhado e sobrelinhado

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

Abaixo a regra para esse efeito:

a:link, a:visited, a:active {
	text-decoration: underline;
	}
a:hover {
	text-decoration: underline overline;
	color:#f00;
	}

3-) Acrescentando um fundo

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

Abaixo a regra para esse efeito:

a:hover {
	background:#ff0;
	color:#f00;
	}

4-) Link com um fundo de uma cor que muda no estado 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:

a:link, a:visited, a:active {
	text-decoration:none;
	}
a:hover {
	text-decoration: underline;
	color:#000;
	background:#ff0;
	}

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 estado link hover.

Abaixo a regra para esse efeito:

a:link, a:visited, a:active {
	text-decoration: none;
	}
a:hover {text-decoration: underline;
	color:#000;
	font-size:150%;
	}

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:

a.classe1:link, a.classe1:visited {
	text-decoration: none
	}
a.classe1:hover {
	text-decoration: underline;
	color: #f00;
}
a.classe1:active {
	text-decoration: none
	}

a.classe2:link, a.classe2:visited {
	text-decoration: underline overline
	}
a.classe2:hover {
	text-decoration: underline;
	color: #50fa7b;
	}
a.classe2:active {
	text-decoration: underline overline
	}

<a ref="https://www.maujor.com" class="classe1">
  ESTE é O LINK DA classe1
</a>

<a href="https://www.maujor.com" class="classe2">
  ESTE é O LINK DA classe2
</a>

ESTE é O LINK DA classe1

ESTE é O LINK DA classe2

Nota: No código HTML aplicamos a classe criada diretamente na tag <a>

Compartilhe essa matéria com seus amigos