Estructura
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.
Tutoriales
