< Return to Video

Agrupando Selectores CSS

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

more » « less
Video Language:
English
Duration:
02:34
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for Grouping CSS selectors
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for Grouping CSS selectors
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for Grouping CSS selectors
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for Grouping CSS selectors
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for Grouping CSS selectors

Spanish, Mexican subtitles

Revisions