Video: Curso Básico de CSS - 9. Enlaces 2025
Uno de los usos más comunes de los estilos compuestos de Hojas de estilos en cascada (CSS)) es crear hipervínculos personalizados con pseudo-clases, que se pueden usar para modificar el color predeterminado y los atributos de los hipervínculos.
El estilo de pseudoclase del compuesto de hipervínculo se puede escribir como un selector de dos partes donde la etiqueta de anclaje está separada por dos puntos seguidos por el nombre del estado del vínculo, como en un: enlace, a: visitado, a: hover, y a: activo.
La aparición de un hipervínculo está determinada por la interactividad de un visitante con él en un navegador:
-
Los enlaces normales son enlaces no visitados.
-
Los enlaces visitados son enlaces en los que el visitante ya ha hecho clic.
-
Los enlaces de desplazamiento cambian su apariencia cuando un visitante coloca el cursor sobre ellos.
-
Los enlaces activos cambian su apariencia solo cuando un visitante hace clic directamente en un enlace, antes de soltar el botón del mouse.
Como bien sabrá, todos los hipervínculos se muestran de forma predeterminada en texto subrayado azul (enlace no visitado) o en texto subrayado púrpura (enlaces visitados). Debido a que es poco probable que estos colores coincidan con los colores particulares en el diseño de su sitio, puede anular los estilos de enlace predeterminados creando estilos de hipervínculo personalizados.
Incluso mejor, además de los estados de hipervínculo no visitados y visitados, con CSS, puede agregar estilos para dos estados de hipervínculo adicionales, a saber, el estado de desplazamiento, que se produce cuando un visitante pasa sobre un enlace, y el estado activo, que aparece cuando un visitante hace clic en un enlace.
Para cambiar solo el color de un hipervínculo para los cuatro estados de enlace, agregue las siguientes definiciones de estilo a su CSS, reemplazando los valores hexadecimales en este ejemplo con los valores de color deseados para cada uno de los estilos de enlace:
a: enlace {color: # CC0000;} a: visitado {color: # 339933;} a: hover {color: # 000000;} a: active {color: # 99CC33;}
Para hacer aún más cosas interesantes, puede agregar declaraciones de estilo adicionales para cualquiera de los cuatro estados de enlace. Por ejemplo, es posible que desee eliminar el subrayado, agregar un color de fondo o aplicar un borde punteado alrededor del hipervínculo, como se demuestra aquí y se muestra a continuación:
a: enlace {color: # CC0000;} a: visitado {color: # 339933; text-decoration: none;} a: hover {color: # 000000; background-color: # 0CC;} a: active {color: #ffffff; texto-decoración: ninguno; borde: 2px punteado #CCC; background-color: # 000;}
Al crear estos estilos de enlace, debe tener cuidado de que cada estilo se agregue al CSS en el mismo orden en que lo experimentará un sitio web por un visitante del sitio: link, visited, hover, activo
Si los estilos se agregan a la CSS fuera de servicio, es posible que los estilos de enlace no funcionen correctamente cuando se visualizan en un navegador. Por lo tanto, hágase el hábito de crear primero el estado de enlace normal, luego agregue el estado visitado seguido del estado de desplazamiento, y finalmente el estado activo, como se muestra en el ejemplo anterior.
