Css - Manual_css

5/10/2018 Css - Manual_css - slidepdf.com

http://slidepdf.com/reader/full/css-manualcss 1/227

¡CSS en

acción! Seleccioneotra hoja deestilo paranavegar:Actual:default.css

Ver

explicación

Indice del manualAnterior Siguiente

En este manual, los vínculos acompañados con el ícono indican una página de

prueba para el tema tratado. Con se identifican aquellos que conducen a unapágina de la traducción de la Especificación CSS2.

La Especificación CSS2 es bastante extensa e incluye temas que aún no estándesarrollados en este manual, pero estoy trabajando para cubrir todos los puntos queabarca la especificación.

Al final de la página se encuentran los vínculos que conducen a archivos con listados depropiedades o elementos que pueden resultar útiles para una consulta rápida.

Si usa IExplorer habrá notado el cambio de color en la barra de desplazamiento con elestilo predeterminado. Aquí encontrará la explicación sobre cómo cambiar el color de la

barra.

1. Una introducción al tema de las Hojas de Estilo y su sintaxis. Algunosconceptos avanzados que explican cómo funcionan las CSS.

1. Introducción a las CSS

r Qué son las Hojas de Estilo

r Cómo 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 Introducción

r Cascada

r La regla @import

Home Manual

Default

OK

http://-/?-

http://-/?-



r El orden de la cascada

r La regla !important

s CSS y accesibilidad

s Un truco con las CSS

r Herencia

r Valores especificados, computados y reales

2. Todos los tipos de selectores que es posible usar en las CSS para identificarelementos en la página.

1. Selectores

r Introducción

r Selectores de tipos

r Selectores de clases

r Selectores de ID

r Selectores de atributos

r Selector universalr Agrupamiento

2. Selectores contextuales

r Introducción

r Selectores de descendientes

r Selectores de hijos

r Selectores de hermanos adyacentes

3. Pseudo-clases

r Introducción

r :first-child

r :link y :visitedr :hover, :active y :focus

r :lang

4. Pseudo-elementos

r Introducción

r :first-line

r :first-letter

r :before y :after

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



3. Detalles del modelo de cajas de CSS. Propiedades para definir el color y fondode las cajas.

1. Cajas: márgenes, rellenos y bordes

r Introducción

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 Introducción

r Color del primer plano

r Propiedades del fondo

s Background-color

s

Background-images Background-repeat

s Background-attachment

s Background-position

s Background

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

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



1. El formato visual

r Introducción

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 Introducción

r Ancho del contenido: 'width'

r Anchos mínimo y máximo

s 'min-width'

s 'max-width'

r Altura del contenido: 'height'

r Alturas mínima y máxima

s 'min-height'

s 'max-height'

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

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



1. Efectos visuales

r Introducción

r Desbordamiento: la propiedad 'overflow'

r Recorte: la propiedad 'clip'

r Visibilidad: la propiedad 'visibility'

2. Interfaz del usuario

r Introducción

r Cursores: la propiedad 'cursor'

r Contornos dinámicos: 'outline'

s 'outline-width'

s 'outline-style'

s 'outline-color'

3. Contenido generado

r Introducción

r La propiedad 'content'

r Comillas: la propiedad 'quotes'

r Contadores y numeración automática

Listados útiles y referencias rápidas. Explicación de los valores básicos en CSS.

q Indice de propiedades

q Valores

r Tabla de nombres de colores

r Tablas de colores del sistema

r Paleta Web

q Listado de elementos de HTML 4.0

q Propiedades para las scrollbars (IExplorer solamente)

Volver

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



¡CSS en


Ver

explicación

Cambiando de CSS con un click

¿Cómo demostrar el potencial de las hojas de estilo?

Nada mejor que mostrarlas en acción permitiendo que el usuario elija una CSS entre varias disponibles. Mejor aún, consiguiendo quea partir de ese momento la CSS que escogió siga aplicándose a todas las páginas que visite.

El desafío consiste en utilizar en todo momento la misma página HTML y solamente cambiar la referencia a las distintos archivos .CSScon las hojas de estilo. De este modo es posible observar cómo una página puede ser totalmente alterada en su aspecto visualsencillamente cambiando sus estilos mientras se mantiene intacta su estructura formal.

El problema es guardar de algún modo la selección del usuario y pasar esa información a las páginas antes de que éstas seanmostradas. Bastaría con completar la referencia dentro del encabezado de cada página con el nombre del archivo .CSS elegido:

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

Lógicamente esto no es posible de conseguir con páginas estáticas, de modo que es necesario recurrir a un lenguaje deprogramación, como PHP.

Debo aclarar que para lograr estos cambios de estilo no es imprescindible que las páginas sean archivos PHP. Aquí la programaciónse utilizan solamente para el propósito descripto anteriormente: conservar el nombre del archivo .CSS seleccionado y escribirlo en lareferencia de la página 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 PHPno tiene más intervención que la ya mencionada.

¿Por qué PHP?

Aclaro que no soy un experto en programación ni mucho menos pero me he interesado por PHP para construir aplicaciones webdinámicas por varias razones: es un software de código abierto (se puede obtener gratuitamente) que puede ejecutarse en lasplataformas más usadas (Unix, Linux, Windows, Solaris, etc.).

Además, incluye soporte para un gran número de bases de datos y otras tecnologías como Java y XML y, según dicen quienes saben,

Home CSS2 Manual Autor

Default

OK



es de fácil 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 información específica de un usuario sin necesidad de programar cookies o de realizarllamadas a una base de datos.

En términos temporales, una sesión es la duración de la visita del usuario. En términos de programación es un objeto identificado poruna cadena (por ejemplo: 940f8b05a40d5119c030c9c7745aead9) que puede almacenar todo tipo de variables y valores.

La cadena identificatoria es enviada a la máquina del usuario a través de una cookie llamada PHPSESSID. En el servidor, un archivotemporal coincidente es creado con el mismo nombre. Cada objeto sesión contiene las variables registradas y el archivo creado en elservidor las almacena junto con los valores especificados.

Como estos valores y las variables no son recogidas en una base de datos, no se requiere ningún recurso adicional del sistema.

Manos a la obra

Los ingredientes necesarios son: las páginas HTML, varios archivos .CSS con los distintos estilos que vamos a permitir seleccionar yun servidor con soporte para PHP4 para montar nuestra web (toda receta tiene al menos un ingrediente difícil).

Al comienzo de cada página, antes de cualquier otro código, 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 sesión abierta (if (!$PHPSESSID)) se comienza una y se registra la variable queusaremos luego (session_register('micss')). Luego le asignamos a la variable $micss el valor default que es el nombre denuestro archivo .CSS predeterminado.

http://www.phpbuilder.com/






Así nos aseguramos de que siempre exista una hoja de estilo aplicada a las páginas. Luego se verifica que exista la variable$sel_css (ya veremos cómo se puede definir mediante el formulario de selección) y en ese caso le asignamos su valor a $micss (enlugar de default ).

Repasemos: si no existe una sesión, iniciamos una y registramos la variable $micss. Inmediatamente le asignamos el valor default aesa variable (pero se lo cambiamos si el usuario ha realizado otra selección).

Ahora necesitamos un formulario dentro de las páginas 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 selección es sel_css (la variable cuya existencia comprobamos en el script anterior) y los posibles valores sonlos nombres de los archivos .CSS que hemos preparado.

Observen que la fórmula $PHP_SELF utilizada en la propiedad ACTION es la manera de referenciar la propia página que contiene elformulario. De este modo, cuando el usuario presiona el botón "OK" se vuelve a abrir la página con la nueva variable.

Bien, ya tenemos el modo de cambiar los valores de la variable $micss según la elección del usuario pero ¿dónde la usamos? En lareferencia a la hoja de estilo externa:

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

Si no hubiera ninguna selección por parte del usuario, el valor para $micss sería default y la línea quedaría así:

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

Pero si existe una selección (supongamos que el usuario eligió la opción metal) la línea sería:

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



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

Una cosita más...

Descubrí que había un inconveniente al regresar a una página ya visitada por cuanto es común que el navegador las conserve en sumemoria caché para acelerar la navegación. De este modo, si luego de pasar por varias páginas cambiamos la hoja de estilo yregresamos a una ya visitada, el navegador no muestra la nueva versión de la página sino la que tiene almacenada en su memoria

caché (con la antigua hoja de estilo).

Este inconveniente se soluciona colocando en la sección <HEAD> de las páginas 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 página de inicio tras aplicarles otras tantas hojas de estilo. Es difícil creer que se trata siempre delmismo documento ¡pero lo es!

Como tienen un propósito demostrativo, el acento está puesto en extremar las diferencias antes que en buscar la utilidad de cadadiseño. Un uso más lógico sería proporcionar una CSS optimizada para Netscape, otra para IExplorer, para distintas resoluciones depantalla y para cada sistema operativo.

Finalmente, si le interesa, estas son las hojas de estilo que he utilizado en mis ejemplos:

q default.css

http://www.sidar.org/recur/desdi/mcss/default.css

http://www.sidar.org/recur/desdi/mcss/default.css



q Dexter.css

q Didi.css

q dibujo.css

q grafo.css

q metal.css

q sistema.css

http://www.sidar.org/recur/desdi/mcss/dexter.css

http://www.sidar.org/recur/desdi/mcss/didi.css

http://www.sidar.org/recur/desdi/mcss/dibujo.css

http://www.sidar.org/recur/desdi/mcss/grafo.css

http://www.sidar.org/recur/desdi/mcss/metal.css

http://www.sidar.org/recur/desdi/mcss/sistema.css

http://www.sidar.org/recur/desdi/mcss/sistema.css

http://www.sidar.org/recur/desdi/mcss/metal.css

http://www.sidar.org/recur/desdi/mcss/grafo.css

http://www.sidar.org/recur/desdi/mcss/dibujo.css

http://www.sidar.org/recur/desdi/mcss/didi.css

http://www.sidar.org/recur/desdi/mcss/dexter.css



¡CSS en


Ver

explicación

1.1 Introducción alas CSS

Anterior Siguiente

| Qué son las Hojas de Estilo | Cómo funcionan | Hojas de Estilo incrustadas |

Hojas de Estilo en línea | Ventajas (y desventajas) |

Qué son las Hojas de Estilo

Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar formato a losdocumentos escritos en HTML (y en otros lenguajes estructurados, como XML) separando el contenido de laspáginas de su apariencia. Para el diseñador, esto significa que la información estará contenida en la página HTML,pero este archivo no debe definir cómo será visualizada esa información. Las indicaciones acerca de lacomposición visual del documento estarán especificadas en el archivo de la CSS.

Volver

Cómo funcionan

Veamos primero como trabaja el código HTML. En HTML, las etiquetas (tags) le indican al navegador loselementos que componen la página y éste aplica el formato a cada elemento en particular, por ejemplo:

<H1>Título</H1>

especifica que el texto "Título " 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 varía un poco si se trata de Internet Explorer,Netscape, o si usamos Windows, Mac o Linux).

Probar

Si quisiéramos componer los encabezados H1 con tipografía Arial, de 19 puntos, en color azul y alineación central,deberíamos especificarlo del siguiente modo:

Home Manual

Default

OK

http://-/?-

http://-/?-

http://-/?-

http://-/?-



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

Título</FONT></H1>

Por supuesto, esto debería repetirse en cada encabezado H1 de cada página de nuestro sitio.

Probar

Las Hoja de Estilo no utilizan el archivo de la página Web para especificar el formato de la página (en realidad, aveces pueden hacerlo, como veremos más adelante). En su lugar, usan un archivo de texto puro con extensión .CSS que luego se vincula a la página.

Este archivo contiene reglas que constan de un selector (en este ejemplo, H1) y una o más declaraciones (en elejemplo tenemos cuatro declaraciones). Cada declaración tiene dos partes: una propiedad (por ejemplo, FONTSIZE) y un valor (en este caso, 19pt). Estas reglas son las que determinan cómo deberá mostrarse la página.

Nuevamente, si quisiéramos componer los encabezados H1 con tipografía Arial, de 19 puntos, en color azul yalineación central, el archivo CSS debería contener el siguiente texto:

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

}

Probar

Luego, en cada página 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 vínculo: a una hoja de estilo ("stylesheet")

http://-/?-

http://-/?-

http://-/?-

http://-/?-



q la ubicación de la hoja de estilo a través del atributo "href"q el tipo de hoja de estilo que se vincula: "text/css"

Ahora, todos los encabezado H1 de las páginas que contienen la referencia al archivo de la CSS tendrán elaspecto que hemos definido.

Volver

Hojas de estilo incrustadas

Hemos visto cómo las reglas de estilo se especifican en un archivo externo. Este método es el más recomendabley el que permite mayor flexibilidad: los estilos pueden cambiarse sin tocar el código HTML y la CSS puede sercompartida por varias páginas.

También existe la posibilidad de poner la hoja de estilo dentro de una página HTML usando el elemento STYLE.

<HTML><HEAD><TITLE>CSS incrustada</TITLE><STYLE type="text/css">H1 { color: blue }

</STYLE></HEAD><BODY><H1>Título color azul</H1><P>Un párrafo cualquiera...

</BODY></HTML>

Como se ve en el ejemplo, el elemento STYLE se usa dentro del encabezado (<HEAD></HEAD>) de la página,especificando el tipo de hoja de estilo:

<STYLE type="text/css">H1 { color: blue }... (aquí se agregan todas las reglas de estilo) ...

</STYLE>



Este método permite aplicar la hoja de estilo solamente a la página que la contiene. Si bien no es tan prácticocomo usar una CSS externa, resulta útil cuando en nuestro sitio tenemos algunas pocas páginas que usan unformato distinto al resto.

En muchos casos convendrá usar ambos métodos simultáneamente: poner un link a una hoja externa para aplicarun estilo general y luego crear una hoja incrustada en la que solamente deberemos definir las reglas específicaspara esa página. 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 línea

Por último, también es posible aplicar el estilo directamente en la etiqueta HTML:

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

Por supuesto, la definición del estilo dentro de la propia etiqueta (tag) no es la manera más eficaz de utilizar lashojas de estilo, pero pueden existir casos que lo justifiquen. La existencia de una regla como la del último ejemploconstituye por sí misma una hoja de estilo por lo que debemos declarar en el encabezado de la página el tipo deCSS que estamos usando.

<STYLE type="text/css"></STYLE>

Esta declaración no será necesaria si en la misma página estamos usando una hoja de estilo incrustada o si existeuna referencia a una hoja externa.

Esta forma de aplicar la hoja de estilo directamente en la etiqueta es similar al modo usado en el código HTML,pero con dos importantes diferencias:

1. El conjunto de propiedades que se pueden aplicar es mucho mayor y2. 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 párrafos quedarán alineados por la izquierda y, si en un párrafo determinado, usamos:

<P align="center">

El párrafo seguirá estando alineado por la izquierda porque las reglas de las CSS tienen más fuerza que el formatoaplicado 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 presentación de cada elemento sin tocar el códigoHTML, ahorrando esfuerzo y tiempo de edición. Si quisiéramos alinear a la izquierda losencabezados H1 de nuestras páginas, bastaría con cambiar en la CSS la declaración "text-align: center" por "text-align: left" e inmediatamente cada H1 se alinearía a la izquierda entodas las páginas vinculadas a la Hoja de Estilo. De este modo no sólo simplificamos elmantenimiento del sitio sino que además reducimos las posibilidades de cometer errores.

2. El lenguaje de las CSS ofrece herramientas de composición más potentes que HTML. Hemosespecificado en los ejemplos una fuente alternativa genérica (Sans-serif) para el caso de quela máquina del usuario no contenga la Arial (en HTML no existen estas fuentes genéricas). ConHTML, el tamaño 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 tamaño en puntostipográficos (y podemos hacerlo en cm, pixeles, cuadratines, altura de la x, etc.). Más aún, lasCSS permiten aplicar prácticamente todas las propiedades a cualquier elemento de la página,mientras que HTML sólo permite un número limitado de propiedades para cada elemento.

Probar

3. Se evita tener que recurrir a trucos para conseguir algunos efectos. Con CSS no es necesariousar imágenes invisibles para hacer una sangría (la propiedad text-indent se encarga de eso)o usar una tabla para ubicar un elemento en determinado lugar de la pantalla (las CSSpermiten posicionar con precisión cualquier elemento).

Además

http://-/?-

http://-/?-



4. El lenguaje de las Hojas de Estilo, aunque muy potente, es relativamente sencillo y fácil deaprender.

5. Los documentos que usan CSS generalmente resultan más compactos.6. Las Hojas de Estilo pueden aplicarse de varias maneras y combinarse formando una cascada

de estilos con la información de cada una.7. Pueden usarse con otros lenguajes de programación (como JavaScript) para conseguir efectos

dinámicos en las páginas.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 delautor.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 quetienen las CSS por parte de los navegadores. Ciertas propiedades que funcionan en un browser no funcionan enotros, o existen diferencias en un mismo navegador según sea para Windows o Mac. También existen diferenciasentre distintas versiones de un mismo browser.

Esto puede provocar que:

1. Nuestra página sea visualizada por el lector con un formato no deseado por nosotros. En todocaso, el navegador aplicará el formato predeterminado y nuestro trabajo de composición habrásido inútil.

2. Algunas propiedades de las CSS (como las que afectan la posición o visibilidad de loselementos) pueden provocar que una parte del contenido de nuestra página resulte inaccesibledesde ciertos navegadores si no son utilizadas correctamente.

Debe entenderse que las Hojas de Estilo fueron diseñadas para permitir que los autores influyan en la composiciónde la página, pero no para que la controlen. Una CSS sugiere al browser un estilo de composición 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 presentación atractiva dela página siempre que la página no sea dependiente de la Hoja de Estilo. Se debe considerar en todo momentoaquellos navegadores que no soportan CSS, cuidando que los mismos puedan mostrar la página correctamente yen su totalidad aún cuando nuestras reglas de estilo no sean aplicadas.

En este sentido, espero que esta guía de uso de las CSS ayude no sólo a conocer el lenguaje de las Hojas deEstilo sino también a aplicarlas con el mayor beneficio.

http://www.sidar.org/recur/desdi/mcss/css2/intro.html#q6

http://www.sidar.org/recur/desdi/mcss/css2/intro.html#q6



Volver



¡CSS en


Ver

explicación

Scrollbars enIExplorer 5.5

El WWW Consortium (W3C) está conformado por las principales empresas involucradascon la Web y, a través de sus grupos de trabajo, desarrolla los estándares y lenguajesque serán utilizados en la industria.

Sin embargo, por distintos motivos, las empresas no cumplen puntualmente con estosestándares. El soporte a CSS2, por ejemplo, es tan irregular que no se puede saber aciencia cierta qué propiedades van a funcionar en cada navegador.

En otros casos, se implementan algunas características no definidas por el W3C, como esel caso de las propiedades que IExplorer 5.5 acepta para cambiar las características delas barras de desplazamiento.

Decidi incluirlas en este manual (y también en mis hojas de estilo) porque no se puededesconocer que este programa es el más utilizado actualmente y porque, en definitiva, se

trata solamente de un agregado estético que será ignorado por los demás navegadores.

Estas son las propiedades para conseguir ese efecto tan colorido en las scrollbars. Porsupuesto, son aceptadas únicamente por IExplorer 5.5, de modo que si se utiliza otronavegador la barra tendrá sus colores normales.

BODY {scrollbar-face-color: blue;scrollbar-highlight-color: yellow;scrollbar-shadow-color: maroon;scrollbar-arrow-color: white;

scrollbar-base-color: green }

En el gráfico siguiente se muestra la barra ampliada con los colores aplicados con estasreglas y, a la derecha, los colores de la barra normal.

Home Manual

Default

OK



Volver

1 2 Si t i d l



¡CSS en


Ver

explicación

1.2 Sintaxis de lasCSS

Anterior Siguiente

| Estructura de una CSS | Reglas | Reglas arroba | Comentarios |

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 extensión .CSS (en algunosnavegadores, esto no es absolutamente necesario pero conviene no obviarlo). Estearchivo no necesita ninguna declaración inicial ni otra identificación que su propio nombrecon extensión y contiene una serie de instrucciones llamadas estamentos. Los

estamentos pueden ser de dos clases: Ver

q Reglas

q Reglas-arroba

Volver

Reglas

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

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

}

Cada regla consta de: un selector (P) que identifica (o selecciona) un elemento de lapágina Web.

Home Manual

Default

OK

Al selector le sigue un bloque de declaraciones que comienza con una llave de apertura

http://www.sidar.org/recur/desdi/mcss/css2/syndata.html#q5

