Home

Manual

Indice del manual

Anterior Siguiente

CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

En este manual, los vnculos acompaados con el cono indican una pgina de prueba para el tema tratado. Con se identifican aquellos que conducen a una pgina de la traduccin de la Especificacin CSS2.

La Especificacin CSS2 es bastante extensa e incluye temas que an no estn desarrollados en este manual, pero estoy trabajando para cubrir todos los puntos que abarca la especificacin. Al final de la pgina se encuentran los vnculos que conducen a archivos con listados de propiedades o elementos que pueden resultar tiles para una consulta rpida. Si usa IExplorer habr notado el cambio de color en la barra de desplazamiento con el estilo predeterminado. Aqu encontrar la explicacin sobre cmo cambiar el color de la barra.

Default OK

Ver explicacin 1. Una introduccin al tema de las Hojas de Estilo y su sintaxis. Algunos conceptos avanzados que explican cmo funcionan las CSS. 1. Introduccin a las CSS r Qu son las Hojas de Estilo r Cmo funcionan r Ventajas (y desventajas) 2. Sintaxis de las CSS r Estructura de una CSS r Reglas r Reglas arroba r Comentarios 3. Cascada y herencia r Introduccin r Cascada r La regla @import

r r

r r

El orden de la cascada La regla !important s CSS y accesibilidad s Un truco con las CSS Herencia Valores especificados, computados y reales

2. Todos los tipos de selectores que es posible usar en las CSS para identificar elementos en la pgina. 1. Selectores Introduccin r Selectores de tipos r Selectores de clases r Selectores de ID r Selectores de atributos r Selector universal r Agrupamiento 2. Selectores contextuales r Introduccin r Selectores de descendientes r Selectores de hijos r Selectores de hermanos adyacentes 3. Pseudo-clases r Introduccin r :first-child r :link y :visited r :hover, :active y :focus r :lang 4. Pseudo-elementos r Introduccin r :first-line r :first-letter r :before y :after
r

3. Detalles del modelo de cajas de CSS. Propiedades para definir el color y fondo de las cajas. 1. Cajas: mrgenes, rellenos y bordes r Introduccin r Propiedades del margen r Propiedades del relleno r Propiedades del borde s Ancho del borde s Color del borde s Estilo del borde s Propiedades resumidas del borde 2. Colores y fondos r Introduccin r Color del primer plano r Propiedades del fondo s Background-color s Background-image s Background-repeat s Background-attachment s Background-position s Background

4. El modelo de formato visual que rige el comportamiento de las cajas.

1. El formato visual r Introduccin r La propiedad "display" r La propiedad "position" r Desplazamientos s Top s Right s Bottom s Left r La propiedad "z-index" r La propiedad "float" r La propiedad "clear" 2. Medidas r Introduccin r Ancho del contenido: 'width' r Anchos mnimo y mximo s 'min-width' s 'max-width' r Altura del contenido: 'height' r Alturas mnima y mxima s 'min-height' s 'max-height'

5. Efectos visuales y elementos relacionados con el formato visual.

1. Efectos visuales r Introduccin r Desbordamiento: la propiedad 'overflow' r Recorte: la propiedad 'clip' r Visibilidad: la propiedad 'visibility' 2. Interfaz del usuario r Introduccin r Cursores: la propiedad 'cursor' r Contornos dinmicos: 'outline' s 'outline-width' s 'outline-style' s 'outline-color' 3. Contenido generado r Introduccin r La propiedad 'content' r Comillas: la propiedad 'quotes' r Contadores y numeracin automtica

Listados tiles y referencias rpidas. Explicacin de los valores bsicos en CSS.

q q

q q

Indice de propiedades Valores r Tabla de nombres de colores r Tablas de colores del sistema r Paleta Web Listado de elementos de HTML 4.0 Propiedades para las scrollbars (IExplorer solamente)

Volver

Home

CSS2

Manual

Autor

Cambiando de CSS con un click

CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css Cmo demostrar el potencial de las hojas de estilo? Nada mejor que mostrarlas en accin permitiendo que el usuario elija una CSS entre varias disponibles. Mejor an, consiguiendo que a partir de ese momento la CSS que escogi siga aplicndose a todas las pginas que visite. El desafo consiste en utilizar en todo momento la misma pgina HTML y solamente cambiar la referencia a las distintos archivos .CSS con las hojas de estilo. De este modo es posible observar cmo una pgina puede ser totalmente alterada en su aspecto visual sencillamente cambiando sus estilos mientras se mantiene intacta su estructura formal. El problema es guardar de algn modo la seleccin del usuario y pasar esa informacin a las pginas antes de que stas sean mostradas. Bastara con completar la referencia dentro del encabezado de cada pgina con el nombre del archivo .CSS elegido:

Default OK

Ver explicacin

<link rel="stylesheet" type="text/css" href="?????.css">

Lgicamente esto no es posible de conseguir con pginas estticas, de modo que es necesario recurrir a un lenguaje de programacin, como PHP. Debo aclarar que para lograr estos cambios de estilo no es imprescindible que las pginas sean archivos PHP. Aqu la programacin se utilizan solamente para el propsito descripto anteriormente: conservar el nombre del archivo .CSS seleccionado y escribirlo en la referencia de la pgina HTML antes de que sta sea mostrada. Todas las modificaciones que se observan en el documento al cambiar la CSS son provocados por las propias hojas de estilo y PHP no tiene ms intervencin que la ya mencionada.

Por qu PHP?
Aclaro que no soy un experto en programacin ni mucho menos pero me he interesado por PHP para construir aplicaciones web dinmicas por varias razones: es un software de cdigo abierto (se puede obtener gratuitamente) que puede ejecutarse en las plataformas ms usadas (Unix, Linux, Windows, Solaris, etc.). Adems, incluye soporte para un gran nmero de bases de datos y otras tecnologas como Java y XML y, segn dicen quienes saben,

