Hojas de Estilo en Cascada, nivel 1 (Cascading Style Sheets, level 1)

Recomendacin del W3C, 17 de diciembre de 1996, revisado el 11 de Enero de 1999

Esta versin (en ingls)
http://www.w3.org/TR/1999/REC-CSS1-19990111

ltima versin (en ingls)

http://www.w3.org/TR/REC-CSS1

Versin anterior (en ingls)

http://www.w3.org/TR/1999/REC-CSS1-961217

Autores
Hkon Wium Lee (howcome@w3.org) Bert Bos (bert@w3.org)

Estado de este documento

Este documento es una recomendacin del W3C. Ha sido revisado por Miembros del W3C (http://www.w3.org) y se ha llegado al acuerdo general de que la especificacin 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 difusin general de esta Recomendacin. Puede encontrarse una lista de las recomendaciones actuales y otros documentos tcnicos del W3C en http://www.w3.org/TR/. Este documento es una versin revisada del documento editado por primera vez el 17 de diciembre de 1996. Los cambios realizados desde la primera versin estn recogidos en el Apndice F. La lista de errores conocidos de esta especificacin est disponible en http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata.

Resumen
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 terminologa comn de publicacin electrnica. Una de las caractersticas fundamentales de CSS es que las hojas de estilo estn 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 tecnolgicas. Las reglas para la resolucin de conflictos entre las diferentes hojas de estilo se definen en esta especificacin. Esta recomendacin es el resultado de las actividades del W3C en el campo de las Hojas de Estilo. Para informacin complementaria sobre hojas de estilo, vase [1].

Tabla de contenidos
1. Resumen 2. Terminologa 3. 1 Conceptos bsicos 1. 1.1 Inclusin en HTML 2. 1.2 Agrupamiento 3. 1.3 Herencia 4. 1.4 Clase como selector 5. 1.5 ID como selector 6. 1.6 Selectores contextuales 7. 1.7 Comentarios 4. 2 Pseudo-clases y pseudo-elementos 1. 2.1 Pseudo-clases de vnculo 2. 2.2 Pseudo-elementos tipogrficos 3. 2.3 El pseudo-elemento 'first-line' 4. 2.4 El pseudo-elemento 'first-letter 5. 2.5 Pseudo-elementos en selectores 6. 2.6 Mltiples pseudo-elementos 5. 3 La cascada 1. 3.1 'important' 2. 3.2 Orden de cascada 6. 4 Modelo de formato 1. 4.1 Elementos en bloque 1. 4.1.1 Formato vertical 2. 4.1.2 Formato horizontal 3. 4.1.3 Elementos objeto de lista

4. 4.1.4 Elementos flotantes

4.2 Elementos en lnea 4.3 Elementos reemplazados 4.4 La altura de las lneas 4.5 El lienzo 4.6 Elementos 'BR' 7. 5 Propiedades CSS1 1. 5.1 Notacin para los valores de las propiedades 2. 5.2 Propiedades de fuente 1. 5.2.1 Emparejamiento de fuentes 2. 5.2.2 'font-family' 3. 5.2.3 'font-style' 4. 5.2.4 'font-variant' 5. 5.2.5 'font-weight' 6. 5.2.6 'font-size' 7. 5.2.7 'font' 3. 5.3 Propiedades de color y fondo 1. 5.3.1 'color' 2. 5.3.2 'background-color' 3. 5.3.3 'background-image' 4. 5.3.4 'background-repeat' 5. 5.3.5 'background-attachment' 6. 5.3.6 'background-position' 7. 5.3.7 'background' 4. 5.4 Propiedades de texto 1. 5.4.1 'word-spacing' 2. 5.4.2 'letter-spacing' 3. 5.4.3 'text-decoration' 4. 5.4.4 'vertical-align' 5. 5.4.5 'text-transform' 6. 5.4.6 'text-align' 7. 5.4.7 'text-indent' 8. 5.4.8 'line-height' 5. 5.5 Propiedades de cuadro 1. 5.5.1 'margin-top' 2. 5.5.2 'margin-right' 3. 5.5.3 'margin-bottom' 4. 5.5.4 'margin-left' 5. 5.5.5 'margin' 6. 5.5.6 'padding-top' 7. 5.5.7 'padding-right' 8. 5.5.8 'padding-bottom'

2. 3. 4. 5. 6.

9. 5.5.9 'padding-left' 10. 5.5.10 'padding' 11. 5.5.11 'border-top-width 12. 5.5.12 'border-right-width' 13. 5.5.13 'border-bottom-width' 14. 5.5.14 'border-left-width' 15. 5.5.15 'border-width' 16. 5.5.16 'border-color' 17. 5.5.17 'border-style' 18. 5.5.18 'border-top' 19. 5.5.19 'border-right' 20. 5.5.20 'border-bottom' 21. 5.5.21 'border-left' 22. 5.5.22 'border' 23. 5.5.23 'width' 24. 5.5.24 'height' 25. 5.5.25 'float' 26. 5.5.26 'clear' 6. 5.6 Propiedades de clasificacin 1. 5.6.1 'display' 2. 5.6.2 'white-space' 3. 5.6.3 'list-style-type' 4. 5.6.4 'list-style-image' 5. 5.6.5 'list-style-position' 6. 5.6.6 'list-style' 8. 6 Unidades 1. 6.1 Unidades de longitud 2. 6.2 Unidades porcentuales 3. 6.3 Unidades de color 4. 6.4 URL 9. 7 Conformidad con CSS1 1. Compatibilidad con versiones futuras 10. 8 Referencias 11. 9 Agradecimientos 1. 2. 3. 4. 5. 6.
Apndice A: Ejemplo de hoja de estilo para HTML 2.0 Apndice B: Gramtica CSS1 Apndice C: Codificacin Apndice D: Correccin gamma Apndice E: Aplicabilidad y extensibilidad de CSS1 Apndice F: Cambios desde la versin del 17 de diciembre de 1996

Terminologa
analizador CSS1 (CSS1 parser) un Agente de Usuario que lee hojas de estilo CSS1 atributo (attribute) atributo HTML AU (UA) Agente de Usuario, normalmente un navegador, explorador o browser autor (author) el autor del documento HTML caractersticas avanzadas de CSS1 (CSS1 advanced features) caractersticas descritas en esta especificacin pero que no se consideran parte de las caractersticas bsicas de CSS1 caractersticas bsicas de CSS1 (CSS1 core features) la parte de CSS1 que se requiere a todos los AAUU conformes con CSS1 CSS Hojas de Estilo en Cascada (Cascading Style Sheets) CSS1 Hojas de Estilo en Cascada, Nivel 1. Este documento define CSS1, que es un mecanismo simple de hojas de estilo para la Web. declaracin (declaration) una propiedad (p.ej. 'font-size') y su correspondiente valor (p.ej. '12pt') dimensiones intrnsecas (intrinsic dimensions) la anchura y la altura tal y como las define el elemento por s mismo, sin las restricciones de lo que le rodea. En esta especificacin se da por hecho que todos los elementos reemplazados y slo los elementos reemplazados van con dimensiones intrnsecas. diseador (designer) el diseador de una hoja de estilo documento (document) documento HTML elemento (element) elemento HTML elemento en bloque (block-level element) un elemento que tiene un salto de lnea antes y otro despus (p.ej., 'H1' en HTML) elemento en lnea (inline elements)

un elemento que no tiene un salto de lnea antes y otro despus (p.ej., 'STRONG' en HTML) elemento hijo (child element) un subelemento (subelement) en terminologa SGML [5] elemento padre (parent element) el elemento contenedor (containing element) en terminologa SGML [5] elemento reemplazado (replaced element) un elemento acerca del cual el formateador CSS slo conoce sus dimensiones. En HTML, los elementos 'IMG', 'INPUT', 'TEXTAREA', 'SELECT' y 'OBJECT' pueden ser ejemplos de elementos reemplazados. Por ejemplo, el contenido del elemento 'IMG' se reemplaza normalmente por la imagen a la que apunta el atributo SRC. CSS1 no define cmo se averiguan las dimensiones intrnsecas. extensin HTML (HTML extension) cdigos creados por compaas de AAUU, la mayora de las veces para implementar ciertos efectos visuales. Los elementos "FONT", "CENTER" y "BLINK" son ejemplos de extensiones HTML, as como el atributo "BGCOLOR". Uno de los objetivos de CSS es proporcionar una alternativa a las extensiones HTML. hoja de estilo (style sheet) un conjunto de reglas HTML Lenguaje de Etiquetas para Hipertexto (HyperText Markup Language) [2], una aplicacin del SGML lector (reader) la persona para la que se representa el documento lienzo (canvas) la parte de la superficie de dibujo del AU en la cual se representan los elementos peso (weight) la prioridad de una regla propiedad (property) un parmetro estilstico sobre el que se puede actuar a travs de CSS. Esta especificacin define una lista de propiedades y sus valores correspondientes. pseudo-clase (pseudo-class) las pseudo-clases se utilizan en CSS para permitir que informacin externa al propio documento HTML (p.ej., el hecho de que un vnculo haya sido visitado o no) sirva para clasificar elementos

pseudo-elemento (pseudo-element) los pseudo-elementos se utilizan en CSS para hacer referencia a objetos tipogrficos (p.ej., la primera lnea de un elemento) en lugar de a elementos estructurales regla (rule) una declaracin (p.ej., 'font-family : helvetica') y su selector (p.ej. 'H1') secuencia ficticia de etiquetas (fictional tag sequence) un artificio para describir el comportamiento de las pseudo-clases y los pseudo-elementos selector (selector) una cadena que identifica a qu elementos se aplica la regla correspondiente. Un selector puede ser o bien un selector simple (p.ej., 'H1') o bien un selector contextual (p.ej. 'H1 B'), el cual consiste en varios selectores simples. selector contextual (contextual selector) un selector que corresponde a elementos segn la posicin de stos en la estructura del documento. Un selector contextual consiste en varios selectores simples. P.ej., el selector contextual 'H1.Inicial B' consiste en dos selectores simples, 'H1.Inicial' y 'B'. selector simple (simple selector) un selector que corresponde a elementos segn el tipo y/o atributos de stos, y no segn su posicin en la estructura del documento. P.ej., 'H1.Inicial' es un selector simple. SGML Lenguaje de Etiquetas Generalizado Estndar (Standard Generalized Markup Language) [5], del cual es aplicacin el HTML tamao de fuente (font-size) el tamao para el que una fuente ha sido diseada. Normalmente, el tamao de una fuente es aproximadamente igual a la distancia entre la parte inferior de la letra con descendente ms baja hasta la parte superior de la letra con ascendente ms alta y (opcionalmente) con una marca diacrtica. tipo de elemento (element type) un identificador genrico (generic identifier)en terminologa SGML [5] usuario (user) sinnimo de lector A lo largo de esta especificacin las comillas simples ('...') se utilizan para encerrar cdigo HTML y CSS.

1 Conceptos bsicos
Disear hojas de estilo sencillas es fcil. Slo hay que saber un poco de HTML y algo de terminologa bsica de publicacin electrnica. 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 declaracin ('color:blue'). La declaracin tiene dos partes: una propiedad ('color') y un valor ('blue'). Aunque este ejemplo slo 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 caracterstica fundamental del CSS es que las hojas de estilo pueden combinarse) determinar la presentacin 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 especificacin de HTML [2]. La propiedad 'color' es una de las de alrededor de cincuenta propiedades que determinan la presentacin de un documento HTML. En esta especificacin se define lalista de propiedades y sus posibles valores. Los autores de HTML slo necesitan escribir hojas de estilo si desean sugerir un estilo especfico 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 apndice A contiene una hoja de estilo de ejemplo para presentar los documentos HTML tal y como se sugiere en la especificacin HTML 2.0 [3]. La gramtica formal del lenguaje CSS1 se define en el Apndice B.

1.1 Inclusin en HTML

Para que una hoja de estilo pueda influir en la presentacin, el AU debe saber que existe. La especificacin HTML define la forma de enlazar el

HTML con las hojas de estilo. Esta seccin es por tanto informativa, pero no normativa:
<HTML> <HEAD> <TITLE>Ttulo</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="http://estilo.com/chevere" TITLE="Chvere"> <STYLE TYPE="text/css"> @import url(http://estilo.com/basico); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>El ttulo es azul</H1> <P STYLE="color: green">Mientras que el prrafo 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 notacin CSS '@import', y un atributo 'STYLE' de un elemento contenido en el elemento 'BODY'. Esta ltima opcin 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 automticamente 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 tendrn en cuenta el elemento 'STYLE', pero su contenido ser tratado como parte del elemento 'BODY', y mostrado como tal. Durante una fase de transicin, 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 intrpretes conformes con SGML no considerarn la hoja de estilo del ejemplo como un comentario que no deba tenerse en cuenta.

1.2 Agrupamiento.
Para reducir el tamao de las hojas de estilo, se pueden agrupar selectores en listas separndolos con una coma:
H1, H2, H3 { font-family: helvetica }

Anlogamente, las declaraciones tambin pueden agruparse:

H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; }

