Cómo usar pseudoclases para crear vínculos de estilo para HTML5 y CSS3

Una vez que tenga algo de estilo en sus páginas web HTML5 y CSS3, puede estar un poco preocupado acerca de qué tan feos son los enlaces. Los estilos de enlace predeterminados son útiles, pero pueden no coincidir con su esquema de color.

Cómo diseñar un vínculo estándar

Agregar un estilo a un vínculo es fácil. Después de todo, (la etiqueta que define los enlaces) es solo una etiqueta HTML, y puede agregar un estilo a cualquier etiqueta. Aquí hay un ejemplo, donde los enlaces son negros con fondo amarillo:

a {color: negro; background-color: yellow;}

Eso funciona bien, pero los enlaces son un poco más complejos que algunos otros elementos. Los enlaces en realidad tienen tres estados:

• Normal: Este es el estado estándar. Sin CSS agregado, la mayoría de los navegadores muestran enlaces no visitados como texto subrayado en azul.

• Visitado: Este estado se habilita cuando el usuario visita un enlace y regresa a la página actual. La mayoría de los navegadores usan un estilo subrayado púrpura para indicar que se ha visitado un enlace.

• Desplazarse: El estado de desplazamiento se activa cuando el mouse del usuario permanece sobre el elemento. La mayoría de los navegadores no utilizan el estado de desplazamiento en su configuración predeterminada.

Si aplica un estilo a las etiquetas en una página, el estilo se aplica a todos los estados de todos los anclajes.

Cómo diseñar los estados del enlace

Puede aplicar un estilo diferente a cada estado. En este ejemplo, los enlaces son negros sobre un fondo blanco. Un enlace visitado es negro sobre amarillo; y, si el mouse está sobre un enlace, el enlace es blanco con un fondo negro.

Eche un vistazo al código y vea cómo se hace:

linkStates. html a {color: negro; color de fondo: blanco;} a: visitado {color: negro; background-color: # FFFF33;} a: hover {color: blanco; background-color: black;}

Pseudoclases y enlaces
Este enlace es normal
Este enlace ha sido visitado
El mouse está sobre este enlace

No hay nada especial acerca de los enlaces en la parte HTML del código. Los enlaces cambian su estado dinámicamente mientras el usuario interactúa con la página. La hoja de estilos determina qué sucede en los distintos estados. A continuación, le indicamos cómo enfocar el código:

1. Primero determine el estilo de enlace ordinario creando un estilo para la etiqueta.

   Si no define ninguna otra pseudo-clase, todos los enlaces seguirán el estilo de enlace ordinario.

2. Crea un estilo para los enlaces visitados.

   Un enlace usará este estilo después de que ese sitio sea visitado durante la sesión actual del navegador. El selector a: visited indica enlaces que han sido visitados.

3. Crea un estilo para los enlaces activos.

   El estilo a: hover se aplica al enlace solo cuando el mouse está sobre el enlace. Tan pronto como el mouse abandone el enlace, el estilo volverá al estilo estándar o visitado, según corresponda.

Mejores prácticas de enlace

Los estilos de enlace tienen algunas características especiales. Debes ser un poco cuidadoso con la forma de aplicar estilos a los enlaces. Tenga en cuenta los siguientes problemas al aplicar estilos a los enlaces:

• El orden es importante. Asegúrese de definir el ancla ordinaria primero. Las pseudo-clases se basan en el estilo de ancla estándar.

• Asegúrate de que todavía se vean como enlaces. Es importante que los usuarios sepan que algo tiene la intención de ser un enlace. Si quita el subrayado y el color que normalmente indica un enlace, los usuarios pueden confundirse. En general, puede cambiar los colores sin problemas, pero los enlaces deben ser texto subrayado o algo que se ve claramente como un botón.

• Prueba de enlaces visitados. Probar enlaces visitados es un poco complicado porque, después de visitar un enlace, permanece visitado. La mayoría de los navegadores le permiten eliminar el historial del navegador, que también debe borrar los estados del enlace para que no se lo visite.

• No cambie el tamaño de fuente en un estado de desplazamiento. El control deslizante cambia la página en tiempo real. Un estilo de desplazamiento con un tamaño de fuente diferente al del enlace común puede causar problemas. La página se reformatea para aceptar la fuente más grande, que puede mover una gran cantidad de texto en la pantalla rápidamente. Lo más seguro es cambiar los colores o las fronteras con el vuelo estacionario, pero no con la familia de fuentes o el tamaño de la fuente.