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
Depende de la aplicación del
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;}

none Todos los elementos No


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

CSS ICAP 2007

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (10)

Similaire à CSS ICAP 2007

Similaire à CSS ICAP 2007 (20)

Dernier

Dernier (18)

CSS ICAP 2007