Adems, algunas propiedades tienen su propia sintaxis de agrupamiento:

H1 { font: bold 12pt/14pt helvetica }

Que es equivalente al ejemplo previo.

1.3 Herencia
En el primer ejemplo, se estableca que el color de los elementos 'H1' fuera azul. Supongamos que hay un elemento 'H1' que contiene un elemento enfatizado:
<H1>El ttulo <EM>es</EM> importante!</H1>

Si no se ha asignado ningn color al elemento 'EM', la palabra "es" enfatizada heredar el color del elemento padre, es decir, tambin 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 propsito:
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 intrprete 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. (Vase en la seccin 5.3 ms informacin 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 mayora de los casos. P.ej., la propiedad 'background' no se hereda, pero el fondo del elemento padre se ver por defecto a travs 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' heredarn el valor calculado de 'line-height' (es decir, 12pt), no el porcentaje.

1.4 Clase como selector

Para incrementar el grado de control sobre los elementos, se ha aadido 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 tambin 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 } pastoral /* todos los elementos de la clase (CLASS=pastoral) */

Slo se puede especificar una clase por selector. Por lo tanto, 'P.pastoral.marino' es un selector no vlido en CSS1. (Los selectores contextuales, descritos ms 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 prcticamente a cualquier otro. No es recomendable aprovecharse de esta caracterstica, ya que as se elimina un nivel de estructura que tiene significado universal (elementos HTML). Una estructura basada en 'CLASS' slo es til dentro de un dominio restringido, en el que el significado de una clase se haya establecido de antemano.

1.5 ID como selector

HTML [2] tambin 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 smbolo '#':
#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 diseadas para acrecentar la estructura de los documentos, esta caracterstica permitir a los autores crear documentos que se vern 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.

1.6 Selectores contextuales

La herencia permite a los diseadores CSS escribir menos. En lugar de establecer todas las propiedades de estilo, se pueden crear primero los valores por defecto y despus 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 saldrn en rojo, estn dentro o fuera de un 'H1'. Es probable que slo quisiramos 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 patrn de bsqueda 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 slo har referencia a los elementos que se correspondan con el ltimo selector simple (en este caso el elemento 'EM'), y slo si concuerdan con el patrn de bsqueda. En CSS1 los selectores contextuales slo buscan relaciones de descendencia, pero pueden introducirse otros tipos de relacin (p.ej. padre-hijo) en revisiones posteriores. En el ejemplo anterior, el patrn de bsqueda 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 ms especfico, debido a que el patrn de bsqueda es

ms largo. Vase el orden de cascada (seccin 3.2) para ms informacin a este respeto. Los selectores contextuales pueden buscar tipos de elementos, atributos CLASS, atributos ID o combinaciones de stos:
DIV P .rojizo H1 #x78y CODE DIV.notaalmargen H1 { { { { font: small sans-serif } color: red } background: blue } 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 tambin se pueden agrupar:
H1 B, H2 B, H1 EM, H2 EM { color: red }

que es equivalente a:
H1 H2 H1 H2 B { color: red } B { color: red } EM { color: red } EM { color: red }

1.7 Comentarios
Los comentarios literales en hojas de estilo CSS son similares a los del lenguaje de programacin 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.

2 Pseudo-clases y pseudo-elementos
En CSS1, el estilo normalmente se asocia con un elemento segn la posicin 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 cdigo 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. Ms 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.

2.1 Pseudo-clases de vnculo

Los Agentes de Usuario suelen representar los vnculos an no visitados de manera distinta a los ya visitados. En CSS1, se puede actuar sobre esto a travs de pseudo-clases del elemento 'A':
A:link { color: red } A:visited { color: blue } A:active { color: lime } /* vnculos no visitados */ /* vnculos visitados */ /* vnculos activos */

Todos los elementos 'A' que tengan un atributo 'HREF' sern colocados en uno y slo uno de estos grupos (es decir, los vnculos destino no se ven afectados). Los AAUU pueden elegir mover un elemento de 'visited' a 'link' al cabo de un cierto tiempo. Un vnculo 'active' es uno que est siendo seleccionado en ese momento por el lector (p.ej., haciendo clic con un botn del ratn). Una pseudo-clase de vnculo 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 pseudoclases de vnculo. P.ej., una hoja de estilo puede especificar legalmente que el 'font-size' de un vnculo 'active' debera ser mayor que el de un vnculo 'visited', pero no es necesario que el AU reformatee dinmicamente el documento cuando el lector seleccione el vnculo '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 vnculo no tendrn ningn 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 seleccionarn en CSS1 los mismos elementos. Los nombres de pseudo-clases no requieren coincidencia de maysculas y minsculas. 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/">vnculo externo</A>

Si el vnculo de este ejemplo ha sido visitado, ser mostrado en azul. Obsrvese que los nombres de las clases normales preceden a las pseudo-clases en el selector.

2.2 Pseudo-elementos tipogrficos

Algunos efectos tipogrficos comunes estn asociados no con elementos estructurales, sino ms bien con elementos tipogrficos resultantes del formato del documento en el lienzo. En CSS1 se puede hacer referencia a dos de estos elementos tipogrficos a travs de pseudo-elementos: la primera lnea de un elemento, y la primera letra. CSS1 bsico: Los AAUU pueden no tener en cuenta las reglas que contegan ':first-line' o ':first-letter' en el selector, o, alternativamente,

soportar slo parte de las propiedades de estos pseudo-elementos. (Vase la seccin 7.)

2.3 El pseudo-elemento 'first-line'

El pseudo-elemento 'first-line' se utiliza para aplicar estilos especiales a la primera lnea 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 lnea de un artculo del Newsweek.</P>

En un AU de modo texto, esto podra formatearse del siguiente modo:

LA PRIMERA LNEA DE UN artculo del Newsweek.

La secuencia ficticia de etiquetas de este ejemplo es la siguiente:

<P> <P:first-line> La primera lnea de un </P:first-line> artculo del Newsweek. </P>

La etiqueta final de 'first-line' se inserta al final de la primera lnea que resulta al formatear en el lienzo. El pseudo-elemento 'first-line' slo puede asociarse a elementos en bloque. El pseudo-elemento 'first-line' es similar a un elemento en lnea, 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).

2.4 El pseudo-elemento 'first-letter'

