[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.81,0:00:05.43,Default,,0000,0000,0000,,Vamos a cambiar, de donas a zanahorias, una de las comidas más saludables del mundo.
Dialogue: 0,0:00:05.43,0:00:07.90,Default,,0000,0000,0000,,Además de que es la comida favorita de los conejos.
Dialogue: 0,0:00:07.90,0:00:10.53,Default,,0000,0000,0000,,¿Sabías que las zanahorias no sólo son de color naranja?
Dialogue: 0,0:00:10.53,0:00:13.54,Default,,0000,0000,0000,,Originalmente eran moradas. Hay algunas moradas todavía.
Dialogue: 0,0:00:13.54,0:00:19.54,Default,,0000,0000,0000,,Tenemos aquí una pequeña página web con una lista de colores y un enunciado sobre su origen morado.
Dialogue: 0,0:00:19.54,0:00:25.27,Default,,0000,0000,0000,,Y hemos usado clases para estilizar los nombres de los colores con el color correspondiente.
Dialogue: 0,0:00:25.27,0:00:31.90,Default,,0000,0000,0000,,Me gusta cómo se ve el estilo en la lista, pero no estoy segura de que el "estilo morado" se vea bien en el texto.
Dialogue: 0,0:00:31.90,0:00:36.22,Default,,0000,0000,0000,,Creo que es mejor quitar el color de fondo, y usar un color más sutil allí.
Dialogue: 0,0:00:36.22,0:00:43.78,Default,,0000,0000,0000,,¿Cómo puedo decirle al navegador que estilice el texto en morado que está aquí de manera diferente que lo hace en este texto morado?
Dialogue: 0,0:00:43.78,0:00:49.30,Default,,0000,0000,0000,,Bueno, tienen el mismo nombre de clase, así que no podemos usar el nombre de clase a menos que introduzcamos un nuevo nombre de clase.
Dialogue: 0,0:00:49.30,0:00:52.92,Default,,0000,0000,0000,,También tienen el mismo nombre de etiqueta, los dos son "´s"
Dialogue: 0,0:00:52.92,0:00:58.01,Default,,0000,0000,0000,,Así que no podemos usar el selector de elemento más nombre de clase que acabamos de aprender.
Dialogue: 0,0:00:58.01,0:01:00.66,Default,,0000,0000,0000,,¿Hay algo más que sea diferente entre ellos?
Dialogue: 0,0:01:00.66,0:01:06.38,Default,,0000,0000,0000,,Bueno, una cosa diferente es que esta etiqueta "" está dentro de esta etiqueta "",
Dialogue: 0,0:01:06.38,0:01:10.98,Default,,0000,0000,0000,,y esta etiqueta "" está dentro de "".
Dialogue: 0,0:01:10.98,0:01:15.58,Default,,0000,0000,0000,,Así que la diferencia son sus etiquetas padres, las etiquetas que están sobre ellas.
Dialogue: 0,0:01:15.58,0:01:21.10,Default,,0000,0000,0000,,Podemos usar esa información para hacer una regla de CSS, usando lo que llamamos "selector descendente",
Dialogue: 0,0:01:21.10,0:01:25.22,Default,,0000,0000,0000,,es una manera de seleccionar elementos basada en la posición que tienen en el documento.
Dialogue: 0,0:01:25.22,0:01:30.62,Default,,0000,0000,0000,,Por ejemplo, para seleccionar solamente "purple" de la etiqueta "" dentro del párrafo,
Dialogue: 0,0:01:30.62,0:01:35.78,Default,,0000,0000,0000,,debemos escribir "p" y luego un espacio, el espacio es muy importante,
Dialogue: 0,0:01:35.78,0:01:40.38,Default,,0000,0000,0000,,y luego el nombre de la clase, punto ".purple",
Dialogue: 0,0:01:40.38,0:01:46.11,Default,,0000,0000,0000,,y ahora vamos a añadir las propiedades que nos darán un coloreado más sutil,
Dialogue: 0,0:01:46.11,0:01:50.31,Default,,0000,0000,0000,,"background-color: transparent", anulando lo que teníamos antes.
Dialogue: 0,0:01:50.31,0:01:58.80,Default,,0000,0000,0000,,Ok, muy bonito. Así que hemos modificado este texto morado sin modificar este otro texto morado.
Dialogue: 0,0:01:58.80,0:02:02.88,Default,,0000,0000,0000,,Y ahora cada vez que usemos esta clase "purple" dentro de un párrafo como éste,
Dialogue: 0,0:02:02.88,0:02:05.32,Default,,0000,0000,0000,,tendrá los estilos que aplicamos después.
Dialogue: 0,0:02:05.32,0:02:09.59,Default,,0000,0000,0000,,Podemos usar ese espacio para ir más adentro en nuestro documento.
Dialogue: 0,0:02:09.59,0:02:15.73,Default,,0000,0000,0000,,Digamos que queremos aplicar un estilo sólo para las etiquetas "" que están en "´s"
Dialogue: 0,0:02:15.73,0:02:23.14,Default,,0000,0000,0000,,Empezamos con la etiqueta padre "li" y luego un espacio, y luego "strong".
Dialogue: 0,0:02:23.14,0:02:28.07,Default,,0000,0000,0000,,Y tal vez les vamos a dar una altura de línea diferente para que tengan más espacio.
Dialogue: 0,0:02:28.07,0:02:34.07,Default,,0000,0000,0000,,Muy bien. Incluso podemos añadir "ul" antes de "li", si queremos,
Dialogue: 0,0:02:34.07,0:02:38.52,Default,,0000,0000,0000,,para asegurarnos que esto no se aplique a las "´s" que estén dentro de una etiqueta " ".
Dialogue: 0,0:02:38.52,0:02:43.81,Default,,0000,0000,0000,,Como ves, para usar selectores descendentes, debemos pensar muy bien en la estructura de nuestro documento.
Dialogue: 0,0:02:43.81,0:02:46.10,Default,,0000,0000,0000,,Y saber cuáles etiquetas están dentro de otras etiquetas.
Dialogue: 0,0:02:46.10,0:02:49.51,Default,,0000,0000,0000,,Si estás indentando bien, entonces eso te será fácil de hacer,
Dialogue: 0,0:02:49.51,0:02:52.51,Default,,0000,0000,0000,,porque la indentación refleja la jerarquía de las etiquetas.
Dialogue: 0,0:02:52.51,0:02:56.96,Default,,0000,0000,0000,,Fíjate, tenemos esta etiqueta "", y dentro tenemos indentada la etiqueta "",
Dialogue: 0,0:02:56.96,0:02:59.34,Default,,0000,0000,0000,,y dentro de esa tenemos "".
Dialogue: 0,0:02:59.34,0:03:02.93,Default,,0000,0000,0000,,Si no estás indentando bien, bueno, arreglalo ahora,
Dialogue: 0,0:03:02.93,0:03:07.02,Default,,0000,0000,0000,,porque te será mucho más fácil entender la estructura de tu página,
Dialogue: 0,0:03:07.02,0:03:10.61,Default,,0000,0000,0000,,y llegar a los selectores de CSS basados en esa estructura.
Dialogue: 0,0:03:10.61,0:03:13.60,Default,,0000,0000,0000,,Puedes usar ese espacio entre cualquier tipo de selectores.
Dialogue: 0,0:03:13.60,0:03:19.02,Default,,0000,0000,0000,,Como encontrar un tipo de etiqueta particular dentro de un elemento que tiene un determinado "id",
Dialogue: 0,0:03:19.02,0:03:22.46,Default,,0000,0000,0000,,o encontrar un "id" particular debajo de elementos con un nombre de clase particular,
Dialogue: 0,0:03:22.46,0:03:25.33,Default,,0000,0000,0000,,cualquier combinación que necesites usar.
Dialogue: 0,0:03:25.33,0:03:32.23,Default,,0000,0000,0000,,Lo que hay que recordar es que si la estructura de tu página cambia, entonces las reglas anteriores de CSS podrían no aplicar.
Dialogue: 0,0:03:32.23,0:03:37.18,Default,,0000,0000,0000,,Así que piénsalo cuidadosamente cuando los uses, y cómo será probado tu CSS en el futuro.
Dialogue: 0,0:03:37.18,0:03:41.30,Default,,0000,0000,0000,,Podrías usar clases si quieres ser menos dependiente de la estructura de tu página.
Dialogue: 0,0:03:41.30,0:03:45.61,Default,,0000,0000,0000,,Vamos de nuevo a las reglas que escribí y vamos a pensar en ellas.
Dialogue: 0,0:03:45.61,0:03:51.38,Default,,0000,0000,0000,,Estas primeras reglas estilizan todos los elementos de clase "purple" que estén dentro de párrafos de una determinada manera.
Dialogue: 0,0:03:51.38,0:03:57.59,Default,,0000,0000,0000,,Si agrego un nuevo párrafo con elementos de clase "purple" en el futuro, ¿desearía que adquirieran esa propiedad?
Dialogue: 0,0:03:57.59,0:04:02.37,Default,,0000,0000,0000,,Sí, porque pienso que esas propiedades hacen que el párrafo se vea de lo mejor.
Dialogue: 0,0:04:02.37,0:04:04.40,Default,,0000,0000,0000,,¿Necesito una regla más específica?
Dialogue: 0,0:04:04.40,0:04:11.19,Default,,0000,0000,0000,,Bueno, tal vez si ese párrafo estuviera dentro de un elemento con un nombre de clase "article", podría añadir eso a la regla.
Dialogue: 0,0:04:11.19,0:04:14.25,Default,,0000,0000,0000,,Pero por ahora, esto es lo más específica que puedo ser.
Dialogue: 0,0:04:14.25,0:04:21.18,Default,,0000,0000,0000,,La segunda regla le da una determinada altura de línea a los elementos "" que están dentro de la lista.
Dialogue: 0,0:04:21.18,0:04:26.04,Default,,0000,0000,0000,,¿Deseo que los elementos "" que están dentro de los "´s" tengan siempre esa altura de línea?
Dialogue: 0,0:04:26.04,0:04:30.98,Default,,0000,0000,0000,,Mmm, tal vez no. Puede ser que esta regla sea muy genérica.
Dialogue: 0,0:04:30.98,0:04:36.78,Default,,0000,0000,0000,,Como no estoy segura, voy a añadir una clase a esta "",
Dialogue: 0,0:04:36.78,0:04:42.03,Default,,0000,0000,0000,,y luego voy a cambiar ésta a "ul.spacey"
Dialogue: 0,0:04:42.03,0:04:44.65,Default,,0000,0000,0000,,que la hace más específica.
Dialogue: 0,0:04:44.65,0:04:49.84,Default,,0000,0000,0000,,En el futuro conforme mi página web crezca, haré esta regla más o menos específica.
Dialogue: 0,0:04:49.84,0:04:53.66,Default,,0000,0000,0000,,Agrega esta herramienta a tu caja de herramientas de CSS que cada vez es más grande,
Dialogue: 0,0:04:53.66,0:04:57.38,Default,,0000,0000,0000,,y practica con ella para que puedas usarla cuando tenga sentido.