Contenidos
Una vez que una aplicación del usuario ha analizado un documento y construido una estructura del documento, debe asignar, para cada elemento de la estructura, un valor por cada propiedad que es aplicada a los tipos de medios a los cuales se dirige.
El valor final de una propiedad es el resultado de un cálculo en tres pasos: el valor se determina por medio de la especificación (el "valor especificado"), luego resuelto a un valor absoluto si es necesario (el "valor computado"), y finalmente transformado de acuerdo a las limitaciones del entorno local (el "valor real").
Las aplicaciones del usuario deben primero asignar un valor especificado para una propiedad basadas en los siguientes mecanismos (en orden de precedencia):
Puesto que no tiene ningún padre, la raíz de la estructura del documento no puede utilizar valores del elemento padre; en este caso, se usa el valor inicial si es necesario.
Los valores especificados pueden ser absolutos (es decir, no se especifican con relación a otro valor, como en 'red' o '2mm') o relativos (es decir, son especificados con relación a otro valor, como en 'auto', '2em' y '12%'). Para los valores absolutos, no es necesario ningún cálculo para encontrar el valor computado.
Los valores relativos, por otro lado, deben ser transformados en valores computados: los porcentajes deben ser multiplicados por un valor de referencia (cada propiedad define qué valor es ése), los valores con unidades relativas (em, ex, px) deben convertirse en absolutos multiplicándolos por el tamaño adecuado de la fuente o el pixel, los valores 'auto' deben ser computados con las fórmulas dadas con cada propiedad, ciertas palabras clave ('smaller', 'bolder', 'inherit') deben ser reemplazadas de acuerdo a sus definiciones.
En la mayoría de los casos, los elementos heredan los valores computados. Hay, sin embargo, algunas propiedades cuyo valor especificado puede heredarse (ej., el valor numérico de la propiedad 'line-height'). En los casos donde los elementos hijos no heredan el valor computado, esto se describe en la definición de la propiedad.
Un valor computado está en principio listo para ser usado, pero una aplicación del usuario puede no estar en condiciones de hacer uso del valor en un ámbito determinado. Por ejemplo, una aplicación del usuario sólo puede procesar los bordes con un ancho expresado en pixeles enteros y por consiguiente debe aproximar el ancho computado. El valor real es el valor computado después de cualquier aproximación que le haya sido aplicada.
Algunos valores son heredados por los hijos de un elemento en la estructura del documento. Cada propiedad define si se hereda o no.
Suponga que hay un elemento H1 con un elemento enfatizado (EM) adentro:
<H1>El título <EM>es</EM> importante!</H1>
Si no se ha asignado ningún color al elemento EM, el énfasis en "es" heredará el color del elemento padre, de modo que si H1 tiene un color azul, el elemento EM será igualmente azul.
Para poner una propiedad de estilo "predeterminada" en un documento, los autores pueden especificar la propiedad en la raíz de la estructura del documento. En HTML, por ejemplo, los elementos HTML o BODY pueden servir para esta función. Observe que esto servirá aún cuando el autor omita la marca BODY en la fuente HTML debido a que el analizador HTML inferirá la marca ausente.
Por ejemplo, como la propiedad 'color' es heredada, todos los descendientes del elemento BODY heredarán el color 'black':
BODY { color: black; }
Los valores de porcentaje especificados no son heredados; los valores computados sí lo son.
Por ejemplo, dada la siguiente hoja de estilo:
BODY { font-size: 10pt }
H1 { font-size: 120% }
y este fragmento del documento:
<BODY> <H1>Un <EM>gran</EM> titular</H1> </BODY>
la propiedad 'font-size' del elemento H1 tendrá el valor computado '12pt' (el 120% de 10pt, el valor del padre). Como el valor computado de 'font-size' es heredado, el elemento EM tendrá el valor computado '12pt' también. Si la aplicación del usuario no tiene la fuente de 12pt disponible, el valor real de 'font-size' para H1 y también para EM podría ser, por ejemplo, '11pt'.
Cada propiedad también puede tener un valor especificado como 'inherit', lo cual significa que, para un elemento determinado, la propiedad toma el mismo valor computado que la propiedad del padre del elemento. El valor heredado, que normalmente sólo se usa como un valor de respaldo, puede ser reforzado poniendo explícitamente 'inherit'.
|
Nota de la traducción: En la versión original se aclara que el valor 'inherit' se aplica aún a las propiedades cuyo valor no sería de otro modo heredado. |
En el ejemplo de abajo, las propiedades 'color' y 'background' son definidas para el elemento BODY. En todos los demás elementos, el valor de 'color' será heredado y el fondo será transparente. Si estas reglas son parte de la hoja de estilo del usuario, el texto negro sobre un fondo blanco será forzado en todo el documento.
BODY {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent;
}
La regla '@import' permite a los usuarios importar hojas de estilo desde otras hojas de estilo. Cualquier regla @import debe preceder a todas las reglas especificadas en una hoja de estilo. La palabra clave '@import' debe ir seguida por el URI de la hoja de estilo a incluir. También se permite una cadena; será interpretada como si contuviera url(...) en torno a ella.
Las siguientes líneas son equivalentes en su significado e ilustran ambas sintaxis de '@import' (una con "url()" y otra con sólo una cadena:
@import "mystyle.css";
@import url("mystyle.css");
Para que las aplicaciones del usuario puedan evitar recuperar recursos para los tipos de medios no soportados, los autores pueden especificar reglas @import dependientes de los medios. Estas importaciones condicionales especifican los tipos de medios, separados por comas, después del URI.
Las siguientes reglas tienen el mismo efecto que si la hoja de estilo importada hubiera sido cubierta por una regla @media para el mismo medio, pero puede ahorrar a la AU una transmisión infructuosa.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
En ausencia de cualquier tipo de medios, la importación es incondicional. La especificación de 'all' para el medio tiene el mismo efecto.
Las hojas de estilo pueden tener tres orígenes diferentes: el autor, el usuario y la aplicación del usuario.
Observe que la hoja de estilo predeterminada puede cambiar si las opciones del sistema son modificadas por el usuario (ej., los colores del sistema). Sin embargo, debido a las limitaciones en la implementación interna de las aplicaciones del usuario, puede resultar imposible cambiar los valores en la hoja de estilo predeterminada.
Las hojas de estilo con estos tres orígenes se superpondrán en su acción e interactuarán de acuerdo a la cascada.
La cascada de CSS, asigna una fuerza a cada regla de estilo. Cuando varias reglas se aplican, la de mayor fuerza toma preponderancia.
De forma predefinida, las reglas en las hojas de estilo del autor tienen más fuerza que las reglas en las hojas de estilo del usuario. La preponderancia se revierte, sin embargo, con la reglas "!important". Todas las reglas que el usuario y el autor especifican tienen mayor fuerza que las reglas de la hoja de estilo predeterminada en la AU.
Las hojas de estilo importadas también forman la cascada y su fuerza depende del orden en la importación. Las reglas especificadas en una hoja de estilo dada sustituyen las reglas importadas desde otras hojas de estilo. Las hojas de estilo importadas pueden a su vez importar y sustituir otras hojas de estilo, recursivamente, y se aplican las mismas reglas de preponderancia.
Para encontrar el valor para una combinación elemento/propiedad, las aplicaciones del usuario deben aplicar el siguiente orden de disposición:
Fuera de la definición de "!important" para las declaraciones individuales, esta estrategia le otorga a las hojas de estilo del autor mayor fuerza que a las del lector. Por eso es importante que la aplicación del usuario le brinde al usuario la posibilidad de neutralizar la influencia de determinada hoja de estilo, por ej., a través de un menú desplegable.
CSS intenta establecer un balance de poder entre las hojas de estilo del autor y del usuario. De modo predefinido, las reglas en una hoja de estilo del autor sustituye las de la hoja de estilo del usuario (ver regla 3 de cascada).
Sin embargo, para balancear, una declaración "!important" (las palabras clave "!" e "important" siguiendo a la declaración) toman preponderancia sobre una declaración normal. Ambas hojas de estilo, las del autor y las del usuario, pueden contener declaraciones "!important", y las reglas "!important" del usuario sustituyen a las reglas "!important" del autor. Esta característica mejora la accesibilidad de los documentos dándole a los usuarios con requerimientos especiales (fuentes grandes, combinaciones de colores, etc.) el control sobre la presentación.
Nota. Este es un cambio semántico sobre CSS1. En CSS1, las reglas "!important" del autor tomaban preponderancia sobre las reglas.
La declaración de una propiedad resumida (ej., 'background') como "!important" equivale a declarar todas sus sub-propiedades como "!important".
La primer regla en la hoja de estilo del usuario en el ejemplo siguiente contiene una declaración "!important", que sustituye a la correspondiente declaración en la hoja de estilo del autor. La segunda declaración también resultará vencedora debido a que a sido marcada como "!important". Sin embargo, la tercer regla en la hoja de estilo del usuario no es "!important" y entonces perderá con la segunda regla en la hoja de estilo del autor (que definió el estilo en una propiedad resumida). Asimismo, la tercer regla del autor perderá con la segunda regla del autor debido a que la segunda regla es "!important". Esto muestra que las declaraciones "!important" tienen la misma función también dentro de las hojas de estilo del autor.
/* De la hoja de estilo del usuario */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }
/* De la hoja de estilo del autor */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
La especificidad de un selector se calcula como sigue:
La concatenación de los tres números a-b-c (en un sistema numérico de base mayor) proporciona la especificidad.
Algunos ejemplos:
* {} /* a=0 b=0 c=0 -> especificidad = 0 */
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 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> especificidad = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> especificidad = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> especificidad = 21 */
#x34y {} /* a=1 b=0 c=0 -> especificidad = 100 */
En HTML, los valores del atributo "style" de un elemento son reglas de la hoja de estilo. Estas reglas no tienen selectores, pero para el propósito del paso 3 del algoritmo de cascada, se considera que tienen un selector ID (especificidad: a=1, b=0, c=0). Para el propósito del paso 4, se considera que están después de todas otras reglas.
<HEAD>
<STYLE type="text/css">
#x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>
En el ejemplo de arriba, el color del elemento P sería rojo. Aunque la especificidad es la misma para ambas declaraciones, la declaración en el atributo "style" sustituye a la del elemento STYLE debido a la regla 4 de la cascada.
La AU puede elegir cumplir con las indicaciones de presentación de otras fuentes aparte de las hojas de estilo, por ejemplo, el elemento FONT o el atributo "align" en HTML. Si es así, las indicaciones de presentación fuera de CSS deben ser traducidas a las correspondientes reglas CSS con una especificidad igual a cero. Se asume que las reglas están al comienzo de la hoja de estilo del autor y pueden ser sustituidas por las reglas subsecuentes de la hoja de estilo
Nota. En una fase de transición, esta política facilitará que los atributos estilísticos co-existan con las hojas de estilo.
Nota. En CSS1, a las indicaciones de presentación fuera de CSS se les otorgaba una especificidad igual a 1, no igual a 0. El cambio se debe a la introducción del selector universal, que tiene una especificidad de 0.
|
Copyright © 1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.
Traducción: Carlos Benavidez |