El pseudo-elemento 'first-letter' se utiliza para letras capitales, que es un efecto tipogrfico muy comn. Es similar a un elemento en lnea 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 'firstletter': propiedades de fuente (5.2), propiedades de color y fondo (5.3), 'text-decoration' (5.4.3), 'vertical-align' (slo si 'float' es 'none', 5.4.4), 'texttransform' (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 lneas:
<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 artculo de The Economist.</P> </BODY> </HTML>

Si un AU de modo texto soporta el pseudo-elemento 'first-letter' (lo ms seguro es que no lo soporte) el cdigo anterior podra formatearse del siguiente modo:
| AS PRIMERAS |__palabras de un artculo 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 artculo de The Economist. </P>

Obsrvese que las etiquetas del pseudo-elemento 'first-letter' estn contiguas a su contenido (es decir, al carcter inicial), mientras que la

etiqueta inicial del pseudo-elemento 'first-line' se inserta justo a continuacin de la etiqueta inicial del elemento al cual se asocia. El AU define qu caracteres estn contenidos en el elemento 'first-letter'. Normalmente deben incluirse las comillas que precedan a la primera letra:
|| |\ /|s vale | \/ |pjaro | |en mano | |que ciento volando", dice el refrn.

Cuando el prrafo comienza con otro signo de puntuacin (p.ej. parntesis o puntos suspensivos) u otros caracteres que normalmente no se consideren como letras (p.ej., dgitos y smbolos matemticos), normalmente no se tiene en cuenta el pseudo-elemento 'first-letter'. Algunos idiomas pueden tener reglas especficas sobre cmo tratar ciertas combinaciones de letras. En neerlands, por ejemplo, si la combinacin de letras "ij" aparece al comienzo de una palabra, deberan considerarse ambas contenidas en el pseudo-elemento 'first-letter'. El pseudo-elemento 'first-letter' slo puede ser asociado a elementos en bloque.

2.5 Pseudo-elementos en selectores

En un selector contextual, los pseudo-elementos slo estn 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 prrafo</A>

En este ejemplo la primera letra de todos los elementos 'P' con 'CLASS=inicial' aparecera en rojo. Cuando se combinan con clases o con pseudo-clases, los pseudo-elementos deben situarse al final del selector. Slo puede especificarse un pseudo-elemento por selector.

2.6 Mltiples pseudo-elementos

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 lneas</P>

En este ejemplo, la primera letra de cada elemento 'P' sera verde y tendra un tamao de 24pt. El resto de la lnea (resultante del formateo en el lienzo) sera azul, mientras que el resto del prrafo sera rojo. Suponiendo que haya un salto de lnea 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 lneas </P>

Obsrvese que el elemento 'first-letter' est dentro del elemento 'firstline'. Las propiedades establecidas en 'first-line' sern 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 travs de una etiqueta </P:firstline> 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>

3 La cascada

En CSS, ms de una hoja de estilo puede influir simultneamente en la presentacin de un documento. Dos son las razones principales de esta caracterstica: modularidad y equilibrio autor/lector. Modularidad Un diseador de hojas de estilo puede combinar varias hojas de estilo (parciales) para reducir redundancias:
@import url(http://www.style.org/pastoral); @import url(http://www.style.org/marino); H1 { color: red } */ /* prevalece sobre las hojas importadas

Equilibrio autor/lector Tanto los autores como los lectores pueden influir sobre la presentacin a travs de hojas de estilo. Para ello usan el mismo lenguaje de hojas de estilo, reflejando as una caracterstica fundamental de la Web: todo el mundo puede convertirse en editor. El AU es libre de elegir el mecanismo para hacer referencia a las hojas de estilo personales. Algunas veces surgirn conflictos entre las hojas de estilo que influyen en una presentacin. La resolucin 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 usarn 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 tambin estn en cascada las unas con las otras, en el orden en que son importadas, de acuerdo con las reglas de cascada definidas ms 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 estn 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 declaracin. As es fcil ver qu reglas de la propia hoja de estilo prevalecen sobre las reglas de las hojas de estilo importadas.

3.1 'important'
Los diseadores 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 declaracin tiene peso normal. Una regla del lector con una declaracin importante prevalecer sobre una regla del autor con una declaracin normal. Una regla del autor con una declaracin importante prevalecer sobre una regla del lector con una declaracin importante.

3.2 Orden de cascada

Los conflictos entre reglas son intrnsecos al mecanismo de CSS. Para hallar el valor de una combinacin elemento/propiedad, debe seguirse el siguiente algoritmo: 1. Encontrar todas las declaraciones que se aplican al elemento/propiedad en cuestin. Una declaracin se aplica si el selector corresponde al elemento en cuestin. Si no se aplica ninguna declaracin, se usa el valor heredado. Si no hay valor heredado (este es el caso para el elemento HTML y para las propiedades que no se heredan) se usa el valor inicial. 2. Ordenar las declaraciones por pesos explcitos: las declaraciones marcadas como '!important' tienen ms peso que las declaraciones no marcadas (normales). 3. Ordenar por origen: las hojas de estilo del autor prevalecen sobre las hojas de estilo del lector, que prevalecen sobre los valores por defecto del agente de usuario. Una hoja de estilo importada tiene el mismo origen que la hoja de estilo desde la cual ha sido importada. 4. Ordenar por especificidad del selector: los selectores ms especficos prevalecern sobre los ms generales. Para averiguar la especificidad, se cuenta el nmero de atributos ID en el selector (a), el nmero de atributos CLASS en el selector (b), y el nmero de nombres de etiqueta en el selector (c). Concatenando los tres nmeros (en un sistema numrico de base elevada) se obtiene la especificidad. A continuacin figuran algunos ejemplos:
5. LI {...} /* a=0 b=0 c=1 -> especificidad = 1 */

6. 7. 8. 9. 10.

UL LI UL OL LI LI.red UL OL LI.red #x34y 100 */

{...} {...} {...} {...}

/* a=0 b=0 c=2 -> especificidad = 2 */ /* a=0 b=0 c=3 -> especificidad = 3 */ /* a=0 b=1 c=1 -> especificidad = 11 */ /* a=0 b=1 c=3 -> especificidad = 13 */ {...} /* a=1 b=0 c=0 -> especificidad =

Los pseudo-elementos y las pseudo-clases se cuentan como elementos y clases normales respectivamente. 11. Ordenar por orden especificado: si dos reglas tienen el mismo peso, se impone la ltima especificada. Se considera que las reglas de las hojas de estilo importadas van antes que las reglas de la propia hoja de estilo. La bsqueda del valor de la propiedad puede darse por terminada una vez que una regla tenga un peso mayor que las dems reglas que se aplican a la misma combinacin 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 travs de un men desplegable. Una declaracin en el atributo 'STYLE' de un elemento (vase el ejemplo de la seccin 1.1) tiene el mismo peso que una declaracin 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' sera rojo. Aunque la especificidad es la misma para ambas declaraciones, la declaracin en el atributo 'STYLE' prevalecer sobre la del elemento 'STYLE', debido a la regla de cascada nmero 5. El AU puede opcionalmente tener en cuenta otros atributos estilsticos 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 estn al comienzo de la hoja de estilo del autor y pueden ser anuladas por reglas de estilo subsiguientes. En una fase

transitoria esta poltica facilitar que coexistan atributos estilsticos con hojas de estilo.

4 Modelo de formato
CSS1 asume un modelo de formato simple basado en cuadros (boxes), en el que cada elemento formateado da lugar a uno o ms 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 mrgenes.
_________________________________________ | | | margen (transparente) | | __________________________________ | | | | | | | borde | | | | ____________________________ | | | | | | | | | | | relleno | | | | | | ______________________ | | | | | | | | | | | | | | | contenido | | | | | | | |______________________| | | | | | |____________________________| | | | |__________________________________| | |________________________________________| | | anchura del elemento | anchura del cuadro |

El tamao 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 mrgenes son siempre transparentes, de manera que el elemento padre se ver a travs de ellos. El tamao del cuadro es la suma de la anchura del elemento (es decir, el texto o imagen formateados) y las reas de relleno, bordes y mrgenes. Desde el punto de vista del formateador hay dos tipos principales de elementos: en bloque y en lnea.

4.1 Elementos en bloque

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 cmo los mrgenes 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 travs suyo) | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e relleno de LI (azul) | | | | | | | | | | | | | | | | h 1er elemento de la lista f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | max(a, c) | | | <- ntese | | | _______________________________ | | | 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 travs suyo) | | | | | |_______________________________________| | | | | | | | | G | | | |_______________________________________________| | | | | C | |_______________________________________________________|

Tcnicamente, las propiedades de relleno y margen no se heredan. Pero como muestra el ejemplo, la colocacin 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, habran aparecido entre el relleno y los mrgenes. El siguiente diagrama introduce cierta terminologa 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; slo se define para elementos en lnea 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. Slo est definida para elementos en lnea 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.

4.1.1 Formato vertical

La anchura del margen de los elementos en bloque no flotantes especifica la distancia mnima a los bordes a los cuadros adyacentes. Dos o ms mrgenes verticales adyacentes (es decir, sin borde, relleno ni contenido entre ellos) se colapsan para usar el mximo de los dos valores de margen. En la mayora de los casos, despus de colapsarse los mrgenes verticales, el resultado es visualmente ms agradable y ms parecido a lo que espera el diseador. En el ejemplo anterior, los mrgenes entre los dos elementos 'LI' se colapsan usando el mximo entre el margen inferior ('margin-bottom') del primer elemento 'LI' y el margen superior ('margin-top') del segundo elemento 'LI'. Anlogamente, si el relleno entre el elemento 'UL' y el primer elemento 'LI' (la constante "E") hubiera sido cero, los mrgenes del elemento 'UL' y del primer elemento 'LI' habran sido colapsados. En el caso de mrgenes negativos, el mximo absoluto de los mrgenes negativos adyacentes se resta del mximo de los mrgenes positivos adyacentes. Si no hay mrgenes positivos, el mximo absoluto de los mrgenes adyacentes negativos se resta de cero.

4.1.2 Formato horizontal

La posicin y tamao 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 prrafo precedente sea igual a la anchura del padre. Si el elemento es un elemento reemplazado, un valor 'auto' de 'width' se reemplaza automticamente por la anchura intrnseca del elemento. Tres de las siete propiedades pueden ser establecidas a 'auto': 'marginleft', 'width' y 'margin-right'. Para los elementos reemplazados, un valor de 'width' igual a 'auto' se reemplaza por la anchura intrnseca, de modo que para ellos slo puede haber dos valores 'auto'. El 'width' tiene un valor mnimo 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 lmite, ya sea porque se ha especificado as explcitamente, o porque valiendo 'auto' las reglas que se describen ms adelante lo hacen demasiado pequeo, el valor ser reemplazado por el valor mnimo. Si exactamente una de las propiedades 'margin-left', 'width' y 'marginright' 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 ms de una de las tres vale 'auto', y una de ellas es 'width', entonces las otras ('margin-left' y/o 'margin-right') sern 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 lnea o flotante, se tratar como si se hubiera establecido a cero. A diferencia de los mrgenes verticales, los mrgenes horizontales no se colapsan.

4.1.3 Elementos objeto de lista

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 liststyle. El marcador se coloca de acuerdo con el valor de la propiedad liststyle:
<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 despus </UL> <UL CLASS=COMPACT> <LI>el primer elemento va primero <LI>el segundo elemento va despus </UL>

Este ejemplo puede formatearse como sigue:

* el primer elemento va primero * el segundo elemento va despus * el primer elemento va primero * el segundo elemento va despus

Si el texto fuera de derecha a izquierda, los marcadores habran estado en el lado derecho del cuadro.

4.1.4 Elementos flotantes

Por medio de la propiedad 'float', puede declararse que un elemento est fuera del flujo normal de los elementos, formatendose 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 mrgenes, bordes y relleno del propio elemento sern respetados, y los mrgenes nunca se colapsarn con los mrgenes de elementos adyacentes. Un elemento es posicionado de acuerdo con las siguientes restricciones (vase la seccin 4.1 para una explicacin de los trminos): 1. El lado exterior izquierdo de un elemento flotante a la izquierda no puede estar a la izquierda del lado interior izquierdo de su elemento padre. Anlogamente para los elementos flotantes a la derecha. 2. El lado exterior izquierdo de un elemento flotante a la izquierda debe estar a la derecha del lado exterior derecho de todos los elementos flotantes a la izquierda anteriores (en el cdigo fuente HTML), o la parte superior de aqul debe estar por debajo de la parte inferior de stos. Anlogamente para los elementos flotantes a la derecha. 3. El lado exterior derecho de un elemento flotante a la izquierda no puede estar a la derecha del lado exterior izquierdo de ningn elemento flotante a la derecha que est a la derecha de aqul. Anlogamente para los elementos flotantes a la derecha. 4. La parte superior de un elemento flotante no puede estar por encima de la parte superior interna de su padre. 5. La parte superior de un elemento flotante no puede estar por encima de la parte superior de ningn elemento flotante o en bloque anterior. 6. La parte superior de un elemento flotante no puede estar por encima de la parte superior de ningn cuadro de lnea (vase la seccin 4.4) cuyo contenido preceda al elemento flotante en el cdigo fuente HTML. 7. Un elemento flotante debe ser colocado lo ms arriba que sea posible. 8. Un elemento flotante a la izquierda debe ser colocado lo ms a la izquierda posible, y un elemento flotante a la derecha lo ms a la derecha posible. Tiene preferencia una posicin ms alta que una que est ms a la izquierda/derecha.

<STYLE TYPE="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> <BODY> <P> <IMG SRC=img.gif> Texto de ejemplo sin ms... </BODY>

Este ejemplo podra formatearse como sigue:

________________________________________ | | | | | | | | | | | | | | | | m a r g e n d e B O D Y max(margen de BODY, margin de P) ______________________________ | Texto de ejemplo | mrgenes sin ms propsito | _____ que mostrar cmo se | | | mueven los elementos | | IMG | flotantes a la | | | izquierda del | |_____| elemento padre al | mismo tiempo que se | de IMG respetan sus mrgenes, | bordes y rellenos. |Obsrvese cmo se colapsan los |mrgenes verticales de los |elementos en bloque no flotantes.

| | | | | | | | | | | | |

m a r g e n d e P

Obsrvese que el margen del elemento 'P' est alrededor del elemento 'IMG' flotante. Hay dos situaciones en que un elemento flotante puede superponerse con los mrgenes, bordes y rellenos de otros elementos:

cuando el elemento flotante tiene un margen negativo: los mrgenes negativos de los elementos flotantes se respetan como en otros elementos en bloque. cuando el elemento flotante es ms ancho o ms alto que el elemento en que est contenido.

4.2 Elementos en lnea

Los elementos que no son formateados como elementos en bloque son elementos en lnea. Un elemento en lnea puede compartir el espacio de una lnea con otros elementos. Considrese 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 lnea. Si el elemento 'P' es lo suficientemente ancho como para que se formatee todo el elemento en una sola lnea, habr dos elementos en lnea en esa lnea:
Aqu aparecen varias palabras enfatizadas.

Si no hay suficiente espacio en una sola lnea, un elemento en lnea ser partido en varios cuadros:
<P>Aqu aparecen <EM>varias palabras</EM> enfatizadas.</P>

Este ejemplo podra formatearse como sigue:

Aqu aparecen varias palabras enfatizadas

Si el elemento tiene mrgenes, bordes, rellenos u otras decoraciones asociadas, stos no tendrn efecto all donde el elemento est partido:
-----Aqu aparecen |varias ------------palabras| enfatizadas --------

(Esta "figura" esta ligeramente distorsionada debido al uso de grficos ASCII.) Vase en la seccin 4.4 una descripcin de cmo calcular la altura de las lneas.

4.3 Elementos reemplazados

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 intrnsecas. Si el valor de la propiedad 'width' es 'auto', se usar la anchura intrnseca 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 mtodo 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 lnea.

4.4 La altura de las lneas

Todos los elementos tienen una propiedad 'line-height' (altura de lnea) que, en principio, da la altura total de una lnea de texto. Para llegar a esa altura de lnea, se aade espacio por encima y por debajo del texto de la lnea. Por ejemplo, si el texto tiene 12pt de alto y el 'line-height' est establecido en '14pt', se aade un espacio de 2pt, a saber, 1pt por encima y 1pt por debajo de la lnea. Los elementos vacos influyen en este clculo igual que lo hacen los elementos con contenido. La diferencia entre el tamao de la fuente y la altura de la lnea se llama interlineado. A la mitad del interlineado se le denomina semiinterlineado. Despus del formato, cada lnea formar un cuadro de lnea rectangular. Si una lnea de texto contiene secciones con valores diferentes de 'lineheight' (porque haya elementos en lnea dentro de la lnea), entonces cada una de esas secciones tiene su propio semi-interlineado por encima y por debajo. La altura del cuadro de lnea va desde la parte superior de la seccin ms alta hasta la parte inferior de la seccin ms baja. Obsrvese que la parte superior y la parte inferior no corresponden necesariamente al elemento ms alto, ya que los elementos pueden posicionarse verticalmente por medio de la propiedad 'vertical-align'. Para formar un prrafo, cada cuadro de lnea se inserta inmediatamente debajo de la lnea anterior. Obsrvese que los mrgenes, bordes y rellenos por encima y por debajo de elementos en lnea no reemplazados no influyen en la altura de la lnea. En otras palabras: si el 'line-height' es demasiado pequeo para el relleno o borde elegidos, se superpondr con el texto de otras lneas. Los elementos reemplazados de la lnea (p.ej., imgenes) pueden agrandar el cuadro de lnea si la parte superior del elemento reemplazado (es decir, incluyendo relleno, borde y margen) est por encima de la seccin de texto ms alta, o si su parte inferior est por debajo de la seccin ms baja. En el caso normal en que slo haya un valor de 'line-height' para todo el prrafo y no haya imgenes altas, la definicin recin dada asegura que las lneas de base de lneas sucesivas estarn separadas exactamente

por un 'line-height'. Esto es importante cuando deben alinearse columnas de texto con fuentes distintas, por ejemplo en una tabla. Obsrvese que esto no imposibilita que los textos de dos lneas 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 slo contiene letras maysculas), ya que entonces se pueden acercar ms las lneas.

4.5 El lienzo
El lienzo es la parte de la superficie de dibujo del AU en que se representan los documentos. Ningn elemento estructural del documento corresponde al lienzo, lo cual plantea dos cuestiones a la hora de formatear un documento:

en base a qu deberan establecerse las dimensiones del lienzo? cuando el documento no cubre todo el lienzo, cmo debera representarse esta rea?

Una respuesta razonable a la primera pregunta es que la anchura inicial del lienzo se base en el tamao de la ventana, pero CSS1 deja esta cuestin a merced del AU. Tambin es razonable esperar que el AU cambie la anchura del lienzo cuando se cambie el tamao de la ventana, pero esto tambin est fuera del alcance de CSS1. Las extensiones HTML han sentado un precedente para la segunda cuestin: los atributos del elemento 'BODY' establecen el fondo de todo el lienzo. Con el fin de tener en cuenta las suposiciones de los diseadores, 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 representacin 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'.

4.6 Elementos BR
Las propiedades y valores de CSS1 no pueden describir el comportamiento del elemento 'BR'. En HTML, el elemento 'BR' especifica un salto de lnea entre palabras. En efecto, el elemento se reemplaza por un salto de lnea. Versiones futuras de CSS podran manejar contenido aadido y reemplazado, pero los formateadores CSS1 deben tratar los 'BR' de forma especial.

5 Propiedades CSS1
Las hojas de estilo influyen sobre la presentacin de los documentos asignando valores a propiedades de estilo. Esta seccin enumera las propiedades de estilo definidas y la lista correspondiente de sus posibles valores en CSS1.

5.1 Notacin para los valores de las propiedades

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 ms comunes son <longitud>, <porcentaje>, <url>, <nmero> y <color>; stos se describen en la seccin 6. Los tipos ms especializados (p.ej., <familia-defuentes> 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 (,) tambin 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 yuxtaposicin es ms fuerte que la doble barra, y la doble barra es ms 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:

Un asterisco (*) indica que el tipo, palabra o grupo precedente se repite cero o ms veces. Un signo ms (+) indica que el tipo, palabra o grupo precedente se repite una o ms veces. Un signo de interrogacin (?) indica que el tipo, palabra o grupo precedente es opcional. Un par de nmeros entre llaves ({A,B}) indica que el tipo, palabra o grupo precedente, se repite al menos A veces y como mucho B veces.

5.2 Propiedades de fuente

El establecimiento de propiedades de fuente ser uno de los usos ms frecuente de las hojas de estilo. Desgraciadamente, no existe una taxonoma bien definida y universalmente aceptada para clasificar las fuentes, y algunos trminos que se aplican a una familia tipogrfica pueden no ser apropiados para otras. P.ej., para referirse a texto inclinado se utiliza normalmente el trmino 'italic', pero tambin pueden utilizarse otros trminos como Oblique, Slanted, Incline, Cursive o Kursiv. Por tanto, no es un problema sencillo aplicar propiedades tpicas de seleccin de fuentes a una fuente especfica. CSS1 define las propiedades 'font-family', 'font-style', 'font-variant' y 'fontweight', 'font-size', 'font'. 5.2.1 Emparejamiento de fuentes

Al no haber una taxonoma universal aceptada para las propiedades de las fuentes, el emparejamiento entre propiedades y fuentes tipogrficas 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 disposicin de todos ellos la misma biblioteca de fuentes tipogrficas). 1. El Agente de Usuario hace (o accede a) una base de datos de todas las propiedades relevantes con respecto a CSS1 de todas las fuentes de cuya existencia sabe el AU. El AU puede saber de la existencia de una fuente porque haya sido instalada localmente o porque haya sido previamente descargada de la web. Si hay dos fuentes que tengan exactamente las mismas propiedades, una de ellas se descarta. 2. En un elemento dado, y para cada carcter de ese elemento, el AU integra todas las propiedades de fuente aplicables a ese elemento. A partir del conjunto completo de propiedades, el AU utiliza la propiedad 'font-family' para elegir una familia tipogrfica tentativa. El resto de las propiedades se prueban con la familia de acuerdo con los criterios de emparejamiento descritos para cada propiedad. Si hay emparejamientos para todas las propiedades restantes, entonces sa es la fuente emparejada con el elemento dado. 3. Si no hay una fuente emparejada dentro de la familia tipogrfica procesada en el paso 2, y si hay una familia tipogrfica ('fontfamily') alternativa en el conjunto de fuentes, entonces se repite el paso 2 con la siguiente familia tipogrfica alternativa. 4. Si hay una fuente emparejada, pero no contiene un signo para el carcter considerado, y si hay una familia tipogrfica alternativa en el conjunto de fuentes, entonces se repite el paso 2 con la siguiente familia tipogrfica alternativa. Vase el apndice C para una descripcin de la codificacin de fuentes y caracteres. 5. Si no hay fuente dentro de la familia seleccionada en 2, entonces se usa la familia tipogrfica por defecto del AU y se repite el paso 2, usando el mejor emparejamiento que pueda lograrse con la fuente por defecto. (El algoritmo recin descrito puede optimizarse para evitar tener que comprobar las propiedades CSS1 con cada carcter.) Las reglas de emparejamiento de cada propiedad mencionada en el paso (2) son las siguientes:

1. Se comprueba 'font-style' en primer lugar. 'italic' se satisfar si hay o bien una fuente en la base de datos de fuentes del AU etiquetada con la palabra clave CSS 'italic' (preferentemente) o bien con 'oblique'. De otro modo los valores deben coincidir exactamente o font-style fallar. 2. A continuacin se comprueba 'font-variant'. 'normal' se empareja con una fuente que no est etiquetada como 'small-caps' (versalitas). 'small-caps' se empareja (1) con una fuente etiquetada como 'small-caps', (2) con una fuente en la que las versalitas sean sintetizadas, o (3) por una fuente en la que todas las letras minsculas estn reemplazadas por letras maysculas. Una fuente de versalitas puede ser sintetizada escalando electrnicamente las letras maysculas de una fuente normal. 3. A continuacin se comprueba 'font-weight'. No fallar nunca (ver 'font-weight' ms abajo). 4. 'font-size' debe emparejarse dentro de un margen de tolerancia dependiente del AU. Normalmente, los tamaos de las fuentes escalables se redondean al pxel ms cercano, mientras que la tolerancia de fuentes de mapas de bits podra ser tan grande como del 20%. Los clculos ulteriores, p.ej., usando 'em' en otras propiedades, se basarn en el valor del 'font-size' realmente utilizado, no en el que ha sido especificado. 5.2.2 'font-family' Valor: [[<nombre-de-familia> | <familia-genrica>],]* [<nombre-de-familia> | <familia-genrica>] 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 tipogrficas y/o nombres de familias genricas ordenadas por prioridad. A diferencia de la mayora de las dems 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: <nombre-de-familia>

El nombre de una familia tipogrfica para elegir. En el ltimo ejemplo, "gill" y "helvetica" son familias tipogrficas. <familia-genrica> En el ejemplo anterior, el ltimo valor es un nombre de familia genrica. Se definen las siguientes familias genricas:

'serif' (p.ej. Times) 'sans-serif' (p.ej. Helvetica) 'cursive' (p.ej. Zapf-Chancery) 'fantasy' (p.ej. Western) 'monospace' (p.ej. Courier)

Se recomienda a los diseadores de hojas de estilo ofrecer una familia tipogrfica genrica como ltima alternativa. Los nombres de fuentes que contengan espacios en blanco deberan 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 despus del nombre de la fuente, y cualquier secuencia de caracteres de espacio dentro del nombre de la fuente se convierte a un nico espacio. 5.2.3 'font-style' 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"), itlica y oblicua dentro de una familia tipogrfica. 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 electrnicamente inclinando una fuente normal. Las fuentes que incluyan las palabras Oblique, Slanted o Incline en su nombre estarn 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 estarn normalmente marcadas como 'italic'.
H1, H2, H3 { font-style: italic } H1 EM { font-style: normal }

En este ejemplo, el texto enfatizado contenido en un ttulo 'H1' aparecer con letra normal. 5.2.4 'font-variant' Valor: normal | small-caps Inicial: normal Se aplica a: todos los elementos Se hereda: s Valores porcentuales: N/A Otro tipo de variacin dentro de una familia tipogrfica son las versalitas. En una fuente de letras versalitas las letras minsculas son similares a las maysculas, pero de menor tamao 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 minsculas por caracteres de caja alta escalados. Como ltimo recurso, se podrn utilizar letras maysculas 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 tipogrfica, como por ejemplo fuentes con numerales de estilo antiguo, numerales versalitas, letras condensadas o expandidas, etc. CSS1 no tiene propiedades para seleccionar stas. CSS1 bsico: en el caso de que esta propiedad provoque que el texto se transforme a maysculas, se aplicarn las mismas consideraciones que para la propiedad 'text-transform'. 5.2.5 'font-weight' 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 nmero indica un peso que es al menos tan pesado como su predecesor. La palabra clave 'normal' es sinnima de '400', y 'bold' (negrita) es sinnima 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 numrica para la lista de 9 valores.
P { font-weight: normal } H1 { font-weight: 700 } /* 400 */ /* 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 ms 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 tipogrfica. El uso de unas familias a otras es bastante variable; por ejemplo, una fuente que uno podra pensar que es

negrita (bold) podra 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 diseo. Al no haber un uso estndar de nombres, los valores de la propiedad de peso en CSS1 se dan segn una escala numrica 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 asociacin de valores de peso numricos a las otras denominaciones de pesos dentro de cada familia slo se pretende preservar el orden de grosores dentro de esa familia. Sin embargo, la siguiente heurstica nos dice cmo se hace la asignacin en los casos tpicos:

Si la fuente tipogrfica ya usa una escala tipogrfica con nueve valores (como p.ej. hace OpenType), los pesos de la fuente deberan aplicarse directamente. Si hay al mismo tiempo una fuente marcada como Medium y otra marcada como Book, Regular, Roman o Normal, entonces Medium se asigna normalmente al valor '500'. La fuente marcada como "Bold" corresponder normalmente al valor de peso '700'. Si hay menos de nueve pesos en la familia, el algoritmo por defecto para rellenar los "huecos" es el siguiente: si '500' est sin asignar, se le asignar la misma fuente que para '400'. Si cualquiera de los valores '600', '700', '800' o '900' sigue sin estar asignado, se asignan a la misma fuente que la siguiente palabra clave ms pesada asignada, si la hay, o a la de la siguiente ms ligera en caso contrario. Si cualquiera de los valores '300', '200' o '100' sigue sin estar asignado, se asigna a la misma fuente que la siguiente palabra clave ms ligera, si la hay, o a la de la siguiente ms pesada en caso contrario.

Los siguientes dos ejemplos ilustran el proceso. Supnganse cuatro pesos en la familia "Ejemplo 1", de ms ligero a ms pesado: Regular, Medium, Bold, Heavy. Y supnganse seis pesos en la familia "Ejemplo 2": Book, Medium, Bold, Heavy, Black, ExtraBlack. Obsrvese cmo 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" "Example1 Bold" "Example1 Heavy"

| | |

500 700 800

| | |

600 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 intencin de las palabras clave 'bolder' y 'lighter' es hacer ms pesada o ms ligera la fuente dentro de la familia, y teniendo en cuenta que una familia puede no tener fuentes asignadas a todos los valores simblicos de peso, el emparejamiento de 'bolder' se hace con la siguiente fuente ms pesada disponible en el cliente dentro de la misma familia, y el emparejamiento de 'lighter' se hace con la siguiente fuente ms ligera dentro de la familia. Para ser ms precisos, el significado de las palabras clave relativas 'bolder' y 'lighter' es el siguiente:

'bolder' selecciona el siguiente peso que est asignado a una fuente que sea ms pesada que la heredada. Si no existe tal peso, el resultado es simplemente el siguiente valor numrico ms pesado (y la fuente permanece sin cambiar), a menos que el valor heredado fuera '900', en cuyo caso el peso resultante tambin sera '900'. 'lighter' es similar, pero funciona en el sentido opuesto: selecciona la siguiente palabra clave ms ligera con una fuente diferente de la heredada, a menos que no exista tal fuente, en cuyo caso selecciona el siguiente valor numrico ms ligero (y mantiene la fuente sin cambios).

No hay ninguna garanta de que vaya a haber una fuente ms pesada para cada uno de los valores de 'font-weight'; por ejemplo, algunas familias tipogrficas pueden tener solamente una fuente normal y una fuente negrita (bold), otras pueden tener nueve fuentes de pesos diferentes. La nica garanta es que una fuente con un valor dado no ser menos pesada que fuentes con valores ms ligeros. 5.2.6 'font-size' Valor: <tamao-absoluto> | <tamao-relativo> | <longitud> | <porcentaje> Inicial: medium

Se aplica a: todos los elementos Se hereda: s Valores porcentuales: relativos al tamao de fuente del elemento padre <tamao-absoluto> Una palabra clave de tipo <tamao-absoluto> es un ndice a una tabla de tamaos de fuente calculados y guardados por el AU. Los valores posibles son: [ xx-small | x-small | small | medium | large | xlarge | xx-large ]. Para la pantalla de una computadora se sugiere un factor de escala de 1,5 entre ndices sucesivos; si la fuente 'medium' es de 10pt, la fuente 'large' podra ser de 15pt. Medios diferentes pueden necesitar diferentes factores de escala. Por otra parte, a la hora de calcular la tabla, el AU debera tener en cuenta la calidad y disponibilidad de las fuentes. La tabla puede ser distinta de una familia a otra. <tamao-relativo> Una palabra clave de tipo <tamao-relativo> se interpreta como relativa con respecto a la tabla de tamaos de fuente y al tamao de fuente del elemento padre. Los valores posibles son: [ larger | smaller ]. Por ejemplo, si el elemento padre tiene un tamao de fuente 'medium', un valor 'larger' har que el tamao de fuente del elemento considerado sea 'large'. Si el tamao del elemento padre no est cercano a una de las entradas de la tabla, el AU es libre de interpolar entre entradas de la tabla o redondear a la ms cercana. El AU puede tener que extrapolar valores de la tabla si el valor numrico rebasa los lmites de las palabras clave. Los valores de longitud y los porcentuales no deberan tener en cuenta la tabla de tamaos de fuente cuando se calcule el tamao del elemento. No se permiten valores negativos. En todas las dems propiedades, los valores de longitudes expresados en 'em' y 'ex' se refieren al tamao de fuente del elemento actual. En la propiedad 'font-size', estas unidades de longitud se refieren al tamao de fuente del elemento padre. Obsrvese que una aplicacin puede reinterpretar un tamao explcito, dependiendo del contexto. Por ejemplo, dentro de una escena de realidad virtual una fuente puede obtener un tamao diferente debido a la distorsin 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 idnticas. 5.2.7 'font' 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: slo 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 'fontfamily' en un mismo lugar de una hoja de estilo. La sintaxis de esta propiedad se basa en la notacin abreviada tipogrfica tradicional para establecer mltiples propiedades relacionadas con los tipos de letra. Para una definicin de los valores iniciales y permitidos, vanse las propiedades anteriormente definidas. Las propiedades para las cuales no se dan valores se establecen a su valor inicial.
P P P P P { { { { { font: font: font: font: font: 12pt/14pt sans-serif } 80% sans-serif } x-large/110% "new century schoolbook", serif } bold italic large Palatino, serif } normal small-caps 120%/120% fantasy }

En la segunda regla, el valor porcentual del tamao de fuente ('80%') se refiere al tamao de fuente del elemento padre. En la tercera regla, el porcentaje de altura de lnea se refiere al tamao de fuente del propio elemento. En las tres primeras reglas del ejemplo anterior, las propiedades 'fontstyle', 'font-variant' y 'font-weight' no se mencionan explcitamente, 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, implcitamente, 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 tamao de la fuente) y 'fontfamily' ('fantasy'). Se deduce que la palabra clave 'normal' se aplica a las dos restantes propiedades: 'font-style' y 'font-weight'.

5.3 Propiedades de color y fondo

Estas propiedades describen el color (a menudo llamando en ingls 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. Tambin se puede establecer la posicin de la imagen, si la imagen se repite y cmo 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 travs de los hijos, ya que el valor inicial de 'background-color' es transparente ('transparent'). 5.3.1 'color' 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 } EM { color: rgb(255,0,0) } /* lenguaje natural */ /* RGB con rango 0-255 */

Vase en la seccin 6.3 una descripcin de los valores de color posibles. 5.3.2 'background-color' 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 }

5.3.3 'background-image' 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, tambin debera 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 }

