3 La cascada

En CSS, más de una hoja de estilo puede influir simultáneamente en la presentación de un documento. Dos son las razones principales de esta característica: modularidad y equilibrio autor/lector.

Modularidad

Un diseñador de hojas de estilo puede combinar varias hojas de estilo (parciales) para reducir redundancias:

 @import url(http://www.style.org/pastoral);
 @import url(http://www.style.org/marino);

 H1 { color: red }     /* prevalece sobre las hojas importadas */
  

Equilibrio autor/lector

Tanto los autores como los lectores pueden influir sobre la presentación a través de hojas de estilo. Para ello usan el mismo lenguaje de hojas de estilo, reflejando así una característica fundamental de la Web: todo el mundo puede convertirse en editor. El AU es libre de elegir el mecanismo para hacer referencia a las hojas de estilo personales.

Algunas veces surgirán conflictos entre las hojas de estilo que influyen en una presentación. La resolución de conflictos se basa en que cada regla de estilo tiene un peso. Por defecto, los pesos de las reglas del lector son menores que los pesos de las reglas de los documentos del autor. Es decir, si hay conflictos entre las hojas de estilo de un documento entrante y las hojas personales del lector, se usarán las reglas del autor. Tanto las reglas del autor como las del lector prevalecen sobre los valores por defecto del AU.

Las hojas de estilo importadas también están en cascada las unas con las otras, en el orden en que son importadas, de acuerdo con las reglas de cascada definidas más adelante. Cualquier regla especificada en la propia hoja de estilo prevalece sobre las reglas de las hojas de estilo importadas. Es decir, que las hojas de estilo importadas están por debajo en el orden de cascada que las reglas de la propia hoja de estilo. Las hojas de estilo importadas pueden a su vez importar y prevalecer sobre otras hojas de estilo, recursivamente.

En CSS1, todas las sentencias "@import" deben figurar al comienzo de una hoja de estilo, antes de cualquier declaración. Así es fácil ver qué reglas de la propia hoja de estilo prevalecen sobre las reglas de las hojas de estilo importadas.

3.1 'important'

Los diseñadores de hojas de estilo pueden aumentar el peso de sus declaraciones:

H1 { color: black ! important; background: white ! important }
P  { font-size: 12pt ! important; font-style: italic }

En este ejemplo, las primeras tres declaraciones tienen su peso incrementado, mientras que la última declaración tiene peso normal.

Una regla del lector con una declaración importante prevalecerá sobre una regla del autor con una declaración normal. Una regla del autor con una declaración importante prevalecerá sobre una regla del lector con una declaración importante.

3.2 Orden de cascada

Los conflictos entre reglas son intrínsecos al mecanismo de CSS. Para hallar el valor de una combinación elemento/propiedad, debe seguirse el siguiente algoritmo:

1. Encontrar todas las declaraciones que se aplican al elemento/propiedad en cuestión. Una declaración se aplica si el selector corresponde al elemento en cuestión. Si no se aplica ninguna declaración, se usa el valor heredado. Si no hay valor heredado (este es el caso para el elemento HTML y para las propiedades que no se heredan) se usa el valor inicial.
2. Ordenar las declaraciones por pesos explícitos: las declaraciones marcadas como '!important' tienen más peso que las declaraciones no marcadas (normales).
3. Ordenar por origen: las hojas de estilo del autor prevalecen sobre las hojas de estilo del lector, que prevalecen sobre los valores por defecto del agente de usuario. Una hoja de estilo importada tiene el mismo origen que la hoja de estilo desde la cual ha sido importada.
4. Ordenar por especificidad del selector: los selectores más específicos prevalecerán sobre los más generales. Para averiguar la especificidad, se cuenta el número de atributos ID en el selector (a), el número de atributos CLASS en el selector (b), y el número de nombres de etiqueta en el selector (c). Concatenando los tres números (en un sistema numérico de base elevada) se obtiene la especificidad. A continuación figuran algunos ejemplos:

    LI            {...}  /* a=0 b=0 c=1 -> especificidad =   1 */
    UL LI         {...}  /* a=0 b=0 c=2 -> especificidad =   2 */
    UL OL LI      {...}  /* a=0 b=0 c=3 -> especificidad =   3 */
    LI.red        {...}  /* a=0 b=1 c=1 -> especificidad =  11 */
    UL OL LI.red  {...}  /* a=0 b=1 c=3 -> especificidad =  13 */ 
    #x34y         {...}  /* a=1 b=0 c=0 -> especificidad = 100 */
    

   Los pseudo-elementos y las pseudo-clases se cuentan como elementos y clases normales respectivamente.
5. Ordenar por orden especificado: si dos reglas tienen el mismo peso, se impone la última especificada. Se considera que las reglas de las hojas de estilo importadas van antes que las reglas de la propia hoja de estilo.

La búsqueda del valor de la propiedad puede darse por terminada una vez que una regla tenga un peso mayor que las demás reglas que se aplican a la misma combinación elemento/propiedad.

Esta estrategia da al autor de las hojas de estilo pesos considerablemente mayores que los del lector. Es por tanto importante que el lector tenga la capacidad de desactivar la influencia de una cierta hoja de estilo, por ejemplo a través de un menú desplegable.

Una declaración en el atributo 'STYLE' de un elemento (véase el ejemplo de la sección 1.1) tiene el mismo peso que una declaración basada en un ID especificado al final de la hoja de estilo:

<STYLE TYPE="text/css">
  #x97z { color: blue }
</STYLE>

<P ID=x97z STYLE="color: red">

En este ejemplo, el color del elemento 'P' sería rojo. Aunque la especificidad es la misma para ambas declaraciones, la declaración en el atributo 'STYLE' prevalecerá sobre la del elemento 'STYLE', debido a la regla de cascada número 5.

El AU puede opcionalmente tener en cuenta otros atributos estilísticos de HTML, por ejemplo, 'ALIGN'. En ese caso, estos atributos se traducen a las reglas CSS correspondientes con especificidad igual a 1. Se supone que estas reglas están al comienzo de la hoja de estilo del autor y pueden ser anuladas por reglas de estilo subsiguientes. En una fase transitoria esta política facilitará que coexistan atributos estilísticos con hojas de estilo.