Hojas de estilo en cascada CSS

Ubicación de las reglas de estilo

La recomendación (X)HTML permite declarar reglas de estilo en cinco lugares:

1. En el elemento mismo, con el atributo style.
2. En el encabezado del documento web, con el elemento style.
3. En un archivo .css externo el cual se liga al documento con el elemento link.
4. En una hoja de estilos externa provista por el visitante (no por el autor).
5. En la implementación del navegador web.

De los cinco lugares para especificar estilos en la lista anterior, el Consorcio Web (W3C) desalienta el uso los dos primeros, ya que el documento web debe almacenar contenido únicamente, no estilos; y los dos últimos están fuera del control del autor. Por eso, se aconseja al autor declarar las reglas de estilo siempre en una o varias hojas de estilos .css externas al documento web.

El listado css_locations muestra cómo declarar estilos en los tres lugares donde puede el autor. Supóngase que la línea 17 representa un archivo de texto con extensión .css que contiene sólo una regla y se adjunta al documento web con el elemento link en el encabezado del mismo (línea 4). Si dos o más hojas de estilo se incluyen en el encabezado, se procesarán en el mismo orden en que se incluyeron.

   
      
      
      
      ...
   
   
      
Lorem ipsum ad his scripta blandit partiendo...
   



p { color: green }
]]>

El atributo media del elemento link indica si las reglas de estilo aplican a un medio específico, como la pantalla (screen), la impresora (print), programas de lectura sintetizada (aural), computadoras de mano (handheld), televisores (tv) y otros. En el ejemplo anterior, un navegador cargará la hoja styles1.css (línea 4) y los aplicará al documento web para ser visualizado en la pantalla. Si el usuario decide imprimir el documento, el navegador cargará styles2.css (línea 5) y los aplicará en la copia que enviará a la impresora. El atributo media es opcional, y si no se especifica en un elemento link, se asume que esa hoja de estilos aplicará a todos los medios, lo que equivale a darle el valor media="all". El atributo media puede contener varios valores separados por comas, de esta forma, una hoja de estilos puede aplicarse a varios medios simultáneamente.

El segundo lugar donde se pueden escribir reglas de estilo es en uno o varios elementos style dentro del encabezado (head) del documento (X)HTML, como se aprecia en las líneas 6 a 8 del listado css_locations. Nótese que el encabezado head admite combinar hojas de estilo externas y elementos style en cualquier orden. La especificación CSS indica que el navegador debe respetar este orden, de tal forma que las reglas de estilo que se encuentran en un archivo .css, tienen el mismo efecto que si se escribiesen directamente en un elemento style del encabezado.

El tercer lugar donde se puede especificar reglas de estilo es en el atributo style del elemento mismo, como se hizo en la línea 12 del listado css_locations. En este caso, todas las propiedades aplicarán únicamente a dicho elemento por lo que no es necesario especificar un selector, ni agrupar las propiedades dentro de llaves { }.

El principio de cascada

En vista de que hay cinco lugares opcionales donde se especifican estilos, puede ocurrir que para una propiedad no haya ninguna regla, o bien hayan varias. El navegador necesita un algoritmo que especifique cómo actuar en estos casos, al cual se le llama el principio de cascada y consta de otros tres principios.

Si dos o más reglas compiten para darle estilo a una misma propiedad, recibirá mayor prioridad aquella que tenga mayor especificidad en su selector. A esto se le llama principio de especificidad.

Si dos reglas compitiendo por la misma propiedad tienen igual especificidad, se tomará la que aparezca de último, es decir, tendrá más peso aquella que se encuentre más cerca del elemento. A esto se le llama el principio de ubicación.

Cuando por el contrario, no se especifican reglas para una propiedad, el navegador debe seguir un principio más, el principio de herencia, el cual indica que ante la ausencia de una regla de estilo, el navegador debe aplicar el estilo del elemento padre. No todos las propiedades son heredables por defecto. Por ejemplo, la fuente lo es pero no el margen. De esta forma, al asignar la fuente al elemento body, todos los párrafos la heredan, lo cual es deseable; pero si se asigna un margen grande al body para mantener una separación visual con los bordes de la ventana del navegador, sería indeseable si este borde se aplicara entre párrafo y párrafo.

