CSS, Curso Intensivo – Lección 06, Vínculos

Estados de un vínculo

Los hipervínculos son los elementos interactivos que permiten compartir información y encadenar algunas acciones. Los hipervínculos se comportan como un ‘botón’ donde usualmente es identificable su estado; ya sea prendido o apagado. Los 2 estados de un hipervínculo desde que se creó la internet son los estados ‘unvisited’ (sin visitar) y ‘visited’ (visitado), que identificaba los hipervínculos de manera que las personas pudieran conocer si ya habían visto la información referente al link visitado.

Pseudo-classes para los vínculos

Para poder estilizar las características de los diferentes estados, CSS adiciona un selector llamado ‘pseudo-selector’, que define pseudo-classes para manejar los diferentes estados de un elemento.

Para estilizar los dos estados básicos de los hipervínculos se usan las pseudo-selectores ‘:link’ – para el estado ‘unvisited’ o sin visitar, y ‘:visited’ para el estado ‘visited’ o visitado. El pseudo-selector se identifica por los ‘:’.

a:link{
    color: green;
}
		
a:visited{
    color: blue;
}

Otros estados han sido adicionados a lo largo de la historia de la web, de manera que los usuarios puedan identificarlos de manera clara, y la experiencia con los sitios web sea más lógica. El estado ‘hover’ identifica el estado cuando el usuario pasa el mouse sobre el hipervínculo. El estado ‘active’ identifica el estado cuando el usuario presiona (botón del mouse presionado) sobre el hipervínculo. Cada estado se identifica en CSS por las pseudo-classes ‘:hover’ y ‘:active’ respectivamente.

a:hover	{
    background-color: white;
    color: black;
}
		
a:active {
    background-color: black;
    color: white;
}

Orden de los estados

Si van a usar los 4 estados en un proyecto, el orden en que se coloquen los CSS para cada estado es importante, ya que sin el, algunos de los estado pueden dejar de funcionar.

a:link{
    color: green;
}
		
a:visited{
    color: blue;
}

a:hover	{
    background-color: white;
    color: black;
}
		
a:active {
    background-color: black;
    color: white;
}