Mudar a cor de links com css

Gunnar CorreaGunnar Correa29/12/2019 às 10:49:05 - 1.280 acessos

Aprenda a mudar as cores padrão e formatação dos links links do seu site.


Por padrão, todos os navegadores trazem suas formatações quando não escrevemos as nossas modificações, e na maioria esmagadora das vezes, essas formações são horríveis. Ai que entra o CSS e nossas habilidades ninjas de criar algo bonito visualmente.

Antes de iniciarmos, só quero dizer para você ficar atento ao padrão visual do seu site, ou seja, manter a estrutura de estilização e não ficar modificando as cores e efeitos em várias páginas, isso vai dificultar a navegação e entendimento dos seus usuários.

Na imagem abaixo vemos a estrutura padrão de exibição para os links, elas estão na cor azul e sublinhado. Quando clicamos, a cor do link muda para vermlho.

Cor padrão dos links HTML na cor Azul

A exibição acima está utilizando a seguinte estrutura HTML.

Código 01:

<meta charset="utf-8">
<title>Links CSS</title>
 
 
<a href="#">Home</a>
<a href="#">Produtos</a>
<a href="#">Quem Somos</a>
<a href="#">Contato</a>

Vamos entender agora a estrutura básica do escopo do CSS, em seguida, vamos saber exatamente o que manipularemos.

Estrutura no escopo CSS, com seletores, bloco de instrução,  propriedades e valores,

Toda estrutura CSS possui um seletor, ele pode ser um elemento HTML, classe ou um ID. Dentro do seletor fica nosso bloco de instrução, é ali que inserimos todas as nossas modificações para aquele elemento, podendo ser uma lista sem limites. Toda propriedade CSS pode conter um ou vários valores, então sempre consulte a documentação.

Confira abaixo o código comentado com as explicações.

Código 02:

<meta charset="utf-8">
<title>Links CSS</title>
<style>
  /* Links não visitados */
  a:link {
    transition: all 0.3s ease; /*Aplicamos um efeito de transição*/
    text-decoration: none; /*Removemos o sublinhado*/
    font-size: 1.3em; /*Alteramos o tamanho da fonte*/
    font-family: verdana; /*Mudamos a fonte padrão para verdana*/
    padding:10px; /*Adicionamos um espaçamento de 10px em TOP, BOTTOM, RIGHT e LEFT*/
    color: #00a2ff; /*Mudamos a cor para Azul*/
  }
 
  /* Quando já clicamos no link anteriormente */
  a:visited {
    color: #fa8900; /*Mudamos a cor para Laranja*/
  }
 
  /* Quando passamos o mouse sobre o link */
  a:hover {
    color: #d000ff; /*Mudamos a cor para Rosa*/
  }
 
  /* Quando clicamos no link */
  a:active {
    color: #27cc4d; /*Mudamos a cor para Verde*/
  }
</style>
 
 
<a href="#home">Home</a>
<a href="#produtos">Produtos</a>
<a href="#quemsomos">Quem Somos</a>
<a href="#contato">Contato</a>

Resultado final da nossa estilização.

Alterações do padrão de visual de links CSS.

Por hora é isso, espero que tenha gostado! :
D


Referências


links html a links html mudar cor de links links css css seletores css active css hover css visited aprenda css aprenda html css iniciantes css ninja

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Comentários

1 / 8