CSS Links - Centro de Ajuda Webmasters

CSS Links

Pode-se aplicar aos links todas as propiedades de cores, fontes e texto (i.e. mudar cores, fontes, sublinhados, etc). Nps links podem-se definir as propriedades de maneira diferente de acordo com o estado do link ou que seja visitado, não visitado, activo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao website. Para estilizar estes efeitos usa-se as chamadas pseudo-classes.
O que é pseudo-classe?

Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML.

Vamos ver um exemplo. Links são utilizados em HTML com tags <a>. Pode-se então usar "a" como selector CSS:

a {
   color: blue;
}

Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou não visitado. pode-se usar pseudo-classes para estilizar links visitados e não visitados.

a:link {
   color: blue;
}

a:visited {
   color: red;
}

Use as pseudo-classes a:link e a:visited para estilizar links não visitados e visitados respectivamente. Links activos são estilizados com a pseudo-classe a:active e a:hover, esta última é a pseudo-classe para links com o ponteiro do mouse sobre ele.

Pseudo-classe: link

A pseudo-classe :link é usada para links não visitados.

No exemplo a seguir links não visitados serão na cor verde.

a:link {
color: green;
}

Pseudo-classe: visited

A pseudo-clases :visited é usada para links visitados. No exemplo a seguir links visitados serão na cor amarela:

a:visited {
color: yellow;
}

Pseudo-classe: active

A pseudo-classe :active é usada para links ativos.

No exemplo a seguir links ativos terão seu fundo na cor vermelha:

a:active {
background-color: red;
}

Pseudo-classe: hover

A pseudo-classe :hover é usada para quando o ponteiro do mouse está sobre o link.

Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar a cor do link para laranja e o texto para itálico quando o ponteiro do mouse passa sobre ele, o código CSS para estes efeitos é:

a:hover {
   color: orange;
   font-style: italic;
}

É comum a criação de efeitos diferentes quando o ponteiro está sobre o link. Veremos a seguir alguns exemplos extras de estilização da pseudo-classe :hover.
Exemplo 1a: Espaçamento entre as letras

O espaçamento entre as letras de um texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicado aos links para obter um efeito interessante:

a:hover {
   letter-spacing: 10px;
   font-weight:bold;
   color:red;
}

A propriedade text-transform, para estilizar com letras maiúsculas e minúsculas. Pode ser usada para estilizar links:

a:hover {
   text-transform: uppercase;
   font-weight:bold;
   color:blue;
   background-color:yellow;
}


Os exemplos mostrados dão uma idéia das inúmeras possibilidades de combinação de diferentes propriedades. Pode criar os seus próprios efeitos — faça uma tentativa!

Uma pergunta comum: Como remover o sublinhado dos links?

Deve verificar com muito cuidado a necessidade de retirar o sublinhado dos links, pois isto poderá reduzir signifcativamente a usabilidade do website. As pessoas estão habituadas aos links na cor azul e sublinhados e sabem que ali há um texto a ser clicado. Se mudarmos a cor e os sublinhados dos links, poderá existir alguma confusão em alguns visitantes.

Para retirar o sublinhado dos links, a propriedade text-decoration pode ser usada para definir se o texto é ou não sublinhado. Para remover o sublinhado, basta definir o valor none para a propriedade text-decoration.

a {
   text-decoration:none;

}

Pode-se definir text-decoration juntamente com outras propriedades para as quatro pseudo-classes.

a:link {
   color: blue;
   text-decoration:none;

}

a:visited {
   color: purple;
   text-decoration:none;
}

a:active {
   background-color: yellow;
   text-decoration:none;
}

a:hover {
   color:red;
   text-decoration:none;
}