Cómo aplicar estilo a los enlaces en CSS

Programación

Enlaces de estilo

Los enlaces pueden ser de estilo con cualquier propiedad CSS, tales como color, font-family, font-size, y padding. He aquí un ejemplo sencillo:

a { color: hotpink; }

Además, los enlaces pueden tener un estilo diferente según el estado en el que se encuentren.

Los enlaces también tienen 4 estados, y muchos programadores diseñan cada estado de manera diferente. Los cuatro estados son:

  • a:link: un enlace no visitado y sin hacer clic
  • a:visited: un enlace visitado y en el que se hizo clic
  • a:hover: un enlace cuando el mouse del usuario está sobre él
  • a:active: un enlace cuando se hace clic en él

La propiedad es responsable de crear URL y se puede modificar utilizando varias propiedades de estilo CSS, aunque tiene algunas de forma predeterminada:

  1. Subrayar
  2. Color azul

Puede cambiarlos agregando cambiar las propiedades colory text-decoration.

 color: black; text-decoration: none;

También puede diseñar el enlace en función de la interacción utilizando estas propiedades, también conocidas como estados de enlace:

  • a: link - un enlace normal, no visitado
  • a: visitado: un enlace que el usuario ha visitado
  • a: hover: un enlace cuando el usuario pasa el mouse sobre él
  • a: activo: un enlace en el momento en que se hace clic en él

Aquí hay un ejemplo de CSS usando los 4 estados:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

Tenga en cuenta que existen algunas reglas de ordenación para cuando se establece el estilo de los estados de los vínculos.

  • a:hoverDEBE venir después a:linkya:visited

a:active DEBE venir después a:hover

a: enlace - un enlace normal, no visitado a: visitado - un enlace que el usuario ha visitado a: desplazarse - un enlace cuando el usuario pasa el mouse sobre él a: activo - un enlace en el momento en que se hace clic en él

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }

Más sobre el estilo en CSS:

  • Cómo diseñar una etiqueta HTML directamente en CSS
  • Cómo diseñar listas con CSS
  • Cómo diseñar botones con CSS