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