es de fcil aprendizaje. Pero lo que me decidi finalmente fue la nota "Authenticate and Track Users with PHP" de Julie Meloni (que obtuve en http://www. phpbuilder.com/ ) donde se explica el manejo de sesiones en PHP4 y que me di la idea para desarrollar este sistema.

Qu son las sesiones?

El uso de sesiones es una forma de mantener informacin especfica de un usuario sin necesidad de programar cookies o de realizar llamadas a una base de datos. En trminos temporales, una sesin es la duracin de la visita del usuario. En trminos de programacin es un objeto identificado por una cadena (por ejemplo: 940f8b05a40d5119c030c9c7745aead9) que puede almacenar todo tipo de variables y valores. La cadena identificatoria es enviada a la mquina del usuario a travs de una cookie llamada PHPSESSID. En el servidor, un archivo temporal coincidente es creado con el mismo nombre. Cada objeto sesin contiene las variables registradas y el archivo creado en el servidor las almacena junto con los valores especificados. Como estos valores y las variables no son recogidas en una base de datos, no se requiere ningn recurso adicional del sistema.

Manos a la obra
Los ingredientes necesarios son: las pginas HTML, varios archivos .CSS con los distintos estilos que vamos a permitir seleccionar y un servidor con soporte para PHP4 para montar nuestra web (toda receta tiene al menos un ingrediente difcil). Al comienzo de cada pgina, antes de cualquier otro cdigo, colocamos el siguiente script:

<? session_start(); if (!$PHPSESSID) { session_register('micss'); $micss = "default"; } else if ($sel_css) { $micss = $sel_css; } ?>
Veamos esto en detalle: si no existe ninguna sesin abierta (if (!$PHPSESSID)) se comienza una y se registra la variable que usaremos luego (session_register('micss')). Luego le asignamos a la variable $micss el valor default que es el nombre de nuestro archivo .CSS predeterminado.

As nos aseguramos de que siempre exista una hoja de estilo aplicada a las pginas. Luego se verifica que exista la variable $sel_css (ya veremos cmo se puede definir mediante el formulario de seleccin) y en ese caso le asignamos su valor a $micss (en lugar de default). Repasemos: si no existe una sesin, iniciamos una y registramos la variable $micss. Inmediatamente le asignamos el valor default a esa variable (pero se lo cambiamos si el usuario ha realizado otra seleccin). Ahora necesitamos un formulario dentro de las pginas para darle la oportunidad al usuario de cambiar el estilo:

<FORM METHOD="POST" ACTION="<? echo $PHP_SELF ?>"> <select name="sel_css"> <option value="default" selected>Default</option> <option value="dibujo">Dibujo</option> <option value="grafo">Grafo</option> <option value="metal">Metal</option> <option value="sistema">Sistema</option> </select> <input type="submit" name="submit" value="OK"></p> </FORM>
El nombre de la lista de seleccin es sel_css (la variable cuya existencia comprobamos en el script anterior) y los posibles valores son los nombres de los archivos .CSS que hemos preparado. Observen que la frmula $PHP_SELF utilizada en la propiedad ACTION es la manera de referenciar la propia pgina que contiene el formulario. De este modo, cuando el usuario presiona el botn "OK" se vuelve a abrir la pgina con la nueva variable. Bien, ya tenemos el modo de cambiar los valores de la variable $micss segn la eleccin del usuario pero dnde la usamos? En la referencia a la hoja de estilo externa:

<link rel="stylesheet" type="text/css" href="<? echo "$micss"; ?>.css">

Si no hubiera ninguna seleccin por parte del usuario, el valor para $micss sera default y la lnea quedara as:

<link rel="stylesheet" type="text/css" href="default.css">

Pero si existe una seleccin (supongamos que el usuario eligi la opcin metal) la lnea sera:

<link rel="stylesheet" type="text/css" href="metal.css">

Y eso es todo. Lo dems corre por cuenta de los estilos que hayamos definido en nuestras CSS (default.css, metal.css, dibujo.css, etc.).

Una cosita ms...

Descubr que haba un inconveniente al regresar a una pgina ya visitada por cuanto es comn que el navegador las conserve en su memoria cach para acelerar la navegacin. De este modo, si luego de pasar por varias pginas cambiamos la hoja de estilo y regresamos a una ya visitada, el navegador no muestra la nueva versin de la pgina sino la que tiene almacenada en su memoria cach (con la antigua hoja de estilo). Este inconveniente se soluciona colocando en la seccin <HEAD> de las pginas los siguientes "meta tags":

<META HTTP-EQUIV="Expires" CONTENT="Mon, 06 Jan 1990 00:00:01 GMT"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> Resultados

Estas son cuatro pantallas de mi pgina de inicio tras aplicarles otras tantas hojas de estilo. Es difcil creer que se trata siempre del mismo documento pero lo es! Como tienen un propsito demostrativo, el acento est puesto en extremar las diferencias antes que en buscar la utilidad de cada diseo. Un uso ms lgico sera proporcionar una CSS optimizada para Netscape, otra para IExplorer, para distintas resoluciones de pantalla y para cada sistema operativo. Finalmente, si le interesa, estas son las hojas de estilo que he utilizado en mis ejemplos:
q

default.css

q q q q q q

Dexter.css Didi.css dibujo.css grafo.css metal.css sistema.css

Home

Manual

1.1 Introduccin a las CSS

Anterior Siguiente

| Qu son las Hojas de Estilo | Cmo funcionan | Hojas de Estilo incrustadas | Hojas de Estilo en lnea | Ventajas (y desventajas) | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Qu son las Hojas de Estilo

Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar formato a los documentos escritos en HTML (y en otros lenguajes estructurados, como XML) separando el contenido de las pginas de su apariencia. Para el diseador, esto significa que la informacin estar contenida en la pgina HTML, pero este archivo no debe definir cmo ser visualizada esa informacin. Las indicaciones acerca de la composicin visual del documento estarn especificadas en el archivo de la CSS. Volver

Default OK

Ver explicacin

Cmo funcionan
Veamos primero como trabaja el cdigo HTML. En HTML, las etiquetas (tags) le indican al navegador los elementos que componen la pgina y ste aplica el formato a cada elemento en particular, por ejemplo:

<H1>Ttulo</H1>
especifica que el texto "Ttulo" es un Encabezado (Heading) de nivel 1 dentro de los 6 niveles definidos por HTML. El navegador aplicar a ese texto el formato predeterminado (que vara un poco si se trata de Internet Explorer, Netscape, o si usamos Windows, Mac o Linux). Probar Si quisiramos componer los encabezados H1 con tipografa Arial, de 19 puntos, en color azul y alineacin central, deberamos especificarlo del siguiente modo:

<H1 ALIGN="center"> <FONT FACE="Arial" COLOR="#0000FF" SIZE="5"> Ttulo</FONT> </H1>

Por supuesto, esto debera repetirse en cada encabezado H1 de cada pgina de nuestro sitio. Probar Las Hoja de Estilo no utilizan el archivo de la pgina Web para especificar el formato de la pgina (en realidad, a veces pueden hacerlo, como veremos ms adelante). En su lugar, usan un archivo de texto puro con extensin . CSS que luego se vincula a la pgina. Este archivo contiene reglas que constan de un selector (en este ejemplo, H1) y una o ms declaraciones (en el ejemplo tenemos cuatro declaraciones). Cada declaracin tiene dos partes: una propiedad (por ejemplo, FONT SIZE) y un valor (en este caso, 19pt). Estas reglas son las que determinan cmo deber mostrarse la pgina. Nuevamente, si quisiramos componer los encabezados H1 con tipografa Arial, de 19 puntos, en color azul y alineacin central, el archivo CSS debera contener el siguiente texto:

H1 { font-family: Arial, Sans-serif; font-size: 19pt; color: #0000FF; text-align: center; }

Probar Luego, en cada pgina de nuestro sitio agregamos un link a la Hoja de Estilo:

<LINK REL="stylesheet" HREF="hoja_de_estilo.css" TYPE="text/css">

El elemento LINK especifica:
q

el tipo de vnculo: a una hoja de estilo ("stylesheet")

q q

la ubicacin de la hoja de estilo a travs del atributo "href" el tipo de hoja de estilo que se vincula: "text/css"

Ahora, todos los encabezado H1 de las pginas que contienen la referencia al archivo de la CSS tendrn el aspecto que hemos definido. Volver

Hojas de estilo incrustadas

Hemos visto cmo las reglas de estilo se especifican en un archivo externo. Este mtodo es el ms recomendable y el que permite mayor flexibilidad: los estilos pueden cambiarse sin tocar el cdigo HTML y la CSS puede ser compartida por varias pginas. Tambin existe la posibilidad de poner la hoja de estilo dentro de una pgina HTML usando el elemento STYLE.

<HTML> <HEAD> <TITLE>CSS incrustada</TITLE> <STYLE type="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Ttulo color azul</H1> <P>Un prrafo cualquiera... </BODY> </HTML>
Como se ve en el ejemplo, el elemento STYLE se usa dentro del encabezado (<HEAD></HEAD>) de la pgina, especificando el tipo de hoja de estilo: <STYLE type="text/css">

H1 { color: blue } ... (aqu se agregan todas las reglas de estilo) ...
</STYLE>

Este mtodo permite aplicar la hoja de estilo solamente a la pgina que la contiene. Si bien no es tan prctico como usar una CSS externa, resulta til cuando en nuestro sitio tenemos algunas pocas pginas que usan un formato distinto al resto. En muchos casos convendr usar ambos mtodos simultneamente: poner un link a una hoja externa para aplicar un estilo general y luego crear una hoja incrustada en la que solamente deberemos definir las reglas especficas para esa pgina. Por las leyes de cascada de las CSS, en caso de existir una misma regla (una en la hoja externa, otra en la hoja incrustada) con distintos valores, tiene preponderancia la definida en la hoja incrustada. Volver

Hojas de estilo en lnea

Por ltimo, tambin es posible aplicar el estilo directamente en la etiqueta HTML:

<P STYLE="text-align: left; text-indent: 1em">

Por supuesto, la definicin del estilo dentro de la propia etiqueta (tag) no es la manera ms eficaz de utilizar las hojas de estilo, pero pueden existir casos que lo justifiquen. La existencia de una regla como la del ltimo ejemplo constituye por s misma una hoja de estilo por lo que debemos declarar en el encabezado de la pgina el tipo de CSS que estamos usando.

<STYLE type="text/css"></STYLE>
Esta declaracin no ser necesaria si en la misma pgina estamos usando una hoja de estilo incrustada o si existe una referencia a una hoja externa. Esta forma de aplicar la hoja de estilo directamente en la etiqueta es similar al modo usado en el cdigo HTML, pero con dos importantes diferencias: 1. El conjunto de propiedades que se pueden aplicar es mucho mayor y 2. Los estilos especificados en una hoja de estilo (cualquiera sea su origen) tienen preferencia por sobre los formatos aplicados con HTML. Esto significa que si en nuestra hoja de estilo hemos definido:

P {text-align: left}
Todos los prrafos quedarn alineados por la izquierda y, si en un prrafo determinado, usamos:

<P align="center">
El prrafo seguir estando alineado por la izquierda porque las reglas de las CSS tienen ms fuerza que el formato aplicado con HTML. Probar

Volver

Ventajas (y desventajas) de las Hojas de Estilo

Si consideramos los ejemplos anteriores, resultan evidentes algunas ventajas: 1. Con una Hoja de Estilo podemos alterar la presentacin de cada elemento sin tocar el cdigo HTML, ahorrando esfuerzo y tiempo de edicin. Si quisiramos alinear a la izquierda los encabezados H1 de nuestras pginas, bastara con cambiar en la CSS la declaracin "textalign: center" por "text-align: left" e inmediatamente cada H1 se alineara a la izquierda en todas las pginas vinculadas a la Hoja de Estilo. De este modo no slo simplificamos el mantenimiento del sitio sino que adems reducimos las posibilidades de cometer errores. 2. El lenguaje de las CSS ofrece herramientas de composicin ms potentes que HTML. Hemos especificado en los ejemplos una fuente alternativa genrica (Sans-serif) para el caso de que la mquina del usuario no contenga la Arial (en HTML no existen estas fuentes genricas). Con HTML, el tamao de la fuente se especifica con un sistema de medidas predeterminadas por el browser (en el ejemplo, SIZE=5), con las CSS hemos especificado el tamao en puntos tipogrficos (y podemos hacerlo en cm, pixeles, cuadratines, altura de la x, etc.). Ms an, las CSS permiten aplicar prcticamente todas las propiedades a cualquier elemento de la pgina, mientras que HTML slo permite un nmero limitado de propiedades para cada elemento. Probar 3. Se evita tener que recurrir a trucos para conseguir algunos efectos. Con CSS no es necesario usar imgenes invisibles para hacer una sangra (la propiedad text-indent se encarga de eso) o usar una tabla para ubicar un elemento en determinado lugar de la pantalla (las CSS permiten posicionar con precisin cualquier elemento). Adems

4. El lenguaje de las Hojas de Estilo, aunque muy potente, es relativamente sencillo y fcil de aprender. 5. Los documentos que usan CSS generalmente resultan ms compactos. 6. Las Hojas de Estilo pueden aplicarse de varias maneras y combinarse formando una cascada de estilos con la informacin de cada una. 7. Pueden usarse con otros lenguajes de programacin (como JavaScript) para conseguir efectos dinmicos en las pginas. 8. Se pueden especificar Hojas de Estilo para diferentes navegadores y tipos de medios (impresos, braille, auditivos, etc.). 9. El usuario con alguna discapacidad (o simplemente por preferencias) puede definir su propia Hoja de Estilo y la regla !important obliga a su navegador a suplantar la Hoja de Estilo del autor. 10. Por cierto, existen otras ventajas muy importantes pero, como esto ya se parece a un folleto de ventas, terminar aqu la lista de elogios. Ver En cuanto a las desventajas en el uso de las Hojas de Estilo, la nica de importancia es el soporte irregular que tienen las CSS por parte de los navegadores. Ciertas propiedades que funcionan en un browser no funcionan en otros, o existen diferencias en un mismo navegador segn sea para Windows o Mac. Tambin existen diferencias entre distintas versiones de un mismo browser. Esto puede provocar que: 1. Nuestra pgina sea visualizada por el lector con un formato no deseado por nosotros. En todo caso, el navegador aplicar el formato predeterminado y nuestro trabajo de composicin habr sido intil. 2. Algunas propiedades de las CSS (como las que afectan la posicin o visibilidad de los elementos) pueden provocar que una parte del contenido de nuestra pgina resulte inaccesible desde ciertos navegadores si no son utilizadas correctamente. Debe entenderse que las Hojas de Estilo fueron diseadas para permitir que los autores influyan en la composicin de la pgina, pero no para que la controlen. Una CSS sugiere al browser un estilo de composicin para el documento pero no puede forzarlo a aplicar un formato determinado. Las Hojas de Estilo son una herramienta que puede resultar muy efectiva para lograr una presentacin atractiva de la pgina siempre que la pgina no sea dependiente de la Hoja de Estilo. Se debe considerar en todo momento aquellos navegadores que no soportan CSS, cuidando que los mismos puedan mostrar la pgina correctamente y en su totalidad an cuando nuestras reglas de estilo no sean aplicadas. En este sentido, espero que esta gua de uso de las CSS ayude no slo a conocer el lenguaje de las Hojas de Estilo sino tambin a aplicarlas con el mayor beneficio.

Volver

Home

Manual

Scrollbars en IExplorer 5.5

El WWW Consortium (W3C) est conformado por las principales empresas involucradas con la Web y, a travs de sus grupos de trabajo, desarrolla los estndares y lenguajes que sern utilizados en la industria. CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css Sin embargo, por distintos motivos, las empresas no cumplen puntualmente con estos estndares. El soporte a CSS2, por ejemplo, es tan irregular que no se puede saber a ciencia cierta qu propiedades van a funcionar en cada navegador. En otros casos, se implementan algunas caractersticas no definidas por el W3C, como es el caso de las propiedades que IExplorer 5.5 acepta para cambiar las caractersticas de las barras de desplazamiento. Decidi incluirlas en este manual (y tambin en mis hojas de estilo) porque no se puede desconocer que este programa es el ms utilizado actualmente y porque, en definitiva, se trata solamente de un agregado esttico que ser ignorado por los dems navegadores. Estas son las propiedades para conseguir ese efecto tan colorido en las scrollbars. Por supuesto, son aceptadas nicamente por IExplorer 5.5, de modo que si se utiliza otro navegador la barra tendr sus colores normales.

Default OK

Ver explicacin

BODY {scrollbar-face-color: blue; scrollbar-highlight-color: yellow; scrollbar-shadow-color: maroon; scrollbar-arrow-color: white; scrollbar-base-color: green }
En el grfico siguiente se muestra la barra ampliada con los colores aplicados con estas reglas y, a la derecha, los colores de la barra normal.

Volver

Home

Manual

1.2 Sintaxis de las CSS

Anterior Siguiente

| Estructura de una CSS | Reglas | Reglas arroba | Comentarios | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Estructura de una CSS

Hemos visto que las CSS pueden ser externas o estar contenidas en el archivo HTML. Una Hoja de Estilo externa es un simple archivo de texto con extensin .CSS (en algunos navegadores, esto no es absolutamente necesario pero conviene no obviarlo). Este archivo no necesita ninguna declaracin inicial ni otra identificacin que su propio nombre con extensin y contiene una serie de instrucciones llamadas estamentos. Los estamentos pueden ser de dos clases: Ver Reglas Reglas-arroba

Default OK
q q

Ver explicacin

Volver

Reglas
Una regla es un tipo de estamento que (1) identifica un elemento de la pgina HTML y (2) le indica al navegador el estilo que deber tener ese elemento. El siguiente es un ejemplo de una regla CSS:

P { background-color: red; color: #FFFFFF }

Cada regla consta de: un selector (P) que identifica (o selecciona) un elemento de la pgina Web.

Al selector le sigue un bloque de declaraciones que comienza con una llave de apertura ({) y termina con otra llave de cierre (}). Entre las llaves van las declaraciones (background-color: red; color: #FFFFFF), que son las que le indican al browser el estilo para el elemento seleccionado. Las declaraciones, a su vez, tienen dos partes: una propiedad (background-color, color) que consiste en alguna de las palabras claves definidas por el lenguaje, seguida de dos puntos (:) y un valor (red, #FFFFFF) para esa propiedad. Existen distintos valores y cada propiedad puede aceptar algunos de esos valores. El ejemplo anterior provocar que los prrafos (elementos P) de la pgina Web tengan de primer plano (color) un color blanco (#FFFFFF) y un fondo (background-color) de color rojo (red). Cuando hay ms de una declaracin, como en este caso, deben ir separadas entre s por punto y coma (;). Por una referencia rpida de las propiedades y valores posibles consulte el Indice de Propiedades de este manual.

Volver

Reglas arroba
El otro tipo de estamento se llama regla arroba porque comienza con el carcter arroba (@) seguido inmediatamente (es decir, sin espacios intermedios) por un identificador. Segn de qu regla arroba se trate finalizar con un punto y coma (;) o podr tener un bloque de declaraciones posterior. Estos son dos ejemplos de este tipo de regla:

@import "impres.css"; @media print { BODY { font-size: 10pt } }

Las reglas arroba sirven para indicarle al navegador algo ms que un estilo de composicin. En el ejemplo anterior, la primera sirve para importar otra Hoja de Estilo para ser usada conjuntamente con la actual, la segunda indica que la declaracin BODY Ver {font-size: 10pt} se usar solamente cuando la pgina sea impresa.

Volver

Comentarios
En cualquier lugar de la pgina pueden incluirse comentarios. Estos no influyen en el procesamiento de la Hoja de Estilo y deben comenzar con una barra y un asterisco (/*) y terminar con un asterisco y una barra (*/). Pueden ocupar varias lneas de texto pero no Ver pueden anidarse (incluir un comentario dentro de otro comentario).

/* Esto es un comentario */
Volver

Home

Manual

1.3 Cascada y herencia

Anterior Siguiente

| Introduccin | Cascada | La regla @import | El orden de la cascada | La regla !important | Herencia | Valores especificados, computados y reales | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Escribir y aplicar una hoja de estilo a nuestras pginas es una tarea sencilla. Bastara con tener un conocimiento bsico acerca de su sintaxis y un listado con las palabras que deben usarse en cada caso. Sin embargo, existen algunos conceptos ms avanzados que es importante conocer para obtener el mximo provecho de este lenguaje. En esta seccin revisaremos la nocin de cascada y de una idea relacionada con ella, la herencia. Volver

Default OK

Ver explicacin

Cascada
Una hoja de estilo asociada con una o ms pginas Web resulta de mucha utilidad, pero tambin resulta insuficiente en ciertos casos, como un site muy grande o manejado por varias personas, en los cuales una sola hoja de estilo no alcanzara a cubrir todas las necesidades de diseo. Esta limitacin est cubierta mediante la posibilidad de vincular hojas de estilo y de crear una jerarqua de hojas de estilo relacionadas. Este proceso se llama cascada porque los estilos definidos en cada hoja se van sumando para finalmente ser volcados a la pgina (potico, verdad?). Potico y eficaz, por cierto. Pensemos, por ejemplo, en el caso del site de una organizacin con varios departamentos y otros tantos diseadores encargados del mantenimiento de las pginas. El modo de asegurar la uniformidad grfica del sitio completo es utilizar una hoja de estilo comn donde estn definidos los aspectos bsicos del diseo (fuentes, colores, etc.). Luego cada departamento puede tener, adems, su propia hoja de estilo donde se definirn los aspectos especficos de ese departamento. Estas hojas de estilo particulares no necesitan reproducir aquella hoja comn, sino que

basta con importarla haciendo que los estilos definidos en una y otras acten conjuntamente. Cualquier cambio en la hoja de estilo comn (una modificacin en los colores institucionales, por ejemplo) se vera reflejado inmediatamente en todas las pginas vinculadas. Volver

La regla @import
La regla @import permite importar hojas de estilo desde otras hojas de estilo. Se puede usar de las siguientes formas:

@import "hoja_de_estilo.css"; @import url("hoja_de_estilo.css");

Esta declaracin debe ir antes que cualquier otra regla en la hoja de estilo. Probar Este mecanismo, que permite sumar los estilos de una CSS a otra, puede provocar que existan varias reglas con distintos valores aplicados a un mismo elemento. En esos casos, hay ciertas normas que determinan cul de esos valores ser el que se aplique finalmente al elemento. Es decir, se establece un orden de preferencias dentro de la cascada. Volver

El orden de la cascada
Las hojas de estilo pueden tener tres orgenes: El autor: como hemos visto hasta ahora, puede hacerlo a travs de una hoja externa o incrustada, incluso definiendo el estilo en lnea. El usuario: tambin puede especificar su propia hoja de estilo. Esta posibilidad

puede resultar de gran ayuda para aquellas personas con discapacidades visuales o, simplemente, para quienes deseen adaptar las pginas a sus preferencias. Cada navegador tiene su forma particular de proveer al usuario la posibilidad de especificar una hoja de estilo propia. La aplicacin del usuario: el navegador tambin aplica una hoja de estilo predeterminada que presenta los elementos de la pgina de modo que satisfagan las expectativas generales de presentacin del documento. Las hojas de estilo con estos tres orgenes actan conjuntamente y el orden de la cascada determina, en el caso en que existan reglas incompatibles, cul de ellas tiene preponderancia. Las siguientes son las normas que determinan la fuerza de las reglas de estilo: 1. La primera disposicin se hace por el origen: las reglas de la hoja de estilo del autor tienen ms fuerza que las del usuario y stas, a su vez, prevalecen por sobre las del navegador. 2. La segunda disposicin es por especificidad: los selectores ms especficos tienen mayor fuerza que los selectores generales. Por ejemplo: UL {} es menos especfico que UL LI {}. En la Recomendacin CSS2 puede encontrar la explicacin acerca de cmo se calcula la especificidad de un selector. Ver 3. Finalmente, se dispone por el orden especificado: si dos reglas tienen la misma fuerza, origen y especificidad, la ltima en ser especificada es la que vence. Las reglas en las hojas de estilo importadas se considera que estn antes que cualquier regla en la propia hoja de estilo. Volver

La regla !important
La regla !important est pensada para permitir una mejor accesibilidad a los documentos, otorgndoles a los usuarios con requerimiento especiales (fuentes grandes, combinaciones de colores, etc.) el control sobre la presentacin. Ejemplo:

P { font-size: 14px !important }

Las declaraciones !important tienen ms fuerza que las declaraciones normales y las hojas de estilo del autor y del usuario pueden contener la declaracin !important, en cuyo caso la regla del usuario tiene mayor fuerza que la del autor. Aqu es importante destacar que, aunque las hojas de estilo del autor tienen preponderancia por sobre las del usuario, con la regla !important esto se revierte y se le da mayor poder a las preferencias del usuario. He creado una pgina sobre CSS y accesibilidad donde explico cmo se puede especificar en ciertos navegadores una hoja de estilo del usuario, ya sea mediante menes o con un archivo externo. Tambin he preparado, cediendo a mi costado menos serio, una pgina donde explico cmo se puede usar una hoja de estilo para asustar a otra persona (?).

Volver

Herencia
Cada pgina HTML est compuesta por una serie de elementos (ttulos, prrafos, listas, tablas, etc.) organizados en una estructura donde cada elemento est contenido por otro elemento, que a su vez puede estar contenido por otro. En esta estructura existe un elemento raz que es el que acta de contenedor de todos los dems elementos. En HTML se puede considerar como elemento raz al elemento <BODY> o al elemento <HTML>. La importancia de este hecho es que cada elemento hereda las propiedades del elemento que lo contiene (llamado el elemento padre). Quiere decir que si especificamos la propiedad color: red para <BODY>, todos los elementos de la pgina heredarn esta caracterstica y no ser necesario especificar nuevamente la propiedad color en cada uno de ellos. Aqu es necesario hacer algunas precisiones: 1. No todas las propiedades son hereditables y para cada propiedad se define si sta se hereda o no.

2. El valor inherit puede aplicarse a cualquier propiedad de los elementos. Este valor puede usarse para reforzar explcitamente la herencia de una propiedad o para lograr que un elemento herede de su padre una propiedad que de otro modo no sera heredada. 3. Cuando se asigna una propiedad a un elemento, el valor especificado reemplaza al valor heredado. 4. Los elementos heredan los valores computados del padre, no los valores especificados (en el siguiente punto esto se explica ms detalladamente). Hemos mencionado que un elemento que contiene a otro es llamado padre y, previsiblemente, al elemento contenido se le llama hijo. Existen otras relaciones que se usan en la definicin de los selectores: Descendiente un elemento (A) de descendiente de otro (B) cuando (B) es padre de (A) o cuando (B) es padre de otro elemento que a su vez es padre de (A). Antepasado un elemento (A) es antepasado de otro (B) cuando (B) es su descendiente. Hermano un elemento es hermano de otro cuando ambos comparten el mismo padre.

Volver

Valores especificados, computados y reales

Valor especificado Todas las propiedades tienen siempre un valor asignado. Puede ser el especificado en la CSS o, en su defecto, el valor heredado. En ausencia de los dos anteriores, se usa el valor inicial (el valor predeterminado para cada propiedad). Valor computado Cuando se especifica un valor relativo es necesario hace un clculo para obtener su valor absoluto. Por ejemplo, para resolver P {fontsize: 125%} se debe tomar el valor del elemento padre de <P> y aplicarle un porcentaje de 125% para obtener el tamao definitivo del texto. Supongamos que <BODY> es el padre de <P> y tiene un tamao

de fuente de 10px, entonces <P> tendr un tamao de fuente de 12,5px (10x125%=12,5). Los elementos que sean hijos de <P> no van a heredar el valor especificado (125%) sino el valor computado (12,5px). Valor real Puede suceder que el valor resultante no pueda ser utilizado por el navegador debido a limitaciones tcnicas y deba ser aproximado a otro valor. En el ejemplo anterior, en la pantalla no sera posible mostrar una fuente de 12,5px, por lo que el navegador la ajustar a 12px 13px. Este valor no resulta de mucho interes para el usuario sino para el programador. Pueden encontrar ejemplos en la seccin sobre Valores: porcentajes.

Volver

Home

CSS2

Manual

Autor

Hojas de Estilo en Cascada

CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css Estas pginas tienen como tema principal el lenguaje de las Hojas de Estilo en Cascada o CSS (sigla de su denominacin en ingls: Cascading Style Sheet). Las CSS complementan a otros lenguajes de descripcin de pginas utilizados para publicar documentos en la Web, como HTML o XML, con el propsito principal de permitir la separacin entre el contenido de las pginas y su forma de presentacin. El lenguaje de las Hojas de Estilo est definido en la Especificaciones CSS1 y CSS2 del World Wide Web Consortium (W3C) y, por lo tanto, es un estndar aceptado por toda la industria relacionada con la Web. Aqu encontrar la *traduccin de la Especificacin CSS2*, un documento extenso y de referencia permanente, donde se definen todos los aspectos referidos a este lenguaje. Puede descargar la traduccin en formato comprimido (zip) para consultar fuera de lnea. Tambin puede consultar el *manual de uso de las CSS*, que abarca desde los aspectos ms bsicos hasta los conceptos ms avanzados de las Hojas de Estilo en Cascada. Este manual cuenta con pginas de prueba para que los usuarios puedan verificar el desempeo de su navegador con relacin a las CSS.

Default OK

Ver explicacin

Fecha de publicacin: Enero 2000 | Fecha de actualizacin: Setiembre 2002

Home

Manual

CSS y accesibilidad

CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Las CSS2 introducen un cambio muy importante con respecto a la primera versin de las hojas de estilo en cascada (CSS1) que consiste en permitirle al usuario, mediante la regla !important, suplantar con sus propias reglas de estilo las especificadas por el autor del documento. De este modo, los usuarios con requerimientos especficos pueden modificar las opciones del creador de las pginas Web con el fin de mejorar su accesibilidad. Los navegadores tienen opciones que permiten modificar la apariencia de las pginas visitadas. Estas opciones constituyen de hecho la hoja de estilo del usuario (ver Cascada y herencia) y vamos a ver cmo la implementan los ltimos browsers para Windows y qu grado de efectividad tienen.

Default OK

Netscape 6
Con el men [Editar][Preferencias] accedemos a una ventana con distintas opciones de configuracin. Dentro de esta ventana, [Apariencia][Fuentes] permite definir los tipos y tamaos de letra para las pginas y elegir entre tres alternativas: que las fuentes seleccionadas se usen en lugar de las especificadas en el documento, que se usen las fuentes del documento pero no las fuentes dinmicas o que se utilicen todas las fuentes especificadas en el documento. En [Apariencia][Colores] podemos elegir una combinacin de colores para el texto, el fondo y los links visitados o no (y si queremos que los links aparezcan subrayados). Tambin podemos indicar que siempre se usen estos colores en vez de los colores especificados en las pginas. Sin necesidad de editar las preferencias, podemos cambiar el tamao de las fuentes mediante el men [Ver][Aumentar fuente] y [Ver][Disminuir fuente].

Ver explicacin

Opera 5
Este navegador no es muy utilizado pero es el que brinda la mayor cantidad de opciones

para adecuar el aspecto de la pgina a las necesidades del usuario. Mediante el men [Preferencias][Documentos] se accede a una ventana donde podemos elegir, por ejemplo, el tipo, color y tamao de la fuente para cada elemento, el color de fondo y el tamao mnimo de la letra. Tambin es posible habilitar o no el uso de las CSS, referenciar una hoja de estilo externa y establecer su prioridad con respecto a la hoja de estilo del documento. Otras opciones permiten habilitar el uso de tablas, fuentes y colores en la pgina. En la barra de navegacin existe un botn para alternar rpidamente entre las preferencias del documento y las del usuario. En Opera se puede modificar totalmente el aspecto de la pgina mediante sus menes o creando nuestra propia hoja de estilo, se pueden establecer prioridades y, con un simple click, cambiar las preferencias del autor por las nuestras y viceversa. Resulta de mucha utilidad para probar como se vern nuestras pginas con y sin las hojas de estilo y es una excelente opcin para los usuarios con discapacidades visuales.

Explorer 5.x
Explorer es actualmente el navegador con mejor soporte para las CSS2 (sin llegar a ser completo). Haciendo un click con el botn secundario del ratn sobre su cono y seleccionando [Propiedades de Internet] o desde el men [Herramientas] [Opciones de Internet] accedemos a una ventana con varias solapas. En [General][Colores] y [General][Fuentes] estn las opciones para modificar las fuentes (no su tamao), la combinacin de colores y el color de los links segn su estado (es el nico que permite un cambio de color cuando el link es sealado). En [General] [Accesibilidad] podemos hacer que se omitan los colores, las fuentes y los tamaos de las fuentes especificados en los documentos, tambin podemos referenciar una hoja de estilo propia. En los menes del navegador podemos seleccionar [Ver][Tamao del texto] y una de estas alternativas [Mayor|Grande|Mediana|Pequea|Menor].

Opera y Explorer, adems de las opciones disponibles en los menes, permiten usar una hoja de estilo externa. De este modo, el usuario obtiene la mxima flexibilidad para aplicar sus preferencias. Cada caso particular requerir de reglas especficas, pero este podra ser un ejemplo de una hoja de estilo para eliminar el color en las pginas.

BODY { color: background: * { color: background:

black white inherit transparent;

!important; !important;} !important; !important;}

Es posible que en ciertos casos sea necesario agregar reglas para una pgina determinada debido a problemas con el soporte, de parte de los navegadores, a ciertas propiedades de las CSS. Tambin puede suceder que influya el orden de la cascada y el grado de especificidad de ciertos selectores. Con el transcurso del tiempo iremos adaptndonos, los diseadores de las pginas y los usuarios de las mismas, a esta posibilidad de que los lectores puedan ejercer un rol activo en la presentacin visual de la informacin.

Volver

Home

Manual

Un truco con las CSS

Como no todo tiene que ser trabajo, voy a explicarles cmo usar una hoja de estilo del usuario para darle un susto a alguien que use IExplorer 5.x y de paso puedan apreciar el alto potencial de este lenguaje, an para cosas tan intiles como sta. CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css Con una CSS vamos a hacer que IExplorer 5.x (es el nico navegador en que este truco funciona plenamente) muestre, en lugar de cualquier pgina Web que se abra con l, nada ms que una imagen elegida por nosotros. Les presto sta:

Default OK

Ver explicacin

Que no cunda el pnico! Slo es una broma inofensiva. Instrucciones: (los nios no deben intentar esto sin la supervisin de un adulto) Debern crear una hoja de estilo, un simple archivo de texto que contenga las siguientes reglas:

* { visibility: BODY { visibility: background-color: background-image: background-repeat: background-position:

hidden visible black url(borrando.gif) no-repeat 200px 120px

!important;} !important; !important; !important; !important; !important;}

Esto es lo que hacen las reglas: la primera selecciona todos los elementos (*) y los vuelve invisibles, la segunda selecciona el elemento <BODY> y lo hace visible, con fondo negro, le pone la imagen con la falsa caja de dilogo, luego evita que la imagen se repita y le da una ubicacin determinada en la pantalla. En todos los casos, se usa !important para que estas reglas sustituyan a cualquier otra especificada por el autor. Lo dems es sencillo, subrepticiamente editan las [Propiedades de Internet] de Explorer y en la opcin [General][Accesibilidad] indican la posicin de su hoja de estilo (puede estar en cualquier lugar del disco). Ahora, quien intente ver una pgina con el navegador solamente va a encontrar la pantalla en negro y un aviso de que se estn eliminando archivos del sistema. Para hacer ms efectiva la broma, conviene estar atento y en el momento indicado aportar algo de confusin gritando es un virus! es un virus! Que lo disfruten. Ahora, volvamos al trabajo.

Volver

Home

Manual

2.1 Selectores
Anterior Siguiente

| Introduccin | Selectores de tipos | Selectores de clases | Selectores de ID | Selectores de atributos | Selector universal | Agrupamiento | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Los selectores identifican a un elemento dentro de la pgina Web para luego poder definir sus propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetas usadas en HTML (BODY, P, CODE, TABLE, UL, etc.) hasta complejas combinaciones que permiten un juego muy amplio de selecciones dentro de la pgina. El conocimiento en profundidad de los distintos selectores es uno de los aspectos ms complejos del lenguaje de las Hojas de Estilo y tambin el que nos permite sacar el mximo provecho de las CSS. Existen muchos editores de pginas Web que facilitan la labor de crear y aplicar Hojas de Estilo, pero los selectores que se pueden definir con estos programas son slo los ms elementales. La complejidad que pueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier herramienta y es ah donde los diseadores debern apelar a sus propios recursos. En esta seccin se explican los llamados selectores simples. Volver

Default OK

Ver explicacin

Selectores de tipos
Son los que identifican a un tipo de elemento dentro de los que conforman el cdigo HTML. Es decir, usan la misma palabra que la etiqueta (tag) sin los signos < y >. Por ejemplo, TABLE selecciona todos los elementos <TABLE> de la pgina. La siguiente regla identifica a los elementos <H1> de la pgina y los alnea centralmente:

H1 {text-align: center}

Quienes no conozcan a fondo todos las etiquetas del lenguaje HTML, pueden consultar el Listado de elementos de HTML 4.0, que contiene una pequea definicin sobre cada marca. Tericamente al menos, todos los elementos de ese listado pueden utilizarse como selectores en las CSS. Ver

Los selectores de tipo tienen la ventaja de que, con un simple cambio en la Hoja de Estilo, podemos modificar el aspecto de todos los elementos de ese tipo en todas las pginas de nuesto sitio. Esa es tambin su limitacin: su utilidad se limita al caso en que todos los elementos de un tipo tengan la misma apariencia en cada una de nuestras pginas. Qu sucede si en ciertos casos queremos usar un prrafo con caractersticas diferenciadas? Volver

Selectores de clases
La questin planteada en el punto anterior se resuelve creando una nueva clase de prrafo. El selector de clases consta de un punto (.) seguido por el nombre de la clase que hayamos creado (el nombre lo elegimos nosotros). Supongamos que para publicar un reportaje queremos contar con un prrafo especial que denominaremos "pregunta":

P.pregunta {font-weight: bold; font-style: italic}

Ahora, a los prrafos que corresponden a las preguntas del entrevistador en el supuesto reportaje les agregamos el atributo CLASS dentro de la marca de la pgina HTML:

<P CLASS="pregunta">Esta

es una pregunta del reportero</P>

Todos los prrafos de la clase "pregunta" aparecern con texto en itlicas negritas para diferenciarlos de los prrafos normales. Observen que en el tag de la pgina HTML la sintaxis difiere de la CSS: luego de la palabra CLASS sigue un signo igual (=) y entre comillas ("") el nombre de la clase. Si bien estos selectores requieren un agregado en el cdigo HTML de las pginas, nos permiten una amplia libertad para crear diversas variantes de un mismo elemento. Ms an, podemos crear una clase genrica para aplicar a cualquier elemento de la pgina y no slo a los prrafos. Basta con suprimir en el estamento el primer selector y dejar nicamente el punto (.) y el nombre de la clase:

.contraste {color: #FFFF00; background-color: #000000}

En este caso, la clase "contraste" equivale a cualquier elemento con el atributo CLASS="contraste". Por ejemplo:

<H1 CLASS="contraste">Un ttulo <P CLASS="contraste">Un prrafo <OL CLASS="contraste">Una lista

Probar

con contraste</H1> con contraste</P> con contraste</B>

Es tanta la flexibilidad que nos brindan los selectores de clases que hasta nos permitiran hacer nuestras pginas casi exclusivamente con slo dos elementos de HTML: DIV y SPAN (que no tienen ningn formato predeterminado) y luego crear todas las clases que necesitemos. Esta prctica es desaconsejada por el W3C en una nota que aparece en la Recomendacin CSS2 al final de la seccin 5.8.3 Selectores de clases. Ver

Volver

Selectores de ID
Los selectores de ID funcionan de manera muy similar a los selectores de clases, salvo que, a diferencia de estos ltimos, slo pueden aplicarse a un elemento de la pgina. Quiere decir que si hay un elemento que tiene asignado el atributo ID="principal" no podr haber otro ID con igual valor (es decir, con el mismo nombre). La sintaxis en la CSS tambin es similar, solamente que en vez de usar un punto se utiliza el carcter de numeral (#):

H1#titulo1 {text-align: center} #volanta {font-style: italic}

En el primer caso, aquel elemento H1 con ID="titulo1" de la pgina ser centrado. En el segundo, cualquier elemento que tenga asignado el atributo ID="volanta" ir en itlicas. Los selectores de ID no tienen el grado de flexibilidad de los selectores de clases, por ejemplo, pero son una opcin para aquellos casos en que se necesite identificar de modo exclusivo un determinado elemento de la pgina.

Volver

Selectores de atributos
Los selectores de atributos permiten seleccionar elementos de la pgina segn sus propiedades o el valor asignado a estas propiedades. Supongamos que hemos creado varias clases de prrafos y queremos identificar a todos aquellos que tengan especificado el atributo CLASS (cualquiera sea el valor de ese atributo) para darle un margen izquierdo de 1 cm:

P[CLASS] {margin-left: 1cm}

Ahora, si queremos seleccionar solamente aquellos prrafos que tengan el atributo CLASS="pregunta", debemos usar:

P[CLASS="pregunta"] {margin-left: 1cm}

Podemos usar varios selectores de atributos para hacer an ms especfica la regla. Supongamos que a ciertos prrafos con CLASS="pregunta" tambin le hemos asignado el atributo WIDTH y queremos darle un margen izquierdo de 2 cm.

P[CLASS="pregunta"][WIDTH] {margin-left: 2cm}

Hemos visto dos formas que pueden tomar estos selectores: [atributo] y [atributo=valor]. Adicionalmente, existen dos frmulas para este tipo de selectores que se utilizan cuando a un determinado elemento se le han asignado una lista de valores en vez de un solo valor (ms adelante en esta gua veremos los casos especficos). [atributo~=valor] se usa para seleccionar los elementos que tienen como atributo una lista de palabras separadas por espacios, una de las cuales es exactamente valor. [atributo|=valor] se usa para seleccionar los elementos que tienen como atributo una lista de palabras separadas por guiones, comenzando por valor. Veamos un ejemplo de los dos casos:

IMG[ALT~="logotipo"] {border: solid} P[LANG|="en"] {font-family: "Times New Roman", Serif}

El primero selecciona las imgenes cuyo atributo ALT tiene en su valor la palabra logotipo, como en ALT="logotipo de la compaa" o ALT="ste es nuestro logotipo". El segundo, selecciona los prrafos que tienen asignado como valor del atributo LANG palabras que comienzan con en, como en-US o en-cockney. Quizs todo esto les parezca una complicacin excesiva, pero debe considerarse que el lenguaje de las CSS es abarcativo e intenta satisfacer necesidades que quizs nosotros ignoramos, como puede ser el hecho de tener de mezclar distintos lenguajes en nuestros documentos y poder aplicar a cada uno un estilo particular. Tambin se debe tomar en cuenta que las Hojas de Estilo estn pensada no solamente para HTML sino para otro lenguajes, como XML, para los cuales ciertos selectores pueden resultar de mayor utilidad que en HTML. Volver

Selector universal
El selector universal se escribe con un asterisco (*) y representa a cualquier elemento de la pgina. Por ejemplo, con:

* {color: red}
Todos los elementos de la pgina tendrn como color de primer plano el rojo. Sin mencionarlo, ya hemos usado en los ejemplos anteriores de esta pgina algunos selectores universales, porque cuando ste va acompaado de otro selector se puede omitir. Por eso, los siguientes dos selectores son exactamente iguales:

*#volanta {font-style: italic} #volanta {font-style: italic} /* el asterisco se ha omitido */

Resulta de utilidad cuando queremos inicializar todos los elementos de nuestra pgina con determinadas propiedades generales. Volver

Agrupamiento
Cuando tenemos varios selectores que comparten las mismas declaraciones pueden agruparse en una lista separada por comas (,). No se trata de un tipo de selector especial sino de una frmula abreviada para aplicar las mismas propiedades a distintos selectores en un solo paso. Por ejemplo, si tenemos:

H1 {font-family: Arial, Sans-serif} P {font-family: Arial, Sans-serif} TABLE {font-family: Arial, Sans-serif} #volanta {font-family: Arial, Sans-serif}
Podemos simplificarlo de este modo:

H1, P, TABLE, #volanta {font-family: Arial, Sans-serif}

Volver

Home

Manual

2.2 Selectores contextuales

Anterior Siguiente

| Introduccin | Selectores de descendientes | Selectores de hijos | Selectores de hermanos adyacentes | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Hasta ahora, los selectores que hemos visto se utilizan de una manera directa. Los que veremos en esta pgina son combinaciones de dos o ms selectores ya conocidos que expresan una determinada relacin entre ellos. De este modo, podemos identificar un elemento de acuerdo a su posicin con respecto a otro elemento. Estas son las tres alternativas posibles:
q q

Default OK

Ver explicacin

Selectores de descendientes (A B) Selectores de hijos (A>B) Selectores de hermanos adyacentes (A+B)

*La explicacin de algunos conceptos, como padre, hijo, descendiente o hermano se encuentra en la seccin sobre Cascada y Herencia.

Volver

Selectores de descendientes
Los selectores de descendientes permiten especificar un elemento que est contenido dentro de otro elemento. Veamos el siguiente caso:

H1 {color: red} P {color: black} EM {color: red}

Con estas reglas de estilo, el texto de los ttulos sera rojo, el texto de los prrafos sera negro y el texto con nfasis tambin sera rojo. De este modo podemos destacar palabras dentro de un prrafo cambiando su color. Pero, nos resultara imposible hacer lo mismo dentro de un ttulo porque tanto H1 como EM son de color rojo. Con un selector de descendiente podemos hacer que el elemento EM sea de color azul en los casos en que se encuentre dentro de un elemento H1 (es decir, sea un descendiente de H1). La forma de especificar esta relacin es usando ambos selectores (H1 y EM) separados por un espacio, poniendo en primer lugar el elemento padre:

H1 EM {color: blue}
Con el agregado de este selector a la Hoja de Estilo, cuando destaquemos una palabra de un prrafo ser de color rojo, pero si destacamos una palabra de un ttulo ser de color azul. Probar Podemos combinar tantos selectores como sea necesario. Por ejemplo, para identificar a todos los elementos que tengan asignado el atributo "href" que se encuentren dentro de un prrafo que est contenido por un elemento DIV, debemos escribir:

DIV P *[href] {color: red}

Volver

Selectores de hijos
Los selectores de hijos identifican a un elemento cuando es hijo de otro elemento. El signo ">" se utiliza para combinar los selectores y puede dejarse o no espacio alrededor del mismo:

DIV>P {color: blue} DIV > P {color: blue}

El ejemplo anterior selecciona los prrafos que son hijos de un elemento DIV. Todas las consideraciones hechas para los selectores de descendientes se aplican en este caso (si hay dudas con respecto a la diferencia entre hijo y descendiente, consulte la seccin sobre Cascada y Herencia). Existe asimismo la posibilidad de seleccionar el primer hijo de un elemento usando la pseudo-clase :first-child.

Volver

Selectores de hermanos adyacentes

Los selectores de hermanos adyacentes tienen una sintaxis similar a los dos anteriores, usando como combinador el signo ms (+).

H1 + P {text-indent: 0} H1 + H2 {margin-top: -0.5em}

En el primer caso, se selecciona los prrafos (P) que sigan inmediatamente a un ttulo (H1) y se les quita la sangra. En el segundo, cuando a un ttulo nivel 1 (H1) le sigue uno de nivel 2 (H2), a este ltimo se le adjudica un margen superior negativo para evitar que se separen demasiado entre s. Por hermanos adyacentes se entiende aquellos elementos que comparten un mismo padre y que se encuentran uno a continuacin del otro en la estructura del documento. El elemento que se selecciona es el que se especifica en segundo lugar. Probar

Volver

Home

Manual

2.3 Pseudo-clases
Anterior Siguiente

| Introduccin | :first-child | :link :visited | :hover :active :focus | :lang | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Todos los selectores vistos hasta el momento se refieren a elementos que podemos encontrar dentro del cdigo HTML. Las pseudo-clases (y los pseudo-elementos), por el contrario, no pueden deducirse simplemente observando la estructura del documento. Puede decirse que son abstracciones que permiten referirse a elementos que de otro modo resultaran inaccesibles. Las pseudo-clases son:

Default OK
q q q

Ver explicacin

:first-child :link y :visited :hover, :active y :focus :lang

Volver

:first-child
La pseudo-clase :first-child selecciona un elemento que es el primer hijo de otro elemento. Por ejemplo, si queremos que un prrafo no tenga sangra cuando sea el primer hijo de un DIV:

DIV > P:first-child {text-indent: 0}

Noten que entre P y :first-child no debe haber espacio, pero entre DIV y > y P pueden o no quedar espacios intermedios. Probar

Si queremos seleccionar un elemento cuando sea el primer hijo de cualquier elemento, podemos usar el selector universal:

* > H1:first-child {color: blue} /* usando el asterisco */ H1:first-child {color: blue} /* o bien podemos obviar el asterisco */
Volver

:link y :visited
Por medio de estas dos pseudo-clases, podemos definir el estilo para los links que aparecen en nuestras pginas y otro estilo para esos links cuando ya han sido visitados. En HTML, dentro de la marca BODY tambin se puede especificar un color para los links y otro para los links visitados, pero con CSS se pueden cambiar muchos otros atributos. Probar Despus de cierto tiempo (posiblemente cuando se borre el archivo del historial del sistema) el link visitado puede volver a su condicin normal. Volver

:hover, :active y :focus

Estas son pseudo-clases dinmicas, ya que cambian en respuesta a las acciones del usuario.
q q

:hover se aplica cuando el cursor del mouse seala el elemento. :active se aplica cuando el elemento es activado (por ejemplo, cuando el usuario presiona el botn del mouse). :focus se aplica cuando el elemento recibe el foco.

Uno de los mayores desvelos de los diseadores de pginas Web han sido siempre los links y la manera de hacer que estos cambien de aspecto al ser sealados por el mouse. Con frecuencia, la solucin consista en utilizar dos imgenes que se cambiaban mediante JavaScript u otro lenguaje. Afortunadamente, con CSS podemos simplificar todo el proceso y

obtener efectos muy variados en nuestros enlaces. Normalmente, se utilizan las cuatro pseudo-clases siguientes para controlar el comportamiento de los links.

A:link {color: red} A:visited {color: gray} A:hover {color: blue} A:active {color: fuchsia}
Aqu especificamos un color rojo para los links, un color gris para los ya visitados, un color azul cuando es sealado y un fucsia cuando es activado. Se debe tener en cuenta que, por las reglas de cascada, el orden en que deben ser especificadas estas cuatro pseudo-clases para que funcionen correctamente es el que se ha usado en el ejemplo. Probar

Volver

:lang
En HTML es posible especificar el idioma que se usa en un elemento mediante el atributo lang. Por ejemplo, para identificar que un prrafo est en francs se usa:

<P lang:"fr">
El cdigo para identificar el idioma consta generalmente de dos letras: "es" espaol, "en" ingls, "de" alemn, "fr" francs, etc. Mediante la pseudo-clase :lang podemos seleccionar elementos en base a su idioma. Como cada idioma tiene sus propias convenciones con respecto al formato (uso de itlicas, sangras o comillas, por ejemplo), esta pseudo-clase nos permite describir cmo debe aparecer un elemento segn el idioma usado. La siguiente regla especifica el tipo de comillas que debe usar un elemento Q en francs:

Q:lang(fr) { quotes: ' ' ' ' }

Volver

Home

Manual

2.4 Pseudoelementos
Anterior Siguiente

| Introduccin | :first-line | :first-letter | :before y :after | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
En la impresin sobre papel, a menudo se estila que la primer letra o la primer lnea de un prrafo (o ambas cosas a la vez) tenga un formato diferenciado. Los pseudo-elementos :firstletter y :first-line permiten conseguir el mismo efecto al seleccionar la primer letra o lnea de un elemento. Por otro lado, :before y :after permiten insertar un contenido antes o despus de un elemento. Son llamados pseudo-elementos porque en realidad no existen en el documento fuente (ninguna marca identifica la primer letra de un prrafo, por ejemplo) pero son muy tiles para seleccionar elementos importantes dentro de la composicin. Volver

Default OK

Ver explicacin

:first-line
Este pseudo-elemento permite aplicar un estilo determinado a la primera lnea de un prrafo.

P:first-line { text-transform: uppercase }

Con la regla anterior conseguiramos que todas las letras de la primera lnea de los prrafos fueran convertidas en maysculas. Por supuesto, la medida de esta primer lnea ser determinada por el tamao de la fuente, el ancho de la ventana, etc. Probar Slo las siguientes propiedades se aplican al pseudo-elemento :first-line: propiedades de la

fuente, propiedades del color, propiedades del fondo, 'word-spacing', 'letter-spacing', 'textdecoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' y 'clear'. Volver

:first-letter
:first-letter nos permite seleccionar la primer letra de un prrafo, generalmente para utilizarla como capitular (en un tamao mayor que el resto del prrafo).

P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; font-weight: bold }

Las reglas anteriores determinan que los prrafos tengan una capitular en negritas del doble de tamao que la fuente del prrafo. Probar

Volver

:before y :after
Con los pseudo-elementos :before (antes) y :after (despus) se puede insertar un contenido antes o despus de un elemento determinado y definir el estilo del contenido insertado. La propiedad 'content', junto con estos pseudo-elementos, especifican lo que se inserta. Podemos lograr que antes de cada elemento <H3> aparezca el texto "Tema:" sin necesidad de tener que escribirlo en cada ttulo. Tambin podemos hacer que cada prrafo termine con un pequeo cono o poner "Fin" al pie de cada pgina usando las siguientes reglas.

H3:before {content: "Tema: "} P:after {content: url("icono.gif")} BODY:after {content: "Fin"; display: block;}

En la ltima regla hemos especificado tambin "display: block" para que la palabra "Fin" comience en una nueva lnea (como si fuese un nuevo prrafo). Probar

Volver

Home

Manual

3.1 Cajas: mrgenes, rellenos y bordes

Anterior Siguiente

| Introduccin | Propiedades del margen | Propiedades del relleno | Propiedades del borde | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Cuando una aplicacin del usuario (entindase navegador o browser) procesa el contenido de un documento, lo hace siguiendo un modelo determinado. En el modelo de formato visual de las CSS, cada elemento de la pgina genera una o ms cajas rectangulares de acuerdo tambin a un modelo de caja. El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos. El elemento raz del documento (<HTML> o, mejor an, <BODY> en HTML) genera una caja que acta como bloque de contencin de las cajas generadas subsecuentemente. A su vez, cada caja puede actuar como bloque de contencin de otras cajas generadas por sus elementos descendientes. Todo esto es muy tcnico, pero para qu sirve? Fundamentalmente para tener el control no solo de las propiedades del elemento en s (su color, la fuente usada para el texto, etc.), sino tambin de las propiedades de esa caja generada por el elemento (sus mrgenes, sus bordes, la posicin dentro del documento) que ser lo que nos permita componer visualmente la pgina de un modo mucho ms rico y flexible que con HTML. Este modelo de caja es el que permite, por ejemplo, que cualquier elementos de la pgina pueda recibir todas de las propiedades definidas en CSS. Por eso, a diferencia de lo que sucede con HTML, todos los elementos pueden tener una imagen de fondo o un borde (sin necesidad de usar una tabla para eso); tambin es posible darle una ubicacin precisa a cualquier elemento dentro de la pgina, ya sea con respecto a la pantalla o a otros elementos. Mejor an, nos da la posibilidad de usar un lenguaje como JavaScript para conseguir efectos muy interesantes modificando las propiedades de las cajas (moverlas de su posicin, mostrarlas o esconderlas, cambiar su tamao, etc.). Bien, luego de tantos rodeos espero haberlos convencido de que no abandonen esta pgina y continen con el tema, que bien se lo merece.

Default OK

Ver explicacin

Cada caja tiene un rea de contenido (por ejemplo, texto, una imagen, etc.) y las reas circundantes opcionales de padding (relleno), border (borde) y margin (margen). En esta seccin veremos cmo se especifican las propiedades para cada una de estas reas:

Las reas de padding, border y margin se dividen en cuatro segmentos: top (superior), bottom (inferior), left (izquierdo) y right (derecho). De este modo podemos distinguir border-left, border-right, border-top y border-bottom (lo mismo para padding y margin). El estilo del fondo de las distintas reas de una caja es determinado del siguiente modo: Area del contenido: La propiedad 'background' del elemento Area del relleno (padding): La propiedad 'background' del elemento Area del borde (border): Las propiedades del borde del elemento Area del margen (margin): Los mrgenes son siempre transparentes Volver

Propiedades del margen

'margin-top', 'margin-right', 'margin-bottom', 'margin-left' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <ancho-del-margen> | inherit 0 todos los elementos no se refieren al ancho del bloque de contencin

Estas propiedades determinan los mrgenes superior, derecho, inferior e izquierdo de una caja. <ancho-del-margen> puede tomar uno de los siguientes valores: medida Especifica un ancho fijo porcentaje El porcentaje es calculado con respecto al ancho del bloque de contencin auto El valor es determinado por el navegador Se pueden usar valores negativos (por ejemplo, margin-top: -8px).

'margin' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <ancho-del-margen>{1,4} | inherit no definido para las propiedades resumidas todos los elementos no se refieren al ancho del bloque de contencin

La propiedad 'margin' es una propiedad resumida que se utiliza para definir los cuatro mrgenes a la vez. Los signos {1,4} significan que pueden especificarse de 1 a 4 valores para <ancho-del-margen>: Si hay slo un valor se aplica a todos los lados Si hay dos valores los mrgenes superior e inferior son determinados por el primer valor y los mrgenes derecho e izquierdo son determinados por el segundo Si hay tres valores el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior es definido por el tercero Si hay cuatro valores se aplican al margen superior, derecho, inferior e izquierdo, respectivamente. Ver ejemplos

Volver

Propiedades del relleno

'padding-top', 'padding-right', 'padding-bottom', 'padding-left' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <ancho-del-relleno> | inherit 0 todos los elementos no se refieren al ancho del bloque de contencin

Estas propiedades determinan el relleno superior, derecho, inferior e izquierdo de una caja. <ancho-del-relleno> puede tomar uno de los siguientes valores:

medida Especifica un ancho fijo porcentaje El porcentaje es calculado con respecto al ancho del bloque de contencin (an para 'padding-top' y 'padding-bottom') A diferencia de las propiedades del margen, los valores para el relleno no pueden ser negativos.

'padding' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <ancho-del-relleno>{1,4} | inherit no definido para las propiedades resumidas todos los elementos no se refieren al ancho del bloque de contencin

La propiedad 'padding' es una propiedad resumida que se utiliza para definir los cuatro rellenos a la vez. Los signos {1,4} significan que pueden especificarse de 1 a 4 valores para <ancho-del-relleno>: Si hay slo un valor se aplica a todos los lados Si hay dos valores los rellenos superior e inferior son determinados por el primer valor y los rellenos derecho e izquierdo son determinados por el segundo Si hay tres valores el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior es definido por el tercero Si hay cuatro valores se aplican al relleno superior, derecho, inferior e izquierdo, respectivamente. El color de la superficie o la imagen del rea de relleno es especificado a travs de la propiedad 'background' del elemento.

Ver ejemplos

Volver

Propiedades del borde

Las propiedades del borde especifican el ancho, color y estilo del borde de una caja. Estas propiedades se aplican a todos los elementos.

Ancho del borde:

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <ancho-del-borde> | inherit medium todos los elementos no no admitidos

Estas propiedades determinan el ancho de los bordes superior, derecho, inferior e izquierdo de una caja. <ancho-del-borde> puede tomar uno de los siguientes valores: thin Un borde fino medium Un borde medio thick Un borde grueso medida El grosor del borde tiene un valor explcito. Las dimensiones del borde explcitas no pueden ser negativas. Los interpretacin de los tres primeros valores puede variar de un navegador a otro, pero

no la relacin entre ellos.

'border-width' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <ancho-del-borde>{1,4} | inherit ver las propiedades individuales todos los elementos no no admitidos

La propiedad 'border-width' es una propiedad resumida que se utiliza para definir el ancho de los cuatro bordes a la vez. Los signos {1,4} significan que pueden especificarse de 1 a 4 valores para <ancho-del-borde>: Si hay slo un valor se aplica a todos los lados Si hay dos valores los bordes superior e inferior son determinados por el primer valor y los bordes derecho e izquierdo son determinados por el segundo Si hay tres valores el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior es definido por el tercero Si hay cuatro valores se aplican al borde superior, derecho, inferior e izquierdo, respectivamente. Ver ejemplos

Color del borde:

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' Valores: Valor inicial: <color> | inherit el valor de la propiedad 'color'

Se aplica a: Se hereda?: Porcentajes:

todos los elementos no no admitidos

Estas propiedades determinan el color de los bordes superior, derecho, inferior e izquierdo de una caja. Los valores tienen los siguientes significados: <color> specifica un valor de color transparent El borde es transparente (no obstante, puede tener grosor) Si el color del borde de un elemento no es especificado, el navegador toma el valor de la propiedad 'color' del elemento para el color del borde.

'border-color' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <color>{1,4} | transparent | inherit ver las propiedades individuales todos los elementos no no admitidos

La propiedad 'border-color' es una propiedad resumida que se utiliza para definir el color de los cuatro bordes a la vez. Esta propiedad puede tener de uno a cuatro valores que son aplicados a los distintos lados como en 'border-width'. Ver ejemplos

Estilo del borde:

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <estilo-del-borde> | inherit none todos los elementos no no admitidos

Estas propiedades determinan el estilo de los bordes superior, derecho, inferior e izquierdo de una caja. <estilo-del-borde> puede tomar uno de los siguientes valores: none Ningn borde hidden Igual a 'none' dotted El borde es una serie de puntos dashed El borde es una serie de pequeos segmentos de lnea solid El borde es un nico segmento de lnea double El borde son dos lneas slidas groove El borde luce como si estuviese tallado en la pgina ridge Lo opuesto a 'grove': el borde parece que estuviera sobresaliendo de la pgina inset El borde hace que toda la caja luzca como si estuviera empotrada en la pgina outset Lo opuesto a 'inset': el borde hace que toda la caja parezca sobresalir de la pgina Como el valor inicial del estilo de borde es 'none', ningn borde ser visible a menos que

se establezca otro estilo de borde.

'border-style' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <estilo-del-borde>{1,4} | inherit ver las propiedades individuales todos los elementos no no admitidos

La propiedad 'border-style' es una propiedad resumida que se utiliza para definir el estilo de los cuatro bordes a la vez. Esta propiedad puede tener de uno a cuatro valores que son aplicados a los distintos lados como en 'border-width'. Ver ejemplos

Propiedades resumidas del borde:

'border-top', 'border-right', 'border-bottom', 'border-left' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: [ <border-width> || <border-style> || <color> ] | inherit ver las propiedades individuales todos los elementos no no admitidos

Estas son propiedades resumidas para definir el ancho, estilo y color del borde superior, derecho, inferior e izquierdo de una caja. Por ejemplo:

P { border-bottom: thick solid red }

La regla anterior define un borde inferior para los prrafos (un lnea gruesa entera de color rojo). Los valores que no se especifican son colocados en sus valores iniciales.

'border' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: [ <border-width> || <border-style> || <color> ] | inherit ver las propiedades individuales todos los elementos no no admitidos

La propiedad 'border' es una propiedad resumida para colocar el mismo ancho, color y estilo a los cuatro bordes de una caja. A diferencia de las propiedades resumidas 'margin' y 'padding', la propiedad 'border' no puede definir diferentes valores para los cuatro bordes. Para eso, deben usarse una a ms de las otras propiedades del borde. Volver

Home

Manual

3.2 Colores y fondos

Anterior Siguiente

| Introduccin | Color del primer plano | Propiedades del fondo | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Las propiedades de CSS permiten a los autores especificar el color de primer plano de un elemento y tambin el color y el aspecto del fondo de un elemento. Con las Hojas de Estilo, a diferencia del cdigo HTML, cualquier elemento puede tener su propio color o imagen de fondo. Si la imagen no cubre todo el fondo se puede especificar su ubicacin y el modo en que debe repetirse; tambin si el fondo debe quedar fijo o desplazarse junto con el documento. Volver

Default OK

Ver explicacin

Color del primer plano

'color' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <color> | inherit depende de la aplicacin del usuario (navegador) todos los elementos si no admitidos

Esta propiedad describe el color del primer plano del contenido de texto de un elemento. Para especificar un color puede usarse cualquiera de los valores permitidos para color. Volver

Propiedades del fondo

Background-color:
'background-color' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <color> | transparent | inherit transparent todos los elementos no no admitidos

Esta propiedad determina del color de fondo de un elemento, ya sea un valor de color o la palabra clave 'transparent', para hacer que los colores subyacentes se vean a travs. Las propiedades del fondo no se heredan, pero el fondo de la caja padre por defecto se ver a travs debido al valor inicial 'transparent' para 'background-color'. Ver ejemplo

DIV { background-color: #FF0000 }

Background-image:
'background-image' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <uri> | none | inherit none todos los elementos no no admitidos

Esta propiedad determina la imagen de fondo de un elemento. Cuando se pone una imagen de fondo, se debe especificar tambin un color de fondo que ser usado cuando la imagen no est disponible. La imagen es procesada encima del color de fondo, de modo que el color es visible a travs de las zonas transparentes de la imagen. Ver ejemplos

BODY { background-image: url("imagen.gif") }

Background-repeat:
'background-repeat' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: repeat | repeat-x | repeat-y | no-repeat | inherit repeat todos los elementos no no admitidos

Si se especifica una imagen de fondo, esta propiedad especifica si la imagen es repetida y de qu modo. Los valores tienen los siguientes significados: repeat La imagen es repetida tanto horizontal como verticalmente (mosaico) repeat-x La imagen es repetida slo horizontalmente repeat-y La imagen es repetida slo verticalmente no-repeat Slo aparece una copia de la imagen, sin repetir Ver ejemplos

BODY { background-image: url("imagen.gif"); background-repeat: repeat-y;

Background-attachment:
'background-attachment' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: scroll | fixed | inherit scroll todos los elementos no no admitidos

Si se especifica una imagen de fondo, esta propiedad especifica si permanece fija con respecto a la pantalla (fixed) o se desplaza junto con el documento (scroll). Ver ejemplos

BODY { background-image: url("imagen.gif"); background-attachment: fixed; }

Background-position:
'background-position' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: [ [<porcentaje> | <medida> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit 0% 0% los elementos reemplazados y a nivel de bloque no referidos al tamao de la propia caja

Si se ha especificado una imagen de fondo, esta propiedad define su posicin inicial. <porcentaje> <porcentaje> Con un par de valores de '0% 0%' (por ejemplo), la esquina superior izquierda de la imagen es alineada con la esquina superior izquierda de la caja. Un par de valores de '100% 100%' coloca la esquina inferior derecha de la imagen en la esquina inferior derecha de la caja <medida> <medida> De igual modo que con los porcentajes, si se usan un par de valores de '2cm 2cm' (por ejemplo), la esquina superior izquierda de la imagen es ubicada 2cm a la derecha y 2cm abajo de la esquina superior izquierda de la caja top left y left top Igual '0% 0%' top, top center y center top Igual a '50% 0%' right top y top right Igual a '100% 0%' left, left center y center left Igual a '0% 50%' center y center center Igual a '50% 50%' right, right center y center right Igual a '100% 50%' bottom left y left bottom Igual a '0% 100%' bottom, bottom center y center bottom Igual a '50% 100%' bottom right y right bottom Igual a '100% 100%' Si solamente se da un valor de porcentaje o de medida, ste determina la posicin horizontal, la posicin vertical ser 50%. Si se dan dos valores, el primero es para la posicin horizontal y el segundo para la posicin vertical. La combinacin de valores de medida y de porcentajes est permitida (ej., '50% 2cm'), y las posiciones negativas tambin estn permitidas. Las palabras clave (top, left, center, etc.) no pueden ser combinadas con valores de porcentaje o de medida (todas las combinaciones posibles estn dadas arriba). Ver ejemplos

BODY { background-image:

url("imagen.gif");

background-position: center top; }

Background:
'background' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit no definido para las propiedades resumidas todos los elementos no permitidos en 'background-position'

Esta es una propiedad resumida para fijar la propiedades individuales del fondo en un solo paso. Si se especifican solamente algunas de las propiedades individuales, para las ausentes se usa su valor inicial. Ver ejemplo

BODY { background: red; } DIV { background: url("img.gif") #FFFFFF 50% repeat fixed; }
Volver

Home

Manual

4.1 El formato visual

Anterior Siguiente

| Introduccin | "display" | "position" | "top", "right", "bottom", "left" | Capas: "z-index" | "float" | "clear" | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Si hay algo que extraamos los diseadores grficos en el cdigo HTML son las herramientas que programas como Quark Express y PageMaker ofrecen para la composicin de una pgina. El modelo de formato visual de CSS (es decir, el modelo que siguen los navegadores para procesar el contenido de un documento para los medios visuales) permite que esas herramientas estn disponibles tambin para el diseo de las pginas Web. Este modelo de formato visual rige el comportamiento de las cajas generadas por los elementos de la pgina. Hemos visto hasta ahora algunas propiedades (bordes, mrgenes, rellenos) que pueden aplicarse a las cajas y tambin las propiedades que definen su color/imagen de fondo. Ahora vamos a ver cmo se puede definir el tipo y dimensiones de esas cajas, su comportamiento y relacin con las otras cajas en la estructura del documento. Para comenzar debemos saber que en HTML existen tres tipos de elementos: Elementos de bloque Son aquellos tratados visualmente como bloques separados de los elementos que lo rodean (por ejemplo: <P> o <DIV>). Para hacerlo ms sencillo, podemos decir que son aquellos que comienzan una nueva lnea dentro del documento. Los elementos a nivel de bloque generan una caja de bloque principal que slo contiene otras cajas de bloque. Elementos de lnea Son aquellos que no forman nuevos bloques de contenido; el contenido es distribuido a nivel de las lneas (por ejemplo: <B> o <EM>). Elementos de lista Son elementos de bloque que generan una caja principal y otras cajas

Default OK

Ver explicacin

adicionales (generalmente contienen una vieta o caracteres alfanumricos) que se agregan al costado del elemento. Volver

La propiedad "display"
'display' inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline todos los elementos no no admitidos

Valores:

Valor inicial: Se aplica a: Se hereda?: Porcentajes:

A continuacin se explica el significado de algunos de estos valores, pero al nico al que vamos a dedicarle nuestra atencin, por ahora, es a "none". block Este valor provoca que un elemento genere una caja de bloque principal inline Este valor provoca que un elemento genere una o ms cajas de lnea list-item Este valor provoca que un elemento genere una caja de bloque principal y una caja de lnea list-item (por detalles ver la seccin sobre listas) marker Este valor declara que el contenido generado antes o despus de una caja ser un marcador (por detalles ver la seccin sobre marcadores) none Este valor provoca que un elemento no genere ninguna caja (es decir, el elemento no tiene ningn efecto sobre la composicin) y los elementos descendientes tampoco generan cajas. Hay que destacar que este valor no crea una caja invisible sino que hace que el

elemento desaparezca por completo. Esa es la diferencia con las propiedades sobre visibilidad que provocan que un elemento pueda ser invisible pero siga ocupando un espacio en la pgina Ver run-in y compact Estos valores crean cajas de bloque o de lnea segn el contexto y tienen un comportamiento como el que conocemos para las listas de definiciones table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell y tablecaption Estos valores provocan que un elemento se comporte como un elemento tabla (por detalles ver la seccin sobre tablas) En este punto es necesario hacer algunas aclaraciones. Tericamente, estos valores nos permiten alterar el comportamiento visual de los elementos de la pgina, por ejemplo, haciendo que un elemento a nivel de lnea en HTML (supongamos <CODE>) se transforme en un elemento de bloque, de modo que cualquier texto marcado con <CODE></CODE> comenzara en una nueva lnea. De igual modo, podramos hacer que cualquier elemento se comporte como una tabla o como parte de una tabla. Con HTML no tiene mucho sentido ya que existen elementos como las tablas, columnas y celdas, pero otros lenguajes (XML, por ejemplo) no tienen dichos elementos. Volver

La propiedad "position"
'position' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: static | relative | absolute | fixed | inherit static todos los elementos, no al contenido generado no no admitidos

Con CSS los autores pueden ubicar los elementos de la pgina usando uno de estos valores:

static Esta es la posicin predeterminada y la que conocemos en HTML. La caja se sita dentro del flujo normal de la pgina y las propiedades 'top', 'right', 'bottom' y 'left' no se aplican. relative La posicin de la caja se ajusta en relacin a su posicin normal dentro de la pgina. Cuando una caja X se posiciona relativamente la caja siguiente se sita como si X no se hubiera desplazado. Ver absolute Las cajas son quitadas del flujo normal de la pgina y su posicin se especifica con las propiedades 'left', 'right', 'top', y 'bottom'. Estas propiedades especifican los desplazamientos con respecto al bloque de contencin de la caja por lo que los elementos posicionados absolutamente no tienen ninguna influencia sobre la posicin de las cajas siguientes. El bloque de contencin para una caja posicionada es establecido por el antepasado posicionado ms cercano o, si no existe, por el bloque de contencin inicial (la esquina superior izquierda de la pgina, en el modelo visual). Ver fixed El posicionamiento fijo es una subcategora del posicionamiento absoluto. La nica diferencia es que para una caja posicionada de modo fijo, el bloque de contencin es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento. Esto significa que cuando se hace un scroll en la pgina los elementos con position: fixed mantienen su posicin en la pantalla. Ver

DIV#def {position: absolute}

Volver

Desplazamientos: 'top', 'right', 'bottom', 'left'

top

'top' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <medida> | <porcentaje> | auto | inherit auto los elementos posicionados no referidos a la altura del bloque de contencin

Esta propiedad especifica la distancia que se desplaza el elemento por debajo del borde superior del bloque de contencin de la caja.

right
'right' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <medida> | <porcentaje> | auto | inherit auto los elementos posicionados no referidos al ancho del bloque de contencin

Esta propiedad especifica la distancia que se desplaza el elemento hacia la izquierda del borde derecho del bloque de contencin de la caja.

bottom
'bottom' Valores: Valor inicial: Se aplica a: <medida> | <porcentaje> | auto | inherit auto los elementos posicionados

Se hereda?: Porcentajes:

no referidos a la altura del bloque de contencin

Esta propiedad especifica la distancia que se desplaza el elemento por sobre de borde inferior del bloque de contencin de la caja.

left
'right' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <medida> | <porcentaje> | auto | inherit auto los elementos posicionados no referidos al ancho del bloque de contencin

Esta propiedad especifica la distancia que se desplaza el elemento hacia la derecha del borde izquierdo del bloque de contencin de la caja. Los valores para las cuatro propiedades tienen los siguientes significados: <medida> El desplazamiento es una distancia fija desde el borde de referencia. <porcentaje> El desplazamiento es un porcentaje del ancho (para 'left' o 'right') o de la altura (para 'top' y 'bottom') del bloque de contencin. Para 'top' y 'bottom', si la altura del bloque de contencin no est especificada explcitamente (es decir, depende de la altura del contenido), el valor del porcentaje es interpretado como 'auto'. auto El efecto de este valor vara de acuerdo a otras propiedades relacionadas. Para las cajas con position:absolute, el desplazamiento es con respecto al bloque de contencin de la caja. Para las cajas con position:relative, el desplazamiento es

con respecto al borde externo de la propia caja (es decir, la caja de desplaza de su posicin normal dentro de la pgina de acuerdo a estas propiedades). Ver

DIV#def {position: absolute; left: 30px; top: 25% }

Volver

Uso de capas: la propiedad "z-index"

'z-index' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: auto | <entero> | inherit auto los elementos posicionados no no admitidos

Como hemos visto, los elementos pueden ubicarse en posiciones precisas dentro de la pgina. Esta posibilidad puede provocar que, en algunos casos, ciertos elementos se superpongan visualmente con otros; en esas situaciones, cul queda por encima y cul por debajo? Por lo general, el navegador usa el mismo orden que los elementos tienen en la pgina para definir el orden en que son apilados. Este orden dentro de la pila de elementos puede adjudicarse explcitamente con la propiedad z-index utilizando un valor entero (cuanto ms alto el entero, ms cercano al lector o ms arriba en la pila). Se dice que un elemento establece un contexto de pila al cual pertenecen todos sus descendientes. En cada uno de esos contextos se establece un nuevo nivel de pila para los elementos descendientes. Y aqu lo importante: el contexto de pila (no la propiedad zindex!) es heredado y los elementos pertenecientes a distintos contextos no pueden

"mezclarse". Veamos el significado de lo anterior con un ejemplo: si en una pgina encontramos dos elementos (A y B), uno con z-index=5 (A) y el otro con z-index=3 (B), A ser procesado al frente de B. Supongamos ahora que A tiene un descendiente (C) con zindex=0: el elemento C, por pertenecer al contexto de pila del elemento ubicado ms arriba, tambin ser procesado por encima de B (aunque B tenga z-index=3). Todos los elementos descendientes de A se ubicarn por encima de B (y tambin por encima de todos los descendientes de B). Estas reglas pueden resultar confusas pero son bastante intuitivas, ya que resulta lgica que existiendo dos elementos con distinto orden, todos los descendientes del elemento ubicado ms al frente se ubiquen por sobre todos los descendientes del elemento ubicado ms atrs. Por supuesto, la misma regla se aplica recursivamente a los descendientes de un mismo elemento (si dentro de C encontramos dos elementos (D y E), uno con..., y as infinitamente). Hay que hacer notar que esta propiedad se aplica solamente a los elementos posicionados (ver la propiedad 'position' ms arriba) y que pueden usarse valores negativos. Los valores tienen los siguientes significados: <entero> Este entero es el nivel de pila de la caja. La caja tambin establece un contexto de pila local en el cual su nivel de pila es '0'. auto El nivel de pila de la caja generada es el mismo que el de la caja de su padre. La caja no establece un nuevo contexto de pila local. Ver

Volver

Flotantes: la propiedad 'float'

'float' Valores: Valor inicial: left | right | none | inherit none

Se aplica a: Se hereda?: Porcentajes:

todos menos los elementos posicionados y los contenidos generados no no admitidos

Un flotante es una caja que es desplazada a la izquierda o a la derecha en la lnea actual. Esta propiedad especifica si una caja debe flotar a la izquierda, derecha o no debe flotar en absoluto. Los valores de esta propiedad tienen los siguientes significados: left El elemento genera una caja de bloque que flota a la izquierda. El contenido fluye sobre el costado derecho de la caja, comenzando en la parte superior. right Igual que 'left', pero el contenido fluye sobre el costado izquierdo de la caja, comenzando en la parte superior. none La caja no es flotante. Ver

Volver

Control del flujo al costado del flotante: la propiedad 'clear'

'clear' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: none | left | right | both | inherit none los elementos a nivel de bloque no no admitidos

Esta propiedad indica cul de los lados de la(s) caja(s) de un elemento no puede quedar adyacente a una caja flotante anterior. Esta propiedad slo puede especificarse para

elementos a nivel de bloque (incluyendo tambin a los elementos flotantes). Los valores tienen los siguientes significados: left El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuente. right El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuente. both La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuente. none No existe ninguna restriccin a la posicin de la caja con respecto a los flotantes. Ver

Volver

Home

Manual

4.2 Medidas
Anterior Siguiente

| Introduccin | "width" | "min-width" y "max-width" | "height" | "minheight" y "max-height" | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Continuando con los temas referidos al formato visual, en esta seccin veremos las propiedades que permiten especificar una medida determinada para los elementos de la pgina (ancho y alto) y tambin sus medidas mnimas y mximas. Volver

Default OK

Ancho del contenido: 'width'

'width' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <medida> | <porcentaje> | auto | inherit auto todos los elementos, excepto los elementos de lnea no reemplazados, las filas de las tablas y los grupos de filas no se refieren al ancho del bloque de contencin

Ver explicacin

Esta propiedad especifica el ancho del contenido de las cajas generadas por elementos a nivel de bloque y elementos reemplazados (por ejemplo, IMG). <medida> Especifica un ancho fijo. <porcentaje>

Especifica el ancho segn un porcentaje. El porcentaje es calculado con respecto al ancho del bloque de contencin de la caja. auto El ancho depende de los valores de otras propiedadess. Las reglas para determinar este valor pueden consultarse en la seccin [ Computando anchos y mrgenes ] de la Especificacin CSS2.

Volver

Anchos mnimo y mximo: 'min-width' y 'max-width'

'min-width'
'min-width' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <medida> | <porcentaje> | inherit depende del navegador todos los elementos, excepto los elementos de lnea no reemplazados y las tablas no se refieren al ancho del bloque de contencin

'max-width'
'max-width' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <medida> | <porcentaje> | none | inherit none todos los elementos, excepto los elementos de lnea no reemplazados y las tablas no se refieren al ancho del bloque de contencin

Estas dos propiedades permiten restringir el ancho de las cajas a cierto rango. <medida> Especifica un ancho mmimo o mximo fijo. <porcentaje> Especifica un porcentaje para determinar el valor. El porcentaje es calculado con respecto al ancho del bloque de contencin de la caja. none No existe ninguna limitacin en el ancho de la caja (slo en 'maxwidth'). Volver

Altura del contenido: 'height'

'height' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <medida> | <porcentaje> | auto | inherit auto todos los elementos, excepto los elementos de lnea no reemplazados, las columnas de la tabla y los grupos de columnas no ver el texto

Esta propiedad especifica la altura del contenido de las cajas generadas por elementos a nivel de bloque y elementos reemplazados (por ejemplo, IMG). <medida> Especifica una altura fija. <porcentaje> Especifica la altura segn un porcentaje. El porcentaje es calculado con respecto a la altura del bloque de contencin de la caja. Si la altura del bloque de contencin no se especifica explcitamente (es decir, depende de la altura del contenido) el valor es interpretado como 'auto'. auto

La altura depende de los valores de otras propiedadess. Las reglas para determinar este valor pueden consultarse en la seccin [Computando alturas y mrgenes ] de la Especificacin CSS2.

Volver

Alturas mnima y mxima: 'min-height' y 'max-height'

'min-height'
'min-height' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <medida> | <porcentaje> | inherit 0 todos los elementos, excepto los elementos de lnea no reemplazados y las tablas no se refieren a la altura del bloque de contencin

'max-height'
'max-height' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <medida> | <porcentaje> | none | inherit none todos los elementos, excepto los elementos de lnea no reemplazados y las tablas no se refieren al ancho del bloque de contencin

Estas dos propiedades permiten restringir la altura de las cajas a cierto rango.

<medida> Especifica una altura mmima o mxima fija. <porcentaje> Especifica un porcentaje para determinar el valor. El porcentaje es calculado con respecto a la altura del bloque de contencin de la caja. Si la altura del bloque de contencin no se especifica explcitamente (es decir, depende de la altura del contenido) el valor es interpretado como 'auto'. none No existe ninguna limitacin en el ancho de la caja (slo en 'maxheight'). Volver

Home

Manual

5.1 Efectos visuales

Anterior Siguiente

| Introduccin | "overflow" | "clip" | "visibility" | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Existen propiedades que permiten aplicar algunos efectos visuales en la pgina: recortar una parte de la caja de un elemento, especificar el comportamiento para los casos en que el contenido de un elemento es mayor que su tamao y provocar que un elemento sea invisible. Volver

Default OK

Desbordamiento: la propiedad 'overflow'

Generalmente el contenido de una caja de bloque se mantiene dentro de los lmites de la caja, pero puede suceder que el contenido desborde esos lmites y quede parcial o totalmente fuera de la caja. Esto puede suceder si especificamos un tamao determinado para un elemento (con las propiedades 'width' y 'height', por ejemplo) y su contenido resulta demasiado grande para las medidas adjudicadas. Tambin puede darse al utilizar mrgenes negativos o posiciones absolutas para el elemento. Cuando se produce un desbordamiento, la propiedad 'overflow' especifica si la caja es recortada y (en caso afirmativo) cmo ser recortada. La propiedad 'clip' especifica el tamao y la forma de la zona de recorte.

Ver explicacin

'overflow' Valores: visible | hidden | scroll | auto | inherit

Valor inicial: Se aplica a: Se hereda?: Porcentajes:

visible los elementos a nivel de bloque y reemplazados no no admitidos

Esta propiedad especifica si el contenido de un elemento a nivel de bloque es recortado cuando desborda la caja del elemento. Los valores tienen los siguientes significados: visible Este valor indica que el contenido no es recortado, es decir, puede ser procesado fuera de la caja de bloque. hidden Este valor indica que el contenido es recortado y los usuarios no tendrn acceso al contenido recortado. El tamao y forma de la zona de recorte son especificados por la propiedad 'clip'. scroll Este valor indica que el contenido es recortado y el navegador debe proporcionar un mecanismo de desplazamiento que permanecer siempre visible (aunque la caja no tenga parte de su contenido recortado). auto El comportamiento del valor 'auto' depende del navegador, pero significa que ste debe proporcionar un mecanismo de desplazamiento para las cajas desbordadas. Ver

DIV { overflow: scroll }

Volver

Recorte: la propiedad 'clip'

'clip'

Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes:

<forma> | auto | inherit auto los elementos a nivel de bloque y reemplazados no no admitidos

Una zona de recorte define qu porcin del contenido de un elemento es visible. De manera predeterminada, la zona de recorte tiene el mismo tamao y forma que la caja del elemento. Sin embargo, la zona de recorte puede ser modificada por la propiedad 'clip'. La propiedad 'clip' se aplica a elementos que tienen una propiedad 'overflow' con un valor diferente a 'visible'. Los valores tienen los siguientes significados: auto La zona de recorte tiene el mismo tamao y ubicacin que la(s) caja(s) del elemento. <forma> En CSS2, el nico valor permitido para es: rect (<arriba>, <derecha>,<abajo>,<izquierda>). Los valores para <arriba><derecha><abajo> e <izquierda>pueden ser una <medida> o 'auto'. Las medidas negativas estn permitidas y 'auto' significa lo mismo que '0' (cero). Ver Las zonas de recorte son todas rectangulares. En futuras versiones de CSS es probable que se agreguen otras formas. Volver

Visibilidad: la propiedad 'visibility'

'visibility' Valores: visible | hidden | collapse | inherit

Valor inicial: Se aplica a: Se hereda?: Porcentajes:

inherit todos menos los elementos no no admitidos

Esta propiedad especifica si las cajas generadas por un elemento son procesadas. Aunque el elemento sea invisible sigue afectando la composicin de la pgina, es decir, contina ocupando su espacio. Los valores tienen los siguientes significados: visible El elemento es visible. hidden El elemento es invisible (totalmente transparente), pero sigue afectando la composicin. collapse Si se usa en otros elementos que no sean filas o columnas de una tabla, 'collapse' tiene el mismo significado que 'hidden'. Esta propiedad puede ser usada conjuntamente con scripts para crear efectos dinmicos. Ver

Volver

Home

Manual

5.2 Interfaz del usuario

Anterior Siguiente

| Introduccin | "Cursor" | Contornos: "outline" | "outline-width" | "outlinestyle" | "outline-color" | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Existen dos propiedades pertenecientes a la interfaz del usuario (los controles y mecanismos ofrecidos por el navegador para la interaccin con el usuario) que estn muy relacionados con el formato visual y los efectos visuales en la pgina: 'cursor' y 'outline'. Otras propiedades referidas a la interfaz del usuario, como el uso de los colores del entorno grfico y las fuentes del sistema del usuario son tratados en otras secciones de este manual. Volver

Default OK

Ver explicacin

Cursores: la propiedad 'cursor'

'cursor' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | neresize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit auto todos los elementos si no admitidos

Esta propiedad especifica el tipo de cursor que ser utilizado para el dispositivo

sealador. Los valores tienen los siguientes significados: auto El navegador determina el cursor a mostrar basado en el contexto actual. crosshair Una cruz simple. default El cursor predeterminado de la plataforma. A menudo es una flecha. pointer El cursor es un puntero que indica un enlace. move Indica que algo ser movido. e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, wresize Indica que algn borde ser movido. Por ejemplo, el cursor 'se-resize' se usa cuando el movimiento comienza desde la esquina sudeste de la caja. text Indica texto que puede seleccionarse. A menudo es una barra-I. wait Indica que el programa est ocupado y el usuario debe esperar. A menudo es un reloj. help Hay ayuda disponible sobre el objeto sealado por el cursor. A menudo es un signo de interrogacin. <uri> La aplicacin del usuario recupera el cursor sealado por el URI. Si la aplicacin del usuario no puede manejar el primero de una lista de cursores, debe intentar manejar el segundo, etc. Si la aplicacin del usuario no puede manejar ningn cursor definido por el usuario, debe usar el cursor genrico al final de la lista. Ver

P { cursor: url("micursor.cur"), text; }

Volver

Contornos dinmicos: la propiedad 'outline'

Con CSS podemos crear contornos alrededor de los objetos visuales como botones, campos activos de los formularios, mapas de imgenes, etc., para enfatizarlos. Los contornos de CSS difieren de los bordes en los siguientes sentidos:
q q

Los contornos no ocupan espacio. Los contornos pueden ser no rectangulares.

Estas propiedades controlan el estilo de los contornos dinmicos:

'outline' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit ver las propiedades individuales todos los elementos no no admitidos

'outline-width'
'outline-width' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <border-width> | inherit medium todos los elementos no no admitidos

'outline-style'
'outline-style'

Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes:

<border-style> | inherit none todos los elementos no no admitidos

'outline-color'
'outline-color' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: <color> | invert | inherit invert todos los elementos no no admitidos

Estas son caractersticas de los contornos:

q

El contorno es dibujado "sobre" una caja, es decir, el contorno est siempre encima y no influye en la posicin o tamao de la caja. Los contornos pueden ser no rectangulares. Por ejemplo, si el elemento es dividido entre varias lneas, el contorno es el contorno mnimo que encierra a todas las cajas del elemento. La propiedad 'outline-width' acepta los mismos valores que 'border-width'. La propiedad 'outline-style' acepta los mismos valores que 'border-style', excepto 'hidden'. La propiedad 'outline-color' acepta todos los colores, como as tambin la palabra clave 'invert'. Se espera que 'invert' produzca una inversin de color en los pixeles de la pantalla. Este es un truco comn para asegurarse que el borde del foco sea visible, sin que importe el color de fondo. El contorno es el mismo en todos los lados. Contrariamente a los bordes, no hay propiedades 'outline-top' o 'outline-left'.

Ver

BUTTON { outline-width: thick }

Volver

Home

Manual

5.3 Contenido generado

Anterior Siguiente

| Introduccin | Contenido: "Content" | Comillas: "quotes" | Contadores y numeracin automtica | CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

Introduccin
Existen en HTML determinados elementos que provocan la aparicin de contenidos que no son parte del documento fuente. Es el caso de las listas ordenadas (OL) que son representadas grficamente como prrafos numerados; las listas sin ordenar (UL) que insertan una vieta antes de cada tem; las citas (Q) y (BLOCKQUOTE) que son procesadas entre comillas. Las CSS tienen propiedades especficas para controlar el aspecto grfico de tales elementos. Ms an, podemos generar contenidos para insertar antes o despus de otros elementos, adems de los mencionados. Esta posibilidad se contradice en parte con la regla de separar el contenido de la pgina de su presentacin, pero resulta til para aquellos casos en que cierto elemento se repite frecuentemente en la edicin o que deba actualizarse peridicamente. En todo caso, se trata de una manera de ampliar la gama de herramientas disponibles para el autor. Volver

Default OK

Ver explicacin

La propiedad 'content'
'content' Valores: Valor inicial: Se aplica a: [ <cadena> | <uri> | <contador> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit una cadena vaca los pseudo-elementos :before y :after

Se hereda?: Porcentajes:

no no admitidos

Esta propiedad se usa con los pseudo-elementos :before y :after para generar contenido en un documento. Los valores tienen los siguientes significados: <cadena> Contenido del texto. <uri> El valor es un URI que seala un recurso externo. En estos casos, las CSS no ofrecen ningn mecanismo para cambiar el tamao del objeto incrustado o para proporcionar una descripcin textual, tal como los atributos "alt" o "longdesc" hacen con las imgenes en HTML. <contador> Los contadores pueden especificarse mediante dos funciones distintas: 'counter()' y 'counters()'. Ver la seccin sobre contadores y numeracin automtica para mayor informacin. open-quote y close-quote Estos valores son reemplazados con la correspondiente cadena de la propiedad 'quotes'. Ver la seccin sobre comillas en esta pgina. no-open-quote y no-close-quote No inserta nada (una cadena vaca), pero incrementa o disminuye el nivel de anidamiento de las comillas. attr(X) Esta funcin devuelve como una cadena el valor del atributo X del sujeto del selector. Si ste no tiene un atributo X, se devuelve una cadena vaca. Para generar contenido en una pgina se efectan dos operaciones: Primero, con los pseudo-elementos :before y :after se especifica dnde se insertar el contenido. Segundo, con la propiedad content se especifica qu es lo que se va a insertar. Supongamos que queremos poner la cadena de texto "Ttulo: " antes de cada elemento <H1>:

H1:before {content: "Ttulo: "}

(Consultar la seccin sobre los pseudo-elementos :before y :after para ver ejemplos)

Volver

Comillas: la propiedad 'quotes'

Las comillas se usan principalmente para destacar una cita o una frase reproducida textualmente; tambin para indicar un matiz irnico y en los casos en que se utilizan neologismos. Subsiste a veces la costumbre de utilizarlas para "enfatizar" un texto, pero para esto se dispone de otros recursos ms adecuados como las itlicas, las negritas o el subrayado. En CSS2, los autores pueden especificar qu tipos de comillas debe usar el navegador segn el contexto o por preferencias de estilo. La propiedad 'quotes' especifica pares de comillas para cada nivel de citas anidadas y la propiedad 'content' permite que sean insertadas antes o despus de una cita.

'quotes' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: [<cadena> <cadena>]+ | none | inherit depende de la aplicacin del usuario todos los elementos si no admitidos

Esta propiedad especifica las comillas para las citas anidadas. Los valores tienen estos significados: none Los valores 'open-quote' y 'close-quote' de la propiedad 'content' no producen ninguna comillas. <cadena> <cadena>

Los valores para 'open-quote' y 'close-quote' de la propiedad 'content' son tomados de esta lista de pares de comillas (de apertura y cierre). El primer (ms a la izquierda) par representa el nivel ms externo de la cita, el segundo par el primer nivel de anidamiento, etc. Ver

Q { quotes: '"' '"' "'" "'" } Q:before { content: open-quote } Q:after { content: close-quote }
Volver

Contadores y numeracin automtica

La numeracin automtica en CSS2 es controlada con dos propiedades, 'counterincrement' y 'counter-reset'. Los contadores definidos por estas propiedades se usan con las funciones counter() y counters() de la propiedad 'content'.

'counter-reset'
'counter-reset' Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes: [ <identificador> <entero>? ]+ | none | inherit none todos los elementos no no admitidos

'counter-increment'
'counter-increment'

Valores: Valor inicial: Se aplica a: Se hereda?: Porcentajes:

[ <identificador> <entero>? ]+ | none | inherit none todos los elementos no no admitidos

La propiedad 'counter-increment' acepta uno o ms nombres de contadores (identificadores), cada uno seguido de manera opcional por un entero. El entero indica en cuanto se incrementar el contador con cada aparicin del elemento. El incremento predeterminado es 1 y se admiten enteros negativos o el cero. La propiedad 'counter-reset' tambin contiene una lista de uno o ms nombres de contadores, cada uno seguido de manera opcional por un entero. El entero da el valor en que el contador es colocado con cada aparicin del elemento. El valor por defecto es 0. Ver

Volver

Listas: 'list-style-type', 'list-style-image', 'list-style-position' y 'list-style'

Las propiedades de lista permiten definir el formato visual en las listas. En HTML encontramos dos tipos de listas: las ordenadas (OL) y las listas sin ordenar (UL). Estas listas generan una caja principal para el contenido y una caja de marcador (una vieta, un nmero, etc.). El mismo comportamiento se espera de cualquier elemento con la propiedad 'display: list-item'. Las propiedades de lista permiten especificar el tipo de marcador y su posicin con respecto a la caja principal (afuera o dentro de ella antes del contenido). No permiten a los autores especificar distintos estilos (color, fuente, alineacin, etc.) para los marcadores de listas o ajustar su posicin con respecto a la caja principal. Con las propiedades de lista, las propiedades del fondo se aplican solamente a la caja principal; una caja de marcador 'outside' es siempre transparente.

'list-style-type'
'list-style-type' disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit disc los elementos con 'display: list-item' si no admitidos

Valores:

Valor inicial: Se aplica a: Se hereda?: Porcentajes:

El valor 'none' especifica ningn marcador, de lo contrario hay tres tipos de marcadores: signos, sistemas numricos y sistemas alfabticos. Esta propiedad especifica la apariencia del marcador de los tems de la lista. Nota: Las listas numeradas mejoran la accesibilidad del documento haciendo a las listas ms fciles de navegar. Los signos son especificados con disc, circle y square. Su forma exacta depende del navegador. Los sistemas numricos son especificados con: decimal Nmeros decimales, comenzando de 1. decimal-leading-zero Nmeros decimales completados con ceros iniciales (ej., 01, 02, 03, ..., 98, 99). lower-roman Nmeros romanos en minsculas (i, ii, iii, iv, v, etc.). upper-roman Nmeros romanos en maysculas (I, II, III, IV, V, etc.). hebrew Numeracin hebrea tradicional. georgian

Numeracin georgiana tradicional (an, ban, gan, ..., he, tan, in, inan, ...). armenian Numeracin armenia tradicional. cjk-ideographic Nmeros ideogrficos planos hiragana a, i, u, e, o, ka, ki, ... katakana A, I, U, E, O, KA, KI, ... hiragana-iroha i, ro, ha, ni, ho, he, to, ... katakana-iroha I, RO, HA, NI, HO, HE, TO, ... Una aplicacin del usuario que no reconoce un sistema numrico debe usar 'decimal'. Ver

Volver

Home

Manual

Indice de Propiedades

CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

En esta pgina encontrarn ordenadas por orden alfabtico todas las propiedades que se pueden aplicar en las CSS. En la primer columna de la tabla, cada propiedad es un link a una pgina donde se dan precisiones acerca de esa propiedad: definicin, significado de los valores, medios a los que se aplica, su valor inicial, si se hereda, etc. La segunda columna contiene todos los valores posibles para cada propiedad. En su mayora se trata de palabras claves (left, top, transparent, etc.) que se usan literalmente y cuyo significado se explica en la pgina dedicada a cada propiedad. En otros casos (como <ngulo>, <color>, <medida>, etc) son datos bsicos que contienen un link a la pgina donde se explican sus posibles valores. Un tercer caso es cuando comparten el mismo rango de valores de una propiedad con el mismo nombre (<'border-width'>, <'background-attachment'>, etc), en cuyo caso es un link a la definicin correspondiente. Notarn que la lista de valores estn organizados mediante algunos signos. El significado es el siguiente:
q

Default OK

Ver explicacin

Varias palabras puestas una a continuacin de la otra, significa que todas ellas deben aparecer (y en el mismo orden). Las palabras separadas por una barra (|) son alternativas: solamente una de ellas debe usarse. Las palabras separadas por una barra doble (||) son opciones: una o ms pueden aparecer. Los corchetes ([]) son para agrupar.

Al cierre de algunos corchetes se pueden encontrar algunos de estos modificadores:

q

q q q

Un asterisco (*) indica que el tipo, palabra o grupo precedente (es decir, aquello encerrado por los corchetes) aparece cero o ms veces. Una signo ms (+) indica que aparece una o ms veces. Un signo de interrogacin (?) indica que es opcional. Un par de nmeros entre llaves ({A,B}) indica que aparece por lo menos A y a lo sumo B veces.

A no desesperar que todo lo anterior suena complicado pero en la prctica no se necesitan consultar tantos detalles y el sentido comn se encarga de avisarnos que si ponemos una fuente como normal no podemos, simultneamente, ponerla como itlica. Esta tabla les resultar muy til como una referencia rpida para consultar en todo momento, as que mi consejo (por experiencia propia) es hacer una copia impresa y

tenerla siempre a mano.

Indice de propiedades
Propiedad Valores <ngulo> | [[ left-side | far-left | left | centerleft | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit ['background-color' || 'background-image' || 'background-repeat' || 'backgroundattachment' || 'background-position' ] | inherit scroll | fixed | inherit <color> | transparent | inherit <uri> | none | inherit [ [<porcentaje> | <medida> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit repeat | repeat-x | repeat-y | no-repeat | inherit [ border-width || border-style || <color> ] | inherit collapse | separate | inherit <color>{1,4} | transparent | inherit <medida> <medida>? | inherit <estilo-del-borde>{1,4} | inherit [ border-width || border-style || <color> ] | inherit

'azimuth'

'background'

'background-attachment' 'background-color' 'background-image'

'background-position'

'background-repeat'

'border' 'border-collapse' 'border-color' 'border-spacing' 'border-style' 'border-top' 'border-right' 'borderbottom' 'border-left'

'border-top-color' 'border-rightcolor' 'border-bottom-color' 'borderleft-color' 'border-top-style' 'border-rightstyle' 'border-bottom-style' 'borderleft-style' 'border-top-width' 'border-rightwidth' 'border-bottom-width' 'border-left-width' 'border-width' 'bottom' 'caption-side' 'clear' 'clip' 'color'

<color> | inherit

<estilo-del-borde> | inherit

<ancho-del-borde> | inherit

<ancho-del-borde>{1,4} | inherit <medida> | <porcentaje> | auto | inherit top | bottom | left | right | inherit none | left | right | both | inherit <forma> | auto | inherit <color> | inherit [ <cadena> | <uri> | <contador> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit [ <identificador> <entero>? ]+ | none | inherit [ <identificador> <entero>? ]+ | none | inherit [ 'cue-before' || 'cue-after' ] | inherit <uri> | none | inherit <uri> | none | inherit

'content'

'counter-increment'

'counter-reset' 'cue' 'cue-after' 'cue-before'

'cursor'

[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | nresize | se-resize | sw-resize | s-resize | wresize| text | wait | help ] ] | inherit ltr | rtl | inherit inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit <ngulo> | below | level | above | higher | lower | inherit show | hide | inherit left | right | none | inherit [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | smallcaption | status-bar | inherit [[ <nombre-de-la-familia> | <familiagenrica> ],]* [<nombre-de-la-familia> | <familia-genrica>] | inherit <tamao-absoluto> | <tamao-relativo> | <medida> | <porcentaje> | inherit <nmero> | none | inherit normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semicondensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit normal | italic | oblique | inherit normal | small-caps | inherit

'direction'

'display'

'elevation' 'empty-cells' 'float'

'font'

'font-family'

'font-size' 'font-size-adjust'

'font-stretch'

'font-style' 'font-variant'

'font-weight' 'height' 'left' 'letter-spacing' 'line-height'

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit <medida> | <porcentaje> | auto | inherit <medida> | <porcentaje> | auto | inherit normal | <medida> | inherit normal | <nmero> | <medida> | <porcentaje> | inherit [ 'list-style-type' || 'list-style-position' || 'liststyle-image' ] | inherit <uri> | none | inherit inside | outside | inherit disc | circle | square | decimal | decimalleading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upperalpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit <ancho-del-margen>{1,4} | inherit <ancho-del-margen> | inherit <medida> | auto | inherit [ crop || cross ] | none | inherit <medida> | <porcentaje> | none | inherit <medida> | <porcentaje> | none | inherit <medida> | <porcentaje> | inherit <medida> | <porcentaje> | inherit

'list-style' 'list-style-image' 'list-style-position'

'list-style-type'

'margin' 'margin-top' 'margin-right' 'marginbottom' 'margin-left' 'marker-offset' 'marks' 'max-height' 'max-width' 'min-height' 'min-width'

'orphans' 'outline' 'outline-color' 'outline-style' 'outline-width' 'overflow' 'padding' 'padding-top' 'padding-right' 'padding-bottom' 'padding-left' 'page' 'page-break-after' 'page-break-before' 'page-break-inside' 'pause' 'pause-after' 'pause-before' 'pitch' 'pitch-range' 'play-during' 'position' 'quotes' 'richness'

<entero> | inherit [ 'outline-color' || 'outline-style' || 'outlinewidth' ] | inherit <color> | invert | inherit <border-style> | inherit <border-width> | inherit visible | hidden | scroll | auto | inherit <ancho-del-relleno>{1,4} | inherit <ancho-del-relleno> | inherit <identificador> | auto auto | always | avoid | left | right | inherit auto | always | avoid | left | right | inherit avoid | auto | inherit [ [<tiempo> | <porcentaje>]{1,2} ] | inherit <tiempo> | <porcentaje> | inherit <tiempo> | <porcentaje> | inherit <frecuencia> | x-low | low | medium | high | xhigh | inherit <nmero> | inherit <uri> mix? repeat? | auto | none | inherit static | relative | absolute | fixed | inherit [<cadena> <cadena>]+ | none | inherit <nmero> | inherit

'right' 'size' 'speak' 'speak-header' 'speak-numeral' 'speak-punctuation' 'speech-rate' 'stress' 'table-layout' 'text-align'

<medida> | <porcentaje> | auto | inherit <medida>{1,2} | auto | portrait | landscape | inherit normal | none | spell-out | inherit once | always | inherit digits | continuous | inherit code | none | inherit <nmero> | x-slow | slow | medium | fast | xfast | faster | slower | inherit <nmero> | inherit auto | fixed | inherit left | right | center | justify | <cadena> | inherit none | [ underline || overline || line-through || blink ] | inherit <medida> | <porcentaje> | inherit none | [<color> || <medida> <medida> <medida>? ,]* [<color> || <medida> <medida> <medida>?] | inherit capitalize | uppercase | lowercase | none | inherit <medida> | <porcentaje> | auto | inherit normal | embed | bidi-override | inherit baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje> | <medida> | inherit

'text-decoration' 'text-indent'

'text-shadow'

'text-transform' 'top' 'unicode-bidi'

'vertical-align'

'visibility' 'voice-family'

visible | hidden | collapse | inherit [[<voz-especfica> | <voz-genrica> ],]* [<vozespecfica> | <voz-genrica> ] | inherit <nmero> | <porcentaje> | silent | x-soft | soft | medium | loud | x-loud | inherit normal | pre | nowrap | inherit <entero> | inherit <medida> | <porcentaje> | auto | inherit normal | <medida> | inherit auto | <entero> | inherit

'volume' 'white-space' 'widows' 'width' 'word-spacing' 'z-index'

Volver

Home

Manual

Valores

Enteros
CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css Por entero se entiende un nmero entre cero (0) y nueve (9). Puede estar precedido por los signos de ms (+) o menos (-) para indicar si es positivo o negativo. Ej.: 3, -8, +5.

Volver Nmeros
Un nmero puede tener la foma de un entero (ver arriba) o puede consistir en un nmero entre 0 y 9 seguido por un punto (.) y uno o ms dgitos. Puede estar precedido por los signos de ms (+) o menos (-) para indicar si es positivo o negativo. Ej.: 3, +2.5, -5,25.

Default OK

Ver explicacin

Volver Medidas
Por medida se entiende las dimensiones horizontales y verticales. Su forma es un nmero (con o sin punto decimal) seguido por un identificador de la unidad (por ejemplo: cm, deg, etc.). Puede estar precedido por los signos de ms (+) o menos (-) para indicar si es positivo o negativo. Cuando la medidad es cero (0), el identificador de la unidad es opcional (ejemplo: 0px es lo mismo que 0). Hay dos tipos de unidades de medida: relativas y absolutas. Las unidades relativas especifican una medida en relacin a otra propiedad de medida. Las unidades de medida absoluta son tiles solamente cuando la propiedades fsicas del medio de salida son conocidas.

Las unidades relativas son:

q q q

em: el tamao ('font-size') de la fuente relevante ex: la 'altura de la x' de la fuente relevante px: pixeles, relacionados con los dispositivos visuales

Las unidades absolutas son:

q q q q q

in: inches (pulgadas) - 1 pulgada es igual a 2.54 centmetros cm: centmetros mm: milmetros pt: puntos - 1 punto es igual a 1/72 de pulgada pc: picas - 1 pica es igual a 12 puntos

Los elementos hijos no heredan, generalmente, los valores relativos especificados para sus padres, sino los valores computados (ver la seccin sobre Cascada y Herencia). Ver ejemplos

Volver Porcentajes
El formato de estos valores es un nmero seguido por el signo de porcentaje (%). Puede estar precedido por los signos de ms (+) o menos (-) para indicar si es positivo o negativo. Estos valores siempre se refieren a otro valor. No todas las propiedades admiten porcentajes. Las que s los admiten, definen a qu valor se refieren esos porcentajes. Por ejemplo: los porcentajes en la propiedad font-size se refieren al tamao de la fuente del elemento padre.

A este prrafo le hemos aplicado la propiedad "font-size: por eso es un 10% ms grande que el resto.
Los elementos hijos heredan los valores computados, no el valor del porcentaje. ejemplos

110%"

Ver

Volver

URL
Los URL (Uniform Resource Locators) indican la direccin de un recurso en la Web. Las formas que puede adoptar son:

url(http://www.w3.org/index.html) url('http://www.w3.org/index.html') url("http://www.w3.org/index.html")

Es decir, la direccin puede ir o no entre comillas, y puede usarse un par de comillas simples (') o dobles ("). Hay URL absolutos (como los anteriores) que especifican la direccin completa, y URL relativos, que indican la direccin de un recurso en relacin con la ubicacin de la Hoja de Estilo:

url(boton.gif) url(imagenes/boton.gif) url(../boton.gif)

Adviertan que si la CSS es un archivo separado de la pgina HTML, los URL relativos lo son con respecto al archivo que contiene a Hoja de Estilo.

Volver Color
Un color puede ser especificado por una palabra clave o por una frmula numrica. Palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow. Ver Especificacin numrica: se usa el modelo de color RGB (Red, Green, Blue).

EM { color: #f00 } EM { color: #ff0000 }

EM { color: rgb(255,0,0) } EM { color: rgb(100%, 0%, 0%) }

Los dos primeros usan la notacin hexadecimal (0123456789ABCDEF) y su forma es el signo de numeral (#) seguido de tres o seis dgitos. La frmula de tres nmeros se usa como simplificacin cuando cada dgito se repite. Por ejemplo #ff99dd, puede escribirse #f9d. Las dos ltimas usan la frmula rgb(r, g, b). El modelo de color RGB permite especificar 256 niveles de luminosidad para cada uno de los colores ROJO, VERDE y AZUL (Red, Green, Blue). El cero (0) significa ausencia del color y 255 el color puro. As, el negro (Rojo 0, Verde 0, Azul 0) est dado por la ausencia de estos tres colores primarios. La suma de los tres (Rojo 255, Verde 255, Azul 255) da por resultado el blanco. Recuerden que en la escala de 256 niveles se comienza por el cero (0) de modo que el nmero ms alto no es 256 sino 255. Tambin es posible utilizar porcentajes, donde Ver 100% es igual a 255. Colores del sistema: se usan palabras clave que especifican colores del entorno grfico del usuario. Cualquier propiedad de color puede tomar uno de los siguientes nombres: ActiveBorder Borde de la ventana activa. ActiveCaption Ttulo de la ventana activa. AppWorkspace Color de fondo de una interfaz de documentos mltiples. Background Fondo del escritorio. ButtonFace Color de la cara de los elementos tridimensionales de la pantalla. ButtonHighlight Sombra oscura de los elementos tridimensionales de la pantalla. ButtonShadow Color de la sombra de los elementos tridimensionales de la pantalla. ButtonText Texto de los botones. CaptionText Texto de los ttulos, cajas de dimensiones y cajas de flechas de las barras de desplazamiento. GrayText Texto grisado (deshabilitado).

Highlight Item(s) seleccionados en un control. HighlightText Texto del(los) item(s) seleccionados en un control. InactiveBorder Borde de la ventana inactiva. InactiveCaption Ttulo de la ventana inactiva. InactiveCaptionText Color del texto de un ttulo inactivo. InfoBackground Color de fondo de los controles de sugerencias (tooltip). InfoText Color del texto de los controles de sugerencias (tooltip). Menu Fondo del menu. MenuText Texto de los menes. Scrollbar Area gris de la barra de desplazamiento. ThreeDDarkShadow Sombra oscura de los elementos tridimensionales de pantalla. ThreeDFace Color de la cara de los elementos tridimensionales de pantalla. ThreeDHighlight Color resaltado de los elementos tridimensionales de pantalla. ThreeDLightShadow Color claro de los elementos tridimensionales de pantalla. ThreeDShadow Sombra oscura de los elementos tridimensionales de pantalla. Window Fondo de la ventana. WindowFrame Marco de la ventana. WindowText Texto de la ventana. El uso de los colores del sistema del usuario permiten hacer pginas que coinciden con las preferencias y gustos del lector. Esto es importante en los casos en que esas preferencias tienen que ver con alguna discapacidad (ceguera a ciertos colores, por ejemplo). Ver ejemplos

Volver Angulos
Los valores de ngulos, paradjicamente, se usan solamente con las hojas de estilo auditivas. Su forma es un nmero seguido por un identificador de la unidad del ngulo. Puede estar precedido por los signos de ms (+) o menos (-) para indicar si es positivo o negativo. Los identificadores de la unidad del ngulo son:
q q q

deg: degree (grados) grad: gradianes rad: radianes

En el ejemplo siguiente, se especifica un ngulo de 90 a la derecha mediante los tres identificadores:

H1 { azimuth: 90deg} H1 { azimuth: 100grad} H1 { azimuth: 1.570796326794897rad} Volver Tiempo

Los valores de tiempo son usados con las hojas de estilo auditivas. Su forma es un nmero seguido por un identificador de la unidad de tiempo. Los identificadores para la unidad de tiempo son:
q q

ms: milisegundos s: segundos

Los valores de tiempo no pueden ser negativos.

Volver Frecuencia
Los valores de frecuecia son usados con las hojas de estilo auditivas. Su forma es un nmero seguido por un identificador de la unidad de frecuencia. Los identificadores para la unidad de frecuencia son:
q q

Hz: Hertz kHz: kilo Hertz

Los valores de la frecuencia no pueden ser negativos. Por ejemplo, 200Hz (o 200hz) es un sonido bajo y 6kHz (o 6khz) es un sonido agudo.

Volver Cadenas
Una cadena de texto puede escribirse con comillas dobles o simples. Dentro de una comilla doble slo puede aparecer una comilla simple y viceversa. Ejemplos:

P {font-family: "Times New Roman"} P {font-family: 'Times New Roman'}

Las palabras clave no deben ir entre comillas pues se convierten en cadenas: Ej.: red es una palabra clave, "red" es una cadena de texto. Una cadena vaca se indica ("").

Volver Identificadores

Los identificadores (incluyendo los nombres de los elementos, clases e ID de los selectores) pueden contener slo caracteres ms el guin (-); no pueden comenzar con un guin o un nmero.

Volver Forma
En CSS2, el nico valor permitido para la forma es: rect(arriba, derecha, abajo, izquierda). Arriba, derecha, abajo, izquierda especifican los desplazamientos de los lados respectivos de la caja y pueden tener un valor de medida o "auto" ("auto" significa lo mismo que "0"). Las medidas negativas estn permitidas. Ejemplo:

P { clip: rect(5px, 10px, 10px, 5px) } Volver Inherit

"Inherit" significa que el elemento toma el mismo valor computado que la propiedad del padre del elemento. De este modo, se refuerza explcitamente el valor heredado. Pero, adems, este valor se aplica an a propiedades que de otro modo no seran heredadas.

Volver

Home

Manual

Tabla de nombres de colores

CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

La siguiente tabla muestra los 16 colores que pueden especificarse mediante sus nombres. Cuando se usa un nombre, se debe recordar que son palabras clave y no deben ir entre comillas. Las dems columnas muestras las otras frmulas usadas en CSS para expresar esos mismos colores.

Muestra del color

Nombre Black Maroon Green Olive

#RRGGBB #000000 #800000 #008000 #808000 #000080 #800080 #008080 #C0C0C0 #808080 #FF0000 #00FF00 #FFFF00 #0000FF #FF00FF #00FFFF #FFFFFF

R,G,B 0,0,0 128,0,0 0,128,0 128,128,0 0,0,128 128,0,128 0,128,128 192,192,192 128,128,128 255,0,0 0,255,0 255,255,0 0,0,255 255,0,255 0,255,255 255,255,255

R%,G%,B% 0%,0%,0% 50%, 0%, 0% 0%,50%, 0% 50%,50%, 0% 0%, 0%,50% 50%, 0%,50% 0%,50%,50% 75%,75%,75% 50%,50%,50% 100%, 0%, 0% 0%,100%, 0% 100%,100%, 0% 0%, 0%,100% 100%, 0%,100% 0%,100%,100% 100%,100%,100%

Default OK

Navy Purple

Ver explicacin

Teal Silver Gray Red Lime Yellow Blue Fuchsia Aqua White

Volver

Home

Manual

Tabla de colores del sistema

CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

La siguiente tabla muestra las palabras clave que pueden usarse para definir colores relacionados con el entorno grfico del usuario. La columna de la izquierda es una muestra de esos colores que, por supuesto, se modificarn si ustedes cambian las opciones en su sistema.

Muestra del color ActiveBorder ActiveCaption

Nombre

AppWorkspace
Default OK

Background ButtonFace ButtonHighlight

Ver explicacin

ButtonShadow ButtonText CaptionText GrayText Highlight HighlightText InactiveBorder InactiveCaption InactiveCaptionText InfoBackground InfoText Menu MenuText Scrollbar

ThreeDDarkShadow ThreeDFace ThreeDHighlight ThreeDLightShadow ThreeDShadow Window WindowFrame WindowText

Volver

Home

Manual

Paleta Web

CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css

El modelo RGB requiere de 24 bits para describir el color de cada pixel en la pantalla y el total de combinaciones posibles mediante este modelo es exactamente de 16.777.216 colores. Aunque cualquier monitor a color puede mostrar todos estos tonos, por razones de economa algunas computadoras usan un sistema de slo 8 bits conformando as una paleta de 256 colores (tomados de esos 16 millones posibles). En un monitor capaz de mostrar solamente 256 colores, aquellos tonos presentes en una imagen que no se encuentran en la paleta del sistema son simulados por combinacin de pixeles (tcnica que se conoce como dithering). Por eso, en la medida de lo posible, es conveniente seleccionar para nuestras pginas colores que puedan ser visualizados correctamente en estos sistemas. El inconveniente es la diferencia entre los colores definidos en la paleta de Windows y la de Mac. Ambos sistemas tienen solamente algunos colores en comn, que son usados por Netscape y otros navegadores. Estos colores en comn conforman la paleta Web o paleta segura (safety palette). Esta paleta segura tiene como caracterstica estar basada en los valores RGB con incrementos de 20% entre cada valor, por lo que resulta un total de 216 colores.

Default OK

Ver explicacin

HEXADECIMAL 00 33 66 99 CC FF 00 51

DECIMAL 0%

PORCENTAJES

20% 40% 60% 80% 100%

102 153 204 255

Cuando debemos elegir un color para usar nuestras pginas conviene seleccionar uno de estos colores, ya que nos dan la seguridad de que estarn presentes en cualquier sistema.

La siguiente tabla muestra la paleta de 216 colores completa.

Muestra del color

#RRGGBB #000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF #009900 #009933 #009966 #009999 #0099CC #0099FF #00CC00

Muestra del color

#RRGGBB #990000 #990033 #990066 #990099 #9900CC #9900FF #993300 #993333 #993366 #993399 #09933CC #9933FF #996600 #996633 #996666 #996699 #9966CC #9966FF #999900 #999933 #999966 #999999 #9999CC #9999FF #99CC00

#00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF #330000 #330033 #330066 #330099 #3300CC #3300FF #333300 #333333 #333366 #333399 #3333CC #3333FF #336600 #336633 #336666 #336699 #3366CC #3366FF #339900

#99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF #CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF #CC9900

#339933 #339966 #339999 #3399CC #3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF #660000 #660033 #660066 #660099 #6600CC #6600FF #663300 #663333 #663366 #663399 #6633CC #6633FF #666600

#CC9933 #CC9966 #CC9999 #CC99CC #CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF #FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF #FF6600

#666633 #666666 #666699 #6666CC #6666FF #669900 #669933 #669966 #669999 #6699CC #6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF

#FF6633 #FF6666 #FF6699 #FF66CC #FF66FF #FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

Volver

Home

Manual

Listado de elementos de HTML 4.0

Elemento CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css A ABBR ACRONYM ADDRESS AREA
Default OK

Definicin Enlace de hipertexto o destino de un link Abreviatura Acrnimo Direccin Area de un mapa de imagen Texto en negritas URI de base del documento Sustitucin del algoritmo de bidireccionalidad Texto ms grande Cita de bloque Cuerpo del documento Salto de lnea Botn Encabezado de una tabla Cita Cdigo de computadora Columna de una tabla

B BASE BDO BIG BLOCKQUOTE BODY BR BUTTON CAPTION CITE CODE COL

Ver explicacin

COLGROUP DD DEL DFN DIV DL DT EM FIELDSET FORM H1 H2 H3 H4 H5 H6 HEAD HR HTML I IMG

Grupo de columnas de una tabla Definicin de una descripcin Texto borrado Trmino definido Contenedor genrico a nivel de bloque Lista de definiciones Trmino de una definicin Enfasis Grupo de control de fomularios Formulario interactivo Ttulo de nivel 1 Ttulo de nivel 2 Ttulo de nivel 3 Ttulo de nivel 4 Ttulo de nivel 5 Ttulo de nivel 6 Encabezado del documento Lnea horizontal Documento HTML Texto en itlicas Imagen

INPUT INS KBD LABEL LEGEND LI LINK MAP META NOSCRIPT OBJECT OL OPTGROUP OPTION P PARAM PRE Q SAMP SCRIPT SELECT

Entrada de formularios Texto insertado Texta a ser ingresado Etiqueta de un campo de formulario Encabezado de un grupo de control Item de una lista Relaciones del documento Mapa de una imagen Metadata Contenido alternativo a un script Objeto Lista ordenada Grupo de opciones Men de opciones Prrafo Parmetros de un objeto Texto preformateado Cita corta Resultado de un ejemplo Script ejecutado en la mquina cliente Selector de opciones

SMALL SPAN STRONG STYLE SUB SUP TABLE TBODY TD TEXTAREA TFOOT TH THEAD TITLE TR TT UL VAR

Texto pequeo Contenedor genrico a nivel de lnea Enfasis fuerte Hoja de estilo incrustada Subndice Superndice Tabla Cuerpo de la tabla Celda de datos de una tabla Entrada de texto de mltiples lneas Pie de una tabla Celda de encabezamiento de una tabla Encabezado de la tabla Ttulo del documento Fila de una tabla Texto de teletipo Lista sin ordenar Variable

Volver

Principal Otras traducciones siguiente contenidos propiedades ndice

Traducciones: Hojas de Estilo en Cascada, nivel 2 Especificacin CSS2

Este documento es una traduccin de la Recomendacin del W3C sobre las Hojas de Estilo en Cascada, Nivel 2. Este documento puede contener errores de traduccin. Una copia de la versin normativa, en ingls, puede encontrarse en: http://www.w3.org/TR/1998/REC-CSS2-19980512 Traduccin: Carlos Benavidez REC-CSS2-19980512

Hojas de Estilo en Cascada, nivel 2

Especificacin CSS2
Recomendacin del W3C 12-May-1998 Esta versin: http://www.w3.org/TR/1998/REC-CSS2-19980512 Ultima versin: http://www.w3.org/TR/REC-CSS2 Versin previa: http://www.w3.org/TR/1998/PR-CSS2-19980324 Editores: Bert Bos <bbos@w3.org> Hkon Wium Lie <howcome@w3.org> Chris Lilley <chris@w3.org> Ian Jacobs <ij@w3.org>

Resumen
Esta especificacin define las Hojas de Estilo en Cascada, nivel 2 (CSS2). CSS2 es un lenguaje de hoja de estilo que permite que los autores y los usuarios asocien un estilo (por ejemplo, fuentes, espaciado y seales sonoras) a los documentos estructurados (por ejemplo, documentos HTML y aplicaciones XML). Separando el estilo de presentacin del contenido de los documentos, CSS2 simplifica la creacin y mantenimiento de los sitios Web. CSS2 se cimenta en CSS1 (vase [CSS1]) y, con muy pocas excepciones, todas las hojas de estilo CSS1 vlidas son hojas de estilo CSS2 vlidas. CSS2 brinda soporte a hojas de estilo especficas para cada medio, de modo que los autores puedan adaptar la presentacin de sus documentos a los browsers visuales, a los dispositivos sonoros, a las impresoras, a los dispositivos braille, de mano, etc. Esta especificacin tambin soporta el posicionamiento de contenidos, fuentes descargables, disposicin de la pgina, aspectos para la internacionalizacin, contadores y numeradores automticos, y

algunas caractersticas relacionadas con la interfaz del usuario.

Estado de este documento

Este documento ha sido revisado por los Miembros de W3C y otras partes interesadas y aprobado por el Director como Recomendacin del W3C. Es un documento estable y puede ser utilizado como material de referencia o ser citado como referencia normativa en otro documento. El papel del W3C en la elaboracin de la Recomendacin es atender a la especificacin y promover su amplia difusin. Esto incrementa la funcionalidad y la interoperabilidad de la Web. Una lista de las Recomendaciones actuales del W3C y de otros documentos tcnicos se puede encontrar en http://www.w3. org/TR. La discusin pblica de las caractersticas de las CSS tiene lugar en www-style@w3.org.

Formatos disponibles
La especificacin CSS2 est disponible en los siguientes formatos: HTML: http://www.w3.org/TR/1998/REC-CSS2-19980512 un archivo de texto puro: http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.txt, HTML como archivo tar (gzip): http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.tgz, HTML como archivo zip (ste es un archivo 'zip ' no un 'exe'): http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip, as como archivo PostScript (gzip): http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.ps.gz,

y un archivo PDF: http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf. En caso de una discrepancia entre las distintas formas de la especificacin, http://www.w3.org/TR/1998/REC-CSS219980512 se considera la versin definitiva.

Lenguajes disponibles
La versin en ingls de esta especificacin es la nica versin normativa. Sin embargo, por traducciones en otros lenguajes ver http://www.w3.org/Style/css2-updates/translations.html.

Erratas
La lista de errores conocidos en esta especificacin est disponible en http://www.w3.org/Style/css2-updates/REC-CSS219980512-errata.html. Por favor, informe de los errores en este documento a css2-editors@w3.org. Nota de la traduccin: Los errores a que se refiere el prrafo anterior pertenecen, obviamente, a la versin original en ingls. Esta traduccin ya contiene las correcciones del caso. Por favor, si desea informar de errores encontrados en esta versin en castellano o tiene cualquier tipo de sugerencia, enve su mensaje a: carlos.benavidez@sidar.org

Tabla de Contenidos Abreviada

q q q

1 Acerca de la Especificacin CSS2 2 Introduccin a CSS2 3 Conformidad: Requisitos y Recomendaciones

q q q q q q q q q q q q q q q q q q q q q q q q

4 Sintaxis y tipos bsicos de datos en CSS2 5 Selectores 6 Asignacin de valores a las propiedades, Cascada y Herencia 7 Tipos de medios 8 Modelo de caja 9 Modelo de formato visual 10 Detalles del modelo de formato visual 11 Efectos visuales 12 Contenido generado, numeracin automtica y listas 13 Medios paginados 14 Colores y fondos 15 Fuentes 16 Texto 17 Tablas 18 Interfaz del usuario 19 Hojas de estilo auditivas Apndice A: Una hoja de estilo de ejemplo para HTML 4.0 Apndice B: Cambios con respecto a CSS1 Apndice C: Implementacin y notas de desempeo para fuentes Apndice D: La gramtica de CSS2 Apndice E. Referencias Apndice F. Indice de propiedades Apndice G. Indice de descriptores Apndice H. Indice

Tabla de Contenidos Completa

q r r r

r r q r r r

r q r r r

1 Acerca de la Especificacin CSS2 1.1 Leyendo la especificacin 1.2 Cmo est organizada la especificacin 1.3 Convenciones s 1.3.1 Elementos y atributos en el lenguaje del documento s 1.3.2 Definicin de las propiedades CSS s Valor s Inicial s Se aplica a s Se hereda s Porcentajes s Grupos de medios s 1.3.3 Propiedades resumidas s 1.3.4 Notas y ejemplos s 1.3.5 Imgenes y descripciones extensas 1.4 Reconocimientos 1.5 Aviso de Copyright 2 Introduccin a CSS2 2.1 Breve gua de CSS2 para HTML 2.2 Breve gua de CSS2 para XML 2.3 El modelo de procesamiento de CSS2 s 2.3.1 El lienzo s 2.3.2 Modelo de destinatarios de CSS2 2.4 Reglas de diseo de CSS 3 Conformidad: Requisitos y Recomendaciones 3.1 Definiciones 3.2 Conformidad 3.3 Condiciones de error

r q r

r r

q r

3.4 Tipo de contenido text/css 4 Sintaxis y tipos bsicos de datos en CSS2 4.1 Sintaxis s 4.1.1 Comandos s 4.1.2 Palabras clave s 4.1.3 Caracteres y maysculas/minsculas s 4.1.4 Estamentos s 4.1.5 Reglas-arroba s 4.1.6 Bloques s 4.1.7 Juegos de reglas, bloques de declaraciones y selectores s 4.1.8 Declaraciones y propiedades s 4.1.9 Comentarios 4.2 Reglas para el manejo de errores en el anlisis 4.3 Valores s 4.3.1 Enteros y nmeros reales s 4.3.2 Medidas s 4.3.3 Porcentajes s 4.3.4 URL + URN = URI s 4.3.5 Contadores s 4.3.6 Colores s 4.3.7 Angulos s 4.3.8 Tiempos s 4.3.9 Frecuencias s 4.3.10 Cadenas 4.4 Representacin de los documentos CSS s 4.4.1 Referencias a caracteres no representados en una codificacin de caracteres 5 Selectores 5.1 Equivalencia de patrones

r r r r r r

r r r

q r

5.2 Sintaxis de los selectores s 5.2.1 Agrupamiento 5.3 Selector universal 5.4 Selectores de tipos 5.5 Selectores de descendientes 5.6 Selectores de hijos 5.7 Selectores de hermanos adyacentes 5.8 Selectores de atributos s 5.8.1 Atributos equivalentes y valores de los atributos s 5.8.2 Valores predeterminados de los atributos en la DTD s 5.8.3 Selectores de clases 5.9 Selectores de ID 5.10 Pseudo-elementos y pseudo-clases 5.11 Pseudo-clases s 5.11.1 La pseudo-clase :first-child s 5.11.2 Las pseudo-clases vnculo: :link y :visited s 5.11.3 Las pseudo-clases dinmicas: :hover, :active y :focus s 5.11.4 La pseudo-clase de lenguaje: :lang 5.12 Pseudo-elementos s 5.12.1 El pseudo-elemento :first-line s 5.12.2 El pseudo-elemento :first-letter s 5.12.3 Los pseudo-elementos :before y :after 6 Asignacin de valores a las propiedades, Cascada y Herencia 6.1 Valores especificados, computados y reales s 6.1.1 Valores especificados s 6.1.2 Valores computados s 6.1.3 Valores reales

r r

q r r

q r r r

r r

q r

6.2 Herencia s 6.2.1 El valor 'inherit' 6.3 La regla @import 6.4 Cascada s 6.4.1 Orden de la cascada s 6.4.2 Las reglas !important s 6.4.3 Clculo de la especificidad de un selector s 6.4.4 Precedencia de las indicaciones de presentacin fuera de CSS 7 Tipos de medios 7.1 Introduccin a los tipos de medios 7.2 Especificacin de hojas de estilos dependientes de los medios s 7.2.1 La regla @media 7.3 Tipos de medios reconocidos s 7.3.1 Grupos de medios 8 Modelo de caja 8.1 Dimensiones de la caja 8.2 Ejemplo de mrgenes, rellenos y bordes 8.3 Propiedades del margen: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' y 'margin' s 8.3.1 Mrgenes cerrados 8.4 Propiedades del relleno: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' y 'padding' 8.5 Propiedades del borde s 8.5.1 Ancho del borde: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' y 'borderwidth' s 8.5.2 Color del borde: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' y 'border-color' s 8.5.3 Estilo del borde: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' y 'border-style' s 8.5.4 Propiedades resumidas del borde: 'border-top', 'border-bottom', 'border-right', 'border-left' y 'border' 9 Modelo de formato visual 9.1 Introduccin al modelo de formato visual

r r

9.1.1 El acceso visual s 9.1.2 Bloques de contencin 9.2 Control de la generacin de cajas s 9.2.1 Elementos a nivel de bloque y cajas de bloque s Cajas de bloque annimas s 9.2.2 Elementos a nivel de lnea y cajas de lnea s Cajas de lnea annimas s 9.2.3 Cajas compact s 9.2.4 Cajas run-in s 9.2.5 La propiedad 'display' 9.3 Esquemas de posicionamiento s 9.3.1 Eleccin de un esquema de posicionamiento: la propiedad 'position' s 9.3.2 Desplazamiento de las cajas: 'top', 'right', 'bottom', 'left' 9.4 Flujo normal s 9.4.1 Contexto de formato de bloque s 9.4.2 Contexto de formato de lnea s 9.4.3 Posicionamiento relativo 9.5 Flotantes s 9.5.1 Posicionamiento del flotante: la propiedad 'float' s 9.5.2 Control del flujo al costado del flotante: la propiedad 'clear' 9.6 Posicionamiento absoluto s 9.6.1 Posicionamiento fijo 9.7 Relaciones entre 'display', 'position' y 'float' 9.8 Comparacin entre flujo normal, flotantes y posicionamiento absoluto s 9.8.1 Flujo normal s 9.8.2 Posicionamiento relativo s 9.8.3 Flotar una caja s 9.8.4 Posicionamiento absoluto
s

r q r r r

r r r

r r

9.9 Presentacin por capas s 9.9.1 Especificar el nivel de pila: la propiedad 'z-index' 9.10 Direccin del texto: las propiedades 'direction' y 'unicode-bidi' 10 Detalles del modelo de formato visual 10.1 Definicin de "bloque de contencin" 10.2 Ancho del contenido: la propiedad 'width' 10.3 Computando anchos y mrgenes s 10.3.1 Elementos no reemplazados, de lnea s 10.3.2 Elementos reemplazados, de lnea s 10.3.3 Elementos no reemplazados en flujo normal, a nivel de bloque s 10.3.4 Elementos reemplazados en flujo normal, a nivel de bloque s 10.3.5 Elementos no reemplazados, flotantes s 10.3.6 Elementos reemplazados, flotantes s 10.3.7 Elementos no reemplazados, posicionados absolutamente s 10.3.8 Elementos reemplazados, posicionados absolutamente 10.4 Anchos mnimos y mximos: 'min-width' y 'max-width' 10.5 Altura del contenido: la propiedad 'height' 10.6 Computando alturas y mrgenes s 10.6.1 Elementos no reemplazados, de lnea s 10.6.2 Elementos reemplazados, de lnea, elementos reemplazados en flujo normal, a nivel de bloque y elementos reemplazados, flotantes s 10.6.3 Elementos no reemplazados en flujo normal, a nivel de bloque y elementos reemplazados, flotantes s 10.6.4 Elementos no reemplazados, posicionados absolutamente s 10.6.5 Elementos reemplazados, posicionados absolutamente 10.7 Alturas mnimas y mximas: 'min-height' y 'max-height' 10.8 Clculo de la altura de la lnea: las propiedades 'line-height' y 'vertical-align' s 10.8.1 Interlineado y medio interlineado

q r

r q r r r r

q r r

11 Efectos visuales 11.1 Desbordamiento y recorte s 11.1.1 Desbordamiento: la propiedad 'overflow' s 11.1.2 Recorte: la propiedad 'clip' 11.2 Visibilidad: la propiedad 'visibility' 12 Contenido generado, numeracin automtica y listas 12.1 Los pseudo-elementos :before y :after 12.2 La propiedad 'content' 12.3 Interaccin de :before y :after con los elementos 'compact' y 'run-in' 12.4 Comillas s 12.4.1 Especificacin de comillas con la propiedad 'quotes' s 12.4.2 Insercin de comillas con la propiedad 'content' 12.5 Contadores y numeracin automtica s 12.5.1 Contadores anidados y rea de alcance s 12.5.2 Estilos de contadores s 12.5.3 Contadores en elementos con 'display: none' 12.6 Marcadores y listas s 12.6.1 Marcadores: la propiedad 'marker-offset' s 12.6.2 Listas: las propiedades 'list-style-type', 'list-style-image', 'list-style-position' y 'list-style' 13 Medios paginados 13.1 Introduccin a los medios paginados 13.2 Cajas de pgina: la regla @page s 13.2.1 Mrgenes de la pgina s 13.2.2 Tamao de la pgina: la propiedad 'size' s Procesamiento de cajas de pgina que no se ajustan a una hoja de destino s Ubicacin de la caja de pgina en la hoja s 13.2.3 Marcas de corte: la propiedad 'marks' s 13.2.4 Pginas izquierda, derecha y primera

r q r r

r q r r

13.2.5 Contenido fuera de la caja de pgina 13.3 Saltos de pgina s 13.3.1 Saltos antes/despus de los elementos: 'page-break-before', 'page-break-after', 'page-break-inside' s 13.3.2 Uso de pginas nominadas: 'page' s 13.3.3 Saltos dentro de los elementos: 'orphans', 'widows' s 13.3.4 Saltos de pgina permitidos s 13.3.5 Saltos de pgina forzados s 13.3.6 Los "mejores" saltos de pgina 13.4 Cascada en el contexto de pgina 14 Colores y fondos 14.1 Color del primer plano: la propiedad 'color' 14.2 El fondo s 14.2.1 Propiedades del fondo: 'background-color', 'background-image', 'background-repeat', 'backgroundattachment', 'background-position' y 'background' 14.3 Correccin de la gama 15 Fuentes 15.1 Introduccin 15.2 Especificacin de la fuente s 15.2.1 Propiedades para la especificacin de las fuentes s 15.2.2 Familias de fuentes: la propiedad 'font-family' s 15.2.3 Estilos de la fuente: las propiedades 'font-style', 'font-variant', 'font-weight' y 'font-stretch' s 15.2.4 Tamao de la fuente: las propiedades 'font-size' y 'font-size-adjust' s 15.2.5 Propiedad resumida de la fuente: la propiedad 'font' s 15.2.6 Familias genricas de fuentes s serif s sans-serif s cursive s fantasy
s

monospace 15.3 Seleccin de fuentes s 15.3.1 Descripciones de Fuentes y @font-face s 15.3.2 Descriptores para Seleccionar una Fuente: 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' y 'font-size' s 15.3.3 Descriptor para la Calificacin de los Datos de una Fuente: 'unicode-range' s 15.3.4 Descriptor para Valores Numricos: 'units-per-em' s 15.3.5 Descriptor para el Referenciado: 'src' s 15.3.6 Descriptores para las Equivalencias: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' y 'descent' s 15.3.7 Descriptores para la Sntesis: 'widths', 'bbox' y 'definition-src' s 15.3.8 Descriptores para la Alineacin: 'baseline', 'centerline', 'mathline' y 'topline' s 15.3.9 Ejemplos 15.4 Caractersticas de las Fuentes s 15.4.1 Introduccin a las Caractersticas de las Fuentes s 15.4.2 Nombre completo de la fuente s 15.4.3 Unidades coordinadas en el cuadrado eme s 15.4.4 Lnea de Base Central s 15.4.5 Codificacin de la Fuente s 15.4.6 Nombre de la familia de fuentes s 15.4.7 Ancho de los signos s 15.4.8 Ancho del asta horizontal s 15.4.9 Altura de los signos en maysculas s 15.4.10 Altura de los signos en minsculas s 15.4.11 Lnea de Base inferior s 15.4.12 Lnea de Base matemtica s 15.4.13 Mxima caja externa
s

q r r r

r r r q r r

r r

15.4.14 Altura mxima sin acentos s 15.4.15 Profundidad mxima sin acentos s 15.4.16 Nmero Panose-1 s 15.4.17 Rango de caracteres ISO 10646 s 15.4.18 Lnea de Base superior s 15.4.19 Ancho del asta vertical s 15.4.20 Angulo del asta vertical 15.5 Algoritmo de equivalencia de fuentes s 15.5.1 Equivalencia de los valores de los pesos de las fuentes con los nombres de las fuentes s 15.5.2 Ejemplos de equivalencias de fuentes 16 Texto 16.1 Sangra: la propiedad 'text-indent' 16.2 Alineacin: la propiedad 'text-align' 16.3 Decoracin s 16.3.1 Subrayado, sper-rayado, tachado y parpadeo: la propiedad 'text-decoration' s 16.3.2 Texto con sombra: la propiedad 'text-shadow' 16.4 Espaciado de letras y palabras: las propiedades 'letter-spacing' y 'word-spacing' 16.5 Cambio de minsculas y maysculas: la propiedad 'text-transform' 16.6 Espacios en blanco: la propiedad 'white-space' 17 Tablas 17.1 Introduccin a las tablas 17.2 El modelo de tabla CSS s 17.2.1 Objetos annimos de la tabla 17.3 Selectores de columnas 17.4 Las tablas en el modelo de formato visual s 17.4.1 Posicin y alineacin del encabezado 17.5 Composicin visual del contenido de las tablas s 17.5.1 Capas y transparencia en la tabla
s

q r r r r

r q r r r r r r

17.5.2 Algoritmos para el ancho de la tabla: la propiedad 'table-layout' s Composicin fija de la tabla s Composicin automtica de la tabla s 17.5.3 Algoritmos para la altura de la tabla s 17.5.4 Alineacin horizontal en una columna s 17.5.5 Efectos dinmicos en filas y columnas 17.6 Bordes s 17.6.1 El modelo de bordes separados s Bordes alrededor de celdas vacas: la propiedad 'empty-cells' s 17.6.2 El modelo de bordes cerrados s Resolucin de conflictos de bordes s 17.6.3 Estilos de bordes 17.7 Procesamiento sonoro de las tablas s 17.7.1 Lectura de ttulos: la propiedad 'speak-header' 18 Interfaz del usuario 18.1 Cursores: la propiedad 'cursor' 18.2 Preferencias de color del usuario 18.3 Preferencias de fuentes del usuario 18.4 Contornos dinmicos: la propiedad 'outline' s 18.4.1 Contornos y foco 18.5 Amplificacin 19 Hojas de estilo auditivas 19.1 Introduccin a las hojas de estilo auditivas 19.2 Propiedades del volumen: 'volume' 19.3 Propiedades del habla: 'speak' 19.4 Propiedades de la pausa: 'pause-before', 'pause-after' y 'pause' 19.5 Propiedades de la seal: 'cue-before', 'cue-after' y 'cue' 19.6 Propiedades de la mezcla: 'play-during'
s

r r

r q q r r r q r r r r r q r r r q r r q q q

19.7 Propiedades espaciales: 'azimuth' y 'elevation' 19.8 Propiedades de las caractersticas de la voz: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' y 'richness' 19.9 Propiedades del discurso: 'speak-punctuation' y 'speak-numeral' Apndice A: Una hoja de estilo de ejemplo para HTML 4.0 Apndice B: Cambios con respecto a CSS1 B.1 Nuevo funcionamiento B.2 Descripciones actualizadas B.3 Cambios semnticos a CSS1 Apndice C: Implementacin y notas de desempeo para fuentes C.1 Glosario de trminos relacionados con las fuentes C.2 Recuperacin de las fuentes C.3 Significado de los nmeros Panose C.4 Deduccin de rangos de Unicode para TrueType C.5 Generacin automtica de descriptores Apndice D: La gramtica de CSS2 D.1 Gramtica D.2 Scanner de lxico D.3 Comparacin de los comandos en CSS2 y CSS1 Apndice E. Referencias E.1 Referencias normativas E.2 Referencias informativas Apndice F. Indice de propiedades Apndice G. Indice de descriptores Apndice H. Indice Copyright 1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.

Principal Otras traducciones siguiente contenidos propiedades ndice

Home

CSS2

Manual

Autor

El autor
CSS en accin! Seleccione otra hoja de estilo para navegar: Actual: default.css Hola. Mi nombre es Carlos Benavidez, soy un diseador argentino y me gusta definirme como un viejo artesano del oficio grfico (ahora convertido en "digital designer" por imposicin del mercado ;-) Con 45! aos he tenido oportunidad de conocer y usar casi toda la tecnologa aplicada a las artes grficas, desde los tipos de caja (en aquellas viejas Minerva), la Linotipo, la Composer, las Letraset y la Linotronic hasta los programas de autoedicin (comenc con el Ventura Publisher en una 286 con 2 Mb. de RAM!). Con la aparicin de la Web y el lenguaje HTML -que pareca la herramienta que definitivamente nos iba a llevar de la era Gutemberg a la era digital- pareca el momento de adecuar mis (escasas) habilidades en el campo de la grfica a este nuevo medio lleno de posibilidades estticas y comunicativas. Muy pronto descubr que HTML haba sido creado para que cientficos e investigadores que nada saban acerca de diseo y composicin- pudieran confeccionar documentos para intercambiar informacin entre ellos, de modo que resultaba muy difcil desarrollar mi trabajo tal como lo haca con PageMaker o CorelDraw. Cuando conoc el lenguaje de las CSS2 consider que eran el puente que permitiran unir mis conocimientos como diseador grfico con los medios electrnicos y, aunque domino el ingls con la mayor ignorancia, me atrev a traducir la Especificacin CSS2 porque contiene muchos conceptos y terminologa provenientes de la composicin grfica que resultaran difciles de entender para alguien ajeno a esta profesin. El manual de uso de las CSS es, en primer lugar, un mtodo para aprender a usar yo mismo las hojas de estilo y luego una forma de retribuir a tantos que me han brindado su informacin de forma desinteresada por este medio maravilloso que es la Web. Espero que les resulte de utilidad.

Default OK

Ver explicacin

Actividades
Estas son actividades que he desarrollado relacionadas con la accesibilidad en la Web: Buenos Aires, 6 Diciembre 2001 Seminario sobre Accesibilidad Web (Programa para la Sociedad de la Informacin - Proyecto ISIS) Tema: Las CSS como herramienta para la accesibilidad Ver la presentacin Buenos Aires, 29/30 Octubre 2001 Curso: Diseo Web Accesible "Diseo para Todos" Tema: Aplicando las Hojas de Estilo Ver pgina del curso Ver mdulo sobre CSS Mar del Plata (Arg.), 25/27 Octubre 2001 IV Jornadas del Sid@r Tema: Hojas de Estilo en Cascada Ver Relato de las V Jornadas Ver la ponencia en formato DOC Ejemplos usados en la ponencia (ZIP) Madrid, 6/8 Noviembre 2000 IV Jornadas del Sid@r (videoconferencia) Tema: Hojas de Estilo en Cascada Ver Relato de las IV Jornadas Ver la ponencia en formato RTF

Direccin del sitio: http://www.sidar.org/recur/desdi/mcss/ Mensajes a: carlos@sidar.org

1 - El siguiente cdigo HTML: <H1>Ttulo</H1> es mostrado por el navegador de este modo:

Ttulo
Cerrar

2 - Agregando algunas propiedades dentro de las marcas del cdigo HTML: <H1 ALIGN="center"><FONT FACE="Arial" COLOR="#0000FF" SIZE="5">Ttulo</FONT></H1> obtenemos el siguiente formato:

Ttulo
Cerrar

3 - Utilizando una Hoja de Estilo con la siguiente regla: H1 { font-family: Arial, Sans-serif; font-size: 19pt; color: #0000FF; text-align: center;

} El resultado ser:

Ttulo
Cerrar

4 - Las CSS tienen un juego de propiedades mucho ms completo que las permitidas por HTML. En este caso, haremos que los elementos H1 tengan una imagen de fondo, un marco grueso de color rojo, un espacio entre letras de 1 cuadratn y un margen izquierdo y derecho de 1 cm. Esta es la hoja de estilo: H1 { font-family: Arial, Sans-serif; font-size: 19pt; color: #0000FF; text-align: center; background-image: url(cb_gris.jpg); border: thick solid red; letter-spacing: 1em; margin: 0 1cm; } Y el resultado:

Ttulo

HTML slo permite especificar una imagen de fondo en el elemento BODY y algunos navegadores tambin lo aceptan en las tablas. En cambio, las CSS permiten que la propiedad background-image y las aproximadamente 100 propiedades del lenguaje se apliquen a cualquier elemento de la pgina.

Cerrar

En esta pgina tenemos una hoja de estilo con la siguiente regla: P {text-align: right} de modo que todos los prrafos estn alineados por la derecha. Ahora bien, en el prrafo siguiente vamos a usar la etiqueta <P align="left"> para alinear el prrafo por la izquierda: Este prrafo intenta estar alineado por la izquierda pero no es as porque las reglas de las CSS tiene preferencia por sobre el formato aplicado con HTML. Sin embargo, SI tiene distinto color porque usamos <font color="#0000FF"> y no tenemos ninguna regla CSS que defina el color de los prrafos. As es que el formato que demos directamente con HTML slo tendr efecto si no existe ningn estilo aplicado a ese elemento. Cerrar

La regla @import
En esta pgina de prueba usamos la siguiente hoja de estilo: @import url("ejemplos.css"); P { font-family: Verdana, Arial, Sans-Serif; color: navy; } La hoja de estilo "ejemplo.css" que ha sido importada a esta pgina contiene las siguientes reglas: BODY { color: #000000; background-image: url(cb_fondo.gif); background-attachment: fixed; } PRE { color: #FF0000; } De este modo, si su navegador soporta la regla @import debe ver esta pgina con una cuadrcula de fondo y los dos bloques de cdigo con texto de color rojo.

Cerrar

Selectores de tipos y de clases

1 - La siguiente Hoja de Estilo: H1 {color: red} P {color: blue} P.invertido {color: white; background-color: black} .colorido {color: green; background-color: yellow} 2 - Aplicada a la siguiente seccin de una pgina: <h1>Ttulo rojo (selector de tipos)</h1> <p>Los prrafos son azules. Se usa un selector de tipos para individualizarlos..</p> <p class="invertido">Una clase de prrafo especial. La clase se llama "invertido" y el selector es un selector de clases. El texto es blanco sobre fondo negro.</p> <p class="colorido">Este prrafo usa otra clase llamada "colorido". El fondo es amarillo y el texto es verde. Esta es una clase que se puede aplicar a cualquier elemento, no solamente a los prrafos. </p> <p>Por ejemplo, una palabra en negrita (elemento B de HTML) se ver as: <b>con negritas y texto azul,</b> pero un elemento B con el atributo CLASS="colorido" se ver as: <b class="colorido">texto en negrita, letras verdes y fondo amarillo</b>.</p> <p>Otro ejemplo. Esta es una lista de la clase "colorido" que tiene</p> <ul class="colorido"> <li>Texto en verde</li> <li>Fondo amarillo</li> </ul> 3 - Producir estos efectos::

Ttulo rojo (selector de tipos)

Los prrafos son azules. Se usa un selector de tipos para individualizarlos.. Una clase de prrafo especial. La clase se llama "invertido" y el selector es un selector de clases. El texto es blanco sobre fondo negro. Este prrafo usa otra clase llamada "colorido". El fondo es amarillo y el texto es verde. Esta es una clase que se puede aplicar a cualquier elemento, no solamente a los prrafos. Por ejemplo, una palabra en negrita (elemento B de HTML) se ver asi: con negritas y texto azul, pero un elemento B con el atributo CLASS="colorido" se ver as: texto en negrita, letras verdes y fondo amarillo. Otro ejemplo. Esta es una lista de la clase "colorido" que tiene
q q

Texto en verde Fondo amarillo

Pero en el caso en que apliquemos la clase "invertido" a una lista:

q

Esta no tendr ningn efecto porque la clase "invertido" se puede aplicar slo a los prrafos.

Cerrar

Selectores de descendientes
La siguiente Hoja de Estilo: H1 {color: red} P {color: black} EM {color: red} H1 EM {color: blue} Se aplica a este texto:

Un ttulo con una palabra enfatizada

Con las reglas anteriores hemos provocado que el texto dentro del elemento EM sea de color rojo, excepto cuando es descendiente de un elemento H1, en cuyo caso es azul. Puede suceder que EM se encuentre dentro de un elemento que a su vez se encuentre dentro de H1, como en: <H1>Ttulo con un <SPAN>elemento <EM>SPAN</EM> verde</SPAN> y texto enfatizado</H1>

Ttulo con un elemento SPAN verde y texto enfatizado

En este caso, H1 es padre de SPAN, que a su vez es padre de EM. Por lo tanto, EM es descendiente de H1 y la regla se cumple.

Cerrar

Selectores de hermanos adyacentes

Usaremos la siguiente Hoja de Estilo para la pgina: H1 {color: red} H2 {color: blue} P {color: black; text-indent: 2em} H1 + P {color: maroon; text-indent: 0} H1 + H2 {color: green; margin-top: -0.5em} para aplicarla a este cdigo:

El ttulo (H1) en rojo

Un prrafo que es hermano adyacente de H1, por lo tanto no tiene sangra y el color del texto es marrn.. A este prrafo se le aplica el estilo normal, es decir, texto en negro y una sangra de 2em. Esto es as porque aunque es un elemento hermano de H1 (BODY es el padre de ambos) no son adyacentes.

Un subttulo (H2) de color azul

Otro prrafo normal. A continuacin usaremos un ttulo (H1) e inmediatamente un subttulo (H2). Como H2 ser hermano adyacente de H1 cambiar su color a verde y reducir su margen superior a -0.5em.

Otro ttulo (H1)

Subttulo (H2) de color verde y margen negativo
Otro prrafo de relleno.

Otro prrafo de relleno. Otro prrafo de relleno.

Cerrar

La pseudo clase :first-child

Usaremos la siguiente Hoja de Estilo para quitar la sangra a los prrafos que son primeros hijos de un DIV, y con la segunda regla haremos que los elementos EM que sean descendientes de un prrafo que es primer hijo de algn elemento sea de color azul: DIV > P:first-child {text-indent: 0} P:first-child EM {color: blue}

Este es el resultado
Comienza el DIV. Este prrafo es el primer hijo, entonces no tiene sangra de acuerdo a la primera regla de nuestra Hoja de Estilo. Como este prrafo es el primer hijo de alguien, si contiene un elemento EM, ste ser de color azul (de acuerdo a la segunda regla): ste es un elemento EM. Este segundo prrafo dentro del DIV es de control. Como no es primer hijo debe tener una sangra de 2em. Adems, este elemento EM no debe ser azul, porque es descendiente de un prrafo que no es primer

:link y :visited
Por ejemplo, las reglas siguientes: A:link {font-family: sans-serif; color: #009900; text-decoration: none} A:visited {background-color: yellow; color: #999999} se aplican a los links que existen en esta pgina. Utilicen uno de ellos y cuando regresen, el que haya sido visitado habr cambiado su aspecto. Primer link Segundo link

Cerrar

Pseudo-clases dinmicas (1)

Estos son algunos efectos que pueden conseguirse usando :link, :hover y :visited. A continuacin de los ejemplos se muestran las reglas usadas. (El "link de control" no conduce a nada, slo est para que siempre haya un link sin visitar en la pgina). Link 2 Link 3 Link de control

A:link {font-family: serif; text-decoration: none} A:hover {cursor: help; background-color: yellow; font-family: sans-serif} El link normal tiene una fuente con serif, sin subrayar. Cuando se mueve el cursor sobre l, la fuente cambia a una sans-serif, el color de fondo es amarillo y el puntero del mouse se transforma en el que normalmente se utiliza para indicar que hay ayuda disponible (por lo general es un signo de interrogacin).

Cerrar

Pseudo-elementos
:first-line
En el siguiente fragmento de un texto de J.L.Borges, la primer lnea de cada prrafo aparecer de color rojo y en maysculas (ya s que es horrible, pero sirve para distinguir bien el efecto). La hoja de estilo para el texto siguiente es: P:fist-line {text-transform: uppercase; color: red;}

Qu ser Buenos Aires? Es la Plaza de Mayo a la que volvieron, despus de haber guerreado en el continente, hombres cansados y felices. Es el creciente laberinto de luces que divisamos desde el avin y bajo el cual estn las azoteas, la vereda, el ltimo patio, las cosas quietas. Es una puerta numerada, detrs de la cual, en la oscuridad, pas diez das y diez noches, inmvil, das y noches que son en la memoria un instante. (...)

Cerrar

Pseudo-elementos
:first-letter
En el siguiente fragmento de un texto de J.L.Borges, usaremos una capitular cada que abarque dos lneas. Una capitular cada es la letra inicial ms grande que el resto del prrafo que se alnea en su parte superior con la primer lnea del prrafo (como es ms grande, abarca hacia abajo dos o ms lneas del texto). La hoja de estilo es: P:fist-letter {font-size: 200%; font-weight: bold; float: left;}

Sin proponrmelo al principio, he consagrado mi ya larga vida a las letras, a la ctedra, al ocio, a las tranquilas aventuras del dilogo, a la filologa, que ignoro, el misterioso hbito de Buenos Aires y a las perplejidades que no sin alguna soberbia se llaman metafsica. Tampoco le ha faltado a mi vida la amistad de unos pocos, que es la que importa. Creo no tener un solo enemigo o, si los hubo, nunca me lo hicieron saber. La verdad es que nadie puede herirnos, salvo la gente que queremos. (...)

Cerrar

Pseudo-elementos
:after / :before
En el siguiente texto vamos a hacer que estos pseudo-elementos inserten el texto "Tipo: " antes de cada subttulo, el cono de una flecha al final de cada prrafo y la palabra "Fin" al final de la pgina. La hoja de estilo es: H3:before {content: "Tipo: "} P:after {content: url("flecha.gif")} BODY:after {content: "Fin"; display: block;}

Romanas antiguas
Tienen poco contraste en el grosor de sus trazos, modulacin inclinada y serif moderados (Garamond, Caslon, Times).

Romanas modernas
Con serif fino y recto, mucho contraste en sus trazos y modulacin vertical (Bodoni, Didot, Modern 20).

Romanas de transicin
Con serif moderado como las antiguas pero con may

Propiedades del margen

Vamos a usar dos prrafos seguidos y aplicarles las siguientes reglas de estilo respectivamente: .Parrafo1 {margin-left: 50%; margin-right: 20px; margin-top: 1em; margin-bottom: 6pt;} .Parrafo2 {margin-right: 50%; margin-top: -3em;} Se aplican al prrafo que sigue: Este es el primer prrafo de prueba. Para cada margen hemos usado una medida distinta, pero la nica que requiere cierta explicacin es el porcentaje usado para margin-left: los valores de porcentaje se refieren al bloque de contencin, es decir, la caja del elemento padre. En este caso, el elemento padre de este prrafo es <BODY>, entonces su margen izquierdo ser la mitad del ancho de la pantalla. A este segundo prrafo le hemos cambiado el color para distinguirlo del primero porque, debido al margen superior negativo (margintop: -3em), comienza ms arriba que la ltima lnea del anterior. Para evitar que se superpongan, hemos usado margin-right: 50%, de modo que su margen derecho coincide con el margen izquierdo del prrafo anterior. Los mrgenes que no han sido definidos (left y bottom) toman el valor inicial de la propiedades, es decir 0 (cero).

Vamos a usar un prrafo dentro de la celda de una tabla para ver el efecto de especificar la propiedad

resumida "margin" con 1, 2, 3 y 4 valores. Si se especifica un solo valor: margin: 2px, este se aplica a los cuatro lados del prrafo: Un prrafo con margin: 2px Con dos valores especificados: margin: 20px 8px, el primero (20px) se aplica a los mrgenes superior e inferior, el segundo (8px) se aplica a los mrgenes derecho e izquierdo:

Un prrafo con margin: 20px 8px

Especificando tres valores, margin: 2em 12px 24px, se aplican en este orden: El primero (2em) al margen superior, el segundo (12px) al derecho e izquierdo, y el tercero (24px) al inferior. Como se ve, se pueden usar distintas unidades de medida para cada valor: Un prrafo con margin: 2em 12px 24px

Finalmente, especificando cuatro valores, margin: 8px 0px 16px 24px, estos se aplican en este orden: arriba(8px), derecha(0px), abajo(16px), izquierda(24px).

Un prrafo con margin: 8px 0px 16px 24px

Cerrar

Propiedades del relleno

Vamos a usar un prrafo con las siguientes reglas de estilo: .Parrafo1 {padding-left: 50%; padding-right: 20px; padding-top: 1em; padding-bottom: 6pt; background-color: yellow; border: 1px solid;}

A este prrafo le hemos aplicado las cuatro propiedades individuales para el relleno y para cada lado hemos usado una unidad de medida distinta. Cuando se usa un porcentaje (como en padding-left) ste se refiere al ancho del bloque de contencin, es decir, a la caja del elemento padre (en este ejemplo, es <BODY>). Como el color de fondo del relleno es igual a la propiedad "background" del elemento, hemos usado esta propiedad para definir un color amarillo de fondo.

En los siguientes prrafos se puede observar el efecto de usar la propiedad resumida "padding" con 1, 2, 3 y 4 valores. Si se especifica un solo valor: padding: 2px, este se aplica a los cuatro lados del prrafo: Un prrafo con padding: 2px

Con dos valores especificados: padding: 20px 8px, el primero (20px) se aplica a los rellenos superior e inferior, el segundo (8px) se aplica a los rellenos derecho e izquierdo:

Un prrafo con padding: 20px 8px

Especificando tres valores, padding: 2em 12px 24px, se aplican en este orden: El primero (2em) al relleno superior, el segundo (12px) al derecho e izquierdo, y el tercero (24px) al inferior. Como se ve, se pueden usar distintas unidades de medida para cada valor:

Un prrafo con padding: 2em 12px 24px

Finalmente, especificando cuatro valores, padding: 8px 0px 16px 24px, estos se aplican en este orden: arriba(8px), derecha(0px), abajo(16px), izquierda(24px). Un prrafo con padding: 8px 0px 16px 24px

Cerrar

Border-width
Vamos a usar un prrafo con las siguientes reglas de estilo para especificar el ancho de sus bordes. Tambin definimos border-style: solid para que sea visible (el valor inicial para el estilo del borde es none). .Parrafo1 {border-top-width: thin; border-right-width: medium; border-bottom-width: thick; border-left-width: 4px; border-style: solid;} Este es el prrafo de prueba. Tiene un borde superior fino (thin), un borde derecho de grosor medio (medium), uno inferior grueso (thick) y un borde izquierdo de 4 pixeles. Cada navegador puede usar distintos grosores para thin, medium y thick pero siempre resultar uno ms ancho que el anterior (en ese orden, por supuesto). Para el borde izquierdo usamos una medida especfica (4 pixeles) que puede darnos una idea, por comparacin, de cules son los grosores que usa el navegador para las palabras clave anteriores. Observen que al no tener relleno (padding), los bordes tocan el contenido del prrafo. En los siguientes prrafos se puede observar el efecto de usar la propiedad resumida "border-width" con 1, 2, 3 y 4 valores. Si se especifica un solo valor: border-width: thin, este se aplica a los cuatro lados del prrafo: Un prrafo con border-width: thin Con dos valores especificados: border-width: thin thick, el primero (thin) define el grosor de los bordes superior e inferior, el segundo (thick) los bordes derecho e izquierdo: Un prrafo con border-width: thin thick Especificando tres valores, border-width: thin medium thick , se aplican en este orden: El primero (thin)

al borde superior, el segundo (medium) al derecho e izquierdo, y el tercero (thick) al inferior. Un prrafo con border-width: thin medium thick Finalmente, especificando cuatro valores, border-width: 2px medium 8px 12px, estos se aplican en este orden: arriba(2px), derecha(medium), abajo(8px), izquierda(12px). Un prrafo con border-width: 2px medium 8px 12px

Cerrar

Border-color
Las propiedades de color del borde se rigen con normas muy similares a las del ancho del borde, por eso vamos a aprovechar esta pgina para observar algunos efectos que se pueden conseguir usando las propiedades de los mrgenes, rellenos y bordes que hemos visto hasta el momento. .Parrafo1 {margin: 0 25%; padding: 8px; border-width: thin thick thick thin; border-color: blue navy navy blue; border-style: solid; background: #CCCCFF;} Este es el prrafo de prueba. Por medio de la propiedad resumida "margin" le hemos definido sus mrgenes superior e inferior iguales a cero (0) y los mrgenes izquierdo y derecho de un 25% del ancho de su bloque de contencin (BODY, en este caso). Con "padding" le aplicamos un relleno de 8 pixeles en todos sus lados. Con "border-width" le pusimos los bordes superior e izquierdo finos, y los bordes derecho e inferior gruesos. Con "border-color" le dimos un color azul a los bordes finos y un azul marino a los bordes gruesos. Finalmente usamos dos propiedades que an no hemos visto en esta gua: "border-style: solid" para que el borde sea visible y le dimos un color azul claro al fondo mediante la propiedad "background" (este color tambin define el color de fondo del relleno). Con algunos pequeos cambios en la hoja de estilo anterior, vamos a hacer que nuestro prrafo d la impresin de estar incrustado en la pgina:

.Parrafo2 {margin: 0 25%; padding: 8px; border-width: medium thin thin medium; /* era thin thick thick thin */ border-color: navy blue blue navy; /* era blue navy navy blue */ border-style: solid; background: #FFFFFF;} /* era #CCCCFF */ En el prrafo anterior, usando bordes de distinto grosor y color, conseguimos que diera la sensacin de estar sobresaliendo de la pgina. Con algunos pocos cambios en las propiedades "border-width" y "border-color" logramos el efecto contrario, haciendo aparecer al prrafo como si estuviera metido dentro de la pgina. Para reforzar el efecto usamos un fondo blanco.

Cerrar

Border-style
Estos son los distintos estilos de borde que podemos usar para las cajas (todos con un ancho de borde de 4 pixeles). No se incluyen ejemplos de los valores "none" y "hidden" porque razones obvias. Un prrafo con border-style: dotted

Un prrafo con border-style: dashed

Un prrafo con border-style: solid

Un prrafo con border-style: double

Un prrafo con border-style: groove

Un prrafo con border-style: ridge

Un prrafo con border-style: inset

Un prrafo con border-style: outset

Cerrar

Propiedades del fondo

Background-color
Con las siguientes reglas definimos el color de fondo para BODY, H1 y P. BODY {background-color: #99ff99} H1 {background-color: yellow } P {background-color: white } Ver Cerrar

Background-image

Con las siguientes reglas vamos a usar la primer imagen como fondo para BODY y la segunda imagen para el fondo de H1. BODY {background-color: #FFCC33; background-image: url(bg-flecha.gif) } H1 {background-image: url(bg-tile2.gif) }

Ver La imagen de la flecha usada para BODY tiene zonas transparentes, de modo que el color de fondo de Body se ve a travs de esas zonas transparentes. Si cambiamos el color de fondo obtenemos otro efecto: BODY { background-color: #CCCCCC; background-image: url(bg-flecha.gif) } Ver Cerrar

Background-repeat
El valor inicial de "background-repeat" es "repeat" por eso en los ejemplos anteriores la imagen de fondo se repite en sentido horizontal y vertical formando un mosaico. Para que la imagen se repita solamente en sentido horizontal debemos usar: BODY { background-color: #CCCCCC; background-image: url(bg-flecha.gif); background-repeat: repeat-x; } Ver Para que la imagen se repita solamente en sentido vertical debemos usar: BODY { background-color: #CCCCCC; background-image: url(bg-flecha.gif);

background-repeat: repeat-y; } Ver Finalmente, para que la imagen aparezca solamente una vez debemos usar: BODY { background-color: #CCCCCC; background-image: url(bg-flecha.gif); background-repeat: no-repeat; } Ver Cerrar

Background-attachment
Habiendo especificado una imagen de fondo, podemos hacer que el mismo permanezca fijo cuando se efecta un desplazamiento en la pgina: BODY { background-color: #FFCC33; background-image: url(bg-flecha.gif); background-attachment: fixed; } Ver Con la siguiente regla hacemos que el fondo se desplace junto con el contenido del documento:

BODY { background-color: #FFCC33; background-image: url(bg-flecha.gif); background-attachment: scroll; } Ver Cerrar

Propiedades del fondo

Background-position

Vamos a ubicar esta imagen de fondo con los siguientes valores de porcentaje. En este caso no la repetimos para poder observar bien la posicin pero si no usramos "no-repeat" la imagen comenzara a repetirse desde la ubicacin que le hemos dado. BODY {background-color: #9999FF; background-image: url(bg-mancha.gif); background-repeat: no-repeat; background-position: 25% 75%; } Ver En este caso ubicamos la imagen usando un par de valores expresados en pixeles (la ubicacin horizontal es negativa). BODY {background-color: #9999FF; background-image: url(bg-mancha.gif); background-repeat: no-repeat; background-position: -16px 64px; } Ver

A continuacin usaremos algunas combinaciones de palabras clave. right top y top right BODY {background-color: #9999FF; background-image: url(bg-mancha.gif); background-repeat: no-repeat; background-position: top right; } Ver left, left center y center left BODY {background-color: #9999FF; background-image: url(bg-mancha.gif); background-repeat: no-repeat; background-position: left center; } Ver bottom, bottom center y center bottom BODY {background-color: #9999FF; background-image: url(bg-mancha.gif); background-repeat: no-repeat; background-position: bottom center; } Ver

Cerrar

Background
Usando esta propiedad resumida vamos a definir el color de fondo y una imagen ubicada en el centro de la pgina que se repite en sentido vertical: BODY {background: #9999FF url(bg-mancha.gif) repeat-y center } Ver Cerrar

Display: none
Vamos a usar dos imgenes para demostrar la propiedad display: Imagen 1. Display=inline

Imagen 2. Display=none

La segunda imagen no es visible y el espacio es ocupado por el contenido que est a continuacin (este prrafo y los siguientes). Cerrar

Utilizacin en scripts
Este es un ejemplo muy sencillo del uso que puede tener el valor none para la propiedad display en JavaScript. Se trata de un prrafo normal que al recibir un click esconde o muestra alternativamente el contenido de un elemento DIV. HACER CLICK AQU PARA OCULTAR O MOSTRAR Este prrafo est contenido dentro de un DIV al cual, mediante JavaScript, se le cambia la propiedad display para que sea visible si est oculto o para que desaparezca si est visible. Cuando no es visible, el lugar que ocupaba es llenado por el contenido que est a continuacin en la pgina.

Estas son las propiedades usadas: <p style="cursor:s-resize" onClick="Alternar(seccion1)"> HACER CLICK AQU PARA OCULTAR O MOSTRAR </p> <div id="seccion1" style="display:"> Este prrafo est contenido dentro de un DIV... </div> Cuando se seala el primer prrafo, el cursor del ratn se transforma en una flecha hacia abajo [cursor: sresize] para indicar visualmente la accin. Al hacer un click en el prrafo se llama a la funcin Alternar del script y se identifica al DIV que se va a ocultar o mostrar [onClick="Alternar(seccion1)"]. El DIV tiene un nombre nico [ID="seccion1"] que se usa como parmetro al llamar la funcin Alternar y la propiedad display sin ningn valor. Ahora, ste es el script: function Alternar(Seccion){ if (Seccion.style.display=="none"){Seccion.style.display=""} else{Seccion.style.display="none"} } Lo que hace es verificar si el elemento que se pasa como argumento (en este ejemplo es seccion1) tiene el valor none para la propiedad display [if (Seccion.style.display=="none")] y en ese caso le elimina el valor none [{Seccion.style.display=""}], en caso contrario le pone el valor none al elemento [else {Seccion.style.display="none"}].

Este script slo funciona en IExplorer 4 superior y no pretende ensear el uso de JavaScript sino una

posible aplicacin de la propiedad display. Lo interesante en este caso es que casi todo puede resolverse mediante el uso de estilos, por ejemplo el prrafo que acta como disparador de la funcin tiene asignada la propiedad cursor:s-resize para que haya alguna indicacin visual sin la necesidad de usar un link en el prrafo. De igual modo, el script se resuelve sencillamente cambiando el valor de la propiedad display sin necesidad de apelar a ningn otro recurso. Desgraciadamente, Netscape implementa de otro modo el modelo de objeto del documento (DOM) por lo que el Script de esta pgina no funciona en l. Esto es importante saberlo, ya que si definiramos en el DIV [<div id="seccion1" style="display:none">] ste sera inicialmente invisible y los usuarios de Netscape u otro navegador que no pueda procesar el script no veran el contenido del DIV. Implementar un script que funcione en ambos navegadores es una tarea un tanto compleja. Para quienes estn interesados en el tema he incluido una pgina con un ejemplo de menes desplegables perteneciente a Thomas Brattli (www.bratta.com) que obtuve de su pgina. El autor permite el uso de su trabajo con la condicin de que se mantenga intacto el mensaje inicial del script, de modo que pueden modificarlo a su gusto y utilizarlo sin inconvenientes (he traducido los comentarios para facilitarles ese trabajo). Pueden visitar la pgina Brattli para obtener otros ejemplos de JavaScript que podrn usar en sus pginas, en cuyo caso recuerden dejar el aviso que indica de donde los obtuvieron (no nos cuesta nada y es una forma de agradecerle su ayuda).

Cerrar

Position: relative
(P1) Con esta propiedad desplazamos un elemento de la posicin que ocupara normalmente. (P2) A continuacin, vamos a repetir este prrafo y el anterior (marcados P1 y P2) pero usaremos las siguientes propiedades para P2: .p2 {position: relative; top: -2em; left: 80px; }

(P1) Con esta propiedades desplazamos un elemento prrafo y el anterior (marcados P1 y P2) pero usaremos las (P2) A continuacin, vamos a repetir este de la posicin que ocupara normalmente. siguientes propiedades para P2:

.p2 {position: relative; top: -2em; left: 80px; }

Podemos observar en el segundo caso cmo P2 ha sido desplazado de su posicin normal. Con top: -2em y left: 80px, lo movemos 2em hacia arriba (superponindolo en parte con P1) y 80px hacia la derecha. Sin embargo, no afecta la posicin del elemento siguiente (el elemento PRE, en rojo) que viene a continuacin y que mantiene su ubicacin normal.

Cerrar

Position: absolute
En este ejemplo vamos a usar un elemento DIV que contiene la imagen de una mancha azul con las siguientes propiedades: DIV#ejemplo { position: absolute; top: 10px; left: 300px} Si observa el cdigo de esta pgina, el DIV que contiene la imagen est ubicado justo antes de este prrafo, pero, como el bloque de contencin de este DIV es la pgina (el elemento BODY), la imagen aparecer a 10px por debajo y a 300px hacia la derecha de la esquina superior izquierda de la pgina. Ahora bien, si el DIV de nuestro ejemplo se encontrara incluido dentro de otro DIV posicionado, este ltimo se convertira en el bloque de contencin y entonces la imagen se ubicara con relacin a l (y no con respecto a la pgina).

Este DIV, que tiene un fondo gris para su identificacin, est posicionado relativamente. Esto no significa necesariamente que deba ser movido de su ubicacin normal, simplemente basta que tenga asignada la propiedad position: relative para que se convierta en el bloque de contencin de nuestro ejemplo. De este modo, la imagen se ubica a 10px por debajo y a 300px hacia la derecha de la esquina superior izquierda de este DIV (no ya de la pgina). (En el cdigo, el DIV aparece justo antes de este prrafo)

Para confirmar, vamos a utilizar un elemento DIV como el anterior pero sin definir su posicin y dentro de l otro DIV con la imagen de una flecha y estas propiedades: DIV#ejemplo2 { position: absolute; top: 10px; left: 430px} Esto es lo que sucede: el DIV con la imagen de una flecha amarilla se ubicar con relacin a la esquina superior izquierda de la pgina (a continuacin de la imagen de la mancha) porque este DIV no est posicionado. (En el cdigo, el DIV aparece justo antes de este prrafo) Esto debe quedar en claro: la ubicacin de un elemento con position:absolute se fija con respecto a la esquina superior izquierda de la pgina, a menos que ese elemento tenga un antepasado posicionado (es decir, con un valor relative, absolute o fixed para position), en cuyo caso su posicin se fija con respecto a la esquina superior izquierda de ese antepasado. Se debe tener en cuenta que el valor absolute (como as tambin fixed) provocan que el elemento no tenga ninguna influencia sobre los elementos siguientes. Veamos un ejemplo: a continuacin tenemos cuatro prrafos, el primero y el tercero tienen la propiedad position. Para el primero, el valor de position es relative y para el tercero es absolute. No se usa ninguna otra propiedad (salvo el color, para diferenciarlos) de modo que ambos prrafos mantienen su posicin dentro del documento. Un prrafo con position:relative Otro prrafo Un prrafo con Otro prrafo position: absolute Lo que sucede es que el tercer prrafo (position:absolute), a pesar de mantener la misma posicin, ha sido quitado del flujo normal de la pgina y el prrafo siguiente ocupa su lugar (provocando la superposicin de

ambos).

Cerrar

Position: fixed
Vamos a crear un elemento DIV con las siguientes propiedades: #cabecera { position: fixed; width: 100%; height: 48px; top: 0; left: 0; background-color: #99FFFF; } Este es el DIV que se ubicar en la cabecera de la pgina. En el cdigo de la pgina, el DIV con position:fixed est ubicado junto antes de este prrafo. El resultado es un rectngulo celeste que abarca todo el ancho de la pgina ubicado en la parte superior de la misma. Al hacer un desplazamiento (scroll), el rectngulo se mantiene en su posicin, logrndose el mismo efecto que con el uso de marcos (frames). ... ... ... ... ... ...

...

Cerrar

Desplazamientos: top, right, bottom, left

Para ejemplificar estas propiedades, vamos a ubicar esta imagen dentro de un elemento DIV. A su vez, ese DIV estar contenido por otro -con fondo gris- al que le hemos asignado la propiedad position:relative, de modo que resulte el bloque de contencin para los de la imagen. ej1 {position: absolute; top: 50%; left: 50%; }

Notarn que la imagen no aparece perfectamente centrada a pesar de haber usado un porcentaje de 50%. Esto es as porque el elemento que contiene la imagen no se alinea por su centro sino por su borde superior (para top) y por su borde izquierdo (para left). Veamos el mismo porcentaje pero con bottom y right: DIV {position: absolute; bottom: 50%;

right: 50%; }

En este segundo caso, es el vrtice inferior derecho de la imagen el que queda ubicado exactamente en el centro del bloque de contencin. Con el uso de valores negativos podemos hacer que la imagen se ubique por fuera de su bloque de contencin. DIV {position: absolute; bottom: -23px; left: -23px; }

Cerrar

La propiedad 'z-index'
En los casos en que dos elementos queden superpuestos, podemos determinar el orden en que se "apilarn". En este caso, vamos a usar como ejemplo a dos prrafos: este mismo y el siguiente, con fondo amarillo y una imagen centrada.

Repetimos los dos prrafos anteriores pero haciendo que se superpongan. Para eso, le aplicamos al primero las propiedades: position:relative y z-index: 0, y al segundo: position:relative, top: -3em y zindex: 1. En los casos en que dos elementos queden superpuestos, podemos determinar el orden en que se "apilarn". En este caso, vamos a usar como ejemplo a dos prrafos: este mismo y el siguiente, con fondo amarillo y una imagen centrada.

Vemos que el segundo prrafo se superpone con el primero y queda al frente al tener z-index=1. En realidad, aunque no hubisemos usado la propiedad z-index igualmente qudara por encima al estar ubicado a continuacin dentro del cdigo de la pgina, pero de este modo nos aseguramos su orden dentro de la pila. Para hacer que quede por debajo, usamos las mismas propiedades pero con un valor z-index: 2 para el primer prrafo. En los casos en que dos elementos queden superpuestos, podemos determinar el orden en que se "apilarn". En este caso, vamos a usar como ejemplo a dos prrafos: este mismo y el siguiente, con fondo amarillo y una imagen centrada.

Cerrar

La propiedad 'float'
El efecto de esta propiedad es bastante simple pero resulta muy til para que el diseo de la pgina se adapte al monitor del usuario. Lo que hace la propiedad es quitar al elemento del flujo normal de la pgina y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado). En este ejemplo, el ttulo tiene float:none y mantiene su posicin normal.

La propiedad 'float'El efecto de esta propiedad es bastante simple pero resulta muy til para que
el diseo de la pgina se adapte al monitor del usuario. Lo que hace la propiedad es quitar al elemento del flujo normal de la pgina y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado). En este ejemplo, el ttulo tiene float:left y se coloca a la izquierda de este prrafo.

El efecto de esta propiedad es bastante simple pero resulta muy til para que La propiedad 'float' el diseo de la pgina se adapte al monitor del usuario. Lo que hace la propiedad es quitar al elemento del flujo normal de la pgina y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado). En este ejemplo, el ttulo tiene float:right y se coloca a la derecha de este prrafo. Cerrar

La propiedad clear
Esta propiedad complementa a la anterior. Con clear se especifica que un elemento no admite un flotante

sobre su izquierda, sobre su derecha o a ambos lados. Tambin se la puede usar en un elemento flotante para impedir que otros flotantes puedan quedar sobre algunos de sus costados.

Veamos este ejemplo: el DIV con la imagen de la flecha tiene la propiedad float:left, de modo que se ubicar a la izquierda de este prrafo.

Ahora, el DIV con la imagen de la flecha tiene la propiedad float:left pero este prrafo tiene clear:left, de modo que no admite un elemento flotante a su izquierda. El resultado es que la imagen se ubica por encima del prrafo.

Ahora tenemos dos elementos DIV con dos imgenes, ambos tienen la propiedad float:left. El efecto es que ambas se ubican a la izquierda de este prrafo. Debido a las reglas para los flotantes, primero se ubica la flecha sobre la izquierda y luego la mancha (que tambin flota a la izquierda) se ubica sobre su derecha.

Se repite el caso anterior, pero ahora el DIV con la imagen azul tiene la propiedad clear:left, de modo que no admite a otro flotante sobre su izquierda. El resultado es que ambas imgenes quedan sobre la izquierda de este prrafo, pero esta vez una imagen encima de la otra.

Cerrar

'overflow'
La propiedad 'overflow' se aplica a los elementos de bloque (por ejemplo: BLOCKQUOTE, DIV, H1/H6, HR, P, PRE) y tambin a los elementos reemplazados (como IMG). Primero vamos a crear un elemento <PRE> que tiene asignadas las siguientes propiedades: PRE { background-color: #FFFFCC; color: blue; border: 1px solid green; width: 50%; height: 12em; } A: ABBR: ACRONYM: ADDRESS: AREA: B: Enlace de hipertexto o destino de un link Abreviatura Acrnimo Direccin Area de un mapa de imagen Texto en negritas

El elemento ocupa un 50% del ancho de la pgina y una altura aproximada al doble del texto que contiene. Repetimos el ejemplo, esta vez reduciendo su tamao a la mitad (width: 25%; height: 6em): A: Enlace de hipertexto o destino de un link ABBR: Abreviatura ACRONYM: Acrnimo

ADDRESS: Direccin AREA: Area de un mapa de imagen B: Texto en negritas Esto es lo que sucede: el fondo de color indica el tamao que tiene el elemento; en el segundo caso (segn la resolucin de su monitor, puede suceder tambin en el primer caso) el contenido sobresale de ese fondo. En esos casos, se dice que el contenido est desbordando la caja que lo contiene. Como el valor inicial para la propiedad 'overflow' es 'visible', el texto que desborda es procesado fuera de la caja del elemento <PRE>. Ahora, repetimos el segundo ejemplo aplicando los otros valores que puede tener 'overflow': Con overflow: hidden A: ABBR: ACRONYM: ADDRESS: AREA: B: Enlace de hipertexto o destino de un link Abreviatura Acrnimo Direccin Area de un mapa de imagen Texto en negritas

Con overflow: scroll A: ABBR: ACRONYM: ADDRESS: AREA: B: Enlace de hipertexto o destino de un link Abreviatura Acrnimo Direccin Area de un mapa de imagen Texto en negritas

Con overflow: auto

A: ABBR: ACRONYM: ADDRESS: AREA: B:

Enlace de hipertexto o destino de un link Abreviatura Acrnimo Direccin Area de un mapa de imagen Texto en negritas

El valor hidden provoca que el texto que desborda la caja sea recortado, de modo que slo pueda verse una parte del mismo. Los valores scroll y auto tambin recortan el texto pero aparecen unas barras de desplazamiento que permiten hacer un scroll para ver las partes ocultas.

Cerrar

'clip'
Con la propiedad 'clip' podemos especificar un rea de recorte para los los elementos de bloque y los elementos reemplazados. Si el rea es menor que el elemento, una parte de ste quedar desbordando la caja y con 'overflow' podemos definir si el contenido que desborda debe quedar visible, oculto o debe tener un mecanismo de scroll para desplazarlo. Para esta prueba vamos a utilizar una imagen y un elemento <PRE>, ambos con una medida de 200px de ancho y 200px de alto:

A: Enlace de hipertexto o destino de un link ABBR: Abreviatura ACRONYM: Acrnimo ADDRESS: Direccin AREA: Area de un mapa de imagen B: Texto en negritas BASE: URI de base del documento BDO: Sustitucin del algoritmo de bidireccionalidad

BIG: BODY:

Texto ms grande Cuerpo del documento

Ahora los repetimos, esta vez usando las propiedades: clip: rect(0,100px,100px,0); overflow: hidden;

A: Enlace de hipertexto o destino de un link ABBR: Abreviatura ACRONYM: Acrnimo ADDRESS: Direccin AREA: Area de un mapa de imagen B: Texto en negritas BASE: URI de base del documento BDO: Sustitucin del algoritmo de bidireccionalidad BIG: Texto ms grande BODY: Cuerpo del documento

<p class="n

'visibility'
A continuacin de este prrafo tenemos una imagen:

A continuacin de este prrafo tenemos la misma imagen, pero esta vez con visibility:hidden.

La segunda imagen es invisible pero contina ocupando su lugar dentro de la pgina. Cerrar

Utilizacin en scripts
Vamos a implementar un pequeo ejemplo en JavaScript: Layer 1 Layer 2 <SPAN onmouseover="NoVer(test

Cursores
La siguiente tabla muestra los distintos valores para la propiedad 'cursor' aplicados a un prrafo, un link y a una imagen. El cursor del ratn debe cambiar su forma al pasar por encima de ellos. Prrafos auto auto Enlaces Imgenes

crosshair

crosshair

default

default

pointer

pointer

move

move

e-resize

e-resize

ne-resize

ne-resize

nw-resize

nw-resize

n-resize

n-resize

se-resize

se-resize

sw-resize

sw-resize

s-resize

s-resize

w-resize

w-resize

text

text

wait

wait

help

help

<uri>

<uri>

Cerrar

Contornos dinmicos: 'outline'

En esta pgina tenemos un formulario (FORM) con tres reas para entrada de texto (INPUT) y dos botones (BUTTON). Ms abajo, una imagen que contiene un mapa de imagenes (MAP) que define dos zonas activas (AREA). Por ltimo tenemos un par de enlaces (A). A todos estos elementos le vamos a aplicar la siguiente regla de estilo: FORM, INPUT, BUTTON, MAP, AREA, A { outline: red solid 2px } Al recibir el foco, cada uno de estos elementos deben ser rodeados por un contorno de color rojo con una lnea llena de 2px de grosor. Para rotar el foco entre los distintos elementos se puede utilizar la tecla de tabulacin (TAB).

Nombre: Apellido: Edad: OK Borrar aos

Cerrar

Comillas: la propiedad 'quotes'

En la composicin de textos es costumbre, cuando la cita abarca varios prrafos, utilizar comillas de apertura en cada prrafo y una comilla de cierre en el prrafo final, como cierre de la cita. En vez de escribir esas comillas en el documento, vamos a hacer que la hoja de estilo las inserte en los lugares adecuado: BLOCKQUOTE P:before { content: open-quote; color:red; font-weight:bold } BLOCKQUOTE P:after { content: no-close-quote } BLOCKQUOTE P.ultimo:after { content: close-quote; color:red; font-weight:bold } El elemento BLOCKQUOTE comienza a continuacin, con un texto de J.L.Borges:
Ahora es invulnerable como los dioses. Nada en la tierra puede herirlo, ni el desamor de una mujer, ni la tisis, ni las ansiedades del verso, ni esa cosa blanca, la luna, que ya no tiene que fijar en palabras. Camina lentamenten bajo los tilos; mira las balaustradas y las puertas, no para recordarlas. Ya sabe cuantas noches y cuantas maanas le faltan. Su voluntad le ha impuesto una disciplina precisa. Har determinados actos, cruzar previstas esquinas, tocar un rbol o una reja, para que el porvenir sea tan irrevocable como el pasado. Obra de esa manera para que el hecho que desea y que teme no sea otra cosa que el trmino final de una serie. (...) En la hora fijada, subir por unos escalones de mrmol. (Esto perdurar en la memoria de otros.) Bajar al lavatorio; en el piso ajedrezado el agua borrar muy pronto la sangre. El espejo lo aguarda.

Se alisar el pelo, se ajustar el nudo de la corbata (siempre fue un poco dandy, como cuadra a un joven poeta) y tratar de imaginar que el otro, el del cristal, ejecuta los actos y que l, su doble, los repite. La mano no le temblar cuando ocurra el ltimo. Dcilmente, mgicamente, ya habr apoyado el arma contra la sien. As, lo creo, sucedieron las cosas.

Antes de cada prrafo se insertarn comillas (de color rojo y en negritas para su mejor visualizacin) y solamente el ltimo tendr comillas de cierre (como no hay selector para seleccionar el ltimo descendiente de un elemento, debemos apelar a una clase (ultimo).

Podemos definir distintos tipos de comillas segn nuestra preferencia o el idioma de la cita. En el prximo prrafo aplicaremos la siguiente regla de estilo: Q { quotes: '"' '"' "'" "'" } Q:before { content: open-quote; color:red; font-weight:bold } Q:after { content: close-quote; color:red; font-weight:bold } Borges escribi: El captulo que habla de Cristo no es efusivo. Se limita a invocar dos lugares de la Escritura: la frase doy mi vida por las ovejas (Juan, 10:15) y la curiosa locucin di el espritu, que usan los cuatro evangelios para decir muri, en El Biathanatos. Las comillas que aparecen (en negritas de color rojo) son insertadas automticamente antes y despus de cada elemento <Q>. Al existir comillas anidadas (unas dentro de otras), para el nivel externo se usan comillas dobles ("), y simples (') para las interiores. Vamos a repetir el ejemplo cambiando el tipo de comillas: Q { quotes: "" "" "" "" } Q:before { content: open-quote; color:red; font-weight:bold } Q:after { content: close-quote; color:red; font-weight:bold } Borges escribi: El captulo que habla de Cristo no es efusivo. Se limita a invocar dos lugares de la Escritura: la frase doy mi vida por las

ovejas (Juan, 10:15) y la curiosa locucin di el espritu, que usan los cuatro evangelios para decir muri, en El Biathanatos. En un documento que contiene textos en distintos idiomas es posible definir un tipo de comillas para cada idioma. Si queremos que los textos en francs de una pgina usen el estilo de comillas usuales en ese idioma, se debe usar esta regla: [LANG|=fr] > * { quotes: "" "" "" "" }

Cerrar

Contadores
Supongamos que en una pgina debemos desarrollar un tema con varias secciones que incluyen distintas sub-secciones compuestas por prrafos. Para numerar las secciones y sub-secciones deberamos escribir el nmero de orden antes de cada ttulo y subttulo; si se alterara el orden de las secciones deberamos nuevamente modificar esos nmeros para que coincidieran con la nueva organizacin. Demasiado complicado. Es aqu donde de advierte el beneficio del contenido generado por las CSS: podemos hacer que cada antes de cada ttulo y subttulo se inserte el nmero de orden, de modo que si la composicin sufre algn cambio no deberemos preocuparnos por numerar nuevamente el trabajo "a mano". A continuacin del siguiente ejemplo, estn las reglas de estilo y su explicacin. Primer ttulo
Primer subttulo del primer ttulo
Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

Segundo subttulo del primer ttulo

Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

Este tema no tiene un ttulo (en realidad lo nico que contiene es un espacio en blanco) pero s aparece el texto generado por la hoja de estilo (Tema X.)

Primer subttulo del segundo ttulo

Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

Segundo subttulo del segundo ttulo

Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

Tercer ttulo
Primer subttulo del tercer ttulo
Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

Segundo subttulo del tercer ttulo

Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

H1:before { content: "Tema " counter(seccin) ". "; counter-increment: seccin; counter-reset: sub-seccin; } H2:before { content: counter(seccin) "." counter(sub-seccin) " "; counter-increment: sub-seccin; } Explicacin: H1:before { content: "Tema " counter(seccin) ". " Antes de cada ttulo se inserta la cadena de texto "Tema ", seguida del contador que hemos denominado seccin, seguido de la cadena ". " (punto y espacio). counter-increment: seccin Se incrementa en 1 el contador seccin (Cada vez que aparece un elemento <H1> el nmero del contador suma 1). counter-reset: sub-seccin Se vuelve a cero el contador para <H2> (que llamamos sub-seccin), as cada vez que hay un subttulo (<H2>) comienza desde 1. H2:before { content: counter(seccin) "." counter(sub-seccin) " " Antes de cada elemento <H2> se inserta el contador seccin, luego un punto, luego el contador subseccin y luego un espacio en blanco. counter-increment: sub-seccin

Se incrementa el contador sub-seccin en 1. Si quisiramos un incremento de 2 en 2, por ejemplo, bastara con poner counter-increment: sub-seccin 2 y la numeracin seguira el orden: 1, 1.2, 1.4 ... 2, 2.2, 2.4 ...

Cerrar

Listas
Estas son todas las propiedades que pueden utilizarse con las listas: none:
q q q q q

ItemUno ItemDos ItemTres ItemCuatro ItemCinco

Signos disc:
q q q q q

circle: ItemUno ItemDos ItemTres ItemCuatro ItemCinco

q q q q q

square:
q q q q q

ItemUno ItemDos ItemTres ItemCuatro ItemCinco

ItemUno ItemDos ItemTres ItemCuatro ItemCinco

Sistemas numricos

decimal: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

decimal-leading-zero: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

lower-roman: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

upper-roman: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

hebrew: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

georgian: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

armenian: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

cjk-ideographic: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

hiragana: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

katakana: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

hiragana-iroha: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

katakana-iroha: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

Sistemas alfabticos

lower-latin: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

lower-alpha: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

lower-greek: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

upper-latin: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

upper-alpha: 1. 2. 3. 4. 5. ItemUno ItemDos ItemTres ItemCuatro ItemCinco

Cerrar

Medidas absolutas pt (puntos)

Unidad de medida utilizada en tipografa. Cada punto equivale a 1/72 pulgada. Esta es una fuente de 12 puntos de tamao.

Esta es una fuente de 14 puntos de tamao.

Esta es una fuente de 16 puntos de tamao.

Esta es una fuente de 18 puntos de tamao.

pc (picas)
Unidad de medida utilizada en tipografa. La pica equivale a 12 puntos. Esta es una fuente de 1 pica de tamao (igual a 12pt).

Esta es una fuente de 1.2 pica de tamao (igual a 14.4pt).

Esta es una fuente de 1.5 pica de tamao (igual a 16pt).

mm (milmetros), cm (centmetros)
Esta es una fuente de 4mm (0.4cm).

Esta es una fuente de 7mm (0.7cm).

Esta es una fuente de 10mm (1cm).

Esta barra azul tiene 1cm de ancho (10mm). Esta barra azul tiene 8.5cm de ancho (85mm).

in (pulgadas)
La pulgada equivale a 2.54 centmetros.

Esta es una fuente de 0.4 pulgadas.

Esta barra azul tiene 3.5cm de ancho (8,89cm).

Medidas relativas

em (cuadrado em)
Medida usada en tipografa que corresponde al tamao de fuente asignada al elemento o heredada por l (en castellano se la llama "cuadratn"). Ver la ilustracin de arriba.

12pt. Como este prrafo hereda esa propiedad, la medida em corresponde a 12pt. Los elementos <B> de la pgina tienen en cambio 1.5em (18pt). Esta barra azul tiene
1em de ancho.

El elemento <BODY> de esta pgina tiene asignado font-size:

Este prrafo tiene asignado font-size:

16pt,entonces em es igual a 16pt y los elementos

<B> miden 24pt (1.5em).

del prrafo anterior).

Esta barra azul tambin tiene 1em de ancho (comparar con la

Por ser una medida relativa, em vara de acuerdo al tamao de la fuente relevante. En el primer caso, el prrafo hereda la fuente del elemento padre <BODY>. En el segundo caso, hemos reemplazado ese valor al asignarle la propiedad "font-size: 16pt" al prrafo y de este modo, em tiene un tamao mayor.

ex (altura de la x)
Medida usada en tipografa que corresponde que corresponde a la altura de las minsculas sin acentos ni rasgos ascendentes (se toma la letra x como referencia, pero esta medida existe an para las fuentes que no tienen la x). Ver la ilustracin de arriba. La relacin de altura entre las minsculas y las maysculas vara en cada diseo de alfabeto. Por ejemplo, suponiendo un valor de 100 para las maysculas, en la tipografa Verdana las minsculas miden 58, pero en la Times New Roman miden 46. Esta es una prueba de ex. (Verdana) Esta es una prueba de ex. (Times New Roman) Esta es una prueba de ex. (Trabuchet MS) Esta es una prueba de ex. (Arial) Los cuatro prrafos enteriores tienen como medida 2ex, pero se puede ver que ex es mayor o menor segn la fuente utilizada (deben recordar que si no tienen algunas de estas fuentes instaladas, el navegador las reemplazar por la fuente predeterminada y entonces puede suceder que el prrafo que supuestamente usa Verdana, en realidad est usando Arial en su computadora).

Cerrar

Porcentajes
Si han consultado la seccin sobre Cascada y Herencia entendern la diferencia entre valores especificados y valores computados. Veamos como funciona esta diferencia en los porcentajes. Las siguientes reglas de estilo: P {font-size: 12pt} B {font-size: 200%} Se aplican a esta pgina: <P>Este prrafo tiene un elemento hijo <B>que a su vez tiene <I>otro elemento hijo</I> que hereda </B>su propiedad "font-size". Se aplican a esta pgina: Este prrafo tiene un elemento hijo

que a su vez tiene otro elemento hijo que

hereda su propiedad "font-size".

Aqu se debe observar lo siguiente: <I> es hijo de <B> que a su vez es hijo de <P>. Cada hijo hereda las propiedades de su padre. Entonces <I> heredara "font-size: 200%" de su padre <B> y su texto debera tener el doble de tamao que el de su padre. Pero vemos que ambos tienen igual tamao. Esto es porque, en realidad, <I> no hereda el porcentaje (200%) sino el valor computado de "font-size" de <B> (o sea, 24pt).

Cerrar