Os links podem ser personalizados para melhorar a aparência e a experiência de navegação dos usuários.
Utilizando CSS é possível alterar cores, remover sublinhados, criar efeitos visuais e destacar links importantes.
Por padrão, os navegadores exibem links com características próprias.
| Estado | Aparência Comum |
|---|---|
| Não visitado | Azul e sublinhado |
| Visitado | Roxo |
| Ativo | Vermelho |
É possível modificar a cor dos links utilizando a propriedade color.
a {
color: #1f4e79;
}A propriedade text-decoration controla o sublinhado dos links.
a {
text-decoration: none;
}Essa técnica é muito utilizada em menus de navegação.
O seletor :hover permite aplicar estilos quando o usuário passa o mouse sobre o link.
a:hover {
text-decoration: underline;
}| Seletor | Função |
|---|---|
| a:link | Link não visitado. |
| a:visited | Link visitado. |
| a:hover | Mouse sobre o link. |
| a:active | Durante o clique. |
a {
color: #1f4e79;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: purple;
}Esse conjunto de regras cria uma aparência mais profissional para os links.
Em muitos sites os links recebem estilos semelhantes aos botões.
a.botao {
background: #1f4e79;
color: white;
padding: 10px;
}| Erro | Problema |
|---|---|
| Links sem destaque | Usuário não identifica o clique. |
| Contraste baixo | Dificulta a leitura. |
| Efeitos exagerados | Poluição visual. |
| Propriedade | Função |
|---|---|
| color | Define a cor do link. |
| text-decoration | Controla o sublinhado. |
| :hover | Efeito ao passar o mouse. |
| :visited | Estilo para links visitados. |