Cargando...

Enlaces en CSS

Los enlaces son cómo la gente se mueve por tus páginas. En CSS estilizas el elemento a y sus estados — no visitado, visitado, hover y active — para que el enlace se vea clicable, cambie al interactuar y siga legible.

Estados del enlace de un vistazo

📊 Kit de estados de enlace

Estado Cuándo aplica
a / a:link Enlace por defecto / no visitado
a:visited Enlace que el visitante ya abrió
a:hover El puntero está sobre el enlace
a:active El enlace se está pulsando (mousedown)
text-decoration Subrayado on/off — control habitual de enlaces

Los navegadores suelen recordar un orden útil llamado LVHA: :link, :visited, :hover, :active. Escribir reglas en ese orden evita que estados posteriores se anulen por accidente.

Estiliza el enlace base

Empieza con el color y si quieres subrayado. Muchos diseños modernos quitan el subrayado por defecto y lo devuelven en hover.

Estilos base del enlace

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

Enlaces visitados

:visited puede cambiar un poco el color para que los visitantes recurrentes noten rutas conocidas. Mantén el cambio sutil — la privacidad limita qué se puede estilizar en visited.

Tono visited

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

Feedback de hover

:hover es tu señal cotidiana más clara. Un cambio de color, subrayado o ambos dice “esto es interactivo” sin gritar.

Subrayado en hover

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

active — el momento de pulsar

:active se activa mientras se pulsa el enlace. Un tono un poco más oscuro da una sensación breve de “clic”.

Pulsación active

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

Un hábito calmado de enlaces de nav

Agrupa los estados LVHA, mantén el hover obvio y no borres los contornos de foco solo para verse plano. Quien navega con teclado necesita una pista de foco visible.

Enlaces de nav tranquilos

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;
}

Pruébalo tú

  1. Pon color base de a y text-decoration: none.
  2. Añade a:visited con un color ligeramente distinto.
  3. En a:hover, subraya y oscurece el color.
  4. Oscurece un poco más en a:active.
  5. Estiliza nav a en orden LVHA y mantén un outline :focus-visible.

Errores comunes

  • Escribir :hover antes de :link / :visited para que algunos estados pierdan
  • Quitar el subrayado y cualquier otra pista de que es un enlace
  • Hover arcoíris en cada palabra del párrafo
  • outline: none en enlaces sin estilo de foco de reemplazo
  • Mezclar esta lección con text-shadow / ellipsis (sesión anterior)

Resumen

  • Estiliza enlaces con a y los estados :link, :visited, :hover, :active
  • El orden LVHA ayuda a que la cascada se comporte como esperas
  • Color + text-decoration son los controles cotidianos
  • El hover debe ser claro; el visited, sutil
  • Mantén un estilo de foco visible para teclado

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 30 de 35
Css Tutorial