CSS Enlaces

Diferentes enlaces pueden tener diferentes estilos.

Estilos de enlace

El estilo de un enlace se puede definir con cualquier propiedad CSS (como color, fuente, fondo, etc.).

Los enlaces particulares pueden tener diferentes estilos, dependiendo de en qué estado se encuentren.

Los cuatro estados del enlace son:

  • a:link - normal, enlace no visitado
  • a:visited - enlace que el usuario ha visitado
  • a:hover - cuando el usuario coloca el ratón sobre el enlace
  • a:active - en el momento en que se hace clic en el enlace

Ejemplos

a:link {color:#000000;} /*Enlace no visitado*/ a:visited {color:#0080FF;} /*Enlace visitado*/ a:hover {color:#FF00FF;} /*Ratón sobre el enlace*/ a:active {color:#0000FF;} /*Al hacer clic con el ratón*/

Pruébalo »

Cuando se establecen estilos para varios estados de enlace, también hay algunas reglas de orden:

  • a:hover debe ir después de a:link y a:visited
  • a:active debe ir después de a:hover

Estilos comunes de enlaces

Según el ejemplo anterior de cambio de color de los enlaces, observa en qué estado se encuentra.

A continuación, veamos algunas otras formas comunes de aplicar estilos a los enlaces:

Decoración de texto

La propiedad text-decoration se utiliza principalmente para eliminar el subrayado de los enlaces:

Ejemplo

a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}

Pruébalo »

Color de fondo

La propiedad background-color especifica el color de fondo del enlace:

Ejemplo

a:link {background-color:#8CC6FF;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

Pruébalo »

Examples

Más ejemplos

Agregar diferentes estilos a los hipervínculos
Este ejemplo demuestra cómo agregar otros estilos a los hipervínculos.

Avanzado: crear un cuadro de enlace
Este ejemplo muestra un caso más avanzado, donde combinamos varias propiedades CSS para que se muestre como un cuadro.

Otras extensiones