[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.83,0:00:05.21,Default,,0000,0000,0000,,Estamos de regreso con nuestra página web que tiene enlaces en una lista de pinturas famosas.
Dialogue: 0,0:00:05.21,0:00:11.74,Default,,0000,0000,0000,,El CSS empieza con una regla que establece el tipo de letra "sans-serif" para todo lo que está en la etiqueta ""
Dialogue: 0,0:00:11.74,0:00:17.11,Default,,0000,0000,0000,,Luego una regla para selectores agrupados que cambia el tipo de letra en los encabezados "" y "".
Dialogue: 0,0:00:17.11,0:00:24.74,Default,,0000,0000,0000,,Y luego tenemos muchas reglas que probablemente no habías visto antes y que parecen un poco graciosas.
Dialogue: 0,0:00:24.74,0:00:29.97,Default,,0000,0000,0000,,Todas empiezan con una "a", luego dos puntos, y luego una palabra.
Dialogue: 0,0:00:29.97,0:00:35.50,Default,,0000,0000,0000,,¿Qué significan los dos puntos?\N¿Para qué son esas reglas?
Dialogue: 0,0:00:35.50,0:00:41.06,Default,,0000,0000,0000,,Bueno, todas esas cosas que empiezan con dos puntos se llaman pseudo-clases.
Dialogue: 0,0:00:41.06,0:00:48.00,Default,,0000,0000,0000,,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,
Dialogue: 0,0:00:48.00,0:00:51.83,Default,,0000,0000,0000,,o que simplemente no puede ser expresada usando otros selectores.
Dialogue: 0,0:00:51.83,0:00:57.43,Default,,0000,0000,0000,,En esta página, estoy usando pseudo-clases para estilizar los enlaces basándome en su estado.
Dialogue: 0,0:00:57.43,0:01:03.45,Default,,0000,0000,0000,,La pseudo-clase "link" selecciona los enlaces en la página, que el usuario todavía no ha visitado.
Dialogue: 0,0:01:03.45,0:01:06.58,Default,,0000,0000,0000,,Que la mayoría de los navegadores ponen en azul por defecto.
Dialogue: 0,0:01:06.58,0:01:10.40,Default,,0000,0000,0000,,La pseudo-clase "visited" seleccionará todos los enlaces que el usuario ya ha visitado.
Dialogue: 0,0:01:10.40,0:01:13.29,Default,,0000,0000,0000,,Que la mayoría de los navegadores ponen en morado por defecto.
Dialogue: 0,0:01:13.29,0:01:16.12,Default,,0000,0000,0000,,Si queremos realmente, podemos cambiar los colores.
Dialogue: 0,0:01:16.12,0:01:18.08,Default,,0000,0000,0000,,Pero deberíamos tener una buena razón para hacerlo.
Dialogue: 0,0:01:18.08,0:01:22.95,Default,,0000,0000,0000,,La gente está acostumbrada a asociar el azul y el morado con las cosas que han visto y que no han visto.
Dialogue: 0,0:01:22.95,0:01:25.55,Default,,0000,0000,0000,,Y a la gente le gusta saber qué páginas ya ha visitado.
Dialogue: 0,0:01:25.55,0:01:28.47,Default,,0000,0000,0000,,Así que no deberías cambiar eso sin una buena razón.
Dialogue: 0,0:01:28.47,0:01:31.09,Default,,0000,0000,0000,,Así que voy a borrar estas dos reglas.
Dialogue: 0,0:01:31.09,0:01:34.22,Default,,0000,0000,0000,,Porque, personalmente, no creo que sea una buena idea estar jugando con eso.
Dialogue: 0,0:01:34.22,0:01:38.97,Default,,0000,0000,0000,,La siguiente es una regla divertida: "a:hover".
Dialogue: 0,0:01:38.97,0:01:45.70,Default,,0000,0000,0000,,La pseudo-clase "hover" selecciona un elemento en tanto que el ratón esté sobre él.
Dialogue: 0,0:01:45.70,0:01:48.41,Default,,0000,0000,0000,,Así que las propiedades se aplicarán sólo en ese momento.
Dialogue: 0,0:01:48.41,0:01:53.35,Default,,0000,0000,0000,,Pruébenlo pausando esta guía paso a paso y pasen por encima de los enlaces para ver qué pasa.
Dialogue: 0,0:01:53.35,0:01:57.41,Default,,0000,0000,0000,,¡Adelante!, esperaré. "Hover", "hover", "hover", "hover"...
Dialogue: 0,0:01:57.41,0:02:01.16,Default,,0000,0000,0000,,¿Vieron que el fondo cambió de color?\NEs un efecto muy bueno.\N
Dialogue: 0,0:02:01.16,0:02:05.07,Default,,0000,0000,0000,,Y en realidad pueden usar la pseudo-clase "hover" en cualquier elemento, no solamente en enlaces.
Dialogue: 0,0:02:05.07,0:02:07.66,Default,,0000,0000,0000,,Sólo recuerden que no funcionará en todos los dispositivos.
Dialogue: 0,0:02:07.66,0:02:11.42,Default,,0000,0000,0000,,Como en un teléfono, no tienes manera de pasar por encima. Sólo puedes tocar o no tocar.
Dialogue: 0,0:02:11.42,0:02:15.30,Default,,0000,0000,0000,,Es genial tener un efecto "hover" como un extra, pero no confíes en él.
Dialogue: 0,0:02:15.30,0:02:20.50,Default,,0000,0000,0000,,¿Y qué pasa con estos dos últimos?\NSon similares a "hover".
Dialogue: 0,0:02:20.50,0:02:23.07,Default,,0000,0000,0000,,Dependen de lo que el usuario esté haciendo.
Dialogue: 0,0:02:23.07,0:02:27.19,Default,,0000,0000,0000,,La pseudo-clase "active" selecciona elementos que están siendo activados.
Dialogue: 0,0:02:27.19,0:02:34.08,Default,,0000,0000,0000,,Como en un enlace, si el usuario está presionando en el enlace, justo antes de que realmente cambie de página.
Dialogue: 0,0:02:34.08,0:02:38.61,Default,,0000,0000,0000,,La pseudo-clase "focus" selecciona los elementos que actualmente tienen el enfoque,
Dialogue: 0,0:02:38.61,0:02:42.39,Default,,0000,0000,0000,,lo que generalmente pasa si usas la tecla TAB.
Dialogue: 0,0:02:42.39,0:02:47.74,Default,,0000,0000,0000,,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.
Dialogue: 0,0:02:47.74,0:02:51.50,Default,,0000,0000,0000,,¿Viste que el fondo cambia de color cuando haces eso?
Dialogue: 0,0:02:51.50,0:02:56.42,Default,,0000,0000,0000,,Escogí la misma propiedad para "hover", "active" y "focus", porque todos son del mismo tipo.
Dialogue: 0,0:02:56.42,0:02:58.84,Default,,0000,0000,0000,,El usuario se está dirigiendo al enlace de alguna manera.
Dialogue: 0,0:02:58.84,0:03:03.66,Default,,0000,0000,0000,,Muchos diseñadores web usan las mismas propiedades para estos tres estados por esa misma razón.
Dialogue: 0,0:03:03.66,0:03:07.11,Default,,0000,0000,0000,,¿Qué pasa si decido que quiero cambiar el color de fondo?
Dialogue: 0,0:03:07.11,0:03:13.55,Default,,0000,0000,0000,,Bueno, puedo ir a cada uno de ellos y cambiar cada uno.
Dialogue: 0,0:03:13.55,0:03:15.88,Default,,0000,0000,0000,,O puedo hacer lo que recién aprendimos.
Dialogue: 0,0:03:15.88,0:03:20.14,Default,,0000,0000,0000,,Puedo agrupar los selectores, poniéndolos en una sola regla, separados por comas.
Dialogue: 0,0:03:20.14,0:03:27.21,Default,,0000,0000,0000,,Así que pondremos una coma después de éste, "a:active," luego "a:focus".
Dialogue: 0,0:03:27.21,0:03:37.42,Default,,0000,0000,0000,,Ahora puedo borrar estos dos y puedo cambiar estos tres al mismo tiempo. Bien.
Dialogue: 0,0:03:37.42,0:03:41.53,Default,,0000,0000,0000,,Estas son las primeras pseudo-clases que hemos mostrado aquí, pero no son las únicas.
Dialogue: 0,0:03:41.53,0:03:45.11,Default,,0000,0000,0000,,Puedes buscar más pseudo-clases de CSS en Internet,
Dialogue: 0,0:03:45.11,0:03:48.50,Default,,0000,0000,0000,,o esperar a que enseñemos más aquí.