Links

Quer conferir? Crie um documento XHTML com um link da classe1 e copie as regras CSS acima para você ver o efeito no browser.

É necessário atentar para a ordem em que as declarações para links são definidas: lembre-se de que, pelo "efeito cascata", as regras mais próximas do elemento prevalecem sobre as mais distantes.

Por exemplo: se você define a: hover ANTES de a:visited, a:visited 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 funcionará mais naquele link, pois a:visited prevalecerá sobre a:hover.

Assim, a ordem dessas declarações deve ser a seguinte:

1. a:link
2. a:visited
3. a:hover
4. a:active

Para cada uma dessas pseudoclasses, é possível usar as propriedades que formatam texto, caso o link seja texto, ou usar as propriedades que formatam figuras, se o link for uma figura.

Com o uso de classes e pseudoclasses, é possível estilizar os links de maneiras bem diferentes num mesmo documento (X)HTML.

A Figura 4 mostra alguns exemplos de estilização para link. Que tal criar um documento XHTML, copiar o código a seguir, abri-lo em seu browser e passar o mouse em cima desses links para ver o efeito em cada um deles?

See the Pen autoria_web_5f4_links by Materiais (@materiais) on CodePen.