Home
Temas
Preguntas

Licencia
Licencia de Creative Commons
Temas >> HTML y XHTML
Hojas de Estilo CSS
Este documento describe el lenguaje CSS1 (Cascade Style Sheets, level 1 - hojas de estilo en cascada, nivel 1) que es uno de los lenguajes propuestos para describir hojas de estilo en el WWW.

Las hojas de estilo en formato CSS1 funcionan con el browser Netscape Navigator 4.0 o superior, Internet Explorer 3.0 o superior o con Arena W3C Browser. Para saber cuales de las propiedades o atributos son soportados en cada browser, revise la base de datos disponible en Project Cool. Existen informes de que además por lo reciente de la tecnología hay problemas menores al momento de imprimir algunas páginas bajo algunas plataformas.

Una hoja de estilo permite aumentar el control del diseñador sobre cómo se verán sus páginas Web, asociando un conjunto de propiedades de formato físico a los elementos estándard del lenguaje HTML.

De esta forma, el resultado final que observa la persona en su browser es una mezcla entre las características predefinidas para cada comando HTML y la hoja de estilo:

Una gran virtud de esta técnica es que permite lograr una presentación muy uniforme, ya que basta definir un estilo una sola vez para que éste se aplique a todos los elementos del mismo tipo que existan en una página.

Usar hojas de estilo es muy fácil, ya que se utilizan para ello comandos estándard de HTML.

Escribamos una página muy simple:

<HTML>
<HEAD>
<TITLE>Hojas de estilo</TITLE>
<STYLE TYPE="text/css">
BODY   { background    : black}
H1   { color     : yellow;
font-weight   : bold;
font-size : 12pt;
line-height   : 14pt;
font-family   : Arial,Helvetica,sans-serif;}
P  { color     : white;
font-size : 10pt;
line-height   : 12pt;
text--indent  : 0.5in;
font-family   : Times,serif;}
</STYLE>
</HEAD>
<BODY>
<H1>Ejemplo de hojas de estilo</H1>
<P>Con hojas de estilo podemos definir características de formato físico para los
elementos HTML estándard.</P> <P>¡ Hay muchas cosas que se pueden hacer con hojas de estilo y no se pueden hacer
de ninguna otra forma !</P> </BODY> </HTML>

NOTA: Si aparece todo el texto de la hoja de estilo, y esta no es interpretada, probablemente el browser que usted está usando no provee de esta característica; por lo que debe buscar una versión más reciente de él.

Los comentarios dentro de la hoja de estilo (<!-- -->) sirven para esconderla de los browsers más antiguos.

Existen varias formas alternativas de asociar una hoja de estilo a un documento:

Por ejemplo:

1.Se utiliza el elemento STYLE dentro del encabezamiento del documento, como en el ejemplo.

2.Se usa el elemento LINK para referenciar a una hoja de estilo puesta en un archivo aparte.

3.Se invoca a una hoja de estilo con el comando de CSS "@import ...".

4.Se agrega el atributo STYLE a un elemento dentro del cuerpo del documento.

Este último método mezcla la hoja de estilo con el contenido del documento y es por lo tanto una mala opción.

Veamos un ejemplo combinado, con varias formas de llamar a hojas de estilo:

