Links em CSS
Para aplicar estilos a links com CSS, utilize as seguintes propriedades: text-decoration, color, background color. Veja os exemplos.
Neste capítulo, vamos explicar como aplicar estilo aos links e torná-los visualmente mais apelativos.
O link tem estes estados:
a:link- um link normal, não visitadoa:visited- um link que o utilizador já visitoua:hover- um link quando o utilizador passa o rato por cimaa:active- um link no momento em que é clicadoa:focus- um link que recebeu o foco do teclado
Vamos abordar estas propriedades:
Decoração do texto
Como se lembra, quando criamos um link, este fica sublinhado por predefinição. Para o remover, temos de utilizar a propriedade text-decoration.
Exemplo de utilização da propriedade text-decoration para aplicar estilo a um link:
Exemplos de text-decoration para links CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#"> This is some link.</a>
</body>
</html>Vamos explicar o significado do nosso código.
Aqui pode ver que o link, no seu primeiro e segundo estados, ficará sem sublinhado. O link fica sublinhado quando o utilizador passa o rato por cima ou clica nele.
Pode verificá-lo no seu browser utilizando os seus editores ou o nosso editor online.
Estes estilos podem ser escritos na secção <head> ou num ficheiro CSS que irá utilizar na sua página web.
Cor
Utilizamos a propriedade color para definir a cor de um link.
Por exemplo, se quisermos que o nosso link seja preto por predefinição e #1c87c9 no seu terceiro estado (a:hover), temos de escrever o seguinte:
Exemplo de utilização da propriedade color para aplicar estilo a um link:
Exemplos de color para links CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #1c87c9;
}
a:active {
color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Resultado
Cor de fundo
O que podemos fazer se quisermos que o nosso link tenha um fundo?
Basta aplicar a propriedade background-color.
Por exemplo, o nosso link terá um fundo cinzento e, ao passar o rato por cima, mudará para #1c87c9.
Quando o primeiro estado (a:link) e o segundo (a:visited) têm a mesma cor de fundo, podemos utilizar apenas a.
Exemplo de utilização da propriedade background-color para aplicar estilo a um link:
Exemplos de background-color para links CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
background-color: #555555;
}
a:hover {
background-color: #1c87c9;
}
a:active {
background-color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Pode escolher a sua cor preferida utilizando o Color Picker.