[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.53,0:00:04.19,Default,,0000,0000,0000,,Hemos logrado hacer muchas cosas, con los selectores que hemos visto en CSS:
Dialogue: 0,0:00:04.19,0:00:08.01,Default,,0000,0000,0000,,seleccionando elementos por nombre de etiqueta, por Id, por nombre de clase.
Dialogue: 0,0:00:08.29,0:00:11.03,Default,,0000,0000,0000,,Vamos a revisarlos por un momento en esta página web.
Dialogue: 0,0:00:11.26,0:00:13.66,Default,,0000,0000,0000,,Esta página web es sobre donas.
Dialogue: 0,0:00:13.79,0:00:15.96,Default,,0000,0000,0000,,Y tiene un encabezado, párrafos,
Dialogue: 0,0:00:15.96,0:00:19.23,Default,,0000,0000,0000,,y algunos de los párrafos son cortos, de una sóla línea.
Dialogue: 0,0:00:19.24,0:00:23.14,Default,,0000,0000,0000,,El CSS empieza con una regla sobre seleccionar todas las etiquetas "" de la página web,
Dialogue: 0,0:00:23.14,0:00:25.61,Default,,0000,0000,0000,,y asignarles un tipo de letra "sans-serif".
Dialogue: 0,0:00:26.07,0:00:30.06,Default,,0000,0000,0000,,La voy a cambiar a "monospace" para que puedan ver todo lo que está seleccionado.
Dialogue: 0,0:00:30.78,0:00:31.81,Default,,0000,0000,0000,,¿Lo vieron?
Dialogue: 0,0:00:34.10,0:00:37.84,Default,,0000,0000,0000,,La siguiente regla selecciona el elemento que tiene un "Id" igual a "donut-header".
Dialogue: 0,0:00:38.03,0:00:41.91,Default,,0000,0000,0000,,Y sabemos que es un "Id" porque la regla inicia con el símbolo numeral "#".
Dialogue: 0,0:00:42.03,0:00:43.76,Default,,0000,0000,0000,,Como el "Id" es muy descriptivo,
Dialogue: 0,0:00:43.76,0:00:46.69,Default,,0000,0000,0000,,me suena a que se ha seleccionado el encabezado grande de arriba,
Dialogue: 0,0:00:46.69,0:00:47.75,Default,,0000,0000,0000,,y se ha cambiado la fuente.
Dialogue: 0,0:00:47.97,0:00:51.42,Default,,0000,0000,0000,,Pero voy a desplazarme hacia abajo para confirmar que "" tiene ese "Id".
Dialogue: 0,0:00:51.45,0:00:53.18,Default,,0000,0000,0000,,Sí, aquí está.
Dialogue: 0,0:00:53.39,0:00:56.79,Default,,0000,0000,0000,,La última regla selecciona todos los elementos que tienen "fact" como nombre de clase.
Dialogue: 0,0:00:56.90,0:01:00.38,Default,,0000,0000,0000,,Y sabemos que estamos buscando una clase porque esta regla empieza con un punto.
Dialogue: 0,0:01:00.49,0:01:02.96,Default,,0000,0000,0000,,Para descubrir cuáles elementos tienen ese nombre de clase,
Dialogue: 0,0:01:02.96,0:01:05.23,Default,,0000,0000,0000,,puedo ver lo que la regla está haciendo,
Dialogue: 0,0:01:05.23,0:01:07.83,Default,,0000,0000,0000,,añadiendo un borde en la parte de arriba y de abajo y algo de relleno "padding",
Dialogue: 0,0:01:07.83,0:01:10.46,Default,,0000,0000,0000,,o puedo buscar dentro de mi HTML el nombre de la clase.
Dialogue: 0,0:01:10.62,0:01:13.15,Default,,0000,0000,0000,,Puedo ver el nombre de la clase en este párrafo,
Dialogue: 0,0:01:13.15,0:01:14.30,Default,,0000,0000,0000,,y en este párrafo,
Dialogue: 0,0:01:14.30,0:01:16.46,Default,,0000,0000,0000,,los dos párrafos que contienen información de una línea,
Dialogue: 0,0:01:16.46,0:01:18.32,Default,,0000,0000,0000,,y es por eso que tienen el borde.
Dialogue: 0,0:01:18.45,0:01:19.78,Default,,0000,0000,0000,,Los nombres de clases son geniales,
Dialogue: 0,0:01:19.78,0:01:23.01,Default,,0000,0000,0000,,porque nos permiten usar los mismos estilos en múltiples elementos.
Dialogue: 0,0:01:23.03,0:01:25.35,Default,,0000,0000,0000,,Pero hay más que podemos hacer con los nombres de clases,
Dialogue: 0,0:01:25.35,0:01:27.06,Default,,0000,0000,0000,,y es lo que les voy a mostrar ahora.
Dialogue: 0,0:01:27.23,0:01:29.14,Default,,0000,0000,0000,,Entonces, tenemos una página web sobre donas,
Dialogue: 0,0:01:29.14,0:01:31.36,Default,,0000,0000,0000,,pero las donas en realidad no son saludables para ti.
Dialogue: 0,0:01:31.44,0:01:34.01,Default,,0000,0000,0000,,Puede que sean una de las cosas menos sanas para ti.
Dialogue: 0,0:01:34.03,0:01:36.96,Default,,0000,0000,0000,,Y también son adictivas, por toda esa azúcar que contienen.
Dialogue: 0,0:01:37.01,0:01:39.64,Default,,0000,0000,0000,,Así que si vamos a tener una página que hable de ellas,
Dialogue: 0,0:01:39.64,0:01:42.42,Default,,0000,0000,0000,,probablemente deberíamos advertir a la gente sobre lo poco saludable que son.
Dialogue: 0,0:01:42.54,0:01:47.26,Default,,0000,0000,0000,,¿Qué tal si hacemos roja esta clase "fact", para realmente mostrar que es una advertencia?
Dialogue: 0,0:01:47.63,0:01:49.02,Default,,0000,0000,0000,,¿Cómo hacemos eso?
Dialogue: 0,0:01:49.20,0:01:53.40,Default,,0000,0000,0000,,Bueno, podríamos empezar añadiendo la propiedad "color" a la regla "fact" de CSS,
Dialogue: 0,0:01:53.40,0:01:55.10,Default,,0000,0000,0000,,y ver qué pasa.
Dialogue: 0,0:01:55.65,0:02:00.33,Default,,0000,0000,0000,,Pero esto hace que las dos "fact" sean rojas, y la segunda "fact" no es una advertencia,
Dialogue: 0,0:02:00.33,0:02:01.85,Default,,0000,0000,0000,,es sólo una aclaración de ortografía.
Dialogue: 0,0:02:02.05,0:02:03.84,Default,,0000,0000,0000,,Así que no queremos que sea roja.
Dialogue: 0,0:02:04.17,0:02:05.58,Default,,0000,0000,0000,,Podríamos añadir un "Id",
Dialogue: 0,0:02:05.58,0:02:09.57,Default,,0000,0000,0000,,pero entonces si quisiéramos colorear otras cosas más tarde que son advertencias
Dialogue: 0,0:02:09.57,0:02:10.96,Default,,0000,0000,0000,,y añadir más advertencias,
Dialogue: 0,0:02:10.96,0:02:14.18,Default,,0000,0000,0000,,tendríamos que añadir más y más "Id´s", y reglas para esos "Id´s".
Dialogue: 0,0:02:14.39,0:02:19.81,Default,,0000,0000,0000,,En un caso como éste, lo mejor es añadir otra clase a la etiqueta "".
Dialogue: 0,0:02:20.10,0:02:24.15,Default,,0000,0000,0000,,Los navegadores en realidad nos permiten añadir las clases que queramos a una etiqueta.
Dialogue: 0,0:02:24.54,0:02:28.53,Default,,0000,0000,0000,,Para hacer eso, simplemente ponemos el cursor después del último nombre de clase,
Dialogue: 0,0:02:28.53,0:02:33.20,Default,,0000,0000,0000,,ponemos un espacio, y luego escribimos un nombre nuevo de clase, como "warning".
Dialogue: 0,0:02:33.98,0:02:36.33,Default,,0000,0000,0000,,Ahora podemos hacer una regla para "warning",
Dialogue: 0,0:02:37.12,0:02:40.24,Default,,0000,0000,0000,,y mover esta propiedad de color a esta regla.
Dialogue: 0,0:02:40.84,0:02:44.00,Default,,0000,0000,0000,,Y ahora la clase "fact" de arriba es roja, y la segunda no.
Dialogue: 0,0:02:44.22,0:02:45.41,Default,,0000,0000,0000,,Hermoso.
Dialogue: 0,0:02:45.85,0:02:49.28,Default,,0000,0000,0000,,Podemos poner el nombre de clase en más elementos, como antes.
Dialogue: 0,0:02:49.64,0:02:54.12,Default,,0000,0000,0000,,Tal vez queremos colorear el texto "deep fried",
Dialogue: 0,0:02:54.12,0:02:56.99,Default,,0000,0000,0000,,lo queremos colorear de rojo porque "deep fried" (fritas) es algo
Dialogue: 0,0:02:56.99,0:02:59.87,Default,,0000,0000,0000,,a menudo asociado con cosas que no son saludables.
Dialogue: 0,0:03:00.02,0:03:03.69,Default,,0000,0000,0000,,Así que podemos añadir la clase "warning",
Dialogue: 0,0:03:03.69,0:03:04.63,Default,,0000,0000,0000,,también roja.
Dialogue: 0,0:03:05.04,0:03:10.82,Default,,0000,0000,0000,,Ahora, fíjate que esta advertencia de aquí está de color rojo,
Dialogue: 0,0:03:10.82,0:03:14.65,Default,,0000,0000,0000,,y también tiene un borde arriba y un borde abajo.
Dialogue: 0,0:03:14.80,0:03:17.54,Default,,0000,0000,0000,,Y eso es lo que pasa cuando usamos muchas clases,
Dialogue: 0,0:03:17.54,0:03:20.58,Default,,0000,0000,0000,,los navegadores van a revisar todas las reglas que se aplican a ellas,
Dialogue: 0,0:03:20.58,0:03:22.34,Default,,0000,0000,0000,,y van a aplicar todos los estilos.
Dialogue: 0,0:03:22.73,0:03:26.81,Default,,0000,0000,0000,,Debemos ser cuidadosos cuando usamos colores para transmitir significados,
Dialogue: 0,0:03:26.81,0:03:28.56,Default,,0000,0000,0000,,porque algunas personas no distinguen los colores.
Dialogue: 0,0:03:28.64,0:03:31.30,Default,,0000,0000,0000,,Hay algunas personas que difícilmente pueden notar la diferencia
Dialogue: 0,0:03:31.30,0:03:33.82,Default,,0000,0000,0000,,entre rojo y negro, tal vez tú seas una de ellas.
Dialogue: 0,0:03:33.90,0:03:37.46,Default,,0000,0000,0000,,Así que déjenme cambiar nuestra clase para hacerla más evidente para todas las personas.
Dialogue: 0,0:03:38.07,0:03:40.71,Default,,0000,0000,0000,,Cambiaremos este color y el color de fondo,
Dialogue: 0,0:03:40.71,0:03:44.74,Default,,0000,0000,0000,,porque cualquier persona podría identificar que un elemento tiene un color de fondo.
Dialogue: 0,0:03:45.10,0:03:47.56,Default,,0000,0000,0000,,El rojo y negro tienen un contraste muy bajo.
Dialogue: 0,0:03:47.56,0:03:51.30,Default,,0000,0000,0000,,Y el contraste también es importante para hacer que nuestra página sea legible para todos.
Dialogue: 0,0:03:51.40,0:03:54.08,Default,,0000,0000,0000,,Así que voy a cambiar el color a blanco.
Dialogue: 0,0:03:54.78,0:03:56.81,Default,,0000,0000,0000,,Ok, ahora tenemos más contraste,
Dialogue: 0,0:03:56.81,0:03:59.61,Default,,0000,0000,0000,,y un fondo rojo para las personas que pueden ver el rojo.
Dialogue: 0,0:03:59.99,0:04:04.50,Default,,0000,0000,0000,,Y como estamos usando clases las dos etiquetas "warning" tienen los mismos estilos.
Dialogue: 0,0:04:04.77,0:04:07.79,Default,,0000,0000,0000,,Ahora, gracias a la flexibilidad de las clases de CSS,
Dialogue: 0,0:04:07.79,0:04:10.74,Default,,0000,0000,0000,,podemos salvar al mundo entero de las donas.