Día 46: CSS Links

---

Con CSS, los enlaces se pueden diseñar de muchas maneras diferentes.

---

Estilo de enlaces

Los enlaces se pueden diseñar con cualquier propiedad CSS (por ejemplo, color, font-family, background, etc.).

Ejemplo:

a {
  color: hotpink;
}

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

Los cuatro estados de enlace son:

• a:link - un enlace normal, no visitado

• a:visited - Un enlace que ha visitado el usuario.

• a:hover - un enlace cuando el usuario pasa el mouse sobre él

• a:active - un enlace en el momento en que se hace clic

Ejemplo:

Al establecer el estilo para varios estados de enlace, existen 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

---

Decoración del texto

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

Ejemplo:

---

Color de fondo

La propiedad background-color se puede utilizar para especificar un color de fondo para los enlaces:

Ejemplo:

---

Botones de enlace

Este ejemplo muestra un ejemplo más avanzado en el que combinamos varias propiedades de CSS para mostrar enlaces como cuadros/botones:

Ejemplo:

---

Más ejemplos

Ejemplo:

Este ejemplo demuestra cómo agregar otros estilos a los hipervínculos:

Ejemplo:

Otro ejemplo de cómo crear cuadros/botones de enlace:

Ejemplo:

Este ejemplo demuestra los diferentes tipos de cursores (puede ser útil para enlaces):

---

Resumen

Los enlaces en CSS se pueden diseñar de muchas maneras diferentes, incluyendo color, decoración del texto y botones de enlace. Los cuatro estados de enlace son: normal, visitado, cuando el usuario pasa el mouse sobre él y en el momento en que se hace clic. Además, existen algunas reglas de orden al establecer el estilo para varios estados de enlace.

---

Traducido con 💚 desde W3Schools.com