5.3.4 'background-repeat' 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 cmo 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 imgenes 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 slo se repetir verticalmente. 5.3.5 'background-attachment' 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 'backgroundattachment' determina si sta est fija con relacin 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 bsico: 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' (Vase la seccin 7.) 5.3.6 'background-position' 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 tamao del propio elemento Si se ha especificado una imagen de fondo, el valor de 'backgroundposition' especifica la posicin 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 slo se da un valor porcentual o una longitud, este valor slo establece la posicin horizontal, y la posicin vertical ser el 50%. Si se dan dos valores, la posicin horizontal corresponde al primero. Se permite combinar longitudes con valores porcentuales, p.ej., '50% 2cm'. Se permiten posiciones negativas. Tambin se pueden usar como valores palabras clave que indican la posicin 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:

'top left' y 'left top' significan ambas lo mismo que '0% 0%'. 'top', 'top center' y 'center top' significan lo mismo que '50% 0%'. 'right top' y 'top right' significan lo mismo que '100% 0%'. 'left', 'left center' y 'center left' significan lo mismo que '0% 50%'. 'center' y 'center center' significan lo mismo que '50% 50%'. 'right', 'right center' y 'center right' significan lo mismo que '100% 50%'. 'bottom left' y 'left bottom' significan lo mismo que '0% 100%'. 'bottom', 'bottom center' y 'center bottom' significan lo mismo que '50% 100%'. 'bottom right' y 'right bottom' significan lo mismo que '100% 100%'.

