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