Cómo crear estilos de hipervínculo con pseudo-clases en las hojas de estilo en cascada (css)
Uno de los usos más comunes de los estilos de compuestos de hojas de estilo en cascada (CSS) es crear hipervínculos personalizados con pseudo-clases, que se pueden utilizar para modificar el color y los atributos de hipervínculos por defecto.
El estilo pseudo-clase compuesto hipervínculo se puede escribir como un selector de dos partes, donde la etiqueta de anclaje está separado por dos puntos, seguido del nombre del estado de enlace, como en un enlace, a: visited, a: hover, y a: active.
La aparición de un hipervínculo es determinada por la interactividad del visitante con él en un navegador:
enlaces normales son los enlaces no visitados.
los enlaces visitados son enlaces que el visitante ya ha hecho clic.
Video: 5. Pseudo Clases en CSS
enlaces activables cambiar su aspecto cuando un usuario pasa el cursor sobre ellos.
enlaces activos cambiar su apariencia sólo como un visitante hace clic en un enlace directo, antes de soltar el botón del ratón.
Video: #9 Pseudo clases css de Links y Acciones - Curso CSS3 desde 0
Como usted bien sabe, todos los hipervínculos de pantalla por defecto, ya sea en texto azul subrayado (enlace no visitado) o texto subrayado de color púrpura (enlaces visitados). Debido a que estos colores son probablemente inferiores a los colores en particular en el diseño de su sitio, usted podrá modificar los estilos de enlace predeterminada mediante la creación de estilos de hipervínculo.
Aún mejor, además de los estados de hipervínculos visitados y no visitados, con CSS, se puede añadir estilos por dos estados de hipervínculo adicionales, a saber, el estado estacionario, que se produce cuando un mouses visitantes sobre un enlace, y el estado activo, que aparece cuando un visitante hace clic en un enlace.
Para cambiar sólo el color de un hipervínculo para los cuatro estados de enlace, agregar las definiciones de estilo siguiente CSS, en sustitución de los valores hexadecimales en este ejemplo con los valores de los colores deseados para cada uno de los estilos de enlace:
a: link {color: # CC0000-} a: visited {color: # 339933-} a: hover {color: # 000000-} a: active {color: # 99CC33-}Video: HTML y CSS Esencial #27 - Pseudo clases
Para hacer más cosas interesantes, se puede añadir declaraciones de estilo adicionales para cualquiera de o todos los cuatro estados de los enlaces. Por ejemplo, es posible que desee quitar el subrayado, añadir un color de fondo, o aplicar un borde de puntos alrededor del hipervínculo, como se ha demostrado aquí y se muestra a continuación:
a: link {color: # CC0000-} a: visited {color: # 339933-text-decoration: none;} a: hover {color: # 000000-background-color: # 0CC-} a: active {color: # ffffff-text-decoration: none; frontera: 2px de puntos # CCC-background-color: # 000-}Al crear estos estilos de enlace, debe tener cuidado de que cada estilo se agrega a la CSS en el mismo orden que será experimentado en un sitio web por un visitante del sitio: enlace, visitó, vuelo estacionario, activa.
Video: Tutorial #14 CSS y HTML - Estilizar links + Intro en Pseudo-Clases
Si los estilos se añaden a la CSS fuera de orden, los estilos de los enlaces pueden no funcionar correctamente cuando se ve en un navegador. Por lo tanto, entrar en el hábito de crear el estado del enlace normal, en primer lugar, a continuación, añadir el estado visitado seguido por el estado estacionario, y finalmente el estado activo, como se muestra en el ejemplo anterior.