Ejemplos:
BODY BODY BODY BODY { { { { background: background: background: background: url(banner.jpeg) url(banner.jpeg) url(banner.jpeg) url(banner.jpeg) right top } top center } center } bottom } /* 100% 0% /* 50% 0% /* 50% 50% /* 50% 100% */ */ */ */

Si la imagen de fondo est fija con relacin al lienzo (vase la propiedad 'background-attachment' ms arriba), la imagen se coloca con relacin al lienzo y no con relacin 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. 5.3.7 'background' Valor: <background-color> || <background-image> || <backgroundrepeat> || <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, 'backgroundcolor', 'background-image','background-repeat', 'backgroundattachment' 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, slo se ha dado un valor para 'background-color', y todas las dems propiedades individuales se han establecido a su valor inicial. En la segunda regla, se han especificado todas las propiedades individuales.

5.4 Propiedades de texto

5.4.1 'word-spacing' 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 aade el espacio especificado al espacio por defecto entre palabras. Los valores pueden ser negativos, pero puede haber lmites especficos de cada implementacin. El AU es libre de elegir el algoritmo exacto de espaciado. El espaciado de palabras tambin puede verse influido por el tipo de justificacin (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 bsico: Los AAUU pueden interpretar cualquier valor de 'wordspacing' como 'normal'. (Vase la seccin 7.) 5.4.2 'letter-spacing' 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 aade el espacio especificado al espacio por defecto entre caracteres. Los valores pueden ser negativos, pero puede haber lmites especficos de cada implementacin. El AU es libre de elegir el algoritmo exacto de espaciado. El espaciado de letras tambin puede verse influido por el tipo de justificacin (que es un valor de la propiedad 'text-align').
BLOCKQUOTE { letter-spacing: 0.1em }

Aqu, el espaciado de letras entre cada carcter de los elementos 'BLOCKQUOTE' se vera 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 explcitamente 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 deberan usar ligaduras.

CSS1 bsico: Los AAUU pueden interpretar cualquier valor de 'letterspacing' como 'normal' (vase la seccin 7.) 5.4.3 'text-decoration' Valor: none | [ underline || overline || line-through || blink ] Inicial: none Se aplica a: todos los elementos Se hereda: no, pero vase la clarificacin ms abajo Valores porcentuales: N/A Esta propiedad describe las decoraciones que se aaden al texto de un elemento. Si el elemento no tiene texto (p.ej. el elemento 'IMG' en HTML) o es un elemento vaco (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 decoracin del texto deberan derivar del valor de la propiedad 'color'. Esta propiedad no es heredada, pero los elementos deberan concordar con sus padres. P.ej., si un elemento est subrayado, la lnea debera 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 subrayaran los textos de todos los vnculos (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. 5.4.4 'vertical-align' Valor: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje> Inicial: baseline Se aplica a: elementos en lnea 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:

'baseline' (lnea de base) alinea la lnea de base del elemento (o la parte inferior si el elemento no tiene lnea de base) con la lnea de base del padre 'middle' (medio) alinea el punto medio vertical del elemento (normalmente una imagen) con la lnea de base ms la mitad de la altura x del padre 'sub' representa el elemento como un subndice 'super' representa el elemento como un superndice 'text-top' (texto superior) alinea la parte superior del elemento con la parte superior de la fuente del elemento padre 'text-bottom' (texto inferior) alinea la parte inferior del elemento con la parte inferior de la fuente del elemento padre Hay otro conjunto de palabras clave que son relativas a la lnea formateada a la que pertenece el elemento: 'top' (superior) alinea la parte superior del elemento con el elemento ms alto de la lnea. 'bottom' (inferior) alinea la parte inferior del elemento con el elemento ms bajo de la lnea. Cuando se usa la alineacin 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 lnea de base del elemento (o la lnea inferior, si no tiene lnea de base), en la cantidad especificada, por encima de la lnea de base del elemento. Son posibles valores negativos. P.ej., un valor de "-100%" bajar el elemento de modo que la lnea de base del elemento acabe donde debera haber estado la lnea de base de la lnea siguiente. Esto permite un control preciso sobre la posicin vertical de los elementos que no tienen una lnea de base (como p.ej. las imgenes que se usan en lugar de letras).

Se espera que en una versin futura de CSS se permita un valor de tipo <longitud> para esta propiedad. 5.4.5 'text-transform' Valor: capitalize | uppercase | lowercase | none Inicial: none Se aplica a: todos los elementos Se hereda: s Valores porcentuales: N/A 'capitalize' convierte en mayscula el primer carcter de cada palabra 'uppercase' convierte en maysculas todas las letras del elemento 'lowercase' convierte en minsculas todas las letras del elemento 'none' neutraliza el valor heredado La transformacin que se lleva finalmente a cabo depende del idioma en que est el texto. Vanse en [4] diferentes formas de encontrar el idioma de un elemento.
H1 { text-transform: uppercase }

Este ejemplo convertira los elementos 'H1' en texto en maysculas. CSS1 bsico: 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 transformacin es diferente de la especificada en las tablas de conversin de caja de Unicode [8]. 5.4.6 'text-align' 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 cmo se alinea el texto dentro del elemento. El algoritmo de justificacin 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' estarn centrados. Obsrvese 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 bsico: Los AAUU pueden tratar 'justify' como 'left' o 'right', segn que la direccin de escritura por defecto del elemento sea de izquierda a derecha o de derecha a izquierda respectivamente. 5.4.7 'text-indent' 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 sangra de la primera lnea formateada. El valor de 'text-indent' puede ser negativo, pero puede haber limitaciones especficas de cada implementacin. No se inserta sangra en medio de un elemento que haya sido roto por otro (como el 'BR' en HTML). Ejemplo:
P { text-indent: 3em }

5.4.8 'line-height' Valor: normal | <nmero> | <longitud> | <porcentaje> Inicial: normal Se aplica a: todos los elementos Se hereda: s Valores porcentuales: relativos al tamao de la fuente del propio elemento

Esta propiedad establece la distancia entre las lneas de base de dos lneas adyacentes. Cuando se especifica un valor numrico, la altura de lnea est dada por el tamao de fuente del elemento considerado multiplicado por el valor numrico. La diferencia entre eso y un valor porcentual est en el modo en que se hereda el valor: cuando se especifica un valor numrico, los elementos hijos heredarn 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 lnea:
DIV { line-height: 1.2; font-size: 10pt } DIV { line-height: 1.2em; font-size: 10pt } DIV { line-height: 120%; font-size: 10pt } /* nmero */ /* longitud */ /* porcentaje */

Un valor 'normal' establece la altura de lnea a un valor razonable para la fuente del elemento. Se sugiere que los AAUU asignen al valor 'normal' un nmero entre 1,0 y 1,2. Vase en la seccin 4.4 la descripcin de cmo influye 'line-height' en el formato de los elementos en bloque.

5.5 Propiedades de cuadro

Las propiedades de cuadro establecen el tamao, el permetro y la posicin de los cuadros que representan a los elementos. En la seccin 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 dems propiedades de margen slo establecen sus lados respectivos. Las propiedades de relleno describen cunto 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 slo sus lados respectivos.

Las propiedades de borde establecen los bordes de un elemento. Cada elemento tiene cuatro bordes, uno en cada lado, que estn definidos por su anchura, su color y su estilo. Las propiedades 'width' y 'height' establecen el tamao del cuadro, y las propiedades 'float' y 'clear' pueden alterar la posicin de los elementos. 5.5.1 'margin-top' 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 ms cercano Esta propiedad establece el margen superior de un elemento:
H1 { margin-top: 2em }

Se permiten valores negativos, pero puede haber limitaciones especficas de cada implementacin. 5.5.2 'margin-right' 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 ms cercano Esta propiedad establece el margen derecho de un elemento:
H1 { margin-right: 12.3% }

Se permiten valores negativos, pero puede haber limitaciones especficas de cada implementacin. 5.5.3 'margin-bottom' 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 ms cercano Esta propiedad establece el margen inferior de un elemento:
H1 { margin-bottom: 3px }

Se permiten valores negativos, pero puede haber limitaciones especficas de cada implementacin. 5.5.4 'margin-left' 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 ms cercano Esta propiedad establece el margen izquierdo de un elemento:
H1 { margin-left: 2em }

Se permiten valores negativos, pero puede haber limitaciones especficas de cada implementacin. 5.5.5 'margin' 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 ms 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 mrgenes superior, derecho, inferior e izquierdo respectivamente. Si slo 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 mrgenes 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 especficas de cada implementacin. 5.5.6 'padding-top' 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 ms cercano Esta propiedad establece el relleno superior de un elemento.
BLOCKQUOTE { padding-top: 0.3em }

Los valores de relleno no pueden ser negativos. 5.5.7 'padding-right' 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 ms cercano Esta propiedad establece el relleno derecho de un elemento.

BLOCKQUOTE { padding-right: 10px }

Los valores de relleno no pueden ser negativos. 5.5.8 'padding-bottom' 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 ms cercano Esta propiedad establece el relleno inferior de un elemento.
BLOCKQUOTE { padding-bottom: 2em }

Los valores de relleno no pueden ser negativos. 5.5.9 'padding-left' 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 ms cercano Esta propiedad establece el relleno izquierdo de un elemento.
BLOCKQUOTE { padding-left: 20% }

Los valores de relleno no pueden ser negativos. 5.5.10 'padding' 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 ms cercano

La propiedad 'padding' es una propiedad abreviada para establecer las propiedades 'padding-top', 'padding-right', 'padding-bottom' y 'paddingleft' 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 slo 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 tamao de fuente del elemento: '1em' es igual al tamao de la fuente en uso. Los valores de relleno no pueden ser negativos. 5.5.11 '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 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' tendrn la misma anchura de borde independientemente del tamao 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. 5.5.12 'border-right-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 derecho de un elemento. Por lo dems es anloga a la propiedad 'border-top-width'. 5.5.13 'border-bottom-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 dems es anloga a la propiedad 'border-top-width'. 5.5.14 'border-left-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 dems es anloga a la propiedad 'border-top-width'. 5.5.15 'border-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, interpretndose de la siguiente manera:

un valor: las cuatro anchuras de borde se establecen a ese valor dos valores: las anchuras de borde superior e inferior se establecen al primer valor, y las de los bordes derecho e izquierdo al del segundo tres valores: el primero es la anchura del borde superior, el segundo la del derecho e izquierdo, y el tercero la del inferior cuatro valores: superior, derecho, inferior e izquierdo respectivamente

En los ejemplos que siguen, los comentarios indican las anchuras resultantes de los bordes superior, derecho, inferior e izquierdo respectivamente:
H1 H1 */ H1 */ H1 */ { border-width: thin } { border-width: thin thick } { border-width: thin thick medium } /* thin thin thin thin */ /* thin thick thin thick /* thin thick medium thin

{ border-width: thin thick medium thin } /* thin thick medium thin

Los bordes no pueden ser negativos. 5.5.16 'border-color' 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, asignndose estos valores a los diferentes lados de manera anloga a la explicada anteriormente para la propiedad 'border-width'. Si no se especifica ningn 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 lnea continua (solid) negra. 5.5.17 'border-style' 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, establecindose los valores de los cuatro lados de manera anloga a la explicada anteriormente para la propiedad 'border-width'.
#xy34 { border-style: solid dotted }

En este ejemplo, los bordes horizontales sern continuos ('solid') y los bordes verticales punteados ('dotted'). Al ser el valor inicial de los estilos de los bordes 'none' (ninguno), ningn borde ser visible a menos que se establezca el estilo del borde. El significado de los posibles estilos de borde es el siguiente: none (ninguno) no se dibuja el borde (independientemente del valor de la propiedad 'border-width') dotted (punteado)

el borde es una lnea punteada dibujada encima del fondo del elemento dashed (a trazos) el borde es una lnea a trazos dibujada encima del fondo del elemento solid (continuo) el borde es una lnea continua double (doble) el borde es una lnea doble dibujada encima del fondo del elemento. La suma de cada una de las dos lneas ms el espacio entre ellas es igual al valor <anchura-de-borde>. groove (canal) se dibuja un canal o acanaladura 3D con colores basados en el valor <color>. ridge (cresta) se dibuja una cresta o saliente 3D con colores basados en el valor <color>. inset (bajorrelieve) se dibuja un bajorrelieve 3D con colores basados en el valor <color>. outset (altorrelieve) se dibuja un altorrelieve 3D con colores basados en el valor <color>. CSS1 bsico: Los AAUU pueden interpretar cualquier valor 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' y 'outset' como 'solid'. 5.5.18 'border-top' 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 igualarn 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. Obsrvese que mientras que la propiedad 'border-style' acepta hasta cuatro valores, esta propiedad slo acepta un valor de estilo. 5.5.19 'border-right' 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 dems es equivalente a la propiedad 'border-top'. 5.5.20 'border-bottom' 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 dems es equivalente a la propiedad 'border-top'. 5.5.21 'border-left' 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 dems es equivalente a la propiedad 'border-top'. 5.5.22 'border' 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 continuacin:
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 ms 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 despus de la propiedad 'border-left' no es relevante.

Obsrvese que si bien la propiedad 'border-width' acepta hasta cuatro valores de longitud, esta propiedad slo acepta uno. 5.5.23 'width' 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 ms til para elementos reemplazados tales como imgenes. 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 sern establecidas a las dimensiones intrnsecas del elemento. No se permiten valores negativos. Vase en la seccin 4 sobre el modelo de formato una descripcin de la relacin entre esta propiedad y el relleno y el margen. 5.5.24 'height' 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 ms til para elementos reemplazados, tales como imgenes. La altura debe ser respetada, debindose 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 sern establecidas a las dimensiones intrnsecas 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 bsico: 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. 5.5.25 'float' 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 lnea 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'). Vase en la seccin 4.1.4 una especificacin 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 imgenes en lnea, pero tambin se aplica a elementos de texto.

5.5.26 'clear' 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. Ms 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 }

5.6 Propiedades de clasificacin

Estas propiedades, ms que especificar parmetros visuales especficos, lo que hacen es clasificar elementos en categoras. Las propiedades de estilo de lista describen cmo 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 heredarn de padres a hijos. Sin embargo, slo tendrn efecto en aquellos elementos que tengan un valor de 'display' igual a 'list-item'. En HTML ste normalmente el caso de los elementos 'LI'. 5.6.1 'display' 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 pgina impresa, una pantalla de computadora, etc.) y cmo 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 aade 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 lnea en la misma lnea que el contenido previo. El cuadro se dimensiona de acuerdo con el tamao del contenido una vez formateado. Si el contenido es textual, puede abarcar varias lneas, y habr un cuadro en cada lnea. Las propiedades de margen, borde y relleno se aplican a los elementos 'inline', pero no tendrn ningn efecto en los saltos de lnea. Un valor de 'none' desactiva la presentacin 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 presentacin de las imgenes. 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 representacin de elementos sugerida por la especificacin HTML [2]. CSS1 bsico: Los AAUU pueden no tener en cuenta el valor de 'display' y usar solamente los valores por defecto del AU (vase la seccin 7). 5.6.2 'white-space' Valor: normal | pre | nowrap Inicial: normal Se aplica a: elementos en bloque Se hereda: s Valores porcentuales: N/A

Esta propiedad declara cmo se manipulan los espacios existentes en el interior del elemento: con el modo 'normal' (segn el cual los espacios en blanco se colapsan), 'pre' (que se comporta como el elemento 'PRE' de HTML) o 'nowrap' (segn el cual los cambios de lnea slo 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 representacin de elementos sugerida por la especificacin HTML [2]. CSS1 bsico: Los AAUU pueden no tener en cuenta la propiedad 'whitespace' en las hojas de estilo del autor y del lector, y usar en su lugar los valores por defecto del AU (vase la seccin 7). 5.6.3 'list-style-type' Valor: disc | circle | square | decimal | lower-roman | upper-roman | loweralpha | 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 } OL { list-style-type: lower-alpha } OL { list-style-type: lower-roman } /* 1 2 3 4 5 etc. */ /* a b c d e etc. */ /* i ii iii iv v etc. */

5.6.4 'list-style-image' 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) }

5.6.5 'list-style-position' 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 cmo se dibuja el marcador de objetos de lista con relacin al contenido. Para ver un ejemplo de formato vase la seccin 4.1.3. 5.6.6 'list-style' Valor: [disc | circle | square | decimal | lower-roman | upper-roman | loweralpha | 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 notacin 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. Considrese 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 slo se utilizarn estilos de lista 'lower-alpha'. Por ello se recomienda establecer la propiedad 'liststyle' nicamente en los elementos de tipo lista:
OL.alpha UL { list-style: lower-alpha } { 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.

6 Unidades
6.1 Unidades de longitud
El formato de una unidad de longitud es un carcter opcional de signo ('+' o '-', siendo '+' el valor por defecto) seguido inmediatamente de un nmero (con o sin punto decimal) seguido inmediatamente de un identificador de unidad (una abreviacin de dos letras). Despus del nmero '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 especficas de cada implementacin. Si en algn caso no se puede dar soporte a un valor negativo, debera truncarse al valor ms 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 sern ms fcilmente escalables de un medio a otro (p.ej. de una pantalla de ordenador a una impresora lser). Las unidades porcentuales(descritas

ms adelante) y los valores de palabras clave (p.ej. 'x-large') ofrecen ventajas similares. Estas son las unidades relativas soportadas:
H1 { margin: 0.5em } */ H1 { margin: 1ex } 'x' */ P { font-size: 12px } /* ems, la altura de la fuente del elemento /* altura-x, aprox. la altura de la letra /* pxeles, relativos al lienzo */

Las unidades relativas 'em' y 'ex' son relativas al tamao de fuente del propio elemento. La nica excepcin a esta regla en CSS1 es la propiedad 'font-size', donde tanto 'em' como 'ex' se refieren al tamao de fuente del elemento padre. Las unidades en pxeles, como las de la ltima regla, son relativas a la resolucin del lienzo, o lo que es lo mismo en la mayora de los casos, a la resolucin de la pantalla de la computadora. Si la densidad de pxeles del dispositivo de salida es distinta a la de una pantalla normal de computadora, el AU debera reescalar los valores dados en pxeles. El pxel de referencia que se sugiere es el ngulo visual de un pxel en un dispositivo con una densidad de pxeles 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 slo son tiles cuando se conocen las propiedades fsicas del medio de salida. Estas son las unidades absolutas soportadas:
H1 H2 H3 H4 { { { { margin: 0.5in } line-height: 3cm } word-spacing: 4mm } font-size: 12pt } /* /* /* /* pulgadas (inches), 1in = 2.54cm */ centmetros */ milmetros */ 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 deberan intentar aproximar. En todas las propiedades CSS1, los clculos y herencias ulteriores deberan basarse en el valor aproximado.

6.2 Unidades porcentuales

El formato de una unidad porcentual es un carcter de signo opcional ('+' o '-', siendo '+' el valor por defecto), inmediatamente seguido de un nmero (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 tamao 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 heredarn el valor resultante, no el valor porcentual.

6.3 Unidades de color

Un color es o bien una palabra clave o bien una especificacin numrica 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 estn tomados de la paleta VGA de Windows, y sus valores RGB no se definen en esta especificacin.
BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive }

Para especificaciones numricas de color se utiliza el modelo de colores RGB. Todos estos ejemplos especifican el mismo color:
EM { color: #f00 } EM { color: #ff0000 } EM { color: rgb(255,0,0) } /* #rgb */ /* #rrggbb */ /* 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 notacin hexadecimal es un '#' inmediatamente seguido de o bien 3 o bien 6 caracteres hexadecimales. La notacin de 3 dgitos RGB (#rgb) se convierte a notacin de 6 dgitos replicando dgitos, no aadiendo ceros. Por ejemplo, #fb0 se convierte en #ffbb00. Con esto se asegura que el blanco (#ffffff) puede especificarse con la notacin abreviada (#fff) y elimina cualquier dependencia de la profundidad de color del dispositivo de salida. El formato de un valor RGB en la notacin funcional es 'rgb(', seguido de una lista de tres valores numricos separados por coma (ya sean tres valores numricos 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 numricos. Los valores que se encuentran fuera de los rangos numricos deberan truncarse. Las tres reglas siguientes son por lo tanto equivalentes:
EM { color: rgb(255,0,0) } EM { color: rgb(300,0,0) } EM { color: rgb(110%, 0%, 0%) } /* rango de enteros 0 - 255 */ /* truncado a 255 */ /* 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 definicin inequvoca y medible objetivamente de lo que debera ser el color, y que puede ser contrastada con estndares internacionales [10]. Los AAUU pueden limitar sus esfuerzos de representacin de colores a la aplicacin de una correccin gamma sobre ellos. sRGB especifica un valor gamma de 2,2 bajo unas condiciones de visin especficas. 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 apndice D da ms detalles a este respecto. Obsrvese que esto slo afecta a los colores especificados en CSS; p.ej. las imgenes se supone que llevan su propia informacin de color.

6.4 URL

Un Localizador Uniforme de Recursos (Uniform Resource Locator, URL) se identifica con una notacin 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 carcter opcional de comilla simple (') o doble ("), seguido del URL en s (como se define en [11]), seguido de un carcter 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 parntesis, 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) }

7 Conformidad con CSS1

Un Agente de Usuario que use CSS1 para mostrar documentos es conforme a la especificacin CSS1 si:

intenta buscar todas las hojas de estilo referenciadas y las interpreta de acuerdo con esta especificacin ordena las declaraciones de acuerdo con el orden de cascada implementa la funcionalidad CSS1 con las restricciones del medio de presentacin (vase la explicacin posterior).

Un Agente de Usuario que produzca hojas de estilo CSS1 es conforme a la especificacin CSS1 si:

produce hojas de estilo CSS1 vlidas.

Un Agente de Usuario que use CSS1 para mostrar documentos y que produzca hojas de estilo CSS1 es conforme a la especificacin 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

bsica. La funcionalidad bsica consiste en la totalidad de la especificacin CSS1 excepto aquellas partes explcitamente excluidas. En el texto, dichas partes estn marcadas como "CSS1 bsico", seguidas de una explicacin de qu funcionalidad est fuera de la funcionalidad bsica. El conjunto de caractersticas excluidas de la funcionalidad bsica se denominacaractersticas avanzadas de CSS1. Esta seccin slo define la conformidad con CSS1. En el futuro existirn otros niveles de CSS que puede exigir a los AAUU para su conformidad la implementacin de un conjunto diferente de caractersticas. Los siguientes son ejemplos de las restricciones del medio de presentacin: recursos limitados (fuentes, colores) y resolucin limitada (de modo que los mrgenes pueden no ser exactos). En estos casos, el AU debera aproximar los valores de las hojas de estilo. Adems, los diferentes paradigmas de interfaz de usuario pueden tener sus propias restricciones: un browser de realidad virtual puede reescalar el documento segn su "distancia" al usuario. Los AAUU pueden ofrecer al lector alternativas de presentacin adicionales. Por ejemplo, un AU puede proporcionar opciones a los usuarios con limitaciones visuales o puede proporcionar la opcin de desactivar el parpadeo. Obsrvese que CSS1 no especifica todos los aspectos del formato. P.ej., el AU es libre de elegir el algoritmo de espaciamiento de letras. Esta especificacin tambin recomienda, pero no requiere, que un AU:

permita al lector especificar hojas de estilo personales. permita activar o desactivar hojas de estilo individualmente.

Las reglas de conformidad precedentes describen slo la funcionalidad, no la interfaz del usuario.

7.1 Compatibilidad con versiones futuras

Esta especificacin define CSS nivel 1. Se espera que en el futuro se definan niveles superiores de CSS con caractersticas adicionales. Para asegurarse de que los AAUU que soporten nicamente CSS1 puedan leer hojas de estilo que contengan caractersticas de niveles superiores,

esta seccin define lo que hace un AU cuando encuentra ciertas construcciones que no son vlidas en CSS nivel 1.

una declaracin con una propiedad desconocida no se tiene en cuenta. Por ejemplo, si la hoja de estilo es:
H1 { color: red; rotation: 70deg }

el AU la tratar como si la hoja de estilo hubiera sido:

H1 { color: red; }

los valores ilegales, o los valores con partes ilegales, se tratan como si la declaracin no existiera:
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 respetara la primera regla y no tendra en cuenta el resto, como si la hoja de estilo hubiera sido sta:
IMG IMG IMG IMG { { { { float: left } } } }

Un AU conforme con alguna especificacin futura de CSS podra aceptar una o ms de las otras reglas.

una palabra clave tipo arroba que no sea vlida se descarta junto con todo lo que le siga, hasta el siguiente punto y coma (;) o par de llaves ({...}) inclusive, lo que ocurra en primer lugar. Por ejemplo, supngase que la hoja de estilo dice:
@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 trminos efectivos a:
H1 {color: blue}

Ms detalladamente: Una hoja de estilo CSS, para cualquier versin de CSS, consiste en una lista de sentencias. Hay dos tipos de sentencias: reglas tipo arroba (atrules) y conjuntos de reglas (rulesets). Puede haber espacio en blanco (espacios, tabulaciones, saltos de lnea) 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 seales de comentarios HTML "<!--" y "-->" pueden aparecer antes, despus y dentro de sentencias. Puede haber espacio en blanco a su alrededor. Las reglas tipo arroba empiezan con una palabra clave tipo arroba (atkeyword), que es un identificador con una '@' al comienzo (por ejemplo: '@import', '@page'). Un identificador consiste en letras, dgitos, guiones y caracteres de escape (definidos ms adelante). La regla tipo arroba est comprendida por todo lo que haya hasta el siguiente punto y coma (;) o el siguiente bloque (definido a continuacin) 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. Tambin 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 despus de cualquier regla (incluso de reglas descartadas). He aqu un ejemplo: Supngase 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 trminos 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 parntesis (()), los corchetes ([]) y las llaves ({}) siempre se encuentran equilibrados y pueden estar anidados. Las comillas simples (') y dobles (") tambin estn equilibradas, y los caracteres entre ellas se interpretan como una cadena de caracteres (string, vase en el analizador lxico del apndice B una definicin de string). A continuacin sigue un ejemplo de un bloque; obsrvese que la llave cerrada que hay entre comillas no equilibra la llave que abre el bloque, y que la segunda comilla simple es un carcter 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-declaracin (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 vlida segn CSS1 no se tiene en cuenta. Por ejemplo, supngase 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 lnea 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 trminos efectivos a:
H1 { color: blue } P EM { font-weight: bold }

Un bloque-declaracin comienza con una llave abierta ({) y termina con la llave cerrada que la equilibra (}). Entre ambas hay una lista de cero o ms declaraciones, separadas por punto y coma (;).

Una declaracin 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 carcter, pero los parntesis (()), los corchetes ([]), las llaves ({}), las comillas simples (') y las comillas dobles (") deben estar equilibradas. Los parntesis, los corchetes y las llaves pueden estar anidados. Los caracteres contenidos entre comillas son interpretados como cadenas de caracteres. Para asegurarse de que puedan aadirse en el futuro nuevas propiedades y nuevos valores para las propiedades existentes, un AU debe saltarse una declaracin con un nombre de propiedad no vlido o un valor no vlido. Todas las propiedades CSS1 tienen sus propias restricciones sintcticas y semnticas en cuanto a los valores que aceptan. Por ejemplo, supngase que un analizador CSS1 encuentra la siguiente hoja de estilo:
H1 { color: red; font-style: 12pt } P { color: blue; font-vendor: any; EM EM { font-style: normal } font-variant: small-caps }

La segunda declaracin de la primera lnea tiene un valor no vlido de '12pt'. La segunda declaracin de la segunda lnea 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 (vase la seccin 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 tambin ah se permiten comentarios. Las siguientes reglas siempre se cumplen:

Las hojas de estilo CSS no hacen distincin entre maysculas y minsculas, excepto en aquellas partes que queden fuera del control de CSS. Por ejemplo, en CSS1, en los nombres de las familias tipogrficas y los URLs la distincin entre maysculas y

minsculas es importante. Lo mismo ocurre con los atributos 'CLASS' e 'ID', donde la distincin entre maysculas y minsculas est bajo el control de HTML [2]. En CSS1, los selectores (nombres de elementos, clases e IDs) pueden contener nicamente los caracteres A-Z, 0-9 y los caracteres Unicode 161-255, adems del guin (-); no pueden comenzar con un guin ni con un dgito; pueden contener tambin cualesquiera secuencias de escape y cualquier carcter Unicode expresado como cdigo numrico (ver el siguiente punto). la barra invertida seguida de como mucho cuatro dgitos hexadecimales (0..9A..F) representa al carcter Unicode con ese nmero. cualquier carcter, excepto un dgito hexadecimal, puede ser transformado en una secuencia de escape para sustraer su significado especial anteponiendo una barra invertida. Ejemplo: "\"" es una cadena que consiste en una comilla doble. los dos puntos anteriores definen las secuencias de escape de barra invertida (backslash-escapes). Estas secuencias se consideran siempre parte de un identificador, excepto cuando estn dentro de una cadena (p.ej., "\7B" no es un signo de puntuacin aunque "{" s lo sea, y "\32" se permite al comienzo de un nombre de clase, aunque "2" no est permitido).

Nota: El atributo 'CLASS' de HTML permite ms caracteres en el nombre de la clase que el conjunto permitido para los selectores recin descrito. En CSS1, estos caracteres han de transformarse en secuencias de escape o escribirse como nmeros 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 ms caracteres directamente. En el apndice B puede encontrarse una gramtica de CSS1.

8 Referencias
[1] Pgina 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 especificacin tambin est disponible en hipertexto(http://www.w3.org/MarkUp/html-spec/htmlspec_toc.html) [4] F Yergeau, G Nicol, G Adams, M Drst: "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-900734-00-3 (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-286.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.p df) [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

9 Agradecimientos
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 gustara 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, Ccile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irne Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood y Stephen Zilles. Tres personas merecen mencin 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 tambin creativas).

Apndice A: Ejemplo de hoja de estilos para HTML 2.0

(Este apndice es informativo, no normativo) La siguiente hoja de estilos est escrita de acuerdo con la presentacin sugerida en la especificacin de HTML 2.0 [3]. Algunos estilos, p.ej., colores, se han aadido 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 relacin 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 } LI { margin-left: 3em }

/* formato ajustado */

DT { margin-bottom: 0 } DD { margin-top: 0; margin-left: 3em } HR { border-top: solid } 'border-bottom' */ A:link { color: blue } A:visited { color: red } A:active { color: lime } /* tambin podra haberse usado /* unvisited link */ /* visited links */ /* active links */

/* para establecer el borde de vnculo 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 }

Apndice B: Gramtica de CSS1

(Este apndice es normativo) Nota del traductor: Se recuerda al lector que la nica versin normativa de este documento es la versin original en ingls que se encuentra en el sitio web del W3C. Ninguna parte del presente documento en castellano es normativa aunque se especifique lo contrario. La gramtica mnima de CSS (esto es, de cualquier versin de CSS) que necesita soportar cualquier implementacin est definida en la seccin 7. La gramtica que figura a continuacin define un lenguaje mucho ms pequeo, un lenguaje que define la sintaxis de CSS1. En cierto sentido sigue siendo, sin embargo, un superconjunto de CSS1: hay restricciones semnticas adicionales que no estn expresadas en esta sintaxis. Un AU conforme debe adherirse, adems, a las reglas de interpretacin compatibles con versiones futuras (seccin 7.1), a la notacin de propiedades y valores (seccin 5) y a la notacin de unidades (seccin 6). Adems HTML impone restricciones, p.ej., en los valores posibles para el atributo 'CLASS'. La gramtica que sigue es LL(1) (obsrvese no obstante que los AAUU no deberan usarla directamente, ya que no expresa convenciones de interpretacin, sino nicamente la sintaxis de CSS1). El formato de las producciones est optimizado para su utilizacin por personas, y se utilizan ciertas notaciones abreviadas no contempladas en yacc [15]:
* + ? | [] : : : : : 0 ms 1 ms 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 ** Anlogamente 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: :firstline */ : FIRST_LETTER

| FIRST_LINE ; /* Tanto en el id como en el solitary id existe la restriccin de que ** la parte que sigue al "#" debe ser un valor ID HTML vlido; ** 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 restriccin de que debe ** tener 3 6 dgitos hexadecimales (es decir, [0-9a-fA-F]) ** despus del "#"; p.ej., "#000" est bien, pero "#abcd" no. */ hexcolor : HASH | HASH_AFTER_IDENT ;

A continuacin figura el analizador lxico (tokenizer), escrito en notacin flex [16]. Obsrvese que asume una implementacin de flex de 8 bits. El analizador lxico no distingue entre maysculas y minsculas (opcin i de la lnea de comandos de flex).
unicode latin1 escape stringchar nmstrt nmchar ident name d notnm w num string \\[0-9a-f]{1,4} [-] {unicode}|\\[ -~-] {escape}|{latin1}|[ !#$%&(-~] [a-z]|{latin1}|{escape} [-a-z0-9]|{latin1}|{escape} {nmstrt}{nmchar}* {nmchar}+ [0-9] [^-a-z0-9\\]|{latin1} [ \t\n]* {d}+|{d}*\.{d}+ \"({stringchar}|\')*\"|\'({stringchar}|\")*\'

%x COMMENT %s AFTER_IDENT %% "/*" <COMMENT>"*/" <COMMENT>\n <COMMENT>. @import "!"{w}important {ident} {string} {num} {num}"%" {num}pt/{notnm} {num}mm/{notnm} {num}cm/{notnm} {num}pc/{notnm} {num}in/{notnm} {num}px/{notnm} {num}em/{notnm} {num}ex/{notnm} {BEGIN(COMMENT);} {BEGIN(0);} {/* ignore */} {/* ignore */} {BEGIN(0); return IMPORT_SYM;} {BEGIN(0); return IMPORTANT_SYM;} {BEGIN(AFTER_IDENT); return IDENT;} {BEGIN(0); return STRING;} {BEGIN(0); return NUMBER;} {BEGIN(0); return PERCENTAGE;} {BEGIN(0); return LENGTH;} {BEGIN(0); return LENGTH;} {BEGIN(0); return LENGTH;} {BEGIN(0); return LENGTH;} {BEGIN(0); return LENGTH;} {BEGIN(0); return LENGTH;} {BEGIN(0); return EMS;} {BEGIN(0); return EXS;} {return LINK_PSCLASS_AFTER_IDENT;} VISITED_PSCLASS_AFTER_IDENT;} ACTIVE_PSCLASS_AFTER_IDENT;} FIRST_LINE_AFTER_IDENT;} {return FIRST_LETTER_AFTER_IDENT;} {return HASH_AFTER_IDENT;} {return CLASS_AFTER_IDENT;} {BEGIN(AFTER_IDENT); return {BEGIN(AFTER_IDENT); return {BEGIN(AFTER_IDENT); return {BEGIN(AFTER_IDENT); return {BEGIN(AFTER_IDENT); return {BEGIN(AFTER_IDENT); return HASH;} {BEGIN(AFTER_IDENT); return CLASS;} | {BEGIN(0); {BEGIN(0);

<AFTER_IDENT>":"link <AFTER_IDENT>":"visited {return <AFTER_IDENT>":"active {return <AFTER_IDENT>":"first-line {return <AFTER_IDENT>":"first-letter <AFTER_IDENT>"#"{name} <AFTER_IDENT>"."{name} ":"link LINK_PSCLASS;} ":"visited VISITED_PSCLASS;} ":"active ACTIVE_PSCLASS;} ":"first-line FIRST_LINE;} ":"first-letter FIRST_LETTER;} "#"{name} "."{name}

url\({w}{string}{w}\) url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\) return URL;} rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\) return RGB;} [-/+{};,#:] [ \t]+ \n \<\!\-\\-\-\>

{BEGIN(0); return *yytext;} {BEGIN(0); /* ignore whitespace */} {BEGIN(0); /* ignore whitespace */} {BEGIN(0); return CDO;} {BEGIN(0); return CDC;}

. (%d)\n",

{fprintf(stderr, "%d: Illegal character lineno, *yytext);}

Apndice C: Codificacin
(Este apndice es informativo, no normativo) Los documentos HTML pueden contener cualquiera de los aproximadamente 30.000 caracteres distintos definidos por Unicode. Muchos documentos necesitan slo unos pocos centenares. Asimismo muchas fuentes no contienen ms que unos pocos centenares de signos. Este apndice, junto a la seccin 5.2, explica cmo se emparejan los caracteres del documento con los signos de una fuente.

Codificacin de caracteres
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 comn utilizar el byte 224 para representar una a con acento grave (), pero en hebreo es ms comn usar el 224 para representar el Aleph. En japons, el significado de un byte depende normalmente de los bytes que le preceden. En algunas codificaciones, cada carcter se codifica con dos (o ms) bytes. El AU sabe cmo descodificar los bytes mirando en el parmetro "charset" del encabezado HTTP. Las codificaciones (valores de "charset") tpicas son "ASCII" (para el ingls), "ISO-8859-1" (para Europa occidental), "ISO-8859-8" (para el hebreo), "Shift-JIS" (para el japons). 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 eleccin de la codificacin adecuada se asegura que el documento slo necesitar un byte por carcter. Si en algn caso existen caracteres que se salgan fuera del rango de la codificacin elegida, siempre pueden expresarse como referencias numricas: '&#928' siempre representar a la letra griega mayscula Pi, independientemente de la codificacin usada. Obsrvese que esto conlleva que todos los AAUU deben estar preparados para cualquier carcter Unicode, incluso si slo manejan unas pocas codificaciones.

Codificacin de fuentes
Una fuente no contiene caracteres, contiene dibujos de caracteres, conocidos como signos. Los signos, en la forma de lneas o mapas de bits, constituyen una representacin particular de un carcter. Ya sea explcita o implcitamente, cada fuente tiene una tabla asociada a ella, la tabla de codificacin de la fuente, que dice de qu carcter es representacin cada signo. En las fuentes de tipo 1, esta tabla se denomina vector de codificacin. En realidad, muchas fuentes contienen varios signos para el mismo carcter. Cul de esos signos se use depende o bien de las reglas del idioma, o bien de las preferencias del diseador. 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 carcter en todos los casos, y por tanto slo hay un carcter en el documento HTML, pero a la hora de imprimir, es distinto en cada caso. Tambin hay fuentes que dan al diseador la libertad de elegir entre varias formas alternativas proporcionadas. Desgraciadamente CSS1 no proporciona todava mtodos para seleccionar dichas alternativas. Actualmente siempre se selecciona la forma por defecto.

Conjuntos de fuentes
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 tamao, que se prueban consecutivamente para ver si contienen un signo para un cierto carcter. Un elemento que contenga texto en ingls mezclado con smbolos matemticos puede necesitar un conjunto de dos fuentes, una que contenga letras y dgitos y otra que contenga smbolos matemticos. Vase en la seccin 5.2 una descripcin detallada del mecanismo de seleccin en conjuntos de fuentes. A continuacin 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 smbolos matemticos:

BODY { font-family: Baskerville, Mincho, Symbol, serif }

Los caracteres disponibles en la fuente Baskerville (una fuente que slo contiene caracteres latinos) sern tomados de esa fuente, los japoneses sern tomados de Mincho, y los smbolos matemticos vendrn de Symbol. Cualquier otro carcter vendr (se supone) de la familia tipogrfica genrica 'serif'. La familia tipogrfica 'serif' tambin se utilizar si una o ms de las otras fuentes no esta disponible.

Apndice D: Correccin gamma

(Este apndice es informativo, no normativo) Vea el Tutorial Gamma de la especificacin PNG [12] si todava no est familiarizado con la correccin gamma. En el clculo, los AAUU que muestren la salida en un CRT (tubo de rayos catdicos) 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 manipulacin mnima que necesitan llevar a cabo en las plataformas actuales es: PC usando MS-Windows ninguna Unix usando X11 ninguna Mac usando QuickDraw aplicar gamma 1.39 [13] (las aplicaciones que utilicen ColorSync pueden simplemente pasar el perfil ICC sRGB [14] a ColorSync para realizar la correccin de color correcta) SGI usando X aplicar el valor gamma de /etc/config/system.glGammaVal (siendo el valor por defecto 1.70; las aplicaciones que se ejecuten en Irix 6.2 o superior pueden simplemente pasar el perfil ICC sRGB al sistema de gestin del color). NeXT usando NeXTStep Aplicar gamma 2.22 "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 rpidamente construyendo una tabla de bsqueda 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 clculos complejos para cada atributo de color, y sobre todo para cada pxel.

Apndice E: Aplicabilidad y extensibilidad de CSS1

(Este apndice es informativo, no normativo) El objetivo del trabajo en CSS1 ha sido crear un mecanismo simple de hojas de estilo para documentos HTML. La especificacin actual representa un equilibrio entre la simplicidad requerida para utilizar hojas de estilo en la web, y la presin por parte de los autores que demandan mayor y mejor control visual. CSS1 ofrece:

sustitucin de etiquetas visuales: las extensiones HTML, p.ej. 'CENTER', 'FONT' y 'SPACER' son fcilmente reemplazadas por hojas de estilo. cdigo ms limpio: en lugar de usar elementos 'FONT' para lograr el estilo de versalitas, es suficiente una declaracin en la hoja de estilos. Comprese el cdigo visual:
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>

con la hoja de estilos:

H1 { font-style: small-caps } <H1>Headline</H1>

varios niveles de integracin: las reglas de estilo de CSS1 pueden obtenerse de hojas de estilo externas, incluirse en elementos 'STYLE' o ponerse dentro de atributos 'STYLE'. La ltima opcin ofrece un mtodo sencillo de transicin desde extensiones HTML. nuevos efectos: se han aadido algunos efectos visuales nuevos para dar a los usuarios "juguetes nuevos". Los pseudo-elementos

tipogrficos y los valores adicionales de la propiedad 'background' pertenecen a esta categora. escalabilidad: CSS1 ser til en equipos que vayan desde terminales de texto a estaciones de trabajo en color con altas resoluciones. Los autores podrn escribir una sola hoja de estilos y estar razonablemente seguros de que el estilo buscado saldr de la mejor manera posible.

CSS1 no ofrece:

control a nivel de pxel. CSS1 valora la simplicidad por encima del nivel de control, y aunque la combinacin de imgenes de fondo y de HTML con estilos es potente, el control a nivel de pxel no es posible. control por parte del autor: el autor no puede forzar al usuario a usar una hoja de estilo determinada, slo sugerirla. un lenguaje de composicin de pginas (layout): CSS1 no ofrece columnas mltiples de texto, marcos superpuestos, etc. un lenguaje potente de bsqueda en el rbol de anlisis sintctico: CSS1 slo puede buscar en el rbol de descendencia ascendientes de elementos, mientras que otros lenguajes de hojas de estilo (p.ej. DSSSL [6]) ofrecen un lenguaje de bsqueda completo.

Esperamos ver extensiones de CSS en varias direcciones:

papel: mejor soporte para imprimir documentos HTML soporte de medios no visuales: se est trabajando para aadir una lista de propiedades y sus correspondientes valores para soportar salida por voz y en braille nombres de colores: la lista soportada actualmente puede ser extendida fuentes: se espera que existan sistemas ms precisos de especificacin de fuentes que complementen las propiedades de fuente existentes en CSS1. valores y propiedades: esperamos que las compaas propongan extensiones al conjunto de valores y propiedades de CSS1. Extenderse en esta direccin es trivial para la especificacin, pero nuestra preocupacin es la interoperabilidad entre AAUU. lenguaje de composicin de pginas (layout): soporte de diseo bidimensional en la tradicin de las herramientas de publicacin de imprenta.

Otros DTDs: CSS1 tiene algunas partes especficas de HTML (p.ej., el estatus especial de los atributos 'CLASS' e 'ID') pero debera ser fcil extender su aplicacin a otros DTDs.

No esperamos que CSS se convierta en:

un lenguaje de programacin

Apndice F: Cambios desde la versin del 17 de diciembre de 1996

(Este apndice es informativo, no normativo) Este documento es una versin revisada de la Recomendacin CSS1 que fue publicada por primera vez el 17 de diciembre de 1996. La lista que figura a continuacin describe todos los cambios. Eligiendo la hoja de estilo alternativa "errata" todos los cambios aparecern destacados. Quisiramos expresar nuestro agradecimiento a Komachi Yushi, Steve Byrne, Liam Quinn, Kazuteru Okahashi, Susan Lesch, y Tantek elik por su ayuda en la confeccin de esta edicin revisada.

Erratas tipogrficas y ortogrficas y errores

Nota del traductor: las relaciones de erratas y de errores que aparecen en el texto original se refieren a los cambios introducidos en la versin original del documento en ingls y no son relevantes para esta versin traducida, por lo que no se incluyen. Esta versin 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 versin original en ingls.

Estructura y organizacin