Una vez que tenga un poco de estilo va en sus páginas web HTML5 y CSS3, puede ser un poco preocupado por la forma enlaces son feos. Los estilos de enlace por defecto son útiles, pero pueden no encajar con su esquema de color.

Cómo el estilo de un enlace estándar

Adición de un estilo a un enlace es fácil. Después de todo, (La etiqueta que define enlaces) es sólo una etiqueta HTML, y se puede añadir un estilo a cualquier etiqueta. He aquí un ejemplo, en donde los enlaces son de color negro con un fondo amarillo:

a {color: negro-background-color: amarillo-}

Eso funciona muy bien, pero los enlaces son un poco más complejo que algunos otros elementos. Enlaces en realidad tienen tres establece lo siguiente:

• Normal: Este es el estado normal. Sin CSS añadió, la mayoría de los navegadores muestran los enlaces no visitados como texto subrayado azul.

• Visitó: Este estado se activa cuando el usuario visita un enlace y vuelve a la página actual. La mayoría de los navegadores utilizan un estilo subrayado morado para indicar que un enlace ha sido visitado.

  Video: #10 - Pseudo Clases Estructurales Básicas - Curso de CSS3 desde cero

• Flotar: El estado estacionario se activa cuando el ratón del usuario es persistente sobre el elemento. La mayoría de los navegadores no utilizan el estado estacionario en su configuración predeterminada.

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

Cómo el estilo de los estados de los enlaces

Se puede aplicar un estilo diferente para cada estado. En este ejemplo, los enlaces son de color negro sobre un fondo blanco. Un enlace visitado es negro sobre amarillo-y, si el ratón se cierne sobre un enlace, el enlace es de color blanco con un fondo negro.

Echar un vistazo al código y ver cómo se hace:

Las pseudo-clases y enlaces
Este enlace es normal
Este enlace ha sido visitado
El ratón se cierne sobre este enlace

No hay nada especial acerca de los vínculos en la parte HTML del código. Los enlaces cambian su estado de forma dinámica mientras que el usuario interactúa con la página. La hoja de estilo determina lo que sucede en los distintos estados. Así es como su enfoque para poner el código en conjunto:

1. Determinar el estilo enlace ordinaria primero haciendo un estilo para el etiqueta.

   Si no se define ningún otro pseudo-clases, todos los enlaces seguirán el estilo de vínculo común.

2. Realiza un estilo para los enlaces visitados.

   Video: Tutorial #15 CSS y HTML - Pseudo-clases

   Un enlace utilizará este estilo después de que el sitio es visitado durante la sesión actual del navegador. los a: visited selector de enlaces indica que se han visitado.

3. Hacer un estilo de enlaces se cernió.

   los a: hover estilo se aplica al enlace sólo cuando esté el ratón sobre el enlace. Tan pronto como el ratón sale el enlace, el estilo vuelve al estilo estándar o visitado, según el caso.

Las mejores prácticas de enlace

estilos de enlace tienen algunas características especiales. Tienes que ser un poco cuidadoso de cómo aplicar estilos a los enlaces. Tenga en cuenta los siguientes aspectos al aplicar estilos a los enlaces:

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

• Asegurarse de que todavía se ven como enlaces. Es importante que los usuarios sepan algo pretende ser un enlace. Si se quita el subrayado y el color que normalmente indica un enlace, los usuarios podrían ser confundidos. En general, puede cambiar los colores y sin problemas, pero los enlaces debe ser texto subrayado o algo que se ve claramente como un botón.

• Prueba de los enlaces visitados. Prueba de los enlaces visitados es un poco complicado, ya que, después de visitar un enlace, permanece visitado. La mayoría de los navegadores le permite borrar el historial del navegador, que también debe borrar los estados de enlace de no visitado.

• No cambie el tamaño de fuente en un estado estacionario. Pase el ratón cambia la página en tiempo real. Un estilo de desplazarse con un tamaño de fuente diferente que el enlace común puede causar problemas. La página se vuelve a formatear para aceptar el tipo de letra más grande, que puede mover una gran cantidad de texto en la pantalla rápidamente. Es más seguro para cambiar los colores o las fronteras en vuelo estacionario, pero no el tamaño de letra o fuente.