[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.24,0:00:04.78,Default,,0000,0000,0000,,Amo los museos de arte. Pero no tengo tiempo para ir a museos de arte todos los días.
Dialogue: 0,0:00:04.78,0:00:07.99,Default,,0000,0000,0000,,Afortunadamente, puedo encontrar hermosas pinturas en Internet.
Dialogue: 0,0:00:07.99,0:00:11.28,Default,,0000,0000,0000,,Incluso aquí en Khan Academy, en nuestra sección de historia del arte.
Dialogue: 0,0:00:11.28,0:00:14.34,Default,,0000,0000,0000,,Así que hice esta página web con listas de pinturas famosas,
Dialogue: 0,0:00:14.34,0:00:21.32,Default,,0000,0000,0000,,con un encabezado y listas por cada estilo artístico, y enlaces a artículos sobre cada una de las pinturas.
Dialogue: 0,0:00:21.32,0:00:25.16,Default,,0000,0000,0000,,Para hacer que esta página web se vea más llamativa, ya sabes, más artística,
Dialogue: 0,0:00:25.16,0:00:31.15,Default,,0000,0000,0000,,he aplicado reglas de CSS para cambiar el tipo de letra de dos de los encabezados los "" y los "".
Dialogue: 0,0:00:31.15,0:00:38.89,Default,,0000,0000,0000,,Me gusta la letra cursiva, pero pienso que "fantasy" debe lucir mejor, así que déjenme cambiar eso.
Dialogue: 0,0:00:38.89,0:00:43.85,Default,,0000,0000,0000,,¡Oh! y tengo que cambiar aquí, porque tenemos dos reglas.
Dialogue: 0,0:00:43.85,0:00:49.26,Default,,0000,0000,0000,,Pero en realidad, quiero que mis encabezados en esta página tengan siempre el mismo tipo de letra,
Dialogue: 0,0:00:49.26,0:00:54.41,Default,,0000,0000,0000,,y no quiero tener que estar cambiando el tipo de letra en dos lugares, cada vez que cambio de parecer.
Dialogue: 0,0:00:54.41,0:01:00.02,Default,,0000,0000,0000,,¿Cuál es la solución? Cambiar nuestras dos reglas CSS en una sola regla CSS.
Dialogue: 0,0:01:00.02,0:01:04.04,Default,,0000,0000,0000,,Mmm, piensa en eso por un momento.
Dialogue: 0,0:01:04.04,0:01:08.36,Default,,0000,0000,0000,,Probablemente sugieras añadir la misma clase a los encabezados "" y "".
Dialogue: 0,0:01:08.36,0:01:12.05,Default,,0000,0000,0000,,Y eso definitivamente funcionaría, y podríamos tener una sola regla CSS para esa clase.
Dialogue: 0,0:01:12.05,0:01:14.83,Default,,0000,0000,0000,,Pero en última instancia eso sería más trabajo para nosotros,
Dialogue: 0,0:01:14.83,0:01:19.12,Default,,0000,0000,0000,,porque tendríamos que recordar añadir esa clase cada vez que hagamos un encabezado "" o "".
Dialogue: 0,0:01:19.12,0:01:25.50,Default,,0000,0000,0000,,Afortunadamente, hay una mejor manera de hacerlo. Podemos agrupar nuestros selectores usando comas.
Dialogue: 0,0:01:25.50,0:01:31.97,Default,,0000,0000,0000,,Sólo añadiremos una coma después de "h1" y luego escribiremos "h2".
Dialogue: 0,0:01:31.97,0:01:37.26,Default,,0000,0000,0000,,Y luego podemos borrar esta otra regla porque está contenida en la primera.
Dialogue: 0,0:01:37.26,0:01:39.95,Default,,0000,0000,0000,,¡Tan tan! Nuestra página web se ve igual.
Dialogue: 0,0:01:39.95,0:01:44.27,Default,,0000,0000,0000,,Ahora cuando quiero experimentar con el cambio de tipo de letra, lo puedo hacer en un sólo lugar.
Dialogue: 0,0:01:44.27,0:01:48.68,Default,,0000,0000,0000,,Aquí, cambiaré el tipo de letra a cursiva nuevamente, y ahora todo es cursiva.
Dialogue: 0,0:01:48.68,0:01:55.76,Default,,0000,0000,0000,,Ten mucho cuidado con esta coma. Los selectores tienen que estar separados por coma, no por espacios.
Dialogue: 0,0:01:55.76,0:02:03.05,Default,,0000,0000,0000,,Como hemos visto, un espacio se usa para selectores descendentes, y significa algo completamente diferente para CSS.
Dialogue: 0,0:02:03.05,0:02:08.52,Default,,0000,0000,0000,,Agrupar selectores puede ser una gran herramienta para reducir el número de selectores redundantes que tenemos.
Dialogue: 0,0:02:08.52,0:02:14.34,Default,,0000,0000,0000,,Pero no abuses de eso. No deberías agrupar selectores solamente porque parece que tienen las mismas propiedades ahora.
Dialogue: 0,0:02:14.34,0:02:18.36,Default,,0000,0000,0000,,Deberías agrupar selectores porque quieres que siempre tengan las mismas propiedades.
Dialogue: 0,0:02:18.36,0:02:21.89,Default,,0000,0000,0000,,Y eso es generalmente, cuando ellos son semánticamente muy similares.
Dialogue: 0,0:02:21.89,0:02:28.26,Default,,0000,0000,0000,,En este caso, mi selector es para todos los tipos de encabezados, en los que a menudo quiero compartir los mismos estilos.
Dialogue: 0,0:02:28.28,0:02:33.43,Default,,0000,0000,0000,,Mantente en sintonía para conocer un caso de uso común para agrupar selectores.