CSS HTML

Como tirar a cor azul de links utilizando CSS?

14 de abril de 2020

Como tirar a cor azul de links utilizando CSS?

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.

como mudar o azul do link capa

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:

como mudar o link azul ex1

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x