Enlaces con CSS

Cuando creamos una página web queremos personalizarla hasta el máximo. Parte de esa personalización pasa por los enlaces. Vamos a ver cómo podemos personalizar los enlaces con CSS.

Enlaces

Los enlaces nos permiten llevar al lector del sitio donde se encuentra a otro sitio donde pensamos que hay información valiosa para él o ella.

Podemos personalizar los enlaces asignándole valores al color del texto, color de fondo, padding del enlace, entre otras cosas. Pero también podemos cambiar  cada uno de esos valores cuando el cursor está arriba del enlace, el enlace ya fue visitado, el enlace está activo o el enlace ya fue visitado.

Para controlar cada uno de esos valores CSS usa pseudo-clases.

¿Qué te permiten pseudo-clases?

Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.

En este caso vamos a ver 4 pseudo-clases:

  • a:link – un enlace normal no visitado
  • a:visited – un enlace que el usuario ha visitado
  • a:hover – un enlace cuando el usuario se desplaza sobre él
  • a:active – un enlace en el momento en que se hace clic

Veamos algunos ejemplos:

El texto de este link es rojo y cuando el cursor pasa por encima cambia a negro.

Ahora vamos a jugar con más valores para ver como se pueden ver nuestros enlaces.

Cambiamos a mayúsculas, el color del texto y el color de fondo

El siguiente ejemplo también es un link

Este es un link

Como vemos podemos personalizar de muchas maneras nuestros enlaces. Y el manejo de las pseudo-clases son muy útiles a la hora de definir cómo queremos que se vea nuestro diseño.

¿Te ha sido útil la información? Cuéntamelo aquí abajo.

También puedes revisar mis otros artículos colores, fondos, fuentes, textos, bordes, márgenes, padding.

Deja un comentario