http://www.sidar.org/recur/desdi/mcss/css2/syndata.html#q5



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 browserel 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, seguidade dos puntos (:) y un valor (red, #FFFFFF) para esa propiedad. Existen distintosvalores y cada propiedad puede aceptar algunos de esos valores.

El ejemplo anterior provocará que los párrafos (elementos P) de la página Web tengan deprimer plano (color) un color blanco (#FFFFFF) y un fondo (background-color) decolor rojo (red). Cuando hay más de una declaración, como en este caso, deben irseparadas entre sí por punto y coma (;).

Por una referencia rápida 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 carácter arroba(@) seguido inmediatamente (es decir, sin espacios intermedios) por un identificador.Según de qué regla arroba se trate finalizará con un punto y coma (;) o podrá tener unbloque 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 más que un estilo decomposición. En el ejemplo anterior, la primera sirve para importar otra Hoja de Estilopara ser usada conjuntamente con la actual, la segunda indica que la declaración BODY

{font-size: 10pt} se usará solamente cuando la página sea impresa. Ver

http://www.sidar.org/recur/desdi/mcss/css2/syndata.html#at-rules

http://www.sidar.org/recur/desdi/mcss/css2/syndata.html#at-rules



Volver

Comentarios

En cualquier lugar de la página pueden incluirse comentarios. Estos no influyen en elprocesamiento de la Hoja de Estilo y deben comenzar con una barra y un asterisco ( /*) yterminar con un asterisco y una barra (*/). Pueden ocupar varias líneas de texto pero no

pueden anidarse (incluir un comentario dentro de otro comentario). Ver

/* Esto es un comentario */

Volver

1 3 Cascada y

http://www.sidar.org/recur/desdi/mcss/css2/syndata.html#comments

http://www.sidar.org/recur/desdi/mcss/css2/syndata.html#comments



¡CSS en


Ver

explicación

1.3 Cascada yherencia

Anterior Siguiente

| Introducción | Cascada | La regla @import | El orden de la cascada |

La regla !important | Herencia | Valores especificados, computados y reales |

Introducción

Escribir y aplicar una hoja de estilo a nuestras páginas es una tarea sencilla. Bastaría contener un conocimiento básico acerca de su sintaxis y un listado con las palabras quedeben usarse en cada caso. Sin embargo, existen algunos conceptos más avanzados quees importante conocer para obtener el máximo provecho de este lenguaje. En estasección revisaremos la noción de cascada y de una idea relacionada con ella, la herencia.

Volver

Cascada

Una hoja de estilo asociada con una o más páginas Web resulta de mucha utilidad, perotambién resulta insuficiente en ciertos casos, como un site muy grande o manejado porvarias personas, en los cuales una sola hoja de estilo no alcanzaría a cubrir todas lasnecesidades de diseño.

Esta limitación está cubierta mediante la posibilidad de vincular hojas de estilo y de crearuna jerarquía 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 página(poético, verdad?).

Poético y eficaz, por cierto. Pensemos, por ejemplo, en el caso del site de unaorganización con varios departamentos y otros tantos diseñadores encargados delmantenimiento de las páginas. El modo de asegurar la uniformidad gráfica del sitiocompleto es utilizar una hoja de estilo común donde estén definidos los aspectos básicosdel diseño (fuentes, colores, etc.). Luego cada departamento puede tener, además, supropia hoja de estilo donde se definirán los aspectos específicos de ese departamento.Estas hojas de estilo particulares no necesitan reproducir aquella hoja común, sino que

Home Manual

Default

OK

basta con importarla haciendo que los estilos definidos en una y otras actúen



basta con importarla haciendo que los estilos definidos en una y otras actúenconjuntamente. Cualquier cambio en la hoja de estilo común (una modificación en loscolores institucionales, por ejemplo) se vería reflejado inmediatamente en todas laspáginas vinculadas.

Volver

La regla @import

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

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

Esta declaración 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 queexistan varias reglas con distintos valores aplicados a un mismo elemento. En esoscasos, hay ciertas normas que determinan cuál de esos valores será el que se apliquefinalmente al elemento. Es decir, se establece un orden de preferencias dentro de lacascada.

Volver

El orden de la cascada

Las hojas de estilo pueden tener tres orígenes:

El autor:como hemos visto hasta ahora, puede hacerlo a través de una hojaexterna o incrustada, incluso definiendo el estilo en línea.

El usuario:también puede especificar su propia hoja de estilo. Esta posibilidad

puede resultar de gran ayuda para aquellas personas con



puede resultar de gran ayuda para aquellas personas condiscapacidades visuales o, simplemente, para quienes deseen adaptarlas páginas a sus preferencias. Cada navegador tiene su formaparticular de proveer al usuario la posibilidad de especificar una hojade estilo propia.

La aplicación del usuario:el navegador también aplica una hoja de estilo predeterminada quepresenta los elementos de la página de modo que satisfagan lasexpectativas generales de presentación del documento.

Las hojas de estilo con estos tres orígenes actúan conjuntamente y el orden de lacascada determina, en el caso en que existan reglas incompatibles, cuál de ellas tienepreponderancia.

Las siguientes son las normas que determinan la fuerza de las reglas de estilo:

1. La primera disposición se hace por el origen: las reglas de la hoja deestilo del autor tienen más fuerza que las del usuario y éstas, a su vez,prevalecen por sobre las del navegador.

2. La segunda disposición es por especificidad: los selectores másespecíficos tienen mayor fuerza que los selectores generales. Porejemplo: UL {} es menos específico que UL LI {}. En laRecomendación CSS2 puede encontrar la explicación acerca de cómose calcula la especificidad de un selector.

Ver

3. Finalmente, se dispone por el orden especificado: si dos reglas tienenla misma fuerza, origen y especificidad, la última en ser especificadaes la que vence. Las reglas en las hojas de estilo importadas seconsidera que están antes que cualquier regla en la propia hoja deestilo.

Volver

La regla !important

La regla !important está pensada para permitir una mejor accesibilidad a losdocumentos, otorgándoles a los usuarios con requerimiento especiales (fuentes grandes,combinaciones de colores, etc.) el control sobre la presentación. Ejemplo:

P { font-size: 14px !important }

http://www.sidar.org/recur/desdi/mcss/css2/cascade.html#specificity

http://www.sidar.org/recur/desdi/mcss/css2/cascade.html#specificity



P { font size: 14px !important }

Las declaraciones !important tienen más fuerza que las declaraciones normales y lashojas de estilo del autor y del usuario pueden contener la declaración !important, encuyo caso la regla del usuario tiene mayor fuerza que la del autor.

Aquí es importante destacar que, aunque las hojas de estilo del autor tienenpreponderancia por sobre las del usuario, con la regla !important esto se revierte y sele da mayor poder a las preferencias del usuario.

He creado una página sobre CSS y accesibilidad donde explico cómo se puede

especificar en ciertos navegadores una hoja de estilo del usuario, ya sea mediantemenúes o con un archivo externo. También he preparado, cediendo a mi costado menosserio, una página donde explico cómo se puede usar una hoja de estilo para asustar aotra persona (¿?).

Volver

Herencia

Cada página HTML está compuesta por una serie de elementos (títulos, párrafos, listas,tablas, etc.) organizados en una estructura donde cada elemento está contenido por otroelemento, que a su vez puede estar contenido por otro.

En esta estructura existe un elemento raíz que es el que actúa de contenedor de todoslos demás elementos. En HTML se puede considerar como elemento raíz al elemento<BODY> o al elemento <HTML>.

La importancia de este hecho es que cada elemento hereda las propiedades del elementoque lo contiene (llamado el elemento padre). Quiere decir que si especificamos lapropiedad color: red para <BODY>, todos los elementos de la página heredarán estacaracterística y no será necesario especificar nuevamente la propiedad color en cadauno de ellos.

Aquí es necesario hacer algunas precisiones:

1. No todas las propiedades son hereditables y para cada propiedad sedefine si ésta se hereda o no.

2. El valor inherit puede aplicarse a cualquier propiedad de los



2. El valor inherit puede aplicarse a cualquier propiedad de loselementos. Este valor puede usarse para reforzar explícitamente laherencia de una propiedad o para lograr que un elemento herede desu padre una propiedad que de otro modo no sería heredada.

3. Cuando se asigna una propiedad a un elemento, el valor especificadoreemplaza al valor heredado.

4. Los elementos heredan los valores computados del padre, no losvalores especificados (en el siguiente punto esto se explica másdetalladamente).

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 seusan en la definición de los selectores:

Descendienteun 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).

Antepasadoun elemento (A) es antepasado de otro (B) cuando (B) es sudescendiente.

Hermanoun elemento es hermano de otro cuando ambos comparten el mismopadre.

Volver

Valores especificados, computados y reales

Valor especificadoTodas las propiedades tienen siempre un valor asignado. Puede ser elespecificado en la CSS o, en su defecto, el valor heredado. Enausencia de los dos anteriores, se usa el valor inicial (el valorpredeterminado para cada propiedad).

Valor computadoCuando se especifica un valor relativo es necesario hace un cálculopara obtener su valor absoluto. Por ejemplo, para resolver P {font-size: 125%} se debe tomar el valor del elemento padre de <P> yaplicarle un porcentaje de 125% para obtener el tamaño definitivo deltexto. Supongamos que <BODY> es el padre de <P> y tiene un tamaño

de fuente de 10px, entonces <P> tendrá un tamaño de fuente de



de ue te de 0p , e to ces te d á u ta a o de ue te de12,5px (10x125%=12,5 ). Los elementos que sean hijos de <P> no vana heredar el valor especificado (125%) sino el valor computado(12,5px).

Valor realPuede suceder que el valor resultante no pueda ser utilizado por elnavegador debido a limitaciones técnicas y deba ser aproximado aotro valor. En el ejemplo anterior, en la pantalla no sería posiblemostrar una fuente de 12,5px, por lo que el navegador la ajustará a12px ó 13px. Este valor no resulta de mucho interes para el usuariosino para el programador.

Pueden encontrar ejemplos en la sección sobre Valores: porcentajes.

Volver



¡CSS en


Ver

explicación

Hojas de Estilo en Cascada

Estas páginas tienen como tema principal el lenguaje de las Hojas de Estilo en Cascada

o CSS (sigla de su denominación en inglés: Cascading Style Sheet).

Las CSS complementan a otros lenguajes de descripción de páginas utilizados parapublicar documentos en la Web, como HTML o XML, con el propósito principal de permitirla separación entre el contenido de las páginas y su forma de presentación.

El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1 y CSS2 delWorld Wide Web Consortium (W3C) y, por lo tanto, es un estándar aceptado por toda la

industria relacionada con la Web.

Aquí encontrará la *traducción de la Especificación CSS2*, un documento extenso y dereferencia permanente, donde se definen todos los aspectos referidos a este lenguaje.Puede descargar la traducción en formato comprimido (zip) para consultar fuera de línea.

También puede consultar el *manual de uso de las CSS*, que abarca desde los aspectos

más básicos hasta los conceptos más avanzados de las Hojas de Estilo en Cascada.

Este manual cuenta con páginas de prueba para que los usuarios puedan verificar eldesempeño de su navegador con relación a las CSS.

Fecha de publicación: Enero 2000 | Fecha de actualización: Setiembre 2002


Default

OK

CSS y

http://www.w3.org/

http://www.sidar.org/recur/desdi/traduc/es/css/css2_es.zip

http://www.sidar.org/recur/desdi/traduc/es/css/css2_es.zip

http://www.w3.org/



¡CSS en


Ver

explicación

CSS yaccesibilidad

Las CSS2 introducen un cambio muy importante con respecto a la primera versión de lashojas de estilo en cascada (CSS1) que consiste en permitirle al usuario, mediante laregla !important , suplantar con sus propias reglas de estilo las especificadas por el autordel documento.

De este modo, los usuarios con requerimientos específicos pueden modificar las opcionesdel creador de las páginas Web con el fin de mejorar su accesibilidad.

Los navegadores tienen opciones que permiten modificar la apariencia de las páginasvisitadas. Estas opciones constituyen de hecho la hoja de estilo del usuario (ver Cascada

y herencia) y vamos a ver cómo la implementan los últimos browsers para Windows y

qué grado de efectividad tienen.

Netscape 6

Con el menú [Editar][Preferencias]accedemos a una ventana con distintasopciones de configuración. Dentro de esta ventana, [Apariencia][Fuentes]permitedefinir los tipos y tamaños de letra para las páginas y elegir entre tres alternativas: que lasfuentes seleccionadas se usen en lugar de las especificadas en el documento, que seusen las fuentes del documento pero no las fuentes dinámicas o que se utilicen todas lasfuentes especificadas en el documento.

En [Apariencia][Colores]podemos elegir una combinación de colores para el texto,el fondo y los links visitados o no (y si queremos que los links aparezcan subrayados).

También podemos indicar que siempre se usen estos colores en vez de los coloresespecificados en las páginas.

Sin necesidad de editar las preferencias, podemos cambiar el tamaño de las fuentesmediante el menú [Ver][Aumentar fuente] y [Ver][Disminuir fuente].

Opera 5

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

Home Manual

Default

OK

para adecuar el aspecto de la página a las necesidades del usuario. Mediante el menú



[Preferencias][Documentos]se accede a una ventana donde podemos elegir, porejemplo, el tipo, color y tamaño de la fuente para cada elemento, el color de fondo y eltamaño mínimo de la letra. También 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 deestilo del documento. Otras opciones permiten habilitar el uso de tablas, fuentes y coloresen la página. En la barra de navegación existe un botón para alternar rápidamente entrelas preferencias del documento y las del usuario.

En Opera se puede modificar totalmente el aspecto de la página mediante sus menúes o

creando nuestra propia hoja de estilo, se pueden establecer prioridades y, con un simpleclick, cambiar las preferencias del autor por las nuestras y viceversa. Resulta de muchautilidad para probar como se verán nuestras páginas con y sin las hojas de estilo y es unaexcelente opción para los usuarios con discapacidades visuales.

Explorer 5.x

Explorer es actualmente el navegador con mejor soporte para las CSS2 (sin llegar a sercompleto). Haciendo un click con el botón secundario del ratón sobre su ícono yseleccionando [Propiedades de Internet] o desde el menú [Herramientas]

[Opciones de Internet] accedemos a una ventana con varias solapas. En[General][Colores] y [General][Fuentes]están las opciones para modificar lasfuentes (no su tamaño), la combinación de colores y el color de los links según su estado(es el único que permite un cambio de color cuando el link es señalado). En [General][Accesibilidad] podemos hacer que se omitan los colores, las fuentes y los tamañosde las fuentes especificados en los documentos, también podemos referenciar una hojade estilo propia.

En los menúes del navegador podemos seleccionar [Ver][Tamaño del texto] y unade estas alternativas [Mayor|Grande|Mediana|Pequeña|Menor].

Opera y Explorer, además de las opciones disponibles en los menúes, permiten usar unahoja de estilo externa. De este modo, el usuario obtiene la máxima flexibilidad para aplicarsus preferencias.

Cada caso particular requerirá de reglas específicas, pero este podría ser un ejemplo deuna hoja de estilo para eliminar el color en las páginas.



BODY { color: black !important;background: white !important;}

* { color: inherit !important;background: transparent; !important;}

Es posible que en ciertos casos sea necesario agregar reglas para una páginadeterminada debido a problemas con el soporte, de parte de los navegadores, a ciertaspropiedades de las CSS. También puede suceder que influya el orden de la cascada y el

grado de especificidad de ciertos selectores.

Con el transcurso del tiempo iremos adaptándonos, los diseñadores de las páginas y losusuarios de las mismas, a esta posibilidad de que los lectores puedan ejercer un rol activoen la presentación visual de la información.

Volver

Un truco con



¡CSS en


Ver

explicación

Un truco conlas CSS

Como no todo tiene que ser trabajo, voy a explicarles cómo usar una hoja de estilo del usuario paradarle un susto a alguien que use IExplorer 5.x y de paso puedan apreciar el alto potencial de estelenguaje, aún para cosas tan inútiles como ésta.

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 página Web que se abra con él, nada más que unaimagen elegida por nosotros. Les presto ésta:

¡Que no cunda el pánico! Sólo es una broma inofensiva.

Instrucciones: (los niños no deben intentar esto sin la supervisión de un adulto)

Deberán crear una hoja de estilo, un simple archivo de texto que contenga las siguientes reglas:

* { visibility: hidden !important;}BODY { visibility: visible !important;

background-color: black !important;background-image: url(borrando.gif) !important;background-repeat: no-repeat !important;background-position: 200px 120px !important;}

Home Manual

Default

OK

Esto es lo que hacen las reglas: la primera selecciona todos los elementos (*) y los vuelve invisibles



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 conla falsa caja de diálogo, luego evita que la imagen se repita y le da una ubicación determinada en lapantalla. En todos los casos, se usa !important para que estas reglas sustituyan a cualquier otraespecificada por el autor.

Lo demás es sencillo, subrepticiamente editan las [Propiedades de Internet] de Explorer y enla opción [General][Accesibilidad] indican la posición de su hoja de estilo (puede estar encualquier lugar del disco). Ahora, quien intente ver una página con el navegador solamente va aencontrar la pantalla en negro y un aviso de que se están eliminando archivos del sistema. Para hacermás efectiva la broma, conviene estar atento y en el momento indicado aportar algo de confusióngritando ¡es un virus! ¡es un virus!

Que lo disfruten. Ahora, volvamos al trabajo.

Volver

2.1 SelectoresH M l



¡CSS en


Ver

explicación

Anterior Siguiente

| Introducción | Selectores de tipos | Selectores de clases | Selectores de ID |

Selectores de atributos | Selector universal | Agrupamiento |

Introducción

Los selectores identifican a un elemento dentro de la página 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 seleccionesdentro de la página.

El conocimiento en profundidad de los distintos selectores es uno de los aspectos más complejos dellenguaje de las Hojas de Estilo y también el que nos permite sacar el máximo provecho de las CSS.

Existen muchos editores de páginas Web que facilitan la labor de crear y aplicar Hojas de Estilo, pero losselectores que se pueden definir con estos programas son sólo los más elementales. La complejidad quepueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier herramienta y es ahídonde los diseñadores deberán apelar a sus propios recursos.

En esta sección se explican los llamados selectores simples.

Volver

Selectores de tipos

Son los que identifican a un tipo de elemento dentro de los que conforman el código HTML. Es decir, usan lamisma palabra que la etiqueta (tag) sin los signos < y >. Por ejemplo, TABLE selecciona todos los elementos<TABLE> de la página. La siguiente regla identifica a los elementos <H1> de la página y los alíneacentralmente:

H1 {text-align: center}

Home Manual

Default

OK

Quienes no conozcan a fondo todos las etiquetas del lenguaje HTML pueden consultar el Listado de



Quienes no conozcan a fondo todos las etiquetas del lenguaje HTML, pueden consultar el Listado de

elementos de HTML 4.0, que contiene una pequeña definición sobre cada marca. Teóricamente 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 modificarel aspecto de todos los elementos de ese tipo en todas las páginas de nuesto sitio. Esa es también sulimitación: su utilidad se limita al caso en que todos los elementos de un tipo tengan la misma apariencia encada una de nuestras páginas. ¿Qué sucede si en ciertos casos queremos usar un párrafo concaracterísticas diferenciadas?

Volver

Selectores de clases

La questión planteada en el punto anterior se resuelve creando una nueva clase de párrafo. El selector declases consta de un punto (.) seguido por el nombre de la clase que hayamos creado (el nombre lo elegimosnosotros). Supongamos que para publicar un reportaje queremos contar con un párrafo especial quedenominaremos "pregunta":

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

Ahora, a los párrafos que corresponden a las preguntas del entrevistador en el supuesto reportaje lesagregamos el atributo CLASS dentro de la marca de la página HTML:

<P CLASS="pregunta">Esta es una pregunta del reportero</P>

Todos los párrafos de la clase "pregunta" aparecerán con texto en itálicas negritas para diferenciarlos de lospárrafos normales. Observen que en el tag de la página HTML la sintaxis difiere de la CSS: luego de lapalabra CLASS sigue un signo igual (=) y entre comillas ("") el nombre de la clase.

Si bien estos selectores requieren un agregado en el código HTML de las páginas, nos permiten una amplialibertad para crear diversas variantes de un mismo elemento. Más aún, podemos crear una clase genéricapara aplicar a cualquier elemento de la página y no sólo a los párrafos. Basta con suprimir en el estamento elprimer selector y dejar únicamente el punto (.) y el nombre de la clase:

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

http://www.sidar.org/recur/desdi/mcss/css2/selector.html#type-selectors

http://www.sidar.org/recur/desdi/mcss/css2/selector.html#type-selectors



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

<H1 CLASS="contraste">Un título con contraste</H1><P CLASS="contraste">Un párrafo con contraste</P><OL CLASS="contraste">Una lista con contraste</B>

Probar

Es tanta la flexibilidad que nos brindan los selectores de clases que hasta nos permitirían hacer nuestraspáginas casi exclusivamente con sólo dos elementos de HTML: DIV y SPAN (que no tienen ningún formatopredeterminado) y luego crear todas las clases que necesitemos. Esta práctica es desaconsejada por el W3C

en una nota que aparece en la Recomendación CSS2 al final de la sección 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 deestos últimos, sólo pueden aplicarse a un elemento de la página. Quiere decir que si hay un elemento quetiene asignado el atributo ID="principal" no podrá haber otro ID con igual valor (es decir, con el mismonombre). La sintaxis en la CSS también es similar, solamente que en vez de usar un punto se utiliza elcarácter de numeral (#):

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

En el primer caso, aquel elemento H1 con ID="titulo1" de la página será centrado. En el segundo,cualquier elemento que tenga asignado el atributo ID="volanta" irá en itálicas.

Los selectores de ID no tienen el grado de flexibilidad de los selectores de clases, por ejemplo, pero son unaopción para aquellos casos en que se necesite identificar de modo exclusivo un determinado elemento de lapágina.

http://www.sidar.org/recur/desdi/mcss/css2/selector.html#class-html

http://www.sidar.org/recur/desdi/mcss/css2/selector.html#class-html



Volver

Selectores de atributos

Los selectores de atributos permiten seleccionar elementos de la página según sus propiedades o el valorasignado a estas propiedades. Supongamos que hemos creado varias clases de párrafos y queremosidentificar a todos aquellos que tengan especificado el atributo CLASS (cualquiera sea el valor de eseatributo) para darle un margen izquierdo de 1 cm:

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

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

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

Podemos usar varios selectores de atributos para hacer aún más específica la regla. Supongamos que aciertos párrafos con CLASS="pregunta" también le hemos asignado el atributo WIDTH y queremos darle unmargen 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 fórmulas para este tipo de selectores que se utilizan cuando a un determinadoelemento se le han asignado una lista de valores en vez de un solo valor (más adelante en esta guía veremoslos casos específicos).

[atributo~=valor] se usa para seleccionar los elementos que tienen como atributo una lista de palabrasseparadas por espacios , una de las cuales es exactamente valor.

[atributo|=valor] se usa para seleccionar los elementos que tienen como atributo una lista de palabrasseparadas por guiones, comenzando por valor.

Veamos un ejemplo de los dos casos:

IMG[ALT~="logotipo"] {border: solid}



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

El primero selecciona las imágenes cuyo atributo ALT tiene en su valor la palabra logotipo , como enALT="logotipo de la compañía" o ALT="éste es nuestro logotipo". El segundo, seleccionalos párrafos que tienen asignado como valor del atributo LANG palabras que comienzan con en , como en-US o en-cockney.

Quizás todo esto les parezca una complicación excesiva, pero debe considerarse que el lenguaje de las CSS

es abarcativo e intenta satisfacer necesidades que quizás nosotros ignoramos, como puede ser el hecho detener de mezclar distintos lenguajes en nuestros documentos y poder aplicar a cada uno un estilo particular.También se debe tomar en cuenta que las Hojas de Estilo están pensada no solamente para HTML sino paraotro 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 página. Porejemplo, con:

* {color: red}

Todos los elementos de la página tendrán como color de primer plano el rojo. Sin mencionarlo, ya hemosusado en los ejemplos anteriores de esta página algunos selectores universales, porque cuando éste vaacompañado 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 página con determinadaspropiedades generales.

Volver

Agrupamiento



Cuando tenemos varios selectores que comparten las mismas declaraciones pueden agruparse en una listaseparada por comas (,). No se trata de un tipo de selector especial sino de una fórmula abreviada paraaplicar 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

2.2 Selectores Home Manual



¡CSS enacción! Seleccioneotra hoja deestilo paranavegar:Actual:default.css

Ver

explicación

contextualesAnterior Siguiente

| Introducción | Selectores de descendientes | Selectores de hijos |

Selectores de hermanos adyacentes |

Introducción

Hasta ahora, los selectores que hemos visto se utilizan de una manera directa. Los queveremos en esta página son combinaciones de dos o más selectores ya conocidos queexpresan una determinada relación entre ellos. De este modo, podemos identificar unelemento de acuerdo a su posición con respecto a otro elemento.

Estas son las tres alternativas posibles:

q Selectores de descendientes (A B)q Selectores de hijos (A>B)

q Selectores de hermanos adyacentes (A+B)

*La explicación de algunos conceptos, como padre, hijo, descendiente o hermano seencuentra en la sección sobre Cascada y Herencia.

Volver

Selectores de descendientes

Los selectores de descendientes permiten especificar un elemento que está contenidodentro de otro elemento. Veamos el siguiente caso:

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

Home Manual

Default

OK

Con estas reglas de estilo, el texto de los títulos sería rojo, el texto de los párrafos sería



negro y el texto con énfasis también sería rojo. De este modo podemos destacar palabrasdentro de un párrafo cambiando su color. Pero, nos resultaría imposible hacer lo mismodentro de un título porque tanto H1 como EM son de color rojo.

Con un selector de descendiente podemos hacer que el elemento EM sea de color azulen los casos en que se encuentre dentro de un elemento H1 (es decir, sea undescendiente de H1). La forma de especificar esta relación 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 palabrade un párrafo será de color rojo, pero si destacamos una palabra de un título será de colorazul.

Probar

Podemos combinar tantos selectores como sea necesario. Por ejemplo, para identificar atodos los elementos que tengan asignado el atributo "href" que se encuentren dentro deun párrafo 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. Elsigno ">" se utiliza para combinar los selectores y puede dejarse o no espacio alrededordel mismo:

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

El ejemplo anterior selecciona los párrafos que son hijos de un elemento DIV. Todas lasconsideraciones hechas para los selectores de descendientes se aplican en este caso (si



consideraciones hechas para los selectores de descendientes se aplican en este caso (sihay dudas con respecto a la diferencia entre hijo y descendiente , consulte la secciónsobre Cascada y Herencia).

Existe asimismo la posibilidad de seleccionar el primer hijo de un elemento usando lapseudo-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 más (+).

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

En el primer caso, se selecciona los párrafos (P) que sigan inmediatamente a un título(H1) y se les quita la sangría. En el segundo, cuando a un título nivel 1 (H1) le sigue unode nivel 2 (H2), a este último se le adjudica un margen superior negativo para evitar quese separen demasiado entre sí.

Por hermanos adyacentes se entiende aquellos elementos que comparten un mismopadre y que se encuentran uno a continuación del otro en la estructura del documento. Elelemento que se selecciona es el que se especifica en segundo lugar.

Probar

Volver

2.3 Pseudo-clasesHome Manual

http://-/?-

http://-/?-




Ver

explicación

Anterior Siguiente

| Introducción | :first-child | :link :visited | :hover :active :focus | :lang |

Introducción

Todos los selectores vistos hasta el momento se refieren a elementos que podemos encontrar dentro del código HTML.Las pseudo-clases (y los pseudo-elementos), por el contrario, no pueden deducirse simplemente observando la estructuradel documento. Puede decirse que son abstracciones que permiten referirse a elementos que de otro modo resultaríaninaccesibles.

Las pseudo-clases son:

q :first-child

q

:link y :visited q :hover, :active y :focus

q :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 párrafo no tenga sangría 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 espaciosintermedios.

Probar

Default

OK

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

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



q s s a a s a p j a q , p s sa suniversal:

* > 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 páginas y otroestilo para esos links cuando ya han sido visitados.

En HTML, dentro de la marca BODY también se puede especificar un color para los links y otro para los links visitados,pero con CSS se pueden cambiar muchos otros atributos.

Probar

Después de cierto tiempo (posiblemente cuando se borre el archivo del historial del sistema) el link visitado puede volvera su condición normal.

Volver

:hover, :active y :focus

Estas son pseudo-clases dinámicas, ya que cambian en respuesta a las acciones del usuario.

q :hover se aplica cuando el cursor del mouse señala el elemento.q :active se aplica cuando el elemento es activado (por ejemplo, cuando el usuario presiona el botón

del mouse).q :focus se aplica cuando el elemento recibe el foco.

Uno de los mayores desvelos de los diseñadores de páginas Web han sido siempre los links y la manera de hacer queestos cambien de aspecto al ser señalados por el mouse. Con frecuencia, la solución consistía en utilizar dos imágenesque se cambiaban mediante JavaScript u otro lenguaje. Afortunadamente, con CSS podemos simplificar todo el proceso y

obtener efectos muy variados en nuestros enlaces.

http://-/?-

http://-/?-

http://-/?-

http://-/?-



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 señalado y unfucsia cuando es activado. Se debe tener en cuenta que, por las reglas de cascada, el orden en que deben serespecificadas 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, paraidentificar que un párrafo está en francés se usa:

<P lang:"fr">

El código para identificar el idioma consta generalmente de dos letras: "es" español, "en" inglés, "de" alemán, "fr"francés, 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 itálicas, sangrías o comillas, porejemplo), esta pseudo-clase nos permite describir cómo debe aparecer un elemento según el idioma usado. La siguienteregla especifica el tipo de comillas que debe usar un elemento Q en francés:

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

Volver

http://-/?-

http://-/?-

http://-/?-

http://-/?-



2.4 Pseudo-l t

Home Manual




Ver

explicación

elementosAnterior Siguiente

| Introducción | :first-line | :first-letter | :before y :after |

Introducción

En la impresión sobre papel, a menudo se estila que la primer letra o la primer línea de unpárrafo (o ambas cosas a la vez) tenga un formato diferenciado. Los pseudo-elementos :first-

letter y :first-line permiten conseguir el mismo efecto al seleccionar la primer letra o línea de

un elemento.

Por otro lado, :before y :after permiten insertar un contenido antes o después de un

elemento. Son llamados pseudo-elementos porque en realidad no existen en el documentofuente (ninguna marca identifica la primer letra de un párrafo, por ejemplo) pero son muyútiles para seleccionar elementos importantes dentro de la composición.

Volver

:first-line

Este pseudo-elemento permite aplicar un estilo determinado a la primera línea de un párrafo.

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

Con la regla anterior conseguiríamos que todas las letras de la primera línea de los párrafosfueran convertidas en mayúsculas. Por supuesto, la medida de esta primer línea serádeterminada por el tamaño de la fuente, el ancho de la ventana, etc.

Probar

Sólo las siguientes propiedades se aplican al pseudo-elemento :first-line: propiedades de la

Default

OK

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



Volver

:first-letter

:first-letter nos permite seleccionar la primer letra de un párrafo, generalmente para utilizarlacomo capitular (en un tamaño mayor que el resto del párrafo).

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

Las reglas anteriores determinan que los párrafos tengan una capitular en negritas del doblede tamaño que la fuente del párrafo.

Probar

Volver

:before y :after

Con los pseudo-elementos :before (antes ) y :after (después ) se puede insertar uncontenido antes o después de un elemento determinado y definir el estilo del contenidoinsertado. La propiedad 'content', junto con estos pseudo-elementos, especifican lo que seinserta.

Podemos lograr que antes de cada elemento <H3> aparezca el texto "Tema: " sin necesidadde tener que escribirlo en cada título. También podemos hacer que cada párrafo termine conun pequeño ícono o poner "Fin " al pie de cada página 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 también "display: block" para que la palabra "Fin "comience en una nueva línea (como si fuese un nuevo párrafo).



Probar

Volver

3.1 Cajas:márgenes rellenos

Home Manual




Ver

explicación

márgenes, rellenosy bordes

Anterior Siguiente

| Introducción | Propiedades del margen | Propiedades del relleno |

Propiedades del borde |

Introducción

Cuando una aplicación del usuario (entiéndase navegador o browser) procesa elcontenido de un documento, lo hace siguiendo un modelo determinado. En el modelo deformato visual de las CSS, cada elemento de la página genera una o más cajasrectangulares de acuerdo también a un modelo de caja .

El modelo de caja de CSS describe las cajas rectangulares que son generadas por loselementos. El elemento raíz del documento (<HTML> o, mejor aún, <BODY> en HTML)genera una caja que actúa como bloque de contención de las cajas generadas

subsecuentemente. A su vez, cada caja puede actuar como bloque de contención deotras cajas generadas por sus elementos descendientes.

Todo esto es muy técnico, pero ¿para qué sirve? Fundamentalmente para tener el controlno solo de las propiedades del elemento en sí (su color, la fuente usada para el texto,etc.), sino también de las propiedades de esa caja generada por el elemento (susmárgenes, sus bordes, la posición dentro del documento) que será lo que nos permitacomponer visualmente la página de un modo mucho más rico y flexible que con HTML.

Este modelo de caja es el que permite, por ejemplo, que cualquier elementos de la página

pueda recibir todas de las propiedades definidas en CSS. Por eso, a diferencia de lo quesucede con HTML, todos los elementos pueden tener una imagen de fondo o un borde(sin necesidad de usar una tabla para eso); también es posible darle una ubicaciónprecisa a cualquier elemento dentro de la página, ya sea con respecto a la pantalla o aotros elementos. Mejor aún, nos da la posibilidad de usar un lenguaje como JavaScriptpara conseguir efectos muy interesantes modificando las propiedades de las cajas(moverlas de su posición, mostrarlas o esconderlas, cambiar su tamaño, etc.).

Bien, luego de tantos rodeos espero haberlos convencido de que no abandonen estapágina y continúen con el tema, que bien se lo merece.

Default

OK

Cada caja tiene un área de contenido (por ejemplo, texto, una imagen, etc.) y las áreasi d t i l d ddi ( ll ) b d (b d ) i ( )



circundantes opcionales de padding (relleno ), border (borde ) y margin (margen ).

En esta sección veremos cómo 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 distinguirborder-left, border-right, border-top y border-bottom (lo mismo parapadding 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 márgenes son siempre transparentes

Volver

Propiedades del margen



'margin-top', 'margin-right', 'margin-bottom', 'margin-left'

Valores: <ancho-del-margen> | inherit

Valor inicial: 0

Se aplica a: todos los elementos

Se hereda?: no

Porcentajes: se refieren al ancho del bloque de contención

Estas propiedades determinan los márgenes superior, derecho, inferior e izquierdo de unacaja.

<ancho-del-margen> puede tomar uno de los siguientes valores:

medida

Especifica un ancho fijoporcentaje

El porcentaje es calculado con respecto al ancho del bloque decontención

autoEl valor es determinado por el navegador

Se pueden usar valores negativos (por ejemplo, margin-top: -8px).

'margin'

Valores: <ancho-del-margen>{1,4} | inherit

Valor inicial: no definido para las propiedades resumidas


Se hereda?: no


La propiedad 'margin' es una propiedad resumida que se utiliza para definir los cuatromárgenes a la vez. Los signos {1,4} significan que pueden especificarse de 1 a 4



g g g q p pvalores para <ancho-del-margen>:

Si hay sólo un valorse aplica a todos los lados

Si hay dos valoreslos márgenes superior e inferior son determinados por el primer valor ylos márgenes 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 sondefinidos por el segundo, y el inferior es definido por el tercero

Si hay cuatro valoresse aplican al margen superior, derecho, inferior e izquierdo,respectivamente.

Ver ejemplos

Volver

Propiedades del relleno

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'

Valores: <ancho-del-relleno> | inherit

Valor inicial: 0


Se hereda?: no


Estas propiedades determinan el relleno superior, derecho, inferior e izquierdo de unacaja.

<ancho-del-relleno> puede tomar uno de los siguientes valores:

medida

Especifica un ancho fijoj



porcentaje

El porcentaje es calculado con respecto al ancho del bloque decontención (aún para 'padding-top' y 'padding-bottom')

A diferencia de las propiedades del margen, los valores para el relleno no pueden sernegativos.

'padding'

Valores: <ancho-del-relleno>{1,4} | inherit



Se hereda?: no


La propiedad 'padding' es una propiedad resumida que se utiliza para definir los cuatrorellenos a la vez. Los signos {1,4} significan que pueden especificarse de 1 a 4 valorespara <ancho-del-relleno>:


Si hay dos valoreslos rellenos superior e inferior son determinados por el primer valor ylos 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 sondefinidos por el segundo, y el inferior es definido por el tercero

Si hay cuatro valoresse aplican al relleno superior, derecho, inferior e izquierdo,respectivamente.

El color de la superficie o la imagen del área de relleno es especificado a través de lapropiedad '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: <ancho-del-borde> | inherit

Valor inicial: medium


Se hereda?: noPorcentajes: no admitidos

Estas propiedades determinan el ancho de los bordes superior, derecho, inferior eizquierdo de una caja.

<ancho-del-borde> puede tomar uno de los siguientes valores:

thin

Un borde finomedium

Un borde mediothick

Un borde gruesomedida

El grosor del borde tiene un valor explícito. Las dimensiones del bordeexplícitas no pueden ser negativas.

Los interpretación de los tres primeros valores puede variar de un navegador a otro, pero

no la relación entre ellos.



'border-width'

Valores: <ancho-del-borde>{1,4} | inherit

Valor inicial: ver las propiedades individuales



La propiedad 'border-width' es una propiedad resumida que se utiliza para definir el anchode los cuatro bordes a la vez. Los signos {1,4} significan que pueden especificarse de 1a 4 valores para <ancho-del-borde>:


Si hay dos valoreslos bordes superior e inferior son determinados por el primer valor ylos bordes derecho e izquierdo son determinados por el segundo

Si hay tres valoresel superior es definido por el primer valor, el izquierdo y el derecho sondefinidos por el segundo, y el inferior es definido por el tercero

Si hay cuatro valoresse 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: <color> | inherit

Valor inicial: el valor de la propiedad 'color'


Se hereda?: no



Se hereda?: no

Porcentajes: no admitidos

Estas propiedades determinan el color de los bordes superior, derecho, inferior eizquierdo de una caja.

Los valores tienen los siguientes significados:

<color>

specifica un valor de colortransparent

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 lapropiedad 'color' del elemento para el color del borde.

'border-color'

Valores: <color>{1,4} | transparent | inherit



Se hereda?: no


La propiedad 'border-color' es una propiedad resumida que se utiliza para definir el colorde los cuatro bordes a la vez. Esta propiedad puede tener de uno a cuatro valores queson 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: <estilo-del-borde> | inherit

Valor inicial: none


Se hereda?: no


Estas propiedades determinan el estilo de los bordes superior, derecho, inferior eizquierdo de una caja.

<estilo-del-borde> puede tomar uno de los siguientes valores:

noneNingún borde

hiddenIgual a 'none'

dottedEl borde es una serie de puntos

dashedEl borde es una serie de pequeños segmentos de línea

solidEl borde es un único segmento de línea

doubleEl borde son dos líneas sólidas

grooveEl borde luce como si estuviese tallado en la página

ridgeLo opuesto a 'grove': el borde parece que estuviera sobresaliendo dela página

insetEl borde hace que toda la caja luzca como si estuviera empotrada enla página

outsetLo opuesto a 'inset': el borde hace que toda la caja parezca sobresalirde la página

Como el valor inicial del estilo de borde es 'none', ningún borde será visible a menos que

se establezca otro estilo de borde.



'border-style'

Valores: <estilo-del-borde>{1,4} | inherit




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

Ver ejemplos

Propiedades resumidas del borde:

'border-top', 'border-right', 'border-bottom', 'border-left'

Valores: [ <border-width> || <border-style> || <color> ] | inherit



Se hereda?: no


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 párrafos (un línea gruesa entera de colorrojo). Los valores que no se especifican son colocados en sus valores iniciales.

http://www.sidar.org/recur/desdi/mcss/manual/val.html#v_col

http://www.sidar.org/recur/desdi/mcss/manual/val.html#v_col



'border'

Valores: [ <border-width> || <border-style> || <color> ] | inherit



Se hereda?: no


La propiedad 'border' es una propiedad resumida para colocar el mismo ancho, color yestilo 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 cuatrobordes. Para eso, deben usarse una a más de las otras propiedades del borde.

Volver

3.2 Colores yfondos

Home Manual



¡CSS enacción!

Seleccioneotra hoja deestilo paranavegar:Actual:default.css

Ver

explicación

Anterior Siguiente

| Introducción | Color del primer plano | Propiedades del fondo |

Introducción

Las propiedades de CSS permiten a los autores especificar el color de primer plano de un elemento ytambién el color y el aspecto del fondo de un elemento.

Con las Hojas de Estilo, a diferencia del código HTML, cualquier elemento puede tener su propio color oimagen de fondo. Si la imagen no cubre todo el fondo se puede especificar su ubicación y el modo en quedebe repetirse; también si el fondo debe quedar fijo o desplazarse junto con el documento.

Volver

Color del primer plano

'color'

Valores: <color> | inherit

Valor inicial: depende de la aplicación del usuario (navegador)


Se hereda?: si


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

Volver

Default

OK

Propiedades del fondo

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



Background-color:

'background-color'

Valores: <color> | transparent | inherit

Valor inicial: transparent


Se hereda?: no


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 través. Las propiedades del fondo no seheredan, pero el fondo de la caja padre por defecto se verá a través debido al valor inicial 'transparent' para'background-color'.

Ver ejemplo

DIV { background-color: #FF0000 }

Background-image:

'background-image'

Valores: <uri> | none | inherit

Valor inicial: none


Se hereda?: no


Esta propiedad determina la imagen de fondo de un elemento. Cuando se pone una imagen de fondo, sedebe especificar también un color de fondo que será usado cuando la imagen no esté disponible. La imagenes procesada encima del color de fondo, de modo que el color es visible a través de las zonas

http://-/?-

http://-/?-



p , qtransparentes de la imagen.

Ver ejemplos

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

Background-repeat:

'background-repeat'

Valores: repeat | repeat-x | repeat-y | no-repeat | inherit

Valor inicial: repeat


Se hereda?: no


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:

repeatLa imagen es repetida tanto horizontal como verticalmente (mosaico)

repeat-xLa imagen es repetida sólo horizontalmente

repeat-yLa imagen es repetida sólo verticalmente

no-repeatSólo aparece una copia de la imagen, sin repetir

Ver ejemplos

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

}

http://-/?-

http://-/?-

http://-/?-

http://-/?-



Background-attachment:

'background-attachment'

Valores: scroll | fixed | inherit

Valor inicial: scroll


Se hereda?: no


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:[ [<porcentaje> | <medida> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] |

inherit

Valor inicial: 0% 0%

Se aplica a: los elementos reemplazados y a nivel de bloque

Se hereda?: no

Porcentajes: referidos al tamaño de la propia caja

Si se ha especificado una imagen de fondo, esta propiedad define su posición inicial.

http://-/?-

http://-/?-



<porcentaje> <porcentaje>

Con un par de valores de '0% 0%' (por ejemplo), la esquina superior izquierda de laimagen 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 inferiorderecha 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 2cmabajo de la esquina superior izquierda de la cajatop 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 rightIgual a '100% 50%'

bottom left y left bottomIgual a '0% 100%'

bottom, bottom center y center bottomIgual a '50% 100%'

bottom right y right bottomIgual a '100% 100%'

Si solamente se da un valor de porcentaje o de medida, éste determina la posición horizontal, la posiciónvertical será 50%. Si se dan dos valores, el primero es para la posición horizontal y el segundo para la

posición vertical. La combinación de valores de medida y de porcentajes está permitida (ej., ' 50% 2cm'), ylas posiciones negativas también están permitidas. Las palabras clave (top, left, center, etc.) nopueden ser combinadas con valores de porcentaje o de medida (todas las combinaciones posibles estándadas arriba).

Ver ejemplos

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

background-position: center top;}



Background:

'background'

Valores:[<'background-color'> || <'background-image'> || <'background-repeat'> ||

<'background-attachment'> || <'background-position'>] | inherit



Se hereda?: no

Porcentajes: permitidos en 'background-position'

Esta es una propiedad resumida para fijar la propiedades individuales del fondo en un solo paso. Si seespecifican 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

4.1 El formatovisual

Home Manual

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



¡CSS enacción!


Ver

explicación

Anterior Siguiente

| Introducción | "display" | "position" | "top", "right", "bottom", "left" |

Capas: "z-index" | "float" | "clear" |

Introducción

Si hay algo que extrañamos los diseñadores gráficos en el código HTML son lasherramientas que programas como Quark Express y PageMaker ofrecen para lacomposición de una página. El modelo de formato visual de CSS (es decir, el modelo quesiguen los navegadores para procesar el contenido de un documento para los mediosvisuales) permite que esas herramientas estén disponibles también para el diseño de laspáginas Web.

Este modelo de formato visual rige el comportamiento de las cajas generadas por los

elementos de la página. Hemos visto hasta ahora algunas propiedades (bordes,márgenes, rellenos) que pueden aplicarse a las cajas y también las propiedades quedefinen su color/imagen de fondo. Ahora vamos a ver cómo se puede definir el tipo ydimensiones de esas cajas, su comportamiento y relación con las otras cajas en laestructura del documento.

Para comenzar debemos saber que en HTML existen tres tipos de elementos:

Elementos de bloqueSon aquellos tratados visualmente como bloques separados de loselementos que lo rodean (por ejemplo: <P> o <DIV>). Para hacerlomás sencillo, podemos decir que son aquellos que comienzan unanueva línea dentro del documento. Los elementos a nivel de bloquegeneran una caja de bloque principal que sólo contiene otras cajas de

bloque .Elementos de línea

Son aquellos que no forman nuevos bloques de contenido; elcontenido es distribuido a nivel de las líneas (por ejemplo: <B> o<EM>).

Elementos de listaSon elementos de bloque que generan una caja principal y otras cajas

Default

OK

adicionales (generalmente contienen una viñeta o caracteresalfanuméricos) que se agregan al costado del elemento.



Volver

La propiedad "display"

'display'

Valores:

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

Valor inicial: inline


Se hereda?: no


A continuación se explica el significado de algunos de estos valores, pero al único al quevamos a dedicarle nuestra atención, por ahora, es a "none".

blockEste valor provoca que un elemento genere una caja de bloqueprincipal

inlineEste valor provoca que un elemento genere una o más cajas de línea

list-item

Este valor provoca que un elemento genere una caja de bloqueprincipal y una caja de línea list-item (por detalles ver la sección sobrelistas)

markerEste valor declara que el contenido generado antes o después de unacaja será un marcador (por detalles ver la sección sobre marcadores)

noneEste valor provoca que un elemento no genere ninguna caja (es decir,el elemento no tiene ningún efecto sobre la composición) y loselementos descendientes tampoco generan cajas. Hay que destacarque este valor no crea una caja invisible sino que hace que el

elemento desaparezca por completo. Esa es la diferencia con laspropiedades sobre visibilidad que provocan que un elemento puedaser invisible pero siga ocupando un espacio en la página



Ver

run-in y compactEstos valores crean cajas de bloque o de línea según el contexto ytienen un comportamiento como el que conocemos para las listas dedefiniciones

table, inline-table, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell y table-caption

Estos valores provocan que un elemento se comporte como unelemento tabla (por detalles ver la sección sobre tablas)

En este punto es necesario hacer algunas aclaraciones. Teóricamente, estos valores nospermiten alterar el comportamiento visual de los elementos de la página, por ejemplo,haciendo que un elemento a nivel de línea en HTML (supongamos <CODE>) setransforme en un elemento de bloque, de modo que cualquier texto marcado con<CODE></CODE> comenzaría en una nueva línea. De igual modo, podríamos hacer quecualquier elemento se comporte como una tabla o como parte de una tabla. Con HTML notiene mucho sentido ya que existen elementos como las tablas, columnas y celdas, perootros lenguajes (XML, por ejemplo) no tienen dichos elementos.

Volver

La propiedad "position"

'position'

Valores: static | relative | absolute | fixed | inherit

Valor inicial: static

Se aplica a: todos los elementos, no al contenido generado

Se hereda?: no


Con CSS los autores pueden ubicar los elementos de la página usando uno de estosvalores:

staticEsta es la posición predeterminada y la que conocemos en HTML. La

j i ú d d l fl j l d l á i l i d d



caja se sitúa dentro del flujo normal de la página y las propiedades'top', 'right', 'bottom' y 'left' no se aplican.

relativeLa posición de la caja se ajusta en relación a su posición normaldentro de la página. Cuando una caja X se posiciona relativamente lacaja siguiente se sitúa como si X no se hubiera desplazado.

Ver

absolute

Las cajas son quitadas del flujo normal de la página y su posición seespecifica con las propiedades 'left', 'right', 'top', y 'bottom'. Estaspropiedades especifican los desplazamientos con respecto al bloquede contención de la caja por lo que los elementos posicionadosabsolutamente no tienen ninguna influencia sobre la posición de lascajas siguientes. El bloque de contención para una caja posicionadaes establecido por el antepasado posicionado más cercano o, si noexiste, por el bloque de contención inicial (la esquina superiorizquierda de la página, en el modelo visual).

Ver

fixed

El posicionamiento fijo es una subcategoría del posicionamientoabsoluto. La única diferencia es que para una caja posicionada demodo fijo, el bloque de contención es establecido por el acceso visual(la pantalla del monitor) y el elemento no se mueve cuando se realizaun desplazamiento. Esto significa que cuando se hace un scroll en lapágina los elementos con position: fixed mantienen su posición en lapantalla.

Ver

DIV#def {position: absolute}

Volver

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

top

'top'

Valores: <medida> | <porcentaje> | auto | inherit



Valor inicial: auto

Se aplica a: los elementos posicionados

Se hereda?: no

Porcentajes: referidos a la altura del bloque de contención

Esta propiedad especifica la distancia que se desplaza el elemento por debajo del bordesuperior del bloque de contención de la caja.

right

'right'


Valor inicial: autoSe aplica a: los elementos posicionados

Se hereda?: no

Porcentajes: referidos al ancho del bloque de contención

Esta propiedad especifica la distancia que se desplaza el elemento hacia la izquierda delborde derecho del bloque de contención de la caja.

bottom

'bottom'


Valor inicial: auto


Se hereda?: no

Porcentajes: referidos a la altura del bloque de contención



Esta propiedad especifica la distancia que se desplaza el elemento por sobre de bordeinferior del bloque de contención de la caja.

left

'right'


Valor inicial: auto


Se hereda?: no

Porcentajes: referidos al ancho del bloque de contención

Esta propiedad especifica la distancia que se desplaza el elemento hacia la derecha delborde izquierdo del bloque de contención 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 contención. Para 'top' y'bottom', si la altura del bloque de contención no está especificadaexplícitamente (es decir, depende de la altura del contenido), el valordel porcentaje es interpretado como 'auto'.

autoEl efecto de este valor varía de acuerdo a otras propiedadesrelacionadas.

Para las cajas con position:absolute, el desplazamiento es con respecto al bloquede contención 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 suposición normal dentro de la página 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: auto | <entero> | inherit

Valor inicial: auto


Se hereda?: no


Como hemos visto, los elementos pueden ubicarse en posiciones precisas dentro de lapágina. Esta posibilidad puede provocar que, en algunos casos, ciertos elementos sesuperpongan visualmente con otros; en esas situaciones, ¿cuál queda por encima y cuálpor debajo?

Por lo general, el navegador usa el mismo orden que los elementos tienen en la páginapara definir el orden en que son apilados. Este orden dentro de la pila de elementospuede adjudicarse explícitamente con la propiedad z-index utilizando un valor entero(cuanto más alto el entero, más cercano al lector o más arriba en la pila).

Se dice que un elemento establece un contexto de pila al cual pertenecen todos susdescendientes. En cada uno de esos contextos se establece un nuevo nivel de pila paralos elementos descendientes. Y aquí lo importante: el contexto de pila (¡no la propiedad z-index!) es heredado y los elementos pertenecientes a distintos contextos no pueden

"mezclarse".

Veamos el significado de lo anterior con un ejemplo: si en una página 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 z-index=0: el elemento C, por pertenecer al contexto de pila del elemento ubicado másarriba, también será procesado por encima de B (aunque B tenga z-index=3). Todos loselementos descendientes de A se ubicarán por encima de B (y también por encima detodos los descendientes de B).

Estas reglas pueden resultar confusas pero son bastante intuitivas, ya que resulta lógicaque existiendo dos elementos con distinto orden, todos los descendientes del elemento ubicado más al frente se ubiquen por sobre todos los descendientes del elemento ubicado

más atrás . Por supuesto, la misma regla se aplica recursivamente a los descendientes deun 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 elementosposicionados (ver la propiedad 'position' más 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 también establece uncontexto de pila local en el cual su nivel de pila es '0'.

autoEl nivel de pila de la caja generada es el mismo que el de la caja de supadre. La caja no establece un nuevo contexto de pila local.

Ver

Volver

Flotantes: la propiedad 'float'

'float'

Valores: left | right | none | inherit

Valor inicial: none

Se aplica a: todos menos los elementos posicionados y los contenidos generados

Se hereda?: no




Un flotante es una caja que es desplazada a la izquierda o a la derecha en la línea actual.Esta propiedad especifica si una caja debe flotar a la izquierda, derecha o no debe flotaren absoluto. Los valores de esta propiedad tienen los siguientes significados:

leftEl elemento genera una caja de bloque que flota a la izquierda. Elcontenido fluye sobre el costado derecho de la caja, comenzando enla parte superior.

rightIgual que 'left', pero el contenido fluye sobre el costado izquierdo de lacaja, comenzando en la parte superior.

noneLa caja no es flotante.

Ver

Volver

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

'clear'

Valores: none | left | right | both | inherit

Valor inicial: none

Se aplica a: los elementos a nivel de bloque

Se hereda?: no


Esta propiedad indica cuál de los lados de la(s) caja(s) de un elemento no puede quedaradyacente a una caja flotante anterior. Esta propiedad sólo puede especificarse para

elementos a nivel de bloque (incluyendo también a los elementos flotantes). Los valorestienen los siguientes significados:



leftEl margen superior de la caja generada se aumenta lo suficiente paraque su borde superior quede debajo del borde inferior de cualquiercaja flotante a la izquierda que aparezca antes en el documento fuente.

rightEl margen superior de la caja generada se aumenta lo suficiente paraque su borde superior quede debajo del borde inferior de cualquiercaja flotante a la derecha que aparezca antes en el documento fuente.

bothLa caja generada se mueve debajo de todas las cajas flotantes queaparecen antes en el documento fuente.

noneNo existe ninguna restricción a la posición de la caja con respecto alos flotantes.

Ver

Volver

4.2 MedidasAnterior Siguiente

Home Manual



¡CSS enacción!


Ver

explicación

| Introducción | "width" | "min-width" y "max-width" | "height" | "min-

height" y "max-height" |

Introducción

Continuando con los temas referidos al formato visual, en esta sección veremos laspropiedades que permiten especificar una medida determinada para los elementos de lapágina (ancho y alto) y también sus medidas mínimas y máximas.

Volver

Ancho del contenido: 'width'

'width'


Valor inicial: auto

Se aplica a:todos los elementos, excepto los elementos de línea noreemplazados, las filas de las tablas y los grupos de filas

Se hereda?: no


Esta propiedad especifica el ancho del contenido de las cajas generadas por elementos anivel de bloque y elementos reemplazados (por ejemplo, IMG).

<medida>

Especifica un ancho fijo.<porcentaje>

Default

OK

Especifica el ancho según un porcentaje. El porcentaje es calculadocon respecto al ancho del bloque de contención de la caja.

autoEl ancho depende de los valores de otras propiedadess. Las reglas

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



El ancho depende de los valores de otras propiedadess. Las reglaspara determinar este valor pueden consultarse en la sección

[ Computando anchos y márgenes ] de la Especificación CSS2.

Volver

Anchos mínimo y máximo: 'min-width' y 'max-width'

'min-width'

'min-width'

Valores: <medida> | <porcentaje> | inherit

Valor inicial: depende del navegador

Se aplica a:todos los elementos, excepto los elementos de línea no reemplazadosy las tablas

Se hereda?: no


'max-width'

'max-width'

Valores: <medida> | <porcentaje> | none | inherit

Valor inicial: none


Se hereda?: no


Estas dos propiedades permiten restringir el ancho de las cajas a cierto rango.

<medida>

http://www.sidar.org/recur/desdi/mcss/css2/visudet.html#Computing_widths_and_margins

http://www.sidar.org/recur/desdi/mcss/css2/visudet.html#Computing_widths_and_margins



<medida>

Especifica un ancho mímimo o máximo fijo.<porcentaje>

Especifica un porcentaje para determinar el valor. El porcentaje escalculado con respecto al ancho del bloque de contención de la caja.

noneNo existe ninguna limitación en el ancho de la caja (sólo en 'max-width').

Volver

Altura del contenido: 'height'

'height'


Valor inicial: auto

Se aplica a:todos los elementos, excepto los elementos de línea noreemplazados, las columnas de la tabla y los grupos de columnas

Se hereda?: no

Porcentajes: ver el texto

Esta propiedad especifica la altura del contenido de las cajas generadas por elementos anivel de bloque y elementos reemplazados (por ejemplo, IMG).

<medida>

Especifica una altura fija.<porcentaje>

Especifica la altura según un porcentaje. El porcentaje es calculadocon respecto a la altura del bloque de contención de la caja. Si laaltura del bloque de contención no se especifica explícitamente (esdecir, depende de la altura del contenido) el valor es interpretadocomo 'auto'.

auto

La altura depende de los valores de otras propiedadess. Las reglaspara determinar este valor pueden consultarse en la sección

[Computando alturas y márgenes ] de la Especificación CSS2.

http://www.sidar.org/recur/desdi/mcss/css2/visudet.html#Computing_heights_and_margins

http://www.sidar.org/recur/desdi/mcss/css2/visudet.html#Computing_heights_and_margins



Volver

Alturas mínima y máxima: 'min-height' y 'max-height'

'min-height'

'min-height'

Valores: <medida> | <porcentaje> | inherit

Valor inicial: 0


Se hereda?: no

Porcentajes: se refieren a la altura del bloque de contención

'max-height'

'max-height'

Valores: <medida> | <porcentaje> | none | inherit

Valor inicial: none


Se hereda?: no


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

<medida>

Especifica una altura mímima o máxima fija.<porcentaje>



Especifica un porcentaje para determinar el valor. El porcentaje escalculado con respecto a la altura del bloque de contención de la caja.Si la altura del bloque de contención no se especifica explícitamente(es decir, depende de la altura del contenido) el valor es interpretadocomo 'auto'.

noneNo existe ninguna limitación en el ancho de la caja (sólo en 'max-height').

Volver

5.1 Efectos visualesAnterior Siguiente

Home Manual



¡CSS enacción!


Ver

explicación

| Introducción | "overflow" | "clip" | "visibility" |

Introducción

Existen propiedades que permiten aplicar algunos efectos visuales en la página: recortaruna parte de la caja de un elemento, especificar el comportamiento para los casos en queel contenido de un elemento es mayor que su tamaño y provocar que un elemento seainvisible.

Volver

Desbordamiento: la propiedad 'overflow'

Generalmente el contenido de una caja de bloque se mantiene dentro de los límites de lacaja, pero puede suceder que el contenido desborde esos límites y quede parcial ototalmente fuera de la caja.

Esto puede suceder si especificamos un tamaño determinado para un elemento (con laspropiedades 'width' y 'height', por ejemplo) y su contenido resulta demasiado grandepara las medidas adjudicadas. También puede darse al utilizar márgenes negativos oposiciones absolutas para el elemento.

Cuando se produce un desbordamiento, la propiedad 'overflow' especifica si la caja esrecortada y (en caso afirmativo) cómo será recortada. La propiedad 'clip' especifica eltamaño y la forma de la zona de recorte.

'overflow'

Valores: visible | hidden | scroll | auto | inherit

Default

OK

Valor inicial: visible

Se aplica a: los elementos a nivel de bloque y reemplazados

Se hereda?: no



Se hereda?: no


Esta propiedad especifica si el contenido de un elemento a nivel de bloque es recortadocuando desborda la caja del elemento. Los valores tienen los siguientes significados:

visibleEste valor indica que el contenido no es recortado, es decir, puede serprocesado fuera de la caja de bloque.

hiddenEste valor indica que el contenido es recortado y los usuarios notendrán acceso al contenido recortado. El tamaño y forma de la zonade recorte son especificados por la propiedad 'clip'.

scrollEste valor indica que el contenido es recortado y el navegador debeproporcionar 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, perosignifica que éste debe proporcionar un mecanismo dedesplazamiento para las cajas desbordadas.

Ver

DIV { overflow: scroll }

Volver

Recorte: la propiedad 'clip'

'clip'

Valores: <forma> | auto | inherit

Valor inicial: auto

S li l l t i l d bl l d



Se aplica a: los elementos a nivel de bloque y reemplazados

Se hereda?: no


Una zona de recorte define qué porción del contenido de un elemento es visible. De

manera predeterminada, la zona de recorte tiene el mismo tamaño y forma que la caja delelemento. 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 unvalor diferente a 'visible'. Los valores tienen los siguientes significados:

autoLa zona de recorte tiene el mismo tamaño y ubicación 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 medidasnegativas están permitidas y 'auto' significa lo mismo que '0' (cero).

Ver

Las zonas de recorte son todas rectangulares. En futuras versiones de CSS es probableque se agreguen otras formas.

Volver

Visibilidad: la propiedad 'visibility'

'visibility'

Valores: visible | hidden | collapse | inherit

Valor inicial: inherit

Se aplica a: todos menos los elementos

Se hereda?: no



Se hereda?: no


Esta propiedad especifica si las cajas generadas por un elemento son procesadas.Aunque el elemento sea invisible sigue afectando la composición de la página, es decir,continúa ocupando su espacio. Los valores tienen los siguientes significados:

visibleEl elemento es visible.

hiddenEl elemento es invisible (totalmente transparente), pero sigueafectando la composición.

collapseSi se usa en otros elementos que no sean filas o columnas de unatabla, 'collapse' tiene el mismo significado que 'hidden'.

Esta propiedad puede ser usada conjuntamente con scripts para crear efectos dinámicos.

Ver

Volver

5.2 Interfaz delusuario

Anterior Siguiente

Home Manual



¡CSS enacción!


Ver

explicación

| Introducción | "Cursor" | Contornos: "outline" | "outline-width" | "outline-

style" | "outline-color" |

Introducción

Existen dos propiedades pertenecientes a la interfaz del usuario (los controles ymecanismos ofrecidos por el navegador para la interacción con el usuario) que están muyrelacionados con el formato visual y los efectos visuales en la página: 'cursor' y 'outline'.

Otras propiedades referidas a la interfaz del usuario, como el uso de los colores del

entorno gráfico y las fuentes del sistema del usuario son tratados en otras secciones de

este manual.

Volver

Cursores: la propiedad 'cursor'

'cursor'

Valores:

[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-

resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize|text | wait | help ] ] | inherit

Valor inicial: auto


Se hereda?: si


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

Default

OK

señalador. Los valores tienen los siguientes significados:

autoEl navegador determina el cursor a mostrar basado en el contexto

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



gactual.

crosshairUna cruz simple.

defaultEl cursor predeterminado de la plataforma. A menudo es una flecha.

pointerEl cursor es un puntero que indica un enlace.

moveIndica que algo será movido.

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize

Indica que algún borde será movido. Por ejemplo, el cursor 'se-resize'se usa cuando el movimiento comienza desde la esquina sudeste dela caja.

textIndica texto que puede seleccionarse. A menudo es una barra-I.

waitIndica que el programa está ocupado y el usuario debe esperar. A

menudo es un reloj.helpHay ayuda disponible sobre el objeto señalado por el cursor. Amenudo es un signo de interrogación.

<uri>La aplicación del usuario recupera el cursor señalado por el URI. Si laaplicación del usuario no puede manejar el primero de una lista decursores, debe intentar manejar el segundo, etc. Si la aplicación delusuario no puede manejar ningún cursor definido por el usuario, debeusar el cursor genérico al final de la lista.

Ver

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

Volver

Contornos dinámicos: la propiedad 'outline'

Con CSS podemos crear contornos alrededor de los objetos visuales como botones,campos activos de los formularios, mapas de imágenes, etc., para enfatizarlos. Loscontornos de CSS difieren de los bordes en los siguientes sentidos:

http://-/?-

http://-/?-



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

Estas propiedades controlan el estilo de los contornos dinámicos:

'outline'

Valores: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit



Se hereda?: no


'outline-width'

'outline-width'

Valores: <border-width> | inherit

Valor inicial: medium


Se hereda?: no


'outline-style'

'outline-style'

Valores: <border-style> | inherit

Valor inicial: none


http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-




Se hereda?: no


'outline-color'

'outline-color'

Valores: <color> | invert | inherit

Valor inicial: invert


Se hereda?: no


Estas son características de los contornos:

q El contorno es dibujado "sobre" una caja, es decir, el contorno estásiempre encima y no influye en la posición o tamaño de la caja.

q Los contornos pueden ser no rectangulares. Por ejemplo, si elelemento es dividido entre varias líneas, el contorno es el contornomínimo que encierra a todas las cajas del elemento.

q La propiedad 'outline-width' acepta los mismos valores que'border-width'.

q La propiedad 'outline-style' acepta los mismos valores que'border-style', excepto 'hidden'.

q La propiedad 'outline-color' acepta todos los colores, como asítambién la palabra clave 'invert'. Se espera que 'invert' produzcauna inversión de color en los pixeles de la pantalla. Este es un trucocomún para asegurarse que el borde del foco sea visible, sin queimporte el color de fondo.

q El contorno es el mismo en todos los lados. Contrariamente a losbordes, no hay propiedades 'outline-top ' o 'outline-left '.

Ver

BUTTON { outline-width: thick }



BUTTON { outline width: thick }

Volver

5.3 Contenidogenerado

Anterior Siguiente

Home Manual

http://-/?-

http://-/?-



¡CSS enacción!


Ver

explicación

| Introducción | Contenido: "Content" | Comillas: "quotes" |

Contadores y numeración automática |

Introducción

Existen en HTML determinados elementos que provocan la aparición de contenidos queno son parte del documento fuente. Es el caso de las listas ordenadas ( OL) que sonrepresentadas gráficamente como párrafos numerados; las listas sin ordenar (UL) queinsertan una viñeta antes de cada ítem; las citas (Q) y (BLOCKQUOTE) que son procesadasentre comillas.

Las CSS tienen propiedades específicas para controlar el aspecto gráfico de taleselementos. Más aún, podemos generar contenidos para insertar antes o después de otroselementos, además de los mencionados.

Esta posibilidad se contradice en parte con la regla de separar el contenido de la páginade su presentación, pero resulta útil para aquellos casos en que cierto elemento se repitefrecuentemente en la edición o que deba actualizarse periódicamente. En todo caso, setrata de una manera de ampliar la gama de herramientas disponibles para el autor.

Volver

La propiedad 'content'

'content'

Valores:[ <cadena> | <uri> | <contador> | attr(X) | open-quote | close-quote |

no-open-quote | no-close-quote ]+ | inherit

Valor inicial: una cadena vacía

Se aplica a: los pseudo-elementos :before y :after

Default

OK

Se hereda?: no


http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



Esta propiedad se usa con los pseudo-elementos :before y :after para generarcontenido en un documento. Los valores tienen los siguientes significados:

<cadena>

Contenido del texto.<uri>

El valor es un URI que señala un recurso externo. En estos casos, lasCSS no ofrecen ningún mecanismo para cambiar el tamaño del objetoincrustado o para proporcionar una descripción textual, tal como losatributos "alt" o "longdesc" hacen con las imágenes en HTML.

<contador>Los contadores pueden especificarse mediante dos funcionesdistintas: 'counter()' y 'counters()'. Ver la sección sobre contadores y

numeración automática para mayor información.

open-quote y close-quoteEstos valores son reemplazados con la correspondiente cadena de la

propiedad 'quotes'. Ver la sección sobre comillas en esta página.no-open-quote y no-close-quote

No inserta nada (una cadena vacía), pero incrementa o disminuye elnivel de anidamiento de las comillas.

attr(X)Esta función devuelve como una cadena el valor del atributo X delsujeto del selector. Si éste no tiene un atributo X, se devuelve unacadena vacía.

Para generar contenido en una página se efectúan dos operaciones:

Primero, con los pseudo-elementos :before y :after se especifica dónde 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 "Título: " antes de cada elemento<H1>:

H1:before {content: "Título: "}

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

http://-/?-

http://-/?-

http://-/?-

http://-/?-



Volver

Comillas: la propiedad 'quotes'

Las comillas se usan principalmente para destacar una cita o una frase reproducidatextualmente; también para indicar un matiz irónico y en los casos en que se utilizanneologismos. Subsiste a veces la costumbre de utilizarlas para "enfatizar" un texto, peropara esto se dispone de otros recursos más adecuados como las itálicas , las negritas oel subrayado.

En CSS2, los autores pueden especificar qué tipos de comillas debe usar el navegadorsegún el contexto o por preferencias de estilo. La propiedad 'quotes' especifica pares decomillas para cada nivel de citas anidadas y la propiedad 'content' permite que seaninsertadas antes o después de una cita.

'quotes'

Valores: [<cadena> <cadena>]+ | none | inherit

Valor inicial: depende de la aplicación del usuario


Se hereda?: si


Esta propiedad especifica las comillas para las citas anidadas. Los valores tienen estossignificados:

noneLos valores 'open-quote' y 'close-quote' de la propiedad 'content' noproducen 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 (más a la izquierda) par representa el nivel más externo de lacita, el segundo par el primer nivel de anidamiento, etc.

http://-/?-

http://-/?-



Ver

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

Volver

Contadores y numeración automática

La numeración automática en CSS2 es controlada con dos propiedades, 'counter-increment' y 'counter-reset'. Los contadores definidos por estas propiedades se usan conlas funciones counter() y counters() de la propiedad 'content'.

'counter-reset'

'counter-reset'

Valores: [ <identificador> <entero>? ]+ | none | inherit

Valor inicial: none



'counter-increment'

'counter-increment'

Valores: [ <identificador> <entero>? ]+ | none | inherit

Valor inicial: none


http://-/?-

http://-/?-



Se hereda?: no


La propiedad 'counter-increment' acepta uno o más nombres de contadores

(identificadores), cada uno seguido de manera opcional por un entero. El entero indica encuanto se incrementará el contador con cada aparición del elemento. El incrementopredeterminado es 1 y se admiten enteros negativos o el cero.

La propiedad 'counter-reset' también contiene una lista de uno o más nombres decontadores, cada uno seguido de manera opcional por un entero. El entero da el valor enque el contador es colocado con cada aparición 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 HTMLencontramos dos tipos de listas: las ordenadas (OL) y las listas sin ordenar (UL). Estaslistas generan una caja principal para el contenido y una caja de marcador (una viñeta, unnúmero, etc.). El mismo comportamiento se espera de cualquier elemento con lapropiedad 'display: list-item'.

Las propiedades de lista permiten especificar el tipo de marcador y su posición conrespecto a la caja principal (afuera o dentro de ella antes del contenido). No permiten alos autores especificar distintos estilos (color, fuente, alineación, etc.) para los marcadoresde listas o ajustar su posición con respecto a la caja principal. Con las propiedades delista, las propiedades del fondo se aplican solamente a la caja principal; una caja demarcador 'outside' es siempre transparente.

'list-style-type'

'list-style-type'

http://-/?-

http://-/?-



Valores:

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

Valor inicial: disc

Se aplica a: los elementos con 'display: list-item'

Se hereda?: si


El valor 'none' especifica ningún marcador, de lo contrario hay tres tipos de marcadores:signos , sistemas numéricos y sistemas alfabéticos . Esta propiedad especifica laapariencia del marcador de los ítems de la lista.

Nota: Las listas numeradas mejoran la accesibilidad del documento haciendo a las listasmás fáciles de navegar.

Los signos son especificados con disc, circle y square. Su forma exacta depende delnavegador.

Los sistemas numéricos son especificados con:

decimalNúmeros decimales, comenzando de 1.

decimal-leading-zeroNúmeros decimales completados con ceros iniciales (ej., 01, 02,03, ..., 98, 99).

lower-romanNúmeros romanos en minúsculas (i, ii, iii, iv, v, etc.).

upper-romanNúmeros romanos en mayúsculas (I, II, III, IV, V, etc.).

hebrewNumeración hebrea tradicional.

georgian

Numeración georgiana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...).

armenianNumeración armenia tradicional.

cjk-ideographic



j g pNúmeros ideográficos 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 aplicación del usuario que no reconoce un sistema numérico debe usar 'decimal'.

Ver

Volver

Indice dePropiedades

Home Manual

http://-/?-

http://-/?-



¡CSS enacción!


Ver

explicación

En esta página encontrarán ordenadas por orden alfabético todas las propiedades que sepueden aplicar en las CSS. En la primer columna de la tabla, cada propiedad es un link auna página donde se dan precisiones acerca de esa propiedad: definición, significado delos valores, medios a los que se aplica, su valor inicial, si se hereda, etc. La segundacolumna contiene todos los valores posibles para cada propiedad. En su mayoría se trata

de palabras claves (left, top, transparent, etc.) que se usan literalmente y cuyosignificado se explica en la página dedicada a cada propiedad. En otros casos (como<ángulo>, <color>, <medida>, etc) son datos básicos que contienen un link a lapágina donde se explican sus posibles valores. Un tercer caso es cuando comparten elmismo rango de valores de una propiedad con el mismo nombre (<'border-width'>,<'background-attachment'>, etc), en cuyo caso es un link a la definicióncorrespondiente. Notarán que la lista de valores están organizados mediante algunossignos. El significado es el siguiente:

q Varias palabras puestas una a continuación de la otra, significa quetodas ellas deben aparecer (y en el mismo orden).

q

Las palabras separadas por una barra (|) son alternativas: solamente una de ellas debe usarse.q Las palabras separadas por una barra doble (||) son opciones: una o

más pueden aparecer.q Los corchetes ([]) son para agrupar.

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

q Un asterisco (*) indica que el tipo, palabra o grupo precedente (esdecir, aquello encerrado por los corchetes) aparece cero o más veces.

q Una signo más (+) indica que aparece una o más veces.q Un signo de interrogación (?) indica que es opcional .q Un par de números 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 práctica no senecesitan consultar tantos detalles y el sentido común se encarga de avisarnos que siponemos una fuente como normal no podemos, simultáneamente, ponerla como itálica.Esta tabla les resultará muy útil como una referencia rápida para consultar en todomomento, así que mi consejo (por experiencia propia) es hacer una copia impresa y

Default

OK

tenerla siempre a mano.

Indice de propiedades



Propiedad Valores

'azimuth'

<ángulo> | [[ left-side | far-left | left | center-

left | center | center-right | right | far-right |right-side ] || behind ] | leftwards | rightwards |inherit

'background'

['background-color' || 'background-image'

|| 'background-repeat' || 'background-

attachment' || 'background-position' ] |

inherit

'background-attachment' scroll | fixed | inherit

'background-color' <color> | transparent | inherit

'background-image' <uri> | none | inherit

'background-position'

[ [<porcentaje> | <medida> ]{1,2} | [ [top |

center | bottom] || [left | center | right] ] ] |inherit

'background-repeat' repeat | repeat-x | repeat-y | no-repeat |inherit

'border' [ border-width || border-style || <color> ] |

inherit

'border-collapse' collapse | separate | inherit

'border-color' <color>{1,4} | transparent | inherit

'border-spacing' <medida> <medida>? | inherit

'border-style' <estilo-del-borde>{1,4} | inherit

'border-top' 'border-right' 'border-

bottom' 'border-left'

[ border-width || border-style || <color> ] |

inherit

'border-top-color' 'border-right-

color' 'border-bottom-color' 'border-

left-color'

<color> | inherit

'border top st le' 'border right

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



'border-top-style' 'border-right-

style' 'border-bottom-style' 'border-

left-style'

<estilo-del-borde> | inherit

'border-top-width' 'border-right-

width' 'border-bottom-width'

'border-left-width'

<ancho-del-borde> | inherit

'border-width' <ancho-del-borde>{1,4} | inherit

'bottom' <medida> | <porcentaje> | auto | inherit

'caption-side' top | bottom | left | right | inherit

'clear' none | left | right | both | inherit

'clip' <forma> | auto | inherit

'color' <color> | inherit

'content'

[ <cadena> | <uri> | <contador> | attr(X) |

open-quote | close-quote | no-open-quote |no-close-quote ]+ | inherit

'counter-increment' [ <identificador> <entero>? ]+ | none |

inherit

'counter-reset' [ <identificador> <entero>? ]+ | none |

inherit

'cue' [ 'cue-before' || 'cue-after' ] | inherit

'cue-after' <uri> | none | inherit

'cue-before' <uri> | none | inherit

'cursor'

[ [<uri> ,]* [ auto | crosshair | default | pointer

| move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



'direction' ltr | rtl | inherit

'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

'elevation'<ángulo> | below | level | above | higher |

lower | inherit

'empty-cells' show | hide | inherit

'float' left | right | none | inherit

'font'

[ [ 'font-style' || 'font-variant' || 'font-weight' ]?'font-size' [ / 'line-height' ]? 'font-family' ] |caption | icon | menu | message-box | small-

caption | status-bar | inherit

'font-family'

[[ <nombre-de-la-familia> | <familia-genérica> ],]* [<nombre-de-la-familia> |<familia-genérica>] | inherit

'font-size'<tamaño-absoluto> | <tamaño-relativo> |<medida> | <porcentaje> | inherit

'font-size-adjust' <número> | none | inherit

'font-stretch'

normal | wider | narrower | ultra-condensed |extra-condensed | condensed | semi-condensed | semi-expanded | expanded |extra-expanded | ultra-expanded | inherit

'font-style' normal | italic | oblique | inherit

'font-variant' normal | small-caps | inherit

'font-weight'normal | bold | bolder | lighter | 100 | 200 |300 | 400 | 500 | 600 | 700 | 800 | 900 |inherit

'height' <medida> | <porcentaje> | auto | inherit



height <medida> | <porcentaje> | auto | inherit

'left' <medida> | <porcentaje> | auto | inherit

'letter-spacing' normal | <medida> | inherit

'line-height'normal | <número> | <medida> |

<porcentaje> | inherit

'list-style'[ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit

'list-style-image' <uri> | none | inherit

'list-style-position' inside | outside | inherit

'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

'margin' <ancho-del-margen>{1,4} | inherit

'margin-top' 'margin-right' 'margin-

bottom' 'margin-left' <ancho-del-margen> | inherit

'marker-offset' <medida> | auto | inherit

'marks' [ crop || cross ] | none | inherit

'max-height' <medida> | <porcentaje> | none | inherit

'max-width' <medida> | <porcentaje> | none | inherit

'min-height' <medida> | <porcentaje> | inherit

'min-width' <medida> | <porcentaje> | inherit

'orphans' <entero> | inherit

'outline' [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



'outline-color' <color> | invert | inherit

'outline-style' <border-style> | inherit

'outline-width' <border-width> | inherit

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

'padding' <ancho-del-relleno>{1,4} | inherit

'padding-top' 'padding-right'

'padding-bottom' 'padding-left' <ancho-del-relleno> | inherit

'page' <identificador> | auto

'page-break-after' auto | always | avoid | left | right | inherit

'page-break-before' auto | always | avoid | left | right | inherit

'page-break-inside' avoid | auto | inherit

'pause' [ [<tiempo> | <porcentaje>]{1,2} ] | inherit

'pause-after' <tiempo> | <porcentaje> | inherit

'pause-before' <tiempo> | <porcentaje> | inherit

'pitch'<frecuencia> | x-low | low | medium | high | x-

high | inherit

'pitch-range' <número> | inherit

'play-during' <uri> mix? repeat? | auto | none | inherit

'position' static | relative | absolute | fixed | inherit

'quotes' [<cadena> <cadena>]+ | none | inherit

'richness' <número> | inherit

'right' <medida> | <porcentaje> | auto | inherit

'size'<medida>{1,2} | auto | portrait | landscape |

inherit

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



'speak' normal | none | spell-out | inherit

'speak-header' once | always | inherit

'speak-numeral' digits | continuous | inherit

'speak-punctuation' code | none | inherit

'speech-rate'<número> | x-slow | slow | medium | fast | x-

fast | faster | slower | inherit

'stress' <número> | inherit

'table-layout' auto | fixed | inherit

'text-align'left | right | center | justify | <cadena> |

inherit

'text-decoration' none | [ underline || overline || line-through ||blink ] | inherit

'text-indent' <medida> | <porcentaje> | inherit

'text-shadow'

none | [<color> || <medida> <medida>

<medida>? ,]* [<color> || <medida>

<medida> <medida>?] | inherit

'text-transform'capitalize | uppercase | lowercase | none |inherit

'top' <medida> | <porcentaje> | auto | inherit

'unicode-bidi' normal | embed | bidi-override | inherit

'vertical-align'

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

<medida> | inherit

'visibility' visible | hidden | collapse | inherit

'voice-family'[[<voz-específica> | <voz-genérica> ],]* [<voz-específica> | <voz-genérica> ] | inherit



¡CSS enacción!


Ver

explicación

Enteros

Por entero se entiende un número entre cero (0) y nueve (9). Puede estar precedido porlos signos de más (+) o menos (-) para indicar si es positivo o negativo. Ej.: 3, -8, +5.

Números

Un número puede tener la foma de un entero (ver arriba) o puede consistir en un númeroentre 0 y 9 seguido por un punto (.) y uno o más dígitos. Puede estar precedido por lossignos de más (+) o menos (-) para indicar si es positivo o negativo. Ej.: 3, +2.5, -5,25.

Medidas

Por medida se entiende las dimensiones horizontales y verticales. Su forma es unnúmero (con o sin punto decimal) seguido por un identificador de la unidad (por ejemplo:

cm, deg, etc.). Puede estar precedido por los signos de más (+) o menos (-) para indicarsi es positivo o negativo. Cuando la medidad es cero (0), el identificador de la unidad esopcional (ejemplo: 0px es lo mismo que 0).

Hay dos tipos de unidades de medida: relativas y absolutas . Las unidades relativasespecifican una medida en relación a otra propiedad de medida. Las unidades de medidaabsoluta son útiles solamente cuando la propiedades físicas del medio de salida sonconocidas.

Las unidades relativas son:

Default

OK

Volver

Volver

q em: el tamaño ('font-size') de la fuente relevanteq ex: la 'altura de la x' de la fuente relevanteq px: pixeles, relacionados con los dispositivos visuales

Las unidades absolutas son:



Las unidades absolutas son:

q in: inches (pulgadas) - 1 pulgada es igual a 2.54 centímetrosq cm: centímetrosq mm: milímetrosq pt: puntos - 1 punto es igual a 1/72 de pulgadaq

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 sección sobre Cascada y Herencia).Ver ejemplos

Porcentajes

El formato de estos valores es un número seguido por el signo de porcentaje (%). Puede

estar precedido por los signos de más (+) o menos (-) para indicar si es positivo onegativo. 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 tamaño de la fuente del elemento padre.

A este párrafo le hemos aplicado la propiedad "font-size: 110%"por eso es un 10% más grande que el resto.

Los elementos hijos heredan los valores computados, no el valor del porcentaje. Ver

ejemplos

Volver

Volver

URL

Los URL (Uniform Resource Locators) indican la dirección de un recurso en la Web. Lasformas que puede adoptar son:



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 dirección puede ir o no entre comillas, y puede usarse un par de comillassimples (') o dobles ("). Hay URL absolutos (como los anteriores) que especifican ladirección completa, y URL relativos , que indican la dirección de un recurso en relacióncon la ubicación 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 página HTML, los URL relativos loson con respecto al archivo que contiene a Hoja de Estilo.

Color

Un color puede ser especificado por una palabra clave o por una fórmula numérica.

Palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,

red, silver, teal, white y yellow. Ver

Especificación numérica: se usa el modelo de color RGB (Red, Green, Blue).

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

Volver

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

Los dos primeros usan la notación hexadecimal (0123456789ABCDEF) y su forma es elsigno de numeral (#) seguido de tres o seis dígitos La fórmula de tres números se usa



signo de numeral (#) seguido de tres o seis dígitos. La fórmula de tres números se usacomo simplificación cuando cada dígito se repite. Por ejemplo #ff99dd, puede escribirse#f9d.

Las dos últimas usan la fórmula rgb(r, g, b). El modelo de color RGB permiteespecificar 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 coloresprimarios. 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 elnúmero más alto no es 256 sino 255. También es posible utilizar porcentajes, donde

100% es igual a 255. Ver

Colores del sistema: se usan palabras clave que especifican colores del entorno gráficodel usuario. Cualquier propiedad de color puede tomar uno de los siguientes nombres:

ActiveBorderBorde de la ventana activa.

ActiveCaptionTítulo de la ventana activa.

AppWorkspaceColor de fondo de una interfaz de documentos múltiples.

BackgroundFondo del escritorio.

ButtonFaceColor de la cara de los elementos tridimensionales de la pantalla.

ButtonHighlightSombra oscura de los elementos tridimensionales de la pantalla.

ButtonShadowColor de la sombra de los elementos tridimensionales de la pantalla.

ButtonTextTexto de los botones.

CaptionTextTexto de los títulos, cajas de dimensiones y cajas de flechas de lasbarras de desplazamiento.

GrayTextTexto grisado (deshabilitado).

HighlightItem(s) seleccionados en un control.HighlightText

Texto del(los) item(s) seleccionados en un control.InactiveBorder

Borde de la ventana inactiva



Borde de la ventana inactiva.InactiveCaption

Título de la ventana inactiva.InactiveCaptionText

Color del texto de un título inactivo.InfoBackground

Color de fondo de los controles de sugerencias (tooltip).

InfoTextColor del texto de los controles de sugerencias (tooltip).

MenuFondo del menu.

MenuTextTexto de los menúes.

ScrollbarArea gris de la barra de desplazamiento.

ThreeDDarkShadowSombra oscura de los elementos tridimensionales de pantalla.

ThreeDFace

Color de la cara de los elementos tridimensionales de pantalla.ThreeDHighlightColor resaltado de los elementos tridimensionales de pantalla.

ThreeDLightShadowColor claro de los elementos tridimensionales de pantalla.

ThreeDShadowSombra oscura de los elementos tridimensionales de pantalla.

WindowFondo de la ventana.

WindowFrameMarco de la ventana.

WindowText

Texto de la ventana.

El uso de los colores del sistema del usuario permiten hacer páginas que coinciden conlas preferencias y gustos del lector. Esto es importante en los casos en que esaspreferencias tienen que ver con alguna discapacidad (ceguera a ciertos colores, por

ejemplo). Ver ejemplos

Angulos

Volver



Los valores de ángulos, paradójicamente, se usan solamente con las hojas de estiloauditivas. Su forma es un número seguido por un identificador de la unidad del ángulo.

Puede estar precedido por los signos de más (+) o menos (-) para indicar si es positivo onegativo.

Los identificadores de la unidad del ángulo son:

q deg: degree (grados)q grad: gradianesq rad: radianes

En el ejemplo siguiente, se especifica un ángulo de 90º a la derecha mediante los tresidentificadores:

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

Tiempo

Los valores de tiempo son usados con las hojas de estilo auditivas. Su forma es un

número seguido por un identificador de la unidad de tiempo.

Los identificadores para la unidad de tiempo son:

q ms: milisegundosq s: segundos

Los valores de tiempo no pueden ser negativos.

Volver

Frecuencia

Volver



Los valores de frecuecia son usados con las hojas de estilo auditivas. Su forma es unnúmero seguido por un identificador de la unidad de frecuencia.

Los identificadores para la unidad de frecuencia son:

q Hz: Hertzq 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.

Cadenas

Una cadena de texto puede escribirse con comillas dobles o simples. Dentro de unacomilla doble sólo 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 esuna palabra clave, "red" es una cadena de texto. Una cadena vacía se indica ("").

Identificadores

Volver

Volver

Los identificadores (incluyendo los nombres de los elementos, clases e ID de losselectores) pueden contener sólo caracteres más el guión (-); no pueden comenzar conun guión o un número.



Forma

En CSS2, el único valor permitido para la forma es: rect(arriba, derecha,abajo, izquierda). Arriba, derecha, abajo, izquierda especifican losdesplazamientos 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 están permitidas.Ejemplo:

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

Inherit

"Inherit" significa que el elemento toma el mismo valor computado que la propiedad delpadre del elemento. De este modo, se refuerza explícitamente el valor heredado. Pero,además, este valor se aplica aún a propiedades que de otro modo no serían heredadas.

Volver

Volver

Volver

Tabla de nombres decolores

Home Manual




Ver

explicación

La siguiente tabla muestra los 16 colores que pueden especificarse mediante susnombres. Cuando se usa un nombre, se debe recordar que son palabras clave y nodeben ir entre comillas. Las demás columnas muestras las otras fórmulas usadas en CSSpara expresar esos mismos colores.

Muestra del

colorNombre #RRGGBB R,G,B R%,G%,B%

Black #000000 0,0,0 0%,0%,0%

Maroon #800000 128,0,0 50%, 0%, 0%

Green #008000 0,128,0 0%,50%, 0%

Olive #808000 128,128,0 50%,50%, 0%

Navy #000080 0,0,128 0%, 0%,50%

Purple #800080 128,0,128 50%, 0%,50%Teal #008080 0,128,128 0%,50%,50%

Silver #C0C0C0 192,192,192 75%,75%,75%

Gray #808080 128,128,128 50%,50%,50%

Red #FF0000 255,0,0 100%, 0%, 0%

Lime #00FF00 0,255,0 0%,100%, 0%

Yellow #FFFF00 255,255,0 100%,100%, 0%

Blue #0000FF 0,0,255 0%, 0%,100%

Fuchsia #FF00FF 255,0,255 100%, 0%,100%Aqua #00FFFF 0,255,255 0%,100%,100%

White #FFFFFF 255,255,255 100%,100%,100%

Default

OK

Volver



Tabla de colores delsistema

Home Manual




Ver

explicación

La siguiente tabla muestra las palabras clave que pueden usarse para definir coloresrelacionados con el entorno gráfico del usuario. La columna de la izquierda es unamuestra de esos colores que, por supuesto, se modificarán si ustedes cambian lasopciones en su sistema.

Muestra del color Nombre

ActiveBorder

ActiveCaption

AppWorkspace

Background

ButtonFace

ButtonHighlight

ButtonShadow

ButtonText

CaptionText

GrayText

Highlight

HighlightText

InactiveBorder

InactiveCaption

InactiveCaptionText

InfoBackground

InfoText

Menu

MenuText

Scrollbar

Default

OK

ThreeDDarkShadowThreeDFace

ThreeDHighlight

ThreeDLightShadow



ThreeDShadow

Window

WindowFrame

WindowText

Volver

PaletaWeb

Home Manual




Ver

explicación

El modelo RGB requiere de 24 bits para describir el color de cada pixel en la pantalla y eltotal de combinaciones posibles mediante este modelo es exactamente de 16.777.216colores. Aunque cualquier monitor a color puede mostrar todos estos tonos, por razonesde economía algunas computadoras usan un sistema de sólo 8 bits conformando así unapaleta de 256 colores (tomados de esos 16 millones posibles).

En un monitor capaz de mostrar solamente 256 colores, aquellos tonos presentes en unaimagen que no se encuentran en la paleta del sistema son simulados por combinación depixeles (técnica que se conoce como dithering ). Por eso, en la medida de lo posible, esconveniente seleccionar para nuestras páginas colores que puedan ser visualizadoscorrectamente en estos sistemas.

El inconveniente es la diferencia entre los colores definidos en la paleta de Windows y lade Mac. Ambos sistemas tienen solamente algunos colores en común, que son usadospor Netscape y otros navegadores. Estos colores en común conforman la paleta Web opaleta segura (safety palette).

Esta paleta segura tiene como característica estar basada en los valores RGB conincrementos de 20% entre cada valor, por lo que resulta un total de 216 colores.

HEXADECIMAL DECIMAL PORCENTAJES

00 00 0%

33 51 20%

66 102 40%99 153 60%

CC 204 80%

FF 255 100%

Cuando debemos elegir un color para usar nuestras páginas conviene seleccionar uno deestos colores, ya que nos dan la seguridad de que estarán presentes en cualquier sistema.

Default

OK

La siguiente tabla muestra la paleta de 216 colores completa.

Muestra del color #RRGGBB Muestra del color #RRGGBB



Muestra del color #RRGGBB Muestra del color #RRGGBB

#000000 #990000

#000033 #990033

#000066 #990066

#000099 #990099

#0000CC #9900CC

#0000FF #9900FF

#003300 #993300

#003333 #993333

#003366 #993366

#003399 #993399

#0033CC #09933CC

#0033FF #9933FF#006600 #996600

#006633 #996633

#006666 #996666

#006699 #996699

#0066CC #9966CC

#0066FF #9966FF

#009900 #999900

#009933 #999933

#009966 #999966

#009999 #999999

#0099CC #9999CC

#0099FF #9999FF

#00CC00 #99CC00

#00CC33 #99CC33#00CC66 #99CC66

#00CC99 #99CC99

#00CCCC #99CCCC



#00CCFF #99CCFF

#00FF00 #99FF00

#00FF33 #99FF33

#00FF66 #99FF66

#00FF99 #99FF99

#00FFCC #99FFCC

#00FFFF #99FFFF

#330000 #CC0000

#330033 #CC0033

#330066 #CC0066

#330099 #CC0099

#3300CC #CC00CC

#3300FF #CC00FF

#333300 #CC3300

#333333 #CC3333

#333366 #CC3366

#333399 #CC3399

#3333CC #CC33CC

#3333FF #CC33FF

#336600 #CC6600

#336633 #CC6633

#336666 #CC6666

#336699 #CC6699

#3366CC #CC66CC

#3366FF #CC66FF

#339900 #CC9900

#339933 #CC9933#339966 #CC9966

#339999 #CC9999

#3399CC #CC99CC



#3399FF #CC99FF

#33CC00 #CCCC00

#33CC33 #CCCC33

#33CC66 #CCCC66

#33CC99 #CCCC99

#33CCCC #CCCCCC

#33CCFF #CCCCFF

#33FF00 #CCFF00

#33FF33 #CCFF33

#33FF66 #CCFF66

#33FF99 #CCFF99

#33FFCC #CCFFCC

#33FFFF #CCFFFF

#660000 #FF0000

#660033 #FF0033

#660066 #FF0066

#660099 #FF0099

#6600CC #FF00CC

#6600FF #FF00FF

#663300 #FF3300

#663333 #FF3333

#663366 #FF3366

#663399 #FF3399

#6633CC #FF33CC

#6633FF #FF33FF

#666600 #FF6600

#666633 #FF6633#666666 #FF6666

#666699 #FF6699

#6666CC #FF66CC

#6666FF #FF66FF



#6666FF #FF66FF

#669900 #FF9900

#669933 #FF9933

#669966 #FF9966

#669999 #FF9999

#6699CC #FF99CC

#6699FF #FF99FF

#66CC00 #FFCC00

#66CC33 #FFCC33

#66CC66 #FFCC66

#66CC99 #FFCC99

#66CCCC #FFCCCC

#66CCFF #FFCCFF

#66FF00 #FFFF00

#66FF33 #FFFF33

#66FF66 #FFFF66

#66FF99 #FFFF99

#66FFCC #FFFFCC

#66FFFF #FFFFFF

Volver

Listado de elementos deHTML 4.0

Home Manual



¡CSS enacción! Seleccione

otra hoja deestilo paranavegar:Actual:default.css

Ver

explicación

Elemento Definición

A Enlace de hipertexto o destino de un link

ABBR Abreviatura

ACRONYM Acrónimo

ADDRESS Dirección

AREA Area de un mapa de imagen

B Texto en negritas

BASE URI de base del documento

BDO Sustitución del algoritmo de bidireccionalidad

BIG Texto más grande

BLOCKQUOTE Cita de bloque

BODY Cuerpo del documento

BR Salto de línea

BUTTON Botón

CAPTION Encabezado de una tabla

CITE Cita

CODE Código de computadora

COL Columna de una tabla

Default

OK

COLGROUP Grupo de columnas de una tabla

DD Definición de una descripción

DEL Texto borrado



DFN Término definido

DIV Contenedor genérico a nivel de bloque

DL Lista de definiciones

DT Término de una definición

EM Enfasis

FIELDSET Grupo de control de fomularios

FORM Formulario interactivo

H1 Título de nivel 1






HEAD Encabezado del documento

HR Línea horizontal

HTML Documento HTML

I Texto en itálicas

IMG Imagen

INPUT Entrada de formularios

INS Texto insertado

KBD Texta a ser ingresado



LABEL Etiqueta de un campo de formulario

LEGEND Encabezado de un grupo de control

LI Item de una lista

LINK Relaciones del documento

MAP Mapa de una imagen

META Metadata

NOSCRIPT Contenido alternativo a un script

OBJECT Objeto

OL Lista ordenada

OPTGROUP Grupo de opciones

OPTION Menú de opciones

P Párrafo

PARAM Parámetros de un objeto

PRE Texto preformateado

Q Cita corta

SAMP Resultado de un ejemplo

SCRIPT Script ejecutado en la máquina cliente

SELECT Selector de opciones

SMALL Texto pequeño

SPAN Contenedor genérico a nivel de línea

STRONG Enfasis fuerte



STYLE Hoja de estilo incrustada

SUB Subíndice

SUP Superíndice

TABLE Tabla

TBODY Cuerpo de la tabla

TD Celda de datos de una tabla

TEXTAREA Entrada de texto de múltiples líneas

TFOOT Pie de una tabla

TH Celda de encabezamiento de una tabla

THEAD Encabezado de la tabla

TITLE Título del documento

TR Fila de una tabla

TT Texto de teletipo

UL Lista sin ordenar

VAR Variable

Volver

Principal Otras traducciones siguiente contenidos propiedades índice

http://www.sidar.org/

http://www.sidar.org/recur/desdi/traduc/

http://www.sidar.org/recur/desdi/traduc/es/css/about.html

http://-/?-

http://www.sidar.org/recur/desdi/traduc/es/css/propidx.html

http://www.sidar.org/recur/desdi/traduc/es/css/indexlist.html



http://-/?-






Traducciones:

Hojas de Estilo en Cascada, nivel 2Especificación CSS2

Este documento es una traducción de la Recomendación del W3C sobre las Hojas de Estilo en Cascada,

Nivel 2. Este documento puede contener errores de traducción. Una copia de la versión normativa, eninglés, puede encontrarse en:

http://www.w3.org/TR/1998/REC-CSS2-19980512

Traducción: Carlos Benavidez

REC-CSS2-19980512

Hojas de Estilo en Cascada, nivel 2

Especificación CSS2

Recomendación del W3C 12-May-1998

http://www.w3.org/


http://www.sidar.org/que/ge/carlosb.php

http://www.w3.org/

http://www.sidar.org/que/ge/carlosb.php


http://www.w3.org/




Recomendación del W3C 12 May 1998

Esta versión:http://www.w3.org/TR/1998/REC-CSS2-19980512

Ultima versión:http://www.w3.org/TR/REC-CSS2

Versión previa:http://www.w3.org/TR/1998/PR-CSS2-19980324

Editores:Bert Bos <[email protected]>

Håkon Wium Lie <[email protected]>

Chris Lilley <[email protected]>

Ian Jacobs <[email protected]>

Resumen

Esta especificación define las Hojas de Estilo en Cascada, nivel 2 (CSS2). CSS2 es un lenguaje de hoja de estilo quepermite que los autores y los usuarios asocien un estilo (por ejemplo, fuentes, espaciado y señales sonoras) a losdocumentos estructurados (por ejemplo, documentos HTML y aplicaciones XML). Separando el estilo de presentación delcontenido de los documentos, CSS2 simplifica la creación y mantenimiento de los sitios Web.

CSS2 se cimenta en CSS1 (véase [CSS1]) y, con muy pocas excepciones, todas las hojas de estilo CSS1 válidas son

hojas de estilo CSS2 válidas. CSS2 brinda soporte a hojas de estilo específicas para cada medio, de modo que los autorespuedan adaptar la presentación de sus documentos a los browsers visuales, a los dispositivos sonoros, a las impresoras, alos dispositivos braille, de mano, etc. Esta especificación también soporta el posicionamiento de contenidos, fuentesdescargables, disposición de la página, aspectos para la internacionalización, contadores y numeradores automáticos, y

algunas características relacionadas con la interfaz del usuario.

Estado de este documento


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

http://www.w3.org/TR/1998/PR-CSS2-19980324

http://www.w3.org/People/Bos/

mailto:[email protected]

http://www.w3.org/People/howcome/


http://www.w3.org/People/chris/


http://www.w3.org/People/Jacobs/


http://www.sidar.org/recur/desdi/traduc/es/css/refs.html#ref-CSS1

http://www.sidar.org/recur/desdi/traduc/es/css/refs.html#ref-CSS1


http://www.w3.org/People/Jacobs/


http://www.w3.org/People/chris/


http://www.w3.org/People/howcome/


http://www.w3.org/People/Bos/

http://www.w3.org/TR/1998/PR-CSS2-19980324

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




Este documento ha sido revisado por los Miembros de W3C y otras partes interesadas y aprobado por el Director comoRecomendación del W3C. Es un documento estable y puede ser utilizado como material de referencia o ser citado comoreferencia normativa en otro documento. El papel del W3C en la elaboración de la Recomendación es atender a la

especificación y promover su amplia difusión. Esto incrementa la funcionalidad y la interoperabilidad de la Web.

Una lista de las Recomendaciones actuales del W3C y de otros documentos técnicos se puede encontrar enhttp://www.w3.

org/TR.

La discusión pública de las características de las CSS tiene lugar en [email protected].

Formatos disponibles

La especificación 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 especificación http://www w3 org/TR/1998/REC CSS2

http://www.w3.org/TR


http://www.w3.org/Mail/Lists.html#www-style


http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.txt

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.tgz

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.ps.gz

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.ps.gz

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.tgz

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.txt


http://www.w3.org/Mail/Lists.html#www-style



http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf



http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf



En caso de una discrepancia entre las distintas formas de la especificación,http://www.w3.org/TR/1998/REC-CSS2-

19980512 se considera la versión definitiva.

Lenguajes disponibles

La versión en inglés de esta especificación es la única versión normativa. Sin embargo, por traducciones en otroslenguajes ver http://www.w3.org/Style/css2-updates/translations.html.

Erratas

La lista de errores conocidos en esta especificación está disponible enhttp://www.w3.org/Style/css2-updates/REC-CSS2-

19980512-errata.html. Por favor, informe de los errores en este documento a [email protected].

Nota de la traducción: Los errores a que se refiere el párrafo anterior pertenecen, obviamente, a la versión original en inglés. Estatraducción ya contiene las correcciones del caso.Por favor, si desea informar de errores encontrados en esta versión en castellano o tiene cualquier tipo desugerencia, envíe su mensaje a: [email protected]

Tabla de Contenidos Abreviada

q 1 Acerca de la Especificación CSS2

q 2 Introducción a CSS2

q 3 Conformidad: Requisitos y Recomendaciones

q 4 Sintaxis y tipos básicos de datos en CSS2

q 5 Selectores

q 6 Asignación de valores a las propiedades, Cascada y Herencia

7 Tipos de medios



http://www.w3.org/Style/css2-updates/translations.html

http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html





http://www.sidar.org/recur/desdi/traduc/es/css/intro.html

http://www.sidar.org/recur/desdi/traduc/es/css/conform.html








http://www.w3.org/Style/css2-updates/translations.html



http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html

http://www.sidar.org/recur/desdi/traduc/es/css/media.html







q 7 Tipos de medios

q 8 Modelo de caja

q 9 Modelo de formato visual

q 10 Detalles del modelo de formato visual

q 11 Efectos visuales q 12 Contenido generado, numeración automática y listas

q 13 Medios paginados

q 14 Colores y fondos

q 15 Fuentes

q 16 Texto

q 17 Tablas

q 18 Interfaz del usuario

q 19 Hojas de estilo auditivas

q Apéndice A: Una hoja de estilo de ejemplo para HTML 4.0

q Apéndice B: Cambios con respecto a CSS1

q Apéndice C: Implementación y notas de desempeño para fuentes

q Apéndice D: La gramática de CSS2

q Apéndice E. Referencias

q Apéndice F. Indice de propiedades

q Apéndice G. Indice de descriptores

q Apéndice H. Indice

Tabla de Contenidos Completa

q 1 Acerca de la Especificación CSS2

r 1.1 Leyendo la especificación

r 1.2 Cómo está organizada la especificación

1 3 Convenciones


http://www.sidar.org/recur/desdi/traduc/es/css/box.html

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html

http://www.sidar.org/recur/desdi/traduc/es/css/visufx.html

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html

http://www.sidar.org/recur/desdi/traduc/es/css/page.html

http://www.sidar.org/recur/desdi/traduc/es/css/colors.html

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html

http://www.sidar.org/recur/desdi/traduc/es/css/text.html

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html

http://www.sidar.org/recur/desdi/traduc/es/css/ui.html

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html

http://www.sidar.org/recur/desdi/traduc/es/css/sample.html

http://www.sidar.org/recur/desdi/traduc/es/css/changes.html

http://www.sidar.org/recur/desdi/traduc/es/css/notes.html

http://www.sidar.org/recur/desdi/traduc/es/css/grammar.html

http://www.sidar.org/recur/desdi/traduc/es/css/refs.html


http://www.sidar.org/recur/desdi/traduc/es/css/descidx.html
























http://www.sidar.org/recur/desdi/traduc/es/css/about.html#q1









r 1.3 Convenciones

s 1.3.1 Elementos y atributos en el lenguaje del documento

s 1.3.2 Definición 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 Imágenes y descripciones extensas

r 1.4 Reconocimientos

r 1.5 Aviso de Copyright

q 2 Introducción a CSS2

r 2.1 Breve guía de CSS2 para HTML

r 2.2 Breve guía de CSS2 para XML

r 2.3 El modelo de procesamiento de CSS2

s 2.3.1 El lienzo

s 2.3.2 Modelo de destinatarios de CSS2

r 2.4 Reglas de diseño de CSS

q 3 Conformidad: Requisitos y Recomendaciones

r 3.1 Definiciones

r 3.2 Conformidad

r 3.3 Condiciones de error

r 3.4 Tipo de contenido text/css

q 4 Sintaxis y tipos básicos de datos en CSS2

r 4.1 Sintaxis

4 1 1 Comandos



http://www.sidar.org/recur/desdi/traduc/es/css/about.html#property-defs







http://www.sidar.org/recur/desdi/traduc/es/css/about.html#shorthand




http://www.sidar.org/recur/desdi/traduc/es/css/about.html#copyright


http://www.sidar.org/recur/desdi/traduc/es/css/intro.html#q1


http://www.sidar.org/recur/desdi/traduc/es/css/intro.html#processing-model





http://www.sidar.org/recur/desdi/traduc/es/css/conform.html#q1

http://www.sidar.org/recur/desdi/traduc/es/css/conform.html#conformance



http://www.sidar.org/recur/desdi/traduc/es/css/conform.html#conformance






http://www.sidar.org/recur/desdi/traduc/es/css/intro.html#processing-model








http://www.sidar.org/recur/desdi/traduc/es/css/about.html#shorthand







http://www.sidar.org/recur/desdi/traduc/es/css/about.html#property-defs



http://www.sidar.org/recur/desdi/traduc/es/css/conform.html#text-css


http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#syntax

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#tokenization


http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#syntax


http://www.sidar.org/recur/desdi/traduc/es/css/conform.html#text-css



s 4.1.1 Comandos

s 4.1.2 Palabras clave

s 4.1.3 Caracteres y mayúsculas/minúsculas

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

r 4.2 Reglas para el manejo de errores en el análisis

r 4.3 Valores

s 4.3.1 Enteros y números 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

r 4.4 Representación de los documentos CSS

s 4.4.1 Referencias a caracteres no representados en una codificación de caracteres

q 5 Selectores

r 5.1 Equivalencia de patrones

r 5.2 Sintaxis de los selectores

s 5.2.1 Agrupamiento

r 5.3 Selector universal

5 4 Selectores de tipos


http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#keywords

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#q4


http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#at-rules

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#block


http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#declaration

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#comments

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#parsing-errors

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#values


http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#length-units

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#percentage-units

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#uri

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#counter

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#color-units




http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#strings




http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#q1





http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#strings




http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#color-units

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#counter

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#uri

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#percentage-units

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#length-units


http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#values

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#parsing-errors

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#comments

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#declaration


http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#block

http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#at-rules



http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#keywords



http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#grouping

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#universal-selector

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#type-selectors


http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#universal-selector

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#grouping




r 5.4 Selectores de tipos

r 5.5 Selectores de descendientes

r 5.6 Selectores de hijos

r 5.7 Selectores de hermanos adyacentes

r 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

r 5.9 Selectores de ID

r 5.10 Pseudo-elementos y pseudo-clases

r 5.11 Pseudo-clases

s 5.11.1 La pseudo-clase :first-child

s 5.11.2 Las pseudo-clases vínculo: :link y :visited

s 5.11.3 Las pseudo-clases dinámicas: :hover, :active y :focus

s 5.11.4 La pseudo-clase de lenguaje: :lang

r 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

q 6 Asignación de valores a las propiedades, Cascada y Herencia

r 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 6.2 Herencia

s 6.2.1 El valor 'inherit'

r 6.3 La regla @import

r 6 4 Cascada


http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#descendant-selectors

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#child-selectors

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#adjacent-selectors

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#attribute-selectors



http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#class-html

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#id-selectors

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#pseudo-elements


http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#first-child

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#link-pseudo-classes

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#dynamic-pseudo-classes

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#lang


http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#first-line-pseudo

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#first-letter

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#before-and-after


http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#q1

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#specified-value

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#computed-value

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#actual-value

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#actual-value

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#computed-value

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#specified-value



http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#before-and-after

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#first-letter

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#first-line-pseudo


http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#lang

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#dynamic-pseudo-classes

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#link-pseudo-classes

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#first-child


http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#pseudo-elements

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#id-selectors

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#class-html



http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#attribute-selectors

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#adjacent-selectors

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#child-selectors

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#descendant-selectors


http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#inheritance

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#value-def-inherit

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#at-import

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#cascade


http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#at-import

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#value-def-inherit

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#inheritance



r 6.4 Cascada

s 6.4.1 Orden de la cascada

s 6.4.2 Las reglas !important

s 6.4.3 Cálculo de la especificidad de un selector

s 6.4.4 Precedencia de las indicaciones de presentación fuera de CSS q 7 Tipos de medios

r 7.1 Introducción a los tipos de medios

r 7.2 Especificación de hojas de estilos dependientes de los medios

s 7.2.1 La regla @media

r 7.3 Tipos de medios reconocidos

s 7.3.1 Grupos de medios

q 8 Modelo de caja

r 8.1 Dimensiones de la caja r 8.2 Ejemplo de márgenes, rellenos y bordes

r 8.3 Propiedades del margen: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' y 'margin'

s 8.3.1 Márgenes cerrados

r 8.4 Propiedades del relleno: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' y 'padding'

r 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 'border-

width'

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'

q 9 Modelo de formato visual

r 9.1 Introducción al modelo de formato visual

s 9.1.1 El acceso visual

s 9.1.2 Bloques de contención

r 9.2 Control de la generación de cajas

s 9 2 1 Elementos a nivel de bloque y cajas de bloque


http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#cascading-order

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#important-rules

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#specificity



http://www.sidar.org/recur/desdi/traduc/es/css/media.html#q1


http://www.sidar.org/recur/desdi/traduc/es/css/media.html#at-media-rule

http://www.sidar.org/recur/desdi/traduc/es/css/media.html#media-types

http://www.sidar.org/recur/desdi/traduc/es/css/media.html#media-groups


http://www.sidar.org/recur/desdi/traduc/es/css/box.html#box-dimensions

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#mpb-examples

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#margin-properties

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#collapsing-margins

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#padding-properties

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-properties

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-width-properties


http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-color-properties

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-style-properties

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-shorthand-properties


http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#q1



http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-shorthand-properties

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-style-properties

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-color-properties



http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-properties

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#padding-properties

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#collapsing-margins

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#margin-properties

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#mpb-examples

http://www.sidar.org/recur/desdi/traduc/es/css/box.html#box-dimensions


http://www.sidar.org/recur/desdi/traduc/es/css/media.html#media-groups

http://www.sidar.org/recur/desdi/traduc/es/css/media.html#media-types

http://www.sidar.org/recur/desdi/traduc/es/css/media.html#at-media-rule





http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#specificity

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#important-rules

http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#cascading-order



http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#containing-block

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#box-gen



http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#box-gen

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#containing-block




s 9.2.1 Elementos a nivel de bloque y cajas de bloque

s Cajas de bloque anónimas

s 9.2.2 Elementos a nivel de línea y cajas de línea

s Cajas de línea anónimas

s 9.2.3 Cajas compact s 9.2.4 Cajas run-in

s 9.2.5 La propiedad 'display'

r 9.3 Esquemas de posicionamiento

s 9.3.1 Elección de un esquema de posicionamiento: la propiedad 'position'

s 9.3.2 Desplazamiento de las cajas: 'top', 'right', 'bottom', 'left'

r 9.4 Flujo normal

s 9.4.1 Contexto de formato de bloque

s 9.4.2 Contexto de formato de línea

s 9.4.3 Posicionamiento relativo

r 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'

r 9.6 Posicionamiento absoluto

s 9.6.1 Posicionamiento fijo

r 9.7 Relaciones entre 'display', 'position' y 'float'

r 9.8 Comparación 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

r 9.9 Presentación por capas

s 9.9.1 Especificar el nivel de pila: la propiedad 'z-index'

r 9.10 Dirección del texto: las propiedades 'direction' y 'unicode-bidi'



http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#anonymous-block-level


http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#anonymous

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#compact

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#run-in

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#display-prop

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#positioning-scheme

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#choose-position

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#position-props

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#normal-flow

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#block-formatting

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#inline-formatting

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#relative-positioning

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#floats

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#float-position

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#flow-control

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#absolute-positioning

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#fixed-positioning


http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#comparison









http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#comparison


http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#fixed-positioning

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#absolute-positioning

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#flow-control

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#float-position

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#floats

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#relative-positioning

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#inline-formatting

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#block-formatting

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#normal-flow

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#position-props

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#choose-position

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#positioning-scheme

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#display-prop

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#run-in

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#compact

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#anonymous


http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#anonymous-block-level



http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#z-index

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#direction



http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#direction

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#z-index





r 10.1 Definición de "bloque de contención"

r 10.2 Ancho del contenido: la propiedad 'width'

r 10.3 Computando anchos y márgenes

s 10.3.1 Elementos no reemplazados, de línea s 10.3.2 Elementos reemplazados, de línea

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

r 10.4 Anchos mínimos y máximos: 'min-width' y 'max-width'

r 10.5 Altura del contenido: la propiedad 'height'

r 10.6 Computando alturas y márgenes

s 10.6.1 Elementos no reemplazados, de línea

s 10.6.2 Elementos reemplazados, de línea, 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

r 10.7 Alturas mínimas y máximas: 'min-height' y 'max-height'

r 10.8 Cálculo de la altura de la línea: las propiedades 'line-height' y 'vertical-align'

s 10.8.1 Interlineado y medio interlineado

q 11 Efectos visuales

r 11.1 Desbordamiento y recorte

s 11.1.1 Desbordamiento: la propiedad 'overflow'

s 11.1.2 Recorte: la propiedad 'clip'


http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#containing-block-details

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#the-width-property

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#Computing_widths_and_margins

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#q4






http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#abs-non-replaced-width


http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#min-max-widths

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#the-height-property

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#Computing_heights_and_margins





http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#abs-non-replaced-height


http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#min-max-heights

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#line-height



http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#line-height

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#min-max-heights


http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#abs-non-replaced-height





http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#Computing_heights_and_margins

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#the-height-property

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#min-max-widths


http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#abs-non-replaced-width







http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#Computing_widths_and_margins

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#the-width-property

http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#containing-block-details



http://www.sidar.org/recur/desdi/traduc/es/css/visufx.html#overflow-clipping

http://www.sidar.org/recur/desdi/traduc/es/css/visufx.html#overflow

http://www.sidar.org/recur/desdi/traduc/es/css/visufx.html#clipping


http://www.sidar.org/recur/desdi/traduc/es/css/visufx.html#overflow

http://www.sidar.org/recur/desdi/traduc/es/css/visufx.html#overflow-clipping




s 11.1.2 Recorte: la propiedad clip

r 11.2 Visibilidad: la propiedad 'visibility'

q 12 Contenido generado, numeración automática y listas

r 12.1 Los pseudo-elementos :before y :after

r 12.2 La propiedad 'content' r 12.3 Interacción de :before y :after con los elementos 'compact' y 'run-in'

r 12.4 Comillas

s 12.4.1 Especificación de comillas con la propiedad 'quotes'

s 12.4.2 Inserción de comillas con la propiedad 'content'

r 12.5 Contadores y numeración automática

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' r 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'

q 13 Medios paginados

r 13.1 Introducción a los medios paginados

r 13.2 Cajas de página: la regla @page

s 13.2.1 Márgenes de la página

s 13.2.2 Tamaño de la página: la propiedad 'size'

s Procesamiento de cajas de página que no se ajustan a una hoja de destino

s Ubicación de la caja de página en la hoja

s 13.2.3 Marcas de corte: la propiedad 'marks'

s 13.2.4 Páginas izquierda, derecha y primera

s 13.2.5 Contenido fuera de la caja de página

r 13.3 Saltos de página

s 13.3.1 Saltos antes/después de los elementos: 'page-break-before', 'page-break-after', 'page-break-inside'

s 13 3 2 Uso de páginas nominadas: 'page'


http://www.sidar.org/recur/desdi/traduc/es/css/visufx.html#visibility


http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#before-after-content

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#content

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#compact-run-in-gen

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#quotes

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#quotes-specify

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#quotes-insert

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#counters

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#scope

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#counter-styles

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#q10


http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#markers

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#lists


http://www.sidar.org/recur/desdi/traduc/es/css/page.html#q1

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#page-box

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#page-margins

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#page-size-prop



http://www.sidar.org/recur/desdi/traduc/es/css/page.html#crop-mark-prop



http://www.sidar.org/recur/desdi/traduc/es/css/page.html#crop-mark-prop



http://www.sidar.org/recur/desdi/traduc/es/css/page.html#page-size-prop

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#page-margins

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#page-box



http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#lists

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#markers



http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#counter-styles

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#scope

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#counters

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#quotes-insert

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#quotes-specify

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#quotes

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#compact-run-in-gen

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#content

http://www.sidar.org/recur/desdi/traduc/es/css/generate.html#before-after-content


http://www.sidar.org/recur/desdi/traduc/es/css/visufx.html#visibility



http://www.sidar.org/recur/desdi/traduc/es/css/page.html#page-breaks

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#page-break-props

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#named-pages


http://www.sidar.org/recur/desdi/traduc/es/css/page.html#page-break-props

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#page-breaks




s 13.3.2 Uso de páginas nominadas: page

s 13.3.3 Saltos dentro de los elementos: 'orphans', 'widows'

s 13.3.4 Saltos de página permitidos

s 13.3.5 Saltos de página forzados

s 13.3.6 Los "mejores" saltos de página r 13.4 Cascada en el contexto de página

q 14 Colores y fondos

r 14.1 Color del primer plano: la propiedad 'color'

r 14.2 El fondo

s 14.2.1 Propiedades del fondo: 'background-color', 'background-image', 'background-repeat', 'background-

attachment', 'background-position' y 'background'

r 14.3 Corrección de la gama

q 15 Fuentes

r 15.1 Introducción

r 15.2 Especificación de la fuente

s 15.2.1 Propiedades para la especificación 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 Tamaño 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 genéricas de fuentes

s serif

s sans-serif

s cursive

s fantasy

s monospace

r 15.3 Selección 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'


http://www.sidar.org/recur/desdi/traduc/es/css/page.html#break-inside

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#allowed-page-breaks

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#forced




http://www.sidar.org/recur/desdi/traduc/es/css/colors.html#colors

http://www.sidar.org/recur/desdi/traduc/es/css/colors.html#q2

http://www.sidar.org/recur/desdi/traduc/es/css/colors.html#background-properties


http://www.sidar.org/recur/desdi/traduc/es/css/colors.html#gamma-correction


http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#q1

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-specification

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-properties

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-family-prop

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-styling

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-size-props

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-shorthand

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#generic-font-families

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#serif-def

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#sans-serif-def

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#cursive-def

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#fantasy-def

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#fantasy-def

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#cursive-def

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#sans-serif-def

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#serif-def

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#generic-font-families

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-shorthand

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-size-props

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-styling

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-family-prop

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-properties

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-specification



http://www.sidar.org/recur/desdi/traduc/es/css/colors.html#gamma-correction



http://www.sidar.org/recur/desdi/traduc/es/css/colors.html#q2

http://www.sidar.org/recur/desdi/traduc/es/css/colors.html#colors




http://www.sidar.org/recur/desdi/traduc/es/css/page.html#forced

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#allowed-page-breaks

http://www.sidar.org/recur/desdi/traduc/es/css/page.html#break-inside


http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#monospace-def

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-selection

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-descriptions

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#select


http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-descriptions

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-selection

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#monospace-def



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 Calificación de los Datos de una Fuente: 'unicode-range'

s 15.3.4 Descriptor para Valores Numéricos: '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 Síntesis: 'widths', 'bbox' y 'definition-src'

s 15.3.8 Descriptores para la Alineación: 'baseline', 'centerline', 'mathline' y 'topline'

s 15.3.9 Ejemplos

r 15.4 Características de las Fuentes

s 15.4.1 Introducción a las Características 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 Línea de Base Central

s 15.4.5 Codificación 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 mayúsculas

s 15.4.10 Altura de los signos en minúsculas

s 15.4.11 Línea de Base inferior

s 15.4.12 Línea de Base matemática

s 15.4.13 Máxima caja externa

s 15.4.14 Altura máxima sin acentos

s 15.4.15 Profundidad máxima sin acentos

s 15.4.16 Número Panose-1

s 15.4.17 Rango de caracteres ISO 10646



http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#dataqual

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#unitsperem

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#referencing

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#matching


http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#synthesizing

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#alignment


http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-descriptors

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#universal

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#aname

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#emsq

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#cline

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#encoding

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#family

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#lrwidth

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#stemh

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#cap

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#xht

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#bline

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#mline

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#bbox

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#bbox

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#mline

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#bline

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#xht

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#cap

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#stemh

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#lrwidth

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#family

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#encoding

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#cline

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#emsq

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#aname

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#universal

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#font-descriptors


http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#alignment

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#synthesizing



http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#referencing

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#unitsperem

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#dataqual



http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#ascent

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#descent

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#pan1

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#ucode


http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#pan1

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#descent

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#ascent



g

s 15.4.18 Línea de Base superior

s 15.4.19 Ancho del asta vertical

s 15.4.20 Angulo del asta vertical

r 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

q 16 Texto

r 16.1 Sangría: la propiedad 'text-indent'

r 16.2 Alineación: la propiedad 'text-align'

r 16.3 Decoración

s 16.3.1 Subrayado, súper-rayado, tachado y parpadeo: la propiedad 'text-decoration'

s 16.3.2 Texto con sombra: la propiedad 'text-shadow' r 16.4 Espaciado de letras y palabras: las propiedades 'letter-spacing' y 'word-spacing'

r 16.5 Cambio de minúsculas y mayúsculas: la propiedad 'text-transform'

r 16.6 Espacios en blanco: la propiedad 'white-space'

q 17 Tablas

r 17.1 Introducción a las tablas

r 17.2 El modelo de tabla CSS

s 17.2.1 Objetos anónimos de la tabla

r 17.3 Selectores de columnas

r 17.4 Las tablas en el modelo de formato visual

s 17.4.1 Posición y alineación del encabezado

r 17.5 Composición visual del contenido de las tablas

s 17.5.1 Capas y transparencia en la tabla

s 17.5.2 Algoritmos para el ancho de la tabla: la propiedad 'table-layout'

s Composición fija de la tabla

s Composición automática de la tabla

s 17.5.3 Algoritmos para la altura de la tabla


http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#tline

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#stemv

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#slope

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#algorithm




http://www.sidar.org/recur/desdi/traduc/es/css/text.html#indentation-prop

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#alignment-prop

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#q3

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#lining-striking-props

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#text-shadow-props

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#spacing-props

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#caps-prop

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#white-space-prop


http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#q1


http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#anonymous-boxes





http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#table-layers

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#table-layers





http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#anonymous-boxes




http://www.sidar.org/recur/desdi/traduc/es/css/text.html#white-space-prop

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#caps-prop

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#spacing-props

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#text-shadow-props

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#lining-striking-props

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#q3

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#alignment-prop

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#indentation-prop




http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#algorithm

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#slope

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#stemv

http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#tline


http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#width-layout

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#fixed-table-layout

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#auto-table-layout

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#height-layout


http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#auto-table-layout

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#fixed-table-layout

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#width-layout



g p

s 17.5.4 Alineación horizontal en una columna

s 17.5.5 Efectos dinámicos en filas y columnas

r 17.6 Bordes

s 17.6.1 El modelo de bordes separados s Bordes alrededor de celdas vacías: la propiedad 'empty-cells'

s 17.6.2 El modelo de bordes cerrados

s Resolución de conflictos de bordes

s 17.6.3 Estilos de bordes

r 17.7 Procesamiento sonoro de las tablas

s 17.7.1 Lectura de títulos: la propiedad 'speak-header'

q 18 Interfaz del usuario

r 18.1 Cursores: la propiedad 'cursor' r 18.2 Preferencias de color del usuario

r 18.3 Preferencias de fuentes del usuario

r 18.4 Contornos dinámicos: la propiedad 'outline'

s 18.4.1 Contornos y foco

r 18.5 Amplificación

q 19 Hojas de estilo auditivas

r 19.1 Introducción a las hojas de estilo auditivas

r 19.2 Propiedades del volumen: 'volume'

r 19.3 Propiedades del habla: 'speak'

r 19.4 Propiedades de la pausa: 'pause-before', 'pause-after' y 'pause'

r 19.5 Propiedades de la señal: 'cue-before', 'cue-after' y 'cue'

r 19.6 Propiedades de la mezcla: 'play-during'

r 19.7 Propiedades espaciales: 'azimuth' y 'elevation'

r 19.8 Propiedades de las características de la voz: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' y

'richness'

r 19.9 Propiedades del discurso: 'speak-punctuation' y 'speak-numeral'


http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#column-alignment

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#dynamic-effects

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#borders

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#separated-borders

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#empty-cells

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#collapsing-borders

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#border-conflict-resolution



http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#speak-headers


http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#cursor-props

http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#system-colors

http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#system-fonts

http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#dynamic-outlines

http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#q5



http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#q1

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#volume-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#speaking-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#pause-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#cue-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#mixing-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#mixing-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#cue-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#pause-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#speaking-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#volume-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#q1




http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#dynamic-outlines

http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#system-fonts

http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#system-colors

http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#cursor-props


http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#speak-headers



http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#border-conflict-resolution

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#collapsing-borders

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#empty-cells

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#separated-borders

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#borders

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#dynamic-effects

http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#column-alignment


http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#spatial-props

http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#voice-char-props


http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#speech-props




http://www.sidar.org/recur/desdi/traduc/es/css/aural.html#spatial-props



p p p y p

q Apéndice A: Una hoja de estilo de ejemplo para HTML 4.0

q Apéndice B: Cambios con respecto a CSS1

r B.1 Nuevo funcionamiento

r B.2 Descripciones actualizadas r B.3 Cambios semánticos a CSS1

q Apéndice C: Implementación y notas de desempeño para fuentes

r C.1 Glosario de términos relacionados con las fuentes

r C.2 Recuperación de las fuentes

r C.3 Significado de los números Panose

r C.4 Deducción de rangos de Unicode para TrueType

r C.5 Generación automática de descriptores

q Apéndice D: La gramática de CSS2

r D.1 Gramática

r D.2 Scanner de léxico

r D.3 Comparación de los comandos en CSS2 y CSS1

q Apéndice E. Referencias

r E.1 Referencias normativas

r E.2 Referencias informativas

q Apéndice F. Indice de propiedades

q Apéndice G. Indice de descriptores

q Apéndice H. Indice

Copyright © 1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.

Principal Otras traducciones siguiente contenidos propiedades índice




http://www.sidar.org/recur/desdi/traduc/es/css/changes.html#q1


http://www.sidar.org/recur/desdi/traduc/es/css/changes.html#changes-from-css1


http://www.sidar.org/recur/desdi/traduc/es/css/notes.html#q1

http://www.sidar.org/recur/desdi/traduc/es/css/notes.html#coneg

http://www.sidar.org/recur/desdi/traduc/es/css/notes.html#panose

http://www.sidar.org/recur/desdi/traduc/es/css/notes.html#truetype-unicode

http://www.sidar.org/recur/desdi/traduc/es/css/notes.html#autodescgen


http://www.sidar.org/recur/desdi/traduc/es/css/grammar.html#q1


http://www.sidar.org/recur/desdi/traduc/es/css/grammar.html#tokenizer-diffs


http://www.sidar.org/recur/desdi/traduc/es/css/refs.html#q1






http://www.w3.org/

http://www.lcs.mit.edu/

http://www.inria.fr/

http://www.keio.ac.jp/

http://www.keio.ac.jp/

http://www.inria.fr/

http://www.lcs.mit.edu/

http://www.w3.org/








http://www.sidar.org/recur/desdi/traduc/es/css/grammar.html#tokenizer-diffs




http://www.sidar.org/recur/desdi/traduc/es/css/notes.html#autodescgen

http://www.sidar.org/recur/desdi/traduc/es/css/notes.html#truetype-unicode

http://www.sidar.org/recur/desdi/traduc/es/css/notes.html#panose

http://www.sidar.org/recur/desdi/traduc/es/css/notes.html#coneg

http://www.sidar.org/recur/desdi/traduc/es/css/notes.html#q1


http://www.sidar.org/recur/desdi/traduc/es/css/changes.html#changes-from-css1









http://-/?-





http://-/?-






El autor




¡CSS enacción! Seleccione

otra hoja deestilo paranavegar:Actual:default.css

Ver explicación

Hola. Mi nombre es Carlos Benavidez, soy un diseñador argentino y me gusta definirmecomo un viejo artesano del oficio gráfico (ahora convertido en "digital designer" porimposición del mercado ;-)

Con ¡45! años he tenido oportunidad de conocer y usar casitoda la tecnología aplicada a las artes gráficas, desde lostipos de caja (en aquellas viejas Minerva), la Linotipo, laComposer, las Letraset y la Linotronic hasta los programasde autoedición (¡comencé con el Ventura Publisher en una 286 con 2 Mb. de RAM! ).

Con la aparición de la Web y el lenguaje HTML -queparecía la herramienta que definitivamente nos iba a llevarde la era Gutemberg a la era digital- parecía el momento de

adecuar mis (escasas) habilidades en el campo de la gráfica a este nuevo medio lleno deposibilidades estéticas y comunicativas.

Muy pronto descubrí que HTML había sido creado para que científicos e investigadores -que nada sabían acerca de diseño y composición- pudieran confeccionar documentospara intercambiar información entre ellos, de modo que resultaba muy difícil desarrollar mitrabajo tal como lo hacía con PageMaker o CorelDraw.

Cuando conocí el lenguaje de las CSS2 consideré que eran el puente que permitirían unirmis conocimientos como diseñador gráfico con los medios electrónicos y, aunque domino

el inglés con la mayor ignorancia, me atreví a traducir la Especificación CSS2 porquecontiene muchos conceptos y terminología provenientes de la composición gráfica queresultarían difíciles de entender para alguien ajeno a esta profesión.

El manual de uso de las CSS es, en primer lugar, un método para aprender a usar yomismo las hojas de estilo y luego una forma de retribuir a tantos que me han brindado suinformación de forma desinteresada por este medio maravilloso que es la Web. Esperoque les resulte de utilidad.

Default

OK

Actividades

Estas son actividades que he desarrollado relacionadas con la accesibilidad en la Web:

Buenos Aires, 6 Diciembre 2001Seminario sobre Accesibilidad Web



(Programa para la Sociedad de la Información - Proyecto ISIS)Tema: Las CSS como herramienta para la accesibilidadVer la presentación

Buenos Aires, 29/30 Octubre 2001

Curso: Diseño Web Accesible "Diseño para Todos" Tema: Aplicando las Hojas de EstiloVer página del curso

Ver módulo sobre CSS

Mar del Plata (Arg.), 25/27 Octubre 2001IV Jornadas del Sid@r

Tema: Hojas de Estilo en CascadaVer 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 CascadaVer Relato de las IV Jornadas

Ver la ponencia en formato RTF

Dirección del sitio:http://www.sidar.org/recur/desdi/mcss/

Mensajes a:[email protected]

1 - El siguiente código HTML:

<H1>Título</H1>

es mostrado por el navegador de este modo:

http://www.sidar.org/recur/desdi/mcss/tareas/20011206/Overview.html

http://www.sidar.org/cursos/bsas/index.htm

http://www.sidar.org/cursos/bsas/css/overview.html


http://www.sidar.org/jornadas/vjorna/cronicavjorna.htm

http://www.sidar.org/recur/desdi/mcss/tareas/v_jornadas_sidar.doc

http://www.sidar.org/recur/desdi/mcss/tareas/ejemplos_css.zip


http://www.sidar.org/jornadas/ivjorna.htm

http://www.sidar.org/recur/desdi/mcss/tareas/iv_jornadas_sidar.rtf

http://www.sidar.org/recur/desdi/mcss/



http://www.sidar.org/recur/desdi/mcss/

http://www.sidar.org/recur/desdi/mcss/tareas/iv_jornadas_sidar.rtf

http://www.sidar.org/jornadas/ivjorna.htm


http://www.sidar.org/recur/desdi/mcss/tareas/ejemplos_css.zip

http://www.sidar.org/recur/desdi/mcss/tareas/v_jornadas_sidar.doc

http://www.sidar.org/jornadas/vjorna/cronicavjorna.htm


http://www.sidar.org/cursos/bsas/css/overview.html

http://www.sidar.org/cursos/bsas/index.htm

http://www.sidar.org/recur/desdi/mcss/tareas/20011206/Overview.html



es mostrado por el navegador de este modo:

Título

2 - Agregando algunas propiedades dentro de las marcas del código HTML:

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

obtenemos el siguiente formato:

Título

3 - Utilizando una Hoja de Estilo con la siguiente regla:

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

Cerrar

Cerrar

}

El resultado será:

Título



4 - Las CSS tienen un juego de propiedades mucho más completo que las permitidas por HTML. En este caso, haremos que los elementosH1 tengan una imagen de fondo, un marco grueso de color rojo, un espacio entre letras de 1 cuadratín y un margen izquierdo y derecho de1 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:

Título

Cerrar

HTML sólo permite especificar una imagen de fondo en el elemento BODY y algunos navegadores también lo aceptan en las tablas. Encambio, las CSS permiten que la propiedad background-image y las aproximadamente 100 propiedades del lenguaje se apliquen acualquier elemento de la página.



Cerrar

En esta página tenemos una hoja de estilo con la siguiente regla:

P {text-align: right}

de modo que todos los párrafos están alineados por la derecha.



de modo que todos los párrafos están alineados por la derecha.

Ahora bien, en el párrafo siguiente vamos a usar la etiqueta <P align="left"> para alinear el párrafo por la izquierda:

Este párrafo intenta estar alineado por la izquierda pero no es así porque las reglas de las CSS tiene preferencia por sobre el formatoaplicado 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 párrafos.

Así es que el formato que demos directamente con HTML sólo tendrá efecto si no existe ningún estilo aplicado a ese elemento.

Cerrar

La regla @import

En esta página de prueba usamos la siguiente hoja de estilo:

@i t l(" j l ")



@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 página 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 página con una cuadrícula de fondo y los dos bloques de código

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 sección de una página:

<h1>Título rojo (selector de tipos)</h1><p>Los párrafos son azules. Se usa un selector de tipos

para individualizarlos..</p><p class="invertido">Una clase de párrafo 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 párrafo usa otra clase llamada "colorido".El fondo es amarillo y el texto es verde. Esta es una clase que se puede aplicara cualquier elemento, no solamente a los párrafos. </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 elatributo CLASS="colorido" se verá así: <b class="colorido">textoen 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::

Título rojo (selector de tipos)Los párrafos son azules. Se usa un selector de tipos para individualizarlos..

Una clase de párrafo especial. La clase se llama "invertido" y el selector es un selector de clases. El texto es blanco sobre fondo negro.



Este párrafo usa otra clase llamada "colorido". El fondo es amarillo y el texto es verde. Esta es una clase que se puede aplicar a cualquierelemento, no solamente a los párrafos.

Por ejemplo, una palabra en negrita (elemento B de HTML) se verá asi: con negritas y texto azul, pero un elemento B con el atributoCLASS="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 Texto en verdeq Fondo amarillo

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

q Esta no tendrá ningún efecto porque la clase "invertido" se puede aplicar sólo a los párrafos.

Cerrar

Selectores de descendientes

La siguiente Hoja de Estilo:

H1 {color: red}



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

Se aplica a este texto:

Un título 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 unelemento 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, comoen:

<H1>Título con un<SPAN>elemento

<EM>SPAN</EM>verde</SPAN>

y texto enfatizado</H1>

Título 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 yla regla se cumple.

Cerrar



Selectores de hermanos adyacentes

Usaremos la siguiente Hoja de Estilo para la página:

H1 {color: red}



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 código:

El título (H1) en rojo

Un párrafo que es hermano adyacente de H1, por lo tanto no tiene sangría y el color del texto es marrón..

A este párrafo se le aplica el estilo normal, es decir, texto en negro y una sangría de 2em. Esto es así porque aunque es un elementohermano de H1 (BODY es el padre de ambos) no son adyacentes.

Un subtítulo (H2) de color azul

Otro párrafo normal. A continuación usaremos un título (H1) e inmediatamente un subtítulo (H2). Como H2 será hermano adyacente deH1 cambiará su color a verde y reducirá su margen superior a -0.5em.

Otro título (H1)

Subtítulo (H2) de color verde y margen negativo

Otro párrafo de relleno.





Cerrar

La pseudo clase :first-child

Usaremos la siguiente Hoja de Estilo para quitar la sangría a los párrafos que son primeros hijos de un DIV, ycon la segunda regla haremos que los elementos EM que sean descendientes de un párrafo que es primerhijo de algún elemento sea de color azul:



hijo de algún 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 párrafo es el primer hijo, entonces no tiene sangría de acuerdo a la primera regla de nuestra Hoja de Estilo. Comoeste párrafo 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 párrafo dentro del DIV es de control. Como no es primer hijo debe tener una sangría de 2em. Además, este elemento EM nodebe ser azul, porque es descendiente de un párrafo que no es primer

:link y :visited

Por ejemplo, las reglas siguientes:

A li k {f t f il if l #009900 t t d ti }



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 página. Utilicen uno de ellos y cuando regresen, el que haya sido visitado habrá cambiado suaspecto.

Primer link

Segundo link

Cerrar

Pseudo-clases dinámicas (1)

Estos son algunos efectos que pueden conseguirse usando :link, :hover y :visited. A continuación de losejemplos se muestran las reglas usadas. (El "link de control" no conduce a nada, sólo está para que siemprehaya un link sin visitar en la página)

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/ps_lnk1.html






haya un link sin visitar en la página).

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 cambiaa una sans-serif, el color de fondo es amarillo y el puntero del mouse se transforma en el que normalmentese utiliza para indicar que hay ayuda disponible (por lo general es un signo de interrogación).

Cerrar

Pseudo-elementos

:first-line

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/ps_din2.html


http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/link_falso.html

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/link_falso.html





En el siguiente fragmento de un texto de J.L.Borges, la primer línea de cada párrafo aparecerá de color rojoy en mayúsculas (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, después de haber guerreado en el continente, hombrescansados y felices.

Es el creciente laberinto de luces que divisamos desde el avión y bajo el cual están las azoteas, lavereda, el último patio, las cosas quietas.

Es una puerta numerada, detrás de la cual, en la oscuridad, pasé diez días y diez noches, inmóvil,días 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 caída que abarque dos líneas.Una capitular caída es la letra inicial más grande que el resto del párrafo que se alínea en su parte superiorcon la primer línea del párrafo (como es más grande, abarca hacia abajo dos o más líneas del texto).

La hoja de estilo es:

P:fist-letter {font-size: 200%;font-weight: bold;float: left;}

Sin proponérmelo al principio, he consagrado mi ya larga vida a las letras, a la cátedra, al ocio, a lastranquilas aventuras del diálogo, a la filología, que ignoro, el misterioso hábito de Buenos Aires y alas perplejidades que no sin alguna soberbia se llaman metafísica. Tampoco le ha faltado a mi vida laamistad de unos pocos, que es la que importa. Creo no tener un solo enemigo o, si los hubo, nuncame 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 cadasubtítulo, el ícono de una flecha al final de cada párrafo y la palabra "Fin" al final de la página.

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, modulación inclinada y serif moderados (Garamond, Caslon, Times).

Romanas modernas

Con serif fino y recto, mucho contraste en sus trazos y modulación vertical (Bodoni, Didot, Modern 20).

Romanas de transición

Con serif moderado como las antiguas pero con may

Propiedades del margen

Vamos a usar dos párrafos 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 párrafo que sigue:

Este es el primer párrafo de prueba. Para cada margen hemosusado una medida distinta, pero la única que requiere ciertaexplicación es el porcentaje usado para margin-left : los valores

de porcentaje se refieren al bloque de contención, es decir, lacaja del elemento padre. En este caso, el elemento padre de estepárrafo es <BODY>, entonces su margen izquierdo será la mitaddel ancho de la pantalla.

A este segundo párrafo le hemos cambiado el color para distinguirlodel primero porque, debido al margen superior negativo (margin-top: -3em), comienza más arriba que la última línea del anterior.Para evitar que se superpongan, hemos usado margin-right: 50%, demodo que su margen derecho coincide con el margen izquierdo del

párrafo anterior. Los márgenes que no han sido definidos (left ybottom) toman el valor inicial de la propiedades, es decir 0 (cero).

Vamos a usar un párrafo 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 párrafo:

Un párrafo con margin:2px



Con dos valores especificados: margin: 20px 8px, el primero (20px) se aplica a los márgenes superior e

inferior, el segundo (8px) se aplica a los márgenes derecho e izquierdo:

Un párrafo con margin: 20px8px

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

Un párrafo con margin: 2em 12px24px

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

Un párrafo con margin: 8px 0px 16px24px



Cerrar

Propiedades del relleno

Vamos a usar un párrafo 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 párrafo le hemos aplicado las cuatro propiedadesindividuales para el relleno y para cada lado hemos usado unaunidad de medida distinta. Cuando se usa un porcentaje (comoen padding-left) éste se refiere al ancho del bloque de

contención, es decir, a la caja del elemento padre (en esteejemplo, es <BODY>). Como el color de fondo del relleno esigual a la propiedad "background" del elemento, hemosusado esta propiedad para definir un color amarillo de fondo.

En los siguientes párrafos 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 párrafo:

Un párrafo 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 párrafo con padding: 20px 8px



Especificando tres valores, padding: 2em 12px 24px, se aplican en este orden: El primero (2em) al rellenosuperior, 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 párrafo 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 párrafo con padding: 8px 0px 16px 24px

Cerrar

Border-width

Vamos a usar un párrafo con las siguientes reglas de estilo para especificar el ancho de sus bordes. Tambiéndefinimos 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 párrafo 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 siempreresultará uno más ancho que el anterior (en ese orden, por supuesto). Para el borde izquierdo usamos una medida específica (4 pixeles)que puede darnos una idea, por comparación, de cuáles 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 párrafo.

En los siguientes párrafos 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 párrafo:

Un párrafo con border-width: thin

Con dos valores especificados: border-width: thin thick, el primero (thin) define el grosor de los bordessuperior e inferior, el segundo (thick) los bordes derecho e izquierdo:

Un párrafo 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 párrafo con border-width: thin medium thick

Finalmente, especificando cuatro valores, border-width: 2px medium 8px 12px, estos se aplican en esteorden: arriba(2px), derecha(medium), abajo(8px), izquierda(12px).



Un párrafo 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 esovamos a aprovechar esta página para observar algunos efectos que se pueden conseguir usando laspropiedades de los márgenes, 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 párrafo de prueba. Por medio de la propiedad resumida"margin" le hemos definido sus márgenes superior e inferioriguales a cero (0) y los márgenes izquierdo y derecho de un 25%

del ancho de su bloque de contención (BODY, en este caso).Con "padding" le aplicamos un relleno de 8 pixeles en todossus lados. Con "border-width" le pusimos los bordessuperior e izquierdo finos, y los bordes derecho e inferiorgruesos. Con "border-color" le dimos un color azul a losbordes finos y un azul marino a los bordes gruesos. Finalmenteusamos dos propiedades que aún no hemos visto en esta guía:"border-style: solid" para que el borde sea visible y ledimos un color azul claro al fondo mediante la propiedad

"background" (este color también define el color de fondo delrelleno).

Con algunos pequeños cambios en la hoja de estilo anterior, vamos a hacer que nuestro párrafo dé laimpresión de estar incrustado en la página:

.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 párrafo anterior, usando bordes de distinto grosor y color,conseguimos que diera la sensación de estar sobresaliendo de la

página. Con algunos pocos cambios en las propiedades"border-width" y "border-color" logramos el efectocontrario, haciendo aparecer al párrafo como si estuviera metido dentro de la página. Para reforzar el efecto usamos un fondoblanco.

Cerrar

Border-style

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



Un párrafo con border-style: dotted

Un párrafo con border-style: dashed

Un párrafo con border-style: solid

Un párrafo con border-style: double

Un párrafo con border-style: groove

Un párrafo con border-style: ridge

Un párrafo con border-style: inset

Un párrafo con border-style: outset

Cerrar


Background-color

Con las siguientes reglas definimos el color de fondo para BODY H1 y P



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

Background-image

Con las siguientes reglas vamos a usar la primer imagen como fondo para BODY y la segunda imagen para elfondo de H1.

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

H1 {background-image: url(bg-tile2.gif)}

Cerrar

Ver

La imagen de la flecha usada para BODY tiene zonas transparentes, de modo que el color de fondo de Body seve a través de esas zonas transparentes. Si cambiamos el color de fondo obtenemos otro efecto:

BODY { background-color: #CCCCCC;

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_color.html

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_color.html

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_img.html

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_img.html



background-image: url(bg-flecha.gif)}

Ver

Background-repeat

El valor inicial de "background-repeat" es "repeat" por eso en los ejemplos anteriores la imagen de fondose repite en sentido horizontal y vertical formando un mosaico. Para que la imagen se repita solamente ensentido 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);

Cerrar

background-repeat: repeat-y;

}

Ver

Finalmente, para que la imagen aparezca solamente una vez debemos usar:

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_img2.html

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_rep1.html


http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_img2.html





BODY { background-color: #CCCCCC;background-image: url(bg-flecha.gif);

background-repeat: no-repeat;}

Ver

Background-attachment

Habiendo especificado una imagen de fondo, podemos hacer que el mismo permanezca fijo cuando seefectúa un desplazamiento en la página:

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:

Cerrar

BODY { background-color: #FFCC33;

background-image: url(bg-flecha.gif);background-attachment: scroll;

}

Ver


http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_attach.html

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_attach.html


http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_scroll.html

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_scroll.html



Cerrar


Background-position



Vamos a ubicar esta imagen de fondo con los siguientes valores de porcentaje. En este caso no la repetimospara poder observar bien la posición pero si no usáramos "no-repeat" la imagen comenzaría a repetirsedesde la ubicación 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 ubicación horizontal esnegativa).

BODY {background-color: #9999FF;background-image: url(bg-mancha.gif);

background-repeat: no-repeat;background-position: -16px 64px;}

Ver

A continuación 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;

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bg_pos1.html






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

Background

Usando esta propiedad resumida vamos a definir el color de fondo y una imagen ubicada en el centro de lapágina que se repite en sentido vertical:

Cerrar









página que se repite en sentido vertical:

BODY {background: #9999FF url(bg-mancha.gif) repeat-y center }

Ver

Cerrar

Display: none

Vamos a usar dos imágenes para demostrar la propiedad display:

Imagen 1. Display=inline

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bckgrnd.html

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/bckgrnd.html



Imagen 2. Display=none

La segunda imagen no es visible y el espacio es ocupado por el contenido que está a continuación (estepárrafo y los siguientes).

Utilización en scripts

Este es un ejemplo muy sencillo del uso que puede tener el valor none para la propiedad display enJavaScript. Se trata de un párrafo normal que al recibir un click esconde o muestra alternativamente elcontenido de un elemento DIV.

HACER CLICK AQUÍ PARA OCULTAR O MOSTRAR

Este párrafo 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á acontinuación en la página.

Cerrar

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:">

E t á f tá t id d t d DIV



Este párrafo está contenido dentro de un DIV...</div>

Cuando se señala el primer párrafo, el cursor del ratón se transforma en una flecha hacia abajo [cursor: s-resize] para indicar visualmente la acción. Al hacer un click en el párrafo se llama a la función Alternar delscript 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 parámetro al llamar la función Alternar yla propiedad display sin ningún 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 elvalor 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 sólo funciona en IExplorer 4 ó superior y no pretende enseñar el uso de JavaScript sino una

posible aplicación de la propiedad display. Lo interesante en este caso es que casi todo puede resolverse

mediante el uso de estilos, por ejemplo el párrafo que actúa como disparador de la función tiene asignada lapropiedad cursor:s-resize para que haya alguna indicación visual sin la necesidad de usar un link en elpárrafo. De igual modo, el script se resuelve sencillamente cambiando el valor de la propiedad display sinnecesidad de apelar a ningún otro recurso.

Desgraciadamente, Netscape implementa de otro modo el modelo de objeto del documento (DOM) por lo quel S i t d t á i f i él E t i t t b l i d fi ié l DIV



el Script de esta página no funciona en él. Esto es importante saberlo, ya que si definiéramos en el DIV[<div id="seccion1" style="display:none">] éste sería inicialmente invisible y los usuarios de Netscape

u otro navegador que no pueda procesar el script no verían el contenido del DIV.

Implementar un script que funcione en ambos navegadores es una tarea un tanto compleja. Para quienesestén interesados en el tema he incluido una página con un ejemplo de menúes desplegables perteneciente a

Thomas Brattli (www.bratta.com) que obtuve de su página.

El autor permite el uso de su trabajo con la condición de que se mantenga intacto el mensaje inicial delscript, de modo que pueden modificarlo a su gusto y utilizarlo sin inconvenientes (he traducido loscomentarios para facilitarles ese trabajo). Pueden visitar la página Brattli para obtener otros ejemplos de

JavaScript que podrán usar en sus páginas, en cuyo caso recuerden dejar el aviso que indica de donde losobtuvieron (no nos cuesta nada y es una forma de agradecerle su ayuda).

Cerrar

Position: relative

(P1) Con esta propiedad desplazamos un elemento de la posición que ocuparía normalmente.

(P2) A continuación, vamos a repetir este párrafo y el anterior (marcados P1 y P2) pero usaremos lassiguientes propiedades para P2:

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/script.html

http://www.bratta.com/

http://www.bratta.com/

http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/script.html



g p p p

.p2 {position: relative;

top: -2em;left: 80px; }

(P1) Con esta propiedades desplazamos un elemento de la posición que ocuparía normalmente.(P2) A continuación, vamos a repetir este párrafo y el anterior (marcados P1 y P2) pero usaremos lassiguientes propiedades para P2:

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

Podemos observar en el segundo caso cómo P2 ha sido desplazado de su posición normal. Con top: -2em y

left: 80px, lo movemos 2em hacia arriba (superponiéndolo en parte con P1) y 80px hacia la derecha. Sinembargo, no afecta la posición del elemento siguiente (el elemento PRE, en rojo) que viene a continuación yque mantiene su ubicación normal.

Cerrar



Position: absolute

En este ejemplo vamos a usar un elemento DIV que contiene la imagen de una mancha azul con lassiguientes propiedades:

DIV#ejemplo { position: absolute;



top: 10px;left: 300px}

Si observa el código de esta página, el DIV que contiene la imagen está ubicado justo antes de este párrafo,pero, como el bloque de contención de este DIV es la página (el elemento BODY), la imagen aparecerá a10px por debajo y a 300px hacia la derecha de la esquina superior izquierda de la página.

Ahora bien, si el DIV de nuestro ejemplo se encontrara incluido dentro de otro DIV posicionado, este últimose convertiría en el bloque de contención y entonces la imagen se ubicaría con relación a él (y no conrespecto a la página).

Este DIV, que tiene un fondo gris para su identificación, está posicionadorelativamente. Esto no significa necesariamente que deba ser movido de suubicación normal, simplemente basta que tenga asignada la propiedadposition: relative para que se convierta en el bloque de contención de

nuestro ejemplo. De este modo, la imagen se ubica a 10px por debajo y a 300pxhacia la derecha de la esquina superior izquierda de este DIV (no ya de lapágina).

(En el código, el DIV aparece justo antes de este párrafo)

Para confirmar, vamos a utilizar un elemento DIV como el anterior pero sin definir su posición 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á



Esto es lo que sucede: el DIV con la imagen de una flecha amarilla se ubicarácon relación a la esquina superior izquierda de la página (a continuación de laimagen de la mancha) porque este DIV no está posicionado.

(En el código, el DIV aparece justo antes de este párrafo)

Esto debe quedar en claro: la ubicación de un elemento con position:absolute se fija con respecto a laesquina superior izquierda de la página, a menos que ese elemento tenga un antepasado posicionado (esdecir, con un valor relative, absolute o fixed para position), en cuyo caso su posición se fija conrespecto a la esquina superior izquierda de ese antepasado.

Se debe tener en cuenta que el valor absolute (como así también fixed) provocan que el elemento notenga ninguna influencia sobre los elementos siguientes. Veamos un ejemplo: a continuación tenemos cuatropárrafos, el primero y el tercero tienen la propiedad position. Para el primero, el valor de position esrelative y para el tercero es absolute. No se usa ninguna otra propiedad (salvo el color, paradiferenciarlos) de modo que ambos párrafos mantienen su posición dentro del documento.

Un párrafo con position:relative

Otro párrafo

Otro párrafo

Lo que sucede es que el tercer párrafo (position:absolute), a pesar de mantener la misma posición, ha sidoquitado del flujo normal de la página y el párrafo siguiente ocupa su lugar (provocando la superposición de

Un párrafo con position:absolute

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 página.

En el código de la página, el DIV con position:fixed está ubicado junto antes de este párrafo. El resultadoes un rectángulo celeste que abarca todo el ancho de la página ubicado en la parte superior de la misma. Alhacer un desplazamiento (scroll), el rectángulo se mantiene en su posición, lográndose 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 suvez, ese DIV estará contenido por otro -con fondo gris- al que le hemos asignado la propiedadposition:relative, de modo que resulte el bloque de contención para los de la imagen.



ej1 {position: absolute;top: 50%;

left: 50%;}

Notarán 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 vértice inferior derecho de la imagen el que queda ubicado exactamente en el

centro del bloque de contención. Con el uso de valores negativos podemos hacer que la imagen se ubiquepor fuera de su bloque de contención.

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 "apilarán". En este caso, vamos a usarcomo ejemplo a dos párrafos: este mismo y el siguiente, con fondo amarillo y una imagen centrada.



Repetimos los dos párrafos anteriores pero haciendo que se superpongan. Para eso, le aplicamos al primerolas propiedades: position:relative y z-index: 0, y al segundo: position:relative, top: -3em y z-

index: 1.

En los casos en que dos elementos queden superpuestos, podemos determinar el orden en que se "apilarán". En este caso, vamos a usarcomo ejemplo a dos párrafos: este mismo y el siguiente, con fondo amarillo y una imagen centrada.

En los casos en que dos elementos queden superpuestos, podemos determinar el orden en que se "apilarán". En este caso, vamos a usar

como ejemplo a dos párrafos: este mismo y el siguiente, con fondo amarillo y una imagen centrada.

Vemos que el segundo párrafo se superpone con el primero y queda al frente al tener z-index=1. Enrealidad, aunque no hubiésemos usado la propiedad z-index igualmente qudaría por encima al estar ubicadoa continuación dentro del código de la página, 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 elprimer párrafo.

Cerrar



La propiedad 'float'

El efecto de esta propiedad es bastante simple pero resulta muy útil para que el diseño de la página seadapte al monitor del usuario. Lo que hace la propiedad es quitar al elemento del flujo normal de la página ycolocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia unou otro costado).En este ejemplo el título tiene float:none y mantiene su posición normal



En este ejemplo, el título tiene float:none y mantiene su posición normal.

La propiedad 'float'El efecto de esta propiedad es bastante simple pero resulta muy útil para queel diseño de la página se adapte al monitor del usuario. Lo que hace la

propiedad es quitar al elemento del flujo normal de la página y colocarlo a la izquierda o derecha del restodel contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado).En este ejemplo, el título tiene float:left y se coloca a la izquierda de este párrafo.

La propiedad 'float'El efecto de esta propiedad es bastante simple pero resulta muy útil para queel diseño de la página se adapte al monitor del usuario. Lo que hace lapropiedad es quitar al elemento del flujo normal de la página y colocarlo a la izquierda o derecha del restodel contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado).En este ejemplo, el título tiene float:right y se coloca a la derecha de este párrafo.

La propiedad clear

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

Cerrar

sobre su izquierda, sobre su derecha o a ambos lados. También 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 seubicará a la izquierda de este párrafo



ubicará a la izquierda de este párrafo.

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

Ahora tenemos dos elementos DIV con dos imágenes, ambos tienen la propiedad float:left. El efecto esque ambas se ubican a la izquierda de este párrafo. Debido a las reglas para los flotantes, primero se ubica

la flecha sobre la izquierda y luego la mancha (que también 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 queno admite a otro flotante sobre su izquierda. El resultado es que ambas imágenes quedan sobre la izquierdade este párrafo, 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 también a los elementos reemplazados (como IMG). Primero vamos a crear un elemento <PRE> quetiene asignadas las siguientes propiedades:

PRE { backgro nd color #FFFFCC



PRE { background-color: #FFFFCC;color: blue;

border: 1px solid green;width: 50%;height: 12em; }

A: Enlace de hipertexto o destino de un linkABBR: AbreviaturaACRONYM: AcrónimoADDRESS: DirecciónAREA: Area de un mapa de imagen

B: Texto en negritas

El elemento ocupa un 50% del ancho de la página y una altura aproximada al doble del texto que contiene.Repetimos el ejemplo, esta vez reduciendo su tamaño a la mitad (width: 25%; height: 6em):

A: Enlace de hipertexto o destino de un linkABBR: AbreviaturaACRONYM: Acrónimo

ADDRESS: Dirección

AREA: Area de un mapa de imagenB: Texto en negritas

Esto es lo que sucede: el fondo de color indica el tamaño que tiene el elemento; en el segundo caso (segúnla resolución de su monitor, puede suceder también 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 dela caja del elemento <PRE>. Ahora, repetimos el segundo ejemplo aplicando los otros valores que puedetener 'overflow':

Con overflow: hidden

A: Enlace de hipertexto o destino de un linkABBR: AbreviaturaACRONYM: AcrónimoADDRESS: Dirección

AREA: Area de un mapa de imagenB: Texto en negritas

Con overflow: scroll

A: Enlace de hipertexto o destino de un linkABBR: AbreviaturaACRONYM: Acrónimo

ADDRESS: DirecciónAREA: Area de un mapa de imagenB: Texto en negritas

Con overflow: auto

A: Enlace de hipertexto o destino de un link

ABBR: AbreviaturaACRONYM: AcrónimoADDRESS: DirecciónAREA: Area de un mapa de imagenB: Texto en negritas

El valor hidden provoca que el texto que desborda la caja sea recortado, de modo que sólo pueda verse una



parte del mismo. Los valores scroll y auto también recortan el texto pero aparecen unas barras dedesplazamiento 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 loselementos reemplazados. Si el área es menor que el elemento, una parte de éste quedará desbordando lacaja y con 'overflow' podemos definir si el contenido que desborda debe quedar visible, oculto o debe tenerun 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 linkABBR: Abreviatura

ACRONYM: AcrónimoADDRESS: DirecciónAREA: Area de un mapa de imagenB: Texto en negritasBASE: URI de base del documentoBDO: Sustitución del algoritmo debidireccionalidad

BIG: Texto más grande

BODY: 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 linkABBR: AbreviaturaACRONYM: AcrónimoADDRESS: DirecciónAREA: Area de un mapa de imagen

B: Texto en negritasBASE: URI de base del documentoBDO: Sustitución del algoritmo debidireccionalidadBIG: Texto más grandeBODY: Cuerpo del documento

<p class="n



'visibility'

A continuación de este párrafo tenemos una imagen:



A continuación de este párrafo tenemos la misma imagen, pero esta vez con visibility:hidden.

La segunda imagen es invisible pero continúa ocupando su lugar dentro de la página.

Utilización en scripts

Vamos a implementar un pequeño ejemplo en JavaScript:

Layer 1

Layer 2

<SPAN onmouseover="NoVer(test

Cerrar

Cursores

La siguiente tabla muestra los distintos valores para la propiedad 'cursor' aplicados a un párrafo, un link y auna imagen. El cursor del ratón debe cambiar su forma al pasar por encima de ellos.

Párrafos Enlaces Imágenes



auto

auto

crosshaircrosshair

defaultdefault

pointerpointer

movemove

e-resizee-resize

ne-resizene-resize

nw-resizenw-resize

n-resizen-resize

se-resizese-resize



se resize

sw-resizesw-resize

s-resizes-resize

w-resizew-resize

texttext

waitwait

help help

<uri><uri>

Cerrar



Contornos dinámicos: 'outline'

En esta página tenemos un formulario (FORM) con tres áreas para entrada de texto (INPUT) y dos botones(BUTTON). Más 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:



p g g

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 unalínea llena de 2px de grosor. Para rotar el foco entre los distintos elementos se puede utilizar la tecla detabulación (TAB).

Nombre:

Apellido:

Edad: años

OK Borrar



Cerrar

Comillas: la propiedad 'quotes'

En la composición de textos es costumbre, cuando la cita abarca varios párrafos, utilizar comillas de aperturaen cada párrafo y una comilla de cierre en el párrafo 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 loslugares 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 continuación, 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 mañanas le faltan.

Su voluntad le ha impuesto una disciplina precisa. Hará determinados actos, cruzará previstas esquinas, tocará un árbol o una reja, para que elporvenir 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 término final de una serie. (...)

En la hora fijada, subirá por unos escalones de mármol. (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. Dócilmente, mágicamente, yahabrá apoyado el arma contra la sien.

Así, lo creo, sucedieron las cosas.

Antes de cada párrafo se insertarán comillas (de color rojo y en negritas para su mejor visualización) ysolamente el último tendrá comillas de cierre (como no hay selector para seleccionar el último descendientede un elemento, debemos apelar a una clase (ultimo).



Podemos definir distintos tipos de comillas según nuestra preferencia o el idioma de la cita. En el próximopárrafo 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 capítulo que habla de Cristo no es efusivo. Se limita a invocar dos lugares de la Escritura: la frase doy mi vida por lasovejas (Juan, 10:15) y la curiosa locución dió el espíritu, que usan los cuatro evangelios para decir murió, en El Biathanatos.

Las comillas que aparecen (en negritas de color rojo) son insertadas automáticamente antes y después decada elemento <Q>. Al existir comillas anidadas (unas dentro de otras), para el nivel externo se usan comillasdobles ("), 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 capítulo 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 locución dió el espíritu, 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 cadaidioma. Si queremos que los textos en francés de una página usen el estilo de comillas usuales en eseidioma, se debe usar esta regla:

[LANG|=fr] > * { quotes: "«" "»" "‹" "›" }



Cerrar

ContadoresSupongamos que en una página debemos desarrollar un tema con varias secciones que incluyen distintassub-secciones compuestas por párrafos. Para numerar las secciones y sub-secciones deberíamos escribir elnúmero de orden antes de cada título y subtítulo; si se alterara el orden de las secciones deberíamosnuevamente modificar esos números para que coincidieran con la nueva organización. Demasiadocomplicado.



p

Es aquí donde de advierte el beneficio del contenido generado por las CSS: podemos hacer que cada antesde cada título y subtítulo se inserte el número de orden, de modo que si la composición sufre algún cambiono deberemos preocuparnos por numerar nuevamente el trabajo "a mano". A continuación del siguienteejemplo, están las reglas de estilo y su explicación.

Primer título

Primer subtítulo del primer título

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

Segundo subtítulo del primer título


Este tema no tiene un título (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 subtítulo del segundo título


Segundo subtítulo del segundo título


Tercer título

Primer subtítulo del tercer título


Segundo subtítulo del tercer título



Segundo subtítulo del tercer título


H1:before { content: "Tema " counter(sección) ". ";counter-increment: sección;counter-reset: sub-sección; }

H2:before { content: counter(sección) "." counter(sub-sección) " ";counter-increment: sub-sección; }

Explicación:

H1:before { content: "Tema " counter(sección) ". "

Antes de cada título se inserta la cadena de texto "Tema ", seguida del contador que hemosdenominado sección, seguido de la cadena ". " (punto y espacio).

counter-increment: sección

Se incrementa en 1 el contador sección (Cada vez que aparece un elemento <H1> el número delcontador suma 1).

counter-reset: sub-sección

Se vuelve a cero el contador para <H2> (que llamamos sub-sección), así cada vez que hay un subtítulo(<H2>) comienza desde 1.

H2:before { content: counter(sección) "." counter(sub-sección) " "

Antes de cada elemento <H2> se inserta el contador sección, luego un punto, luego el contador sub-sección y luego un espacio en blanco.

counter-increment: sub-sección

Se incrementa el contador sub-sección en 1. Si quisiéramos un incremento de 2 en 2, por ejemplo,

bastaría con poner counter-increment: sub-sección 2 y la numeración seguiría el orden: 1, 1.2,1.4 ... 2, 2.2, 2.4 ...

Cerrar



ListasEstas son todas las propiedades que pueden utilizarse con las listas:

none:

q ItemUno



q ItemUnoq ItemDosq ItemTresq ItemCuatroq ItemCinco

Signosdisc:


circle:


square:


Sistemas numéricos

decimal:

1. ItemUno2. ItemDos3. ItemTres4. ItemCuatro5. ItemCinco

decimal-leading-zero:


lower-roman:


upper-roman:




hebrew:


georgian:


armenian:


cjk-ideographic:


hiragana:


katakana:


hiragana-iroha:


katakana-iroha:


Sistemas alfabéticos

lower-latin:


lower-alpha:


lower-greek:




upper-latin:


upper-alpha:


Cerrar

Medidas absolutas

pt (puntos)

U id d d did ili d i fí C d i l 1/72 l d



Unidad de medida utilizada en tipografía. Cada punto equivale a 1/72 pulgada.

Esta es una fuente de 12 puntos de tamaño.




pc (picas)

Unidad de medida utilizada en tipografía. La pica equivale a 12 puntos.

Esta es una fuente de 1 pica de tamaño (igual a 12pt).

Esta es una fuente de 1.2 pica de tamaño (igual a 14.4pt).

Esta es una fuente de 1.5 pica de tamaño (igual a 16pt).

mm (milímetros), cm (centímetros)

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 centímetros.

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 tipografía que corresponde al tamaño de fuente asignada al elemento o heredadapor él (en castellano se la llama "cuadratín"). Ver la ilustración de arriba.

El elemento <BODY> de esta página tiene asignado font-size: 12pt. Como este párrafo hereda esa propiedad, la

medida em corresponde a 12pt. Los elementos <B> de la página tienen en cambio 1.5em (18pt). Esta barra azul tiene1em de ancho.

Este párrafo tiene asignado font-size: 16pt,entonces em es igual a 16pt y los elementos

<B> miden 24pt (1.5em). Esta barra azul también tiene 1em de ancho (comparar con ladel párrafo anterior).

Por ser una medida relativa, em varía de acuerdo al tamaño de la fuente relevante. En el primercaso, el párrafo hereda la fuente del elemento padre <BODY>. En el segundo caso, hemos

reemplazado ese valor al asignarle la propiedad "font-size: 16pt" al párrafo y de este modo, em tieneun tamaño mayor.

ex (altura de la x)

Medida usada en tipografía que corresponde que corresponde a la altura de las minúsculas sinacentos ni rasgos ascendentes (se toma la letra x como referencia, pero esta medida existe aún para

las fuentes que no tienen la x). Ver la ilustración de arriba.

La relación de altura entre las minúsculas y las mayúsculas varía en cada diseño de alfabeto. Porejemplo, suponiendo un valor de 100 para las mayúsculas, en la tipografía Verdana las minúsculas

miden 58 pe o en la Times Ne Roman miden 46



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 párrafos enteriores tienen como medida 2ex , pero se puede ver que ex es mayor o menorsegún la fuente utilizada (deben recordar que si no tienen algunas de estas fuentes instaladas, elnavegador las reemplazará por la fuente predeterminada y entonces puede suceder que el párrafo

que supuestamente usa Verdana, en realidad esté usando Arial en su computadora).

Cerrar

PorcentajesSi han consultado la sección sobre Cascada y Herencia entenderán la diferencia entre valores especificados y valorescomputados. 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 página:

<P>Este párrafo 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 página:

Este párrafo 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 supadre. Entonces <I> heredaría "font-size: 200%" de su padre <B> y su texto debería tener el doble de tamaño que el de su padre.

Pero vemos que ambos tienen igual tamaño. Esto es porque, en realidad, <I> no hereda el porcentaje (200%) sino el valorcomputado de "font-size" de <B> (o sea, 24pt).

Cerrar

Css - Manual_css

Documents

Transcript of Css - Manual_css