En CSS los valores de propiedades configurados en un elemento se transferirán en forma descendente a sus descendientes. Así como los hijos heredan de sus padres, lo hacen igualmente los elementos HTML. Los elementos HTML heredan propiedades estilísticas.
soluciona los conflictos cuando varias declaraciones afectan a un elemento determinado. Las declaraciones importantes anulan a las que no lo son tanto. Entre declaraciones de igual importancia, la especificidad de la regla controla cuál se aplica. Y, si todas las demás son iguales, el orden de las fuentes supone la distinción definitiva. CSS establece una serie de reglas para establecer cuál prevalece, según tres factores: importancia, especificidad y orden.
- IMPORTANCIA: son las declaraciones que van seguidas de una directiva !important, que explicita la importancia de esa declaración. Las declaraciones importantes de una hoja de estilo de usuario tienen prioridad sobre todas las demás.
- ESPECIFICIDAD: Es una medida de cuán específico es el selector de una regla. Un selector de especificidad baja puede dar como resultado muchos elementos (como *, que da como resultado todos los elementos del documento), mientras que un selector con una especificidad elevada puede que sólo dé como resultado un único elemento de una página (como #nav, que sólo da como resultado el elemento con una id de nav). La especificidad de un selector puede calcularse fácilmente. Si dos o más declaraciones entran en conflicto por un elemento determinado y todas las declaraciones tienen la misma importancia, la de la regla con el selector más específico será la que "gane". La especificidad tiene cuatro componentes; por ejemplo a, b, c y d. El componente "a" es el más distintivo y el "d", el que menos.
- El componente "a" es bastante sencillo: es 1 para una declaración en un atributo style; si no, es 0.
- El componente "b" es el número de selectores de id en el selector (los que empiezan con #).
- El componente "c" es el número de selectores de atributo, incluidos los selectores de clase y pseudoclases.
- El componente "d" es el número de tipo de elementos y pseudoelementos del selector.
- ORDEN: Es cuando dos declaraciones afectan al mismo elemento, tienen la misma importancia y la misma especificidad, la señal distintiva final es el orden en las fuentes.
Ejemplos de Importancia, Especifidad y Orden.
Importancia
- h1{color:lime !important;}
- body h1{color:purple;}
En este ejemplo se puede observar que si las declaraciones son normales el texto del titular seria de color purple, pero como se coloca la directiva !important, tiene prioridad y por lo tanto el texto es lime
- h1{color:lime;} /* 0,0,0,1 */
- body h1{color:#696969;} /* 0,0,0,2 */
Los Titulares serían color #696969(gris), porque su selector cuenta con más elementos.
- h1.intro{color:BlueViolet;} /* 0,0,1,1 */
- body h1{color:#696969;} /* 0,0,0,2 */
Los Titulares con class="intro" sería BlueViolet, porque una sola clase pesa más que dos elementos.
- h1.intro{color:BlueViolet;} /* 0,0,1,1 */
- body h1.intro{color:Coral;} /* 0,0,1,2 */
Ahora el mismo Titular sería coral, porque hay el mismo número de clases pero la segunda regla tiene más elementos.
- #especial { color: green; } /* 0,1,0,0 */
- body h1 { color: #696969; } /* 0,0,0,2 */
Un Titular con id="especial" sería color green (verde), porque un solo id pesa más que cualquier cantidad de elementos.
- #resumen { color: Maroon; } /* 0,1,0,0 */
- body h1.tit { color: MediumPurple; } /* 0,0,1,2 */
Un Titular con id="resumen" sería color Maroon (vinotinto), porque un solo id pesa más que cualquier cantidad de clases y elementos.
- body h1.destacado{color:red !important;} /* 0,0,1,2 */
- html body .destacado{color:Olive !important;} /* 0,0,1,2 */
Su importancia, como se ve, es la misma, y su especificidad, idéntica —0,0,1,2—. Pues será de color Olive, porque a igualdad de importancia y especificidad, una regla que aparezca posteriormente en la hoja de estilo gana mayor peso.
Ejemplo de Cabecera: header
Ejemplo de Cabecera: header
Ejemplo de Cabecera: header
Ejemplo de Cabecera: header
Ejemplo de Cabecera: header
Ejemplo de Cabecera: header
