¿Qué es una pseudo-clase?
Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.
Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con la etiqueta
<a>. Por lo tanto, podemos usar a como selector en CSS:
a {
color: blue;
}
Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados.
a:link {
color: blue;
}
a:visited {
color: red;
}
Usa
a:link y a:visited para enlaces visitados y no visitados, respectivamente. A los enlaces activos se les aplica la pseudo-clase a:active, y a:hover cuando el cursor se coloca o pasa sobre el enlace.
Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y más explicaciones.
Pseudo-clase a:link
La pseudo clase
:link se usa para enlaces que dirigen a páginas que el usuario no ha visitado.
En el ejemplo de código que sigue, los enlaces no visitados tendrán un color azul claro.
a:link {
color: #6699CC;
}
Pseudo-clase a:visited
La pseudo clase
:visited se usa para enlaces que dirigen a páginas que el usuario ya ha visitado. Por ejemplo, el código siguiente hará que todos los enlaces visitados sean de color púrpura oscuro:
a:visited {
color: #660099;
}
Pseudo-clase a:active:
La pseudo clase
:active se usa para enlaces que están activos.
El código de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:
a:active {
background-color: #FFFF00;
}
Pseudo-clase a:hover
La pseudo clase
a:hover se usa cuando el puntero del ratón pasa por encima de un enlace.
Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será el siguiente:
a:hover {
color: orange;
font-style: italic;
}
Ejemplo 1: Efecto cuando el cursor está encima de un enlace
Es bastante popular crear diferentes efectos cuando el cursor está encima de un enlace. Por lo tanto, examinaremos unos cuantos ejemplos más relacionados con la pseudo-clase
:hover.Example 1a: Espaciado entre letras
Como recordarás de la lección 5, el espaciado entre los caracteres se puede ajustar usando la propiedad
letter-spacing. Esta propiedad se puede aplicar a los enlaces para crear un efecto especial:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Ejemplo 1b: MAYÚSCULAS y minúsculas
En la lección 5 examinamos la propiedad
text-transform, que sirve para intercambiar entre letras en mayúscula y minúscula. Esto se puede usar también para crear un determinado efecto en los enlaces:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Estos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinar diferentes propiedades. Ya puedes ir creando tus propios efectos... ¡inténtalo!
Ejemplo 2: Quitar el subrayado de los enlaces
Una pregunta muy recurrente es: ¿cómo quito el subrayado de los enlaces?
Deberías considerar cuidadosamente la necesidad de quitar el subrayado, pues esto podría disminuir la usabilidad de tu sitio web de forma significativa. La gente está acostumbrada al subrayado azul de los enlaces en las páginas web y saben que pueden hacer clic en ellos. ¡Incluso mi abuelita lo sabe! Si cambias el subrayado y el color de los enalces, existe una buena posibilidad de que los usuarios se confundan y, por lo tanto, no saquen todo el provecho al contenido de tu sitio web.
Dicho esto, es muy sencillo quitar el subrayado de los enlaces. Como recordarás de la lección 5, la propiedad
text-decoration se puede usar para determinar si el texto aparece subrayado o no. Para quitar el subrayado, establece el valor de text-decoration a none.
a {
text-decoration:none;
}
De forma alternativa, puedes establecer la propiedad
text-decoration junto con otras propiedades para las cuatro pseudo clases.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
Resumen
En esta lección has aprendido nociones relativas a las pseudo-clases, a la vez que has usado algunas de las propiedades de lecciones anteriores. Esto debería darte una idea de algunas de las posibilidades que ofrece CSS.
En la lección siguiente te enseñaremos cómo definir propiedades para elementos específicos y para grupos de elementos.
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información
No hay comentarios:
Publicar un comentario