Neste artigo você vai aprender como tirar a cor azul de links utilizando CSS, de uma forma bem simples e ainda alterando os outros estados como: link visitado e selecionado.
Fala programador(a), tudo bem? Bora aprender como mudar o azul da tag a!
O link, ou tag a, é um elemento muito interessante do HTML, pois possui alguns estados, diferente de outros elementos
Como o visited, que é quando o link já foi visitado alguma vez pelo usuário
A notícia boa, é que podemos mudar todos os estilos, seja o default dele como também destes estados
Tirar a cor azul de links utilizando CSS na prática
Vamos ao exemplo prático:
<!DOCTYPE html>
<html>
<head>
<title>Como tirar a cor azul de links ultilizando CSS</title>
<meta charset="utf-8">
</head>
<body>
<div>
<!-- já visitado -->
<a href="#">Este link precisa mudar de cor</a>
</div>
<div>
<!-- não visitado -->
<a href="http://www.teste.com.br">Este link precisa mudar de cor também</a>
</div>
<div>
<!-- hover -->
<a href="http://www.teste.com.br">Um outro link</a>
</div>
</body>
</html>Agora veja o CSS necessário para cada tipo de mudança de evento/comportamento:
/* link que ainda não foi acessado */
a {
color: #000;
}
/* link que foi visitado */
a:visited {
color: #555;
}
/* quando o ponteiro do mouse passa no link */
a:hover {
color: #999;
}
/* quando o link for selecionado */
a:active {
color: #333;
}Dessa maneira, conseguimos acessar todos os eventos relacionados a tag a, ou links, do HTML
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Veja o resultado do navegador:
E assim mudamos a cor do link em todos os seus comportamentos possíveis! 🙂
Uma outra possibilidade é retirar a borda inferior dos links, isto é muito feito nos projetos pois ela não é útil, na maioria dos casos
Para isso você deve utilizar a regra text-decoration e o valor none
a {
text-decoration: none;
}Desta maneira você tira a borda, e não com a regra border (que é o que muitos devs pensam)
Conclusão
Neste artigo vimos como tirar a cor azul de links utilizando CSS
Vimos que a tag a, ou link, possui alguns estados como visited, hover e active
Aprendemos a mudar todos eles por meio de CSS, que era o intuito do tópico, assim deixando o nosso site personalizado para o cliente
E não com as cores default que o HTML nos proporciona
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube