CSS ICAP 2007

CSS
© José Ramón Quevedo Santana
Todos los derechos reservados.

Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana
Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info
1 de 75

R.1.2.5.230707. Manual sobre Hojas de Estilo en Cascada.

2 de 75

Ayúdenos a mejorar

Ningún manual es perfecto, y espero que antes de acabar de leer este trabajo encuentre al menos
uno o dos errores. Su labor es imprescindible para mantener actualizado este documento y poder
crear nuevas revisiones más fiables y con mayor calidad.

Errores, dudas, sugerencias, por favor remítalos a: info@qweos.net

3 de 75

Calidad

Basado en el estándar del Sigue pautas del Conforme a los desarrollos del
World Wide Web Consortium W3C Quality Assurance Web Standards Project
(W3C)

10 Years with Style

Curso aprobado por:

4 de 75

Convenciones
Elementos usados este manual…

Información de carácter general que añade o aporta contenido adicional al
tema central del curso.

Contenidos basados en las especificaciones y recomendaciones oficiales del
W3C World Wide Web Consortium (W3C).

Ejemplo práctico, normalmente se mostrará acompañado de la palabra
Ejemplo. Código de muestra.

Información, reglas y consejos relativos al diseño y desarrollo con estándares
Web.

(X)HTML Hace referencia tanto a la especificación HTML 4 como a la XHTML 1.0.

5 de 75

1 ¿Para quién?
Este curso es para…

… los profesionales Web, tanto diseñadores como desarrolladores, que deseen
experimentar las amplias posibilidades que ofrecen las Hojas de Estilo en
Cascada en los documentos (X)HTML.

Este manual asume que el lector tiene experiencia con XHTML y los desarrollos
con estándares Web (W3C), dado que la mayoría de ejemplos se aplican a este
lenguaje de marcado. No es necesario poseer conocimientos adicionales sobre
JavaScript, lenguajes de programación, etc.

Este manual no pretende ser una referencia que abarca de forma prolija y
pormenorizada toda la especificación CSS, para ello ya existe la propia
Recomendación Oficial del Consorcio de la Web – W3C-
(http://www.w3.org/Style/CSS/) y otros muchos recursos, probablemente, más
cualificados que este. El objetivo es servir de guía rápida para toda aquella
persona que desee comenzar a instruirse en la escritura, con buena letra, de
CSS.

6 de 75

2 ¿Qué es?
CSS es un lenguaje de estilo que se puede utilizar conjuntamente con (X)HTML
para definir, de forma bastante precisa, la presentación visual de nuestros
documentos Web.

Introducción a las Hojas de estilo.

El lenguaje (X)HTML siempre ha estado limitado a la hora de aplicarle forma y
estilo a un documento. Esto es así porque fue concebido para unos usos
restringidos, muy distintos a los actuales que son más amplios y exigentes.

Antes de la aparición de las Hojas de estilo en cascada (CSS: Cascading Style
Sheets), los diseñadores tenían que conformarse con sacar el máximo provecho
a la presentación usando los elementos HTML, diseñados únicamente para la
estructura, olvidando, en la mayoría de los casos, su función original. Se
utilizaban (y, lamentablemente, aun se utilizan) técnicas tales como la
utilización de tablas para la maquetación de la interfaz de usuario (GUI),
imágenes (GIF) transparentes para ajustar los elementos, utilización de
etiquetas que no pertenecían a la definición estándar, etc.

Estos “trucos”, en muchos casos, provocaban comportamientos inesperados en
los navegadores. A pesar de utilizarlos, muchos diseñadores, sobre todo los
procedentes del mundo de la imprenta donde el control sobre la forma del
documento es total, fracasaban en su intento de controlar la presentación de
los documentos Web.

Separar estructura y presentación: todo ventajas

CSS presenta muchas ventajas frente a estas antiguas técnicas, la mayoría de
las cuales tienen su fundamento en la separación completa entre el contenido
(o estructura) y su presentación (o estilo).

7 de 75

Esto, aparte de las ventajas inherentes de obtener un código más limpio y de
menos peso, supone la situación ideal que permite:

• A los escritores y expertos en documentación y contenidos crear la
información sin perder el tiempo en su forma visual.

• A los diseñadores y desarrolladores definir cómo se va a mostrar (la
apariencia y disposición) de esa información.

En general, usar CSS tiene como resultados:

• una mayor productividad, disminuyendo el trabajo de producción y
mantenimiento.

• aumenta la accesibilidad del documento, al contar con un buen código
estructural separado de la presentación visual, nuestras páginas son
accesibles y entendidas por una mayor audiencia.

• Reducen la cantidad de código necesario, mejorando el tiempo de
respuesta y la velocidad de presentación de la página.

Aplicación de las CSS

El modo de funcionamiento de las CSS consiste en definir, mediante una
sintaxis especial, la forma de presentación que le aplicaremos a:

• Un Sitio Web entero. Con el uso de CSS, los autores pueden cambiar
todo el diseño de un sitio con sólo modificar la hoja de estilos del
mismo, en lugar de actualizar las etiquetas en cada uno de los
documentos HTML existentes en el mismo.

8 de 75

• Un documento HTML, se puede definir el estilo, a través de un pequeño
trozo de código en la cabecera del documento HTML, a toda la página.

• Una porción del documento, aplicando estilos en un determinado lugar
de la página.

• Un elemento o etiqueta, llegando incluso a poder definir varios estilos
diferentes para una única etiqueta dependiendo del contexto donde se
encuentre.

Soporte de los navegadores

Esta tecnología no es nueva, pero no todos los navegadores la soportan.

Los navegadores como Netscape 4 y superiores y Microsoft Internet Explorer 3
son capaces de empezar a comprender algunos reducidos estilos CSS. Además,
no todos los navegadores implementan las mismas funciones de las hojas de
estilos. No obstante, los navegadores de reciente creación (año 2001 en
adelante) soportan bastante bien la mayoría de características CSS.

Veamos una reducida comparativa de los principales navegadores y su
clasificación según el nivel de soporte de CSS:

Categoría Fechas (aprox.) Soporte CSS Navegadores
Ningún soporte de
CSS. No se
NS 3 y anteriores.
Finales de 1995 / implementa ningún
IE 2 y anteriores.
Obsoletos Primer semestre estilo. Cualquier
Opera 3.5 y
1996 definición CSS es
anteriores.
simplemente
ignorada

Soporte marginal y, a
menudo, imperfecto IE 3 y 4
Segundo semestre
de CSS. Muchos IE 5 (Win)
Antiguos 1996 / Primer
estilos no son NN 4
semestre 2000
mostrados Opera 4
correctamente.

9 de 75

Soportan casi de
forma completa la
especificación CSS 1
IE 5 (Mac)
Segundo semestre y muestran
Recientes 2000 correctamente, al
IE 5.5 (Win)
Opera 5
menos, algunas
características de
CSS 2

IE 6 (Win) y
Soportan toda la
posteriores
Segundo semestre especificación CSS 1
Modernos 2001 en adelante y la mayoría, si no
NS 6 y posteriores
MZ 1 y posteriores
toda, de CSS 2
Opera 6 y posteriores

Leyenda:
• NN: Netscape Navigator
• NS: Netscape
• IE: Microsoft Internet Explorer
• MZ: Mozilla
• Win: plataforma Microsoft Windows
• Mac: plataforma Apple Macintosh (MacOS)

Si desea información detallada sobre el soporte CSS de los navegadores visite:
http://www.w3.org/Style/CSS/

10 de 75

3 ¿Cuándo?
Un poco de historia.

CSS no apareció hasta 1996, cinco años después del nacimiento del WWW.

En un principio, los lenguajes de estilo HTML eran internos, utilizados por el
navegador y no disponibles para el autor del documento.

Pronto resultó evidente que el control de la presentación debía estar, de
alguna manera, separado de las reglas de interpretación internas del navegador
y disponible para el autor Web.

En 1994, Håkon Wium Lie publicó el primer borrador de Cascading HTML
StyleSheets, las Hojas de estilo en cascada en HTML.

Håkon imaginó que el lenguaje de estilo debía combinar, de alguna manera, las
preferencias del autor y del usuario. Su propuesta se materializaba mediante
una “cascada” que seguía múltiples reglas de estilo y un sistema bien definido
que determinaba la importancia de cada regla si existía algún conflicto entre
ellas.

Hasta ese momento para poder controlar el diseño, en un medio que
originariamente no estaba preparado para tal propósito, se usaban complejas
tablas, cuyo mantenimiento y carga eran nefastos. CSS emergió rápidamente
como un estándar para el diseño Web como respuesta ante esa situación.

El World Wide Web Consortium (W3C) publicó la primera recomendación CSS
(CSS 1) el 17 de diciembre de 1996. El 12 de mayo de 1998 creó la
especificación CSS 2 que mejoraba, corregía y ampliaba a la primera edición,
ésta también fue revisada el 25 de febrero de 2004 dando lugar a la

11 de 75

especificación CSS 2.1 (no finalizada hasta julio de 2007). En el momento de
escribir estas líneas, varios módulos de CSS 3 están en desarrollo.

Internet Explorer 3 fue el primer navegador que implementó CSS en agosto de
1996, antes incluso de que CSS fuera una recomendación oficial. Netscape fue
el siguiente y desde entonces casi todos los navegadores, en mayor o menor
medida, han dado soporte a esta tecnología.

12 de 75

4 ¿Cómo?
4.1 Herramientas necesarias

Como sucede con (X)HTML, para escribir CSS bastará con nuestro editor de
texto favorito, guardando el archivo resultante con la extensión .css. Para
visualizar los documentos, utilizaremos un navegador. Se pueden usar otras
herramientas o editores más complejos, aunque no son estrictamente
necesarios para el aprendizaje.

Para probar y depurar las páginas basadas en CSS, sería de gran utilidad
disponer de varios navegadores en diferentes plataformas. El W3C también
cuenta con un completo servicio de revisión en http://jigsaw.w3.org/css-
validator/

4.2 Reglas y su sintaxis

W3C Una hoja de estilo está formada por una o varias reglas que controlan cómo
deben representarse los elementos seleccionados.

Cada regla tiene dos partes:

1. un selector que define el elemento, o elementos, (X)HTML al cual se le
aplica la regla.

2. un bloque de declaración, definido entre llaves { y }.

La declaración, además, contiene una colección de uno o más conjuntos
de propiedad y valor separados por dos puntos (:).

Cada declaración se termina seguida de un punto y coma (;), con la
excepción del último conjunto, para el cual es opcional. En este manual
siempre utilizaremos punto y coma al finalizar cada par de propiedad-
valor, para evitar la confusión sobre cuándo ponerlo y cuándo no.

Las propiedades1 son los aspectos del elemento (selector) al que ha
elegido aplicar estilo.

El valor es el estilo exacto que quiere establecer para esa propiedad.
1
Algunos libros y manuales las denominan “atributos”, hemos optado por seguir la
nomenclatura del W3C para evitar confundirlas con los atributos (X)HTML.

13 de 75

Sintaxis de una regla de estilo:

Bloque declaración
Selector
Propiedad Valor
h1 { color: #000; }

Ejemplo:

h1 { color: #000; font-size: 72%; }

En nuestro ejemplo anterior, el selector aplica a todos los elementos de
encabezado HTML h1 unas propiedades de color y tamaño de fuente
específicos.

4.3 Propiedades y elementos afectados

W3C ¿Qué propiedades pueden contener las reglas CSS?

Como veremos en la sección “Propiedades CSS”, las reglas de estilo pueden
incluir propiedades que afectan casi a cualquier aspecto de la presentación de
un Sitio Web.

La referencia completa la puede encontrar en:
http://www.w3.org/TR/2004/CR-CSS21-20040225/propidx.html

¿A qué elementos se le pueden aplicar las reglas?

CSS nos permite, por ejemplo, aplicar estilos a todos los párrafos, pero,
además, mediante una serie de combinaciones en la forma en la que sean
usados los selectores, el autor puede determinar si la regla se aplica de manera
general a todos los elementos o únicamente a aquellos elementos que se
encuentren en unas circunstancias (contexto) específicas.

Por ejemplo, podemos asignar reglas a:

• todos los elementos de un tipo específico.
• todos los elementos de un tipo específico asociados a un grupo o clase.
• todos los elementos de un tipo específico que contienen a otros determinados
elementos.
• todos los elementos de un tipo específico que contienen a otros determinados
elementos y ambos están asociados a un grupo o clase.
• todos los elementos de un tipo específico escritos inmediatamente después de
otro elemento determinado.
• un único elemento de un tipo específico al que se le asigna un identificador
único (id).

4.4 Elementos a nivel de bloque y en línea

14 de 75

W3C Elementos a nivel de bloque (block element). Son aquellos elementos del
documento fuente que son tratados visualmente como bloques, es decir, estos
elementos siempre se muestran solos en una línea, y cualquier contenido que
vaya a continuación empieza en otra línea (existe un salto de línea o retorno de
carro).

Algunos elementos a nivel de bloque:

encabezados (<h1>, <h2>, <h3>, etc.) y párrafos (<p>).

Los elementos a nivel de bloque pueden contener otros elementos de bloque,
al igual que elementos en línea.

Elementos en línea (inline element). Corresponden con aquellos elementos
del documento fuente que no forman nuevos bloques de contenido, es decir,
son colocados en líneas unos a continuación de otros y únicamente empiezan
una línea nueva cuando se ha terminado la anterior.

Algunos elementos en línea:

texto enfatizado(<em>) y vínculos (<a>)

Los elementos en línea únicamente pueden contener a otros elementos en
línea.

<div> y <span>
Los estilos se pueden aplicar a casi cualquier elemento (X)HTML. Pero, si
tenemos que aplicar estilo a una sección no definida por un elemento existente,
se puede crear dicha sección utilizando las etiquetas <div> o <span>.

El elemento <div> se utiliza a nivel de bloque, y <span> como elemento en
línea. Si deseamos identificar sólo a ciertos elementos <div> y <span>, en
lugar de a todos los presentes en el código, debemos usar los atributos id y
class junto a los elementos a los que queremos aplicar las reglas de estilo.

Ejemplo:

<body>
<div id="contenedor">
<p>El gran perro <span class="nombre">Genki</span>
saltaba sobre el charco mientras llovía...</p>
</div>
</body>

4.5 Selectores y sus tipos

15 de 75

W3C Recordemos que un selector es la parte de la regla que establece a qué
elemento se aplica el estilo.

Selector universal

Existe un selector universal, escrito con el carácter comodín asterisco "*", y se
corresponde con cualquier tipo de elemento al que se le puede aplicar una
regla de estilo.

Si el selector universal no es el único componente, el asterisco puede omitirse.

Por ejemplo:

*.estilo y .estilo son equivalentes

Selectores de tipos y agrupamiento

Un selector de tipo se corresponde con el nombre de un elemento en el
lenguaje estructural del documento.

Habitualmente el selector es un único elemento, aunque también puede
agruparse con otros elementos separados por comas, con lo que conseguimos
aplicar estilos comunes a varios elementos en una única declaración.

Ejemplo:

h1 { color: red; }
h2 { color: red; }
h3 { color: red; }

Puede agruparse de la siguiente forma:

h1, h2, h3 { color: red; }

Selectores contextuales

CSS nos permite aplicar estilos a un elemento exclusivamente si éste se
encuentra en un contexto determinado.

Así, por ejemplo, si definimos esta regla:

p em { color: #fcc; }

Solo aplicará el color descrito a los elementos enfatizados (em) que se
encuentran dentro de párrafos (p), ignorando la aplicación de estilos para
cualquier otra situación de dicho elemento (em).

Selectores hijo

16 de 75

Veamos la siguiente regla de estilo:

p > em { color: #fcc; }

En este caso la regla de estilo se aplica a los elementos enfatizados (em) dentro
de párrafos (p), pero sólo cuando <em> es hijo de <p> y no en otro caso.

Ejemplo:

<p>Lorem ipsum <em>dolor</em> sit amet, consectetuer
adipiscing elit. <strong><em>Nulla</em></strong> vel
nibh.</p>

Siguiendo con nuestro ejemplo, sólo “dolor” tendrá el estilo aplicado, puesto
que es el único caso en el que el texto enfatizado es hijo del párrafo.

Selectores hermanos adyacentes

Supongamos:

h1 + h2 { margin: 2px; }

En este caso la regla de estilo es aplicada sobre <h2> sólo cuando <h1> y
<h2> tienen el mismo padre (son hermanos) y, además, <h2> está
inmediatamente a continuación de <h1> (adyacente).

Selectores de atributo

Aun podemos ser más específicos a la hora de aplicar estilos. Tanto que es
posible aplicar reglas de estilo dependiendo de los atributos, o sus valores, que
contenga un determinado selector.

Observemos:

img[alt] { border: 1px solid #ccc; }

Aplicará el borde gris sólo a las imágenes que contengan un atributo alt,
cualquiera que sea el valor del mismo.

img[alt=”casa”] { border: 1px solid #ccc; }

Aplicará el borde gris únicamente a las imágenes que contengan un atributo

17 de 75

alt cuyo valor es exactamente “casa”.

img[alt~=”casa”] { border: 1px solid #ccc; }

Aplicará el borde gris exclusivamente a las imágenes que contengan un atributo
alt cuyo valor “casa” coincide con alguno de una lista de palabras separadas
por espacios, uno de los cuales es exactamente “casa”.

p[lang|=”en”] { color: #ccc; }

Esta regla aplica el estilo, color gris, a cualquier elemento lang que empiece
por “en” dentro de una lista separada por guiones, comenzando con “en”.

Esto está pensado fundamentalmente para permitir equivalencias con el
subcódigo del lenguaje. De esta forma, en nuestro ejemplo, el estilo sería
aplicado a subcódigos de lenguaje como en, en-uk, en-us, etc.

Selectores de clase

El selector class es una forma especial de selector de atributo. Dicho atributo
puede asociarse a cualquier elemento de XHTML. La forma más simple quedaría
como sigue:

En el código XHTML:

<p class=”aviso”>¡Va a eliminar un archivo!</p>

La regla de estilo asociada definida en las CSS:

p.aviso { color: #f00; }

En este caso, cualquier párrafo con este valor de atributo class tendrá color
rojo.

También es posible aplicar estilo a todos los elementos que contengan un
atributo class=”aviso”, para ello nuestra regla de estilo será la siguiente:

.aviso { color: #f00; }

Recuerde que esta regla posee el mismo significado que si pusiéramos el
selector universal antecediéndola, por esta razón es capaz de afectar a todos
los elementos:

*.aviso { color: #f00; }

18 de 75

Habrá observado que en la definición de la regla de estilo, el selector de clase
va siempre precedido de un punto (.) El nombre del selector de clase no tiene
porqué coincidir con ningún nombre de elemento XHTML, de hecho puede ser
cualquier nombre que deseemos.

Cuando cree un nombre de clase, hágalo de forma genérica y con sentido, de
esta forma evitará que pierdan su significado si cambian los estilos.

Por ejemplo, en el caso anterior podríamos haber establecido un nombre de
clase como .textorojo, y mantendría su significado:

.textorojo { color: #f00; }

Pero imagine que, posteriormente, decide aplicar un color amarillo porque
queda mejor en su diseño:

.textorojo { color: #fc0; }

Parece que ahora la coherencia no se mantiene, sin embargo, si mantenemos la
elección inicial: .aviso, el significado se mantiene independientemente del
estilo que sea aplicado.

Los selectores de clase también pueden ser usados para aplicar estilos a
subconjuntos de elementos. Veamos un ejemplo.

Supongamos que en nuestro código (X)HTML aparecen los siguientes párrafos:

<p class=”graficos vectoriales”>Texto</p>
<p class=”graficos vectoriales ilustraciones”>Texto</p>
<p class=”graficos vectoriales cliparts”>Texto</p>
<p class=”programas vectoriales dibujos ilustraciones
graficos”>Texto</p>

Si declaramos el siguiente estilo:

p.graficos { color: #0f0; }

Todos los párrafos anteriores tendrán color verde.

Si ahora definimos este estilo:

p.graficos.vectoriales { color: #0f0; }

También aplicaría el color a todos los párrafos de nuestro ejemplo puesto que
contienen esos valores. No se aplicaría a párrafos como los que siguen:

<p class=”graficos”>Texto</p>
<p class=”vectoriales”>Texto</p>

19 de 75

Dado que no contienen ambos valores (graficos.vectoriales). De igual
forma, si usáramos el selector:

p.graficos.vectoriales.pintura

tampoco aplicaría estilo a ninguno de los párrafos anteriores puesto que
ninguna de sus clases incluye el valor pintura

Selectores id

Este tipo de selector es muy parecido al de clase (class), pero con una
importante diferencia. En este caso la regla de estilo asociada a él sólo se
puede aplicar una vez en el documento puesto que cada atributo id es único,
por tanto reserve su uso para elementos que sólo van a aparecer una vez en su
documento.

En cuanto a la aplicación, se diferencian de los selectores de clase porque en
las declaraciones CSS se usa el carácter almohadilla (#) en lugar de punto (.)
antecediendo al nombre del selector.

4.6 Pseudo-clases y pseudo-elementos

W3C Las denominadas pseudo-clases hacen referencia a las características
predefinidas de los elementos.

Los pseudo-elementos tienen que ver con la estructura del documento, pero
no están marcados como elementos propiamente dichos. Dicho así puede que le
suene como a una definición esotérica, por lo que lo mejor será ver algunos
ejemplos.

Pseudo-clases
Pseudo-clase de primer hijo

Esta pseudo-clase coincide con un elemento que es el primer hijo de un
elemento padre.

Si deseáramos aplicar estilo al primer dentro de un documento HTML,
podríamos utilizar la pseudo-clase de primer hijo que sigue:

p:first-child { color: #ddd; }

Pseudo-clases de vínculo

Estas pseudo-clases describen los diferentes estados de un vínculo, de tal forma
que es posible aplicar estilo a cada uno por separado.

20 de 75

Podemos distinguir entre las siguientes pseudo-clase de vínculo, veámoslo con
un ejemplo:

a:link { color: #000; text-decoration: none; }
a:visited { color: #000; text-decoration: none; }
a:active { color: #000; text-decoration: none; }
a:hover { color: #f00; text-decoration: none; }

El vínculo puede ser uno común como:

<a href=”http://www.qweos.net/”>Enlace a qweos.net</a>

Dado que varios de los estados del vínculo pueden darse al mismo tiempo, hay
que tener en cuenta el orden en el que se expresan para decidir cuál tiene
preferencia.

También es posible combinar estas pseudo-clases con otros selectores, como,
por ejemplo:

Con selectores de clase:

a.nuevo:link { color: #f00; }

que se expresaría en el código (X)HTML como:

<a href=”http://www.qweos.net/” class=”nuevo”>Enlace a
qweos.net</a>

Con selectores contextuales:

a:link img { border:1px solid #ccc; }

Pseudo-clases dinámicas

En la definición CSS2 corresponden a:

:active
:hover
:focus

La diferencia de éstas con respecto a las pseudo-clases de vínculo se encuentra
en que estas últimas están pensadas para utilizarse sólo en hipervínculos,
mientras que las pseudo-clases dinámicas pueden aplicarse a cualquier
elemento; :hover, por ejemplo, tiene su aplicación en ambos casos (pseudo-
clase de vínculo y dinámica), digamos que a:hover es un caso específico de
aplicación sobre cualquier otro elemento.

Actualmente el soporte de las pseudo-clases dinámicas es aun un poco limitado

21 de 75

en los navegadores, y es probable que sean de gran utilidad en el futuro cuando
mejore esta situación.

Pseudo-elementos
Los pseudo-elementos son similares a la pseudo-clase de primer hijo. Se
consideran pseudo-elementos porque su comportamiento es tal que parece q
estamos aplicando el estilo a un elemento nuevo, cuando en realidad no lo es.

Pseudo-elementos de primera línea

Ejemplo:

p:first-line { color: blue; }

En nuestro ejemplo se aplica un color de texto azul a la primera línea del
párrafo.

El pseudo-elemento de primera línea tiene un conjunto reducido de
propiedades entre las que elegir, como referencia rápida, dichas propiedades
son:

background
clear
color
font
letter-spacing
line-height
text-decoration
text-shadow
text-transform
vertical-align
word-spacing

Pseudo-elementos de primera letra

Ejemplo:

p:first-letter { font-size: 100%; }

En este caso aplicará el estilo a la primera letra del párrafo.

El pseudo-elemento de primera letra está reducido a las siguientes
propiedades:

background
border
clear
color
float

22 de 75

font
line-height
margin
padding
text-decoration
text-shadow
text-transform
vertical-align

4.7 Comentarios

¡Ah!, casi se me olvidaba, por supuesto, al igual que ocurre con (X)HTML, las
CSS también tienen su formato de comentario:

/* Esto es un comentario de CSS. Los navegadores no
mostrarán nada de lo aquí escrito. Use los comentarios con
control */

23 de 75

5 Fundamentos
W3C Definiciones
Antes de comenzar vamos a definir varios conceptos que se usarán en esta
parte del manual:

• Hoja de estilo. Un conjunto de condiciones que definen la forma de
presentación de un documento.

• Hoja de estilo válida. Aquel conjunto de declaraciones de estilo conforme a las
especificaciones CSS del W3C.

• Autor (Author). Un autor es una persona o programa que escribe o genera
documentos (X)HTML y/o CSS. Una herramienta de creación es un caso especial
de autor, a saber, un programa que genera dichos documentos.

• Usuario (User). Un usuario es una persona que interactúa con un agente de
usuario para ver, oír, o usar de cualquier otra manera un documento
representado.

• Agente de usuario o aplicación de usuario (User Agent). Un agente de usuario
es cualquier dispositivo o aplicación que lee y procesa documentos XHTML. Los
agentes de usuario incluyen navegadores visuales (de texto o gráficos),
navegadores no visuales (audio, Braille), robots de búsqueda, proxies, etc.

• Un agente de usuario conforme (conforming user agent) con CSS es el que
cumple las condiciones obligatorias ("debe"; requisito obligatorio) establecidas
en esta especificación.

• Elemento. Hace referencia a las estructuras sintácticas del lenguaje del
documento. La mayoría de las reglas de estilo CSS usan el nombre de estos
elementos (como <p>, <h1>, etc.) para especificar el contexto de aplicación
del estilo.

• Hijo. Un elemento A se denomina hijo de un elemento B si, y sólo si, B es el
padre de A.

• Descendiente. Un elemento A se denomina descendiente de un elemento B si
se cumple que:

1. A es hijo de B o
2. A es hijo de algún elemento C que es descendiente de B.

• Hermano. Un elemento A se denomina hermano de un elemento B si, y sólo si,
B y A comparten el mismo elemento padre. Un elemento A es hermano
precedente si aparece antes que B en la estructura del documento. Un
elemento A es hermano siguiente si aparece después de B en la estructura del
documento.

24 de 75

W3C Fundamentos

Para CSS, los conceptos fundamentales, es decir, los pilares que permiten que
las cosas funcionen son:

• la herencia de estilo.
• la cascada de hojas de estilo.
• el modelo de caja.

Para poder explicar estos conceptos esenciales haremos uso de ejemplos CSS
que, aun sin comprender todos los detalles, le permitirán entender su
significado básico.

Es bastante probable que un elemento tenga asociado más de un estilo. La
herencia y la cascada describen cómo se aplican los estilos sin conflictos entre
ellos.

5.1 Herencia de estilos (inheritance)

La herencia funciona del mismo modo que en XHTML. Existen elementos
“padres” que contienen a otros elementos “hijos” que son descendiente del
primero.

Un “padre” puede tener más de un “hijo”, pero ningún “hijo” tendrá más de un
“padre”.

Algunos valores de estilo son heredados por los hijos de un elemento en la
estructura del documento. Cada propiedad define si se hereda o no. También
es posible forzar la herencia a través del valor inherit.

Suponga que hay un elemento h1 con un elemento enfatizado (em) dentro:

25 de 75

<h1>El título es <em>importante</em></h1>

Si no se ha asignado ningún color al elemento <em>, el énfasis en "importante"
heredará el color del elemento padre. Por ejemplo, si h1 tiene un color azul,
el elemento <em> será también azul.

Para poner una propiedad de estilo "predeterminada" en un documento, los
autores pueden especificar la propiedad en la raíz de la estructura del
documento. Los elementos <html> o <body> pueden servir para esta función.

La herencia

Aunque suene a título de novela de intriga, a menudo la característica de la
herencia CSS puede representar algunos problemas:

• Por una parte, los navegadores clasificados como “recientes” y
anteriores (vea la página 8), es decir, los pertenecientes a la época
cuando la capacidad de admitir estándares no era una prioridad, ignoran
la herencia y también las reglas aplicadas al elemento <body> por lo
que no nos podemos confiar en que siempre se va a cumplir la
característica de herencia.

• Por la otra, imagine que, dado el caso, los elementos hijos heredan los
estilos del elemento padre. ¿Y si no queremos que esto ocurra? Sencillo,
bastará con crear una regla más específica para el elemento hijo.

body { font-family: Times, “Times New Roman”, serif; }
p { font-family: Arial, Helvetica, sans-serif; }

En este ejemplo la fuente determinada para todo el documento es una Times,
<p> heredará este estilo. Para evitarlo creamos una regla específica para dicho
elemento.

26 de 75

5.2 Cascada (cascading)

Las hojas de estilo pueden tener tres orígenes diferentes: el autor, el usuario y
la aplicación del usuario.

• Autor: el autor especifica las hojas de estilo para un documento fuente
de acuerdo a las convenciones del lenguaje del documento.

Por ejemplo, en (X)HTML, las hojas de estilo pueden incluirse en el propio
documento o vincularse externamente.

• Usuario: el usuario puede especificar información de estilo para un
documento particular.

Por ejemplo, el usuario puede especificar un archivo que contenga una hoja de
estilo o la aplicación del usuario puede proporcionar una interfaz que genere
una hoja de estilo del usuario (o comportarse como si lo hubiese hecho).

• Aplicaciones de usuario: las aplicaciones del usuario con conformidad
deben aplicar una hoja de estilo predeterminada, previa a todas las
hojas de estilo definidas para un documento. La hoja de estilo
predeterminada debe presentar los elementos del lenguaje de
documento de un modo que satisfaga las expectativas generales de
presentación de dicho lenguaje. Cualquier propiedad que no sea
modificada por el autor o el usuario, mantendrá el estilo por defecto de
la aplicación de usuario.

Por ejemplo, en los navegadores visuales, el elemento <em> en HTML es
presentado usando una fuente itálica.

Las hojas de estilo con estos tres orígenes se superpondrán en su acción e
interactuarán de acuerdo a la cascada.

La cascada CSS, asigna un “peso” (valor) determinado a cada regla de estilo.

27 de 75

Cuando varias reglas se aplican, la de mayor “fuerza” toma preferencia.

De forma predefinida, las reglas en las hojas de estilo del autor tienen más
importancia que las reglas en las hojas de estilo del usuario.

Esta preponderancia se invierte, sin embargo, con la reglas "!important".
Todas las reglas que el usuario y el autor especifican tienen mayor importancia
que las reglas de la hoja de estilo predeterminada por la aplicación de usuario.

Las hojas de estilo importadas también forman la cascada y su “peso” depende
del orden en la importación.

5.3 Modelo de caja (box model)

El modelo de caja de CSS describe las cajas rectangulares que son generadas
por los elementos en la estructura del documento y compuestas de acuerdo al
modelo de formato visual. Aclarando, es una herramienta visual de
presentación.

En CSS, se puede crear una caja rectangular alrededor de cualquier contenido
de un documento. Toda caja tiene una serie de propiedades que pueden ser
controladas con la hoja de estilo. estas propiedades son:

• el relleno (padding)
• el borde (border)
• el margen (margin)

El siguiente diagrama ilustra las cuatro áreas de la caja genérica de CSS:
contenido, padding, border y margin alrededor de un contenido.

28 de 75

El perímetro de cada una de las cuatro áreas (contenido, padding, border y
margin) es denominado "límite", de manera que cada caja tiene cuatro
límites:

• límite del contenido o límite interno. El límite del contenido rodea al
contenido procesado del elemento.

• límite de relleno. El límite de padding (relleno) rodea a la caja de
relleno. Si el relleno tiene un ancho de 0, el límite del relleno es el
mismo que el límite de contenido.

• límite de borde. El límite de border (borde) rodea el borde de la caja.
Si el borde tiene un ancho de 0, el límite del borde es el mismo que el

29 de 75

límite del relleno (padding).

• límite de margen o límite externo. El límite de margin (margen) rodea
el margen de la caja. Si el margen tiene un ancho de 0, el límite del
margen es el mismo que el límite del borde (border).

Cada límite puede dividirse en límite izquierdo, derecho, superior e inferior.

Unos detalles importantes

Siempre que las cajas se dispongan verticalmente en el flujo normal del
documento, los márgenes superior e inferior se superponen (según el W3C:
“entran el colisión”). Por tanto, la distancia entre los bordes no es la suma de
ambos márgenes, sino sólo el tamaño del margen mayor.

Los márgenes que se tocan en los lados izquierdo y derecho no entran en
colisión. En este caso, tal y como era de esperar, la distancia entre bordes es la
sumatoria de los márgenes adyacentes.

Debemos mencionar que Internet Explorer 5 (Win) interpreta el Modelo de caja
de forma incorrecta. Contrariamente a la norma estándar CSS 2, este
navegador incluye el grosor del borde y del relleno en la medida del ancho de
un determinado elemento.

Existen varias formas de corregir esto, como el Box Model Hack
(http://tantek.com/CSS/Examples/), pero quizás resultará más sencillo
afrontar el problema aplicando el padding y border al elemento padre en
lugar de al elemento hijo que necesita el ancho fijo.

30 de 75

6 ¿Dónde?
6.1 ¿Dónde se pueden definir los estilos CSS?

Dentro del elemento HTML (inline CSS)

El estilo puede ser definido dentro de la etiqueta HTML apropiada. Este tipo
de definición de estilo se denomina en línea puesto que se coloca en la misma
línea del código al que se quiere aplicar el estilo. Para ello se define un
atributo style con una serie de valores de estilo. Este atributo puede
aplicarse a casi cualquier elemento HTML.

<h1 style=”color: blue; text-transform: uppercase;”>Un
encabezado en mayúsculas</h1>

Dentro del documento HTML (embedded CSS)

El estilo puede, también, ser definido dentro del encabezado <head> del
documento HTML. Este tipo de definición, aunque no el idóneo, es quizás uno
de los más usados, sobre todo por los que comienzan a aprender técnicas de
diseño con CSS.

...
<head>
<style type="text/css">

</style>

31 de 75

</head>
...

Los comentarios HTML () se colocan entre el comienzo y final de
<style> para evitar que los navegadores antiguos, sin soporte de CSS,
interpreten las reglas de estilo como contenido y lo muestren en pantalla. Los
navegadores con capacidades CSS ignoran esos comentarios e interpretan las
reglas de estilo.

Observe que la sintaxis coloca a cada regla indexada en una nueva línea y se
separa del selector. Esto no es, estrictamente hablando, necesario, pero es un
buen método para hacer legible nuestro código, mejorando la futura edición
del mismo.

Estilos externos (external CSS)

Finalmente, se pueden definir los estilos en un documento completamente
aparte de la página Web (documento HTML). Este documento separado, con
extensión .css, puede enlazarse incluyendo la etiqueta <link> dentro del
encabezado <head> del documento HTML al que se le quiere aplicar los
estilos.

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

Esta es la forma preferida, y más profesional, de definición por varios motivos:

• Con un archivo CSS externo se puede aplicar estilos a muchas páginas de

32 de 75

nuestro sitio simplemente enlazándolas con el mismo.

• Si hacemos alguna modificación en el archivo CSS, automáticamente se
produce el cambio en todos los documentos HTML enlazados.

• Tenemos un único punto de definición de estilos, mejorando de esta
forma el mantenimiento y edición de los mismos.

• Mejoramos la carga de las páginas Web al eliminar las partes de código
referentes a los estilos que antes estaban dentro de los documentos
HTML, logrando separar la estructura de la presentación.

• Al ser un documento único y separado, el archivo CSS externo no
necesita ser descargado por el navegador cada vez que se carga una
nueva página HTML que enlaza con él, mejorando, de esta forma, el
rendimiento.

33 de 75

7 Propiedades CSS
7.1 Propiedades del texto

Las propiedades del texto definen su apariencia

color Especifica el color de un texto
Valores Descripción Ejemplo
#rrggbb Valor hexadecimal p { color: #003399; }

#rgb Hexadecimal reducido p { color: #039; }

Valores decimales RGB (0- p { color:
rgb(rrr%,ggg%,bbb%)
100%) rgb(10%,23%,66%); }
p { color: rgb(0,51,153);
rgb(rrr,ggg,bbb) Valores decimales RGB (0-255) }

nombre Nombres de colores permitidos p { color: blue; }

Valor inicial Aplicado a Herencia
Depende de la aplicación del
Todos los elementos Si
usuario

Porcentaje Medios Compatibilidad
Visuales NS 7, IE 6, MZ 1.7, OP 7.2

direction Establece la dirección de un elemento
Dirección de izquierda a
ltr p { direction: ltr; }
derecha (Left-To-Right)
Dirección de derecha a
rtl p.hebreo { direction: rtl; }
izquierda (Right-To-Left).

ltr Todos los elementos* Si

No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2

letter-spacing Incrementa o disminuye el espacio entre caracteres
El espaciado es el normal de la
normal p { letter-spacing: normal; }
fuente actual

34 de 75

Espacio entre caracteres p { letter-spacing: 0.3em; }
longitud además del espacio p { letter-spacing: 2px; }
predeterminado p { letter-spacing: -0.4ex; }

normal Todos los elementos Si


text-align Alinea el texto de un elemento
left Alinea el texto a la izquierda p { text-align: left; }

right Alinea el texto a la derecha p { text-align: right; }

center Centra el texto p { text-align: center; }

Justifica el texto a ambos
justify p { text-align: justify; }
márgenes
usuario y la dirección de Elementos a nivel de bloque Si
escritura.

text-decoration Añade elementos decorativos al texto
none No añade decoración al texto p { text-decoration: none; }

p { text-decoration:
underline El texto es subrayado underline; }
El texto tiene una línea p { text-decoration: overline;
overline
encima }
El texto parpadea. La
aplicación de usuario
blink p { text-decoration: blink; }
conforme no está obligada a
soportarlo.
El texto tiene una línea por el p { text-decoration: line-
line-through
medio through; }

none Todos los elementos No


35 de 75

text-indent Especifica la sangría de la primera línea de texto
El sangrado tiene una medida
longitud p { text-indent: -25px; }
fija

Es un porcentaje del ancho del p { text-indent: 3em; }
%
bloque de contención p { text-indent: 50%; }

Los elementos a nivel de
0 Si
bloque

Se refieren al ancho del
bloque de contención

text-shadow Texto con sombra
none No se aplica sombra p { text-shadow: none; }

Cualquier valor de color
color p { text-shadow: #f00; }
permitido
Distancias para el eje X, eje Y p { text-shadow: 0.5em -2cm
3ex; }
longitud longitud longitud y el radio de desenfoque p { text-shadow: 0.5em 0.4em
respectivamente 2px yellow;}



text-transform Controla el cambio entre minúsculas y mayúsculas
Ningún efecto de cambio entre
none p { text-transform: none; }
mayúsculas y minúsculas
Primer carácter de la palabra p { text-transform:
capitalize
en mayúscula capitalize; }
Todos los caracteres de la p { text-transform: uppercase;
uppercase
palabra en mayúsculas }
Todos los caracteres de la p { text-transform: lowercase;
lowercase
palabra en minúsculas }

36 de 75

none Todos los elementos Si


unicode-bidi Controla la dirección del texto
Previene el comienzo de un
normal nuevo nivel incrustado de p { unicote-bidi: normal; }
Unicode bidireccional
Crea el comienzo de un nuevo
p.hebreo {direction: rtl;
embed nivel incrustado de Unicode unicode-bidi: embed}
bidireccional
Los caracteres son
bidi-override estrictamente ordenados de
acuerdo a la dirección

normal Todos los elementos* No


white-space Declara cómo son tratados los espacios en blanco
Cualquier espacio en blanco
normal entre elementos se considera p { white-space: normal; }
como un espacio simple
Se muestran múltiples
espacios y retornos de carro.
El ajuste de palabras se
pre desactiva y las líneas sólo se p { white-space: pre; }
rompen cuando hay una nueva
línea de caracteres en el
código fuente
Cualquier secuencia de
espacios en blanco se
convierte en espacio simple. El
nowrap ajuste de línea se desactiva. p { white-space: nowrap; }
Cuando hay una nueva línea de
caracteres en el código fuente
es ignorada.

normal Elementos a nivel de bloque Si


37 de 75

word-spacing Incrementa o disminuye el espacio entre palabras
El espacio por defecto entre
normal palabras no cambia. Equivale a p { word-spacing: normal; }
poner un valor de longitud a 0.
p { word-spacing: 1px; }
Especifica un valor entre
longitud p { word-spacing: 0.4em; }
palabras p { word-spacing: -0.5ex; }



38 de 75

7.2 Propiedades de las fuentes

Las propiedades de las fuentes definen las características de las fuentes
tipográficas

font Propiedad agrupada para las propiedades de fuentes
font-size

line-height p { font: bold italic small-
caps 150% sans-serif; }
font-family
pre { font: 1em Courier,
Ver propiedades individuales “Courier New”, monospace; }
font-style
p { font: 80% serif; }
font-variant

font-weight

Los siguientes valores se refieren a las fuentes del sistema:
La fuente usada en los títulos
caption de los controles (botones, caption { font: caption; }
cajas, etc.)
La fuente usada para rotular
icon .icono { font: icon; }
los íconos

menu La fuente usada en los menúes ul.menu { font: menu; }

La fuente usada en las cajas
message-box .dialog { font: message-box; }
de diálogo

La fuente usada para rotular .control { font: small-
small-caption
controles pequeños caption; }

La fuente usada en la barra de
status-bar .barra { font: status-bar; }
estado de las ventanas
No definido en la propiedad
agrupada

Admitido en font-size y
line-height. Referido al Visuales NS 7, IE 6, MZ 1.7, OP 7.2
elemento padre

39 de 75

font-family Lista de familias tipográficas o nombres de fuentes
Especifica nombre de fuentes. h1 { font-family: Helvetica,
Si nombre contiene espacios Arial, Verdana; }
deberá ir entrecomillado.
p { font-family: “Qweos
Técnicamente si el nombre no
nombre de fuente Light”; }
contiene espacios puede
entrecomillarse pero esto Combinando:
puede confundir a algunos p { font-family: Times, “Times
agentes de usuario. New Roman”, serif; }
Hay cinco familias definidas:
serif, sans-serif, p { font-family: serif; }
monospace, cursive y
p { font-family: monospace; }
fantasy. Nunca se
familia tipográfica
entrecomillan. fantasy Combinando:
engloba a cualquier fuente h1 { font-family: Helvetica,
que no encaja en las otras Arial, Verdana, sans-serif; }
familias.
Depende de la aplicación de
usuario


font-size Establece el tamaño de una fuente
En todos los casos el tamaño exacto no está definido por las CSS

Disminuye el tamaño respecto
xx-small p { font-size: xx-small; }
a x-small.

x-small p { font-size: x-small; }
a small.

small p { font-size: small; }
a medium.

Es más pequeño que large y
medium p { font-size: medium; }
mayor que small.

Agranda el tamaño respecto a
large p { font-size: large; }
medium.

x-large p { font-size: x-large; }
large.

40 de 75

xx-large p { font-size: xx-large; }
x-large.

Disminuye el tamaño del texto
smaller p { font-size: smaller; }
respecto al elemento padre

Aumenta el tamaño del texto
larger p { font-size: larger; }
respecto al elemento padre

Cualquier valor de longitud p { font-size: 12px; }
longitud
permitido p { font-size: 0.70em; }

Tamaño relativo al del
% p { font-size: 75%; }
elemento padre


medium Todos los elementos Si

Referido al tamaño de fuente
del elemento padre

font-size-adjust Ajusta la legibilidad entre varias fuentes
none No hace ajustes de tamaño p { font-size-adjust: none; }

h1 { font-family: Verdana,
número Valor de ajuste de aspecto sans-serif; font-size-adjust:
0.58; }

none Todos los elementos Si


font-stretch Comprime o expande la fuente
Se muestran, a continuación, en orden de más comprimido a menos. CSS no especifica cómo se realiza la
compresión o expansión de los caracteres. En la práctica esta propiedad es raramente usada.
Los caracteres del texto están
p { font-stretch: ultra-
ultra-condensed extremadamente condensed; }
comprimidos. Su valor es más

41 de 75

comprimido que extra-
condensed
significativamente p { font-stretch: extra-
extra-condensed
comprimidos. Su valor es más condensed; }
comprimido que condensed
condensed comprimidos, más que en p { font-stretch: condensed; }
semi-condensed
p { font-stretch: semi-
semi-condensed ligeramente comprimidos, más
condensed; }
que en normal
Los caracteres del testo se
normal p { font-stretch: normal; }
muestran en el ancho normal
p { font-stretch: semi-
semi-expanded ligeramente expandidos, más
expanded; }
que en normal
expanded expandidos, más que en p { font-stretch: expanded; }
semi-expanded
significativamente expandidos. p { font-stretch: extra-
extra-expanded
Su valor es mayor que expanded; }
expanded
extremadamente expandidos. p { font-stretch: ultra-
ultra-expanded
Su valor es mayor que extra- expanded; }
condensed
Los caracteres estarán más
wider expandidos que su elemento p { font-stretch: wider; }
padre
Los caracteres estarán más
narrower comprimidos que su elemento p { font-stretch: narrower; }
padre



font-style Establece el estilo de una fuente
Indica un estilo de fuente
blockquote em { font-style:
normal clasificado como “normal” por normal; }
la aplicación de usuario
Especifica una fuente
clasificada como ”italic” por la blockquote { font-style:
italic
AU o, si esa no está disponible, italic; }
una definida como “oblique”.

42 de 75

Las fuentes que incluyan en
sus nombres las expresiones
Italic, Cursive o Kursiv serán
típicamente definidas como
“italic”.
Indica un estilo de fuente
clasificado como “oblique” por
la aplicación de usuario. as
fuentes que incluyan en sus
oblique h1 { font-style: oblique; }
nombres las expresiones como
Oblique, Slanted o Incline
serán típicamente definidas
como “oblique” por la AU



font-variant Muestra el texto en versalitas o de forma normal.
normal Muestra una fuente normal p { font-variant: normal; }

Transforma la fuente en
versales o versalitas. Los
signos para las letras
p { font-variant: small-caps;
small-caps minúsculas son iguales a las }
mayúsculas, pero en un
tamaño menor y con
proporciones algo diferentes.



font-weight Establece el grosor de una fuente
100
200
Estos valores forman un
300
secuencia progresiva, donde
400
cada número indica un grosor h1 { font-weight: 900; }
500
600 que es al menos tan fuerte
700 como su predecesor
800

43 de 75

900

normal Equivale al valor 400 p { font-weight: normal; }

bold Equivale al valor 700 p { font-weight: bold; }

Aumenta el grosor respecto al
bolder p { font-weight: bolder; }
elemento padre
Disminuye el grosor respecto
lighter p { font-weight: lighter; }
al elemento padre



44 de 75

7.3 Propiedades del margen

Las propiedades del margen especifican el espacio alrededor de un elemento

margin Propiedad agrupada para las propiedades de margen
En cualquiera de los casos:

• Si hay sólo un valor, se aplica a todos los lados.
• Si hay dos valores, los márgenes superior e inferior son determinados por el primer valor y los
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 son
definidos por el segundo, y el inferior es definido por el tercero.
• Si hay cuatro valores, ellos se aplican al superior, derecho, inferior e izquierdo,
respectivamente.

margin-top

margin-bottom img { margin: 10px; }
Ver propiedades individuales h1 { margin: 1.2em 0 3% 0.5em;
margin-left }

margin-right
Todos los elementos No
agrupada

Referidos al ancho del bloque
de contención

margin-top Establece el margen superior de un elemento
Tiene diferentes efectos según
la situación. Para elementos
auto flotantes, elementos a nivel h4 { margin-top: auto; }
de bloque y a nivel de línea es
equivalente a 0
Cualquier valor de longitud
longitud table { margin-top: 12px; }
admitido
El ancho del margen es
calculado respecto a al ancho
% img { margin-top: 4%; }
del bloque del elemento
contenedor

45 de 75

0 Todos los elementos No

de contención

margin-bottom Establece el margen inferior de un elemento
auto flotantes, elementos a nivel h4 { margin-bottom: auto; }
equivalente a 0
longitud table { margin-bottom: 12px; }
admitido
% img { margin-bottom: 4%; }
contenedor


de contención

margin-left Establece el margen izquierdo de un elemento
auto flotantes, elementos a nivel h4 { margin-left: auto; }
equivalente a 0
longitud table { margin-left: 12px; }
admitido
% img { margin-left: 4%; }
contenedor


Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2

46 de 75

de contención

margin-right Establece el margen derecho de un elemento
auto flotantes, elementos a nivel h4 { margin-right: auto; }
equivalente a 0
longitud table { margin-right: 12px; }
admitido
% img { margin-right: 4%; }
contenedor


de contención

47 de 75

7.4 Propiedades del relleno (padding)

Las propiedades del relleno definen el espacio entre el contenido y el borde de
un elemento

padding Propiedad agrupada para las propiedades de relleno

• Si hay dos valores, los rellenos superior e inferior son determinados por el primer valor y los
rellenos derecho e izquierdo son determinados por el segundo.
respectivamente.
• No admite valores negativos.

padding-top
img { padding: 10px; }
padding-bottom
h1 { padding: 1.2em 0 3%
Ver propiedades individuales 0.5em; }
padding-left
p { padding: 10px 15px; }
padding-right
agrupada

de contención

padding-top Establece el relleno superior de un elemento
longitud p { padding-top: 12px; }
admitido
El ancho del relleno es
% ul { padding-top: 4%; }
contenedor


de contención

48 de 75

padding-bottom Establece el relleno inferior de un elemento
longitud ol { padding-bottom: 12px; }
admitido
% img { padding-bottom: 4%; }
contenedor


de contención

padding-left Establece el relleno izquierdo de un elemento
longitud p { padding-left: 12px; }
admitido
% li { padding-left: 15%; }
contenedor


de contención

padding-right Establece el relleno derecho de un elemento
longitud p { padding-right: 12px; }
admitido
% h5 { padding-right: 4%; }
contenedor


49 de 75

de contención

50 de 75

7.5 Propiedades de los bordes

Estas propiedades definen los bordes alrededor de un elemento

border Propiedad agrupada para las propiedades de borde

• Si hay dos valores, los bordes superior e inferior son determinados por el primer valor y los
bordes derecho e izquierdo son determinados por el segundo.
respectivamente.
• El valor del ancho del borde no puede ser negativo.

border-width img { border: 2px solid #f00;
}
border-style Ver propiedades individuales
p { border: 0.2em double red;
}
border-color
agrupada


border-width Propiedad agrupada que establece el ancho del borde
Un borde más fino que el
establecido como medium. El
thin p { border-width: thin; }
valor exacto no está definido
por las CSS.
Un borde cuyo grosor es menor
que el de thick y menor que
medium p { border-width: medium; }
el de thin. El valor exacto no
está definido por las CSS.
Un borde más grueso que el
establecido como medium. El
thick p { border-width: thick; }
valor exacto no está definido
por las CSS.
longitud p { border-width: 12px; }
permitido. No negativo.

51 de 75

agrupada


border-style Propiedad agrupada que establece el estilo del borde
none No dibuja borde p { border-style: none; }

Similar a none, excepto en
términos de resolución de
conflictos de bordes para las
hidden p { border-style: hidden; }
tablas donde se renderiza con
el modelo collapsed-
border
Dibuja un borde con una serie
dotted p { border-style: dotted; }
de puntos
El borde es una serie de
dashed p { border-style: dashed; }
pequeños segmentos de línea

solid El borde es una línea p { border-style: solid; }

double El borde es una línea doble p { border-style: double; }

El borde aparece como si
groove p { border-style: groove; }
estuviese tallado en el lienzo
Lo opuesto a groove, el
ridge borde parece que estuviera p { border-style: ridge; }
sobresaliendo del lienzo
El borde hace que toda la caja
inset parezca como si estuviera p { border-style: inset; }
embutida en el lienzo
Lo opuesto a inset, el borde
outset hace que toda la caja parezca p { border-style: outset; }
sobresalir del lienzo
agrupada

border-width, border-style y border-color pueden ser aplicados a cada uno de los bordes
por separado, obteniendo, en cada caso:

52 de 75

Borde inferior Borde izquierdo

border-bottom-width border-left-width
border-bottom-style border-left-style
border-bottom-color border-left-color

Borde superior Borde derecho

border-top-width border-right-width
border-top-style border-right-style
border-top-color border-right-color

53 de 75

7.6 Propiedades del fondo

Estas propiedades definen cómo se muestran los efectos del fondo de un
elemento

background Propiedad agrupada para las propiedades de fondo
background-color
body { background: #f00; }
background-image body { background:
url(qweos.gif) no-repeat top;
background-repeat Ver propiedades individuales }

body { background: #0ff
background-attachment url(qweos.gif) no-repeat fixed
top; }
background-position
agrupada

Permitidos en background-
position

background-color Establece el color de fondo de un elemento
body { background-color:
color-rgb Valor RGB rgb(0,51,153); }

p { background-color: #ffff00;
color-hexadecimal Valor hexadecimal }

body { background-color: blue;
color-nombre Nombres de colores permitidos }

El color de fondo es body { background-color:
transparent *
transparente transparent; }

transparent Todos los elementos No


* en muchas ocasiones Netscape 4 interpreta transparent como negro. Dado que el valor
transparent es el predeterminado, ya sea indicado de forma explícita o no, si deseamos

54 de 75

mantener cierta compatibilidad con usuarios de NS4 tendremos que evitar esta declaración.
Aunque, en este caso, probablemente el servicio de validación del W3C le advertirá de que no ha
fijado un fondo para el elemento.

background-attachment Establece si el fondo se desplaza o no con la página
body { background-image:
La imagen de fondo se
scroll url(qweos.gif); background-
desplaza junto con la página attachment: scroll; }
La imagen de fondo url(img/qweos.png);
fixed
permanece fija background-attachment: fixed;
}

scroll Todos los elementos No


background-image Establece una imagen de fondo
url Ruta hasta la imagen url(img/qweos.png); }

none No existe imagen de fondo p { background-image: none; }




background-position Establece la posición de comienzo de una imagen de fondo
Para todos los casos:

• Si sólo se especifica una palabra clave, el segundo valor será center.
• Si solamente se da un valor de porcentaje o de medida, éste determina sólo la posición
horizontal, la posición vertical será 50%.
• Si se dan dos valores, la posición horizontal va primero.
• La combinación de valores de medida y de porcentajes está permitida (ej., '50% 2cm').
• Las posiciones negativas están permitidas.
• Las palabras clave no pueden ser combinadas con valores de porcentaje o de medida
(todas las combinaciones posibles que se muestran a continuación).
top left body { background-position:
(left top) Igual a 0% 0% left top; }

55 de 75

top center body { background-position:
(center top) Igual a 50% 0% center top; }

body { background-position:
top right Igual a 100% 0% top right; }

center left body { background-position:
(left center) Igual a 0% 50% left center; }

body { background-position:
center center Igual a 50% 50% center center; }

center right body { background-position:
(right center) Igual a 100% 50% center right; }

bottom left body { background-position:
(left bottom) Igual a 0% 100% bottom left; }

bottom center (bottom body { background-position:
center) Igual a 50% 100% bottom center; }

bottom right body { background-position:
(right bottom) Igual a 100% 100% bottom right; }
El primer valor corresponde a
la posición horizontal y el
body { background-position: 0%
x-% y-% segundo con el vertical. La
0%; }
esquina right bottom es
100% 100%
El primer valor corresponde a
la posición horizontal y el
segundo con el vertical. La body { background-position:
x-pos y-pos
esquina top left es 0 0 0px 10px; }
(0px 0px o cualquier unidad
permitida)
Elementos reemplazados y a
0% 0% No
nivel de bloque

Referidos al tamaño de la
propia caja

background-repeat Establece si (y cómo) se repite una imagen de fondo
repetirá vertical y
repeat url(qweos.gif); background-
horizontalmente (teselado o repeat: repeat; }
mosaico)
repeat-x url(qweos.gif); background-
repetirá horizontalmente repeat: repeat-x; }

56 de 75

repeat-y url(qweos.gif); background-
repetirá verticalmente repeat: repeat-y; }
La imagen de fondo no se
no-repeat url(qweos.gif); background-
repetirá repeat: no-repeat; }

repeat Todos los elementos No


57 de 75

7.7 Propiedades de las listas

Las propiedades de las listas nos permiten cambiar los tipos de marcadores
(viñetas) de los elementos de las listas, insertar una imagen como marca para
una lista y controlar su posición

list-style Propiedad agrupada para las propiedades de lista
list-style-type ul {list-style: disc outside;
}
list-style-position Ver propiedades individuales
ol {list-style: decimal
inside; }
list-style-image
No definido en la propiedad Elementos con
Si
agrupada display: list-item


list-style-image Establece una imagen como símbolo de de una lista
No se mostrará ninguna
none ul {list-style-image: none; }
imagen como marca
ol {list-style-image:
url Ruta hasta la imagen url(imagenes/qweos.png); }
Elementos con
none Si
display: list-item


list-style-position Coloca el símbolo de cada elemento de una lista
Agrupa el símbolo (o marca)
ul {list-style-position:
inside de la lista y el contenido de la inside; }
misma
Mantiene el símbolo a la
ol {list-style-position:
outside izquierda del contenido del outside; }
elemento de la lista

58 de 75

Elementos con
outside Si
display: list-item


list-style-type Establece el tipo de símbolo de cada elemento de una lista
En general:

• el procesado exacto depende de la aplicación del usuario.
• CSS 2 no especifica el mecanismo exacto de cada sistema numérico.
• una aplicación del usuario que no reconoce un sistema numérico debe usar decimal

none No muestra ningún símbolo ul {list-style-type: none; }

disc Muestra un círculo sólido ul {list-style-type: disc; }

circle Muestra un círculo ul {list-style-type: circle; }

square Muestra un cuadrado ul {list-style-type: square; }

Números decimales,
ul {list-style-type: decimal;
decimal comenzando desde 1 (1, 2, 3, }
4, etc.)
Números decimales,
ul {list-style-type: decimal-
decimal-leading-zero comenzando desde 01 (01, 02, leading-zero; }
03, 04, etc.)
Números romanos en
ul {list-style-type: lower-
lower-roman minúsculas (i, ii, iii, iv, v, roman; }
etc.)
Números romanos en
ul {list-style-type: upper-
upper-roman mayúsculas (I, II, III, IV, V, roman; }
etc.)
lower-alpha / lower- Alfabético en minúsculas (a, ul {list-style-type: lower-
latin b, c, d, e, etc.) alpha; }

upper-alpha / upper- Alfabético en mayúsculas (A, ul {list-style-type: upper-
latin B, C, D, E, etc.) latin; }
Minúsculas griegas clásicas:
ul {list-style-type: lower-
lower-greek alfa, beta, gamma (α, β, γ, δ, greek; }
etc.)

hebrew Numeración hebrea tradicional ul {list-style-type: hebrew; }

Numeración georgiana
ul {list-style-type: georgian;
georgian tradicional (an, ban, gan, }
etc.)

59 de 75

ul {list-style-type: armenian;
armenian
}

ul {list-style-type: cjk-
cjk-ideographic Números ideográficos planos ideographic; }

La marca es: a, i, u, e, o, ka, ul {list-style-type: hirigana;
hiragana
ki, etc. }

La marca es: A, I, U, E, O, KA, ul {list-style-type: katakana;
katakana
KI, etc. }

La marca es: i, ro, ha, ni, ho, ul {list-style-type: hirigana-
hiragana-iroha
he, to, etc. iroha; }

La marca es: I, RO, HA, NI, ul {list-style-type: katakana-
katakana-iroha
HO, HE, TO, etc. iroha; }
Elementos con
disc Si
display: list-item


Especifica la distancia entre los límites de bordes más cercanos
marker-offset
de un marcador y su contenido
Distancia definida por la
auto ul {marker-offset: auto; }
aplicación de usuario
Valor fijo de distancia. Las
medidas pueden ser negativas,
longitud ol { marker-offset: 3em; }
pero pueden existir
limitaciones
Elementos con
auto No
display: marker


60 de 75

7.8 Propiedades de dimensión

Las propiedades de dimensión nos permiten controlar el alto y el ancho de un
elemento y el interlineado entre elementos

height Establece la altura de un elemento
El un documento con un flujo
normal, la altura necesaria
auto p { height: auto; }
para cerrar el contenido del
documento
Cualquier valor de longitud p { height: 0.9em; }
longitud
permitido. No negativo p { height: 200px; }

Calculado respecto a la altura
% p { height: 15%; }
del bloque contenedor
Todos los elementos, excepto
elementos en línea no
auto No
reemplazados, columnas de
tablas y grupos de columnas
Ver valores Visuales NS 7, IE 6, MZ 1.7, OP 7.2

line-height Establece la distancia entre líneas
Informa a las aplicaciones del
usuario que pongan valor
"razonable" en base al tamaño
normal p { line-height: normal; }
de la fuente del elemento. El
valor tiene el mismo
significado que número.
El valor es este número
multiplicado por el tamaño de
la fuente del elemento. No
número admite valores negativos. p { line-height: 1.1; }
Recomendamos un valor
computado para normal entre
1.0 y 1.2
La altura de la caja es puesta
con cualquier valor de
longitud p { line-height: 11px; }
longitud permitido. No
negativo
La altura es este porcentaje
multiplicado por el tamaño de
% la fuente del elemento (no del h3 { line-height: 130%; }
elemento padre). No admite
valores negativos.

61 de 75



Referidos al tamaño de fuente
del propio elemento

max-height Establece la altura máxima de un elemento
No existe límite de altura del
none p { max-height: normal; }
elemento
permitido. El elemento nunca img { max-height: 40px; }
longitud
debe tener una altura que p { max-height: 12em; }
exceda esta distancia
Limita la altura a la máxima
% p { max-height: 50%; }
del bloque de contención
none los elementos de línea no No
reemplazados y tablas
Referidos a la altura del

max-width Establece el ancho máximo de un elemento
No existe límite de ancho del
none p { max-width: normal; }
elemento
permitido. El elemento nunca img { max-width: 40px; }
longitud
debe tener un ancho que p { max-width: 12em; }
exceda esta distancia
Limita el ancho al máximo del
% p { max-width: 50%; }
none los elementos de línea no No
de contención

62 de 75

min-height Establece la altura mínima de un elemento
permitido. El elemento nunca img { min-height: 40px; }
longitud
debe tener una altura menor p { min-height: 12em; }
que esta distancia
Limita la altura a la mínima
% p { min-height: 50%; }
0 los elementos de línea no No

min-width Establece el ancho mínimo de un elemento
permitido. El elemento nunca img { min-width: 40px; }
longitud
debe tener un ancho menor p { min-width: 12em; }
que esta distancia
Limita el ancho al mínimo del
% p { min-width: 50%; }
los elementos de línea no No
usuario
de contención

min-width Establece el ancho mínimo de un elemento
permitido. El elemento nunca img { min-width: 40px; }
longitud
debe tener un ancho menor p { min-width: 12em; }
que esta distancia
Limita el ancho al mínimo del
% p { min-width: 50%; }
los elementos de línea no No
usuario
de contención

63 de 75

width Establece el ancho de un elemento
El un documento con un flujo
normal, es tratado como el
auto p { width: auto; }
100%. En elementos flotantes
tiende a ser ancho 0
img.foto { width: 40px; }
longitud permitido. No se admiten div { width: 12em; }
valores negativos.
Calculado respecto al ancho
% h3 { width: 50%; }
los elementos de línea no
auto No
reemplazados, filas de tabla y
grupos de filas
de contención

64 de 75

7.9 Propiedades de posición

Las propiedades de posición nos permiten definir la colocación de los elementos

bottom Especifica el lado inferior de un elemento
Para un elemento posicionado
de forma absoluta depende de
la medida de la distancia
auto p { bottom: auto; }
vertical, para uno posicionado
de forma relativa parece no
tener efecto
h3 { vertical-align: baseline;
Una distancia fija desde el
longitud position: relative; bottom: -
margen inferior del contenido 0.5em; }
Un porcentaje de la altura del
bloque de contención. Si la
altura de dicho bloque no p { position: absolute; width;
%
depende de la altura del 90%; bottom: 10%;}
contenido, el valor es
interpretado como auto

auto Elementos posicionados No


clip Define una zona de recorte
Sólo hay una forma posible en
CSS2: rect( top right
bottom left). Especifican
p { clip: rect(5px, -5px,
forma los desplazamientos de los 10px, 5px); }
lados respectivos de la caja.
Pueden admitir valores
negativos
La zona de recorte tiene el h3 { clip: rect( auto, auto,
auto, auto); }
auto mismo tamaño y ubicación que
la(s) caja(s) del elemento p { clip: auto; }
auto No
nivel de bloque


65 de 75

Ejemplo.

Las dos reglas siguientes:

p { clip: rect(5px, 10px, 10px, 5px); }
p { clip: rect(5px, -5px, 10px, 5px); }

crearán las zonas de recorte rectangulares delimitadas por las líneas cortadas en las
ilustraciones siguientes:

left Especifica el lado izquierdo de un elemento
Depende de cuáles de las
propiedades relacionadas
tienen también el valor auto
(ancho y alto de los elementos
auto no reemplazados y p { left: auto; }
posicionados absolutamente).
tener efecto
Una distancia fija desde el h3 { position: relative; left:
longitud
borde de referencia -0.5em; }

66 de 75

Un porcentaje del ancho del p { position: absolute; left:
%
bloque de contención 10%;}


de contención

overflow Especifica qué ocurre si el contenido se desborda
Indica que el contenido no es
visible p { overflow: visible; }
recortado
El contenido es recortado y no
existe ningún mecanismo de
desplazamiento; los usuarios
no tendrán acceso al
hidden td { overflow: hidden; }
contenido recortado. El
tamaño y forma de la zona de
recorte son especificados por
la propiedad clip.
El contenido es recortado y
existe algún mecanismo de
scroll p.scroll { overflow: scroll; }
desplazamiento (como barras
de desplazamiento)
usuario, pero debe provocar
auto que se proporcione un p { overflow: auto; }
mecanismo de desplazamiento
para las cajas desbordadas
visible No
nivel de bloque


position Coloca un elemento en una posición determinada
Situado de acuerdo al flujo
normal. Las propiedades top,
static p { position: static; }
right, bottom y left no se
aplican
Se calcula de acuerdo al la
relative posición en el flujo normal. img { position: relative; }
Luego la caja se desplaza de

67 de 75

modo relativo a su posición
normal
La posición se especifica con
las propiedades top, right,
bottom y left. Estas
absolute propiedades especifican los div { position: absolute; }
desplazamientos con respecto
al bloque de contención. No
afecta a la composición de los
“hermanos” siguientes
La posición de la caja se
calcula de acuerdo al modelo
fixed absolute y, además, se fija p { position: fixed; }
con respecto a alguna
referencia
Todos los elementos, pero no
static No
al contenido generado


right Especifica el lado derecho de un elemento
Depende de cuáles de las
propiedades relacionadas
tienen también el valor auto
(ancho y alto de los elementos
auto no reemplazados y p { right: auto; }
posicionados absolutamente).
tener efecto
Una distancia fija desde el h3 { position: relative;
longitud
borde de referencia right: -0.5em; }

Un porcentaje del ancho del p { position: absolute; right:
%
bloque de contención 10%;}


de contención

top Especifica el lado superior de un elemento

68 de 75

de forma absoluta depende de
la medida de la distancia
auto p { top: auto; }
vertical, para uno posicionado
tener efecto
h3 { vertical-align: baseline;
Una distancia fija desde el
longitud position: relative; top: -
margen superior del contenido 0.5em; }
Un porcentaje de la altura del
bloque de contención. Si la
altura de dicho bloque no p { position: absolute; width;
%
depende de la altura del 90%; top: 10%;}
contenido, el valor es
interpretado como auto



vertical-align Especifica la alineación vertical de un elemento
Ajusta la línea base de la caja
p { vertical-align: baseline;
baseline con la línea base de la caja }
padre
La línea base del elemento es
bajada al punto apropiado
sub p { vertical-align: sub;}
para los subíndices de la caja
del padre
La línea base del elemento es
elevada al punto apropiado p { vertical-align: text-
super
para los superíndices de la super;}
caja del padre
Alinea la parte superior de la
top caja con la parte superior de p { vertical-align: top;}
la caja de línea
Alinea la parte superior de la
text-top caja con la parte más alta de p { vertical-align: text-top;}
la fuente del elemento padre
Alinea a la mitad vertical de la
middle p { vertical-align: middle;}
caja del padre
Alinea la parte inferior de la
img { vertical-align: bottom;
bottom caja con la parte inferior de la }
caja de línea

69 de 75

Alinea la parte inferior de la
p { vertical-align: text-
text-bottom caja con la parte más baja de bottom;}
la fuente del elemento padre
Eleva (valor positivo) o baja
(valor negativo) la caja en
longitud este valor de distancia. El h3 { vertical-align: 3cm; }
valor 0 significa lo mismo que
baseline
Eleva (valor positivo) o baja
(valor negativo) la caja en
% este porcentaje de distancia. p { vertical-align: 12%;}
El valor 0% significa lo mismo
que baseline
elementos a nivel de línea y
baseline No
table-cell

Referidos al valor de line-
height del propio elemento

z-index Establece el orden de capa de un elemento
El orden de la capa es igual
auto p { z-index: auto; }
que la de su padre
Entero que establece el orden
número div { z-index: -1; }
de la cada del elemento



70 de 75

7.10 Propiedades de composición
Las propiedades, aquí denominadas como, de composición visual nos permiten,
entre otras cosas, controlar cómo se muestra un elemento, su posición respecto
a otros elementos y su visibilidad

clear Establece el control del flujo del elemento
No se permiten elementos
left h2 { clear: left; }
flotantes en el lado izquierdo
right p { clear: right; }
flotantes en el lado derecho
both flotantes a ambos lados address { clear: both; }
(izquierdo y derecho)
Los elementos flotantes a
none ambos lados (izquierdo y div { clear: none; }
derecho) están permitidos

none Elementos a nivel de bloque No


cursor Cambia la apariencia del cursor (puntero del ratón)
Especifica una ruta a un cursor
personalizado. Si la aplicación
del usuario no puede manejar
el primero de una lista de p { cursor :
cursores, debe intentar url("micursor.cur"),
url
manejar el segundo, etc. Si la url("segundo.csr"),
aplicación del usuario no pointer; }
puede manejar ningún cursor,
debe usar el cursor genérico al
final de la lista.
La aplicación de usuario
auto determina el cursor mostrado h2 { cursor: auto; }
según el contexto
El cursor es mostrado como
crosshair h2 { cursor: crosshair; }
una cruz
El cursor predeterminado,
default depende de la plataforma. A p { cursor: default; }
menudo es una flecha

71 de 75

El cursor se muestra como un
pointer puntero (una mano) que indica p { cursor: pointer; }
enlace

move Indica que algo será movido p { cursor: move; }

El cursor indica que el lado de
e-resize la caja va a moverse a la p { cursor: e-resize; }
derecha (east)
la caja va a moverse hacia
ne-resize p { cursor: ne-resize; }
arriba y a la derecha (north-
east)
nw-resize p { cursor: nw-resize; }
arriba y a la izquierda (north-
west)
n-resize la caja va a moverse hacia p { cursor: n-resize; }
(north)
se-resize p { cursor: se-resize; }
abajo y a la derecha (souht-
east)
sw-resize p { cursor: sw-resize; }
abajo y a la izquierda (souht-
west)
s-resize la caja va a moverse hacia p { cursor: s-resize; }
(souht)
w-resize la caja va a moverse hacia la p { cursor: w-resize; }
izquierda (west)

text El cursor indica texto p { cursor: text; }

El cursor indica espera, a
wait menudo como un reloj (de p { cursor: wait; }
arena o de pulsera)
El cursor indica ayuda, a
help menudo como el símbolo de p { cursor: help; }
cierre de interrogación

auto Todos los elementos Si

No admitido Visuales, interactivos NS 7, IE 6, MZ 1.7, OP 7.2

display Establece si (y cómo) se muestra un elemento

72 de 75

none El elemento no será mostrado p { display: none; }

Será mostrado como un
elemento a nivel de bloque,
block li { display: block; }
con un salto de línea antes y
después del elemento
elemento en línea, sin saltos
inline h2 { display: inline; }
de línea antes y después del
elemento
El elemento será mostrado
list-item p { dispaly: list-item; }
como una lista
run-in elemento a nivel de bloque o p { display: run-in; }
en línea según el contexto
compact elemento a nivel de bloque o p { display: compact; }
en línea según el contexto
El elemento será un marcador.
Este valor sólo debe usarse
con los pseudo-elementos
marker p { display: marker; }
:before y :after. En otros
casos, el valor es interpretado
como inline.
como una tabla a nivel de
table bloque (como <table>), con .elemento { display: table; }
saltos de línea antes y después
de la tabla
como una tabla en línea (como .elemento { display: inline-
inline-table
<table>), sin saltos de línea table; }
antes y después de la tabla
.elemento { display: table-
table-row-group como un conjunto de una o
row-group; }
más filas (como <tbody>)
table-header-group como un conjunto de una o
header-group; }
más filas (como <thead>)
table-footer-group como un conjunto de una o
footer-group; }
más filas (como <tfoot>)
table-row como una fila de tabla (como
row; }
<tr>)
como un conjunto de una o .elemento { display: table-
table-column-group
más columnas (como colunm-group; }
<colgroup>)

73 de 75

table-column como una columna de celdas colunm; }
(como <col>)
table-cell como una celda de tabla
cell; }
(como <td> y <th>)
table-caption como un título de tabla (como
caption; }
<caption>)

inline Todos los elementos No

No admitido Todos NS 7, IE 6, MZ 1.7, OP 7.2

float Define el posicionamiento de un elemento flotante
El elemento se mueve a la
left img { float: left; }
izquierda del elemento padre
El elemento se mueve a la
right #der { float: right;
derecha del elemento padre

none La caja no es flotante p { float: none;

Todos menos los elementos
none posicionados y el contenido No
generado

visibility Indica la visibilidad de un elemento
visible El elemento es visible p { visibility: visible; }

hidden El elemento es invisible p { visibility: hidden; }

Cuando se usa en elementos
de tablas, oculta una fila o
columna completa, y el
espacio queda disponible para
collapse tr { visibility: collapse; }
otro contenido. Si se usa en
otros elementos que no sean
filas o columnas, se muestra
igual que hidden.

74 de 75


Heredado Todos los elementos No


75 de 75

CSS ICAP 2007

Más contenido relacionado

La actualidad más candente (20)

Destacado (10)

Similar a CSS ICAP 2007 (20)

Último (20)

CSS ICAP 2007