Herencia y cascada
Colisiones
En hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo elemento HTML. El hecho de que un mismo elemento tenga multiples reglas puede provocar problema de colisión.
CSS dispone de un mecanismo para resolver colisiones que básicamente tiene en cuenta tres cuestiones: el tipo de hoja de estilo (de navegador, de usuario o de diseñador), la importancia de cada regla y lo específico que sea el selector aplicado.
El método seguido por CSS para resolver las colisiones de estilos:
- Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado.
- Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador) y su prioridad (palabra clave !important).
- Ordenar las declaraciones según lo específico que sea el selector. Cuanto más genérico es un selector, menos importancia tienen sus declaraciones.
- Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se aplica la que se indicó en último lugar.
Herencia
Cada página HTML está compuesta por una serie de elementos (títulos, párrafos, listas, tablas, etc.) organizados en una estructura (DOM) donde cada elemento está contenido por otro elemento, que a su vez puede estar contenido por otro y así sucesivamente.
En esta estructura existe un elemento raíz que es el que actúa de contenedor de todos los demás elementos. En HTML se puede considerar como elemento raíz al elemento body o al elemento html.
La importancia de este hecho es que cada elemento hereda las propiedades del elemento que lo contiene (llamado el elemento padre). Quiere decir que si especificamos la propiedad color: red para body en la hoja de estilos, todos los elementos de la página heredarán esta característica y no será necesario especificar nuevamente la propiedad color en cada uno de ellos.
Observaciones:
- No todas las propiedades se heredan y para cada propiedad se indica si ésta se hereda o no.
- El valor inherit puede aplicarse a cualquier propiedad de los elementos. Este valor puede usarse para reforzar explícitamente la herencia de una propiedad o para lograr que un elemento herede de su padre una propiedad que de otro modo no sería heredada.
- Cuando se asigna una propiedad a un elemento, el valor especificado reemplaza al valor heredado, como si se sobrescribiera el valor heredado del padre.
- Los elementos heredan los valores computados (expresados con base a porcentajes o tamaños relativos) del padre, no los valores especificados.
- Todas las propiedades tienen siempre un valor asignado: el valor por defecto, el valor heredado o el valor asignado en el archivo CSS.
Cascada
Nos referimos a cuando varias hojas de estilos se aplican sobre un documento y hay conflictos sobre la regla que debe aplicarse. El orden de la cascada determina, en el caso en que existan reglas incompatibles, cuál de ellas tiene preponderancia.
Las hojas de estilo pueden tener tres orígenes:
- El diseñador: como hemos visto hasta ahora, puede hacerlo a través de una hoja externa que es la forma más elegante. También se pueden hace la hoja de estilos incrustada, incluso definiendo el estilo en línea.
- El usuario: también puede especificar su propia hoja de estilo. Esta posibilidad puede resultar de gran ayuda para aquellas personas con discapacidades visuales o, simplemente, para quienes deseen adaptar las páginas a sus preferencias. Cada navegador tiene su forma particular de proveer al usuario la posibilidad de especificar una hoja de estilo propia.
- El navegador: cada navegador también aplica una hoja de estilo predeterminada que presenta los elementos de la página de modo que satisfagan las expectativas generales de presentación del documento.
Normas que determinan la fuerza de las reglas de estilo:
- La primera disposición se hace por el origen: las reglas de la hoja de estilo del autor tienen más fuerza que las del usuario y éstas, a su vez, prevalecen por sobre las del navegador.
- La segunda disposición es por especificidad: los selectores más específicos tienen mayor fuerza que los selectores generales. Por ejemplo: UL {} es menos específico que UL LI {}.
- Finalmente, se dispone por el orden especificado: si dos reglas tienen la misma fuerza, origen y especificidad, la última en ser especificada es la que vence. Las reglas en las hojas de estilo importadas se considera que están antes que cualquier regla en la propia hoja de estilo.