Carregando...

Links em CSS

Links são o caminho das pessoas pelas suas páginas. Em CSS você estiliza o elemento a e seus estados — não visitado, visitado, hover e active — para o link parecer clicável, mudar na interação e continuar legível.

Estados do link em um olhar

📊 Kit de estados de link

Estado Quando se aplica
a / a:link Link padrão / não visitado
a:visited Link que o visitante já abriu
a:hover O ponteiro está sobre o link
a:active O link está sendo pressionado (mousedown)
text-decoration Sublinhado on/off — controle comum de links

Navegadores costumam lembrar uma ordem útil chamada LVHA: :link, :visited, :hover, :active. Escrever regras nessa ordem evita que estados posteriores sejam sobrescritos por acidente.

Estilize o link base

Comece com cor e se quer sublinhado. Muitos designs modernos removem o sublinhado padrão e o devolvem no hover.

Estilos base do link

css
CSS Code 
a {
color: #0b5fff;
text-decoration: none;
}

Links visitados

:visited pode mudar um pouco a cor para visitantes recorrentes notarem caminhos familiares. Mantenha a mudança sutil — a privacidade limita o que se pode estilizar em visited.

Tom visited

css
CSS Code 
a:visited {
color: #5b4b8a;
}

Feedback de hover

:hover é o seu sinal cotidiano mais claro. Mudança de cor, sublinhado ou ambos diz “isto é interativo” sem gritar.

Sublinhar no hover

css
CSS Code 
a:hover {
color: #0842b8;
text-decoration: underline;
}

active — o momento do clique

:active vale enquanto o link é pressionado. Um tom um pouco mais escuro dá uma sensação breve de “clique”.

Pressão active

css
CSS Code 
a:active {
color: #062e80;
}

Um hábito calmo de links de nav

Agrupe os estados LVHA, mantenha o hover óbvio e não apague contornos de foco só para parecer plano. Quem navega com teclado precisa de um sinal de foco visível.

Links de nav calmos

css
CSS Code 
nav a:link,
nav a:visited {
color: #1a1a1a;
text-decoration: none;
}

nav a:hover,
nav a:active {
color: #0b5fff;
text-decoration: underline;
}

nav a:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

Experimente você

  1. Defina cor base de a e text-decoration: none.
  2. Adicione a:visited com cor um pouco diferente.
  3. Em a:hover, sublinhe e escureça a cor.
  4. Escureça um pouco mais em a:active.
  5. Estilize nav a em ordem LVHA e mantenha outline :focus-visible.

Erros comuns

  • Escrever :hover antes de :link / :visited de modo que alguns estados percam
  • Remover o sublinhado e qualquer outra pista de que é um link
  • Hover arco-íris em cada palavra do parágrafo
  • outline: none em links sem estilo de foco substituto
  • Misturar esta lição com text-shadow / ellipsis (sessão anterior)

Resumo

  • Estilize links com a e os estados :link, :visited, :hover, :active
  • A ordem LVHA ajuda a cascata a se comportar como esperado
  • Cor + text-decoration são os controles do dia a dia
  • Hover deve ser claro; visited permanece sutil
  • Mantenha estilo de foco visível para navegação por teclado

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 30 de 34
Css Tutorial