-
Estamos de regreso con nuestra página web que tiene enlaces en una lista de pinturas famosas.
-
El CSS empieza con una regla que establece el tipo de letra "sans-serif" para todo lo que está en la etiqueta ""
-
Luego una regla para selectores agrupados que cambia el tipo de letra en los encabezados "" y "".
-
Y luego tenemos muchas reglas que probablemente no habías visto antes y que parecen un poco graciosas.
-
Todas empiezan con una "a", luego dos puntos, y luego una palabra.
-
¿Qué significan los dos puntos?
¿Para qué son esas reglas?
-
Bueno, todas esas cosas que empiezan con dos puntos se llaman pseudo-clases.
-
Las pseudo-clases se usan para seleccionar elementos con base en información que no es realmente parte de la estructura de la página web,
-
o que simplemente no puede ser expresada usando otros selectores.
-
En esta página, estoy usando pseudo-clases para estilizar los enlaces basándome en su estado.
-
La pseudo-clase "link" selecciona los enlaces en la página, que el usuario todavía no ha visitado.
-
Que la mayoría de los navegadores ponen en azul por defecto.
-
La pseudo-clase "visited" seleccionará todos los enlaces que el usuario ya ha visitado.
-
Que la mayoría de los navegadores ponen en morado por defecto.
-
Si queremos realmente, podemos cambiar los colores.
-
Pero deberíamos tener una buena razón para hacerlo.
-
La gente está acostumbrada a asociar el azul y el morado con las cosas que han visto y que no han visto.
-
Y a la gente le gusta saber qué páginas ya ha visitado.
-
Así que no deberías cambiar eso sin una buena razón.
-
Así que voy a borrar estas dos reglas.
-
Porque, personalmente, no creo que sea una buena idea estar jugando con eso.
-
La siguiente es una regla divertida: "a:hover".
-
La pseudo-clase "hover" selecciona un elemento en tanto que el ratón esté sobre él.
-
Así que las propiedades se aplicarán sólo en ese momento.
-
Pruébenlo pausando esta guía paso a paso y pasen por encima de los enlaces para ver qué pasa.
-
¡Adelante!, esperaré. "Hover", "hover", "hover", "hover"...
-
¿Vieron que el fondo cambió de color?
Es un efecto muy bueno.
-
Y en realidad pueden usar la pseudo-clase "hover" en cualquier elemento, no solamente en enlaces.
-
Sólo recuerden que no funcionará en todos los dispositivos.
-
Como en un teléfono, no tienes manera de pasar por encima. Sólo puedes tocar o no tocar.
-
Es genial tener un efecto "hover" como un extra, pero no confíes en él.
-
¿Y qué pasa con estos dos últimos?
Son similares a "hover".
-
Dependen de lo que el usuario esté haciendo.
-
La pseudo-clase "active" selecciona elementos que están siendo activados.
-
Como en un enlace, si el usuario está presionando en el enlace, justo antes de que realmente cambie de página.
-
La pseudo-clase "focus" selecciona los elementos que actualmente tienen el enfoque,
-
lo que generalmente pasa si usas la tecla TAB.
-
Pausa esta guía paso a paso y trata de presionar en los enlaces y muévete a través de ellos con la tecla TAB, para ver qué pasa.
-
¿Viste que el fondo cambia de color cuando haces eso?
-
Escogí la misma propiedad para "hover", "active" y "focus", porque todos son del mismo tipo.
-
El usuario se está dirigiendo al enlace de alguna manera.
-
Muchos diseñadores web usan las mismas propiedades para estos tres estados por esa misma razón.
-
¿Qué pasa si decido que quiero cambiar el color de fondo?
-
Bueno, puedo ir a cada uno de ellos y cambiar cada uno.
-
O puedo hacer lo que recién aprendimos.
-
Puedo agrupar los selectores, poniéndolos en una sola regla, separados por comas.
-
Así que pondremos una coma después de éste, "a:active," luego "a:focus".
-
Ahora puedo borrar estos dos y puedo cambiar estos tres al mismo tiempo. Bien.
-
Estas son las primeras pseudo-clases que hemos mostrado aquí, pero no son las únicas.
-
Puedes buscar más pseudo-clases de CSS en Internet,
-
o esperar a que enseñemos más aquí.