El uso de los tres principios: ubicación, especificidad y herencia para determinar cuál regla debe aplicar a una propiedad de estilo de un elemento se conoce como principio de cascada. Los navegadores implementan este principio dándole puntos o pesos a cada regla de estilo siguiendo un cálculo propuesto en la especificación CSS, que cualitativamente se puede resumir en lo siguiente:

Ante la ausencia de una regla, el estilo se hereda del elemento padre si la propiedad es heredable, si no, se usa el estilo por defecto del navegador. Si dos o más reglas compiten por darle estilo a una misma propiedad, se tomará aquella con mayor especificidad de su selector, independientemente de dónde esté ubicada. Con dos reglas de igual especificidad, ganará la que aparezca de último.

A modo de ejemplo, el listado css_location_doc muestra un documento web que tiene dos párrafos y estilos definidos en tres lugares: una hoja de estilos externa (cascading1.css) enlazada en la línea 4; un elemento style en el encabezado (líneas 5 a 7), y un atributo style en el segundo párrafo (línea 18). Se estudiará el efecto de estos estilos en tres propiedades: el color, la fuente y el margen.

   
   
   



   
Este es el primer párrafo. Ninguna regla de estilo para p
   especifica la fuente, por lo que hereda la fuente de su elemento padre
   body. Aunque hay una hoja de estilos externa que especifica que el color
   del texto de los párrafos debe ser rojo, éste es verde azulado
   porque hay una regla en el encabezado del documento, que está más cerca de este
   párrafo.

   
Este es el segundo párrafo. Tiene un atributo de estilo que
   sobrescribe el color del texto a verde, ya que por
   especificidad está más cerca del elemento. Ninguna regla de estilo formatea
   la separación vertical entre párrafos, por lo que se aplica la que el navegador tenga
   implementada internamente.


]]>

body
{
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 2.5cm;
}

p { color: red; }

La fuente es una propiedad heredable de acuerdo a la especificación CSS. La mayoría de navegadores asumen una fuente con serifas, como Times New Roman. Al cargar la hoja de estilos el navegador procesa la regla que indica que la fuente del cuerpo (body) del documento debe mostrarse en Verdana, que es por el contrario una fuente sin serifas (sans-serif); cualquier regla del autor tiene más prioridad que el valor por defecto del navegador y por ende el navegador debe usar Verdana para formatear el texto del body, el cual es vacío (body no tiene texto directamente, sino dos elementos p hijos).

Al desplegar el primer párrafo (línea 11), el navegador no encuentra una regla de fuente para dicho elemento de párrafo. Como es una propiedad heredable, el navegador toma la fuente del padre del párrafo que es el elemento body, y por ende despliega el texto del párrafo en Verdana. Esto mismo ocurre recursivamente para los elementos hijos del párrafo, como em, strong y code; y luego para el párrafo siguiente. De esta forma, todo el documento aparece en Verdana como el autor podría esperar.

La propiedad de margen (margin) no es heredable de acuerdo a la especificación CSS. El navegador web asume un margen nulo o minúsculo para el body, por lo que el texto se suele pegar con los extremos de la ventana del navegador. Al encontrar la regla margin: 2.5cm, el navegador la aplica al elemento body, haciendo que el margen del documento sea de 2.5 centímetros. Sin embargo, al no ser una propiedad heredable, el navegador no aplica un margen de 2.5 centímetros a los párrafos ni a los elementos em, strong y code, sino que asume el margen por defecto, que es de unos cuantos pixeles para párrafos y de 0 pixeles para los otros elementos citados.

El color es una propiedad heredable según la especificación CSS. El navegador no encuentra una regla para el color de body y asume el por defecto del navegador, que es negro. La regla p { color: red; } en la hoja de estilos cascading1.css, indica al navegador que pinte todos los párrafos en rojo. Pero en la línea 6 del documento web del listado css_location_doc compite por la misma propiedad: establecer el color de los párrafos en verde azulado (teal). Estas dos reglas están en conflicto, y ganará la que tenga mayor especificidad en el selector, sin embargo ambas tienen el mismo selector; y en tal caso el navegador deberá aplicar la que aparezca de último de acuerdo al principio de ubicación, y por ende, los parrafos aparecerán en verde azulado.

Al pintar el segundo párrafo que inicia en la línea 18 del listado css_location_doc, el navegador encuentra una regla para la propiedad color en su atributo style. De acuerdo al principio de especificidad esta regla tiene la mayor prioridad y por ende, el segundo párrafo aparecerá en verde simple en lugar de verde azulado.

El operador @