- Una de las características fundamentales de las hojas de estilo, es que se pueden combinar.
- ¿Qué quiere decir eso?
- Pues que puedes aplicar a un mismo documento HTML más de una hoja de estilo. Por ejemplo, una empresa puede tener una hoja de estilo común, y cada departamento de la empresa su propia hoja de estilo.
- Sí, podría ser útil.
- A eso hay que añadirle que cada usuario puede definir su propia hoja de estilo y aplicarla también el mismo documento.
- Pues qué lío ¿no? ¿Qué pasa si aplicamos al mismo elemento propiedades diferentes, o incluso opuestas?
- Sí, y no sólo eso, porque como te dije al principio, algunas propiedades se heredan de padres a hijos, lo cual complica aún más las cosas. Por eso CSS1 define unas reglas precisas para determinar cuáles son los valores que se aplican finalmente a las propiedades de estilo de cada elemento. A estas reglas se les llama el mecanismo de cascada.
- Pues a ver, enséñame ese mecanismo.
- Es un poco complicado, y voy a intentar explicártelo a grandes rasgos. Como siempre, la especificación contiene la descripción completa.
- Sí, venga, no seas tan vago y desembucha.
- Las hojas de estilo se dividen en dos grupos: hojas del autor, y hoja del lector. En CSS1, las reglas del autor tienen más peso que las del lector, a menos que el lector declare sus reglas como "importantes", así, por ejemplo:
body { font-size : 2em !important }
- ¿Y el autor no puede declarar sus reglas importantes también?
- Sí, y en ese caso sus reglas prevalecen sobre las del lector. Pero esto es así en CSS1, en CSS2 ha cambiado, y una regla importante del lector siempre tiene preferencia.
- Bueno, a mí me parece más lógico.
- Las hojas del autor se pueden importar básicamente de dos maneras: con varios elementos LINK
desde el documento HTML, y con reglas @import
en la hoja de estilo. Por ejemplo, una hoja de estilo podría ser así:
@import url(empresa.css);
@import url(dep-comercial.css);
h1 { font-style : italic }
Esto quiere decir que primero se cargan las reglas de empresa.css
, a continuación las de dep-comercial.css
y finalmente se añade la regla de esta hoja. ¿Lo ves?
- Sí.
- Pues bien, para cada propiedad de cada elemento, el valor especificado por la última regla es el que tiene preferencia, es como si anulara a los anteriores. Si por ejemplo en dep-comercial.css
se hubiera especificado:
h1 { font-family : monospace; font-color : blue; font-style : normal }
los valores de las propiedades de estilo resultantes para los H1
serían:
h1 { font-family : monospace; font-color : blue; font-style : italic }
- Ya entiendo.
- Estupendo. La regla @import
debe ir obligatoriamente al principio de una hoja de estilo. Las reglas que empiezan con el símbolo @
se llaman reglas tipo arroba (at-rules en inglés), y en CSS2 además de @import
existen algunas más.
- Muy bien.
- Visto eso, veamos cómo se resuelven los conflictos. Para ello, CSS se basa en dos conceptos: el orden en la cascada (como acabamos de ver), y la especificidad. Por ejemplo, imagina que, en el caso anterior añadimos una nueva declaración:
@import url(empresa.css);
@import url(dep-comercial.css);
div.resumen h1 { font-style : normal }
h1 { font-style : italic }
¿Qué valor de font-style
le darías a los H1
que aparecen dentro de un DIV
de clase resumen
?
- Pues, no sé, en principio normal
, pero después aparece la regla font-style:italic
para todos los H1
... no sé.
- Aplicaríamos font-style:normal
, porque los selectores más específicos prevalecen sobre los más generales. Solamente en el caso en que dos selectores sean igual de específicos, se imponen las reglas del último declarado.
- Ya, ¿y cómo se mide la especificidad?, porque eso parece un concepto un poco abstracto...
- El concepto de especificidad está definido en la especificación. Cuentas el número de atributos id
en el selector, por ejemplo "a"; cuentas el número de atributos class
(y pseudo-clases), por ejemplo "b"; y el número de nombres de elementos (y pseudo-elementos), por ejemplo "c". Concatenando los tres números obtienes la especificidad "abc". Estos son algunos ejemplos sacados de la especificación CSS1:
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 */
- Vaya, ya veo que han atado todos los cabos...
- Por cierto, esos asteriscos, antes de que se me olvide, son la forma de poner comentarios en las hojas de estilo. No habíamos hablado de esto y es importante.
- Tsk, tsk...
- Se pueden poner comentarios en un documento HTML de la siguiente manera:
<!-- Esto es un comentario HTML -->
El comentario no aparecerá representado, pero te puede ser útil cuando repases tus documentos días o meses después de haberlos creado. En CSS los comentarios son diferentes:
/* Esto es un comentario CSS */
Sólo es eso, es muy sencillo y son útiles para no volverte más loco de lo necesario.
- Demasiado tarde para eso...
- Bueno, nunca es tarde para volverse más loco. En realidad todo esto de la cascada es más complicado de lo que te he explicado, y además en CSS2 las cosas varían ligeramente. Por no decir que la implementación que hacen los navegadores actuales de CSS no es precisamente perfecta...
- Calla, calla, no me asustes más.
- Bueno, creo que es el momento de ver unos cuantos ejemplos de HTML 4 y CSS1 auténtico y de verdad, ¿te parece?
- ¡Por supuesto!
Sitio Web mantenido por Juan R. Pozo (jrpozo arroba conclase punto net).
Última modificación: 14/10/2001 - © 2001 Juan R. Pozo y conclase.net