WEBVTT 00:00:00.831 --> 00:00:05.211 Estamos de regreso con nuestra página web que tiene enlaces en una lista de pinturas famosas. 00:00:05.211 --> 00:00:11.743 El CSS empieza con una regla que establece el tipo de letra "sans-serif" para todo lo que está en la etiqueta "" 00:00:11.743 --> 00:00:17.114 Luego una regla para selectores agrupados que cambia el tipo de letra en los encabezados "" y "". 00:00:17.114 --> 00:00:24.737 Y luego tenemos muchas reglas que probablemente no habías visto antes y que parecen un poco graciosas. 00:00:24.737 --> 00:00:29.967 Todas empiezan con una "a", luego dos puntos, y luego una palabra. 00:00:29.967 --> 00:00:35.504 ¿Qué significan los dos puntos? ¿Para qué son esas reglas? 00:00:35.504 --> 00:00:41.065 Bueno, todas esas cosas que empiezan con dos puntos se llaman pseudo-clases. 00:00:41.065 --> 00:00:48.002 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, 00:00:48.002 --> 00:00:51.826 o que simplemente no puede ser expresada usando otros selectores. 00:00:51.826 --> 00:00:57.430 En esta página, estoy usando pseudo-clases para estilizar los enlaces basándome en su estado. 00:00:57.430 --> 00:01:03.449 La pseudo-clase "link" selecciona los enlaces en la página, que el usuario todavía no ha visitado. 00:01:03.449 --> 00:01:06.582 Que la mayoría de los navegadores ponen en azul por defecto. 00:01:06.582 --> 00:01:10.405 La pseudo-clase "visited" seleccionará todos los enlaces que el usuario ya ha visitado. 00:01:10.405 --> 00:01:13.294 Que la mayoría de los navegadores ponen en morado por defecto. 00:01:13.294 --> 00:01:16.121 Si queremos realmente, podemos cambiar los colores. 00:01:16.121 --> 00:01:18.083 Pero deberíamos tener una buena razón para hacerlo. 00:01:18.083 --> 00:01:22.954 La gente está acostumbrada a asociar el azul y el morado con las cosas que han visto y que no han visto. 00:01:22.954 --> 00:01:25.549 Y a la gente le gusta saber qué páginas ya ha visitado. 00:01:25.549 --> 00:01:28.474 Así que no deberías cambiar eso sin una buena razón. 00:01:28.474 --> 00:01:31.092 Así que voy a borrar estas dos reglas. 00:01:31.092 --> 00:01:34.221 Porque, personalmente, no creo que sea una buena idea estar jugando con eso. 00:01:34.221 --> 00:01:38.972 La siguiente es una regla divertida: "a:hover". 00:01:38.972 --> 00:01:45.698 La pseudo-clase "hover" selecciona un elemento en tanto que el ratón esté sobre él. 00:01:45.698 --> 00:01:48.408 Así que las propiedades se aplicarán sólo en ese momento. 00:01:48.408 --> 00:01:53.353 Pruébenlo pausando esta guía paso a paso y pasen por encima de los enlaces para ver qué pasa. 00:01:53.353 --> 00:01:57.406 ¡Adelante!, esperaré. "Hover", "hover", "hover", "hover"... 00:01:57.406 --> 00:02:01.165 ¿Vieron que el fondo cambió de color? Es un efecto muy bueno. 00:02:01.165 --> 00:02:05.073 Y en realidad pueden usar la pseudo-clase "hover" en cualquier elemento, no solamente en enlaces. 00:02:05.073 --> 00:02:07.662 Sólo recuerden que no funcionará en todos los dispositivos. 00:02:07.662 --> 00:02:11.421 Como en un teléfono, no tienes manera de pasar por encima. Sólo puedes tocar o no tocar. 00:02:11.421 --> 00:02:15.298 Es genial tener un efecto "hover" como un extra, pero no confíes en él. 00:02:15.298 --> 00:02:20.503 ¿Y qué pasa con estos dos últimos? Son similares a "hover". 00:02:20.503 --> 00:02:23.067 Dependen de lo que el usuario esté haciendo. 00:02:23.067 --> 00:02:27.191 La pseudo-clase "active" selecciona elementos que están siendo activados. 00:02:27.191 --> 00:02:34.076 Como en un enlace, si el usuario está presionando en el enlace, justo antes de que realmente cambie de página. 00:02:34.076 --> 00:02:38.614 La pseudo-clase "focus" selecciona los elementos que actualmente tienen el enfoque, 00:02:38.614 --> 00:02:42.394 lo que generalmente pasa si usas la tecla TAB. 00:02:42.394 --> 00:02:47.744 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. 00:02:47.744 --> 00:02:51.497 ¿Viste que el fondo cambia de color cuando haces eso? 00:02:51.497 --> 00:02:56.415 Escogí la misma propiedad para "hover", "active" y "focus", porque todos son del mismo tipo. 00:02:56.415 --> 00:02:58.842 El usuario se está dirigiendo al enlace de alguna manera. 00:02:58.842 --> 00:03:03.655 Muchos diseñadores web usan las mismas propiedades para estos tres estados por esa misma razón. 00:03:03.655 --> 00:03:07.114 ¿Qué pasa si decido que quiero cambiar el color de fondo? 00:03:07.114 --> 00:03:13.552 Bueno, puedo ir a cada uno de ellos y cambiar cada uno. 00:03:13.552 --> 00:03:15.885 O puedo hacer lo que recién aprendimos. 00:03:15.885 --> 00:03:20.140 Puedo agrupar los selectores, poniéndolos en una sola regla, separados por comas. 00:03:20.140 --> 00:03:27.214 Así que pondremos una coma después de éste, "a:active," luego "a:focus". 00:03:27.214 --> 00:03:37.418 Ahora puedo borrar estos dos y puedo cambiar estos tres al mismo tiempo. Bien. 00:03:37.418 --> 00:03:41.531 Estas son las primeras pseudo-clases que hemos mostrado aquí, pero no son las únicas. 00:03:41.531 --> 00:03:45.106 Puedes buscar más pseudo-clases de CSS en Internet, 00:03:45.106 --> 00:03:48.496 o esperar a que enseñemos más aquí.