Agrupación
de Selectores y Declaraciones
| Agrupación
de selectores
Normalmente,
se da el caso en que dos elementos del documento HTML comparten la definición
de la misma propiedad CSS. Estos elementos podemos declararlos de una forma
extendida:
H1 {color:
purple;}
H2 {color:
purple;}
H3 {color:
purple;}
H4 {color:
purple;}
H5 {color:
purple;}
H6 {color:
purple;} |
|
O utilizar
la agrupación para conseguir una declaración más compacta
(el resultado es el mismo en ambos casos):
H1, H2,
H3, H4, H5, H6 {color: purple;}Otros ejemplos de estructuras de agrupación
que son equivalentes:
H1 {color:
purple; background: white;}
H2 {color:
purple; background: green;}
H3 {color:
white; background: green;}
H4 {color:
purple; background: white;}
B {color:
red; background: white;}
H1, H2, H4
{color: purple;}
H2, H3 {background:
green;}
H1, H4, B
{background: white;}
H3 {color:
white;}
B {color:
red;}
H1, H4 {color:
purple; background: white;}
H2 {color:
purple;}
H3 {color:
white;}
H2, H3 {background:
green;}
B {color:
red; background: white;}
| Agrupación
de declaraciones:
Podemos agrupar
declaraciones cuando tenemos diferentes reglas que definen propiedades
de un mismo elemento. Por ejemplo:
H1 {font: 18pt
Helvetica;}
H1 {color:
purple;}
H1 {background:
aqua;} |
|
Podemos redefirnirlo
como:
H1 {font:
18pt Helvetica; color: purple; background: aqua.
Los espacios
en blanco serán ignorados, así que el navegador se fiará
de la correcta estructura sintáctica de las reglas. Es por eso,
que para una más sencilla visualización, podemos escribir
las reglas CSS de esta forma:
H1 { font:
18pt Helvetica; color: purple; background: aqua; }
Es una buena
práctica terminar las declaraciones siempre con punto y coma (aunque
no es obligatorio). Motivos:
Te permite
habituarte a terminar las declaraciones correctamente, que es uno de los
errores más comunes.
Si decides
añadir una nueva declaración a la regla, no tiens porque
preocuparte de cómo termina la anterior.
Algumos navegadores
antiguos pueden confundirse cuando las reglas no se terminan adecuadamente.
Combinaciones
de agrupación de selectores y declaraciones:
BODY {background:
white; color: gray;}
H1,
H2, H3, H4, H5, H6 {
font-family: Helvetica, sans-serif;
color: white;
background: black;
}
H1,
H2, H3 {border: 2px solid gray; font-weight: bold;}
H4,
H5, H6 {border: 1px solid gray;}
P, TABLE {color:
gray; font-family: Times, serif;}
PRE {margin:
1em; color: maroon;}
|
