La estructura del documento es determinante para la forma en que CSS aplica los estilos al documento, sobre todo en torno a las relaciones entre padres e hijos.
El primer gran beneficio de este tipo de relaciones es el hecho de que podemos definir relaciones de contexto entre los elementos. Por ejemplo, si queremos definir que los EM que est�n dentro de un H1 ser�n grises, podemos a�adir un atributo CLASS a cada EM que est� dentro de un H1, o definir una regla como la siguiente:
H1 EM {color: gray;}
�Herencia
Es la propiedad por al cual un estilo no s�lo se aplica a un elemento en concreto, sino que es heredado por sus descendientes y aplicado por estos:
H1 {color: gray;}
<H1>Meerkat <EM>Central</EM></H1>
Debemos tener en cuenta que no todas las propiedades se heredan. Existen una serie de razones (normalmente de sentido com�n) por las cuales algunas propiedades no se pueden heredar, por ejemplo la definici�n de bordes.
�Especificidad
Hay ocasiones en las que podemos encontrarnos en la situaci�n de que un mismo elemento tenm�ltiples definiciones para ser formateado de formas distintas:
.grape {color: purple;}
H1 {color: red;}
<H1 CLASS="grape">Meerkat <EM>Central</EM></H1>
En estos casos CSS define que se debe aplicar el estilo que sea m�s espec�fico, ejemplo de gradaci�n que aplicar� un navegador a la hora de aplicar los estilos:
H1 {color: red;} /* specificity = 1 */
P EM {color: purple;} /* specificity = 2 */
.grape {color: purple;} /* specificity = 10 */
P.bright {color: yellow;} /* specificity = 11 */
P.bright EM.dark {color: brown;} /* specificity = 22 */
#id216 {color: blue;} /* specificity = 100 */
Por definici�n, los estilos heredados tendr�n un valor de especificidad 0 y los aplicados a trav�s de la propiedad STYLE, un valor superior a 100.
�Importancia
Podemos marcar que ciertos estilos son m�s importantes que otros, pudiendo as� modificar las reglas de especificidad aplicadas por el navegador. Un estilo importante se define a�adiendo la coletilla !important al final del mismo:
P.dark {color: #333 !important; background: white;}
Esto estilos recibir�n siempre el valor de especificidad m�s alto considerado por el navegador.
Como los estilos heredados tienen un valor de especificidad 0, esta definici�n se mantendr� aunque el estilo heredado contuviera la definicion !important.
�Estilos en cascada
Cuando hay dos reglas que tienen la misma especificidad sobre el mismo elemento:
H1 {color: red;}
H1 {color: blue;}
Debemos seguir el siguiente proceso para decidir qu� estilos aplicar:
-
Buscar todas las declaraciones que contengan un selector que encaje con un elemento dado.
-
Ordenar por especificidad todas las declaraciones que se aplican a este elemento. Tambi�n debemos ordenarlas por su origen como: Dise�ador, navegante o navegador (la priorizaci�n sigue este orden).
-
Ordenar por orden las declaraciones. Las �ltimas declaraciones tendr�n un peso m�s elevado. Las declaraciones obtenidas como consecuencia de un IMPORT se considerar�n como las primeras teniendo as� un peso menor, al contrario de las resultantes de aplicar un STYLE que se pondr�n al final de la lista con un peso m�s elevado.
As� el color obtenido para el elemento H1 ser� azul.