| 1.3 Cascada y herencia | ||||
 |
Anterior | Siguiente |  |
|
¡CSS en acción!
Seleccione otra hoja de estilo para navegar:
Actual: default.css
Escribir y aplicar una hoja de estilo a nuestras páginas es una tarea sencilla. Bastaría con tener un conocimiento básico acerca de su sintaxis y un listado con las palabras que deben usarse en cada caso. Sin embargo, existen algunos conceptos más avanzados que es importante conocer para obtener el máximo provecho de este lenguaje. En esta sección revisaremos la noción de cascada y de una idea relacionada con ella, la herencia.
Una hoja de estilo asociada con una o más páginas Web resulta de mucha utilidad, pero también resulta insuficiente en ciertos casos, como un site muy grande o manejado por varias personas, en los cuales una sola hoja de estilo no alcanzaría a cubrir todas las necesidades de diseño.
Esta limitación está cubierta mediante la posibilidad de vincular hojas de estilo y de crear una jerarquía de hojas de estilo relacionadas. Este proceso se llama cascada porque los estilos definidos en cada hoja se van sumando para finalmente ser volcados a la página (poético, verdad?).
Poético y eficaz, por cierto. Pensemos, por ejemplo, en el caso del site de una organización con varios departamentos y otros tantos diseñadores encargados del mantenimiento de las páginas. El modo de asegurar la uniformidad gráfica del sitio completo es utilizar una hoja de estilo común donde estén definidos los aspectos básicos del diseño (fuentes, colores, etc.). Luego cada departamento puede tener, además, su propia hoja de estilo donde se definirán los aspectos específicos de ese departamento. Estas hojas de estilo particulares no necesitan reproducir aquella hoja común, sino que basta con importarla haciendo que los estilos definidos en una y otras actúen conjuntamente. Cualquier cambio en la hoja de estilo común (una modificación en los colores institucionales, por ejemplo) se vería reflejado inmediatamente en todas las páginas vinculadas.
La regla @import permite importar hojas de estilo desde otras
hojas de estilo. Se puede usar de las siguientes formas:
@import "hoja_de_estilo.css";
@import url("hoja_de_estilo.css");
Esta declaración debe ir antes que cualquier otra regla en la hoja de estilo.
Este mecanismo, que permite sumar los estilos de una CSS a otra, puede provocar que existan varias reglas con distintos valores aplicados a un mismo elemento. En esos casos, hay ciertas normas que determinan cuál de esos valores será el que se aplique finalmente al elemento. Es decir, se establece un orden de preferencias dentro de la cascada.
Las hojas de estilo pueden tener tres orígenes:
Las hojas de estilo con estos tres orígenes actúan conjuntamente y el orden de la cascada determina, en el caso en que existan reglas incompatibles, cuál de ellas tiene preponderancia.
Las siguientes son las normas que determinan la fuerza de las reglas de estilo:
UL {} es menos específico que UL LI {}. En
la Recomendación CSS2 puede encontrar la explicación acerca
de cómo se calcula la especificidad de un selector.
Ver La regla !important está pensada para permitir una mejor
accesibilidad a los documentos, otorgándoles a los usuarios con requerimiento
especiales (fuentes grandes, combinaciones de colores, etc.) el control sobre
la presentación. Ejemplo:
P { font-size: 14px !important }
Las declaraciones !important tienen más fuerza que las
declaraciones normales y las hojas de estilo del autor y del usuario pueden
contener la declaración !important, en cuyo caso la regla
del usuario tiene mayor fuerza que la del autor.
Aquí es importante destacar que, aunque las hojas de estilo del autor
tienen preponderancia por sobre las del usuario, con la regla !important
esto se revierte y se le da mayor poder a las preferencias del usuario.
He creado una página sobre CSS y accesibilidad donde explico cómo se puede especificar en ciertos navegadores una hoja de estilo del usuario, ya sea mediante menúes o con un archivo externo. También he preparado, cediendo a mi costado menos serio, una página donde explico cómo se puede usar una hoja de estilo para asustar a otra persona (¿?).
Cada página HTML está compuesta por una serie de elementos (títulos, párrafos, listas, tablas, etc.) organizados en una estructura donde cada elemento está contenido por otro elemento, que a su vez puede estar contenido por otro.
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>,
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.
Aquí es necesario hacer algunas precisiones:
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.Hemos mencionado que un elemento que contiene a otro es llamado padre y, previsiblemente, al elemento contenido se le llama hijo. Existen otras relaciones que se usan en la definición de los selectores:
P {font-size:
125%} se debe tomar el valor del elemento padre de <P>
y aplicarle un porcentaje de 125% para obtener el tamaño definitivo
del texto. Supongamos que <BODY> es el padre de <P>
y tiene un tamaño de fuente de 10px, entonces <P>
tendrá un tamaño de fuente de 12,5px (10x125%=12,5).
Los elementos que sean hijos de <P> no van a heredar el
valor especificado (125%) sino el valor computado (12,5px).Pueden encontrar ejemplos en la sección sobre Valores: porcentajes.