<HTML>
<HEAD>
<TITLE>Demostración</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool.css" TITLE="Cool">
<STYLE TYPE="text/css"> @import url(http://style.com/basic.css);
H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Los encabezamientos son azules</H1> <P STYLE="color: green">Y los párrafos verdes.</P> </BODY> </HTML>

Si bien puede parecer engorroso al principio escribir una serie de instrucciones en código para lograr nuestros propósitos, la idea que está detrás es que uno escriba este set de instrucciones una sóla vez, en un archivo separado, y esta hoja de estilo sea usada por una serie de páginas (por ejemplo, por todas las páginas de un mismo servicio Web). De este modo, conseguimos una presentación uniforme con un mínimo de esfuerzo, ya que en el caso de que deseemos cambiar algo, basta editar un solo archivo y este cambio se aplicará a todas las páginas que utilicen ese estilo.

El uso de hojas de estilo evita el uso excesivo de imágenes, que además de que cuesta mucho hacerlas y mantenerlas a lo largo de las actualizaciones, ocupan bastante más tiempo de transferencia que unas cuantas líneas de código extra.

Es probable que usted detecte en su browser que soporte hojas de estilo uno o varios de los siguientes errores:

  • La declaración de font-family debe ser la última, todas las declaraciones después de ella se ignoran (!).
  • Los márgenes izquierdos de BODY y P no se suman entre sí.
  • No se puede poner estilo en un elemento tácito; si no se incluye BODY las propiedades de estilo de el cuerpo del documento no tienen ningun efecto.
  • El espacio entre líneas también se agrega a la última línea del elemento, por eso hay tanto espacio en los encabezamientos. El espacio entre líneas va entre las líneas.
  • Las líneas que tienen links a veces tienen espacio extra sobre ellas.
  • No se da soporte a los seudo elementos, pero sí a las seudo clases.

Esté preparado para experimentar; sólo eso le dará una visión correcta de qué elementos vale la pena usar y cuales no, conforme vaya evolucionando el lenguaje de hojas de estilo.

Las propiedades de estilo pueden ser aplicadas sólo a determinados tipos de elementos del lenguaje HTML:

block (bloque) Tienen un quiebre de línea antes o después, como H1, BLOCKQUOTE o P

text (texto) Elementos de formato físico y lógico (pertenecientes al grupo phrase)

inline (en línea) Elementos que son reemplazados por otros elementos al mostrarse la página (imágenes, animaciones, etc.)

Los elementos de HTML son llamados selectores para la nomenclatura de este lenguaje. Lo que hace una hoja de estilo, es asociar una declaración a cada selector, formando lo que se denomina una regla.

Una declaración, a su vez, está compuesta por una propiedad a la cual se le asigna un valor.

Veámoslo de manera más clara con un ejemplo:

Las propiedades son un conjunto predefinido en el lenguaje CSS1 (35 propiedades en total), y los valores permitidos dependen de la propiedad con la que se esté trabajando.

Agrupación de reglas

Se puede asociar una misma declaración a varios selectores, usando comas entre ellos:

H1, H2, H3, H4, H5, H6 { color  : red }

O varias declaraciones a un mismo selector, utilizando punto y coma:

H1 { color: red; text-align: center; }

O se pueden realizar ambas agrupaciones a la vez:

H1, H2, H3, H4, H5, H6 { color  : red; text-align: center; }
Herencia de propiedades

El nombre de hojas de estilo en cascada del lenguaje no es casualidad: se refiere a que las propiedades son heredadas por los elementos más internos, por ejemplo:

BODY    { color : blue } H1      { color : red  }

En este caso, todo el cuerpo del documento tiene color azul, con excepción de los encabezados de nivel uno que aparecerán en color rojo.

La herencia se produce en el siguiente sentido:

  • Elemento <BODY>
  • Elementos de tipo block
  • Elementos de tipo text
Clases

Cuando se declara una regla en la hoja de estilo, esta regla se aplica a todos los elementos HTML descritos por su selector; por ejemplo, si se declara

P   { font-family   : italic    }

Todos los párrafos del documento aparecerán en cursiva; en ocasiones uno quisiera destacar algunos párrafos y darles características distintas a la del resto. Para ello, se provee de un atributo extra en casi todos los elementos del lenguaje HTML, llamado CLASS (clase).

Utilizando este atributo en el elemento HTML al cual uno se refiere, se le puede aislar y uno se puede referir a él en la hoja de estilo como un subselector.

El código para describir un subselector queda muy claro mediante un ejemplo:

<HTML>
<HEAD>
<STYLE>
P        {text-indent : 0.5in; }
P.versos {font-style  : italic;
margin-left : 2in;
text-indent : 0in;
font-family : sans-serif ; }
</STYLE>
<TITLE>Subselectores en hojas de estilo</TITLE>
</HEAD>
<BODY>
<P>En esta página tenemos unos versos escritos por el gran
poeta chileno Pablo Neruda: </P> <P> Me gustas cuando callas<BR> porque estás como ausente<BR> y me oyes desde lejos<BR> y mi voz no te toca. </P> <P> Parece que los ojos<BR> se te hubieran velado<BR>
y parece que un beso<BR> te cerrara la boca. </P>
</BODY> </HTML>

En el ejemplo, queríamos que los párrafos normales tuvieran una sangría (indent) de media pulgada; pero además queríamos tener una poesía, cuyas estrofas no llevan sangría, sino que están separadas con un márgen adicional y un tipo de letra distinto.

Para ello, inventamos una clase llamada "verso", y agrupamos bajo ella a la poesía que queríamos incluir en el documento.

También es posible definir una clase genérica para ser usada por varios selectores:

<STYLE>
.punk   { color : green }
</STYLE>
<P> Este párrafo y ... </P>
<BLOCKQUOTE> ... este bloque, están en el mismo estilo.</P>
Identificadores únicos

El atributo ID de un elemento HTML permite referenciarlo en forma única como selector; claro está, el diseñador web debe tener cuidado de usarlo sólo una vez en el documento.

<STYLE> #z99a   {   letter-spacing: 0.3em   } </STYLE>
<P> Este texto está muy amplio </P>
Selectores contextuales

La herencia de propiedades en CSS permite lograr una notación más compacta para las hojas de estilo; pero tiene algunos problemas, por ejemplo; si yo pongo en la hoja de estilo:

H1  { color : blue } EM  { color : red }

Un título como:

<H1> <EM> Primera </EM> Sección </H1>

... se verá bastante extraño, pues aparecerá en verde y rojo. Para evitar este inconveniente, se puede agregar la siguiente regla:

H1 EM { color: blue }

La cual se lee: en el texto enfático dentro de un encabezamiento de nivel uno, se usará color azul.

Este tipo de selector (una lista de selectores separados por espacios en blanco) se llama selector contextual, puesto que indica el comportamiento de un elemento cuando está en un determinado contexto.

La idea que está detrás de la construcción de una hoja de estilo, desde esta perspectiva, es la de listar primero los casos normales y después las excepciones.

Seudoclases

En CSS1, el estilo normalmente se agrega a un elemento basado simplemente en el tipo de elemento; este modelo no es suficiente para algunos efectos más complejos. El concepto de seudoclase tiene que ver con permitir que haya más información a disposición del diseñador al momento de escribir la hoja de estilo.

Las seudoclases son agregadas por el browser, y referidas como "clases" por las reglas de estilo; estas seudoclases permiten diferenciar diferentes usos para un mismo elemento.

El ejemplo típico son los hiperlinks; uno desearía que los links visitados fueran diferentes de los que no han sido visitados; esto se logra mediante una construcción como:

A:link    { color: red }
A:visited { color: blue }
A:active  { color: lime }

Nótese el uso de los dos puntos (:) para referirse a las seudoclases, mientras que el punto (.) se usa para referirse a clases reales. Si quiere cambiar el color al pasar el mouse por encima:

A:hover { color: white }

Se pueden usar seudoclases con selectores contextuales:

A:link IMG { border: solid blue }

o con clases reales:

<STYLE> A.externo:visited { color: black } </STYLE>
<A HREF="http://otro.host/"> Link a otro host </A>
Seudoelementos

Los seudoelementos permiten referirse a porciones de los elementos reales.

En CSS1, se puede referenciar la primera línea de un elemento:

<STYLE> P: first-line   { font-style: small-camps } </STYLE>
<P>Podría usarse para reportes de prensa.</P>

O bien la primera letra:

<STYLE> P: first-letter { font-size: 220%; float: left } </STYLE>
<P>Había una vez un bosque encantado donde jugaban
hadas y duendes todo el día, sin cesar ....</P>

En el ejemplo anterior, la primera letra (H) aparece del doble del tamaño normal, y el texto fluye alrededor de ella, como en los libros de cuento:

Estos dos seudoelementos sólo pueden ser aplicados sobre elementos de tipo bloque.

Los comentarios dentro de las hojas de estilo comienzan con "/*" y terminan con "*/"; no pueden ser anidados (uno dentro de otro) y todo su contenido es ignorado.

Ejemplo:

H2  { color: yellow } /* Los subtítulos van en amarillo */

Los valores que reconoce cada propiedad en una hoja de estilo dependen del tipo de propiedad. A continuación veremos algunos valores típicos admitidos para entender mejor lo que viene a continuación.

Tipos de letra

El problema de especificar tipos de letra para ser usados en el World Wide Web es un verdadero dolor de cabeza. El motivo fundamental es que sus nombres varían de una plataforma a otra; y no es poco común encontrar que bajo una misma plataforma existan tipos que estén en una versión y no en otra, etc.

Una solución es que una empresa de computación ofrezca una serie de tipos de letra y espere que todo el mundo los instale en su computador, o los incorpore en sus productos y pretenda que sean estándares; pero en el mundo de la computación esto rara vez funciona bien y en ninguna parte son buenos los monopolios.

Bueno, pero ... ¿ qué solución hay ?. La solución es que cada vez que se especifica un tipo de letra, se indique una serie de alternativas: si en el computador de la persona que está leyendo la página no existe el primer tipo, se prueba con el siguiente, y así sucesivamente hasta llegar al último.

En caso de que el último tipo de letra tampoco sea reconocido, se utiliza el valor por omisión para el browser, que comunmente es Times (esta definición, del tipo de letra por omisión no aparece en ninguna parte en la especificación, lo que pasó fue que los primeros browser usaron este tipo y para mantener compatibilidad las siguientes generaciones de browser lo siguieron usando).

Por ejemplo:

P   { font-family: "Arial", "Helvetica", sans-serif }

Significa que a todos los párrafos se les asignará el tipo de letra Arial (este es un tipo de letra sin serif típico de MS Windows), en caso de no estar disponible en el sistema se utilizará Helvetica (existente bajo MacOS y X-Windows).

El último valor listado merece una explicación aparte: para evitar que el browser caiga en el tipo de letra por omisión, se utiliza como última alternativa uno de los siguientes tipos de letra genéricos:

sans-serif (sin adornos) serif (con adornos) cursive (manuscrito) fantasy (no está claro que tipo de letra sea) monospace (monoespaciado, o espacio constante)

Estos no son tipos de letra en sí, sino que son familias. Un browser decidirá al momento de la instalación cual será el tipo que usará para representar cada una de estas familias.

Colores

Los colores se indican mediante un código RGB, (ejemplo: #FFEE09) o bien mediante uno de los nombres de color estandarizados:

  • aqua: Agua
  • black: Negro
  • blue: Azul
  • fuchsia: Fucsia
  • gray: Gris
  • green: Verde
  • lime: Lima
  • maroon: Marrón
  • navy: Azul marino
  • olive: Verde oliva
  • purple: Púrpura
  • red: Rojo
  • silver: Plateado
  • teal: Verde azulado
  • white: Blanco
  • yellow: Amarillo

También existe la posibilidad de usar códigos RGB abreviados, que sólo tienen tres "cifras". Por ejemplo, se escribe: #F0A en vez de #F000A0, #E9A en lugar de #E090A0, etc.

Los códigos RGB abreviados permiten escribir sólo 256 colores, pero eso es suficiente para la mayoría de los sistemas; esto es muy usual en hojas de estilo puesto que es difícil reconocer muchos matices en el texto, por lo que no tiene sentido ser tan específico en el color.

Longitudes

Las longitudes se indican con un número, seguido de un sufijo. Se pueden expresar en términos absolutos:

  • 24mm: 24 milímetros
  • 2cm: 2 centímetros
  • 1.2in: 1,2 pulgadas
  • 12pt: 12 puntos de impresión
  • 3pc: 3 picas
  • 105px: 105 pixeles

o bien en términos relativos al tamaño del tipo de letra actual:

  • 2em: 2 veces el ancho de una letra "m"
  • 3ex: 3 veces el ancho de una letra "x"

Si no se especifica un sufijo, se subentiende que se está hablando de uno de los 6 tamaños definidos en el HTML.

URLs

Los URL se indican usando la palabra reservada "url", seguida de un paréntesis, luego el contenido del URL y luego un paréntesis de cierre. Veamos algunos ejemplos:

url(http://www.myhost.com/)
url(imagen.gif)
url(icn/globo.gif)

A continuación veremos la lista de propiedades que soporta CSS1. Información acerca de la evolución de CSS se encuentra disponible en el W3Consortium.

La sintaxis con que se explica este lenguaje es un conocimiento importante, pues las especificaciones en el World Wide Web se proveen en este formato o en algún formato similar. Si bien puede parecer un poco engorroso o difícil no lo es tanto; después de un tiempo uno se puede dar cuenta de que no hay ninguna otra forma más clara de explicar la sintaxis de un lenguaje.

Sintaxis
  • <x>: x no debe ser tomado en forma literal
  • x y z: x va primero, después y, después z, en ese orden (yuxtaposición)
  • x | y: x o bien y (se excluyen entre sí)
  • x || y: x o y o ambos a la vez (no se excluyen entre sí)
  • [ x y ]: los corchetes se usan para agrupar en caso de haber ambiguedad
  • x ?: x puede aparecer cero o una vez
  • x*: x puede aparecer cero o una o más veces
  • x+: x puede aparecer una o más veces
  • x {1, 4}: x puede aparecer a lo menos una y a lo más cuatro veces

La yuxtaposición tiene preferencia por sobre la doble barra vertical, y la doble barra tiene preferencia sobre la barra simple.

Por ejemplo:

a b | c || d e
            

es equivalente a:

[ a b ] | [ c || [ d e ] ]

El valor por omisión para cada propiedad es mostrado en negrita, o aparece en forma separada.

Las propiedades se heredan (en cascada) a menos que se indique lo contrario. Los valores se refieren a cualquier selector que pueda adquirir la propiedad especificada, a menos que se indique lo contrario.

Características de la letra
font-size : <longitud> | <porcentaje> | <numero> | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller

Indica el tamaño de la letra. Los valores porcentuales son en relación al tamaño del elemento del cual heredan.

Por ejemplo, si los párrafos fueron especificados con tamaño 10pt, entonces las siguientes dos líneas significan lo mismo:

BLOCKQUOTE { font-size: 120% } BLOCKQUOTE { font-size: 12pt }

Los valores larger y smaller aumentan o disminuyen el tamaño de la letra de manera relativa.

font-family : [[ <nombre> | serif | sans-serif | cursive | fantasy | monospace],]*[<nombre> | serif | sans-serif | cursive | fantasy | monospace ]

Indica el tipo de letra, tal como fue explicado anteriormente. Se recomienda que los tipos de letra sean encerrados entre comillas, a excepción del último.

font-weight :extra-light | light | demi-light | medium | demi-bold | bold | extra-bold | bolder | lighter

Los valores bolder y lighter se dan en relación a la opacidad actual, y lo incrementan o decrementan (respectivamente) en dos unidades.

font-style :normal | italic || small-caps | oblique || small-caps | small-caps

Indica un cambio en las características de la letra. Los valores son italic (cursiva - o inclinada hacia adelante), oblique (oblicua - o inclinada hacia atrás) o small-caps (se coloca todo el texto como si estuviera en mayúsculas, y las letras que son verdaderamente mayúsculas se colocan más grandes).

Adicionalmente, se puede usar "italic small-caps" o bien "oblique small-caps" (sin incluir las comillas).

line-height :<longitud> | <número> | <porcentaje>

Indican la altura de la línea de texto. Los valores porcentuales se refieren al tamaño de letra en curso.

font :[ <font-weight> || <font-style> ]? <font-size> / <line-height> ]? <font-family>

Comando genérico de cambio de tipo de letra, que soporta todos los anteriores al mismo tiempo, en una notación más compacta. Ejemplo:

Propiedades del texto
word-spacing :normal | <longitud>

Distancia que separa a las palabras del texto; usualmente es asignada en forma automática de manera bastante adecuada.

letter-spacing :normal | <longitud>

Distancia que separa a dos letras en el texto; usualmente es asignada en forma automática de manera bastante adecuada.

white-space :normal | pre | nowrap

Define el tratamiento que se le dará al espacio en blanco dentro del elemento. Lo normal es que más de un espacio en blanco es tratado como un sólo espacio. Si se usa el valor pre, entonces los múltiples espacios en blanco producirán un espaciamiento mayor.

El valor nowrap, indica que los espacios en blanco serán considerados como un caracter más formando parte de una palabra, por lo que las palabras no serán cortadas.

text-decoration :none | [ underline | overline | line-throught | blink ]+

Indica adornos o cualidades extra de la letra. Esta propiedad no es heredada. Los valores permitidos son underline (subrayado), overline (línea por encima del texto), line-throught (tachado) y blink (parpadeo),

text-transform :none | capitalize | uppercase | lowercase

Permite cambiar el texto al cual se refiere, poniendo la primera letra en mayúscula, todo en mayúsculas o todo en minúsculas, respectivamente.

Posicionamiento

vertical-align :baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje>

Indica la posición del selector, en cuanto a alineamiento vertical, con respecto a los límites del texto y los límites de la línea de texto.

text-align : left | right | center | justify

Se aplica sólo a los elementos de tipo bloque. El valor justify indica que se insertarán espacios extra entre las letras para que las líneas de texto ocupen todo el ancho permitido para su bloque.

text-indent : <longitud> | <porcentaje>

Indica la sangría en los elementos de bloque. Su valor por omisión es cero, y los valores porcentuales se refieren a la sangría del elemento padre.

Márgenes y bordes

En este item, debemos hacer algunas aclaraciones previas, para definir la nomenclatura que usamos en las hojas de estilo, en lo concerniente a la diferencia entre padding, margin y border.

El padding es un espacio que forma parte del elemento, y separa la parte imprimible del selector (lo que llamamos, su contenido), de su borde. El borde corresponde al borde visible que separa al espacio de padding del márgen. El márgen es espacio que está fuera del elemento, y cuya apariencia no es controlable por él.

margin-left (margin-right, margin-top, margin-bottom): <longitud> | <porcentaje> | auto

Indica el márgen izquierdo (respectivamente: derecho, superior e inferior) del selector.

margin <longitud> | <porcentaje> {1,4}

Indica todos los márgenes a la vez, en el mismo orden del ítem anterior.

padding-left (padding-right, padding-top, padding-bottom): <longitud> | <porcentaje> | auto

Indica el padding izquierdo (respectivamente: derecho, superior e inferior) del selector.

padding

Indica todos los espacios de padding a la vez, en el mismo orden del ítem anterior.

border-left (border-right, border-top, border-bottom): <ancho del borde> || <estilo del borde> || <color del borde>

Indica propiedades para el borde izquierdo (respectivamente: derecho, superior e inferior) del selector.

El ancho del borde puede ser una unidad estándard de longitud, o bien una de las siguientes palabras reservadas: thin (pequeño), medium (mediano), thick (grueso).

El estilo del borde puede ser none (ninguno) o alguna de las siguientes palabras reservadas: dotted (puntos), dashed (rayas), solid (línea continua) o double (doble línea continua). También se provee de estilos de borde en 3 dimensiones: groove (borde en bajo relieve), ridge (borde en sobre relieve), inset (todo el elemento en bajo relieve) y outset (todo el elemento en sobre relieve).

border : <longitud> | <porcentaje>

Indica propiedades globales para el borde del elemento, con la misma sintaxis anterior.

Dimensiones y flujo del texto
width (height) : none | <longitud> | <porcentaje>

Indica el ancho (respectivamente: la altura) del elemento. Esta propiedad se aplica a selectores de tipo bloque, o a los que son reemplazados por otros elementos (i.e.: imágenes).

Los valores porcentuales se refieren a las dimensiones del elemento del cual hereden propiedades.

Si una de las dos dimensiones es fijada, y la otra está en auto, las proporciones se mantienen.

float :none | left | right

Por omisión, los elementos de tipo bloque y las imágenes son mostradas en el lugar del texto donde aparecen. Si uno indica float: left, el elemento aparecerá en el costado izquierdo de su elemento padre (el elemento en el cual se encuentra), y el texto fluirá alrededor de ella. Lo mismo ocurre si float : right.

Esta declaración - como un efecto colateral - transforma cualquier elemento en un elemento de tipo bloque.

clear :none | left | right | both

Permite decidir si el elemento en cuestión admitirá imágenes flotantes, o requiere de espacio en blanco al lado izquierdo o derecho o en ambos costados.

Cuerpo del documento
color : <color>

Indica el color de todos los elementos, a menos que subsecuentes reglas asocien color explícito a algunos elementos. Los colores se indican de acuerdo a lo que se definió anteriormente.

background : transparent | <color> [ / <color> ]? || <dirección de la mezcla> || <url> || <tipo de repetición> || <posición> || <scrolling>

Indica propiedades genéricas para el fondo de un elemento, o sea, la superficie en la cual se muestra el contenido (ej.: texto).

El fondo puede ser :

transparente P { background : transparent } de un sólo color BODY { background: red } de dos colores mezclados en degradación H1 { background : yellow / green } formado por una imágen BODY { background: url( nubes.gif ) 50% repeat fixed }

Se puede especificar conjuntamente un fondo con color (colores) y una imágen; en ese caso, los colores se usarán para llenar las regiones transparentes de la imágen o mientras la imágen está siendo cargada.

Esta propiedad no se hereda, sino que como todos los elementos tienen por omisión fondo transparente, se puede "ver" el fondo del elemento "padre" a través del fondo del elemento "hijo".

Usando dos colores se pueden lograr interesantes efectos; la dirección de la mezcla se indica hacia donde se fusionará el primer color con el segundo, y puede tomar alguno de los valores siguientes es: N, S, E, W, NW, NE, SW y SE. El valor por omisión es S (sur).

Cuando se usa una imágen para rellenar el fondo, se pueden especificar dos propiedades adicionales.

1.El tipo de repetición determina cómo se repetirá la imágen: repeat-x (repetir horizontalmente), repeat-y (repetir verticalmente), no-repeat (no repetir) y repeat (repetir horizontal y verticalmente), que es el valor por omisión.

2.La posición especifica su localización inicial a lo ancho y a lo alto del elemento, en porcentaje (si se pone un solo valor, este se refiere a ambas dimensiones a la vez). Adicionalmente, se provee de las abreviaturas left, center y right para indicar posición horizontal de 0%, 50% y 100% respectivamente, y top, middle y bottom para indicar posición vertical de 0%, 50% y 100%.

Finalmente, el scrolling indica si el fondo permanecerá fijo al fondo de la ventana (valor fixed), o se moverá junto con el elemento al cual se está aplicando (valor scrolling).

Otros
display : block | inline | list-item | none

Esta propiedad indica una transformación en el tipo de elemento al cual se refiere. Es asignada por el mismo lenguaje HTML, y no debería ser cambiada salvo situaciones especiales.

El valor block indica que el elemento produce un quiebre de linea antes y después. El valor inline indica que el elemento es reemplazado por otro elemento al momento de mostrarlo (por ejemplo, imágenes). El valor list-item indica que se trata de un ítem de lista.

El valor none indica que el elemento no será mostrado, ni los elementos que estén dentro de él ni la caja alrededor.

Por ejemplo:

IMG { display: none }
list-style : [ disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ] || <url>

Esta propiedad puede ser aplicada a cualquier elemento que tenga propiedad display igual a list-item, de acuerdo a lo especificado por el usuario o por el mismo estándard HTML (el elemento LI corresponde a esta última clasificación).

Ejemplo:

UL UL { list-style: circle }

Indica que los ítems de lista no numerada, de segundo nivel, serán marcados con un círculo.

ChaTo = Carlos Castillo, Ph.D.  :::  Acerca de este Sitio ChaTo = Carlos Castillo, Ph.D. ::: Acerca de este Sitio