Importante:
Este documento es una traducción al castellano de la revisión del 11 de enero de 1999 de la Recomendación del W3C "Cascading Style Sheets, Level 1", publicada por primera vez el 17 de diciembre de 1996.
Esta traducción fue publicada el 5 de marzo de 2001.
La última revisión de la traducción es del 20 de abril de 2001.
El URL de este documento es http://html.conclase.net/w3c/css1-es.html
El URL del documento original es http://www.w3.org/TR/1999/REC-CSS1-19990111
El URL de la última versión de la Recomendación en inglés es http://www.w3.org/TR/REC-CSS1
La única versión normativa de este documento es la versión original en inglés que se encuentra en el sitio web del W3C. Ninguna parte del presente documento en castellano es normativa aunque se especifique lo contrario.
Véase el Aviso de copyright al final de este documento.
Este documento puede contener errores de traducción.
La traducción ha sido realizada por Juan R. Pozo.
Este documento es una recomendación del W3C. Ha sido revisado por Miembros del W3C (http://www.w3.org) y se ha llegado al acuerdo general de que la especificación es apropiada para su uso. Es un documento estable y puede ser utilizado como material de referencia o citado como referencia normativa en otro documento. El W3C auspicia la difusión general de esta Recomendación.
Puede encontrarse una lista de las recomendaciones actuales y otros documentos técnicos del W3C en http://www.w3.org/TR/.
Este documento es una versión revisada del documento editado por primera vez el 17 de diciembre de 1996. Los cambios realizados desde la primera versión están recogidos en el Apéndice F. La lista de errores conocidos de esta especificación está disponible en http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata.
Este documento especifica el nivel 1 del mecanismo de Hojas de Estilo en Cascada (CSS1). CSS1 es un mecanismo simple de hojas de estilo que permite a autores y lectores asociar estilos (por ejemplo fuentes, colores y espaciado) a documentos HTML. El lenguaje CSS1 es legible y escribible por humanos, y expresa los estilos en terminología común de publicación electrónica.
Una de las características fundamentales de CSS es que las hojas de estilo están en cascada. El autor puede adjuntar una hoja de estilo preferida, mientras que el lector puede tener una hoja de estilo personal que se ajuste a sus limitaciones humanas o tecnológicas. Las reglas para la resolución de conflictos entre las diferentes hojas de estilo se definen en esta especificación.
Esta recomendación es el resultado de las actividades del W3C en el campo de las Hojas de Estilo. Para información complementaria sobre hojas de estilo, véase [1].
A lo largo de esta especificación las comillas simples ('...') se utilizan para encerrar código HTML y CSS.
Diseñar hojas de estilo sencillas es fácil. Sólo hay que saber un poco de HTML y algo de terminología básica de publicación electrónica. Por ejemplo, para hacer que el color de los elementos 'H1' sea azul, basta con decir:
H1 { color: blue }
Este ejemplo es una regla CSS sencilla. Una regla consta de dos partes principales: un selector ('H1') y una declaración ('color:blue'). La declaración tiene dos partes: una propiedad ('color') y un valor ('blue'). Aunque este ejemplo sólo intenta influir en una sola de las propiedades necesarias para representar un documento HTML, por sí mismo ya constituye una hoja de estilo. Combinada con otras hojas de estilo (y una característica fundamental del CSS es que las hojas de estilo pueden combinarse) determinará la presentación final del documento.
El selector es el nexo entre el documento HTML y la hoja de estilo, y todos los tipos de elemento HTML son posibles selectores. Los tipos de elemento HTML se definen en la especificación de HTML [2].
La propiedad 'color' es una de las de alrededor de cincuenta propiedades que determinan la presentación de un documento HTML. En esta especificación se define la lista de propiedades y sus posibles valores.
Los autores de HTML sólo necesitan escribir hojas de estilo si desean sugerir un estilo específico para sus documentos. Cada Agente de Usuario (AU, normalmente un "navegador", "explorador" o "browser") tendrá una hoja de estilo predeterminada que presentará los documentos de una manera razonable – aunque discutiblemente "aburrida". El apéndice A contiene una hoja de estilo de ejemplo para presentar los documentos HTML tal y como se sugiere en la especificación HTML 2.0 [3].
La gramática formal del lenguaje CSS1 se define en el Apéndice B.
Para que una hoja de estilo pueda influir en la presentación, el AU debe saber que existe. La especificación HTML define la forma de enlazar el HTML con las hojas de estilo. Esta sección es por tanto informativa, pero no normativa:
<HTML>
<HEAD>
<TITLE>Título</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://estilo.com/chevere" TITLE="Chévere">
<STYLE TYPE="text/css">
@import url(http://estilo.com/basico);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>El título es azul</H1>
<P STYLE="color: green">Mientras que el párrafo es verde.
</BODY>
</HTML>
Este ejemplo muestra cuatro formas de combinar estilos con HTML: usando el elemento 'LINK' para enlazar una hoja de estilo externa, un elemento 'STYLE' dentro del elemento 'HEAD', una hoja de estilo importada usando la notación CSS '@import', y un atributo 'STYLE' de un elemento contenido en el elemento 'BODY'. Esta última opción mezcla estilo con contenido y carece de las ventajas correspondientes de las hojas de estilo tradicionales.
El elemento 'LINK' hace referencia a hojas de estilo alternativas que el usuario puede seleccionar, mientras que las hojas de estilo importadas se mezclan automáticamente con el resto de la hoja de estilo.
Tradicionalmente, los AAUU no tienen en cuenta las etiquetas desconocidas. Como consecuencia de ello, los AAUU antiguos no tendrán en cuenta el elemento 'STYLE', pero su contenido será tratado como parte del elemento 'BODY', y mostrado como tal. Durante una fase de transición, el contenido del elemento 'STYLE' puede ocultarse utilizando comentarios SGML:
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Como el elemento 'STYLE' está declarado como "CDATA" en el DTD (tal y como se define en [2]), los intérpretes conformes con SGML no considerarán la hoja de estilo del ejemplo como un comentario que no deba tenerse en cuenta.
Para reducir el tamaño de las hojas de estilo, se pueden agrupar selectores en listas separándolos con una coma:
H1, H2, H3 { font-family: helvetica }
Análogamente, las declaraciones también pueden agruparse:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Además, algunas propiedades tienen su propia sintaxis de agrupamiento:
H1 { font: bold 12pt/14pt helvetica }
Que es equivalente al ejemplo previo.
En el primer ejemplo, se establecía que el color de los elementos 'H1' fuera azul. Supongamos que hay un elemento 'H1' que contiene un elemento enfatizado:
<H1>¡El título <EM>es</EM> importante!</H1>
Si no se ha asignado ningún color al elemento 'EM', la palabra "es" enfatizada heredará el color del elemento padre, es decir, también aparecerá en azul. Otras propiedades de estilo se heredan de la misma manera, p.ej., 'font-family' y 'font-size'.
Para establecer una propiedad de un documento a un "valor por defecto", basta con establecer esa propiedad en un elemento del que desciendan todos los elementos visibles. En los documentos HTML, el elemento 'BODY' puede servir para este propósito:
BODY {
color: black;
background: url(textura.gif) white;
}
Esto funcionará incluso si el autor ha omitido la etiqueta 'BODY' (lo cual es legal), ya que el intérprete HTML sobreentenderá la etiqueta ausente. El ejemplo anterior establece que el color del texto es negro y que el fondo es una imagen. El fondo será blanco si la imagen no está disponible. (Véase en la sección 5.3 más información a este respecto.)
Algunas propiedades de estilo no se heredan del elemento padre al elemento hijo. El porqué de esto se comprende intuitivamente en la mayoría de los casos. P.ej., la propiedad 'background' no se hereda, pero el fondo del elemento padre se verá por defecto a través del elemento hijo.
Muchas veces el valor de una propiedad es un porcentaje que se refiere a otra propiedad:
P { font-size: 10pt }
P { line-height: 120% } /* relativo a 'font-size', es decir, 12pt */
Para todas las propiedades que admiten como valor un porcentaje, se define a qué propiedad se refiere éste. En el ejemplo, los elementos hijos de un elemento 'P' heredarán el valor calculado de 'line-height' (es decir, 12pt), no el porcentaje.
Para incrementar el grado de control sobre los elementos, se ha añadido un nuevo elemento a HTML [2]: el atributo 'CLASS'. Se pueden clasificar todos los elementos contenidos en el elemento 'BODY', y en la hoja de estilo se puede hacer referencia a cada clase:
<HTML>
<HEAD>
<TITLE>Titulo</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Verde que te pasas</H1>
</BODY>
</HTML>
Las reglas normales de herencia también se aplican a los elementos clasificados: heredan valores de su padre en la estructura del documento.
Se puede hacer referencia a todos los elementos de la misma clase omitiendo el nombre de la etiqueta en el selector:
.pastoral { color: green } /* todos los elementos de la clase pastoral
(CLASS=pastoral) */
Sólo se puede especificar una clase por selector. Por lo tanto, 'P.pastoral.marino' es un selector no válido en CSS1. (Los selectores contextuales, descritos más adelante, pueden tener una clase por cada selector simple.)
El CSS le da tanta potencia al atributo 'CLASS' que en muchos casos ni siquiera importa a qué elemento HTML se le asigne la clase. Puede conseguirse que un elemento cualquiera emule prácticamente a cualquier otro. No es recomendable aprovecharse de esta característica, ya que así se elimina un nivel de estructura que tiene significado universal (elementos HTML). Una estructura basada en 'CLASS' sólo es útil dentro de un dominio restringido, en el que el significado de una clase se haya establecido de antemano.
HTML [2] también introduce el atributo 'ID', del cual se garantiza que tiene un valor único en todo el documento. Por tanto puede ser de especial importancia como selector en una hoja de estilo, y se puede hacer referencia a él anteponiendo el símbolo '#':
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Texto ancho</P>
En este ejemplo, el primer selector corresponde al elemento 'P' debido al valor de su atributo 'ID'. El segundo selector especifica tanto un tipo de elemento ('H1') como un valor ID, y por tanto no corresponde al elemento 'P'.
Usando el atributo ID como selector se pueden establecer propiedades elemento por elemento. Si bien las hojas de estilo han sido diseñadas para acrecentar la estructura de los documentos, esta característica permitirá a los autores crear documentos que se verán bien en el lienzo sin sacar provecho de los elementos estructurales del HTML. Se recomienda encarecidamente no hacer uso de las hojas de estilo de esta manera.
La herencia permite a los diseñadores CSS escribir menos. En lugar de establecer todas las propiedades de estilo, se pueden crear primero los valores por defecto y después enumerar las excepciones. Para dar a los elementos 'EM' contenidos en un 'H1' un color diferente, se puede especificar lo siguiente:
H1 { color: blue }
EM { color: red }
Cuando esta hoja de estilo tenga efecto, todas las secciones enfatizadas saldrán en rojo, estén dentro o fuera de un 'H1'. Es probable que sólo quisiéramos que salieran en rojo los elementos 'EM' contenidos en un 'H1', y eso se puede conseguir de la siguiente manera:
H1 EM { color: red }
El selector es ahora un patrón de búsqueda en la pila de elementos abiertos. Este tipo de selectores se conoce como selectores contextuales. Los selectores contextuales consisten en varios selectores simples separados por espacios (todos los selectores descritos hasta ahora eran selectores simples). El selector sólo hará referencia a los elementos que se correspondan con el último selector simple (en este caso el elemento 'EM'), y sólo si concuerdan con el patrón de búsqueda. En CSS1 los selectores contextuales sólo buscan relaciones de descendencia, pero pueden introducirse otros tipos de relación (p.ej. padre-hijo) en revisiones posteriores. En el ejemplo anterior, el patrón de búsqueda concuerda si 'EM' es descendiente de 'H1', es decir, si 'EM' está en el interior de un elemento 'H1'.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Aquí, el primer selector corresponde a elementos 'LI' que tengan al menos un ascendiente 'UL'. El segundo selector corresponde a un subconjunto del primero, es decir, elementos 'LI' que tengan al menos dos ascendientes 'UL'. El conflicto se resuelve a favor del segundo selector por ser más específico, debido a que el patrón de búsqueda es más largo. Véase el orden de cascada (sección 3.2) para más información a este respeto.
Los selectores contextuales pueden buscar tipos de elementos, atributos CLASS, atributos ID o combinaciones de éstos:
DIV P { font: small sans-serif }
.rojizo H1 { color: red }
#x78y CODE { background: blue }
DIV.notaalmargen H1 { font-size: large }
El primer selector corresponde a todos los elementos 'P' que tengan a un 'DIV' entre sus ascendientes. El segundo selector corresponde a todos los elementos 'H1' que tengan un ascendiente de clase 'rojizo'. El tercer selector corresponde a todos los elementos 'CODE' que sean descendientes del elemento de 'ID=x78y'. El cuarto selector corresponde a todos los elementos 'H1' que tengan un ascendiente 'DIV' de clase 'notaalmargen'.
Los selectores contextuales también se pueden agrupar:
H1 B, H2 B, H1 EM, H2 EM { color: red }
que es equivalente a:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Los comentarios literales en hojas de estilo CSS son similares a los del lenguaje de programación C [7]:
EM { color: red } /* ¡¡rojo, pero que muy rojo!! */
No se pueden anidar comentarios. Para un analizador CSS1, un comentario equivale a espacio en blanco.
En CSS1, el estilo normalmente se asocia con un elemento según la posición de éste en la estructura del elemento. Este modelo simple es suficiente para una amplia variedad de estilos, pero no cubre algunos efectos comunes. El concepto de pseudo-clases y pseudo-elementos extiende los modos de referencia de CSS1 para permitir que informaciones externas tengan influencia a la hora de dar formato.
Las pseudo-clases y los pseudo-elementos pueden usarse en CSS como selectores, pero no existen en el código fuente HTML, sino que son "insertados" por el AU bajo ciertas condiciones para que las hojas de estilo puedan hacer referencia a ellos. Se hace referencia a ellos como "clases" y como "elementos" ya que esta es una manera conveniente de describir su comportamiento. Más concretamente, su comportamiento se define mediante una secuencia ficticia de etiquetas.
Los pseudo-elementos se utilizan para hacer referencia a sub-partes de elementos, mientras que las pseudo-clases permiten a las hojas de estilo diferenciar entre distintos tipos de elementos.
Los Agentes de Usuario suelen representar los vínculos aún no visitados de manera distinta a los ya visitados. En CSS1, se puede actuar sobre esto a través de pseudo-clases del elemento 'A':
A:link { color: red } /* vínculos no visitados */
A:visited { color: blue } /* vínculos visitados */
A:active { color: lime } /* vínculos activos */
Todos los elementos 'A' que tengan un atributo 'HREF' serán colocados en uno y sólo uno de estos grupos (es decir, los vínculos destino no se ven afectados). Los AAUU pueden elegir mover un elemento de 'visited' a 'link' al cabo de un cierto tiempo. Un vínculo 'active' es uno que está siendo seleccionado en ese momento por el lector (p.ej., haciendo clic con un botón del ratón).
Una pseudo-clase de vínculo se trata como si la clase se hubiera insertado manualmente. No es necesario que un AU reformatee un documento mostrado actualmente a causa de transiciones entre pseudo-clases de vínculo. P.ej., una hoja de estilo puede especificar legalmente que el 'font-size' de un vínculo 'active' debería ser mayor que el de un vínculo 'visited', pero no es necesario que el AU reformatee dinámicamente el documento cuando el lector seleccione el vínculo 'visited'.
Los selectores de pseudo-clases no hacen referencia a clases normales, y viceversa. Por tanto, la regla de estilo del ejemplo siguiente no tendrá ninguna influencia:
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
En CSS1, las pseudo-clases de vínculo no tendrán ningún efecto en elementos que no sean 'A'. Por lo tanto, el tipo de elemento puede omitirse del selector:
A:link { color: red }
:link { color: red }
Estos dos selectores seleccionarán en CSS1 los mismos elementos.
Los nombres de pseudo-clases no requieren coincidencia de mayúsculas y minúsculas.
Las pseudo-clases pueden utilizarse en selectores contextuales:
A:link IMG { border: solid blue }
Asimismo, las pseudo-clases pueden combinarse con las clases normales:
A.external:visited { color: blue }
<A CLASS=external HREF="http://fue.ra/">vínculo externo</A>
Si el vínculo de este ejemplo ha sido visitado, será mostrado en azul. Obsérvese que los nombres de las clases normales preceden a las pseudo-clases en el selector.
Algunos efectos tipográficos comunes están asociados no con elementos estructurales, sino más bien con elementos tipográficos resultantes del formato del documento en el lienzo. En CSS1 se puede hacer referencia a dos de estos elementos tipográficos a través de pseudo-elementos: la primera línea de un elemento, y la primera letra.
CSS1 básico: Los AAUU pueden no tener en cuenta las reglas que contegan ':first-line' o ':first-letter' en el selector, o, alternativamente, soportar sólo parte de las propiedades de estos pseudo-elementos. (Véase la sección 7.)
El pseudo-elemento 'first-line' se utiliza para aplicar estilos especiales a la primera línea de un elemento una vez que se ha dado formato a éste en el lienzo:
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>La primera línea de un artículo del Newsweek.</P>
En un AU de modo texto, esto podría formatearse del siguiente modo:
LA PRIMERA LÍNEA DE UN artículo del Newsweek.
La secuencia ficticia de etiquetas de este ejemplo es la siguiente:
<P> <P:first-line> La primera línea de un </P:first-line> artículo del Newsweek. </P>
La etiqueta final de 'first-line' se inserta al final de la primera línea que resulta al formatear en el lienzo.
El pseudo-elemento 'first-line' sólo puede asociarse a elementos en bloque.
El pseudo-elemento 'first-line' es similar a un elemento en línea, pero con ciertas restricciones. Solamente las siguientes propiedades se aplican al elemento 'first-line': propiedades de fuente (5.2), propiedades de color y fondo (5.3), 'word-spacing' (5.4.1), 'letter-spacing' (5.4.2), 'text-decoration' (5.4.3), 'vertical-align' (5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), 'clear' (5.5.26).
El pseudo-elemento 'first-letter' se utiliza para letras capitales, que es un efecto tipográfico muy común. Es similar a un elemento en línea si su propiedad 'float' es 'none', de otro modo es similar a un elemento flotante. Estas son las propiedades que se aplican a un pseudo-elemento 'first-letter': propiedades de fuente (5.2), propiedades de color y fondo (5.3), 'text-decoration' (5.4.3), 'vertical-align' (sólo si 'float' es 'none', 5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), propiedades de margen (5.5.1-5.5.5), propiedades de relleno (5.5.6-5.5.10), propiedades de borde (5.5.11-5.5.22), 'float' (5.5.25), 'clear' (5.5.26).
Así es como se consigue que una letra capital en texto se extienda a lo largo de dos líneas:
<HTML>
<HEAD>
<TITLE>Titulo</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>Las primeras</SPAN> palabras de un artículo de The Economist.</P>
</BODY>
</HTML>
Si un AU de modo texto soporta el pseudo-elemento 'first-letter' (lo más seguro es que no lo soporte) el código anterior podría formatearse del siguiente modo:
| AS PRIMERAS |__palabras de un artículo de The Economist.
La secuencia ficticia de etiquetas es la siguiente:
<P> <SPAN> <P:first-letter> L </P:first-letter>as primeras </SPAN> palabras de un artículo de The Economist. </P>
Obsérvese que las etiquetas del pseudo-elemento 'first-letter' están contiguas a su contenido (es decir, al carácter inicial), mientras que la etiqueta inicial del pseudo-elemento 'first-line' se inserta justo a continuación de la etiqueta inicial del elemento al cual se asocia.
El AU define qué caracteres están contenidos en el elemento 'first-letter'. Normalmente deben incluirse las comillas que precedan a la primera letra:
|| |\ /|ás vale | \/ |pájaro | |en mano | |que ciento volando", dice el refrán.
Cuando el párrafo comienza con otro signo de puntuación (p.ej. paréntesis o puntos suspensivos) u otros caracteres que normalmente no se consideren como letras (p.ej., dígitos y símbolos matemáticos), normalmente no se tiene en cuenta el pseudo-elemento 'first-letter'.
Algunos idiomas pueden tener reglas específicas sobre cómo tratar ciertas combinaciones de letras. En neerlandés, por ejemplo, si la combinación de letras "ij" aparece al comienzo de una palabra, deberían considerarse ambas contenidas en el pseudo-elemento 'first-letter'.
El pseudo-elemento 'first-letter' sólo puede ser asociado a elementos en bloque.
En un selector contextual, los pseudo-elementos sólo están permitidos al final del selector:
BODY P:first-letter { color: purple }
En los selectores los pseudo-elementos pueden combinarse con clases:
P.inicial:first-letter { color: red }
<P CLASS=inicial>Primer párrafo</A>
En este ejemplo la primera letra de todos los elementos 'P' con 'CLASS=inicial' aparecería en rojo. Cuando se combinan con clases o con pseudo-clases, los pseudo-elementos deben situarse al final del selector. Sólo puede especificarse un pseudo-elemento por selector.
Pueden combinarse varios pseudo-elementos:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Un texto que ocupará dos líneas</P>
En este ejemplo, la primera letra de cada elemento 'P' sería verde y tendría un tamaño de 24pt. El resto de la línea (resultante del formateo en el lienzo) sería azul, mientras que el resto del párrafo sería rojo. Suponiendo que haya un salto de línea antes de la palabra "ocupará", la secuencia ficticia de etiquetas será:
<P> <P:first-line> <P:first-letter> U </P:first-letter>n texto que </P:first-line> ocupará dos líneas </P>
Obsérvese que el elemento 'first-letter' está dentro del elemento 'first-line'. Las propiedades establecidas en 'first-line' serán heredadas por 'first-letter', pero son anuladas si las mismas propiedades se establecen en 'first-letter'.
Si un pseudo-elemento rompe un elemento real, deben regenerarse en la secuencia ficticia las etiquetas adicionales necesarias. Por ejemplo, si un elemento 'SPAN' se extiende a través de una etiqueta </P:first-line> debe regenerarse un par de etiquetas SPAN final e inicial, y la secuencia ficticia de etiquetas se convierte en:
<P> <P:first-line> <SPAN> Este texto está dentro </SPAN> </P:first-line> <SPAN> de un elemento span largo </SPAN>
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.
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marino);
H1 { color: red } /* prevalece sobre las hojas importadas */
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.
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.
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:
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.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.
CSS1 asume un modelo de formato simple basado en cuadros (boxes), en el que cada elemento formateado da lugar a uno o más cuadros rectangulares. (Los elementos que tienen un valor de 'display' igual a 'none' no son formateados, y por tanto no dan lugar a un cuadro.) Todos los cuadros tienen un área central de contenido, con áreas opcionales a su alrededor de relleno, bordes y márgenes.
_________________________________________
| |
| margen (transparente) |
| __________________________________ |
| | | |
| | borde | |
| | ____________________________ | |
| | | | | |
| | | relleno | | |
| | | ______________________ | | |
| | | | | | | |
| | | | contenido | | | |
| | | |______________________| | | |
| | |____________________________| | |
| |__________________________________| |
|________________________________________|
| anchura del elemento |
| anchura del cuadro |
El tamaño de margen, relleno y borde se establece con las propiedades de margen (5.5.1-5.5.5), de relleno (5.5.6-5.5.10), y de borde (5.5.11-5.5.22) respectivamente. El área de relleno usa el mismo fondo que el elemento en sí (establecido con las propiedades de fondo (5.3.2-5.3.7)). El color y estilo del borde se establecen con las propiedades de borde. Los márgenes son siempre transparentes, de manera que el elemento padre se verá a través de ellos.
El tamaño del cuadro es la suma de la anchura del elemento (es decir, el texto o imagen formateados) y las áreas de relleno, bordes y márgenes.
Desde el punto de vista del formateador hay dos tipos principales de elementos: en bloque y en línea.
Los elementos con un valor de 'display' igual a 'block' o a 'list-item' son elementos en bloque. Asimismo, los elementos flotantes (elementos con un valor de 'float' distinto a 'none') se consideran como elementos en bloque.
El siguiente ejemplo muestra cómo los márgenes y el relleno formatean un elemento 'UL' con dos hijos. Para simplificar el diagrama se ha prescindido de los bordes. Por otra parte, las "constantes" literales del ejemplo no son sintaxis legal de CSS1, pero es un modo conveniente de relacionar los valores de la hoja de estilo con la figura.
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* así el texto es blanco sobre azul */
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>1er elemento de la lista
<LI>2o elemento de la lista
</UL>
_______________________________________________________ | | | A margen del UL (transparente) | | _______________________________________________ | | D | | B | | | E relleno del UL (rojo) | | | | _______________________________________ | | | | H | | F | | | | | a margen del LI (transparente, | | | | | | se ve el rojo a través suyo) | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e relleno de LI (azul) | | | | | | | | | | | | | | | | h 1er elemento de la lista f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | max(a, c) | | | <- nótese | | | _______________________________ | | | el max | | | | | | | | | | | d | e relleno del LI (azul) | | | | | | | | | | | | | | | | h 2o elemento de la lista f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | c margen del LI (transparente, | | | | | | se ve el rojo a través suyo) | | | | | |_______________________________________| | | | | | | | | G | | | |_______________________________________________| | | | | C | |_______________________________________________________|
Técnicamente, las propiedades de relleno y margen no se heredan. Pero como muestra el ejemplo, la colocación de un elemento es relativa a los ascendientes y hermanos, de modo que las propiedades de relleno y margen de estos elementos tienen efecto en sus hijos.
Si hubiera habido bordes en el ejemplo anterior, habrían aparecido entre el relleno y los márgenes.
El siguiente diagrama introduce cierta terminología útil:
--------------- <-- parte superior
margen superior
---------------
borde superior
---------------
relleno superior
+-------------+ <-- parte superior interna
| | | | | | | |
|-margen-|-borde--|-relleno|--contenido--|-relleno-|--borde--|--margen-|
| izq. | izq. | izq. | | derecho | derecho | derecho |
| | | | | | | |
+-------------+ <-- parte inferior interna
^ ^ ^ ^
lado lado interior lado interior lado
exterior izquierdo derecho exterior
izquierdo relleno inferior derecho
---------------
borde inferior
---------------
margen inferior
--------------- <-- parte inferior
El lado exterior izquierdo es el lado de un elemento incluido su relleno, su borde y su margen. El lado interior izquierdo es el lado del contenido únicamente, por dentro de relleno, borde y margen. Lo mismo para los lados derechos. La parte superior es la parte superior del elemento incluyendo relleno, borde y margen; sólo se define para elementos en línea y elementos flotantes, no para elementos en bloque no flotantes. La parte superior interna es la parte superior del contenido, por dentro de relleno, borde y margen. La parte inferior es la parte inferior del elemento, por fuera de relleno, borde y margen. Sólo está definida para elementos en línea y flotantes, no para elementos en bloque no flotantes. La parte inferior interna es la parte inferior del elemento, por dentro de relleno, borde y margen.
La anchura de un elemento es la anchura del contenido, es decir, la distancia entre el lado interior izquierdo y el lado interior derecho. La altura es la altura del contenido, es decir, la distancia entre la parte inferior interna y la parte superior interna.
La anchura del margen de los elementos en bloque no flotantes especifica la distancia mínima a los bordes a los cuadros adyacentes. Dos o más márgenes verticales adyacentes (es decir, sin borde, relleno ni contenido entre ellos) se colapsan para usar el máximo de los dos valores de margen. En la mayoría de los casos, después de colapsarse los márgenes verticales, el resultado es visualmente más agradable y más parecido a lo que espera el diseñador. En el ejemplo anterior, los márgenes entre los dos elementos 'LI' se colapsan usando el máximo entre el margen inferior ('margin-bottom') del primer elemento 'LI' y el margen superior ('margin-top') del segundo elemento 'LI'. Análogamente, si el relleno entre el elemento 'UL' y el primer elemento 'LI' (la constante "E") hubiera sido cero, los márgenes del elemento 'UL' y del primer elemento 'LI' habrían sido colapsados.
En el caso de márgenes negativos, el máximo absoluto de los márgenes negativos adyacentes se resta del máximo de los márgenes positivos adyacentes. Si no hay márgenes positivos, el máximo absoluto de los márgenes adyacentes negativos se resta de cero.
La posición y tamaño horizontales de un elemento en bloque no flotante quedan determinados por siete propiedades: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' y 'margin-right'. La anchura de estas siete propiedades es siempre igual a la anchura del elemento padre.
Por defecto, la anchura ('width') de un elemento es 'auto'. Si el elemento no es un elemento reemplazado, esto significa que el AU calcula la anchura de modo que la suma de las siete propiedades mencionadas en el párrafo precedente sea igual a la anchura del padre. Si el elemento es un elemento reemplazado, un valor 'auto' de 'width' se reemplaza automáticamente por la anchura intrínseca del elemento.
Tres de las siete propiedades pueden ser establecidas a 'auto': 'margin-left', 'width' y 'margin-right'. Para los elementos reemplazados, un valor de 'width' igual a 'auto' se reemplaza por la anchura intrínseca, de modo que para ellos sólo puede haber dos valores 'auto'.
El 'width' tiene un valor mínimo no negativo definido por el AU (que puede variar de elemento a elemento e incluso depender de otras propiedades). Si 'width' cae por debajo de este límite, ya sea porque se ha especificado así explícitamente, o porque valiendo 'auto' las reglas que se describen más adelante lo hacen demasiado pequeño, el valor será reemplazado por el valor mínimo.
Si exactamente una de las propiedades 'margin-left', 'width' y 'margin-right' es 'auto', el AU asignará a esa propiedad un valor que haga que la suma de las siete sea igual a la anchura del padre.
Si ninguna de las propiedades vale 'auto', se asignará el valor 'auto' al 'margin-right'.
Si más de una de las tres vale 'auto', y una de ellas es 'width', entonces las otras ('margin-left' y/o 'margin-right') serán puestas a cero, y 'width' recibirá el valor necesario para que la suma de las siete sea igual a la anchura del padre.
De otro modo, si tanto 'margin-left' como 'margin-right' son 'auto', se les asignará el mismo valor. Esto centrará al elemento dentro de su padre.
Si se establece 'auto' como el valor de una de las siete propiedades de un elemento en línea o flotante, se tratará como si se hubiera establecido a cero.
A diferencia de los márgenes verticales, los márgenes horizontales no se colapsan.
Los elementos con un valor de la propiedad 'display' igual a 'list-item' se formatean como elementos en bloque, pero precedidos por un marcador de objeto de lista. El tipo de marcador se determina por la propiedad list-style. El marcador se coloca de acuerdo con el valor de la propiedad list-style:
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>el primer elemento va primero
<LI>el segundo elemento va después
</UL>
<UL CLASS=COMPACT>
<LI>el primer elemento va primero
<LI>el segundo elemento va después
</UL>
Este ejemplo puede formatearse como sigue:
* el primer elemento va primero * el segundo elemento va después * el primer elemento va primero * el segundo elemento va después
Si el texto fuera de derecha a izquierda, los marcadores habrían estado en el lado derecho del cuadro.
Por medio de la propiedad 'float', puede declararse que un elemento esté fuera del flujo normal de los elementos, formateándose entonces como un elemento en bloque. Por ejemplo, haciendo la propiedad 'float' de una imagen igual a 'left', la imagen se mueve hacia la izquierda hasta que se alcanza el margen, relleno o borde de otro elemento en bloque. El flujo normal continuará por el lado derecho. Los márgenes, bordes y relleno del propio elemento serán respetados, y los márgenes nunca se colapsarán con los márgenes de elementos adyacentes.
Un elemento es posicionado de acuerdo con las siguientes restricciones (véase la sección 4.1 para una explicación de los términos):
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
Texto de ejemplo sin más...
</BODY>
Este ejemplo podría formatearse como sigue:
________________________________________ | | max(margen de BODY, margin de P) | m ______________________________ | a | | Texto de ejemplo | r | m | márgenes sin más propósito | g | a | _____ que mostrar cómo se | e | r | | | mueven los elementos | n | g | | IMG | flotantes a la | | e | | | izquierda del | d | n | |_____| elemento padre al | e | | mismo tiempo que se | | d | de IMG respetan sus márgenes, | B | e | bordes y rellenos. | O | |Obsérvese cómo se colapsan los | D | P |márgenes verticales de los | Y | |elementos en bloque no flotantes.
Obsérvese que el margen del elemento 'P' está alrededor del elemento 'IMG' flotante.
Hay dos situaciones en que un elemento flotante puede superponerse con los márgenes, bordes y rellenos de otros elementos:
Los elementos que no son formateados como elementos en bloque son elementos en línea. Un elemento en línea puede compartir el espacio de una línea con otros elementos. Considérese este ejemplo:
<P>Aquí <STRONG>aparecen</STRONG> varias <EM>palabras enfatizadas</EM>.</P>
El elemento 'P' es normalmente un elemento en bloque, mientras que los elementos 'STRONG' y 'EM' son elementos en línea. Si el elemento 'P' es lo suficientemente ancho como para que se formatee todo el elemento en una sola línea, habrá dos elementos en línea en esa línea:
Aquí aparecen varias palabras enfatizadas.
Si no hay suficiente espacio en una sola línea, un elemento en línea será partido en varios cuadros:
<P>Aquí aparecen <EM>varias palabras</EM> enfatizadas.</P>
Este ejemplo podría formatearse como sigue:
Aquí aparecen varias palabras enfatizadas
Si el elemento tiene márgenes, bordes, rellenos u otras decoraciones asociadas, éstos no tendrán efecto allí donde el elemento está partido:
------
Aquí aparecen |varias
------
--------
palabras| enfatizadas
--------
(Esta "figura" esta ligeramente distorsionada debido al uso de gráficos ASCII.) Véase en la sección 4.4 una descripción de cómo calcular la altura de las líneas.
Un elemento reemplazado es un elemento que es reemplazado por un contenido al que se apunta desde el elemento. P.ej., en HTML, el elemento 'IMG' es reemplazado por la imagen a la que apunta el atributo 'SRC'. Se puede suponer que los elementos reemplazados van con sus propias dimensiones intrínsecas. Si el valor de la propiedad 'width' es 'auto', se usará la anchura intrínseca como anchura del elemento. Si se especifica un valor diferente de 'auto' en la hoja de estilo, se usará este valor, y el elemento reemplazado se escalará como corresponda (el método de escalado dependerá del tipo de medio). La propiedad 'height' se usa de la misma manera.
Los elementos reemplazados pueden ser en bloque o en línea.
Todos los elementos tienen una propiedad 'line-height' (altura de línea) que, en principio, da la altura total de una línea de texto. Para llegar a esa altura de línea, se añade espacio por encima y por debajo del texto de la línea. Por ejemplo, si el texto tiene 12pt de alto y el 'line-height' está establecido en '14pt', se añade un espacio de 2pt, a saber, 1pt por encima y 1pt por debajo de la línea. Los elementos vacíos influyen en este cálculo igual que lo hacen los elementos con contenido.
La diferencia entre el tamaño de la fuente y la altura de la línea se llama interlineado. A la mitad del interlineado se le denomina semi-interlineado. Después del formato, cada línea formará un cuadro de línea rectangular.
Si una línea de texto contiene secciones con valores diferentes de 'line-height' (porque haya elementos en línea dentro de la línea), entonces cada una de esas secciones tiene su propio semi-interlineado por encima y por debajo. La altura del cuadro de línea va desde la parte superior de la sección más alta hasta la parte inferior de la sección más baja. Obsérvese que la parte superior y la parte inferior no corresponden necesariamente al elemento más alto, ya que los elementos pueden posicionarse verticalmente por medio de la propiedad 'vertical-align'. Para formar un párrafo, cada cuadro de línea se inserta inmediatamente debajo de la línea anterior.
Obsérvese que los márgenes, bordes y rellenos por encima y por debajo de elementos en línea no reemplazados no influyen en la altura de la línea. En otras palabras: si el 'line-height' es demasiado pequeño para el relleno o borde elegidos, se superpondrá con el texto de otras líneas.
Los elementos reemplazados de la línea (p.ej., imágenes) pueden agrandar el cuadro de línea si la parte superior del elemento reemplazado (es decir, incluyendo relleno, borde y margen) está por encima de la sección de texto más alta, o si su parte inferior está por debajo de la sección más baja.
En el caso normal en que sólo haya un valor de 'line-height' para todo el párrafo y no haya imágenes altas, la definición recién dada asegura que las líneas de base de líneas sucesivas estarán separadas exactamente por un 'line-height'. Esto es importante cuando deben alinearse columnas de texto con fuentes distintas, por ejemplo en una tabla.
Obsérvese que esto no imposibilita que los textos de dos líneas adyacentes se superpongan. El 'line-height' puede ser menor que la altura del texto, en cuyo caso el interlineado será negativo. Esto es útil si se sabe que el texto no contiene descendentes (p.ej. porque sólo contiene letras mayúsculas), ya que entonces se pueden acercar más las líneas.
El lienzo es la parte de la superficie de dibujo del AU en que se representan los documentos. Ningún elemento estructural del documento corresponde al lienzo, lo cual plantea dos cuestiones a la hora de formatear un documento:
Una respuesta razonable a la primera pregunta es que la anchura inicial del lienzo se base en el tamaño de la ventana, pero CSS1 deja esta cuestión a merced del AU. También es razonable esperar que el AU cambie la anchura del lienzo cuando se cambie el tamaño de la ventana, pero esto también está fuera del alcance de CSS1.
Las extensiones HTML han sentado un precedente para la segunda cuestión: los atributos del elemento 'BODY' establecen el fondo de todo el lienzo. Con el fin de tener en cuenta las suposiciones de los diseñadores, CSS1 introduce una regla especial para averiguar el fondo del lienzo:
Si el valor del 'background' del elemento 'HTML' es distinto a 'transparent', entonces úsese el fondo especificado. Si no, úsese el valor del 'background' del elemento 'BODY'. Si el valor resultante es 'transparent', la representación queda indefinida.
Esta regla permite lo siguiente:
<HTML STYLE="background: url(http://style.com/marmol.png)"> <BODY STYLE="background: red">
En este ejemplo, el lienzo será cubierto con "marmol". El fondo del elemento 'BODY' (que puede cubrir el lienzo completamente o no) será rojo.
Hasta que haya otros medios disponibles para hacer referencia al lienzo, se recomienda que las propiedades del lienzo se establezcan en el elemento 'BODY'.
Las propiedades y valores de CSS1 no pueden describir el comportamiento del elemento 'BR'. En HTML, el elemento 'BR' especifica un salto de línea entre palabras. En efecto, el elemento se reemplaza por un salto de línea. Versiones futuras de CSS podrían manejar contenido añadido y reemplazado, pero los formateadores CSS1 deben tratar los 'BR' de forma especial.
Las hojas de estilo influyen sobre la presentación de los documentos asignando valores a propiedades de estilo. Esta sección enumera las propiedades de estilo definidas y la lista correspondiente de sus posibles valores en CSS1.
En el texto que sigue, los valores permitidos para cada propiedad se enumeran con una sintaxis similar a la siguiente:
Valor: N | NW | NE
Valor: [ <longitud> | thick | thin ]{1,4}
Valor: [<nombre-de-familia> ,]* <nombre-de-familia>
Valor: <url> ? <color> [ / <color> ]?
Valor: <url> || <color>
Los valores entre "<" y ">" dan un tipo de valor. Los tipos más comunes son <longitud>, <porcentaje>, <url>, <número> y <color>; éstos se describen en la sección 6. Los tipos más especializados (p.ej., <familia-de-fuentes> y <estilo-de-borde>) se describen bajo la propiedad correspondiente.
Otras palabras son palabras clave que deben aparecer literalmente, sin comillas. La barra inclinada (/) y la coma (,) también deben aparecer literalmente.
Cuando aparezcan varias cosas yuxtapuestas, deben incluirse todas ellas en el orden especificado. Una barra (|) separa alternativas: debe especificarse una de ellas. Una barra doble (A || B) significa que debe especificarse A, B o ambas, en cualquier orden. Los corchetes ([]) se usan para agrupar. La yuxtaposición es más fuerte que la doble barra, y la doble barra es más fuerte que la barra. Así, "a b | c || d e" es equivalente a "[ a b ] | [ c || [ d e ]]".
Cada tipo, palabra clave, o grupo entre corchetes, puede ir seguido por uno de los siguientes modificadores:
El establecimiento de propiedades de fuente será uno de los usos más frecuente de las hojas de estilo. Desgraciadamente, no existe una taxonomía bien definida y universalmente aceptada para clasificar las fuentes, y algunos términos que se aplican a una familia tipográfica pueden no ser apropiados para otras. P.ej., para referirse a texto inclinado se utiliza normalmente el término 'italic', pero también pueden utilizarse otros términos como Oblique, Slanted, Incline, Cursive o Kursiv. Por tanto, no es un problema sencillo aplicar propiedades típicas de selección de fuentes a una fuente específica.
CSS1 define las propiedades 'font-family', 'font-style', 'font-variant' y 'font-weight', 'font-size', 'font'.
Al no haber una taxonomía universal aceptada para las propiedades de las fuentes, el emparejamiento entre propiedades y fuentes tipográficas debe hacerse con cuidado. Las propiedades se emparejan en un orden bien definido para asegurarse de que los resultados de este proceso de emparejamiento sean tan consistentes entre AAUU como sea posible (suponiendo que se ponga a la disposición de todos ellos la misma biblioteca de fuentes tipográficas).
(El algoritmo recién descrito puede optimizarse para evitar tener que comprobar las propiedades CSS1 con cada carácter.)
Las reglas de emparejamiento de cada propiedad mencionada en el paso (2) son las siguientes:
Valor: [[<nombre-de-familia> | <familia-genérica>],]* [<nombre-de-familia> | <familia-genérica>]
Inicial: depende del AU
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: N/A
Esta propiedad es una lista de nombres de familias tipográficas y/o nombres de familias genéricas ordenadas por prioridad. A diferencia de la mayoría de las demás propiedades CSS1, los valores se separan por comas para indicar que son alternativos:
BODY { font-family: gill, helvetica, sans-serif }
Hay dos tipos de valores en la lista:
Los nombres de fuentes que contengan espacios en blanco deberían entrecomillarse:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
Si se omiten las comillas, no se tienen en cuenta los caracteres de espacio que haya antes y después del nombre de la fuente, y cualquier secuencia de caracteres de espacio dentro del nombre de la fuente se convierte a un único espacio.
Valor: normal | italic | oblique
Inicial: normal
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: N/A
La propiedad 'font-style' elige entre letra normal (a veces llamada "romana" o "recta"), itálica y oblicua dentro de una familia tipográfica.
Un valor 'normal' selecciona una fuente clasificada como 'normal' en la base de datos de fuentes del AU, mientras que 'oblique' selecciona una fuente marcada como 'oblique'. Un valor 'italic' selecciona una fuente que está marcada como 'italic', o, si ésta no está disponible, una marcada como 'oblique'.
La fuente marcada como 'oblique' en la base de datos de fuentes del AU en realidad puede haber sido generada electrónicamente inclinando una fuente normal.
Las fuentes que incluyan las palabras Oblique, Slanted o Incline en su nombre estarán normalmente marcadas como 'oblique' en la base de datos de fuentes del AU. Las fuentes que incluyan las palabras Italic, Cursive o Kursiv en su nombre estarán normalmente marcadas como 'italic'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
En este ejemplo, el texto enfatizado contenido en un título 'H1' aparecerá con letra normal.
Valor: normal | small-caps
Inicial: normal
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: N/A
Otro tipo de variación dentro de una familia tipográfica son las versalitas. En una fuente de letras versalitas las letras minúsculas son similares a las mayúsculas, pero de menor tamaño y con proporciones ligeramente distintas. La propiedad 'font-variant' selecciona esa fuente.
Un valor 'normal' selecciona una fuente que no es de letras versalitas; 'small-caps' selecciona una fuente de versalitas. En CSS1 es suficiente (pero no necesario) que la fuente de versalitas se cree tomando una fuente normal y reemplazando las letras minúsculas por caracteres de caja alta escalados. Como último recurso, se podrán utilizar letras mayúsculas como sustitutas de una fuente de versalitas.
El siguiente ejemplo produce un elemento 'H3' en versalitas, con palabras enfatizadas en versalitas oblicuas:
H3 { font-variant: small-caps }
EM { font-style: oblique }
Puede haber otras variantes en la familia tipográfica, como por ejemplo fuentes con numerales de estilo antiguo, numerales versalitas, letras condensadas o expandidas, etc. CSS1 no tiene propiedades para seleccionar éstas.
CSS1 básico: en el caso de que esta propiedad provoque que el texto se transforme a mayúsculas, se aplicarán las mismas consideraciones que para la propiedad 'text-transform'.
Valor: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Inicial: normal
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: N/A
La propiedad 'font-weight' selecciona el peso de la fuente. Los valores '100' a '900' forman una secuencia ordenada, en la que cada número indica un peso que es al menos tan pesado como su predecesor. La palabra clave 'normal' es sinónima de '400', y 'bold' (negrita) es sinónima de '700'. Se ha demostrado que otras palabras clave distintas de 'normal' y 'bold' se confunden a menudo con nombres de fuentes, y por ello se ha elegido una escala numérica para la lista de 9 valores.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
Los valores 'bolder' y 'lighter' seleccionan pesos de fuente que son relativos al peso heredado del padre:
STRONG { font-weight: bolder }
Los elementos hijos heredan el peso resultante, no el valor de la palabra clave.
Las fuentes (los datos de las fuentes) tienen normalmente una o más propiedades cuyos valores son nombres que describen el "peso" de una fuente. No hay un significado universal aceptado para estos nombres de pesos. Su papel principal es distinguir tipos de letra de distinto peso dentro de la misma familia tipográfica. El uso de unas familias a otras es bastante variable; por ejemplo, una fuente que uno podría pensar que es negrita (bold) podría ser descrita como Regular, Roman, Book, Medium, Semi- o DemiBold, Bold o Black, dependiendo de lo gruesa que sea la letra "normal" de la fuente dentro del diseño. Al no haber un uso estándar de nombres, los valores de la propiedad de peso en CSS1 se dan según una escala numérica en la que el valor '400' ('normal') se corresponde con la fuente de texto "normal" de esa familia. El nombre de peso asociado a esa fuente normalmente será Book, Regular, Roman, Normal o a veces Medium.
Con la asociación de valores de peso numéricos a las otras denominaciones de pesos dentro de cada familia sólo se pretende preservar el orden de grosores dentro de esa familia. Sin embargo, la siguiente heurística nos dice cómo se hace la asignación en los casos típicos:
Los siguientes dos ejemplos ilustran el proceso. Supónganse cuatro pesos en la familia "Ejemplo 1", de más ligero a más pesado: Regular, Medium, Bold, Heavy. Y supónganse seis pesos en la familia "Ejemplo 2": Book, Medium, Bold, Heavy, Black, ExtraBlack. Obsérvese cómo en el segundo ejemplo se ha decidido dejar "Ejemplo 2 Extrablack" sin asignar.
Fuentes disponibles | Asignaciones | Relleno de huecos ----------------------+---------------+------------------- "Example1 Regular" | 400 | 100, 200, 300 "Example1 Medium" | 500 | "Example1 Bold" | 700 | 600 "Example1 Heavy" | 800 | 900 Fuentes disponibles | Asignaciones | Relleno de huecos ----------------------+---------------+------------------- "Example2 Book" | 400 | 100, 200, 300 "Example2 Medium" | 500 | "Example2 Bold" | 700 | 600 "Example2 Heavy" | 800 | "Example2 Black" | 900 | "Example2 ExtraBlack" | (none) |
Ya que la intención de las palabras clave 'bolder' y 'lighter' es hacer más pesada o más ligera la fuente dentro de la familia, y teniendo en cuenta que una familia puede no tener fuentes asignadas a todos los valores simbólicos de peso, el emparejamiento de 'bolder' se hace con la siguiente fuente más pesada disponible en el cliente dentro de la misma familia, y el emparejamiento de 'lighter' se hace con la siguiente fuente más ligera dentro de la familia. Para ser más precisos, el significado de las palabras clave relativas 'bolder' y 'lighter' es el siguiente:
No hay ninguna garantía de que vaya a haber una fuente más pesada para cada uno de los valores de 'font-weight'; por ejemplo, algunas familias tipográficas pueden tener solamente una fuente normal y una fuente negrita (bold), otras pueden tener nueve fuentes de pesos diferentes. La única garantía es que una fuente con un valor dado no será menos pesada que fuentes con valores más ligeros.
Valor: <tamaño-absoluto> | <tamaño-relativo> | <longitud> | <porcentaje>
Inicial: medium
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: relativos al tamaño de fuente del elemento padre
Los valores de longitud y los porcentuales no deberían tener en cuenta la tabla de tamaños de fuente cuando se calcule el tamaño del elemento.
No se permiten valores negativos.
En todas las demás propiedades, los valores de longitudes expresados en 'em' y 'ex' se refieren al tamaño de fuente del elemento actual. En la propiedad 'font-size', estas unidades de longitud se refieren al tamaño de fuente del elemento padre.
Obsérvese que una aplicación puede reinterpretar un tamaño explícito, dependiendo del contexto. Por ejemplo, dentro de una escena de realidad virtual una fuente puede obtener un tamaño diferente debido a la distorsión de la perspectiva.
Ejemplos:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Si se utiliza el factor de escala sugerido de 1,5, las tres últimas declaraciones son idénticas.
Valor: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: sólo permitidos para <font-size> y <line-height>
La propiedad 'font' es una propiedad abreviada para establecer las propiedades 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' y 'font-family' en un mismo lugar de una hoja de estilo. La sintaxis de esta propiedad se basa en la notación abreviada tipográfica tradicional para establecer múltiples propiedades relacionadas con los tipos de letra.
Para una definición de los valores iniciales y permitidos, véanse las propiedades anteriormente definidas. Las propiedades para las cuales no se dan valores se establecen a su valor inicial.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
En la segunda regla, el valor porcentual del tamaño de fuente ('80%') se refiere al tamaño de fuente del elemento padre. En la tercera regla, el porcentaje de altura de línea se refiere al tamaño de fuente del propio elemento.
En las tres primeras reglas del ejemplo anterior, las propiedades 'font-style', 'font-variant' y 'font-weight' no se mencionan explícitamente, lo cual significa que las tres se establecen a su valor inicial ('normal'). La cuarta regla establece 'font-weight' en 'bold', 'font-style' en 'italic' e, implícitamente, establece 'font-variant' en 'normal'.
La quinta regla establece 'font-variant' ('small-caps'), 'font-size' (120% de la fuente del padre), 'line-height' (120% del tamaño de la fuente) y 'font-family' ('fantasy'). Se deduce que la palabra clave 'normal' se aplica a las dos restantes propiedades: 'font-style' y 'font-weight'.
Estas propiedades describen el color (a menudo llamando en inglés foreground color, color de primer plano) y el fondo (background) de un elemento (es decir, la superficie sobre la cual se representa el contenido). Se puede establecer un color de fondo y/o una imagen de fondo. También se puede establecer la posición de la imagen, si la imagen se repite y cómo se repite, y si está fija o si se mueve con respecto al lienzo (es decir, si hace scroll).
La propiedad 'color' se hereda normalmente. Las propiedades de fondo no se heredan, pero el fondo del elemento padre se verá por defecto a través de los hijos, ya que el valor inicial de 'background-color' es transparente ('transparent').
Valor: <color>
Inicial: depende del UA
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: N/A
Esta propiedad describe el color del texto de un elemento (color de primer plano o foreground color). Hay distintas maneras de especificar el color rojo:
EM { color: red } /* lenguaje natural */
EM { color: rgb(255,0,0) } /* RGB con rango 0-255 */
Véase en la sección 6.3 una descripción de los valores de color posibles.
Valor: <color> | transparent
Inicial: transparent
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad establece el color de fondo de un elemento.
H1 { background-color: #F00 }
Valor: <url> | none
Inicial: none
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad establece la imagen de fondo de un elemento. Cuando se establece una imagen de fondo, también debería establecerse un color de fondo que se usará en el caso de que la imagen no esté disponible. Cuando la imagen esté disponible, se superpone al color de fondo.
BODY { background-image: url(marmol.gif) }
P { background-image: none }
Valor: repeat | repeat-x | repeat-y | no-repeat
Inicial: repeat
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Si se especifica una imagen, el valor de 'background-repeat' determina si la imagen se repite y cómo se repite.
Un valor de 'repeat' significa que la imagen se repite tanto horizontal como verticalmente. El valor 'repeat-x' ('repeat-y') hace que la imagen se repita horizontalmente (verticalmente), creando una sola banda de imágenes de un lado a otro (de arriba a abajo). Con un valor 'no-repeat' la imagen no se repite.
BODY {
background: red url(pendiente.gif);
background-repeat: repeat-y;
}
En el ejemplo, la imagen sólo se repetirá verticalmente.
Valor: scroll | fixed
Inicial: scroll
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Si se especifica una imagen de fondo, el valor de 'background-attachment' determina si ésta está fija con relación al lienzo, o si se mueve (hace scroll) junto con el contenido.
BODY {
background: red url(pendiente.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 básico: Los AAUU puede tratar 'fixed' como 'scroll'. Sin embargo, se recomienda que interpreten 'fixed' correctamente, al menos en los elementos HTML y BODY, ya que no es posible para un autor especificar una imagen de fondo únicamente para los browsers que soporten 'fixed' (Véase la sección 7.)
Valor: [<porcentaje> | <longitud>]{1,2} | [top | center | bottom] || [left | center | right]
Inicial: 0% 0%
Se aplica a: elementos en bloque y elementos reemplazados
Se hereda: no
Valores porcentuales: se refieren al tamaño del propio elemento
Si se ha especificado una imagen de fondo, el valor de 'background-position' especifica la posición inicial.
Con un par de valores '0% 0%', la esquina superior izquierda de la imagen se coloca en la esquina superior izquierda del cuadro que rodea al contenido del elemento (es decir, no la del cuadro que rodea a relleno, borde y margen). Un par de valores '100% 100%' coloca la esquina inferior derecha de la imagen en la esquina inferior derecha del elemento. Con un par de valores '14% 84%', el punto que está al 14% de la izquierda de la imagen y al 84% de su parte superior se coloca en el punto que está al 14% de la izquierda del elemento y al 84% de su borde superior. Con un par de valores de '2cm 2cm', la esquina superior izquierda de la imagen se coloca a 2 cm a la derecha y 2 cm por debajo de la esquina superior izquierda del elemento.
Si sólo se da un valor porcentual o una longitud, este valor sólo establece la posición horizontal, y la posición vertical será el 50%. Si se dan dos valores, la posición horizontal corresponde al primero. Se permite combinar longitudes con valores porcentuales, p.ej., '50% 2cm'. Se permiten posiciones negativas.
También se pueden usar como valores palabras clave que indican la posición de la imagen de fondo. Las palabras clave no pueden combinarse con valores porcentuales ni con longitudes. Las combinaciones posibles de palabras clave y sus interpretaciones son las siguientes:
Ejemplos:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
Si la imagen de fondo está fija con relación al lienzo (véase la propiedad 'background-attachment' más arriba), la imagen se coloca con relación al lienzo y no con relación al elemento. P.ej.:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
En este ejemplo, la imagen se coloca en la esquina inferior derecha del lienzo.
Valor: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: permitidos para <background-position>
La propiedad 'background' es una propiedad abreviada para establecer las propiedades de fondo individuales (es decir, 'background-color', 'background-image', 'background-repeat', 'background-attachment' y 'background-position') en un mismo lugar de una hoja de estilo.
Los valores posibles de las propiedades 'background' son el conjunto de todos los posibles para cada una de las propiedades individuales.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
La propiedad 'background' siempre establece todas las propiedades individuales. En la primera regla del ejemplo precedente, sólo se ha dado un valor para 'background-color', y todas las demás propiedades individuales se han establecido a su valor inicial. En la segunda regla, se han especificado todas las propiedades individuales.
Valor: normal | <longitud>
Inicial: normal
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: N/A
La unidad de longitud indica que se añade el espacio especificado al espacio por defecto entre palabras. Los valores pueden ser negativos, pero puede haber límites específicos de cada implementación. El AU es libre de elegir el algoritmo exacto de espaciado. El espaciado de palabras también puede verse influido por el tipo de justificación (que es un valor de la propiedad 'text-align').
H1 { word-spacing: 1em }
Aquí, el espaciado de palabras entre cada palabra contenida en elementos 'H1' se incrementa en '1em'.
CSS1 básico: Los AAUU pueden interpretar cualquier valor de 'word-spacing' como 'normal'. (Véase la sección 7.)
Valor: normal | <longitud>
Inicial: normal
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: N/A
Una unidad de longitud indica que se añade el espacio especificado al espacio por defecto entre caracteres. Los valores pueden ser negativos, pero puede haber límites específicos de cada implementación. El AU es libre de elegir el algoritmo exacto de espaciado. El espaciado de letras también puede verse influido por el tipo de justificación (que es un valor de la propiedad 'text-align').
BLOCKQUOTE { letter-spacing: 0.1em }
Aquí, el espaciado de letras entre cada carácter de los elementos 'BLOCKQUOTE' se vería incrementado en '0.1em'.
Con un valor de 'normal', el AU puede modificar el espacio entre letras para justificar el texto. Esto no sucederá si 'letter-spacing' está establecido explícitamente a un valor de tipo <longitud>:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
Cuando el espacio resultante entre dos letras no sea el mismo que el espacio por defecto, los AAUU no deberían usar ligaduras.
CSS1 básico: Los AAUU pueden interpretar cualquier valor de 'letter-spacing' como 'normal' (véase la sección 7.)
Valor: none | [ underline || overline || line-through || blink ]
Inicial: none
Se aplica a: todos los elementos
Se hereda: no, pero véase la clarificación más abajo
Valores porcentuales: N/A
Esta propiedad describe las decoraciones que se añaden al texto de un elemento. Si el elemento no tiene texto (p.ej. el elemento 'IMG' en HTML) o es un elemento vacío (p.ej. '<EM></EM>'), esta propiedad no tiene efecto. Un valor de 'blink' hace que el texto parpadee.
El color o colores requeridos por la decoración del texto deberían derivar del valor de la propiedad 'color'.
Esta propiedad no es heredada, pero los elementos deberían concordar con sus padres. P.ej., si un elemento está subrayado, la línea debería abarcar todos los elementos hijos. El color del subrayado será el mismo incluso si los elementos descendientes tienen valores distintos de 'color'.
A:link, A:visited, A:active { text-decoration: underline }
En este ejemplo se subrayarían los textos de todos los vínculos (es decir, de todos los elementos 'A' con un atributo 'HREF').
Los AAUU deben reconocer la palabra clave 'blink', pero no es necesario que soporten el efecto de parpadeo.
Valor: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje>
Inicial: baseline
Se aplica a: elementos en línea
Se hereda: no
Valores porcentuales: se refieren al 'line-height' del propio elemento
Esta propiedad afecta al posicionamiento vertical del elemento. Se utiliza un conjunto de palabras clave que son relativas al elemento padre:
Hay otro conjunto de palabras clave que son relativas a la línea formateada a la que pertenece el elemento:
Cuando se usa la alineación superior ('top') e inferior ('bottom') pueden darse situaciones irresolubles si las dependencias entre elementos crean un bucle.
Los valores porcentuales se refieren al valor de la propiedad 'line-height' del propio elemento. Elevan la línea de base del elemento (o la línea inferior, si no tiene línea de base), en la cantidad especificada, por encima de la línea de base del elemento. Son posibles valores negativos. P.ej., un valor de "-100%" bajará el elemento de modo que la línea de base del elemento acabe donde debería haber estado la línea de base de la línea siguiente. Esto permite un control preciso sobre la posición vertical de los elementos que no tienen una línea de base (como p.ej. las imágenes que se usan en lugar de letras).
Se espera que en una versión futura de CSS se permita un valor de tipo <longitud> para esta propiedad.
Valor: capitalize | uppercase | lowercase | none
Inicial: none
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: N/A
La transformación que se lleva finalmente a cabo depende del idioma en que esté el texto. Véanse en [4] diferentes formas de encontrar el idioma de un elemento.
H1 { text-transform: uppercase }
Este ejemplo convertiría los elementos 'H1' en texto en mayúsculas.
CSS1 básico: Los AAUU pueden no tener en cuenta 'text-transform' (es decir, tratarlo como si siempre valiera 'none') para los caracteres que no pertenezcan al repertorio Latin-1 y para elementos en idiomas para los que la transformación es diferente de la especificada en las tablas de conversión de caja de Unicode [8].
Valor: left | right | center | justify
Inicial: depede del AU
Se aplica a: elementos en bloque
Se hereda: sí
Valores porcentuales: N/A
Esta propiedad describe cómo se alinea el texto dentro del elemento. El algoritmo de justificación utilizado finalmente depende del AU y del idioma en que esté el texto.
Ejemplo:
DIV.center { text-align: center }
Como 'text-align' se hereda, todos los elementos en bloque dentro del elemento 'DIV' con 'CLASS=center' estarán centrados. Obsérvese que las alineaciones son relativas a la anchura del elemento, no del lienzo. Si 'justify' no está soportado, al AU lo sustituirá por otro estilo. Normalmente será 'left' para los lenguajes occidentales.
CSS1 básico: Los AAUU pueden tratar 'justify' como 'left' o 'right', según que la dirección de escritura por defecto del elemento sea de izquierda a derecha o de derecha a izquierda respectivamente.
Valor: <longitud> | <porcentaje>
Inicial: 0
Se aplica a: elementos en bloque
Se hereda: sí
Valores porcentuales: se refiere a la anchura del elemento padre
Esta propiedad especifica la sangría de la primera línea formateada. El valor de 'text-indent' puede ser negativo, pero puede haber limitaciones específicas de cada implementación. No se inserta sangría en medio de un elemento que haya sido roto por otro (como el 'BR' en HTML).
Ejemplo:
P { text-indent: 3em }
Valor: normal | <número> | <longitud> | <porcentaje>
Inicial: normal
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: relativos al tamaño de la fuente del propio elemento
Esta propiedad establece la distancia entre las líneas de base de dos líneas adyacentes.
Cuando se especifica un valor numérico, la altura de línea está dada por el tamaño de fuente del elemento considerado multiplicado por el valor numérico. La diferencia entre eso y un valor porcentual está en el modo en que se hereda el valor: cuando se especifica un valor numérico, los elementos hijos heredarán el factor en sí, no el valor resultante (como es el caso de los porcentajes y otras unidades).
No se permiten valores negativos.
Las tres reglas del ejemplo siguiente dan el mismo resultado de altura de línea:
DIV { line-height: 1.2; font-size: 10pt } /* número */
DIV { line-height: 1.2em; font-size: 10pt } /* longitud */
DIV { line-height: 120%; font-size: 10pt } /* porcentaje */
Un valor 'normal' establece la altura de línea a un valor razonable para la fuente del elemento. Se sugiere que los AAUU asignen al valor 'normal' un número entre 1,0 y 1,2. Véase en la sección 4.4 la descripción de cómo influye 'line-height' en el formato de los elementos en bloque.
Las propiedades de cuadro establecen el tamaño, el perímetro y la posición de los cuadros que representan a los elementos. En la sección 4 sobre el modelo de formato pueden verse ejemplos del uso de las propiedades de cuadro.
Las propiedades de margen establecen el margen de un elemento. La propiedad 'margin' establece el margen para los cuatro lados, mientras que las demás propiedades de margen sólo establecen sus lados respectivos.
Las propiedades de relleno describen cuánto espacio se inserta entre el borde y el contenido (p.ej., un texto o una imagen). La propiedad 'padding' establece el relleno para los cuatro lados, mientras que el resto de las propiedades de relleno establecen sólo sus lados respectivos.
Las propiedades de borde establecen los bordes de un elemento. Cada elemento tiene cuatro bordes, uno en cada lado, que están definidos por su anchura, su color y su estilo.
Las propiedades 'width' y 'height' establecen el tamaño del cuadro, y las propiedades 'float' y 'clear' pueden alterar la posición de los elementos.
Valor: <longitud> | <porcentaje> | auto
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el margen superior de un elemento:
H1 { margin-top: 2em }
Se permiten valores negativos, pero puede haber limitaciones específicas de cada implementación.
Valor: <longitud> | <porcentaje> | auto
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el margen derecho de un elemento:
H1 { margin-right: 12.3% }
Se permiten valores negativos, pero puede haber limitaciones específicas de cada implementación.
Valor: <longitud> | <porcentaje> | auto
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el margen inferior de un elemento:
H1 { margin-bottom: 3px }
Se permiten valores negativos, pero puede haber limitaciones específicas de cada implementación.
Valor: <longitud> | <porcentaje> | auto
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el margen izquierdo de un elemento:
H1 { margin-left: 2em }
Se permiten valores negativos, pero puede haber limitaciones específicas de cada implementación.
Valor: [ <longitud> | <porcentaje> | auto ]{1,4}
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
La propiedad 'margin' es una propiedad abreviada para establecer las propiedades 'margin-top', 'margin-right', 'margin-bottom' y 'margin-left' en un mismo lugar de una hoja de estilo.
Si se especifican cuatro valores de longitud, se aplican a los márgenes superior, derecho, inferior e izquierdo respectivamente. Si sólo hay un valor, se aplica a todos los lados; si hay dos o tres valores, se toma para los valores que faltan los del lado opuesto.
BODY { margin: 2em } /* todos los márgenes puestos a 2em */
BODY { margin: 1em 2em } /* top y bottom = 1em, right y left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
La última regla de este ejemplo equivale al ejemplo siguiente:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copiado del lado opuesto (right) */
}
Se permiten valores negativos, pero puede haber limitaciones específicas de cada implementación.
Valor: <longitud> | <porcentaje>
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el relleno superior de un elemento.
BLOCKQUOTE { padding-top: 0.3em }
Los valores de relleno no pueden ser negativos.
Valor: <longitud> | <porcentaje>
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores de porcentaje: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el relleno derecho de un elemento.
BLOCKQUOTE { padding-right: 10px }
Los valores de relleno no pueden ser negativos.
Valor: <longitud> | <porcentaje>
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el relleno inferior de un elemento.
BLOCKQUOTE { padding-bottom: 2em }
Los valores de relleno no pueden ser negativos.
Valor: <longitud> | <porcentaje>
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el relleno izquierdo de un elemento.
BLOCKQUOTE { padding-left: 20% }
Los valores de relleno no pueden ser negativos.
Valor: [ <longitud> | <porcentaje> ]{1,4}
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
La propiedad 'padding' es una propiedad abreviada para establecer las propiedades 'padding-top', 'padding-right', 'padding-bottom' y 'padding-left' en un mismo lugar de una hoja de estilo.
Si se especifican cuatro valores, se aplican al relleno superior, derecho, inferior e izquierdo respectivamente. Si sólo hay un valor, se aplica a todos los lados; si hay dos o tres, se toman para los valores que faltan los del lado opuesto.
La superficie del área de relleno se establece con la propiedad 'background':
H1 {
background: white;
padding: 1em 2em;
}
En este ejemplo se establece en '1em' el relleno vertical ('padding-top' y 'padding-bottom'), y en '2em' el horizontal ('padding-right' y 'padding-left'). La unidad 'em' es relativa al tamaño de fuente del elemento: '1em' es igual al tamaño de la fuente en uso.
Los valores de relleno no pueden ser negativos.
Valor: thin | medium | thick | <longitud>
Inicial: 'medium'
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad establece la anchura del borde superior de un elemento. La anchura de los valores correspondientes a las palabras clave depende del AU, pero siempre se cumple que 'thin' <= 'medium' <= 'thick'.
Las anchuras correspondientes a las palabras clave son constantes a lo largo de un mismo documento:
H1 { border: solid thick red }
P { border: solid thick blue }
En este ejemplo, los elementos 'H1' y 'P' tendrán la misma anchura de borde independientemente del tamaño de fuente. Para conseguir anchuras relativas, puede utilizarse la unidad 'em':
H1 { border: solid 0.5em }
Las anchuras de los bordes no pueden ser negativas.
Valor: thin | medium | thick | <longitud>
Inicial: 'medium'
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad establece la anchura del borde derecho de un elemento. Por lo demás es análoga a la propiedad 'border-top-width'.
Valor: thin | medium | thick | <longitud>
Inicial: 'medium'
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad establece la anchura del borde inferior de un elemento. Por lo demás es análoga a la propiedad 'border-top-width'.
Valor: thin | medium | thick | <longitud>
Inicial: 'medium'
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad establece la anchura del borde izquierdo de un elemento. Por lo demás es análoga a la propiedad 'border-top-width'.
Valor: [thin | medium | thick | <longitud>]{1,4}
Inicial: no definido para las propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad es una propiedad abreviada para establecer las propiedades 'border-top-width', 'border-right-width', 'border-bottom-width' y 'border-left-width' en un mismo lugar de una hoja de estilo.
Puede haber entre uno y cuatro valores, interpretándose de la siguiente manera:
En los ejemplos que siguen, los comentarios indican las anchuras resultantes de los bordes superior, derecho, inferior e izquierdo respectivamente:
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */
Los bordes no pueden ser negativos.
Valor: <color>{1,4}
Inicial: el valor de la propiedad 'color'
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
La propiedad 'border-color' establece el color de los cuatro bordes. 'border-color' puede tener de uno a cuatro valores, asignándose estos valores a los diferentes lados de manera análoga a la explicada anteriormente para la propiedad 'border-width'.
Si no se especifica ningún valor de color, se utilizará en su lugar el valor de la propiedad 'color':
P {
color: black;
background: white;
border: solid;
}
En este ejemplo, el borde será una línea continua (solid) negra.
Valor: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Inicial: none
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
La propiedad 'border-style' establece el estilo de los cuatro bordes. Puede tener entre uno y cuatro valores, estableciéndose los valores de los cuatro lados de manera análoga a la explicada anteriormente para la propiedad 'border-width'.
#xy34 { border-style: solid dotted }
En este ejemplo, los bordes horizontales serán continuos ('solid') y los bordes verticales punteados ('dotted').
Al ser el valor inicial de los estilos de los bordes 'none' (ninguno), ningún borde será visible a menos que se establezca el estilo del borde.
El significado de los posibles estilos de borde es el siguiente:
CSS1 básico: Los AAUU pueden interpretar cualquier valor 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' y 'outset' como 'solid'.
Valor: <anchura-de-borde-superior> || <estilo-de-border> || <color>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta es una propiedad abreviada para establecer la anchura, estilo y color del borde superior de un elemento.
H1 { border-bottom: thick solid red }
La regla de este ejemplo establecerá la anchura, estilo y color del borde inferior del elemento H1. Si hay valores omitidos se igualarán a sus valores iniciales:
H1 { border-bottom: thick solid }
Al haberse omitido el valor del color en este último ejemplo, el color del borde será el mismo que el valor de 'color' del propio elemento.
Obsérvese que mientras que la propiedad 'border-style' acepta hasta cuatro valores, esta propiedad sólo acepta un valor de estilo.
Valor: <anchura-de-borde-derecho> || <estilo-de-borde> || <color>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta es una propiedad abreviada para establecer la anchura, estilo y color del borde derecho de un elemento. Por lo demás es equivalente a la propiedad 'border-top'.
Valor: <anchura-de-borde-inferior> || <estilo-de-borde> || <color>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta es una propiedad abreviada para establecer la anchura, estilo y color del borde inferior de un elemento. Por lo demás es equivalente a la propiedad 'border-top'.
Valor: <anchura-de-borde-izquierdo> || <estilo-de-borde> || <color>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta es una propiedad abreviada para establecer la anchura, estilo y color del borde izquierdo de un elemento. Por lo demás es equivalente a la propiedad 'border-top'.
Valor: <anchura-de-borde> || <estilo-de-borde> || <color>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
La propiedad 'border' es una propiedad abreviada para establecer la misma anchura, color y estilo en los cuatro bordes de un elemento. Por ejemplo, la primera regla del ejemplo siguiente es equivalente al conjunto de cuatro reglas que siguen a continuación:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
A diferencia de las propiedades abreviadas 'margin' y 'padding', la propiedad 'border' no puede establecer valores distintos para cada borde. Para ello debe utilizarse una o más de las otras propiedades de borde.
Como las propiedades tienen hasta cierto punto funcionalidades comunes, el orden en que deben especificarse las reglas es importante. Consideremos este ejemplo:
BLOCKQUOTE {
border-color: red;
border-left: double;
color: black;
}
En este ejemplo, el color del borde izquierdo será negro. Esto es debido a que 'border-left' establece anchura, estilo y color. Y como el valor del color no está especificado en la propiedad 'border-left', se tomará de la propiedad 'color'. El hecho de que la propiedad 'color' se establezca después de la propiedad 'border-left' no es relevante.
Obsérvese que si bien la propiedad 'border-width' acepta hasta cuatro valores de longitud, esta propiedad sólo acepta uno.
Valor: <longitud> | <porcentaje> | auto
Inicial: auto
Se aplica a: elementos en bloque y elementos reemplazados
Se hereda: no
Valores porcentuales: se refieren a la anchura del elemento padre
Esta propiedad puede aplicarse a elementos que contienen texto, pero es más útil para elementos reemplazados tales como imágenes. La anchura especificada debe ser respetada, escalando la imagen si es necesario. Cuando se escale, si la propiedad 'height' es 'auto', deben preservarse las proporciones de la imagen.
Ejemplo:
IMG.icono { width: 100px }
Si las dos propiedades 'width' y 'height' de un elemento reemplazado valen 'auto', estas propiedades serán establecidas a las dimensiones intrínsecas del elemento.
No se permiten valores negativos.
Véase en la sección 4 sobre el modelo de formato una descripción de la relación entre esta propiedad y el relleno y el margen.
Valor: <longitud> | auto
Inicial: auto
Se aplica a: elementos en bloque y elementos reemplazados
Se hereda: no
Valores porcentuales: N/A
Esta propiedad puede aplicarse elementos que contienen texto, pero es más útil para elementos reemplazados, tales como imágenes. La altura debe ser respetada, debiéndose escalar la imagen si es necesario. Al escalar, si el valor de la propiedad 'width' es auto, deben mantenerse las proporciones de la imagen.
Ejemplo:
IMG.icono { height: 100px }
Si las dos propiedades 'width' y 'height' de un elemento reemplazado valen 'auto', estas propiedades serán establecidas a las dimensiones intrínsecas del elemento.
Cuando se aplique a un elemento textual, la altura puede ser respetada, por ejemplo mediante una barra de scroll.
No se permiten valores negativos.
CSS1 básico: Los AAUU pueden no tener en cuenta la propiedad 'height' (es decir, tratarla como si valiera 'auto') si el elemento no es un elemento reemplazado.
Valor: left | right | none
Inicial: none
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Con el valor 'none', el elemento será mostrado donde aparezca en el texto. Con un valor 'left' el elemento será movido a la izquierda y el texto continuará por el lado derecho del elemento. Con un valor 'right' el elemento será movido a la derecha y el texto cambiará de línea por el lado izquierdo del elemento. Con un valor de 'left' o 'right' se considera al elemento como un elemento en bloque (es decir, no se tiene en cuenta la propiedad 'display'). Véase en la sección 4.1.4 una especificación completa.
IMG.icono {
float: left;
margin-left: 0;
}
Este ejemplo colocará todos los elementos 'IMG' con 'CLASS=icono' junto al lado izquierdo del elemento padre.
Esta propiedad se usa normalmente con imágenes en línea, pero también se aplica a elementos de texto.
Valor: none | left | right | both
Inicial: none
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad especifica si un elemento permite que haya elementos flotantes a sus lados. Más concretamente, el valor de esta propiedad enumera los lados en los que no acepta elementos flotantes. Con 'clear' igual a 'left' el elemento será movido hasta quedar por debajo del elemento flotante a la izquierda. Con 'clear' igual a 'none', se permiten elementos flotantes a ambos lados.
Ejemplo:
H1 { clear: left }
Estas propiedades, más que especificar parámetros visuales específicos, lo que hacen es clasificar elementos en categorías.
Las propiedades de estilo de lista describen cómo dar formato a los objetos de una lista (es decir, a los elementos con un valor de 'display' igual a 'list-item'). Las propiedades de estilo de lista pueden establecerse para cualquier elemento, y normalmente se heredarán de padres a hijos. Sin embargo, sólo tendrán efecto en aquellos elementos que tengan un valor de 'display' igual a 'list-item'. En HTML éste normalmente el caso de los elementos 'LI'.
Valor: block | inline | list-item | none
Inicial: block
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad describe si un elemento se muestra en el lienzo (ya sea una página impresa, una pantalla de computadora, etc.) y cómo se muestra.
Un elemento con un valor de 'display' igual a 'block' abre un nuevo cuadro. El cuadro se posiciona relativamente a los cuadros adyacentes de acuerdo al modelo de formato de CSS. Normalmente, elementos tales como 'H1' y 'P' son del tipo 'block'. El valor 'list-item' es similar a 'block', excepto que se añade un marcador de objeto de lista. En HTML, 'LI' tendrá normalmente este valor.
Un elemento con un valor de 'display' igual a 'inline' da como resultado un nuevo cuadro de línea en la misma línea que el contenido previo. El cuadro se dimensiona de acuerdo con el tamaño del contenido una vez formateado. Si el contenido es textual, puede abarcar varias líneas, y habrá un cuadro en cada línea. Las propiedades de margen, borde y relleno se aplican a los elementos 'inline', pero no tendrán ningún efecto en los saltos de línea.
Un valor de 'none' desactiva la presentación del documento, incluyendo los elementos hijos y el cuadro circundante.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
La última regla desactiva la presentación de las imágenes.
El valor inicial de 'display' es 'block', pero un AU tendrá por lo general valores por defecto para cada elemento HTML de acuerdo con la representación de elementos sugerida por la especificación HTML [2].
CSS1 básico: Los AAUU pueden no tener en cuenta el valor de 'display' y usar solamente los valores por defecto del AU (véase la sección 7).
Valor: normal | pre | nowrap
Inicial: normal
Se aplica a: elementos en bloque
Se hereda: sí
Valores porcentuales: N/A
Esta propiedad declara cómo se manipulan los espacios existentes en el interior del elemento: con el modo 'normal' (según el cual los espacios en blanco se colapsan), 'pre' (que se comporta como el elemento 'PRE' de HTML) o 'nowrap' (según el cual los cambios de línea sólo ocurren por la presencia de elementos BR):
PRE { white-space: pre }
P { white-space: normal }
El valor inicial de 'white-space' es 'normal', pero un AU tendrá normalmente valores por defecto para cada elemento HTML de acuerdo con la representación de elementos sugerida por la especificación HTML [2].
CSS1 básico: Los AAUU pueden no tener en cuenta la propiedad 'white-space' en las hojas de estilo del autor y del lector, y usar en su lugar los valores por defecto del AU (véase la sección 7).
Valor: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Inicial: disc
Se aplica a: elementos con valor de 'display' igual a 'list-item'
Se hereda: sí
Valores porcentuales: N/A
Esta propiedad se utiliza para determinar la apariencia del marcador de objetos de lista si 'list-style-image' es 'none' o si la imagen a la que apunta su URL no puede ser mostrada.
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha } /* a b c d e etc. */
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
Valor: <url> | none
Inicial: none
Se aplica a: elementos con valor de 'display' igual a 'list-item'
Se hereda: sí
Valores porcentuales: N/A
Esta propiedad establece la imagen que se usará como marcador de objetos de lista. Si la imagen está disponible reemplazará al marcador establecido con la propiedad 'list-style-type'.
UL { list-style-image: url(http://png.com/elipse.png) }
Valor: inside | outside
Inicial: outside
Se aplica a: elementos con valor de 'display' igual a 'list-item'
Se hereda: sí
Valores porcentuales: N/A
El valor de 'list-style-position' determina cómo se dibuja el marcador de objetos de lista con relación al contenido. Para ver un ejemplo de formato véase la sección 4.1.3.
Valor: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Inicial: no definida para propiedades abreviadas
Se aplica a: elementos con valor de 'display' igual a 'list-item'
Se hereda: sí
Valores porcentuales: N/A
La propiedad 'list-style' es una notación abreviada para establecer las tres propiedades 'list-style-type', 'list-style-image' y 'list-style-position' en un mismo lugar de una hoja de estilo.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
Establecer 'list-style' directamente en un elemento 'LI' puede dar lugar a resultados inesperados. Considérese el siguiente ejemplo:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>nivel 1
<UL>
<LI>nivel 2
</UL>
</OL>
</BODY>
Al ser mayor la especificidad (definida en el orden de cascada) de la primera regla de la hoja de estilo del ejemplo, prevalecerá sobre la segunda regla en todos los elementos 'LI' y sólo se utilizarán estilos de lista 'lower-alpha'. Por ello se recomienda establecer la propiedad 'list-style' únicamente en los elementos de tipo lista:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
En este ejemplo, la herencia transmitirá los valores de 'list-style' de los elementos 'OL' y 'UL' a los elementos 'LI'.
Un valor de tipo URL puede combinarse con cualquier otro valor:
UL { list-style: url(http://png.com/elipse.png) disc }
En este ejemplo, se usará 'disc' si la imagen no está disponible.
El formato de una unidad de longitud es un carácter opcional de signo ('+' o '-', siendo '+' el valor por defecto) seguido inmediatamente de un número (con o sin punto decimal) seguido inmediatamente de un identificador de unidad (una abreviación de dos letras). Después del número '0' el identificador de unidad es opcional.
Algunas propiedades permiten unidades de longitud negativas, pero esto puede complicar el modelo de formato y pueden existir limitaciones específicas de cada implementación. Si en algún caso no se puede dar soporte a un valor negativo, debería truncarse al valor más cercano que pueda aceptarse.
Hay dos tipos de unidades de longitud: relativas y absolutas. Las unidades relativas especifican una longitud relativa a otra propiedad de longitud. Las hojas de estilo que usen unidades relativas serán más fácilmente escalables de un medio a otro (p.ej. de una pantalla de ordenador a una impresora láser). Las unidades porcentuales (descritas más adelante) y los valores de palabras clave (p.ej. 'x-large') ofrecen ventajas similares.
Estas son las unidades relativas soportadas:
H1 { margin: 0.5em } /* ems, la altura de la fuente del elemento */
H1 { margin: 1ex } /* altura-x, aprox. la altura de la letra 'x' */
P { font-size: 12px } /* píxeles, relativos al lienzo */
Las unidades relativas 'em' y 'ex' son relativas al tamaño de fuente del propio elemento. La única excepción a esta regla en CSS1 es la propiedad 'font-size', donde tanto 'em' como 'ex' se refieren al tamaño de fuente del elemento padre.
Las unidades en píxeles, como las de la última regla, son relativas a la resolución del lienzo, o lo que es lo mismo en la mayoría de los casos, a la resolución de la pantalla de la computadora. Si la densidad de píxeles del dispositivo de salida es distinta a la de una pantalla normal de computadora, el AU debería reescalar los valores dados en píxeles. El píxel de referencia que se sugiere es el ángulo visual de un píxel en un dispositivo con una densidad de píxeles de 90 puntos por pulgada y a una distancia del lector igual a la longitud del brazo. Tomando una longitud nominal de brazo de 28 pulgadas, el ángulo visual es de unos 0,0227 grados.
Los elementos hijos heredan el valor calculado, no el valor relativo.
BODY {
font-size: 12pt;
text-indent: 3em; /* es decir, 36pt */
}
H1 { font-size: 15pt }
En este ejemplo, el valor 'text-indent' de los elementos 'H1' será de 36pt, no de 45pt.
Las unidades absolutas de longitud sólo son útiles cuando se conocen las propiedades físicas del medio de salida. Estas son las unidades absolutas soportadas:
H1 { margin: 0.5in } /* pulgadas (inches), 1in = 2.54cm */
H2 { line-height: 3cm } /* centímetros */
H3 { word-spacing: 4mm } /* milímetros */
H4 { font-size: 12pt } /* puntos, 1pt = 1/72 in */
H4 { font-size: 1pc } /* picas, 1pc = 12pt */
En aquellos casos en que la longitud especificada no pueda ser soportada, los AAUU deberían intentar aproximar. En todas las propiedades CSS1, los cálculos y herencias ulteriores deberían basarse en el valor aproximado.
El formato de una unidad porcentual es un carácter de signo opcional ('+' o '-', siendo '+' el valor por defecto), inmediatamente seguido de un número (con o sin punto decimal), inmediatamente seguido de '%'.
Los valores porcentuales son siempre relativos a otro valor, por ejemplo una unidad de longitud. Todas las propiedades que permiten unidades porcentuales definen a qué valor se refiere el porcentaje. Normalmente será el tamaño de fuente del propio elemento:
P { line-height: 120% } /* 120% del 'font-size' del elemento */
En todas las propiedades CSS1 heredadas, cuando el valor se especifique como un porcentaje, los elementos hijos heredarán el valor resultante, no el valor porcentual.
Un color es o bien una palabra clave o bien una especificación numérica RGB.
La lista sugerida de nombres de palabras clave de color es: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, y yellow. Estos 16 colores están tomados de la paleta VGA de Windows, y sus valores RGB no se definen en esta especificación.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
Para especificaciones numéricas de color se utiliza el modelo de colores RGB. Todos estos ejemplos especifican el mismo color:
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* rango de enteros 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* rango de reales (float) 0.0% - 100.0% */
El formato de un valor RGB en notación hexadecimal es un '#' inmediatamente seguido de o bien 3 o bien 6 caracteres hexadecimales. La notación de 3 dígitos RGB (#rgb) se convierte a notación de 6 dígitos replicando dígitos, no añadiendo ceros. Por ejemplo, #fb0 se convierte en #ffbb00. Con esto se asegura que el blanco (#ffffff) puede especificarse con la notación abreviada (#fff) y elimina cualquier dependencia de la profundidad de color del dispositivo de salida.
El formato de un valor RGB en la notación funcional es 'rgb(', seguido de una lista de tres valores numéricos separados por coma (ya sean tres valores numéricos entre 0 y 255, o tres valores porcentuales entre 0,0% y 100,0%), seguida de ')'. Se permite espacio en blanco alrededor de los valores numéricos.
Los valores que se encuentran fuera de los rangos numéricos deberían truncarse. Las tres reglas siguientes son por lo tanto equivalentes:
EM { color: rgb(255,0,0) } /* rango de enteros 0 - 255 */
EM { color: rgb(300,0,0) } /* truncado a 255 */
EM { color: rgb(110%, 0%, 0%) } /* truncado a 100% */
Los colores RGB se especifican en el espacio de colores sRGB [9]. Cada AU puede tener distinta fiabilidad a la hora de representar estos colores, pero el uso de sRGB proporciona una definición inequívoca y medible objetivamente de lo que debería ser el color, y que puede ser contrastada con estándares internacionales [10].
Los AAUU pueden limitar sus esfuerzos de representación de colores a la aplicación de una corrección gamma sobre ellos. sRGB especifica un valor gamma de 2,2 bajo unas condiciones de visión específicas. Los AAUU ajustan los colores dados en CSS de tal modo que, combinados con el valor gamma "natural" del dispositivo de salida, se obtenga un valor gamma efectivo de 2,2. El apéndice D da más detalles a este respecto. Obsérvese que esto sólo afecta a los colores especificados en CSS; p.ej. las imágenes se supone que llevan su propia información de color.
Un Localizador Uniforme de Recursos (Uniform Resource Locator, URL) se identifica con una notación funcional:
BODY { background: url(http://www.bg.com/rosado.gif) }
El formato de un valor URL es 'url(', seguido de espacio blanco opcional, seguido de un carácter opcional de comilla simple (') o doble ("), seguido del URL en sí (como se define en [11]), seguido de un carácter opcional de comilla simple (') o doble ("), seguido de espacio en blanco opcional, seguido de ')'. Las comillas que no sean parte del URL en sí deben cerrarse.
Los paréntesis, comas, espacios en blanco, las comillas simples (') y las comillas dobles (") que aparezcan en una URL deben ser transformados en secuencias de escape mediante una barra invertida: '\(', '\)', '\,'.
Los URLs parciales se interpretan como relativos al fuente de la hoja de estilo, no relativos al documento:
BODY { background: url(amarillo) }
Un Agente de Usuario que use CSS1 para mostrar documentos es conforme a la especificación CSS1 si:
Un Agente de Usuario que produzca hojas de estilo CSS1 es conforme a la especificación CSS1 si:
Un Agente de Usuario que use CSS1 para mostrar documentos y que produzca hojas de estilo CSS1 es conforme a la especificación CSS1 si cumple ambos conjuntos de requisitos de conformidad.
Un AU no debe implementar necesariamente toda la funcionalidad de CSS1: puede ser conforme a CSS1 si implementa la funcionalidad básica. La funcionalidad básica consiste en la totalidad de la especificación CSS1 excepto aquellas partes explícitamente excluidas. En el texto, dichas partes están marcadas como "CSS1 básico", seguidas de una explicación de qué funcionalidad está fuera de la funcionalidad básica. El conjunto de características excluidas de la funcionalidad básica se denomina características avanzadas de CSS1.
Esta sección sólo define la conformidad con CSS1. En el futuro existirán otros niveles de CSS que puede exigir a los AAUU para su conformidad la implementación de un conjunto diferente de características.
Los siguientes son ejemplos de las restricciones del medio de presentación: recursos limitados (fuentes, colores) y resolución limitada (de modo que los márgenes pueden no ser exactos). En estos casos, el AU debería aproximar los valores de las hojas de estilo. Además, los diferentes paradigmas de interfaz de usuario pueden tener sus propias restricciones: un browser de realidad virtual puede reescalar el documento según su "distancia" al usuario.
Los AAUU pueden ofrecer al lector alternativas de presentación adicionales. Por ejemplo, un AU puede proporcionar opciones a los usuarios con limitaciones visuales o puede proporcionar la opción de desactivar el parpadeo.
Obsérvese que CSS1 no especifica todos los aspectos del formato. P.ej., el AU es libre de elegir el algoritmo de espaciamiento de letras.
Esta especificación también recomienda, pero no requiere, que un AU:
Las reglas de conformidad precedentes describen sólo la funcionalidad, no la interfaz del usuario.
Esta especificación define CSS nivel 1. Se espera que en el futuro se definan niveles superiores de CSS con características adicionales. Para asegurarse de que los AAUU que soporten únicamente CSS1 puedan leer hojas de estilo que contengan características de niveles superiores, esta sección define lo que hace un AU cuando encuentra ciertas construcciones que no son válidas en CSS nivel 1.
H1 { color: red; rotation: 70deg }
el AU la tratará como si la hoja de estilo hubiera sido:
H1 { color: red; }
IMG { float: left } /* CSS1 */
IMG { float: left top } /* "top" no es un valor de 'float' */
IMG { background: "red" } /* en CSS 1 las palabras clave no
pueden entrecomillarse */
IMG { border-width: 3 } /* debe especificarse una longitud para
unidades de longitud */
En este ejemplo, un analizador CSS1 respetaría la primera regla y no tendría en cuenta el resto, como si
la hoja de estilo hubiera sido ésta:
IMG { float: left }
IMG { }
IMG { }
IMG { }
Un AU conforme con alguna especificación futura de CSS podría aceptar una o más de las otras reglas.
@three-d {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 {color: blue}
El '@three-d' es ilegal de acuerdo con CSS1. Por tanto, toda la regla tipo arroba (hasta la tercera llave
cerrada inclusive) es descartada. El AU CSS1 se la salta, y la hoja de estilo se reduce en términos
efectivos a:
H1 {color: blue}
Más detalladamente:
Una hoja de estilo CSS, para cualquier versión de CSS, consiste en una lista de sentencias. Hay dos tipos de sentencias: reglas tipo arroba (at-rules) y conjuntos de reglas (rulesets). Puede haber espacio en blanco (espacios, tabulaciones, saltos de línea) alrededor de las sentencias.
Las hojas de estilo CSS se incrustan a menudo en documentos HTML, y para poder ocultar los estilos a los AAUU antiguos es conveniente poner las hojas de estilo dentro de comentarios HTML. Las señales de comentarios HTML "<!--" y "-->" pueden aparecer antes, después y dentro de sentencias. Puede haber espacio en blanco a su alrededor.
Las reglas tipo arroba empiezan con una palabra clave tipo arroba (at-keyword), que es un identificador con una '@' al comienzo (por ejemplo: '@import', '@page'). Un identificador consiste en letras, dígitos, guiones y caracteres de escape (definidos más adelante).
La regla tipo arroba está comprendida por todo lo que haya hasta el siguiente punto y coma (;) o el siguiente bloque (definido a continuación) incluido, lo que ocurra primero. Un AU CSS1 que encuentre una regla tipo arroba que comience con una palabra clave tipo arroba distinta de '@import' descarta el resto de la regla tipo arroba y continua leyendo a partir de ahí. También descarta cualquier regla tipo arroba que comience con '@import' si no está en la parte superior de la hoja de estilo, es decir, si está después de cualquier regla (incluso de reglas descartadas). He aquí un ejemplo:
Supóngase que un analizador CSS1 encuentra esta hoja de estilo:
@import "subs.css";
H1 { color: blue }
@import "list.css";
El segundo '@import' es ilegal de acuerdo con CSS1. El analizador CSS1 se salta toda la regla tipo arroba, y la hoja de estilos se reduce en términos efectivos a:
@import "subs.css";
H1 {color: blue}
Un bloque comienza con una llave abierta ({) y termina con la llave cerrada que la equilibra (}). Entre ambas puede haber cualesquiera caracteres, teniendo en cuenta que los paréntesis (()), los corchetes ([]) y las llaves ({}) siempre se encuentran equilibrados y pueden estar anidados. Las comillas simples (') y dobles (") también están equilibradas, y los caracteres entre ellas se interpretan como una cadena de caracteres (string, véase en el analizador léxico del apéndice B una definición de string). A continuación sigue un ejemplo de un bloque; obsérvese que la llave cerrada que hay entre comillas no equilibra la llave que abre el bloque, y que la segunda comilla simple es un carácter de escape, y por tanto no se empareja con la primera comilla simple:
{ causta: "}" + ({7} * '\'') }
Un conjunto de reglas consiste en una cadena-selector (selector-string) seguida de un bloque-declaración (declaration-block). La cadena-selector está comprendida por todo hasta la primera llave abierta ({) no incluida. Un conjunto de reglas que comience con una cadena-selector que no sea válida según CSS1 no se tiene en cuenta.
Por ejemplo, supóngase que un analizador CSS encuentra la siguiente hoja de estilo:
H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }
La segunda línea contiene una cadena-selector que es ilegal en CSS1. El AU CSS1 se saltará el conjunto de reglas, y la hoja de estilos se reduce en términos efectivos a:
H1 { color: blue }
P EM { font-weight: bold }
Un bloque-declaración comienza con una llave abierta ({) y termina con la llave cerrada que la equilibra (}). Entre ambas hay una lista de cero o más declaraciones, separadas por punto y coma (;).
Una declaración consiste en una propiedad, dos puntos (:) y un valor. Alrededor de cada uno de ellos puede haber espacio en blanco. Una propiedad es un identificador, ya definido anteriormente. En el valor puede estar presente cualquier carácter, pero los paréntesis (()), los corchetes ([]), las llaves ({}), las comillas simples (') y las comillas dobles (") deben estar equilibradas. Los paréntesis, los corchetes y las llaves pueden estar anidados. Los caracteres contenidos entre comillas son interpretados como cadenas de caracteres.
Para asegurarse de que puedan añadirse en el futuro nuevas propiedades y nuevos valores para las propiedades existentes, un AU debe saltarse una declaración con un nombre de propiedad no válido o un valor no válido. Todas las propiedades CSS1 tienen sus propias restricciones sintácticas y semánticas en cuanto a los valores que aceptan.
Por ejemplo, supóngase que un analizador CSS1 encuentra la siguiente hoja de estilo:
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any; font-variant: small-caps }
EM EM { font-style: normal }
La segunda declaración de la primera línea tiene un valor no válido de '12pt'. La segunda declaración de la segunda línea contiene la propiedad no definida 'font-vendor'. El analizador CSS1 se saltará estas declaraciones, y la hoja de estilos se reduce a:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
Los comentarios (véase la sección 1.7) pueden aparecer en cualquier parte donde pueda haber espacio en blanco, y se consideran espacio en blanco. CSS1 define lugares adicionales donde puede haber espacio en blanco (como por ejemplo dentro de los valores), y también ahí se permiten comentarios.
Las siguientes reglas siempre se cumplen:
Nota: El atributo 'CLASS' de HTML permite más caracteres en el nombre de la clase que el conjunto permitido para los selectores recién descrito. En CSS1, estos caracteres han de transformarse en secuencias de escape o escribirse como números Unicode: "B&W?" puede escribirse como "B\&W\?" o "B\26W\3F", "κουρος" (griego: "kouros") debe escribirse como "\3BA\3BF\3C5\3C1\3BF\3C2". Se espera que en versiones posteriores de CSS puedan introducirse más caracteres directamente.
En el apéndice B puede encontrarse una gramática de CSS1.
[1] Página de recursos del W3C sobre hojas de estilo para la web (http://www.w3.org/Style)
[2] "HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, diciembre de 1997. Disponible en http://www.w3.org/TR/REC-html40/.
[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC 1866, MIT/W3C, noviembre de 1995. Esta especificación también está disponible en hipertexto (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html)
[4] F Yergeau, G Nicol, G Adams, M Dürst: "Internationalization of the Hypertext Markup Language" (ftp://ds.internic.net/rfc/rfc2070.txt).
[5] ISO 8879:1986. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML)
[6] ISO/IEC 10179:1996. Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL).
[7] ISO/IEC 9899:1990. Programming languages -- C.
[8] The Unicode Consortium, "The Unicode Standard -- Worldwide Character Encoding -- Version 1.0", Addison-Wesley, Volume 1, 1991, Volume 2, 1992.
[9] "A Standard Default color Space for the Internet", version 1.10, M. Stokes, M. Anderson, S. Chandrasekar, and R. Motta, 5 de noviembre de 1996.
[10] CIE Publication 15.2-1986, "Colorimetry, Second Edition", ISBN 3-900-734-00-3 (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", RFC 1738, CERN, Xerox Corporation, University of Minnesota, diciembre de 1994
[12] "PNG (Portable Network Graphics) Specification, Version 1.0 specification" (http://www.w3.org/TR/REC-png-multi.html)
[13] Charles A. Poynton: "Gamma correction on the Macintosh Platform" (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium: "ICC Profile Format Specification, version 3.2", 1995 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)
[15] S C Johnson: "YACC - Yet another compiler compiler", Technical Report, Murray Hill, 1975
[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213
Durante la corta vida de HTML, ha habido varias propuestas de hojas de estilo con las que esta propuesta está en deuda. En especial las propuestas de Robert Raisch, Joe English y Pei Wei fueron decisivas.
Muchas personas han contribuido al desarrollo de CSS1. Nos gustaría dar las gracias especialmente a: Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood y Stephen Zilles.
Tres personas merecen mención especial: Dave Raggett (por su apoyo y su trabajo en HTML 3), Chris Lilley (por sus continuas contribuciones, especialmente en el área de fuentes y colores) y Steven Pemberton (por sus habilidades organizativas y también creativas).
(Este apéndice es informativo, no normativo)
La siguiente hoja de estilos está escrita de acuerdo con la presentación sugerida en la especificación de HTML 2.0 [3]. Algunos estilos, p.ej., colores, se han añadido por generalidad. Se sugiere que los AAUU utilicen una hoja de estilo por defecto similar a ésta.
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {
display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* con relación al padre */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* formato ajustado */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* también podría haberse usado 'border-bottom' */
A:link { color: blue } /* unvisited link */
A:visited { color: red } /* visited links */
A:active { color: lime } /* active links */
/* para establecer el borde de vínculo alrededor elemento IMG
son necesarios selectores contextuales */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
(Este apéndice es normativo)
Nota del traductor: Se recuerda al lector que la única versión normativa de este documento es la versión original en inglés que se encuentra en el sitio web del W3C. Ninguna parte del presente documento en castellano es normativa aunque se especifique lo contrario.
La gramática mínima de CSS (esto es, de cualquier versión de CSS) que necesita soportar cualquier implementación está definida en la sección 7. La gramática que figura a continuación define un lenguaje mucho más pequeño, un lenguaje que define la sintaxis de CSS1.
En cierto sentido sigue siendo, sin embargo, un superconjunto de CSS1: hay restricciones semánticas adicionales que no están expresadas en esta sintaxis. Un AU conforme debe adherirse, además, a las reglas de interpretación compatibles con versiones futuras (sección 7.1), a la notación de propiedades y valores (sección 5) y a la notación de unidades (sección 6). Además HTML impone restricciones, p.ej., en los valores posibles para el atributo 'CLASS'.
La gramática que sigue es LL(1) (obsérvese no obstante que los AAUU no deberían usarla directamente, ya que no expresa convenciones de interpretación, sino únicamente la sintaxis de CSS1). El formato de las producciones está optimizado para su utilización por personas, y se utilizan ciertas notaciones abreviadas no contempladas en yacc [15]:
* : 0 ó más + : 1 ó más ? : 0 ó 1 | : separa alternativas [] : agrupa
Las producciones son:
stylesheet
: [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
;
import
: IMPORT_SYM [STRING|URL] ';' /* P.ej., @import url(fun.css); */
;
unary_operator
: '-' | '+'
;
operator
: '/' | ',' | /* empty */
;
property
: IDENT
;
ruleset
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'
;
selector
: simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
| solitary_pseudo_element
;
/* Un "id" es un ID que está unido a un tipo de elemento
** por su izquierda, como en: P#p007
** Un "solitary_id" es un ID que no está unido así,
** como en: #p007
** Análogamente para clases y pseudo-clases.
*/
simple_selector
: element_name id? class? pseudo_class? /* p.ej.: H1.subject */
| solitary_id class? pseudo_class? /* p.ej.: #xyz33 */
| solitary_class pseudo_class? /* p.ej.: .author */
| solitary_pseudo_class /* p.ej.: :link */
;
element_name
: IDENT
;
pseudo_class /* como en: A:link */
: LINK_PSCLASS_AFTER_IDENT
| VISITED_PSCLASS_AFTER_IDENT
| ACTIVE_PSCLASS_AFTER_IDENT
;
solitary_pseudo_class /* como en: :link */
: LINK_PSCLASS
| VISITED_PSCLASS
| ACTIVE_PSCLASS
;
class /* como en: P.note */
: CLASS_AFTER_IDENT
;
solitary_class /* como en: .note */
: CLASS
;
pseudo_element /* como en: P:first-line */
: FIRST_LETTER_AFTER_IDENT
| FIRST_LINE_AFTER_IDENT
;
solitary_pseudo_element /* como en: :first-line */
: FIRST_LETTER
| FIRST_LINE
;
/* Tanto en el id como en el solitary id existe la restricción de que
** la parte que sigue al "#" debe ser un valor ID HTML válido;
** p.ej., "#x77" está bien, pero "#77" no.
*/
id
: HASH_AFTER_IDENT
;
solitary_id
: HASH
;
declaration
: property ':' expr prio?
| /* empty */ /* Evita errores de sintaxis... */
;
prio
: IMPORTANT_SYM /* !important */
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
| IDENT | hexcolor | URL | RGB ]
;
/* En el color existe la restricción de que debe
** tener 3 ó 6 dígitos hexadecimales (es decir, [0-9a-fA-F])
** después del "#"; p.ej., "#000" está bien, pero "#abcd" no.
*/
hexcolor
: HASH | HASH_AFTER_IDENT
;
A continuación figura el analizador léxico (tokenizer), escrito en notación flex [16]. Obsérvese que asume una implementación de flex de 8 bits. El analizador léxico no distingue entre mayúsculas y minúsculas (opción –i de la línea de comandos de flex).
unicode \\[0-9a-f]{1,4}
latin1 [¡-ÿ]
escape {unicode}|\\[ -~¡-ÿ]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-z]|{latin1}|{escape}
nmchar [-a-z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*
name {nmchar}+
d [0-9]
notnm [^-a-z0-9\\]|{latin1}
w [ \t\n]*
num {d}+|{d}*\.{d}+
string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT
%s AFTER_IDENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(0);}
<COMMENT>\n {/* ignore */}
<COMMENT>. {/* ignore */}
@import {BEGIN(0); return IMPORT_SYM;}
"!"{w}important {BEGIN(0); return IMPORTANT_SYM;}
{ident} {BEGIN(AFTER_IDENT); return IDENT;}
{string} {BEGIN(0); return STRING;}
{num} {BEGIN(0); return NUMBER;}
{num}"%" {BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm} {BEGIN(0); return LENGTH;}
{num}mm/{notnm} {BEGIN(0); return LENGTH;}
{num}cm/{notnm} {BEGIN(0); return LENGTH;}
{num}pc/{notnm} {BEGIN(0); return LENGTH;}
{num}in/{notnm} {BEGIN(0); return LENGTH;}
{num}px/{notnm} {BEGIN(0); return LENGTH;}
{num}em/{notnm} {BEGIN(0); return EMS;}
{num}ex/{notnm} {BEGIN(0); return EXS;}
<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}
":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name} {BEGIN(AFTER_IDENT); return HASH;}
"."{name} {BEGIN(AFTER_IDENT); return CLASS;}
url\({w}{string}{w}\) |
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\) {BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\) {BEGIN(0); return RGB;}
[-/+{};,#:] {BEGIN(0); return *yytext;}
[ \t]+ {BEGIN(0); /* ignore whitespace */}
\n {BEGIN(0); /* ignore whitespace */}
\<\!\-\- {BEGIN(0); return CDO;}
\-\-\> {BEGIN(0); return CDC;}
. {fprintf(stderr, "%d: Illegal character (%d)\n",
lineno, *yytext);}
(Este apéndice es informativo, no normativo)
Los documentos HTML pueden contener cualquiera de los aproximadamente 30.000 caracteres distintos definidos por Unicode. Muchos documentos necesitan sólo unos pocos centenares. Asimismo muchas fuentes no contienen más que unos pocos centenares de signos. Este apéndice, junto a la sección 5.2, explica cómo se emparejan los caracteres del documento con los signos de una fuente.
El contenido de un documento HTML es una secuencia de caracteres y etiquetas (markup). Para poder enviarlo "por la red", se codifica como una secuencia de bytes, utilizando una de las varias codificaciones posibles. El documento HTML debe ser decodificado para obtener nuevamente los caracteres. Por ejemplo, en Europa occidental es común utilizar el byte 224 para representar una a con acento grave (à), pero en hebreo es más común usar el 224 para representar el Aleph. En japonés, el significado de un byte depende normalmente de los bytes que le preceden. En algunas codificaciones, cada carácter se codifica con dos (o más) bytes.
El AU sabe cómo descodificar los bytes mirando en el parámetro "charset" del encabezado HTTP. Las codificaciones (valores de "charset") típicas son "ASCII" (para el inglés), "ISO-8859-1" (para Europa occidental), "ISO-8859-8" (para el hebreo), "Shift-JIS" (para el japonés). HTML [2] [4] permite unos 30.000 caracteres diferentes, en particular los definidos por Unicode. No hay muchos documentos que usen tantos caracteres diferentes, y mediante la elección de la codificación adecuada se asegura que el documento sólo necesitará un byte por carácter. Si en algún caso existen caracteres que se salgan fuera del rango de la codificación elegida, siempre pueden expresarse como referencias numéricas: 'Π' siempre representará a la letra griega mayúscula Pi, independientemente de la codificación usada. Obsérvese que esto conlleva que todos los AAUU deben estar preparados para cualquier carácter Unicode, incluso si sólo manejan unas pocas codificaciones.
Una fuente no contiene caracteres, contiene dibujos de caracteres, conocidos como signos. Los signos, en la forma de líneas o mapas de bits, constituyen una representación particular de un carácter. Ya sea explícita o implícitamente, cada fuente tiene una tabla asociada a ella, la tabla de codificación de la fuente, que dice de qué carácter es representación cada signo. En las fuentes de tipo 1, esta tabla se denomina vector de codificación.
En realidad, muchas fuentes contienen varios signos para el mismo carácter. Cuál de esos signos se use depende o bien de las reglas del idioma, o bien de las preferencias del diseñador.
Por ejemplo, en árabe todas las letras tienen cuatro formas distintas, dependiendo de si la letra se usa al comienzo de una palabra, en medio, al final o aislada. Es el mismo carácter en todos los casos, y por tanto sólo hay un carácter en el documento HTML, pero a la hora de imprimir, es distinto en cada caso.
También hay fuentes que dan al diseñador la libertad de elegir entre varias formas alternativas proporcionadas. Desgraciadamente CSS1 no proporciona todavía métodos para seleccionar dichas alternativas. Actualmente siempre se selecciona la forma por defecto.
Para hacer frente al problema de que una sola fuente puede no ser suficiente para mostrar todos los caracteres de un documento, o incluso de un solo elemento, CSS1 permite el uso de conjuntos de fuentes. Una fuente en CSS1 es una lista de fuentes, todas del mismo estilo y tamaño, que se prueban consecutivamente para ver si contienen un signo para un cierto carácter. Un elemento que contenga texto en inglés mezclado con símbolos matemáticos puede necesitar un conjunto de dos fuentes, una que contenga letras y dígitos y otra que contenga símbolos matemáticos. Véase en la sección 5.2 una descripción detallada del mecanismo de selección en conjuntos de fuentes.
A continuación figura un ejemplo de un conjunto de fuentes apropiado para un texto que se espera vaya a contener texto con caracteres latinos, caracteres japoneses y símbolos matemáticos:
BODY { font-family: Baskerville, Mincho, Symbol, serif }
Los caracteres disponibles en la fuente Baskerville (una fuente que sólo contiene caracteres latinos) serán tomados de esa fuente, los japoneses serán tomados de Mincho, y los símbolos matemáticos vendrán de Symbol. Cualquier otro carácter vendrá (se supone) de la familia tipográfica genérica 'serif'. La familia tipográfica 'serif' también se utilizará si una o más de las otras fuentes no esta disponible.
(Este apéndice es informativo, no normativo)
Vea el Tutorial Gamma de la especificación PNG [12] si todavía no está familiarizado con la corrección gamma.
En el cálculo, los AAUU que muestren la salida en un CRT (tubo de rayos catódicos) pueden suponer un CRT ideal y no tener en cuenta los posibles efectos causados por el difuminado (dithering) en el gamma aparente. Esto significa que la manipulación mínima que necesitan llevar a cabo en las plataformas actuales es:
"Aplicar gamma" significa que cada uno de los valores R, G y B debe convertirse a R'=Rgamma, G'=Ggamma, B'=Bgamma, antes de pasarlos al sistema operativo.
Esto puede hacerse rápidamente construyendo una tabla de búsqueda de 256 elementos cada vez que se abra el browser de esta manera:
for i := 0 to 255 do raw := i / 255; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end
lo cual evita a posteriori la necesidad de hacer cálculos complejos para cada atributo de color, y sobre todo para cada píxel.
(Este apéndice es informativo, no normativo)
El objetivo del trabajo en CSS1 ha sido crear un mecanismo simple de hojas de estilo para documentos HTML. La especificación actual representa un equilibrio entre la simplicidad requerida para utilizar hojas de estilo en la web, y la presión por parte de los autores que demandan mayor y mejor control visual. CSS1 ofrece:
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
con la hoja de estilos:
H1 { font-style: small-caps }
<H1>Headline</H1>
CSS1 no ofrece:
Esperamos ver extensiones de CSS en varias direcciones:
No esperamos que CSS se convierta en:
(Este apéndice es informativo, no normativo)
Este documento es una versión revisada de la Recomendación CSS1 que fue publicada por primera vez el 17 de diciembre de 1996. La lista que figura a continuación describe todos los cambios. Eligiendo la hoja de estilo alternativa "errata" todos los cambios aparecerán destacados.
Quisiéramos expresar nuestro agradecimiento a Komachi Yushi, Steve Byrne, Liam Quinn, Kazuteru Okahashi, Susan Lesch, y Tantek Çelik por su ayuda en la confección de esta edición revisada.
Nota del traductor: las relaciones de erratas y de errores que aparecen en el texto original se refieren a los cambios introducidos en la versión original del documento en inglés y no son relevantes para esta versión traducida, por lo que no se incluyen. Esta versión se basa en el documento publicado en enero de 1999.
Por el mismo motivo, la hoja de estilo alternativa "errata" no está disponible en este documento, pero sí en la versión original en inglés.
Copyright © 1994-2001 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Todos los derechos reservados. http://www.w3.org/Consortium/Legal/
Los titulares del copyright proporcionan los documentos públicos que se encuentran en el sitio web del W3C de acuerdo con la siguiente Licencia. El software y las Definiciones de Tipo de Documento (Document Type Definitions, DTDs) asociadas con las especificaciones del W3C están gobernados por el aviso de copyright de Software.
Por el uso y/o la copia de este documento, usted (el beneficiario de la Licencia del copyright) está de acuerdo en que ha leído, entendido y que respetará los siguientes términos y condiciones:
Se concede permiso para usar, copiar y distribuir los contenidos de este documento en cualquier medio y para cualquier propósito sin necesidad del pago de fianzas ni royalties, siempre y cuando se incluya la siguiente información en TODAS las copias de este documento, o partes del mismo, que usted utilice:
Cuando el espacio lo permita, debería incluirse una copia del texto completo de este AVISO. Le instamos a que mencione a los autores en cualquier programa, documento, u otro artículo o producto que usted cree como consecuencia de la implementación de los contenidos de este documento o de cualquier parte del mismo.
Esta licencia no concede permiso para crear modificaciones o documentos derivados de documentos del W3C. Sin embargo, caso de satisfacerse requerimientos adicionales (documentados en el Copyright FAQ), el W3C puede conceder permiso para crear modificaciones o documentos derivados a los individuos que satisfagan dichos requerimientos.
ESTE DOCUMENTO SE OFRECE "TAL COMO ESTÁ". LOS PROPIETARIOS DEL COPYRIGHT NO HACEN GARANTÍAS NI REPRESENTACIONES DE NINGÚN TIPO, EXPRESAS O IMPLÍCITAS, INCLUYENDO, AUNQUE SIN LIMITARSE A, LAS GARANTÍAS DE COMERCIALIZACIÓN, ADECUACIÓN A UN PROPÓSITO ESPECÍFICO, O TÍTULO; QUE LOS CONTENIDOS DEL DOCUMENTO SEAN APROPIADOS PARA CUALQUIER PROPÓSITO; NI QUE LA IMPLEMENTACIÓN DE TALES CONTENIDOS NO INFRINGIRÁ LAS PATENTES, DERECHOS DE AUTOR, MARCAS REGISTRADAS O COMERCIALES U OTROS DERECHOS DE TERCERAS PERSONAS.
LOS PROPIETARIOS DEL COPYRIGHT NO SERÁN RESPONSABLES DE NINGÚN DAÑO DIRECTO, INDIRECTO, ESPECIAL O CONSECUENTE DEBIDO A CUALQUIER USO DEL DOCUMENTO O DEL FUNCIONAMIENTO O IMPLEMENTACIÓN DE LOS CONTENIDOS DEL MISMO.
El nombre y marcas registradas de los propietarios del copyright NO pueden utilizarse en anuncios o publicidad relativos a este documento o a sus contenidos sin un permiso previo por escrito. Los derechos de autor de este documento pertenecerán en todo momento a los propietarios del copyright.