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, <jrpozo@conclase.net>
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 propied