2 PC Cuadernos
C S S e s un ju e g o d e n iñ o s. T o d o el c o n te n i­
CSS,un juego de
niños
Crea tu sitio web
Peter M üller
© C opyright: K now W are EURL
Traducción: V ictoria M engual
PC C uadernos - Técnicos
w w w .pc-cuadernos.com
S ociedad editora:
Know W are E.U.R.L.
70, rué G eorges Viilette
F-77250 Ecuelles
Francia
D irector:
M ikkel Franck
Dirección electrónica:
info@ pc-cuadernos.com
D epósito legal: B -55690-2006
ISBN: 2-915605-62-9
Im prenta:
Im printsa
im pressions intercom arcals, S.A.
S ant Fruitós de Bages, Barcelona
D istribución quioscos:
C oedis S.L.
Avda. de B arcelona, 225
M olins de Rei
B arcelona
Venta por núm eros:
D espués de su aparición, los núm eros de esta
colección pueden pedirse por correo.
(Consulta la página 92)
d o d e u n a p á g in a w e b se e n c u e n tra d e n tro
d e c a ja s , o "c o n te n e d o re s ” . C o m p re n d e r e s ­
te c o n c e p to e s fu n d a m e n ta l p a ra lle g a r a
d o m in a r C S S y lo g ra r c re a r d is e ñ o s a tra c ti­
v o s y q u e fu n c io n e n .
A tra v é s d e u n a s e rie d e c a p ítu lo s p ro g re s i­
v o s y c o n la a y u d a d e e je m p lo s p rá c tic o s , el
a u to r p ro p o n e la c re a c ió n d e un s itio w e b
m e d ia n te H T M L y C S S .
En e s te c u a d e rn o se e x p lic a c ó m o d a r fo r­
m a to al te x to , a la s im á g e n e s , a la s lis ta s , a
lo s v ín c u lo s ... c ó m o c o n tro la r la p o s ic ió n
p re c is a d e lo s o b je to s co n a y u d a d e m á rg e ­
n e s y e s p a c io s , y c ó m o h a c e r u s o d e lo s e s ­
tilo s a n id a d o s p a ra lo g ra r p á g in a s d e d is e ñ o
fle x ib le y a m ig a b le .
La p rim e ra m ita d d e l m a n u a l p e rm ite in tro ­
d u c irs e p a s o a p a s o en lo s c o n c e p to s b á s i­
c o s d e H T M L y C S S . E n la s e g u n d a p a rte,
la s e x p lic a c io n e s , a p e s a r d e m a n te n e r su
c la rid a d , se c e n tra n en te m a s m á s c o n c re ­
to s y c o m p le jo s .
E n c u a lq u ie r c a s o , ta n to lo s p rin c ip ia n te s
c o m o lo s p ro g ra m a d o re s a v a n z a d o s s e g u ro
q u e s a c a rá n un g ra n p a rtid o d e to d a la in ­
fo rm a c ió n q u e o fre c e el a u to r.
M ikkel Franck, editor.
m franck@ pc-cuadernos.com
Todos los productos citados en este manual son
marcas registradas o marcas comerciales. El au­
tor y el editor declinan toda responsabilidad que
pueda surgir de la utilización de los datos o pro­
gramas que aparecen en este libro.
 readme.txt 3

readm e.txt
M B f t v J n U M S wmb s m personas que han llegado a
1 ypr n ss z . ;u¿ han aprendido mediante el mé-
¿A quién se dirige?
i É b á r | r a d i f <nt Lo han visto aquí, /o han Los únicos requisitos reales para la lectura son
k&bMKL y rf Aadhp de fue funcione es más importante tener interés por la web v ganas de aprender. Lo
O t é pCVZpt ideal sería que el lector no tenga alergia al códi­
go fuente, y que no se asuste ante una indica­
C :r - raer-po uno logra juntar m uchas peque- ción hexadecim al de un color com o #f3c600.
”_Lr r^ ez^ CSS que, sin em bargo, no propor- El cuaderno está pensado principalm ente para:
- - r zr - r a im agen general. Este cuaderno está
; rara m ostrar dicha im agen final. • Principiantes que ya hayan dado sus prim e­
ros pasos y deseen saber más.
• Diseñadores de tablas que hayan oído que
tam bién se puede vivir sin ellas, pero no
La idea sobre ei cuaderno sepan cómo.
La idea sobre este cuaderno surgió después de • Diseñadores web que busquen una intro­
m uchos años asistiendo a sem inarios en los que ducción compacta y estructurada a CSS.
los participantes siempre tropezaban con la • Programadores que deseen crear un fro n -
m isma piedra. Se fundamenta en dos pensa­ tend adecuado para sus scripts del lado del
mientos: servidor.
• En prim er lugar, debe ser corto. Quería lograr Si logras llegar al final del cuaderno, habrás ad­
casi 100 páginas, y lo he (casi) logrado. El quirido un conocimiento fundam ental sólido
lector debería dedicar al cuaderno el m íni­ que te perm itirá com prender m ejor los ejemplos
m o tiem po posible, y el m áxim o a la crea­ que se encuentran en Internet y en otros libros.
ción de sitios web.
Com o principiante, te recom iendo que leas el
• £ -: segundo lugar, no tendría que hablar de to­
cuaderno a tu ritmo de principio a fin. Si eres
l e . Este cuaderno está pensado com o una
un usuario avanzado, puedes saltar a las partes
groa para el laberinto de CSS, y no quiero
que te interese con la ayuda del índice de m ate­
explicar todas las pequeñas cosas que se
rias y de palabras clave. Los datos de ejem plos
cruzan por el camino.
del cuaderno se pueden descargar gratuitam en­
El B 2r.ual incluye num erosos ejercicios prácti­ te de http://w w w .pc-cuadem os.com .
cas v i k? largo de los capítulos term inarem os
Peter M üller
e r r e r e : un pequeño sitio web que se puede uti-
__er com o punto de partida para que el lector
g y irri—m fr por su cuenta.
S h « h i r g o , tam bién explicaré conceptos im-
? como la especificidad, el m odelo de
G f B w h o s r a d a y la herencia de forma com -
r « r > : - rara que el lector no tenga que seguir
i r e r ^ ¡retracciones paso a paso sino que
Segue a com prender el diseño con CSS. "La
e n e re n ce- cofXK±niento", tal com o dice Stefan
-r >T fHTNíL rS.se¡rninii.orq).
4 La web no está hecha de papel
La w eb no está hecha de papel
En este capítulo demostraremos que la mentalidad de papel
se traduce en expectativas frustradas en el caso de las pági­
nas web. Después veremos la historia de un periódico flexi­
ble y describiremos las características de las páginas web
adecuadas al medio.
Todos hem os crecido con el papel im preso, y los
productos im presos com o libros y revistas han
influenciado notablem ente nuestra forma de
pensar y nuestra sensibilidad organizativa. Ser
consciente de este pensam iento en papel es el
prim er paso para lograr crear páginas w eb adap­
tadas al medio.
Com o dice Carroll en A licia en el país de las mara­
villas: "Em pieza por el principio y sigue hasta
llegar al final; allí te paras". Sigue el conejo blan­
co. Ese es el principio.
Mentalidad de papel, páginas web
y expectativas frustradas
N avegantes, diseñadores web y clientes , prácti­
cam ente todos basan su contacto con la web en
una expectativa m arcada por dos experiencias:
• El autor de una página en papel tiene pleno
control sobre su aspecto, independientem ente
de si diseña un ostentoso folleto brillante o
prueba suerte con su prim era invitación.
• Una vez term inada, la página en papel se re­
produce sin cam bios y todos los espectadores
la ven exactam ente igual (obviando las m an­
chas de café, el am arilleo y otras desviacio­
nes m arginales).
El pensam iento basado en el papel espera un
control sobre el diseño e invariabilidad del pro­
ducto acabado. Pero la web no está hecha de pa­
pel, y una página web se com porta de forma dis­
tinta a una de papel:
• El autor de una página web no tiene pleno con­
trol sobre su aspecto. En últim o lugar es el
usuario el que determ ina el aspecto (y el
com portam iento) de la página en su nave­
gador, pero el autor solam ente puede expre­
sar un deseo.
• Una vez term inada, una página w eb se mues­
tra diferente para cada usuario.
La m entalidad basada en el papel desem boca sin
rem edio en expectativas frustradas cuando se
trata de diseñar páginas web.
1. El autor de una página web no tiene pleno
control
El autor de una página w eb no tiene pleno con­
trol sobre el aspecto de la página en el navega­
dor del usuario. Solam ente puede expresar sus
deseos. ¿Te parece exagerado?
U n ejem plo sencillo: sobre el papel, el autor de­
term ina el tam año de letra -e n la w eb no. En
cualquier navegador web el usuario puede m o­
dificar el tam año de fuente, facilitando la lectura
de texto en el monitor. Por esa razón, un sitio
web diseñado con m entalidad de papel se de­
rrum ba, m ientras que un sitio adecuado al m e­
dio se adapta.
La influencia del usuario va m ucho más allá. En
Internet Explorer, en el m enú H erram ientas - Op-
ciones de Internet, a través de la ficha General se
puede acceder al cuadro de diálogo Accesibilidad.
Accesibilidad
Formato
I " ! Orrwbr cobres especificados en páginas Web
I I Omitir estío* de frentes especificados en páginas Web
! IOmitir tamaños de fuentes especificados en paginas Web
Hoja de estío dei usuano
I IDar formato a b s documentos utilizando mi hoja de estile
,1 P Ó T ’
.-Vominar
A g n fc r Cancelar
Fig. 1: Accesibilidad en IE
Desde aquí, el usuario puede ignorar el estilo de
fuentes y colores de todas las páginas web.
Pruébalo. Intenta ver las páginas web con tipos
de fuente y colores totalm ente distintos a los fi­
jados por los autores de las m ism as.
El usuario incluso puede utilizar una hoja de es-,
tilos (CSS) propia para visualizar todas las pági­
nas web que se m uestren en el navegador. Com o
vem os, el autor no tiene el control total sobre i*
página web.
 La web no está hecha de papel 5

A unque parezca incongruente, si quieres diseñar Periódicos: las páginas de papel son rígidas,
páginas web prim ero deberás desistir de querer las páginas web son flexibles
diseñar páginas web. Es así. N o tendrás ningún
La siguiente historia describe a la perfección la
control sobre el aspecto que tendrá la página en
diferencia entre el m edio im preso y la web:
el navegador del usuario.
• Por la m añana sales de casa y com pras un
2. Las páginas web tienen un aspecto distinto periódico.
para cada usuario • En el metro no hay m ucho espacio, y el pe­
En realidad, una página web no tiene el aspecto riódico se encoge autom áticamente. A tam a­
que el usuario ve en la ventana del navegador. ño A5 o similar.
El navegador recibe del servidor únicam ente el • En el trayecto a pie hasta la oficina, disfrutas
código fu en te, una especie de proyecto de cons­ del entorno y dejas que tu reproductor MP3
trucción. El navegador es el encargado de anali­ te lea un artículo previam ente marcado.
zar el proyecto y representarlo de la m ejor forma • En la mesa del despacho, el periódico se am ­
posible. plía por sí solo. A tam año A2, o lo que quepa
en función del espacio disponible.
Cuando uno crea una página, en realidad crea
• Por la tarde le das el periódico a tu abuela,
código fuente. A unque ni siquiera haya oído o
que duplica el tamaño de fu en te y le cam bia la
leído nunca este térm ino porque trabaje con un
tipografía para leerlo m ás fácilmente.
editor visual com o Frontpage, Go Live o
Dreamweaver. Cuando cargam os la página ter­ Y todo ello, con el m ism o periódico. Por natura­
m inada en el sen ad o r web, únicam ente transm i­ leza, una página web es tan flexible com o este
tim os el código fuente, pero no la página tal co­ periódico. El único m om ento en que pierde di­
m o se m ostraba en el editor. Es decir, el código cha flexibilidad es cuando el diseño es erróneo, o
fuente es en cierta m edida la página web real. cuando se im prim e.

u iiu te

t t i l l í CtlTT. »3M ;iu ;tU

--

' í . 'J f ¿«s *—*

Páginas web adecuadas al medio:
«■ j.• - a > j
*? LttW « O : .*«
•luveeictiKtrtiJi
«3 * 5: •-■»»ter:*e»Crt
más allá del papel
te ;
i;:e s t M C t o ;C »*%•;
¿Conoces Shrek? Ese sim pático ogro que, acom ­
—X
líy e - tM i-jir M e u p ’ N ' -
;í t '.>i t it i « Inauj-:
pañado de un chism oso asno, rescató a una
// — »
«H va n r m h b - «••;■=:: i — * T -• princesa y m ás tarde se casó con e lla ... Los ogros
< W f M * '.« t t w S íM .« I I i i « ': > ; í r i r í i f * f c íljt » - ;-:

w e - r u B jíj.f i t t f c u / u u ,.« t P ’taefcptt& afti son verdes, fortachones y no se les considera

**»■ :»»••• - * j * . u u - u m > '- s o < s t v » r * iovs‘
tt-r— i H e a i i C m f a i ' « M n o i
»MlgUUntO».'
« w -r m ít» u ¡si- dem asiado sim páticos. Hay una escena de la pe­
« h m M U T. » » « = » -;-.■ > » * t x «-!><■-. ^.-.T
« o — i— « « / f i f i a » . U v jf c f " . , .. . j
K t t W M s m i «re— I t t t t S ' t U t f a b r t l U . l U '
.. ■| k -'j í i » j t l U p t i u s r
• !■ » *« » -33V/fc*wr<
lícula en la que Shrek le explica a su acom pañan­
i5» l t w v i > « n s 3» V M i
w r * ’IM »».. « tM l j > ♦ — W >•.!«> te la naturaleza de los ogros:
• Shrek: "L o s ogros son com o las cebollas"
Ffg. 2: Código fuente de una página web
• Asno: "¿Q uieres decir que apestan?"
• Shrek: "¡N o! ¡Capas! ¡Las cebollas tienen ca­
Cualquier navegador tiene un menú Ver con una pas, los ogros tienen capas!"
opción llam ada Código fu en te o Código fu en te de la
Las páginas w eb también.
página, que perm ite visualizar el proyecto de
construcción.
Las páginas web tienen capas
Lo que el usuario contem pla en la ventana del La Web no es u n m edio im preso, pero tam poco
navegador com o página web es únicam ente la se limita únicam ente a la pantalla. La w eb es el
interpretación que hace ese navegador concreto prim er m edio que se rige por el principio "S in ­
en ese equipo concreto con las opciones actuales. gle Input - M últiple O utput": el contenido se
En consecuencia, las páginas web obligatoria­ guarda una sola vez y se reproduce en distintos
m ente se visualizan de forma distinta porque el formatos. En pantalla, im preso sobre papel, en
código fuente se interpreta de diferente forma en forma de archivo PDF, acústicam ente a través de
función del entorno. un screenreader, y seguram ente tam bién de otras
formas que todavía no conocem os.
La diferenciación entre contenido y formato sig­
nifica que las páginas web tienen capas:
6 La web no está hecha de papel
• El núcleo, la capa m ás profunda de la pági­
na, es el contenido, el texto, el código
HTML. Este núcleo es flexible y se adapta a
las circunstancias.
• A lrededor de este núcleo hay otras capas,
com o C SS para la pantalla, CSS para la im ­
presora, JavaScript para facilitar el manejo
(AJAX), etc.
Las capas alrededor del núcleo son m ejoras que
hacen que la página sea más bonita y m ás fácil
de manejar, pero no siempre se hace uso de to­
das esas capas.
Cuando cream os páginas web adecuadas al m e­
dio no sólo querem os crear una página que se
muestre exactam ente igual en todos los navega­
dores. Eso es im posible, del m ism o m odo que
intentar buscar el final de Internet.
Una página w eb no tiene que verse exactam ente
igual en todas partes, sino que debe fu n cion ar en
todas partes. El contenido debe seguir siendo ac­
cesible para el usuario.
Conforme a los estándares, accesibles y
flexibles = adecuadas al medio
En la web circulan distintos térm inos cuyo obje­
tivo es distanciam os de la m entalidad del pen­
sam iento centrado en el papel:
• Diseño web conform e a los estándares ( " D esig-
ning zoith Web Standards")
• Diseño web sin barreras ("Accessibility", es de­
cir, "A ccesibilidad")
• Flexibilidad ("Bullet P roofW eb Design")
• Optimización para motores de búsqueda
(“Search Engine Optimization")
A fin de cuentas, todos estos térm inos nos ani­
man a crear páginas w eb de forma que se adap­
ten a las posibilidades del World Wide Web, algo
que yo agrupo dentro del térm ino "diseño web
adecuado al m ed io".
¿Diseño de páginas con tablas?
Si el diseño web adecuado al m edio es tan fan­
tástico, ¿por qué anteriorm ente las páginas web
se diseñaban a partir de tablas? Vamos a aclarar­
lo haciendo un poco de retrospectiva.
Legítima defensa: tablas y <font>
La web fue creada por científicos para científi­
cos, y los científicos suelen estar m ás interesados
- y no sólo en el caso de las páginas w e b - en el
contenido que en la forma. En los inicios de la
red de redes, las páginas web eran prácticam en­
te idénticas: fondo gris, letra negra e hipervíncu-
los azules que pasaban a ser lilas cuando apun­
taban a una página ya visitada.
C uando la Red se convirtió en un gran boom
m undial a m ediados de los noventa, las páginas
w eb sim ples perdieron terreno frente a los dise­
ños más elaborados. El World Wide Web Con-
sortium (http://w3.orq) trabajó para elaborar CSS,
un lenguaje para el diseño atractivo de elem en­
tos H TM L. Sin embargo, el m undo quería pági­
nas llenas de color, y las quería rápido. A nadie
le im portaba un nuevo lenguaje genial que no
tenía siquiera fecha de lanzamiento.
C uando Netscape inventó la etiqueta <font> p a­
ra el diseño de fuentes y <table> para las tablas,
(casi) todo el m undo quedó entusiasm ado, y el
diseño web clásico em pezó a cobrar forma:
• Form ato de fuentes con font
• Posidonam iento con tablas HTML invisibles
El código fuente de estas páginas es práctica­
m ente ilegible para las personas, y la incorpora-
d ó n de cam bios posteriores a la estructura se
convierte rápidam ente en una pesadilla.
Vuelta a la mentalidad del papel
En d e rto sentido, esta forma de aplicar formato
supuso un paso atrás hacia el familiar m undo de
la m entalidad centrada en el papel. Los editores
visuales com o Frontpage o GoLive ocultan el
código fuente y refuerzan así la m etáfora del
papel actuando com o si fueran sim ples procesa­
dores de textos. Aún hoy hay m uchos diseñado­
res de páginas web que se sorprenden al com ­
probar que la página se ve distinta en su m oni­
tor que en el navegador del vecino.
El form ato de fuentes m ediante CSS se im puso
de forma relativam ente rápida a finales de los
noventa. Si se planificaba bien, podía aligerar
m ucho el trabajo, porque una hoja de estilos
puede utilizarse para tantas páginas com o se
desee. Perm ite dar formato por control remoto.
A unque CSS tam bién ofrecía teóricam ente la po­
sibilidad de posicionar objetos en una página
w eb, en aquel entonces los navegadores no in­
terpretaban CSS correctam ente, hasta el punto
de que el intento podía conllevar resultados in­
esperados. Por ese m otivo, los diseños de varias
colum nas se seguían realizando con tablas.
Diseños sin tablas
A ctualm ente la situación ha cambiado. Los na­
vegadores m odernos son tan com patibles con
CSS que los diseñadores web ya no tienen nin­
 La web no está hecha de papel
guna excusa, a excepción de una pereza innata y
una acusada falta de tiem po, para no diseñar sus
páginas por com pleto con CSS.
La diferencia con el diseño tradicional basado en
tablas HTML de la década de los noventa es
abism al, y si ya se han diseñado páginas con ta­
blas, lo mejor es olvidarse de todo lo aprendido.
Diseñar con CSS es distinto. Muy distinto. No
hay punto de com paración.
La separación de contenido y form ato, por ejem­
plo, es un concepto nuevo:
• Se parte de archivos HTM L bien estructura­
dos, sin diseño.
• Posteriorm ente se da form ato a los archivos
con instrucciones CSS.
7
No todo es más sencillo con CSS, y la curva de
aprendizaje inicial es m ás bien plana. Quizás te
estarás preguntando porque has dedicado tantos
años a aprender a diseñar páginas web utilizan­
do tablas y ahora tienes que volver a em pezar
desde cero.
No serás el único:
Mala cosa es -exclamó Eduardo- que ahora ya no se pueda
aprender para toda la vida. Nuestros antecesores se atenían
a la instrucción que habían recibido en su juventud; noso­
tros, en cambio, debemos volver a aprender cada cinco años
si no queremos quedar completamente pasados de moda.
Goethe. Las afinidades electivas. Primera parte,
cuarto capítulo. 1809. Nuevas reglas para un
nuevo medio. La web no está hecha de papel, y
para el diseño de páginas web tenem os CSS.
8 Así funciona HTML
Así funciona HTML
En este capítulo descubriremos que las páginas web están
compuestas por cuadros rectangulares, HTML se utiliza
para pegar etiquetas y una sólida estructura base constituye
el fundamento de cualquier página web.
Todos los m iles de m illones de páginas web de
la Red están escritas en un lenguaje llam ado
HTML. Y cualquiera que quiera hacem os creer
que es posible crear buenas páginas web sin sa­
ber cóm o funciona HTM L está realizando una
afirm ación, cuanto menos, atrevida.
Las páginas web están hechas de
cuadros rectangulares
Las páginas w eb se com ponen de cuadros rec­
tangulares que se colocan unos junto a otros o se
superponen en la ventana del navegador. Cuan­
to m ás nos acostum brem os a esta idea, m ás fácil
será diseñar páginas web. Cualquier forma re­
donda es un truco, un gráfico o am bas cosas.
En su relación con dichos cuadros, los lenguajes
HTM L y CSS ("C ascading Style Sheets") tienen
dos com etidos claram ente diferenciados:
• H TM L es el albañil que construye la casa y
ajusta la distribución de las habitaciones.
Con H TM L se crean los cuadros rectangula­
res y se llenan de contenido.
• C S S es el decorador que diseña la casa y las
habitaciones. CSS perm ite dar forma a los
cuadros y al contenido, y posicionarlos.
HTM L es un lenguaje sencillo y por ese motivo
no siempre se le tom a en serio. Sin em bargo, si
los cuadros no están bien estructurados en
HTM L, esto puede conllevar graves problem as a
la hora de darles forma con CSS.
El diseño de páginas w eb con CSS empieza por
unos buenos conocim ientos básicos de HTM L,
algo de lo que nos ocuparem os a continuación.
¿Qué es realmente HT - M - L?
HTM L significa H yperText M arkU p Language (en
español "lenguaje para el m arcado de hipertex-
to"). A unque esta traducción es correcta, no es
especialm ente descriptiva, por lo que verem os a
continuación una explicación m ás detallada de
cada letra.
HT de Hypertext: creación de hipervínculos
El hipertexto es texto con una serie de enlaces
autom áticos que suelen llam arse hyperlinks o
links. La World WTide Web está com puesta por
m iles de m illones de páginas web enlazadas en­
tre sí a través de hipervínculos, y estas interco­
nexiones crean un tejido de páginas. Dicho de
otra forma:
• Los hipervínculos son los hilos que se utili­
zan para tejer el tejido de la red m undial.
El H T de HTM L significa que el lenguaje H TM L
perm ite crear hipervínculos.
M de Markup: asignación de etiquetas
M arkup suele traducirse com o "m arcado". Po­
dríam os im aginarlo com o en un superm ercado:
• M arcar productos significa "pegarles etique­
tas".
• HTML pega literalm ente etiquetas en el tex­
to de una página web.
Las etiquetas HTM L se colocan entre los signos
m ayor y m enor que y se llaman <tags>, que en
español se traduce com o "etiqu eta":
<p>Este texto es un párrafo normal.</p>
El navegador sabe, gracias a las etiquetas, que el
texto entre am bas es un párrafo normal. En este
ejem plo, p significa paragraph, en español párrafo.
L de Language: vocablos y regias
gramaticales
H TM L es un lenguaje, en el que naturalm ente
existen vocablos y reglas gram aticales. Tags,
elem entos, atributos y reglas gram aticales... es
necesario aprenderlo todo, y aplicarlo m eticulo­
sam ente.
Este cuaderno no pretende ser una referencia
com pleta, ya que se pueden encontrar varias de
ellas en Internet. Un ejem plo gratuito, actualiza­
do y vivo es SelfHTM L. Se puede encontrar en
versión impresa o consultar gratuitam ente en:
• http://es.selfhtml.orq
XHTML: la última versión de HTML
A ntes o después uno termina topándose con el
térm ino XHTML. Para resum irlo, XH TM L es la
últim a versión y el futuro de HTM L, com o m í­
nim o según la voluntad del W 3 C (http://w3.orq).
La X corresponde a eXtensible (ampliable). Las
 Así funciona HTML
reglas gram aticales de XH TM L son algo m ás rí­
gidas que las de H TM L, lo que sin em bargo re­
sulta bastante útil.
D iferencias entre HTM L y XH TM L
Si te interesan las diferencias concretas entre
H TM L y XHTM L, en la siguiente página de
Ignside encontrarás un resum en com pacto:
http.7/www.iQnside.net/man/html/a xhtml.php
Los tres malentendidos sobre
HTML más comunes
Hay tres m alentendidos sobre H TM L tan exten­
didos que me gustaría corregirlos brevem ente
aquí.
1. HTML es un lenguaje de programación
H TM L no se programa, sino que sim plem ente se
escribe. Los principiantes suelen creer que escri­
bir código fuente HTM L es com o programar,
porque deben estar atentos a todos los caracteres
-p ero lo m ism o ocurre con los dictados y éstos
tam bién se escriben y no se programan.
2. HTML es un lenguaje de descripción de
páginas
H TM L no describe cóm o se muestra una página,
sino solam ente la estructura. Para el diseño se
utiliza CSS ("C ascading Stvle Sheets"). Algunos
ejem plos de lenguajes de descripciones de pági­
nas son PostScript o PDF.
3. HTML se utiliza para el diseño de páginas
web
"D iseñar con HTM L es com o pintar con espo­
sas". Esta frase sigue siendo tan válida hoy co­
mo hace diez años. Lo im portante a la hora de
crear una página web es la separación entre con­
tenido y diseño: HTM L sirve para crear los cua­
dros rectangulares y rellenarlos de contenido,
pero e l diseño de éstos se realiza con CSS. Esta
separación estricta de tareas abre posibilidades
insospechadas.
9
<!-- Comentarios HTML -->
Es buena costum bre incorporar com entarios al
código fuente para que tú m ism o puedas com ­
prender pasado un tiem po la función de deter­
m inadas partes del código.
Un com entario HTM L empieza con < i - - y ter­
m ina con -->. Un ejemplo:
<!-- Ajustar este texto... -->
Cuando el navegador detecta los caracteres < i -
sabe que el texto que se incluye hasta - - > es un
com entario y no debe m ostrarse en la ventana
del navegador.
Los com entarios se pueden ver en el código
fuente
Aunque los com entarios no se m uestren en la
ventana del navegador, siguen estando en e l có­
digo fu en te y cualquier visitante puede leerlo.
En todas las páginas hay una
estructura básica
El código fuente de cualquier página web se
puede subdividir en cuatro grandes partes:
1. D OCTYPE al principio de todo, en la pri­
mera fila.
2. El elem ento m aestro html, que contiene
head y body.
3. El encabezado head con el título (title) de la
página web y elementos com o meta.
4. body con el contenido que se m uestra en la
ventana del navegador.
Juntos, estos elem entos básicos forman el arm a­
zón HTM L que confiere una estructura invisible
y m antiene unida una página web, com o si de
un esqueleto se tratase.
Crear una estructura básica para la página
Antes de crear una nueva página con una estruc­
tura básica, perm ítem e un consejo:
DOCTYPE tiene una sintaxis extrem adam ente
com pleja y si el editor no ha escrito la línea por
ti, es m ejor que la copies en el código fuente para
evitar errores de tecleo. Puedes encontrar m ues­
tras para copiar, por ejem plo, en SelfHTM L:
• http://es.setfhtml.org/naveqacion/
htmLhtm#qrundqeruest
r*
10 Así funciona HTML
1. Crea una nueva carpeta a la que llam arás
p. ej. littleboxes.
2. Inicia tu editor preferido y crea un archivo
vacío.
3. Guarda el archivo vacío com o index.html.
4. Crea la estructura básica HTML. Si el edi­
tor ya ha escrito una en el archivo, com pá­
rala con la del siguiente ejemplo.
<!DOCTYPE html PUBLIC "-//W3C//DTD <P
XHTML 1.0 Transítional//EN" <P
"http://www.w3.org/TR/xhtmll/DTD/
xhtmll-transítional.dtd">
<html xmlns="http://www.w3.org/1999/<P
xhtml" lang="es" x m l :lang="es">
<head>
<meta http-equiv="Content-Type" <9
content="text/html; charset=iso-8859-l'' />
<title>Little Boxes - Inicio</title>
</head>
<body>
<!-- Parte visible de la página -->
</body>
</html>
5. Vuelve a guardar el archivo y ábrelo en un
navegador.
Com o puedes ver, en el navegador no se ve (ca­
si) nada, solam ente en la barra de título se m ues­
tra el título que le hem os asignado. A continua­
ción detallarem os una a una las líneas de esta es­
tructura básica.
1. La definición del tipo de documento:
<!D 0CTYPE html PUBLIC ...>
La definición del tipo de docum ento, que en este
ejem plo he dividido en dos líneas para facilitar
la lectura, debe aparecer siem pre en la primera
línea del código fuente. Le indica tres cosas al
navegador:
• Cóm o se llama el elem ento raíz del docu­
m ento (html)
• Qué versión de HTM L se utiliza (XHTM L
V I.0 Transitional)
• Dónde se puede encontrar el libro gram ati­
cal correspondiente (la URL)
Si no se indica ningún DOCTYPE o falta la URL
que hace referencia a la gram ática, algunos na­
vegadores entran en el llam ado m odo quirk
("M odo chapuza", véase la pág. 83), lo que en
determ inadas circunstancias puede tener conse­
cuencias drásticas para el aspecto de la página.
2. El elemento maestro: <html>
Con html se introduce el elem ento raíz anuncia­
do en el DO CTYPE, del que dependen todos los
dem ás elem entos de la página web. htm l crea un
cuadro (invisible) que contiene el head y el body y
todos los dem ás elementos.
¿Raíces o maestros?
En m uchas docum entaciones H TM L (incluido
SelfH TM L) html se considera un elem ento raíz.
Sin em bargo vo prefiero la denom inación ele­
mento maestro, ya que todos los elem entos
HTM L de una página web derivan directa o
indirectam ente de html.
El espacio de nombres XML
El añadido xm lns="http: //www. w3 .org/1999/
xhtml" define el llam ado espacio de nom bres
XM L, cuya m isión es garantizar la unicidad de
los nom bres de atributos v elementos. Por el
m om ento no es realm ente im portante com pren­
der qué es y qué im plicaciones tiene. Esta indi­
cación en XHTM L se incluye por m otivos de in­
tegridad.
El atributo universal lang: lang=uesMxml:lang="es"
El atributo lang indica el idioma en el que está
escrito la página (es = español), lang es lo que se
considera un atributo universal, es decir, que se
puede utilizar en m uchos elem entos H TM L. En
el futuro lang se sustituirá por xm hlang, aunque
algunos navegadores actuales todavía n o son
com patibles.
En pocas palabras: si definim os un idiom a para
un elem ento H TM L con lang, tam bién debería­
m os incluir xm hlang. A unque resulta pesado, no
suele utilizarse tan a menudo.
3. La introducción: <head>
Entre <head> y </head> encontram os una especie
de encabezado o introducción de la página web,
que no se m uestra en la ventana del navegador y
que contiene datos sobre el propio docum ento
que analizarán los navegadores o m otores de
búsqueda. Los elem entos m ás im portantes del
encabezado son meta y tifie.
 Así funciona HTML 11

Información sobre el documento: <m eta ...> | ***** samas asaa* fraata &&& «*»>
En los m etadatos es posible incluir distintas ins­ (jOOOlC ti? 1j&Wtttrfr
Cy Sv'-fcjvrM 4S‘«V9k O Ü í»
trucciones útiles para senadores web, navegado­ La w ¡ * b a e c W r t V M * » *MO<w aBtoWe t i * ¿M ®* !<UJ * * * * « « •

res web y robots de m otores de búsqueda, aun­ QsmsmMsm

que el núcleo de la estructura básica es única­ mmmmmmmm '?*svd.«j3
mente el m etadato sobre el conjunto de caracte­ %&&**$££&&&
’Ao&cMVHf, 49 £?A W an > ^ í«íi ¿ A p * •» 3*
•V.J* &trr¿¡ y 20} «.* «99 al ¿V-ÍO
res. >«*■«*•■>•• 1 ■Zz&á# áxtXÍK-Á^

El meta-elemento de la estructura básica le indica Pxprai !*c,4Xfj 12 "G««4<*¿»43SV s mA-Z4CtV,«ic*tr&at

: * « t&swx ta&otu&p Oí
"■J■"■■'■-UU u i
jjit'iu.i»inm.■■i»"* '
al navegador que para este documento debería
utilizar el conjunto de caracteres i so -8859-1, el Pwq3W3ft.iiie.aagg
EXftKK A< coMtMteíftn i WftQCMa ru
MafeX
conjunto norm al para idiomas de Europa occi­
dental. N orm alm ente el navegador ya tiene este <•íí? « k 5í í 49 «üs **,■ • á* <-ao
te 40 p/ omxn <{■* * fvuí S« < w -
inform ación al adquirir el código fuente del ser­ ■..ni'•juí'Wwwimnj ) S&AKfci
vidor w eb, pero si por algún m otivo esto no ocu­
F/g. 3: Búsqueda en Google de "documento sin título"
rre (porque la página esté alm acenada de forma
local, por ejem plo), este meta-dato del head le El título estándar del apreciado editor Macro­
ayudará. media Dream w eaver es "D ocum ento sin título",
y tal com o demuestra esta búsqueda en Google,
Un dato sobre conjuntos de caracteres se ha utilizado en m ás de un m illón de páginas
web españolas.
Si el térm ino "conjunto de caracteres" no te
dice m ucho, en la web de SelfHtm l encontra­
4. El contenido de la página: <body>
rás una buena explicación (por desgracia esta
Después del encabezado sigue el cuerpo (de tex­
página sólo está en francés):
to), en inglés body. Todo lo que se encuentra en­
http://fr.selfhtml.orq/internationalisation/ tre <body> y </body> se m ostrará en la ventana
del navegador. Y para utilizarlo m ás adelante, es
En español, puedes consultar la Wikipedia:
recomendable añadir una ID única al body:
http://es.wikipedia.org/wiki/ —— :—---- —rr-""7":"v ■-- "—:■11 ---
Conjunto de caracteres Tarea: asignar una ID para body
1. Com pleta el tag inicial de body com o si­
El nombre de la página: <title>
gue:
title es probablem ente el elemento HTM L más
subestim ado y contiene un texto breve que apa­ cbody id = "in ic io ">
rece en distintos lugares: 2. Guarda la página y ábrela en un navega­
dor.
• En la barra de título del navegador y en las
listas desplegables de los botones adelante y
En el navegador no cambiará nada, pero utiliza­
atrás
remos este ID en la página 55 y 77 para mostrar
• C om o propuesta de nombre para los favori­
la página en la que se encuentra el usuario.
tos o m arcadores (Bookmarks)
• En las listas de resultados de los motores de
búsqueda com o enlace resaltado
Datos de interés sobre elementos
Un buen título debe ser corto y describir la pá­
gina web, aunque no la estem os viendo, "infotec- HTML
tos.d e:: Inicio" es m ejor que " Bienvenidos" o " Do­ A continuación, un par de datos generales sobre
cumento sin título". En la estructura básica de la los elementos HTML.
pág. 9 aparece Little Boxes - Inicio.
El texto subrayado en azul en las listas de resul­ Los nombres de los elementos HTML derivan
tados de G oogle es el título de la página. La si­ del inglés
guiente búsqueda demuestra que todavía hay Los nombres de los elementos HTM L son abre­
m uchos diseñadores web profesionales que no viaturas de un térm ino inglés. C om o ya hemos
han com prendido realmente la im portancia de visto, un párrafo de texto norm al está rodeado
title: por <p> y </p>: la p significa paragraph, es decir,
párrafo.

r*
12 Así funciona HTML
Todos los elementos HTML tienen un tag de
inicio y de cierre
Los elem entos H TM L em piezan y term inan con
un tag. En este sentido, el tag final se diferencia
del inicial por una barra:
<p>Este texto es un párrafo.</p>
<p> le indica al navegador " Aquí em pieza un pá­
rrafo", m ientras que </p> significa "A qu í term i­
na un párrafo".
Elementos HTML: tag de comienzo, contenido
y tag final
He aquí un breve ejem plo para ilustrar los tér­
m inos elem ento y tag:
Elemento HTML (cuadro rectangular)
Fig. 4: Construcción de un elemento HTML
U n elem ento H TM L se com pone de tres partes.
En este ejem plo son:
• El tag de com ienzo entre signos m ayor y m e­
nor que: <p>
• El contenido: Este texto es un párrafo.
• El tag fin a l, tam bién entre signos m ayor y
m enor que: </p>
Los tres juntos constituyen un elemento. Los ele­
m entos son siem pre cuadros rectangulares y to­
dos los textos y gráficos de una página web se
incluyen dentro de dichos cuadros. Sin excep­
ción. También se les puede llam ar contenedores o
cajas. En inglés se les conoce com o box.
Anidación de elementos HTML: el primero
que se abre, el último en cerrarse
Cuando se anidan elem entos H TM L es necesario
respetar una regla básica esencial: el elem ento que
se abre prim ero es el último que se cierra. Un ejem ­
plo:
<p>Normal, <strong>negrita, <em>negrita y
cursiva</em></strong>. Otra vez normal.</p>
Los elem entos p, strong y em se abren y cierran
en orden inverso. Los cuadros creados por los
elem entos se anidan uno dentro de otro com o
m uñecas rusas: em se guarda dentro de strong,
que a su vez se encuentra dentro de p.
G ráficam ente tendría este aspecto:
Fig. 5: Un cuadro dentro de un cuadro dentro de un cuadro
Los elementos de bloque e inline se
comportan de distinta forma
Todos los elem entos son rectangulares, pero
existen distintos tipos de cuadros que se com ­
portan diferente. Los dos m ás im portantes son
los elem entos tipo bloque y en línea.
Los elementos de bloque pueden ser tan amplios
como sea necesario
Los elem entos de bloque se parecen a los form a­
tos de párrafo de Word:
• Los cuadros de un elem ento de bloque se
ensanchan autom áticam ente tanto com o sea
posible.
• Los elem entos siguientes se encuentran de­
bajo del cuadro en la línea siguiente.
Los elem entos de bloque contienen texto nor­
m al, elem entos inline y a veces otros elem entos
de bloque. Buenos ejem plos de ello son p, ui, oí,
ii así com o los títulos hi a h6.
Los elementos inline son tan anchos como su conte­
nido
Los elem entos inline se parecen a los form atos
de carácter de Word:
• El cuadro de un elem ento inline solam ente
es tan ancho com o su contenido.
• Los elem entos siguientes fluyen directam en­
te después del elemento.
Los elem entos inline no crean líneas nuevas y es­
tán supeditados a los elem entos de bloque. P u e­
den contener texto norm al y otros elem entos in­
line, pero no elem entos de bloque. A lgunos
ejem plos son em, strong, a e img.
¿Elem ento de bloque o inline?
En la referencia H TM L de SelfH TM L encon­
trarás m ás inform ación sobre si un determ i­
nado elem ento es de bloque o inline:
http://es.selfhtml.orq/html/referencia/elemente.htm
 Así funciona HTML 13

- El contenido body, que se m uestra en la

Recordatorio ventana del navegador
Repasem os aquí los puntos m ás im portantes de
• Algunos datos de interés sobre los elem en­
este capítulo:
tos HTML:
• Las páginas web se com ponen de cuadros
Los nombres de los elem entos HTM L
rectangulares que se pueden colocar unos
provienen del inglés.
junto a otros o superponerse:
- Todos los elem entos HTML tienen un
- HTM L crea los cuadros y los rellena de tag inicial y final.
contenido. - Un elemento HTML se com pone de un
- CSS da forma a los cuadros y al conte­ tag inicial, el contenido y un tag final.
nido.
• Los dos tipos m ás im portantes de elem entos
• HTM L es un "lenguaje de pegado de etique­ H TM L son bloque e inline:
tas de hipertexto". No es un lenguaje de
Los elementos de bloque crean un salto
programación ni un lenguaje de descripción
de línea y son tan anchos com o se pue­
de páginas y no se utiliza para diseñar.
da (div, h l a U6, p, ni, ol, li y o tr o s ).
• Toda página web tiene un arm azón HTML
Los elementos inline no crean un salto
que se com pone de las siguientes partes:
de línea y solam ente tienen la anchura
- DOCTYPE del contenido del elem ento (strong, em,
- El elemento m aestro html a, im g y otros)
La introducción liead con title y nieta-
elemento(s)
14 Los elementos HTML más importantes
Los elem entos HTM L más im portantes
En este capítulo conoceremos los elementos HTML más
importantes. Dividen la página web en secciones y crean
un documento HTML bien estructurado. Al final del capí­
tulo el lector tendrá dos páginas correctas a las que aplica­
remos estilo con una hoja de estilos del W3C.
En com paración con el inglés, el español o el
chino, H TM L es un lenguaje bastante sencillo.
Solam ente contiene unos 85 elem entos distintos,
y en este capítulo verem os y aprenderem os a
utilizar los m ás im portantes. El HTM L correcto
es el fundam ento de cualquier página web.
Dividir la página en secciones: div
div es un elem ento de bloque con el que es posi­
ble agrupar otros elem entos com o párrafos, lis­
tas y gráficos en una sección com ún (div = divi­
sión = sección).
Dicho de otra forma, div es un contenedor, una
caja, una box, en el que se pueden alm acenar
otras cajas para, por ejem plo, darles form ato a
todas más tarde m ediante CSS.
Cuatro secciones: encabezado, navegación,
texto y pie
Casi todas las páginas w eb tienen un encabeza­
do con un logotipo, una sección para los elem en­
tos de navegación, otra para el contenido y una
línea de pie. El siguiente equipam iento m ínim o
corresponde a esta estructura y se ha establecido
com o base para diseños sencillos:
• Encabezado con logotipo y eslogan
• Sección de navegación con elem entos de nave­
gación
• Sección de texto con texto e im ágenes
• Pie con espacio para la dirección, copyright,
etc.
Para poder distinguir las secciones en el código
fuente, se les asigna un nom bre único m ediante
el atributo id. En H TM L tiene este aspecto:
• <div id="encabezado"> </div>
• <div id="navegación"> </div>
• <div id="areatexto"> </div>
• <div id=npie"> </div>
La form a abreviada de "un elem ento con el atribu­
to id y el valor areatexto" es el signo # y la ID de la
sección, p. ej. ttareatexto.
Para otros diseños
La división en estas secciones constituye la
base para diseños sencillos a una o dos co­
lumnas. Los diseños m ás com plejos se pueden
regir por otro tipo de disposición. Volveremos
a hablar de ello en el capítulo dedicado a los
diseños de varias colum nas, a partir de la
pág. 79.
La sobrecubierta: üwrapper
M uchos libros tienen una sobrecubierta, una cu­
bierta adicional sobre las tapas cuya m isión es
protegerlas (y que se puede im prim ir de forma
fácil y asequible). N uestra página web tam bién
necesita una especie de sobrecubierta: una sec­
ción que abarque a todas las demás.
Esta sección no tiene ninguna relevancia desde
el punto de vista del contenido, pero es im pres­
cindible para m uchos diseños CSS. En m uchas
páginas w eb se le llama zvrapper, que en español
significa "sobrecu bierta". Concretam ente se lla­
m a <dív id= "wrapper" >, o abreviado üivrapper.
Creación de secciones con div
Crea las siguientes secciones al principio del bo-
dy de la página.
--------------------------------------------------------------------------
Tarea: dividir la página en secciones con div
l. Abre la página inicial index.html.
2. Añade el código fuente resaltado en negri­
ta:
<body id="inicio">
<div id="wrapper">
<div id="encabezado">
</div> <1-- Fin encabezado -->
<div id="navegación">
</div> <1-- Fin navegación -->
<div id="areatexto">
</div> <1-- Fin areatexto -->
<div id="pie">
</div> <!-- Fin pie -->
</div> <!-- Fin #wrapper -->
</body>
3. Guarda la página.
En la ventana del navegador no cam bia nada,
pero al diseñar con C SS las secciones con nom -
 Los elementos HTML más importantes 15

bres asignados m ediante id cobran más impor- De form a ideal, los títulos deben perm itir que el
tanda. lector pueda deducir el contenido de la página
web saltando de título en título. Así, por ejem ­
Los com entarios después de cada </div> ayudan
plo, un usuario puede decirle a su screenreader
a farilitar la lectura, aunque los tags de inirio y
que solam ente le lea los títulos de una página.
final estén m ás separados entre sí.
HTM L tiene seis elem entos distintos para títulos,
Representación esquemática de las desde ¡ti hasta /z6. La h corresponde a heading
secciones div ("títu lo "), y el núm ero a continuación el nivel de
Los elem entos div perm iten crear cuadros rec­ la estructura. h2 no significa "el segundo título
tangulares en la página web en los que es posi­ del texto", sino "u n título de segundo nivel".
ble alm acenar otros elem entos HTM L com o títu­ Así, puede haber varios títulos h2 en una misma
los y párrafos. Esquem áticam ente tendría este página.
aspecto:
No seleccionar el nivel del título por el
<bo<iy tó=*Tntcto*>
<drv td=Vrapperv»
tamaño de letra
<div id='encab€2ado'> En la mayoría de navegadores, los distintos ni­
veles de título se representan utilizando distin­
</div> tos tam años de fuente. Sin em bargo, deberíam os
<div ld=’ navegaaon‘ > evitar seleccionar un determ inado nivel de título
por el tam año de letra que se le asigna:
</dív>
¿r
<dtv id=*areatexto’ >
• El aspecto de un título y, con él, el tamaño
de letra, se pueden cam biar m ás tarde con
</div> : CSS.
<div id='pie‘ > • En H TM L solam ente estam os diciendo mo­
m entáneam ente que el texto m arcado es un
</div> título, y qué nivel de estructura tiene.
<«Y>
En pocas palabras: no em pieces tu página web
* booy>
p. ej. con <h3> sólo porque <hi> te parezca dem a­
Fig.6: Representación visual de las secciones creadas con div
siado grande.
Adem ás, todos los títulos son elem entos de bloque,
Títulos: h1 a h6 por lo que autom áticam ente son tan anchos co­
m o sea posible y tienen un salto de línea inte­
Una vez se m uestran en el navegador, los textos
grado.
de las páginas web no suelen leerse de forma
concentrada palabra a palabra, sino que se so­ Tarea: crear un título para la página web
brevuelan con la vista en busca de lo que
interesa. 1. Abre la página inicial index.htm l en el edi­
tor.
M ediante el uso de títulos, párrafos y listas po­
2. Coloca el cursor en el área de encabezado.
dem os ofrecer puntos en los que el usuario pue­
3. Rellénalo con el siguiente código resaltado
de fijar la vista en su recorrido por el texto.
en negrita:
Uso de títulos <div id="encabezado">
A unque en la clase de lengua no apreciases de­ <hl>Little Boxes</hl>
m asiado el térm ino ''estructura", deberías apli­ </div>
car títulos en las páginas web que crees. Los títu­ 4. Guarda la página y ábrela en un navega­
los estructuran la página y despejan el texto dor.
desde el punto de vista óptico.
El texto se m uestra grande y en negrita en la
ventana del navegador. No es bonito, pero es un
título.

r
 16 Los elementos HTML más importantes

Párrafos: p de paragraph
El elem ento H TM L que probablem ente más se 1. Com pleta el areatexto de la página de
utiliza es p, que significa paragraph, es decir, pá­ ejem plo con el siguiente código:
rrafo. Cualquier párrafo de texto norm al empieza <div id="areatexto”>
por <p> y term ina por </p>. <h2>Inicio</h2>
................................................................................................ i— — .-------------------------------------- — .—

Tarea: crear un párrafo de texto normal <p>Las páginas web están compuestas de
1. Com pleta la página de ejem plo con el si­ <strong>cuadros rectangulares</strong> que
guiente código resaltado en negrita: se pueden colocar unos junto a otros o
superponer entre ellos. Todo lo que sea
<div id="encabezado">
redondo es un truco, un gráfico o ambas
<hl>Little Boxes</hl>
cosas.</p>
<p>Diseño de páginas web con CSS. Funda­
mentos .</p>
</div> <p>Los siguientes pasos muestran el camino
desde la creación de las <em>cajas</em>
2. Guarda la página y ábrela en un navega­
hasta la <em>página web</em>
dor web.
terminada:</p>

p es un elem ento de bloque y no puede contener

ningún otro elem ento de bloque, ni siquiera </div> <!-- Fin #areatexto -->
otro p. 2. G uarda la página y ábrela en el navegador.

Distancia entre los títulos y párrafos

La m ayoría de navegadores añaden una de­

Cada navegador tiene una hoja de
term inada separación antes y después de los
títulos y párrafos. De m om ento no intentes estilos integrada
elim inarla. No hay forma de hacerlo en Este es el aspecto actual de la página de inicio:
H TM L, es m ucho m ás fácil hacerlo después
O lHUefcú.ur* haúo WsrKta > rrefo» _ — X
con CSS. ArehMc §&*• ve.* Marcadores Ar&u
&
O íc co a a » ! 1 fr m * -Xcv.vmmo ¿e ¡ i Ií 5> S * v *m * »

Resaltar texto: strong y em I J t t l e B o xes

Los elem entos strong y em están pensados para D í k ó c de p ág ao s w eb c o c C S S F an d am en rc
resaltar texto. A m bos son elem entos inline, por lo
que solam ente son tan anchos com o el texto que Inicio
contienen y no crean ningún salto de línea: Las piernas w eb están ccaupoeáas de c u i m r e c i u g s U r a que se puedes c n io o r a w
jyato a o íro s o soperp^fwr eotr « S o s Todo b que sea re c h á i s es un truco. <si fráóco o a r c r o

• strong significa m uy resaltado y por lo general cosas

los navegadores lo representan com o negri­ Los sip»n*** pasos moesaan <Hcjtnirw 4 e*áz te crraoac de las a& ss hasta U págin a
ctnoioada.
ta.
• Por el contrario, em significa em phasize, enfa­
tizar. em se suele representar en cursiva. Fig. 7: index.html con títulos, párrafos y resaltados

Com o regla de oro, utilizarem os strong para re­ Com o se aprecia en la ilustración, los elem entos
saltar el texto ya antes de la lectura y em cuando de la ventana del navegador ya tienen cierto
queram os que el texto resalte durante la lectura. formato:
• Los títulos están negrita y son grandes
• Entre párrafos hay líneas en blanco
• strong es negrita y em cursiva
 Los elementos HTML más importantes
En el código fuente no hem os indicado nada de
todo esto. ¿De dónde viene pues el formato?
La solución al enigm a es que cada navegador
tiene una serie de instrucciones de form ato inte­
gradas. Cuando le presentam os un título h l , éste
piensa "M m m h. h l es un título im portante. Aquí
no dice qué aspecto debe tener, así que lo pondré
bien grande y en negrita".
Este tipo de instrucciones de formato alm acena­
das suelen llam arse patrones de form ato en m u­
chos program as, o en inglés style. Un conjunto
de styles se conoce com o stylesheet y cada nave­
gador tiene su propia stylesheet integrada.
Con las Cascading Style Sheets podrem os crear
m ás tarde patrones de form ato que sobrescribi­
rán la propia del navegador. Todo lo que noso­
tros no definam os seguirá teniendo el formato
de la hoja de estilos del navegador.
Listas: viñetas y numeraciones
Las listas ordenadas y no ordenadas son un m e­
dio m uy im portante para estructurar texto en
una página web.
Viñetas: listas no ordenadas con ul y //
Una lista está com puesta por dos elem entos en
HTML:
• <ui> y </ui > identifican el principio y el final
de la lista con viñetas.
• < n > y < / i i > m arcan todos los elem entos de­
ntro de la lista.
ni significa "unordered list", es decir, "lista no
ordenada".
-------------------------------
Tarea: crear una lista con viñetas (no ordena­
da)
1. Crea la siguiente lista no ordenada debajo
de los dos párrafos y dentro de üareatexto:
<ul>
<li>Así funciona HTML</li>
<li>Elementos HTML importantes</li>
<li>Diseño con CSS</li>
</ul>
2. Guarda la página y ábrela en un navega­
dor.
17
<ui> le indica al navegador "A qu í em pieza una
lista no ordenada". Entre < i i > y < / i i > s e encuen­
tran los distintos elem entos de la lista antes de
que ésta term ine con </ui>. Y este es el aspecto
de la lista con viñetas en la ventana del navega­
dor:
♦ Asi funciona HTML Fig.8:
♦ Elementos HTML importantes Una lista no ordenada
♦ Diseño con CSS
Ten en cuenta que en HTM L no estam os indi­
cando nada sobre el tipo de viñeta que se debe
utilizar. El código fuente dice que el texto es una
lista con viñetas, pero no dice nada sobre su as­
pecto. De m om ento, de esto se ocupa la styles­
heet integrada en el navegador.
Listas no ordenadas como base para la nave­
gación
Las listas no ordenadas suelen constituir la
base para la navegación. En la pág. 19 creare­
mos una lista de navegación HTM L para las
páginas de ejem plos, a la que aplicarem os
form ato m ediante CSS a partir de la pág. 52
(horizontal) y pág. 76 (vertical).
Numeraciones: listas ordenadas con o /y //
Las listas ordenadas ("ordered lists") se suelen
conocer como numeraciones. Su construcción es
idéntica a la de las listas no ordenadas, pero ul
se sustituye por oh
<ol>
<li>Así funciona HTML</li>
<li>Elementos HTML importantes</li>
<li>Diseño con CSS</li>
</ol>
1 Asi funciona HTML Fig. 9:
Una lista ordenada
2. Elementos HTML importantes
3. Diseño con CSS
Con solo cambiar dos letras, la lista con viñetas
pasa a ser una num eración.
Listas anidadas
Las listas se pueden anidar. En el siguiente ejer­
cicio, observa que el segundo elem ento de la lis­
ta "Elem entos H TM L im portantes" se cierra des­
pués de term inar la lista anidada.
 18 Los elementos HTML más importantes

Listas anidadas y editores visuales

1. Com pleta la lista de la página de ejem plo Si utilizas un editor visual com o Frontpnge o
con e l código fuente resaltado en negrita: Dreamweaver, deberías com probar el código
<ul> que éste genera cuando crea una lista anida­
<li>Asi funciona HTML</li> da.
<1iElementos HTML importantes
M uchos editores visuales crean un código in­
<ul>
correcto para las listas anidadas. A unque en el
<li>Títulos</li>
navegador todo se ve bien, a la hora de asig­
<li>Párrafos y listas</li>
narles formato con CSS es m uy im portante
<li>Vínculos e imágenes</li>
que las listas estén correctam ente anidadas.
</ul>
</li> <!-- empieza ANTES de Elementos
HTML importantes --> Listas de definiciones: di, d ty dd
<li>Diseño con CSS</li> El ám bito de aplicación original de las listas de
</ul> definiciones son los glosarios, listas de entradas
2. G uarda la página y ábrela en el navegador. con térm inos y definiciones. A unque hay poca
gente que cree glosarios habitualm ente, las listas
Este es el aspecto de la lista anidada en el nave­ de definiciones nunca han sido dem asiado po­
gador. pulares.

Fig. 10; A diferencia de las listas ordenadas y no orde­

♦ Así fuodeoa HTML Una lista anidada nadas, las listas de definiciones no tienen ningún
♦ Beasentos HTML 2Bportaoies signo que las preceda, pero están form adas por
o Htnlos tres elementos:
o Párrafos y listas
<dl>
o VsnaÉos e imágenes <dt>Término a definir (definition (list)
♦ Diseño con CSS term)</dt>
<dd> Definición o explicación (definition
(list) definition)</da>
</dl>
Representación esquemática de la listas
anidadas Tendría este aspecto en el navegador:

Para com prenderlo mejor, he aquí un esquem a Témame a drónir ideéaaoa <ist) texm)
de las cajas de listas del ejem plo que acabam os l a de&BSML desínpdcfi s « p Scad óa (deáab& i (fet> defenfon)
de ver:
Fig.12: Una lista de definiciones

A unque a primera vista no es especialm ente

atractiva, podem os m odificar su aspecto con
CSS com o queram os, y en la era del CSS las lis­
tas de definiciones están viviendo un resurgi­
miento, porque dt y dd ofrecen estructuras útiles
en determ inadas situaciones, por ejem plo para
productos y descripciones de productos o para
pies de foto.

Más sobre las listas de definiciones

Encontrarás un tutorial (en inglés) m uy reco­

Fig. 11: Cajas de listas - representación esquemática de la lista m endable sobre este tipo de listas en M axDe-
anidada sign:
Cuando se aplica form ato con CSS es m uy im ­ http://maxdesign.com.au/presentation/definition/
portante m antener la anidación correcta de las
cajas en el código fuente HTM L para poder di­
señar determ inadas cajas a voluntad.
 Los elementos HTML más importantes
Hipervínculos: la peculiaridad de
la World Wide Web
Los hvperlinks o hipervínculos son el hiper de
hipertexto. Curiosam ente, en H TM L el elem ento
m ás im portante de todos no se llam a hyperlink o
link, sino sim ple y llanam ente a (de anchor, an­
cla).
Anatomía de un hipervínculo
Los hipervínculos siem pre siguen la m ism a es­
tructura:
<a href=" . . . " title=" . . . "s Texto visible</a>
Veámoslo en detalle:
• El elem ento para crear el hipervínculo se
llam a sim plem ente a.
• El atributo href es una abreviatura de Hyper-
text Reference y contiene la ruta de acceso a la
página web a la que se llegará tras hacer clic
en la m isma ventana del navegador. Suele
ser un nom bre de archivo o una URL com ­
pleta.
• El atributo t i t i e es opcional y, cuando se
deja el puntero del ratón sobre el vínculo en
la ventana del navegador, genera un peque­
ño bocadillo inform ativo.
• Entre <a> y </a> se coloca el texto que el na­
vegador resaltará por defecto en azul v sub­
rayado.
• </a> term ina el hiperenlace.
Tarea: crear un vínculo (con bocadillo)
1. Crea el siguiente código fuente en la pági­
na de ejem plo después de la lista anidada:
<p>Visita <a href ="http://infotekten.de11
title="infotekten.de - con ejemplos sobre
el cuaderno">mi sitio web</a> para más
información.</p>
2. G uarda la página y ábrela en el navegador.
Este es el aspecto que tendrá el párrafo con el
hipervínculo en el navegador:
Visita mi sitio j ^eb para más información
¿nfotekten de - con ejemplos sob'e el cuaderno j
Fig. 13: Un hipervínculo con el atributo tille
19
Elementos HTML: datos de interés sobre los
atributos
Los atributos com o h r e f o title son com plem entos
al elem ento H TM L y determ inan sus caracterís-
ticas concretas. Son, por así decirlo, la sal de la
sopa de etiquetas. Estas son las principales re­
glas gram aticales de los atributos:
• Los atributos siem pre se encuentran en el tag de
com ienzo, el tag final no cambia.
• Los atributos se separan entre sí m ediante
espacios.
• Todos los atributos tienen un valor.
• Después del nom bre del atributo le sigue sin
espacio un signo de igual y el valor entreco­
m illado: href =" contacto.html"
• Entre el nom bre del atributo, el signo de
igual, las com illas y el valor no debe haber
ningún espacio en blanco.
• Cuando en el tag inicial hay varios atributos,
el orden de los m ism os no altera el resulta­
do.
¿Queda claro? Para la inserción de im ágenes se
utilizan m uchos otros atributos.
Navegación: una lista no ordenada con
hipervínculos
Una navegación es en principio un listado de hi­
pervínculos, y por ese m otivo se suele codificar
com o lista no ordenada. El aspecto de la lista se
controla posteriorm ente m ediante CSS (véase
págs. 52 ss.).
— —— ——
Tarea: crear una lista de navegación
1. Com pleta la página de ejem plo con el có­
digo fuente resaltado en negrita dentro de
la sección de navegación:
<div id="navegación">
<ul>
<li id="navi01"><P
<a href="index.html">Inicio</ax/li>
<li id="navi02">cP
<a href ="contacto.html">Contacto</ax/li>
</ul>
</div> <!-- Fin de la sección de
navegación -->
2. Guarda la página y ábrela en el navegador.
C rearem os la página contacto.htm l al final de este
capítulo, pero ya podem os crear el vínculo a la
m ism a. M ás tarde necesitarem os las ID naviOl y
naviOZ de los dos elem entos de la lista para dar
form ato a la lista de navegación.
20
La sección superior de la página de ejem plo ten­
drá este aspecto en la ventana del navegador:
^ ** K*B
b al coatcadc
L ittle B oxes
Dfeefcó*p4f»&-ríeCS6 ?-judatE«tcs
Inicio
la s pijSias T í b íJKín cc-tcpuciías de eazéiav r« era «jalare í m» sí p«ajíen íde <K3f 3!K=í TCBSK-3
o t a * e Mp^fpear» nar Twío-tc qw r-fdWKfe-*? aa tretCMSi grafito o aafc*< í&sas.
F/g. 74; La página de ejemplo con una lista de navegación
El aspecto de la lista de navegación se puede
m odificar m ás tarde m ediante CSS (Capítulo 0,
pág. 52).
Skip-Link (1): un hipervínculo para saltar la
navegación
En inglés, skip significa "saltar", y de ahí que un
hipervínculo que salte a otro punto de la misma
página web se llam e tam bién skip-link.
Los usuarios que lean la página tienen que pasar
previam ente por toda la navegación antes de
llegar al contenido propiam ente dicho. Sin em ­
bargo, con un skip-link el usuario puede saltarse
la navegación.
El punto de la página al que salta el hipervíncu­
lo se conoce como punto de ancla y en el código
fuente se identifica m ediante el atributo id. Co­
m o destino del salto del hipervínculo se utiliza
una ID, en este caso üareatexto.
1. Com pleta el código de la página de inicio
con la línea resaltada en negrita:
<body>
<div id=,'wrapper” >
<div id=”encabezado”>
<a href = "#areatexton
class="skiplinkn>Ir al contenido</a>
<hl> . . .
2. Guarda la página y ábrela en un navega­
dor.
El hipervínculo salta al elem ento HTM L con el
atributo id="areatexto". Si no puedes ver el salto
a la sección de texto, reduce el tam año de la ven­
tana del navegador tanto com o sea necesario. Si
Los elementos HTML más importantes
se desea, en la hoja de estilos el skip-link se
puede ocultar m ás tarde para m ostrarlo en un
navegador visual (véase pág. 33).
En la página de ejem plo no sería necesario un
▼(p* Ü!F skip-link porque la navegación es extrem ada­
m ente corta, pero es una cuestión de corrección
incluir un skip-link en cualquier página que
quiera ser accesible. Y ahora ya sabes cóm o
hacerlo.
El atributo class
En el ejem plo hem os utilizado el atributo
class. Volveremos a hablar sobre la im portan­
cia de class en el capítulo sobre selectores CSS,
a partir de la página 37.
Skip-Link (2): hipervínculo para volver arriba
Si tenem os una página muy larga y queremos
ofrecer a los usuarios un enlace para "volver
arriba", podem os utilizar la m isma técnica:
• [<a h ref= ”#wrapper”>Arriba</a>]
Este vínculo salta al elem ento <div
id=nwrapper" > de la página de ejem plo, situado
justo debajo de body. Los corchetes son solam en­
te decorativos.
Ruta de acceso a la imagen: img
El elem ento para insertar una im agen se llam a
img, abreviatura de image. No existe un tag de
cierre </img>, en su lugar se utiliza un espacio en
blanco, una barra y el signo mayor que. Es una es­
pecie de tag final integrado:
<img s r c = "lo g o .g if" a l t = " L i t t l e Boxes”
width=”222" height="32" />
El tag <img> en el código de la página solam en­
te contiene la ruta de acceso al archivo de im a­
gen. Así pues, el gráfico y la página se m antie­
nen com o archivos separados -a diferencia de lo
que ocurre con las páginas de papel.
Los atributos de img
img puede utilizar m uchos atributos distintos.
<P Este es un breve listado de los m ás im portantes:
• src="nom breim agen.jpg"
El prim er atributo y el m ás im portante de
<img> son las letras src, que significa source
o "fuente", src incluye la ruta de acceso al ar­
chivo gráfico. Solam ente el nom bre de ar­
chivo significa que el gráfico se encuentra en
la misma carpeta que la página web.

• alt="Texto alternativo"
La introducción de un texto alternativo es
obligatoria y dicho texto se m uestra cuando
la im agen (todavía) no se puede mostrar. Si
uno no desea introducir un texto alternativo,
basta con escribir alt= '" '.
• w idth y height: altura y anchura de la im a­
gen
zvidth y height son dos atributos im portantes.
Le indican al navegador el espacio que debe
reservar para la im agen antes de cargarla.
• title="Texto para el bocadillo inform ativo"
El atributo title es opcional y en el caso de
los hipervínculos perm ite m ostrar pequeños
bocadillos inform ativos amarillos cuando el
cursor se coloca sobre la imagen. Internet
Explorer utiliza para ello -m ien tras no se
haya definido ningún atributo title- inco­
rrectam ente el valor del atributo alt.
im g se com porta com o un elem ento inline y no
tiene ningún salto de línea integrado.
En el siguiente ejercicio rellenarem os la página
de ejem plo con un sim ple gráfico que ocupará el
lugar del texto "L ittle B oxes" como título h l. En­
contrarás la im agen del ejem plo en el suplem en­
to del cuaderno.
Tarea; vincular un gráfico como título
1. G uarda la im agen en la misma carpeta en
la que se encuentra la página de ejem plo
index.html
2. Cam bia el código fuente de la página:
< h l>
<img src*="logo.gif " alt="Little Boxes"
width="222■ height*"32" />
< / h l>
3. G uarda la página y ábrela en el navegador.
I«t*V’fkwn rw«*.;v
¿rcftivc íanar -j\i m:,social gs'c&Scs*;
^ ’ S¡B íS ^ *+) 'iSF
little b d X E S ------
Disefic d e psagui w eb co a C SS Fundamento)
*
♦Cowws
Inicio
L « páa r*a* v.¿b c:Ln. w<jn¡p«eim de cuadro* rtC M igabres our i s puedas coloca unos tínU a
oocrt o »«j>erpooo coa dk>s Todo lo ^ sea tcdoudo s i ucs tr ic o ir. grá&o o acaban co±as
Fig. 15: index.html con una imagen como título hl
Los elementos HTML más importantes 21
¿Una imagen como título?
Si la im agen del ejem plo no se m uestra, m uchos
navegadores m ostrarán el texto alternativo com o
título h l. De este m odo el logotipo seguirá sien­
do reconocible com o título, aunque la im agen no
sea visible:
F ig . 1 6 :
Ir al c ootendo
El texto alt de la imagen
se representa como título
Little Boxes
h l en algunos navegado­
Diseño de página; web con C S S fundamentos res
* COQfrCKi
V incular im ágenes decorativas por CSS co­
mo imagen de fondo
A la hora de vincular gráficos se aplica una
regla básica: las im ágenes que sean relevantes
desde el punto de vista del contenido, com o el
logotipo del ejem plo, deben vincularse m e­
diante img en el código HTM L. Por el contra­
rio, las im ágenes m eram ente decorativas se
vinculan m ediante CSS com o gráfico de fondo
(véase pág. 48).
Otros elementos útiles
Esta breve introducción a H TM L no pretende ser
una guía exhaustiva y solam ente hem os repasa­
do los elem entos m ás im portantes. Para term i­
nar, presento a continuación un par más de ele­
m entos útiles. A partir de la pág. 57 encontrarás
una introducción a la creación y el diseño de
form ularios.
Nueva línea: < b r/>
Si deseas insertar un salto de línea en algún pun­
to del texto, puedes crearlo con br, que significa
*.vCi break ( " rotura"):
• <br /> (br - espacio en blanco - barra)
br es un elem ento vacío, un elem ento sin conteni­
do. De forma parecida a img, el tag de cierre está
integrado en el tag inicial con un espacio en blanco
y una barra.
Uso m oderado de los saltos de línea
Se recom ienda hacer un uso m oderado de
<br />, ya que el flujo de texto en las páginas
w eb se ve influido por m uchos factores y, a
diferencia de las páginas de papel, el autor no
puede controlarlo.
22 Los elementos HTML más importantes
address para direcciones
Si querem os m ostrar una dirección en una pági­
na w eb, podem os utilizar el elem ento <ad-
dress>, porque se trata de uno de los pocos ele­
m entos H TM L sem ánticos que perm ite deducir
por su nom bre lo que el contenido significa, ad­
dress se escribe en inglés, con doble d y doble s.
Tarea: crear una dirección (con salto de línea)
1. A bre la página de ejem plo index.htm l.
2. Com plétala con el siguiente código en el
apartado pie:
<address>
little boxes &middot; Calle cuadro, 12 <P
&middot; 02943 Boxland
<br />
Tel 035774 34711 fcmiddot; Fax 03574 34712
</address>
3. G uarda la página y ábrela en un navega­
dor.
Por cierto, &middot ; crea un pequeño punto re­
dondo que se coloca en el centro de la línea. La
m ayoría de navegadores representan el elem en­
to address en cursiva, pero podem os m odificarlo
posteriorm ente m ediante CSS (pág. 31).
blockquote y cite para citas
C om o el nom bre ya nos indica, blockquote es un
elem ento de bloque para citas. El elem ento está
especialm ente indicado para citas largas. A de­
m ás, el texto dentro de blockquote se debería ro­
dear de otros elem entos de bloque p. ej. p.
Con ayuda del elem ento inline cite podem os
m arcar citas breves en el texto o, com o en el
ejem plo siguiente, indicar la fuente de una cita
al final del bloque de la cita:
<p>El siguiente párrafo es un bloque de cita
con indicación de la fuente:</p>
<blockquote>
<p>üd puede resaltar citas de otros autores
en un párrafo propio con formato diferente
(por lo general con sangrías).</p>
<p>En este caso se trata de una marcación ló­
gica del contenido. Como estos párrafos son
formateados, lo determina el navegador. La
norma es hacer visualizar tales párrafos de
forma resaltada y diferente del texto adicio­
nal .
<cite>(Fuente: <a href=¿P
"h ttp:// es.selfhtml.org/html/text/
zitate_adressen.htm">SelfHTML</a>)</cite>
</p>
</blockquote>
Código 1: Ejemplo de uso de blockquote
Este es el aspecto que tendría en el navegador:
Archivo Y&f Hi£to'¡a! Herfarp.ten^ss Ayuda
0 Q?
-0 v* O h tm l trtKfcqu ©
O tros elementos H T M L : blockquote
EJ siguiente párrafo es un bloque de c ía ero rc k a o ó n de la foeote
Ud puede resaltar atas de otros aurores en un párrafo propio coc
formato díereote (por lo general con sangras).
En este caso se trata d e una marcación Jopea del •:enterado Como
estos párrafos son formateados, lo detm ona d oovegedor La norma es
hacer visuafaar tales párrafos de forma resaltada y dfereea? dd texto
adtdooal rF ü fr¡t«: StlfH TM L)
TerrnnaCO
Fig. 17: Blockquote con 2 párrafos y cite
La m ayoría de navegadores representan block-
quute con sangría y cite en cursiva.
span es un elemento inline neutro
Ya conocem os el elem ento de bloque neutro div
para agrupar otros elem entos, span es un ele­
m ento inline neutro que nos perm ite m arcar un
determ inado texto dentro del flujo de texto,
aunque no se m uestra de form a distinta en la
ventana del navegador:
<hl><span>Este texto está rodeado por
span</span><hl>
A unque span no suele utilizarse tan a m enudo
com o div, al aplicar form ato con CSS a veces tie­
ne sentido m arcar determ inados pasajes de texto
con span, y por eso creo que vale la pena m en­
cionarlo aquí. Al igual que div, span tam bién sue­
le utilizarse junto con los atributos id y class.
Tarea: rodear una palabra con span
1. M odifica el código fuente de la página co­
mo sigue:
<p>Diseño de páginas web con CSS.
<span>Fundamentos.< /spanx/p>
2. G uarda la página.
Cuando veas la página en el navegador no apre­
ciarás ningún cam bio de aspecto, pero es posible
que necesitem os ese span m ás adelante (por
ejem plo en la pág. 69).
Character Entities: caracteres especiales
C uando un traductor no sabe el sentido exacto
de una palabra, suele "esp añolizarla", y proba­
blem ente así fue com o entities se convirtió en en­
tidades. ¿Entidades? Caracteres especiales.
Las páginas web pueden conllevar problem as de
todo tipo con los caracteres especiales. Por eso,
los caracteres especiales suelen escribirse en el
 Los elementos HTML más importantes 23

código H TM L de una forma especial: em piezan

por &, seguido de un nom bre establecido y ter­ Las tablas no están prohibidas
m inan con un punto y com a: D urante m ucho tiem po, las tablas fueron la úni­
• &euro; ca opción disponible para posicionar objetos en
una página web. C SS ha tom ado el relevo, y
En el navegador, &euro; se sustituye por el ahora las tablas se utilizan para su propósito ini­
sím bolo del euro, €. Cuando el navegador ve el cial: para representar datos en form a de tabla.
signo &, sabe que "aq u í em pieza un carácter
especial". Después espera encontrar un código Una tabla sencilla: table, tr y td
definido, com o euro. El punto y com a m arca el Solam ente se necesitan tres o cuatro com andos
final del carácter especial. En la siguiente tabla H TM L para crear una tabla sencilla:
se detallan algunas de las entidades m ás
im portantes: • La tabla: table
El com ienzo y el final de la tabla se m arcan
C arácter En el código Inglés
con ayuda de los tags <table> y </table>.
< &lt; less than
• Las filas de la tabla: tr
> &gt; greater than
tr significa table rozo. <tr> y </tr> identifican
& &amp; ampersand el principio y el final de una fila.
" &quot; quotation marks • Las celdas de la tabla: td
€ &euro; Euro td significa table data y contiene los datos de
© &copy; Copyright la tabla. <td> y </td> lim itan las celdas de la
....
&reg; Regisiered Trademark tabla. Todos los caracteres de texto y gráficos
• &middot; Punto centrado en vertical de la tabla se colocan entre <td> y </td>.
Espacio en &nbsp; Non breakable space Las tablas no son com plicadas, pero es fácil per­
blanco prote­ der la visión de conjunto al analizar el código
gido
fuente. Cuando se crea una tabla es recom enda­
Tab. 1: Los caracteres especiales más comunes ble utilizar siem pre un sangrado correcto para
En la siguiente tabla se m uestra la codificación facilitar la lectura del código. M ientras se edita
de algunos acentos y caracteres del español: una tabla, es posible hacer visibles las líneas de
los bordes utilizando el atributo border:
C arácter En el código In g le s
<table border="l">
A &Aacute; A acute
<tr>
á &aacute; a acute <td>Fila 1, Celda l</td>
&ntilde; n tilde <td> Fila 1, Celda 2</td>
ñ </tr>
U &Uuml; U umlaut
<tr>
ü &uuml; u umlaut
<td>Fila 2 , Celda l</td>
Tab. 2: Acentos, diéresis y eñe en HTML <td> Fila 2, Celda 2</td>
</tr>
M ás caracteres especiales </table>
Código 2: Una tabla seticilla con dos filas y dos columnas
Encontrarás un listado de entities en esta pá­
gina en español, con los acentos y caracteres En el navegador, la tabla tendrá este aspecto:
españoles resaltados: Fig. 18: Tabla con dos
F ia L Celda 1 F3a L Celda 2 filas y dos columnas
http://www.iQnside.net/man/html/entities.php
|F3a 2, Celda 1 F2a 2, Celda 2j
24 Los elementos HTML más importantes

Tam bién existe el elem ento <th> de table heading, </tfoot>

que se puede utilizar para la fila de título de la <tbody>
<tr>
tabla. <th> se com porta exactam ente igual que
<td>tbody Fl, Cl</td>
<td>, con la diferencia de los navegadores sue­ <td>tbody Fl, C 2 < / t d »
len m ostrar el contenido de la celda resaltado en </tr>
negrita y centrado. <tr>
<td>tbody F2, Cl</td>
En el código, las columnas se encuentran una <td>tbody F2 , C2</td>
</tr>
debajo de otra
</tbody>
La dificultad de m antener la visión de conjunto </table>
de las tablas radica en que la representación del Código 3: Tabla sencilla con encabezado, pie y cuerpo
código no coincide con la representación en el
navegador. La tabla tendrá este aspecto en el navegador:

M ientras que en el navegador una tabla se com ­

fhead F ilal. Columna 1 tbead F ila l. Columna 2
pone de filas horizontales y colum nas verticales,
en el código solam ente existen filas horizontales tbody F L C1 tbody F 1, C2
(fr) y celdas (td). No existe ningún elem ento para tbody F 2 3C ! tbody F 2 . C 2
crear colum nas, ya que éstas derivan de la canti­
dad de celdas de cada fila: tfoot tfoot

• En el navegador las colum nas de una tabla
están una junto a otra.
• En el código, las colum nas están una debajo
de otra.
Encabezado, pie y cuerpo de una tabla
Fig.19: Tabla sencilla con encabezado, pie y cuerpo
Si deseas obtener m ás inform ación sobre las ta­
blas, encontrarás una referencia com pleta en
SelfHTM L:
http://es.selfhtml.orq/html/tablas/index.htm

En H TM L es posible dividir una tabla en las sec­

ciones lógicas de encabezado, pie y cuerpo. Ello
conlleva nuevas posibilidades:
• Las secciones lógicas de una tabla se pueden
seleccionar fácilm ente en una hoja de estilos,
para aplicarles distintos formatos.
• Al representar una tabla larga, el navegador
podría repetir en cada página los títulos de
las colum nas en el encabezado de la tabla.
Los elem entos para la división lógica se llaman
(en riguroso orden de aparición) thead, tfoot y
tbody. En este sentido, es curioso observar que la
analogía no coincide con el orden anatóm ico:
cabeza, pie, cuerpo.
¿Todo correcto? Comprobación
de HTML con el validador
Para term inar el trabajo en el código HTM L, de­
beríam os dejar que lo verifique un experto en
gram ática para com probar que los cuadros
H TM L estén correctam ente estructurados. Po­
dem os hacerlo en la siguiente dirección:
• http://validator.w3.orq/
Si no hay ningún error en el código, se mostrará
el siguiente aviso:
WT ¿a M artcup V a ltd a tlo n S e rv ic * 7*

En el encabezado y el pie se incluyen datos so­ RaKitC fV -íí

bre las colum nas de la tabla, por ejem plo los tí­ fB r ******
Eaco&ng
tulos, m ientras que en el cuerpo se colocan los DoeJyp* XK^bt' O
R e « Mamaeoece tr. •>.a í ’ s W —
datos propiam ente dichos de la tabla.
Nota ’X W L s R rtte
<table border="l">
<thead> This P a g e í$ Vate) XHTML t O T ra n sfto n a J’

<tr>
Fig. 20: El validador opina que todo está correcto
<th>thead Filal, Columna l</th>
<th>thead Filal, Columna 2</th> De esta forma queda certificado oficialm ente
</tr> que el código HTM L de la página no contiene
</thead>
ningún error gram atical y ya podem os em pezar
<tfoot>
a darle formato.
<tr>
<td>tfoot</td>
<t.d >h foot*< /td >
</tr>
 Los elementos HTML más importantes 25

Después
CSS para probar: los W3C core *■ 1■ ■1
¡¡•(IV.-C. íCiti' KjUiM nc-nt/vot* An*ai <
styles ______ ^ 1 ’ /^' W .......
El W 3C ha creado ocho hojas de estilos que rv í> « um U stfAK» 0 0
~ r . r n - x . t t - ---; fes®»'--'-*-''-*
perm iten aplicar form ato m ediante C SS a pági­
I r a i c o t r t r o ld o
nas web de ejercicios o de dem ostración, sin ne­
cesidad de tener que escribir ni una sola línea de
CSS. littie b n x e s
EHacij d e p á g in a * web con CSS. F u n d a m e n to s.
-------------------------------------------------- _ -------„------------------------------------------------- 5--------------------- —

Tarea: aplicar formato a las páginas con el core •Inltu»

• Contacto
style Traditional
1. Abre por ejem plo index.htm l en un editor. Inicio
2. Inserta el código resaltado en negrita en el L a * p á g in a s « f b e stá n e o m p u e ita s d e cuadro* rectangulares
head de la página: q u e s e pu ed en c o lo c a r u n o s ju n t o a o tro s o su p e rp o n e r e n tr e llo s. (£
T o d o lo q u e s e a red o n d o e s un tru c o , u n g rá fic o o a m b a s c o sas
<head> L as sig u ien te s p a so s m u estra n e l ca m in o d e sd e la cr e a c ió n de

la s c a j a s lia s ta la p a g in a w e b te rm in a d a :

<link <P • Asi fu n cio n a H T M L

• E le m e n to s H T M L im o o rta n te s
href="http://www.w3.org/StyleSheets/Core/<P L
______________
Traditional" rel="stylesheet" & Trenada_________________________________________________________ r

type=ntext/ess" /> Fig. 21 y 22: Primero la página sin form ato, después con la hoja de
</head> estilos tradicional del W3C
3. Guarda la página y ábrela en el navegador. H ablarem os detenidam ente del elem ento HTM L
¡ink al principio del siguiente capítulo. Vincula
Si todo ha funcionado, la página debería haber una página w eb con una hoja de estilos, y en es­
cam biado de aspecto: te caso la hoja se encuentra en Internet y se lla­
Antes ma Traditional.
Sin em bargo, adem ás de Traditional podem os
i" «ji-Ciíall Ar*c± probar otras variantes:

(.4 - ’ O ** ' Cí é urx«fcwt O • M idnight, Ultramarine, Chocolate, Oldstyle,

M odem ist, Steely y Szviss
ü ttiB b n x E S Para probar, basta con sustituir en el elem ento
pÁfflun w A roo C S S F uüdamtTito •- link la palabra Traditional por el nom bre deseado.
•íaoK Guardar. Ver. Disfrutar.

Inicio Un deleite para los ojos: CSS Zen Carden

La¿ p¿iai= \*cb ííú b ccsjptettai ó ; csxltos ce«4M0lbeea qae « pacden c d o c x m o- a atsvt
o «Cr eK&i Totolo qa* se¿;¿<l2odc rs uo buco, W atatko o ambü
Recom iendo a cualquiera que eche un vistazo
p*iOiiuic«rat d-canaac deide ia ctcuaos de las Cíyu; b t r a lí 5cí/?B7 wv? tósauaan a C SS ZenGardert para ver todas las posibili­
• A j í U ocíasi H M . dades de CSS. D ifícil de creer, pero cierto: to­
• B e n ia x o i HTML icapcaaare*
o r*uie‘= das las variantes se basan en el m ism o archivo
• P o fia fe n y Satas
* Vueloseict^seae> HTML, lo único que cam bia es la hoja de esti­
• D ise é o c ce C S S
los:
V t » íbjsb o.*^ ; pmi asi» afoe*»adc«

L u is &6x*s CaiU cu a d ro.12 $121* Boxiana http://csszenqarden .com/

Tu tf/.’J* fb» 012H5Ó7&1
26 Los elementos HTML más importantes

Ya tenem os un m inisite de dos páginas con una

Página de contacto: de la página pequeña navegación. En el siguiente capítulo es­
al sitio tudiarem os las distintas form as para dar form a­
to a estas páginas.
Antes de que em pecem os a hablar de CSS en el
siguiente capítulo, necesitam os una segunda pá­
gina. La forma más fácil de crear la página de
contacto contacto.htm l es utilizando tu editor pre­
Recordatorio
ferido. Crea una copia con " A rchivo | Guardar A continuación, un recordatorio de m ás los pun­
com o" y m odifícala ligeram ente. tos m ás im portantes del capítulo:
• Al aplicar formato con CSS, la página w eb se
Tarea: crear la página de contacto
divide en distintas secciones con div.
1. A bre la página de inicio index.htm l en el • El texto de las páginas web norm alm ente se
editor. "sobrevuela" con la m irada. Debem os ofre­
2. Guárdala con "A rchivo |G uardar com o..." cer al lector sitios en los que descansar la
con el nombre contacto.html. vista: títulos, párrafos cortos, resaltados y
3. M odifica el título de la página: listas.
<title>Little Boxes - P á g i n a d e
• Utiliza títulos (de h l a h6) y selecciona el ni­
vel de título sin tener en cuenta el tam año de
contacto</title>
fuente.
4. M odifica la ID de body:
• Los párrafos de texto norm ales se incluyen
cbody i d = " p a g c o n t a c t o " > en un elemento p y el texto se puede resaltar
5. M odifica el título h2 en la sección de texto: utilizando strong y em.
<h2 >Contacto</h2 > • Los navegadores tienen una hoja de estilos
integrada que m ás tarde se puede sustituir
6. Elim ina el texto de la sección de texto. Más
por los estilos que crearem os nosotros m is­
tarde incluirem os aquí un form ulario de
mos.
contacto. M antendrem os la dirección del
• Las listas son un m edio im portante para or­
elem ento address.
ganizar el texto:
7. Guarda la página y ábrela en el navegador.
- Las listas no ordenadas (con viñetas) se
Listos. Este es el aspecto de la segunda página com ponen de ul y li
en el navegador: - Las listas ordenadas (num eraciones) se
-A ?'* raotocv ' irríc*
com ponen de ol y li
I ¿UHt r*¡wai Hsr:»SOftí nt*’V*íí<aa; - En las listas anidadas, el elem ento li se
I ‘ - ............................ — |
¿¡jjr * *•' cierra después de la lista anidada.
f* :^ ,T € í. i*»*-*»*»» - *«**» « k Q 'r '"
- Las listas de definiciones se com ponen
I r al contenido de di, dt y dd.
- Una navegación suele ser una lista no
littiE b o x e s ordenada con hipervínculos, cuyo as­
Diseño de p á gin a web con CSS. Fundamentes. pecto se determ inada m ediante CSS.
♦ ¡o ír le
• Los hipervínculos se crean con el elem ento a.
♦ C on tarlo
• Los atributos siem pre se colocan en el tag de
inicio de un elem ento.
Contacto • Las páginas web no contienen gráficos in­
Aquí va un farmuhurio d » oontacto. crustados, sino únicam ente la ruta de acceso
L ittle B o xes ■ C a lle c u a d re . 1 2 - 0 1 2 3 4 B o x ia n d
a los mismos.
T e l: 0 1 2 3 4 5 0 - 8 9 0 F a x : 0 12 3 4 5 6 7 S 9 * • En caso necesario, es posible forzar un salto
de línea con <br />.
• Para las direcciones se utiliza el elem ento
address, con dos d y dos s.

Fig. 23: Página de contacto con W3C Core Style Traditional.

 Los elementos HTML más importantes 27

• Para citas se pueden utilizar, entre otros, los

elem entos blockcjuote y cite.
• span es a los elem entos inline lo que div es a
los elem entos de bloque.
• Los caracteres especiales se llam an entities y
siguen el esquem a &abreviatura;
• Las tablas se utilizan para representar datos
de tablas.
• Es posible verificar la gram ática H TM L en
http://validator.w3.org
• C on Core Style de W 3C se pueden probar
las posibilidades de CSS sin tener que saber
nada de CSS.
28 Descubrir CSS: fuentes, colores e hipervínculos
D escubrir CSS: fuentes, colores e
hipervínculos
En este capítulo que se presentan las Cascading Style
Sheets, y se muestra cómo se pueden definir fuentes y colo­
res y dar formato a los hipervínculos.
CSS (Cascading Style Sheets) es un lenguaje crea­
do especialm ente para dar form ato a los elem en­
tos HTML.
Una hoja de estilos es un
conjunto de patrones de formato
¿Qué son exactam ente las Cascading Style Sheets?
Basta con echar u n vistazo a los distintos ele­
m entos para tener una m ejor visión de conjunto:
• U n style es u n patrón de form ato, una instruc­
ción de form ato alm acenada.
• Una sheet es una hoja de papel, una recopila­
ción.
Una stylesheet £s una recopilación de instrucciones
de form ato para elem entos HTM L.
¿Y cascading? Según el diccionario, una " casca­
d a" es, entre otras cosas, una "caíd a desde cierta
altura del agua de un río u otra corriente". Esta
definición es correcta pero no dice m ucho. Es di­
fícil aclarar el significado de cascading en este
m om ento, por lo que lo dejaré para m ás adelante
(a partir de la pág. 60).
CSS y las cajas HTML en la página
web
CSS da form ato a los cuadros rectangulares que
se crean con H TM L. Las posibilidades de formato
de CSS se pueden dividir en tres áreas:
1. Fuentes y colores: form ato del contenido de
los cuadros.
2. Distancias y bordes: form ato de los propios
cuadros.
3. Layout: m odificar la posición de los cuadros
en la página web.
Siguiendo este orden analizarem os CSS en las
próxim as páginas:
• En prim er lugar, el form ato de fuentes y co­
lores en los cuadros.
• D espués el form ato de las distancias y de los
propios cuadros (utilizando el llam ado m o­
delo de cajas).
• Y para term inar, el posicionam iento de los
cuadros en la página y la creación de dise­
ños de varias colum nas.
La primera stylesheet propia
En este apartado, crearem os una hoja de estilos
vacía, escribirem os un com entario en ella y la
vincularem os con las páginas de ejem plo in-
dex.htm l v contacto.htm l.
Creación de la stylesheet e inclusión de un
comentario CSS
En prim er lugar, crea un archivo vacío en el que
m ás tarde guardarem os las reglas CSS (= styles).
Tarea: crear una stylesheet y un comentario
CSS
1. Crea u n archivo v ad o con tu editor prefe­
rido.
2. G uarda el archivo con el nom bre little-
boxes.css, en la m ism a carpeta que los ar­
chivos HTML.
3. Inserta el siguiente com entario CSS en la
prim era línea del archivo:
/* Stylesheet para los ejercicios de
Little Boxes */
4. G uarda el archivo.
El nom bre de archivo debe respetar las reglas
habituales para nom bres de archivos de páginas
w eb (sin espacios, sin caracteres espedales y en
m inúsculas) y com o extensión se recom ienda
*.css.
A dem ás, el archivo debe estar realm ente vacío.
CSS es un lenguaje propio y los tags H TM L o es­
tructura básica H TM L no tienen cabida en él.
A diferencia de H TM L, los com entarios de CSS
se escriben entre / * y */ (barra asterisco - aste­
risco barra). Si tu teclado tiene un teclado num é­
rico, es m uy sencillo:
• La barra /corresponde al sím bolo de divi­
sión.
 Descubrir CSS: fuentes, colores e hipervínculos 29

• El asterisco * corresponde al signo de m ulti­

plicación, ju sto a su derecha. Definición de colores de fondo y
Al igual que en H TM L, los com entarios no se de­ de fuente
ben anidar. Dentro de un com entario no se debe El prim er paso será definir los colores de fondo
escribir ningún otro com entario. y de fuente para body y el "con tened or" <dív
id="wrapper">.
El vínculo entre HTML y CSS: link
En el últim o capítulo hem os vinculado los ar­ Color de fondo y de fuente para body y
chivos de ejem plo con una hoja de estilos del üwrapper
W 3C. Si ahora cream os nuestra propia hoja de
Los /* com entarios */ de los ejem plos sólo tie­
estilos, sólo tenem os que m odificar la ruta de ac­
nen un propósito inform ativo y no es necesario
ceso al archivo en el elem ento link para que el
copiarlos.
form ato de las páginas se base en nuestra styles-
heet.
Tarea: definir un color de fondo y de fuente pa­
Tarea: vincular la página web con la hoja de es ra body
tilos (aún vacía) 1. Escribe las siguientes líneas debajo del
com entario:
1. A bre los dos archivos H TM L index.htm l y
contacto.htm l. body {
2. M odifica el código fuente de las dos pági­ color: white; /* Color de fuente */
nas HTML com o sigue: background-color: #8c8c8c; /* Color de
fondo */
< lin k h re f="little b o x e s . css" <P
re l= "s ty le s h e e t" type="text/css" /> }
#wrapper {
</head>
color: black;
3. Guarda las dos páginas y ábrelas en un
background-color: white;
navegador.

Ahora ya no se aplicarán los form atos de la hoja 2. G uarda la hoja de estilos y abre las dos
de estilos del W 3C. Este es el significado de los páginas (no la hoja de estilos) en un nave­
tres atributos del elem ento link: gador.

• h r e f indica (com o siem pre) la ruta de acceso Si funciona correctam ente, la página de inicio y
al archivo. de contacto tendrán m ás o m enos este aspecto:
• reí es la abreviatura de "relation " (relación).
*o..uufhvt<*
rel="stylesheet" significa "este archivo es 1*0 ***.•*l&'-et Ar¡{23
una hoja de estilos para m í". jgjr ü * 0 ü-
• type le indica al navegador que littleboxes.css
I
ic n w iÉ f a

es un archivo de texto de CSS: "Tipo archivo

b od y e n g ris
de texto, más concretam ente Cascading Style i tt le b n X E S
Sheet." icóo de paaoas w eb cea CSS f i¡od3a«3«Oi

•w r a p p e r en b lanco
El elem ento link se cierra con un tag final inte­ * coses
grado: espacio en blanco y signo m ayor que.
Inicio
Los estilos guardados en littleboxes.css se aplican Las pea nas web t& n. compuen&i de cuadrtrt rectaegobres que se pueda» colocar uno* juccc a
a todos los archivos H TM L relacionados con la ocgí o ¡uperpoorr eutr d¿o£ Todo Jo que cea reckasdc un buev. ta kbSco o embaí cosa*

hoja de estilos, independientem ente de si son Los a aan rei po-r.* mués# mi d cnaño desde ta rreaoou de Lu
|
to rn la }¡¿g:*«j w*b

cien o mil.

Fig. 24: body en gris, tkurapper en blanco

30 Descubrir CSS: fuentes, colores e hipervínculos
El texto está m uy cerca del borde y por lo de­
m ás, la página no es especialm ente digna de
adm iración, pero es un com ienzo.
Q uizás habrás observado que el color de fuente
que hem os definido para body con la propiedad
color no se utiliza en la página, porque todo el
texto se encuentra dentro de #wrapper.
Es recom endable adquirir la costum bre de defi­
nir el color de fuente y de fondo juntos, para que
no se den com binaciones desafortunadas com o
" fuente blanca sobre fondo blanco".
N om bres de colores
Las indicaciones de colores hexadecim ales
com o #8c8c8c ya nos resultan familiares de
HTM L, pero en C SS podem os utilizar nom ­
bres en inglés para determ inados colores, co ­
m o zvhite o black. M ás sobre la definición de
colores a partir de la pág. 40.
Color de fondo y de fuente para el
encabezado
La sección del encabezado de las dos páginas
tam bién debe tener un color de fondo, y com o
ya hem os visto aprovecharem os para definir
tam bién el color de fuente.
Tarea: definir un color de fondo para el enca­
bezado
1. A ñade la siguiente regla CSS al final de la
hoja de estilos:
#encabezado {
color: black;
background-color: #f3c600;
} gina web
2. G uarda la hoja de estilos y abre las páginas
en el navegador.
El gráfico del logotipo es un archivo GIF trans­
parente que se ha optim izado para un fondo
blanco, por lo que al usar un fondo oscuro se
m uestra una ligera aureola clara alrededor de las
letras del logotipo.
Podem os volver a asignar un fondo blanco a la
im agen m ediante C SS, y para ello utilizarem os
lo que se conoce com o selector anidado, que so­
lam ente afectará al gráfico del encabezado (más
sobre selectores anidados a partir de la pág. 36).
,
Tarea: definir un color de fondo para el enea-
bezado
1. A ñade la siguiente regla CSS al final de la
stylesheet:
/* Selector anidado: sólo el gráfico en el
encabezado */
#encabezado img {
background-color: white;
}
2. G uarda la hoja de estilos y abre am bas pá­
ginas en el navegador.
Este es el aspecto que tendrá ahora el encabeza­
do de la página de inicio:
itt iE b o x e s
>dr pag os web con CSS. FuadMméata*
Fig. 25: Encabezado y logotipo con color de fondo
Tipo y tamaño de fuente: font-
family y font-size
Las páginas web están form adas por cuadros
encajados unos dentro de otros, y en CSS se les
aplica el principio de herencia:
• Todos los cuadros dentro del cuadro body
heredarán el form ato aplicado a body.
Por eso, body es perfecto para establecer el for­
m ato básico de la fuente, ya que los demás ele­
m entos lo heredarán.
Tarea: definición de tipografía para toda la pá­
1. M odifica la regla C SS para body com o si­
gue:
bodv {
color: black;
background-color: #8c8c8c;
font-family: Verdana, Arial, &
Helvética, sans-serif;
font-size: small; /* Tamaño de fuente */
2. Guarda la stylesheet y abre am bas páginas
en un navegador.
En am bas páginas se ha m odificado el form ato
de la fuente, prácticam ente para todos los ele­
m entos H TM L. Veamos aquí en detalle las nue­
vas propiedades:
 Descubrir CSS: fuentes, colores e hipervínculos
• fon t-fam ily define el tipo de fuente.
Puesto que, com o autor de la hoja de estilos,
no sabem os de qué fuentes dispone el nave­
gador del usuario, es preferible definir va­
rias posibilidades separadas por comas.
• fon t-size determ ina el tam año de fuente.
En Internet existe un interm inable debate
sobre el m ejor m étodo para definir el tam a­
ño de fuente, pero para em pezar sm all es un
buen fundam ento.
Volveremos a hablar de la herencia de propieda­
des CSS a partir de la pág. 60.
Tamaño de fuente de los títulos
Todos los elem entos han adquirido un tam año de
fuente a excepción de los títulos. Los navegado­
res creen que los títulos deben ser más grandes
que el texto norm al, y puesto que todavía no
hem os definido nada para el título, todavía se
aplica el form ato de la hoja de estilos integrada
en el navegador.
Las siguientes reglas definen el tam año de fuen­
te para los títulos de prim er y segundo nivel.
Tarea: modificar el tamaño de fuente de los tí­
tulos
1. A ñade las siguientes líneas al final de la
stylesheet:
hi { font-size: 150%; }
h2 { font-size: 130%; }
2. G uarda la hoja de estilos y abre las dos
páginas en un navegador.
El 150% para h l todavía no tiene ningún efecto
visible, porque el texto es un gráfico, pero en el
caso de h2 podem os ver el cam bio directam ente.
A dem ás, la indicación porcentual nos perm ite
m antener la relación de tam años entre texto y tí­
tulos cuando cam biem os el tam año de fuente de
body.
Style: estructura de una regla CSS
CSS es un lenguaje, y todos los lenguajes utili­
zan un léxico y una gram ática. D espués de haber
visto un par de ejem plos, ya podem os determ i­
nar la estructura esquem ática de una regla CSS y
el vocabulario básico:
Selector {
Propiedad: valor;
Propiedad: valor;
}
31
U na regla CSS (inglés: style o css rule) está for­
m ada por los siguientes elem entos:
• Selector (selector)
El selector se coloca antes del par de llaves y
determ ina (selecciona) a qué cuadros de la
página se aplicará el formato.
• D eclaración (declaration)
Entre el par de llaves se encuentran una o
varias declaraciones. Éstas describen el for­
m ato de los elem entos a los que afecta el se­
lector. Toda declaración está formada por
tina pareja propiedad:valor y termina con un
punto y coma.
• Propiedad (property)
La propiedad (color, tipo de fuente, etc.) del
elem ento se coloca antes de los dos puntos.
Los espacios en blanco antes y después de
los dos puntos son opcionales.
• Valor (valué)
El valor que debe adquirir la propiedad se
define después de los dos puntos. Después
se añade un punto y com a para finalizar la
declaración.
Los térm inos style, estilo, regla CSS, instrucción de
form ato y patrón de form ato suelen utilizarse indis­
tintam ente com o sinónim os. A lgunos autores
tam bién lo llam an " regla de estilo".
Formato de la dirección
Al final de la página web hem os incluido una
dirección (ficticia) entre los tags <address> y
</address>. La m ayoría de navegadores repre­
sentan este elem ento en cursiva, pero con la
ayuda de CSS no tiene por qué ser así.
—
Tarea: definir la fuente para el elemento ad-
dress
1. Escribe la siguiente regla CSS al final de la
hoja de estilos:
address {
text-align: center; /* centrar */
font-size: 80%; / * más pequeño */
font-style: normal; /* fuente cP
normal, no cursiva */
letter-spacing: 2px; /* Distancia
entre las letras */
line-height: l.Sem; /* Distancia entre
las líneas */
}
2. G uarda la hoja de estilos y abre am bas pá­
ginas en el navegador.
32 Descubrir CSS: fuentes, colores e hipervínculos

A hora el texto de address aparece centrado, es al­ Vínculos visitados y no visitados

go m ás pequeño que el resto de la página (80%), Los vínculos pueden cam biar de aspecto en fun­
ya no está en cursiva, la distancia entre letras se ción de su estado: los vínculos no visitados sue­
ha am pliado en 2 píxeles y la distancia entre lí­ len representarse en azul, y los visitados en lila.
neas se ha aum entado a una vez y m edia el ta­ Para los distintos estados de un vínculo, CSS uti­
m año de la fuente. liza las llam adas pseudoclases, que se añaden de­
trás del nom bre de elem ento a con dos puntos.
! Llttle Baxes • Calle cuadro. 12 • 0 1 2 3 4 Boxland
________ T s l i QV2 3 4 5 6 7 9 ^ 0 « Fax? 0 1 2 3 4 5 &?8 3 l En la tabla siguiente se indican los dos estados
Fig. 26: address con formato m ás im portantes y los selectores CSS correspon­
dientes:
Aplicar cursiva y negrita al texto requiere cierto
entrenam iento: Hípervínculo... Selector CSS
• La cursiva se obtiene con font-style: italic; ...a una página no visitada a :lin k
• La negrita se obtiene p.ej. con font-zveight: ...a una página visitada a: visited
bold; (véase la pág. 69) Tabla 3; Hipervínculos visitados y no visitados y los selectores
CSS correspondientes

Debem os recordar que no puede haber ningún

Formato de los hipervínculos espacio en blanco en el selector entre el nom bre de
A plicar form ato a los hipervínculos con CSS es elem ento a, los dos puntos y el nom bre de la
un tema m uy apreciado. Aquí verem os una bre­ pseudoclase. Aquí un ejemplo:
ve introducción.
Tarea: modificar el color de los vínculos visita­
Hipervínculos: el elemento HTML a dos y no visitados
Los hipervínculos se definen en el código fuente
1. Añade las siguientes reglas CSS al final de
con el elem ento a. C SS perm ite asignar un nuevo
la hoja de estilos:
form ato a los hipervínculos, elim inando por
ejem plo el subrayado característico. a:link { color: #d90000;}
arvisited { color: #cc6666; }
Tarea: eliminar el subrayado de todos los hi- 2. G uarda la hoja de estilos y abre am bas pá­
pervmculos ginas en el navegador.
1. A ñade la siguiente regla CSS al final de lit-
Los vínculos no visitados se representarán en ro­
tleboxesxss:
jo oscuro y los visitados serán algo m ás claros.
a { text-decoration: none; } Cuando se m odifican los colores de los hiper­
/* Eliminar subrayado*/ } vínculos es necesario m antener la diferenciación
2. G uarda la stylesheet y abre las páginas en entre vínculos visitados y no visitados - a m enos
el navegador. que nuestra intención sea la contraria.

Esta regla elim ina el subrayado de los vínculos H acer que los hipervínculos visitados vuel­
de las dos páginas web. van a ser no visitados

A m uchos diseñadores les encanta este truco, pe­ Cuando com pruebes las páginas, tarde o
ro siem pre es necesario asegurarse de que los tem prano todos los vínculos estarán visitados.
hipervínculos se puedan reconocer com o tales. Para que vuelvan a ser no visitados, deberás
elim inar el historial del navegador.

En Firefox se puede utilizar la extensión Web

D eveloper (pág. 86): en el m enú M iscellaneous
encontrarás el subm enú Visited Links.
 Descubrir CSS: fuentes, colores e hipervínculos
Cuando el puntero está encima: a:hover y cía.
CSS tiene todavía otras tres pseudoclases para
hipervínculos:
Hipervínculo... Selector CSS
...cuando el puntero del ratón está a :h o v e r
encima
...saltando mediante la tecla [Tab] a ifo c u s
...en el que se hace clic a : active
Tabla 4: Otros estados de los vínculos y los selectores CSS corres­
pondientes
Las dos prim eras pseudoclases se parecen bas­
tante, m ientras que la tercera se encarga de algo
m uy distinto:
• :hover m odifica el vínculo m ientras el punte­
ro del ratón se encuentra encima.
• fo c u s corresponde al vínculo cuando éste se
selecciona m ediante el teclado.
• :active es un vínculo en el m om ento en que
se hace clic en él con el ratón.
En la práctica esto significa que :hover y fo c u s
suelen declararse juntos, puesto que en cierto
sentido fo c u s es el equivalente para teclado de
:hover.
Para ello, sólo tenem os que separar los dos selec­
tores m ediante una coma antes del bloque de
declaración (más detalles sobre la agrupación de
selectores a partir de la pág. 36).
Tarea: definir pseudoclases para hipervínculos
1. Com pleta la hoja de estilos con las siguien­
tes reglas CSS:
a:hover, a:focus { text-decoration:
underline; }
a:active { color: white; background-
color: #d90000; } Puesto que el skip-link está pensado principal­
2. G uarda la hoja de estilos y abre am bas pá­
ginas en el navegador.
Con estas reglas, :hover y fo c u s restituyen el sub­
rayado típico de los vínculos, m ientras que
'.active m odifica el color de fondo y de la fuente
en el m om ento de hacer clic, lo que le confiere
una apariencia sim ilar a la de un botón presio­
nado.
33
m ú £ • W ~ rz
Fig. 27: Página de inicio con un vínculo activo
Con fo c u s y ;active, los vínculos suelen adquirir
un contorno punteado en el navegador que no
es m uy elegante. Para elim inarlo, basta con aña­
dir la declaración outline: norte; al selector a en la
hoja de estilos. Este sería el aspecto de la regla
CSS de a:
a {text-decoration: none; outline: none;)
A unque este truco no funciona en todos los na­
vegadores, no tiene efectos secundarios negati­
vos.
El orden de las pseudoclases en la hoja de
estilos sí es importante
C uando se definen pseudoclases en una styles-
heet, es necesario respetar el orden correcto:
1. a:fínk
2. aroisited
3. a:hover y a fo c u s (no im porta el orden)
4. a:active
Inform ación detallada sobre pseudoclases
Encontrarás m ás inform ación sobre las pseu­
doclases en:
http://www.webestilo.com/css/css08.phtml
Ocultar el skip-link
m ente com o ayuda a la lectura de la página, po­
dem os ocultarlo con ayuda de CSS. En la página
20 hem os asignado al vínculo el atributo
cla s s-" skiplink".
En CSS, cuando el atributo class aparece en el
elem ento H TM L, necesitam os un punto delante
del nom bre de la clase: .skiplink significa el ele­
m ento con el atributo class-"skiplink'" (más in­
form ación a partir de la pág. 38).
34 Descubrir CSS: fuentes, colores e hipervínculos
1. A ñade la siguiente regla CSS al final de la
hoja de estilos:
.skiplink { display: none; } to HTM L. Este m étodo tam bién se suele llamar
2. G uarda la hoja de estilos y abre am bas pá­
ginas en el navegador.
Con esta regla, la propiedad display (m ostrar en
pantalla) de todos los skip-links adquiere el va­
lor none. En pocas palabras: "n o m ostrar".
Estilos en tres sitios distintos
H asta ahora solam ente conocem os las reglas CSS
en lina hoja de estilos externa, pero en realidad
existen tres posibilidades para guardar reglas
CSS.
1. Reglas CSS en un archivo CSS externo
Com o al principio de este capítulo, las reglas
C SS suelen guardarse en un archivo propio cuya
extensión es *.css. El vínculo entre la página web
y el archivo CSS tiene lugar, tal com o hem os vis­
to en la página 29, en el head del código H TM L
con avuda del elem ento link.
j aplica el form ato, m ás im portante es":
<head>
<1-- Otros elementos HTML -->
<link href = "nombrearchivo.css " <9
rel=Mstylesheet” type="text/css" />
</head>
Código 4: Vincular una hoja de estilos con link
Vinculación de hojas externas
A partir de la pág. 56 verem os cóm o podem os
crear una versión para im prim ir m ediante
C SS con link. A dem ás, @irnport es una alterna­
tiva a link. Lo verem os a partir de la pág. 82.
2. En el head de la página: el elemento
<style>
Las reglas C SS tam bién se pueden guardar en el
head de un archivo HTML:
<head>
<!-- Otros elementos HTML -->
<style type="text/css">
/ * La siguiente regla solamente se aplica a
esta página * /
body { background-color: #8c8c8c; }
</style>
</head>
Código 5: El elem ento HTM L style en el head de una página web
Las reglas C SS del bloque style solam ente se
aplican a esa página web concreta.
3. Directamente en un elemento HTML: el
atributo style=,,...,f
El tercer m étodo consiste en escribir las reglas
C SS directam ente en el tag inicial de un elem en­
inline-style, porque las declaraciones CSS están
incluidas directam ente en el elem ento HTML:
<body>
<!-- Otros elementos HTML
<p style="color: #ff0000; <P
background-color: #c0c0c0;">
Viaje al pasado
</p>
Código 6- El atributo style en el tag inicial de un elemento HTML
Texto rojo y fondo gris. Estas dos declaraciones
se aplican únicam ente a este párrafo. Puesto que
los inline-styles se colocan directam ente en el
elem ento afectado, los selectores son tan poco
útiles com o los pares de llaves.
¿Qué estilos tienen prioridad?
Las tres posibilidades de un archivo externo, en
el header H TM L y en un elem ento siguen una
jerarquía, de form a que el navegador siempre
sabe qué regla debe aplicar. El principio es el si­
guiente: "C u anto m ás cercano al texto al que se
• Las reglas CSS en el elem ento H TM L tienen
prioridad por encim a de las del head de una
página.
• Las reglas C SS en el head tienen prioridad
por encim a de las definidas en un archivo
externo.
Esta jerarquía perm ite lograr una presentación
hom ogénea para todo el sitio web m ediante el
uso de un archivo CSS y definir las desviaciones
de la m isma en el header e incluso en el tag ini­
cial de determ inados elem entos HTM L. Cuando
se integra CSS en páginas w eb, se recomienda
respetar la siguiente form a de proceder:
• Escribe tanto com o te sea posible en un ar­
chivo CSS externo.
• Limita al m áxim o el uso de los estilos en el
código fuente HTM L.
La jerarquía de los estilos form a parte de la
cascada
El alm acenam iento de los estilos en tres sitios
diferentes form a parte de la cascada que ayuda
al navegador cuando éste se topa con proble­
m as de am bigüedad, y de ahí proviene el
nom bre Cascading Style Sheets. M ás inform a­
ción sobre la cascada com pleta en la pág. 60.
 Descubrir CSS: fuentes, colores e hipervínculos
Recordatorio
Repasem os nuevam ente los puntos m ás im por­
tantes que hem os visto en este capítulo:
• Una hoja de estilos o stylesheet es una reco­
pilación de patrones de formato.
• Las posibilidades de formato de CSS se
pueden dividir en 3 grupos:
- Fuentes y colores: form ato del contenido
de los cuadros.
- D istancias y bordes: form ato de los pro­
pios cuadros.
- Layout: m odificar la posición de los
cuadros en la página web.
• El elem ento link vincula un archivo H TM L
con una hoja de estilos.
• N ociones im portantes sobre la sintaxis de
CSS:
- Un selector selecciona a qué parte de una
página web se aplicará el form ato.
- Una declaración es una instrucción de
form ato y se com pone de una propiedad
y un valor para la propiedad.
35
• Las propiedades CSS más utilizadas para
dar form ato a elem entos son:
- color para el color de fuente
- background-color para el color de fondo
- font-fam ily para el tipo de fuente
- fon t-size para el tam año de fuente
• a Itext-decoration: none;l elim ina el subrayado
de los vínculos
• Para el form ato de los distintos estados de
los vínculos existen varias pseitdoclases en
CSS:
- adink y a:visited
- a:hover y a fo c u s
- a:active
• Para guardar los estilos tenem os tres opcio­
nes:
- U n archivo CSS extem o
- En el head entre <style type="text/css"> y
</$tyle>
- En el elem ento H TM L con el atributo
style= " . . . "
• Recom endación: guardar el m áxim o de re­
glas CSS en archivos extem os.
36 Selectores, unidades y validador CSS
Selectores, unidades y valid ad or CSS
En este capítulo se presentan los selectores. Además, tam­
bién hablaremos de un sencillo sistema de puntos para se­
lectores que añade "especificidad" a los nombres difíciles, y
de las unidades que se pueden utilizar en CSS. Para termi­
nar, comprobaremos el código CSS utilizando el Validator
del m C .
El m anejo de selectores es una de las habilidades
m ás im portantes que deben adquirirse cuando
se aprende CSS, por lo que le dedicarem os un
capítulo aparte. Adem ás, verem os los puntos
esenciales relativos a las unidades de m edición,
definiciones de colores y el validador CSS.
Un selector selecciona el cuadro
al que se aplica el formato
Ya sabem os que toda regla C SS em pieza por un
selector. Los selectores seleccionan el cuadro de
la página web al que se aplicará form ato, y son
una de las siguientes tres cosas, o una com bina­
ción de las m ismas:
• El nom bre de un elem ento H TM L
• U na ID
• Una clase (class)
Un selector sencillo: el nombre del cuadro
Ya hem os visto una regla CSS com o esta:
h2 {
font-size: 130%;
} * {
Código 7: Un selector sencillo
El selector m ás sencillo es el nom bre del cuadro
al que se aplicará form ato, y tam bién se le llama
selector de tipo, porque selecciona todos los ele­
m entos de un determ inado tipo: h2 selecciona
todos los títulos de nivel dos.
Varios cuadros a la vez: separación de
selectores mediante comas
O bserva las siguientes dos reglas para aplicar
form ato a títulos:
hi {
font-family: Verdana, Arial, Helvética, <9
sans-serif;
font-size: 150%;
} ám bito de aplicación de los selectores y perm ite,
h2 {
font-family: Verdana, Arial, Helvética, &
sans-serif;
font-size: 130%;
}
Código 8: Dos selectores sencillos con una declaración idéntica
Para los dos títulos se define la m isma fam ilia de
fuentes, lo único que varía es el tam año. Si agru­
pam os los selectores con una com a, podem os
ahorram os bastante trabajo de tecleo y m ejorar
la legibilidad:
hl, h2 { font-family: Verdana, Arial, <P
Helvética, sans-serif; }
hl { font-size: 150%; }
h2 { font-sise: 130%; )
Código 9: Selectores agrupados y dos selectores sencillos
Si deseas asignar otra fuente a los títulos, sólo
tendrás que cam biar una línea de código.
No olvidar la com a al agrupar
Cuando se agrupan selectores es indispensa­
ble incluir la coma para separarlos, ya que de
lo contrario obtendríam os selectores anidados
por error, que tendrían un efecto totalm ente
distinto.
Todos los cuadros de la página: el selector
universal *
Se utiliza m uy pocas veces, pero existe. Es el as­
terisco * com o selector universal, que afecta a
" todas las cajas":
padding: 0;
margin: 0;
}
Código 10: El asterisco es el selector universal
Este ejem plo establece las características padding
y margin de todos los elem entos H TM L en nuil y
se explica en el capítulo dedicado al m odelo de
cajas, en el apartado "C alib ración " (pág. 44).
Sólo en esta sección: anidación
de selectores
La anidación de selectores es m uy útil y se utili­
za con m ucha frecuencia en la práctica. Lim ita el
por ejem plo, dar form ato a los elem entos de una
determ inada sección de la página.
 Selectores, unidades y validador CSS
Sólo los vínculos de la navegación:
#navegacion a
O bserva la siguiente regla, concretam ente los
dos selectores del principio:
#navegacion a {
color: #353535;
background-color: transparent;
/* transparencia */
i lectores más im portantes, pero en el caso de
Código 11: Selectores anidados - sólo los vínculos de la sección de
navegación
Esta regla solam ente afecta a los hipervínculos
que se encuentren en un elem ento H TM L cuyo
atributo sea id= "navegación ". Todos los dem ás
vínculos de la página no se verán afectados por
ella.
Viñetas de las listas no ordenadas: ul Ir
Otro ejem plo: im aginem os que, en lugar de la
viñeta redonda, prefieres utilizar un cuadrado.
Para ello sólo tienes que escribir:
li { líst-style-type: square; }
Código 12: Viñetas cuadradas - también en las numeraciones
A prim era vista parece que todo está en orden y
a las listas con ul se les asigna un cuadrado. Sin
em bargo, li es un selector de tipo sencillo y afec­
ta a todas las cajas del tipo li, por lo que las nu­
m eraciones (ol) tam bién tendrían un cuadrado
en lugar de un número.
En este caso, podem os solucionarlo m ediante la
anidación de selectores:
ul li { list-style-type: square; } la abreviatura de "id entificación personal". Una
Código 13: Selectores anidados - cuadrados sólo para listas no or­
denadas
Este selector lim ita el ám bito de aplicación de la
viñeta cuadrada a las listas no ordenadas.
Distinta numeración para las listas ordenadas
La anidación de selectores no se lim ita a u n solo
nivel. Para que veas las posibilidades que tiene,
aquí presento un ejem plo para la num eración de
listas:
ol li { list-style-type : decimal; }
ol ol li { list-style-type : lower-alpha;
Código 14: Selectores anidados - sólo signos de numeración en lis­
tas ordenadas
Este sería el aspecto que tendrían las listas nu­
m eradas al aplicarles las reglas anteriores:
37
Fig.28:
1 Este punto ut&za números árabes
Selectores ani­
a. Este punto utiliza una letra minúscula
dados
b. Este punto utiHza una letra minúscula
2. Este punto uíúiza números árabes
M ás selectores anidados
En esta introducción sólo hem os visto los se­
los anidados existen otros, com o los selectores
hijo y los selectores vecinos.
Encontrarás m ucha m ás inform ación p. ej. en
M axdesign (sólo en inglés):
http://css.maxdesiqn.com.au/selectutoriai/
Asignación de nombres propios
con ID y class
M ediante la agrupación y la anidación de selec­
tores de tipo se pueden lograr m uchas cosas.
A dem ás, los selectores perm iten asignar nombre
a los elem entos, lo cual resulta m uy práctico.
Para asignar un nom bre propio a los elem entos
en H TM L existen dos atributos que se pueden
utilizar con prácticam ente todos los elementos:
id y class.
Sólo puede haber uno: ID
ID es la form a abreviada de identidad y en inglés
ID solam ente puede aparecer una vez en una
página:
<div id="encabezado">
</div><!-- Fin #encabezado -->
Código 15: El encabezado - un elemento HTML con el atributo id
En CSS se puede utilizar el valor de id com o se­
lector y escribir una alm ohadilla # antes:
#encabezado {
color: black;
background-color: #f3c600;
} }
Código 16: El encabezado - u n elemento HTML con el atributo id
38 Selectores, unidades y validador CSS
Formación de grupos: class
Para poder dar form ato a varios párrafos de la
página, un selector sencillo com o p es dem asiado
indeterm inado y una ID no es recom endable,
porque sólo puede aparecer una vez. Para estos
casos, en C SS tenem os las clases.
A todos los párrafos que deban aparecer com o
un cuadro inform ativo gris con borde les aplica­
rem os el atributo class:
<p class="cuadro_info">Este texto es un
cuadro informativo.</p>
Código 17: Un elemento HTML con el atributo class
En CSS, el nom bre de la clase se distingue con
un punto al principio:
.cuadro_info {
color : black;
background-color: #8c8c8c;
border: 3px solid #ecf7dd;
} Especificidad: el sistema de
Código 18: El selector con punto - para elementos HTML con el
atributo class
El pequeño punto al principio del selector per­
m ite que el navegador sepa que esta regla debe
aplicarse a todos los elem entos H TM L cuyo atri­
buto class tenga el valor cuadro J n f o . En la sec­
ción sobre im ágenes flotantes a partir de la pág.
71 verem os un ejem plo de aplicación de clases.
ID o clase, ¿cuál elegir?
En realidad, la diferencia entre class e ID es m uy
simple:
• A m bos ofrecen la posibilidad de asignar un
nom bre propio a elem entos HTML.
• Una ID es única y sólo puede aparecer una
vez en una página web.
• Una class puede aparecer m últiples veces en
una página web.
Las secciones principales de la página de ejem ­
plo com o #encabezado o #areatexto tienen una
ID porque solam ente aparecen una vez en cada
página. Por el contrario, los cuadros inform ati­
vos o skip-links pueden aparecer varias veces,
por lo que les hem os asignado una class.
Nombres con significado
La ventaja de asignar un nom bre propio es que
podem os dirigim os realm ente a cada elem ento
de una página.
El inconveniente es que los nom bres se asignan
en el código fuente H TM L, con lo que se pierde
en parte la separación entre contenido y forma.
C ualquier m odificación del nom bre debe apli­
carse en el H TM L y en el CSS. Por ese m otivo va­
le la pena reflexionar sobre los nom bres de las
ID y las clases.
El principio m ás im portante a la hora de selec­
cionar un nom bre es que describa el significado
del elem ento y no su form ato. Por ejemplo:
• Q uerem os crear una sección de navegación a
la derecha y la llam am os Anav-derecha.
• Si después desplazam os la sección hacia la
izquierda m ediante CSS, tendrem os una na­
vegación a la izquierda con el bonito nom ­
bre de #nav-derecha.
U n nom bre no debe describir la apariencia del
elem ento, sino su significado: #navegación o Ase­
gunda_nav serían una opción mejor.
puntos para selectores
Cuando las hojas de estilos se vuelven un poco
m ás largas, tarde o tem prano un elem ento
H TM L acaba teniendo varias reglas CSS que se
contradicen parcialm ente. La cuestión es qué de­
cisión tom a el navegador en estos casos conflic­
tivos.
Sólo hay un ganador: fundamentos de la
especificidad
La solución a estos problem as de decisión es
m uy sim ple: el navegador determ ina según un
sistem a de puntos cuál es el selector m ás im por­
tante.
En la jerga C SS este sistem a de puntos se conoce
com o specificity, en español especificidad. Una pa­
labra extraña para un concepto sencillo. En la si­
guiente tabla vem os la asignación de puntos:
Tipo de selector Ejemplo Puntos
Selector de tipo sim­ P 1
ple
Clase .c u a d ro J n fo 10
Pseudoclase
_______________-,j :vis¡ted 10 -
ID # navegación 100
Tabla 5: Especificidad - sistema de puntos para selectores
En el caso de los selectores anidados, la cantidad
de puntos se sum a para cada uno de los selecto­
res, algo que no ocurre en el caso de los selecto­
res agrupados por com as.
 Selectores, unidades y validador CSS 39

Algunos ejemplos de la valoración por puntos

He aquí un par de ejem plos sobre la especifici-r
Valores y unidades en CSS
dad de los selectores: CSS puede utilizar m uchas unidades de m edida
distintas, y la elección puede ser com plicada, es­
Selector Descripción Puntos Suma pecialm ente al principio.
body Selector de tipo 1 1
Reglas básicas: espacio en blanco, nuil y
h1, h2 Agrupado 1 1
a .v is ite d Tipo+pseudoclase 1 + 10 11
comillas
Veamos algunas reglas básicas:
.c u a d ro J n fo Clase libre 10 10
p. c u a d ro J n fo Clase vinculada 1 + 10 11 • En C SS entre el valor y la unidad no debe
U c u a d ro jn fo ID 100 100 ponerse ningún espacio en blanco: se escribe
U navegació n a ID + tipo 100 + 1 101 130% y no 130 % , 12px y no 12 px. Al princi­
-
Una vagación ID + tipo + pseudocl 100 + 1 + 111
pio este suele ser el error m ás común.
a :v is. ite • C uando un valor es 0 (nuil), después no de­
--d . ¡
ase 10
U inicio ID + ID 100 + 100 200 be indicarse ninguna unidad. Nuil es nuil,
Una veg ación no im porta si son píxeles o kilómetros.
.... ..... 1
Tahla f>: E specificidad- asignación de puntos para selectores
• A diferencia de H TM L, los valores no se co­
locan entre com illas. Por lo tanto, se escribe
En caso de em pate no se da ninguna prórroga, color: black y no color: " black".
sino que decide el orden en la hoja de estilos:
Una excepción a la últim a regla son los nom bres
gana la regla que se encuentre m ás abajo, si­
guiendo la cita bíblica de "lo s últim os serán de fuentes com puestos por varias palabras, p.ej.
Times N ew R om án, que se pueden colocar entre
prim eros". En el capítulo sobre el form ato de la
sección de navegación verem os el sistem a de com illas sim ples o dobles:
puntos en acción (a partir de la pág. 53). body {
font-family: "Times New Román", serif;
La especificidad form a parte de la cascada }
La especificidad forma parte de la cascada que Para la pantalla: unidades relativas
ayuda al navegador cuando éste se topa con
Las unidades relativas se utilizan principalm en­
problem as de am bigüedad, y de ahí proviene te para la representación de páginas web en pan­
el nom bre C ascading Style Sheets. M ás infor­ talla. Las m ás im portantes son las siguientes:
m ación sobre la cascada a partir de la pág. 60.
• px (píxel)
U n píxel es un punto de im agen, y depende de
Propiedad importante con üm portant
la resolución de la pantalla: a 800 x 600 el m oni­
Si deseas que el navegador utilice una determ i­
tor tiene 480000 píxeles, a 1024 x 768 tiene
nada propiedad en cualquier caso, independien­
768432. Puesto que el m onitor no se puede am ­
tem ente del resultado del cálculo de la especifi­
pliar, los píxeles son los que deben reducirse.
cidad, puedes indicarle que la propiedad es im ­
portante: La unidad pixel es la m ás fácil de entender y cal­
cular. Sin em bargo, no deberíam os usar px para
h2 {
color: red Ümportant; tam años de fuente, porque los usuarios que uti­
} licen Internet Explorer V6 o inferior no podrán
Código 19: Una propiedad "importante"
am pliar el tam año de fuente.

En el capítulo dedicado a la cascada, a partir de • em

la pág. 61, verem os p or qué las propiedades con em es una unidad relativa al tam año de fuente
üm portant no tienen com petencia en el sistem a que define el usuario. H ace referencia al tam año
de puntos y siem pre salen ganando. de la letra M.

Internet Explorer 6 no es üm portant La unidad em en C SS no tiene nada que ver con

el elem ento H TM L em que hem os visto en la
Internet Explorer, incluida la versión 6 del na­ pág. 16. La unidad em es m uy flexible y cam bia
vegador, no reconoce la instrucción üm portant cuando el usuario m odifica el tam año de fuente
y sim plem ente la ignora. en el navegador (ejem plo en la pág. 45). Definir
40 Selectores, unidades y validador CSS

espacios con em es m uy flexible, pero al princi­ • Porcentual: rgb(rr, gg, bb)

pio resulta difícil com prender su efecto. A m arillo sería rgb(100% / 100% , 0%).
• % (porcentaje) A dem ás, tam bién están perm itidos diecisiete
nom bres de colores en inglés:
Los porcentajes son relativos, y dependen de
distintas cosas por lo que la prim era pregunta Nombre Tono Hexadecimal Hexadecimal
ante u n porcentaje es siem pre "¿porcentaje de normal abreviado
qu é?". En C SS el tam año de referencia es casi i i trrrrr ne r r
w hite blanco /ftltffl m u
siem pre el elem ento padre. En consecuencia,
bla c k negro #000000 #000
zvidth: 50% significa la m itad de la anchura del
elem ento padre. re d rojo #ff0000 #f00
m a ro o n marrón #800000
Si algo no funciona en la indicación de porcenta­ — — -H
-

verde #00ff00 #0f0

jes, lo m ejor es consultar en alguna referencia
lim e
................. ! - - - -lima
- |

g re e n verde oscuro #008000 -

sobre C SS a qué hace referencia exactam ente el
porcentaje en la propiedad C SS utilizada. blu e azul claro #0000ff #00f
’ ■ 1 ■ 1

navy azul oscuro #000080 1 _

|— ---------
Para la impresora: unidades absolutas g ra y gris oscuro #808080 1“

Las unidades absolutas no están indicadas para s ilv e r gris claro #c0c0c0
i 1
hojas de estilos para pantalla, sino que están y e llo w amarillo claro #ffff00 #ff0
pensadas para hojas de estilo destinadas a la ora n g e naranja #ffa500
im presión de la página web. oliva #808000
o live
| _ _' ]
• cm es un centím etro. p u rp le lila oscuro #800080 i
-
• in significa inch, es decir pulgada, y equivale fuchsia lila claro #ff00ff #f0f
a 2,54 cm. aqua turquesa #00ffff #0ff
11 - -
• pt (punto) es la unidad tradicional para indi­ te a 1 Win95 Desk- #008080
car un tam año de fuente en el ám bito de la L_ ______ . . . . .
top L _ j

im presión, y en C SS corresponde a 1/72

Tabla 7: Los 17 nombres de colores y sus equivalencias hexadeci-
inch. males
Recuerda que están indicadas para la im presión, Encontrarás un resum en de los distintos colores
pero no para la pantalla. en esta página:

Definición de colores: hexadecimal, decimal y • http://www.sidar.orq/recur/desdi/mcss/manual/

v col.php
nom bres
En la pantalla todos los colores se crean a partir
de una m ezcla de rojo, verde y azul. Para definir
las proporciones de los colores, CSS ofrece varias
El validador CSS
posibilidades: En la página 24 hem os utilizado por prim era vez
el validador de H TM L. El W 3C tam bién pone a
• H exadecim al, norm al: ürrggbb
disposición de los intem au tas un validador de
A m arillo sería #jffffOO. El m áxim o de rojo y
C SS que se encuentra aquí:
de verde, y nada de azul.
• H exadecim al, abreviado: #rgb • http://iiqsaw.w3.orq/css-validator/
A m arillo sería #ffO. C ada signo se duplica. A dem ás de la posibilidad de descargarlo e insta­
Esta form a de escribirlo es m uy práctica, p e­ larlo en nuestra m áquina, en esta página se ofre­
ro sólo funciona con colores en los que coin­ cen tres opciones distintas para utilizar el vali­
cidan los dos signos de rojo, verde y azul dador:
(ver tam bién la tabla siguiente).
• M ediante U RL, si la hoja de estilos ya está
• D ecim al: rgb(rrr, g g g f bbb)
disponible en Internet.
Con valores entre 0 y 255. Por lo tanto, am a­
• M ediante entrada directa, copiando y pe­
rillo sería rgb(255, 255, 0).
gando los estilos directam ente en la página.
 Selectores, unidades y validador CSS 41

M ediante carga de archivo, en el supuesto

de que la hoja de estilos se encuentre en .
Recordatorio
nuestro disco duro: Estos son los puntos m ás im portantes que
hem os visto en este capítulo:

• Los selectores seleccionan el cuadro al que

se aplicará form ato y son una de estas tres
cosas (o una com binación de ellas):
El nom bre de un elem ento H TM L
Com o todos los validadores de gram ática, el - Una ID
CSS-Validator es m uy estricto y resulta m uy di­ - Una clase (class)
fícil obtener un 10/10.
• Los selectores se pueden agrupar con una
En el caso de que el validador sólo m uestre al­ com a: h l , h2
guna que otra advertencia sobre la definición de • Los selectores se pueden anidar con un es­
colores de prim er plano y de fondo, com o se pacio en blanco para lim itar el ám bito de
aprecia en esta im agen, ya se puede considerar aplicación: #navegación a
todo un éxito: • C on los selectores ID y class es posible asig­
C S S V«ültía«or> $ nar nom bres propios:
- Una ID sólo puede darse una vez en
R esultados del VaWodor CSS del W 3C para fHt
una página
- Advertencia* - U na clase puede utilizarse tantas veces
uri : com o se desee en una página
Jtf jj Cote*co otfn *«A*&wirtr\tj*m un•^■*=*35*adíi*y•*rü
• Un sistem a de puntos llam ado especificidad
. Información de CSS vabdo
(specificity) ayuda al navegador a determ inar
la im portancia de los selectores en casos de
conflicto.
Fig. 29: E¡ validador CSS en acción
• Para el form ato en pantalla se recom ienda el
uso de las unidades px, em y %, m ientras
que para la im presora se recom ienda utilizar
cni, in y pt.
• En C SS existen m uchas form as de definir co­
lores. Las m ás utilizadas son los códigos
hexadecim ales y los nom bres de colores.
• El W 3C tam bién ofrece un validador para
CSS que com prueba la sintaxis de los estilos.
42 Formato de márgenes y espacios con el modelo de cajas

Form ato de m árgenes y espacios con

el m odelo de cajas
En este capítulo conoceremos el modelo de cajas, uno de los
fundaynentos para el diseño con CSS. Además, también
Visión general del modelo de
hablaremos de los gráficos de fondo y cómo mantener la le­ cajas
gibilidad de las hojas de estilos cuando empiezan a crecer.
Todas las cajas siguen un determ inado esquem a
llam ado m odelo de cajas o box model.
En la introducción a H TM L de este cuaderno,
constatam os que las páginas w eb están com ­ Todas las cajas son iguales: el modelo
puestas p or cuadros o cajas rectangulares. Todos
m a rg in -to p
los textos y gráficos de una página están dis­
puestos en este tipo de cuadros. Sin excepción.
Tam bién se les puede llam ar caja o contendor. En
inglés se llam a box.

Problemas potenciales en el
formato de los cuadros
Los cuadros o cajas son uno de los elem entos
clave de la estructura una página web y el m ás
im portante a la hora de darles formato. Por des­
m a rg in -b o tto re
gracia, las cajas tam bién pueden convertirse en
un problem a grave por dos m otivos: Fig. 30: El modelo de cajas, la base del diseño con CSS

• Falta de conocim ientos de CSS por parte del au ­ Todos los elem entos FíTM L tienen las propieda­
tor des width, height, pudding, border y margin. C uan­
M uchos d esabollad ores de páginas w eb no to m ejor com prendas el m odelo de cajas, m ás fá­
saben dem asiado sobre el com portam iento cil te resultará dar form ato a las páginas web
de los cuadros. Por ese m otivo en este capí­ con CSS.
tulo explicarem os cóm o colocarlos y dispo­ Estos son los principales conceptos relacionados
nerlos con precisión. con este m odelo, con la correspondiente traduc­
• Falta de conocim ientos de CSS por parte del na­ ción al español:
vegador
Los navegadores tam bién se han ido adap­ Inglés ¡Español
tando a CSS poco a poco. Los navegadores c o n te n í Contenido, área de contenido
m odernos prácticam ente dom inan el len­ w idth Anchura, anchura del contenido
guaje, pero los antiguos tienen dificultades. p a d d in g Distancia interior, acolchado, relleno
En resum en, no es extraño encontrarse en una si­ b o rd e r Borde, línea de borde
|i -r.ji-LU_-a.Liu/ .< ________
tuación en la que uno se pregunte "¿A caso lo he m argin Distancia exterior, margen
hecho yo m al o el navegador se ha vuelto loco?"
Tabla 8: Términos relativos al modelo de cajas
Es preferible com probar las páginas web en
prim era instancia en Firefox u Opera, y después Área de contenido: width y height
en Internet Explorer. Tanto las versiones actuales El texto y las im ágenes se encuentran en el área
de Firefox com o de O pera hablan m uy bien CSS, de contenido de un elem ento, cuya anchura se
y si las páginas se ven bien en ellos, probable­ define con width y su altura con height. Si estas
m ente no hayas com etido ningún error.
indicaciones no aparecen explícitam ente en la
hoja de estilos, se aplican las siguientes reglas
básicas:
 Formato de márgenes y espacios con el modelo de cajas
• Sin indicación de width los elem entos de blo­
que serán tan anchos com o el elem ento que
los engloba, y los elem entos inline serán tan
anchos com o su contenido.
• Sin indicación de height todos los elem entos
serán tan altos com o su contenido.
Atención: zuidth define la anchura del área de
contenido, pero no la anchura total del elemento.
En realidad, content-width (es decir, anchura del
contenido) sería un nom bre m ás adecuado.
Cálculo de la anchura total
En la página 44 encontrarás un ejem plo de
cálculo de la anchura total de un elemento.
Margen interior: padding (relleno)
D espués del área de contenido, en cualquier
cuadro le sigue el m argen interior o pudding. El
padding se encuentra dentro de la caja y adquiere
el color de fondo del área de contenido, padding
se puede definir para los cuatro lados de una ca­
ja.
En ese caso, las propiedades son:
• padding-top para el padding superior
• padding-right para el padding derecho
• padding-bottom para el padding inferior
• padding-left para el padding izquierdo
Fondo: contenido más relleno
Cuando un elem ento tiene un color o una
im agen de fondo, ésta abarca toda el área de
contenido y el relleno.
Bordes: border
Alrededor del padding se extiende el borde (bor­
der) de la caja, border es m uy flexible y puede
adquirir una anchura (width), un estilo (style) y
un color (color) diferentes para cada lado. Las
propiedades son:
• border-top para el borde superior
• border-right para el borde derecho
• border-bottom para el borde inferior
• border-left para el borde izquierdo
Com o hem os visto, es posible definir una anchu­
ra, un estilo y un color distintos para cada uno
de los lados del borde. Si hacem os cálculos, te­
nem os un total de 12 declaraciones posibles de
border para una regla CSS, p. ej. border-top-width,
border-right-color o border-left-style.
43
Margen exterior: margin
Cada caja puede tener un m argen exterior (mar­
gin), que tam bién se puede definir para los cua­
tro lados:
• margin-top para el m argen superior
• margin-right para el m argen derecho
• margin-bottom para el m argen inferior
• margin-left para el m argen izquierdo
El m argen exterior se encuentra fuera de la caja
y adquiere el color de fondo del elem ento en­
volvente. margin también acepta valores negati­
vos, a diferencia de border y padding.
Coincidencia de márgenes verticales:
collapsing margins
m argin tiene una pequeña particularidad que
suele ser el origen de m uchos quebraderos de
cabeza:
• Los m árgenes exterior horizontales de cajas
contiguas que se toquen se sum an norm al­
m ente.
• Los m árgenes verticales son más asustadizos:
cuando el margin-bottom y margin-top de dos
cajas que se encuentran una encim a de otra
se tocan, éstas coinciden.
El m ás grande se m antiene, m ientras que el más
pequeño desaparece:
Fig.31: Cuando dos márgenes verticales se tocan, se coíapsan
Puede parecer confuso a prim era vista, pero en
el día a día resulta m uy práctico, por ejem plo
cuando varios tenem os párrafos seguidos.
Los elem entos inline com o los vínculos no acep­
tan m árgenes verticales. Su altura está determ i­
nada por el tam año de la fuente. A la izquierda y
a la derecha todo es norm al, pero arriba y abajo
los elem entos inline no tienen margin.
44 Formato de márgenes y espacios con el modelo de cajas

Poco intuitivo: cálculo de la anchura de un Calibración: definir un margen

cuadro
El cálculo de la anchura total de una caja puede
parecer extraño a sim ple vista. Es cierto que
zvidth significa " an ch u ra", pero no hace referen­
cia a la anchura total del cuadro sino a la anchu­
ra del contenido.
Veamos un ejem plo:
nulo
Todos los navegadores tienen una hoja de estilos
incorporada, y uno de los aspectos más proble­
m áticos durante el aprendizaje de CSS es que los
navegadores utilizan plantillas estándar para
padding y margin que pueden ser m uy diferentes.

div {
Anular los márgenes de las hojas de estilo
width: 720px;
padding: 20px; integradas en el navegador
border: 0; Para no tener que recurrir cada vez a la búsque­
margin: lOpx; da de errores, m uchos diseñadores aplican una
} m edida que a prim era vista parece radical, pero
Código 20: Ejemplo CSS para el cálculo de la anchura total de una resulta m uy efectiva:
caja
• Se asigna el valor N U LL a padding y margin
La anchura total se com pone de width, padding,
para todos los elem entos HTML.
border y margin:
C onsidéralo com o una calibración, ya que gra­
Cálculo Ejem plo
cias a esta m edida se anulan los distintos valores
width 720px de las hojas de estilo integradas en cada navega­
+ padding-right + 2 0px dor y se obtiene un punto de partida unitario.
+ padding-left + 2 0px
+ border-right-width + 0
+ border-left-width + 0 Tarea; anular los márgenes de todos los ele­
+ margin-right + lOpx mentos
+ margin-left + lOpx
1. A grega la siguiente regla CSS al principio de
Anchura total 780px
¡a Iioja de estilo, después del /* com entario
Tabla 9: Cálculo de la anchura total de una caja * / y antes de la regla para body:
A veces es realm ente necesario calcular para que * { padding: 0; margin: 0; }
todo encaje. 2. Guarda la hoja de estilos y abre las páginas
En el caso de la altura ocurre lo m ismo: la altura w eb en el navegador.
total de un elem ento se com pone de height más
padding-top m ás padding-bottom m ás border-top- El asterisco com o selector significa "to d o ". N o te
width m ás border-bottom -width m ás margin-top asustes cuando veas el aspecto de la página en el
m ás margin-bottom. navegador tras este cambio:

Internet Explorer tam bién tiene problem as ¿r* «l a*,ti*

con la anchura de las cajas ~M W

Si todo esto te parece un lío, puedes consolar­ E5
i o n C S S . Fu n d am en tos.

te sabiendo que al principio m uchos navega­ C ontacto

In ic io
dores tam bién tem an los m ism os problem as. La? páginas vvefc s s ta n com pu estas d e c u a d r o s r e r trm g o io n e s que s e pueden co lo car unos u n to 3
otros o superponer entr ato e , Todo io que s e a »edondo « un tru co, un gráfico o ¿m bae c o sa s
os seguientes p asos m uestran e¡ c < n n o deede la -rreac'on de i » c w * naata ia
Internet Explorer 5.x es especialm ente célebre ts n im d s :
As* funciorv? ’- fTMl
Etemeot&s HTML sn portan tes
por su cálculo erróneo del m odelo de cajas. TÍÜáW
ka n a to s v te ta s
M ás inform ación en la página 84. v t e d o s s «nágenes
Aserto co n C SS
V«site <*.,/•. . 2 ara m as «form ación
LUVÍ* • C»lf» 12 91234 f
___________________________ T « l. ?S 7 3 ?g Í I 4 ! C 1Z3* 3 S 7 » a :
Trf^nsóa A

Fig. 32: Calibración - padding y margin de todos los elementos a

cero
 Formato de márgenes y espacios con el modelo de cajas 45

Títulos, párrafos, listas e incluso las listas anida­ C on estas reglas definim os un m argen exterior
das: todos los elem entos se m uestran uno detrás de le m para todos los títulos h2, los párrafos y
de otro sin m argen o distancia alguno. las listas no ordenadas. Todos los elem entos li
tendrán tam bién un m argen izquierdo de le m ,
Todavía más calibración: la barra de despla­ para que aparezcan con sangría.
zam iento en Firefox
ic-U- fca? BttacK n tt
Firefox solam ente m uestra la barra de despla­
zam iento derecha en caso necesario, de forma
que al pasar de una página con scrollbar a JttlB
w e p cao y fundamentos.

una página sin (y al revés) el diseño "sa lta ". Si U*oa

Cootwrto
te m olesta este efecto, puedes obligar a Fire­ I n ic io
fox a m ostrar siem pre la barra de desplaza­ C íí c-Ljir-ss «stsn co n p u *«ai iU cuadros r*ctanguter<v. >*u« ** puedan caíccv wvw JUXo
3 c^n>3 o ujparporer entr «Uoj Todo te q m sm radonoo es un truco, un gráfico o smbas c a c a
m iento con la siguiente regla CSS: lo s s^ üisntas pasas muastran * cammo ossde U e r o * cían dé las c s ¡s ¿ n a tta la «vea
carminada;
html { height: 101%; } * AS! función* HTML
EtemsnEM HTML impo:trotas
/* fuerza la visibilidad de la scrollbar ■ Títulos
a ° a r a fus y (tstas
en Firefox */ : virutas a
• cor. C SS

Fig. 33: Párrafos y listas con márgenes restaurados

Redefinir los m árgenes para los elementos
más importantes
G racias a la siguiente reglas, los m árgenes de Definir ia anchura del elemento:
párrafos y listas no ordenadas vuelven a tener
valores aceptables. width
A continuación, utilizarem os la propiedad width
Tarea: restaurar los márgenes de párrafos y lis- para definir una anchura fija para la sección
thurapper.
1. M odifica la regla de h2 com o sigue:
Tarea: definir una anchura fija para #wrapper
h2 {
font-size: 130%;
1. C om pleta la hoja de estilos con la línea
margin-bottom: lem;
m arcada en negrita:

} #wrapper {
2. Al final de la stylesheet, define las siguien­ color: black;
tes reglas CSS: background-color: white;
width: 720px; /* Anchura del &
p, ul {
área de contenido */
margin-top: 0 ;
margin-right: 0 ;
}
margin-bottom: lem ; /* Margen <P
2. G uarda la hoja de estilos y abre las páginas
inferior */
w eb en el navegador.
margin-left: 0 ; }
H em os elegido una anchura de 720 píxeles para
ul u l {
que la página tam bién tenga un aspecto acepta­
margin: 0 ;
ble en caso de que la resolución de pantalla sea
} de 800 x 600 píxeles.
li {
margin-top: 0 ; Con im a anchura fija, la página w eb pierde parte
margin-right: 0 ;
de su flexibilidad inherente porque ya no se
margin-bottom: 0;
adapta a la ventana del navegador, pero los di­
seños fijos con un núm ero de píxeles definido
margin-left: lem; /* Margen (9
facilitan el aprendizaje. H ablarem os de las indi­
izquierdo */
caciones de anchura flexibles con porcentajes o
} la unidad ern a partir de la pág. 79.
3. G uarda la hoja de estilos y abre las páginas
w eb en el navegador.
46 Formato de márgenes y espacios con el modelo de cajas

A nchu ras fle x ib le s

Si te apetece experim entar, sustituye 720px

por una indicación porcentual com o 70%. En
ese caso, #wrapper siem pre tendrá una anchu­
ra correspondiente al 70% del elem ento que lo
envuelve, que no es otro que body.

Centrar la página: margin:auto

D esgraciadam ente no existe ningún com ando
que signifique "centrar el elem ento en la pági­ Fig. 34: Arriba 10 píxeles y centrado
n a", por lo que nos vem os obligados a recurrir a
un pequeño truco: si los m árgenes exteriores M argin se sitúa en el exterior del cuadro y ad­
(m argin) izquierdo y derecho se establecen en au­ quiere el color del elem ento que lo envuelve, en
tom ático, siem pre tendrán el m ism o tam año y la este caso body.
página se m ostrará centrada.
Parches para Internet Explorer
Al m ism o tiem po asignarem os a #w rapper un
m argen superior e inferior de 10 píxeles para Prácticam ente todos los navegadores com ­
que no quede pegado al borde de la ventana del prenden ntargin: auto; y centran el contenido
navegador. en la página, excepto Internet Explorer 5.x.
---------------------- Para no com prom eter la legibilidad de la hoja
Tarea: centrar #wrapper en la página web de estilos con todos los parches para Internet
Explorer, a partir de la pág. 83 los integrare­
1. C om pleta la hoja de estilos con las líneas
m os de form a que IE sea el único en verlos.
resaltadas en negrita:
#wrapper {
color: black;
background-color: white; Creación de un borde: border
width: 720px; Border perm ite definir líneas de borde. En la si­
margin-top: lOpx; guiente tarea asignarem os un borde al pie de la
margin-right: auto; /* Margen página y definirem os los m árgenes interior su­
derecho automático */ perior (padding-top) y exterior superior (margin-
margin-bottom: lOpx; top).
margin-left: auto; /* Margen
izquierdo automático */ Tarea: crear una borde para #p/e
} 1. D ebajo de ttencabezado añade una regla CSS
2. G uarda la hoja de estilos y abre las páginas para #pie:
w eb en el navegador.
#pie {

Tras aplicar estos cam bios, la página adquirirá padding-top: lOpx; /* Relleno

este aspecto: superior, debajo de la línea */

border-top: lpx solid # 8 c 8 c 8 c; /* <9
Borde superior */
margin-top: 20px; /* Margen <P
superior, encima de la línea*/
}
2. G uarda la hoja de estilos y abre las páginas
w eb en el navegador.
 Formato de márgenes y espacios con el modelo de cajas 47

Las tres declaraciones describen los m árgenes de

la siguiente forma:
• padding-top es la distancia entre el texto de
1. Com pleta la hoja de estilos con las líneas
address y la línea de borde justo encima.
resaltadas en negrita:
• border-top crea un borde arriba de 1 píxel de
grosor, sólido y de color. #encabezado {
• margin-top ajusta la distancia entre la línea y color: black;
el elem ento que se encuentra encima. background-color: #f3c600;
padding-top: lOpx;
padding-right: 20px;
Más espacio alrededor: padding padding-bottom: 0;
padding-left: 20px;
Uno de los problem as de diseñar con CSS es que
}
a veces no se sabe m uy bien a qué caja debe
#navegacion {
asignarse qué propiedad para lograr el efecto
padding-top: 5px ;
deseado.
padding-right: 2 0 px;
Para crear un poco de acolchado entre el texto y padding-bottom: 5px;
el borde de tw rapper, coloca un pudding de, por padding-left: 2 0 px;
ejem plo, 20 píxeles cerca de ttzvrapper. Sin em ­
}
bargo, esto no tiene el efecto deseado, puesto #areatexto {
que de esta forma el encabezado tam bién ad­ padding-top: 2 0 px 7
quiere un margen blanco alrededor: padding-right: lOpx;
padding-bottom: 2Qpx;
& £ *■ padding-left: 2 0 px;
}
#pie {
padding: 2 0 px;

L3C
padding-top: lOpx;
UXF»<*Won*i -Sía-' -o*
1 1
«r-cvactas ■> condnps t*-s«euiur-a.
■oOj* hj n»>n«)<.k urs\r*. gr¿6cao-am
Kp.i«.tar ■ A x » ixce f^rr- • cm i
bas.'•*««*
tí» f-xc*r*t*ivar.C*comns**<4*i, e— soer--je¡aa•y¿-»hosto1» »e««*nsd8 border-top: lpx solid #A9122A;
margin-top: 20px;
}
2. Guarda la hoja de estilos y abre las páginas
•: ü: j* »i w eb en el navegador.

Ahora las tres secciones tienen un padding dis­

Fig. 35: #wrapper con padding de 20px - no vale la pena tinto, y en conjunto el resultado parece bastante
usable.
Una solución m ejor en este caso sería definir un
padding individual para los distintos div.

Fig. 36: Página de inicio con padding entre el texto y el borde

48 Formato de márgenes y espacios con el modelo de cajas

Imagen de fondo: background-im age

El modelo de cajas y los colores Si deseas aplicar un degradado de color al enca­
El m odelo de cajas resulta especialm ente im por­ bezado, puedes lograrlo utilizando una im agen
tante a la hora de asignar colores a una página. de fondo. La im agen del ejem plo es algo más
Veamos un breve resum en: ancha que la sección de encabezado (concreta­
Propiedad Comportamiento m ente 1024 x 5 píxeles), se llam a encabeza-
do_bg_rep.jpg y la puedes descargar del suple­
background-color Define el color de fondo para el conteni­
do de la caja.
m ento del cuaderno. Deberás guardarla en la
m ism a carpeta que la hoja de estilos.
padding El relleno de la caja adopta el color de --------------------------------------------------------------------------
background-color.
Tarea: definir un margen interno
border El límite de la caja tiene su oropio color,
estilo de linea y anchura. 1. C om pleta la hoja de estilos con la línea re­
margin El margen exterior de la caja adopta el saltada en negrita:
color de la caja que la envuelve (elemen­
#encabezado {
to padre).
color: black;
Tabla 10: La definición de colores y el modelo de cajas background-color: #f3c600;
El color de fondo del área de contenido se ex­ background-image:
tiende hasta debajo de la línea de borde. A sí, si la url(encabezado_bg_rep.jpg)7
línea de borde m uestra agujeros al utilizar los es­ padding-top: lOpx;
tilos dashed, dotted, double el color de fondo del padding-righc: 2 Opx;
elem ento se m uestra a través de ellos. padding-bottom: 0;

Todo parece perfecto, pero una im agen vale m ás padding-left: 20px;

que m il palabras. En el siguiente ejem plo rodea­ }

rem os el logotipo G IF del encabezado con un 2. Guarda la hoja de estilos y abre las páginas
borde gris claro únicam ente con las propiedades w eb en el navegador.
del m odelo de cajas:
La im agen de fondo se coloca sobre el color de
Tarea: asignar colores a la imagen del encabe­ fondo, de m odo que éste solam ente será visible
zado cuando la im agen de fondo no pueda m ostrarse
por algún m otivo.
1. C om pleta la regla de #encabezado im g com o
sigue: La ruta de acceso a la im agen de fondo
#encabezado img {
La ruta de acceso al archivo de im agen siem ­
background-color: white;
pre hace referencia al m ism o lugar donde se
padding: 5px;
encuentra el archivo CSS, y por cada elem ento
border: 5px solid #d9d9d9;
H TM L solam ente se puede integrar una im a­
} gen de fondo.
2. G uarda la hoja de estilos y abre las páginas
web en el navegador.
Mosaico de imágenes: background-repeat
El logotipo tendrá este aspecto: Al igual que en H TM L, una im agen de fondo se
repite en horizontal y vertical tantas veces com o
Fig. 37:
Logotipo con fondo sea posible según el espacio disponible.
l i i h h l e b P X E S w * 8888 blanco y borde gris
tte p á g in a » w «b c o n C S S . F u n d a m e n to s Sin em bargo, CSS ofrece m ás posibilidades. Así,
por ejem plo, podríam os repetir la im agen úni­
cam ente en una dirección:

Imágenes de fondo con CSS #encabezado {

background-color: #f3c600;
Los gráficos con un contenido inform ativo, co­ background-image:
m o puede ser el logotipo del encabezado, se in­ urliencabezado_bg_rep.jpg);
background-repeat: repeat-y; /* vertical <9
tegran en el código H TM L con el elem ento im g.
{uno debajo de otro) */
Por el contrario, las im ágenes decorativas se in­
}
tegran en CSS com o im agen de fondo.
Código 21: Repetición de la imagen de fondo sólo vertical
 Formato de márgenes y espacios con el modelo de cajas
Para crear una repetición horizontal en el eje X
podem os utilizar repeat-x, y si no querem os que
la im agen de fondo se repita, basta con utilizar el
valor no-repeat.
Posicionamiento de una imagen de fondo:
background-position
Las im ágenes de fondo se pueden posicionar,
por ejem plo arriba a la izquierda:
#encabezado {
background-color: #f3c600;
background-image: &
url(encabezado_bg_rep.jpg);
background-repeac: repeat-y;
background-position: top left;
} CSS de la forma m ás clara posible. En este senti­
Código 22: Posicionamiento de la imagen de fondo
La posición de la im agen de fondo se puede de­
term inar m ediante left, right, top, bottom o center.
Si se utilizan dos valores, el prim ero se aplica a
la posición horizontal y el segundo a la vertical.
Para centrar la im agen sólo hay que utilizar la
palabra center (p. ej. background-position: center;).
Imagen de fondo fija: background-attachment
N orm alm ente, una im agen de fondo se desplaza
con la página, pero tam bién es posible fijar su
posición:
#encabezado {
background-color: #f3c600;
background-image:
u r l (encabezado_bg_rep.jpg);
background-attachment: fixed; /*
no se desplaza * /
) #navegacion { . . .
Código 23: Fijar la imagen de fondo
Si la im agen de fondo está fija, el contenido se
desplazará por encim a de la im agen.
Form a abreviada de background
Para definir im ágenes de fondo tam bién exis­
te una form a abreviada con la propiedad back­
ground. Más inform ación en W 3Schools:
http://www.w3schools.com/css/
css background.asp
49
Trucos para redactar hojas de
estilos
Para term inar este capítulo, m e gustaría dar un
par de consejos útiles para la organización de las
hojas de estilos y para redactar reglas CSS de
form a efectiva, ya que las hojas de estilos se
vuelven m enos legibles a m edida que crecen.
Comentarios CSS: secciones lógicas en la
hoja de estilos
Las hojas de estilos pueden abarcar fácilm ente
varios cientos de líneas de código, por lo que
deberías em pezar desde el principio a redactar
do, puede ser útil dividir la hoja de estilos en
distintas secciones m ediante el uso de com enta­
rios de varias líneas.
En el siguiente ejem plo, he dividido la hoja de
estilos en una parte para las secciones div y otra
para los elem entos H TM L generales com o h l
y p:
body {
/* ===========
1. Secciones DIV
#wrapper { ... }
#encabezado { . . . }
}
#areatexto { . • • }
#pie ( . . . )
2. Elementos HTML generales
hl { ... }
/* etc. * /
Código 24: Los coinentarios CSS facilitan la lectura de las hojas de
estilos
En lugar de los signos de igual, tam bién pode­
m os utilizar una alm ohadilla # o cualquier otro
sím bolo. Lo im portante es que la construcción
em piece con / * y term ine con * / .
50 Formato de márgenes y espacios con el modelo de cajas

¿Qué secciones debes crear en tus hojas de esti­

los y qué nom bres debes asignarles? Es una
cuestión de tus necesidades personales. Lo único
que im porta es que se m antenga la visión de
conjunto.
Del interior al exterior: un orden lógico
Una regla CSS suele estar form ada por varias
declaraciones. En estos casos, se im pone la nece­
sidad de encontrar un orden lógico. He aquí una
regla para un título h2 ficticio:
Escritura abreviada para padding
y margin
A continuación, te m ostraré un par de consejos
para m ejorar la escritura de las declaraciones, en
particular para padding y margin.
Los cuatro lados iguales
Las dos reglas CSS siguientes tienen el m ism o
efecto:

h2 { Escritura desarrollada Escritura abreviada

font-size: 130%;
font-style: normal;
^encabezado { #encabezado {
padding-top: 20px; paddina: 20px?
letter-spacing: 2px; padding-right: 20px; }
padding-top: 10px; padding-bottom: 20px;
border-top: Ipx solid #A9122A; paddir.g-left: 20px;
margin-top: 20px; [}
} Tabla 11: Escritura desarrollada y abreviada, parte 1
Código 25: El orden de las propiedades en una declaración

El orden de las seis declaraciones del ejem plo El orden es decisivo: sólo un lado diferente
anterior no es fruto de la casualidad, sino que se El ejem plo siguiente asigna un padding alrede­
basa en la estructura del m odelo de cajas: d or del elem ento de 20px, excepto porque no
hay un padding inferior. C uando varias defini­
• Al principio se incluyen las instrucciones ciones tienen valores en conflicto, se aplica el úl­
para el área de contenido\font-size, fon t-style tim o que se indica:
y letter-spacing.
• Después les siguen las definiciones de pad­ Escritura desarrollada Escritura abreviada
ding, border y margin exactam ente en este or­ #encabezado { #encafcezado {
den. padding-top: 20px; padding: 20px;
padding-right: 20px; padding-bottom: 0;
Las declaraciones están redactadas de form a que padding-bottom: 0; }
describan el elem ento desde dentro hacia afuera: en padamg-left: 20px;
}
prim er lugar el contenido, después el margen in­
terior, seguido de los bordes y el margen exterior. Tabla 12: Escritura desarrollada y abreviada, parte 2
Esta ordenación de las instrucciones te ayudará E n la escritura abreviada, la prim era línea define
a interiorizar m ejor la estructura del m odelo de u n padding de 20 píxeles, y la siguiente línea es­
cajas y podrás visualizar m ás fácilm ente el for­ tablece el padding-bottom en 0. Si las instruc­
m ato del elemento. ciones se contradicen, se aplica la últim a instruc­
ción definida.
O rden alfabético : una b u e n a opción
A tención: el encabezado del siguiente ejem plo
O tro m étodo m uy utilizado para las declara­ tendrá un padding-bottom de 20 píxeles a pesar
ciones es el orden alfabético. En este caso, de haber establecido padding-bottom explícita­
tam poco tendrás que dedicar dem asiado m ente en 0:
tiem po a buscar una determ inada propiedad #encabezado {
dentro de una declaración. padding-bottom: 0;
padding: 20px;
}
Código 26: El padding-bottom de la linea 2 se sobrescribe en la li­
nea 3
 Formato de márgenes y espacios con el modelo de cajas 51

Distintos valores para los cuatro lados

Recordatorio
En el siguiente ejem plo, declararem os un valor
diferente para cada uno de los lados de un ele­ Para term inar el capítulo, repasem os los concep­
m ento: tos m ás im portantes:

Escritura desarrollada Escritura abreviada • El m odelo de cajas (box model) es el esquem a

a partir del que se construyen todas las cajas
^encabezado { #encabezado { de la página web.
padding-top: lOpx; padding: lOpx 20px 0
padding-right: 20px; 2Qpx; • Cada caja se com pone de las siguientes pro­
padding-bottom: 0; } piedades:
padding-left: 20px;
¡} - Área de contenido con zvidth y height
Tabla 13: Escritura desarrollada y abreviada, parte 3 - M argen interior (padding)
- Borde (border)
La ventaja de la escritura desarrollada es que es
- M argen exterior {margin)
m uy fácil de com prender. La abreviada, por el
contrario, conlleva m enos esfuerzo. • Los m árgenes verticales exteriores se unifi­
El orden de las cuatro instrucciones es fácil de can {collapsing margins).
recordar, porque siem pre parte del extrem o su­ • La anchura total de una caja es el resultado
perior y sigue en sentido horario: de sum ar zvidth y padding y border y margin
• Para evitar problem as con los ajustes de los
• top (superior) - right (derecha) - bottorn (infe­ distintos navegadores, es necesario calibrar
rior) - left (izquierda) los m árgenes y fijar los valores de padding y
margin a cero.
Por partes: arriba = abajo e izquierda =
• Para centrar horizontalm ente una sección, se
derecha utiliza margin: auto;
Es posible acortar aún m ás la declaración cuan­ • El m odelo de cajas se utiliza para dar form a­
do los valores de izquierda y derecha y de arriba to a m árgenes y superficies de color.
y abajo coinciden: • Las im ágenes decorativas se integran en el
Escritura desarrollada Escritura abreviada código CSS com o im agen de fondo.
#wrapper { ttwrapper { • Es posible dividir las hojas de estilos en sec­
margin-top: lOpx; margin: lOpx auto; ciones lógicas con ayuda de com entarios.
margin-right: auto; } • Existen distintas form as de escritura abre­
margin-bottom: lOpx;
margin-left: auto; viada para padding y margin.
>_________
Tabla 14: Escritura desarrollada y abrroiada, parte 4
52 Navegación, versión para imprimir y form ulario de contacto

Navegación, versión para im prim ir y

form ulario de contacto
En este capítulo daremos forma a la navegación y juntare­ ....
Tarea: juntar los elementos de la navegación al
mos al mismo nivel los elementos de listas, primero de for­
mismo nivel
ma sencilla y después en una versión avanzada con pesta­
ñas. Para terminar, crearemos una versión para imprimir y 1. A grega la línea resaltada en negrita a la
un formulario de contacto. hoja de estilos:
^navegación {
En la página 19 ya advertí que las listas no orde­ background-color: #ffedaO;
nadas suelen utilizarse com o base para la nave­ padding-top: 5px ;
gación, aunque no lo parezca al ver las barras de padding-left: 2 0px;
navegación con form ato. En este capítulo vere­ padding-bottom: 5px;
m os dos variantes:
padding-left: 20px;
• Una navegación horizontal sencilla. }
• Una navegación horizontal m ás avanzada #navegacion li {
con fichas (tabs). display: inline; /* li al mismo &

A dem ás, a partir de la pág. 76 descubrirás cómo nivel */

crear una navegación vertical.
Elementos de listas juntos:
display: inline
El siguiente m étodo no es la única posibilidad
para colocar los elem entos de listas unos junto a
otros, pero presenta la ventaja de que ya tienes el
conocim iento suficiente para aplicarlo. El uso
creativo de las cosas sim ples suele ser la clave
del éxito en la aplicación de form ato con CSS.
El selector anidado #navegacion li
Los elem entos de listas son elem entos de bloque,
por lo que suelen m ostrarse unos debajo de
otros. C on la propiedad CSS display podem os
m odificarla form a en que se m uestran, para
convertir un elem ento de bloque en un elemento
inline o viceversa.
Para lim itar las m odificaciones de los elementos
de listas al área de la navegación, utilizarem os el
selector anidado #navegación li, es decir "Todos
los elem entos de lista de la navegación". Al
m ism o tiem po, aprovecharem os la tarea para de­
finir un color de fondo para la navegación:
list-style-type: none; /* sin
viñetas*/
}
2. G uarda la hoja de estilos y observa las pá­
ginas w eb en el navegador.
La navegación adquirirá este aspecto tras aplicar
los cambios:
U ittle t l D X E S
Diseño de páginas w eb con C S S . Fundamentos.
Inicio C o n ta c to
Fig. 38: Elementos de listas al mismo nivel - casi perfecto
Todavía debem os hacer tres cosas:
• Entre el encabezado y la navegación se
m uestra un hueco blanco.
• La sección de navegación tiene dem asiado
m argen hacia abajo.
• El prim er punto de la navegación tiene una
sangría izquierda no deseada.
Ajustes: márgenes e hipervínculos
La hoja de estilos contiene las instrucciones cul­
pables de estos tres defectos que, sin querer, no
pasan desapercibidos. Por orden son:
 Navegación, versión para imprimir y formulario de contacto 53

• El espacio blanco lo genera el margin-bottom Ahora ya tiene m ejor aspecto:

de le m para los párrafos. De esta form a el p ----------------------------------
del encabezado tam bién tiene este m argen ex­
terno.
| Little bOXE5
D is e rto d e p á g i n a s w a b c o n C S S . F u n d a m e n t o s .
• El gran espacio debajo de la navegación se Inicio Contacto
debe a que las listas no ordenadas ul tienen
Fig.. 39: La barra de navegación terminada
un margen inferior de lem .
• La sangría involuntaria hacia la izquierda
surge porque los elem entos de lista li tienen
un margin izquierdo de lem . Especificidad (specificity) en la
Para corregir los tres errores podem os utilizar práctica
selectores anidados que lim iten la aplicación de
En el capítulo sobre los selectores ya hem os
los cam bios al área afectada.
hablado de la especificidad. Este sistem a de
Para m ejorar la legibilidad de la hoja de estilos, puntos se aplica en todo su esplendor para dar
todas las reglas C SS anidadas que se refieran al form ato a la barra de navegación.
área del encabezado o la navegación tendrán
Por ejem plo, observa las reglas para ul:
una sangría de dos espacios en blanco. A dem ás,
en la tarea siguiente cam biarem os el color de • ul I margin: 0 0 lem 0; I es un selector sencillo
fuente de los hipervínculos de la navegación de y obtiene 1 punto.
rojo a negro. • #navegación ul ( margin: 0; I es una ID m ás un
" ' 1- ' ----- selector sim ple, que sum an 101 puntos.
Tarea: modificar distancias e hipervínculos en A sí, con 101 frente a 1 #navegación ul gana por
#navegacion goleada y la Esta no ordenada de la navegación
1. A grega la siguiente regla debajo de #enca- no tiene ningún margin-bottom.
bezado img: En el caso del color de los vínculos ocurre algo
#encabezado p { parecido:
padding: 5px 0 5px 0;
• a:link y a:visited obtienen 11 puntos cada
margin-bottom: 0; /* era lem */ uno: 1 para a y 10 para la pseudoclase.
} • Las declaraciones para tbwvegacion a tienen
2. A ñade las líneas resaltadas en negrita de­ 101 puntos y ganan.
bajo de #navegacion:
En consecuencia, los vínculos de la navegación
#navegacion ul { tienen un color de fuente negro.
margin-bottom: 0; /* sin margen <P
A propósito: el efecto de rollover que hem os de­
inferior */
finido para adiover con el subrayado tam bién se
} aplica a los vínculos de la barra de navegación,
^navegación li {
al igual que el fondo rojo para a:active.
display: inline;
list-style-type: none; A sí, en el m om ento de hacer clic en ellos los vín­
margin: 0 lOpx 0 0 ; / * derecha lOpx, <9
culos de la navegación tienen texto negro sobre
fondo rojo.
sino 0 */
} Para corregir este error inesperado, veam os la
#navegacion a { color: black; } siguiente tarea.
3. Guarda la hoja de estilos y observa las pá­
ginas web en el navegador.
54 Navegación, versión para imprimir y form ulario de contacto

Tras aplicar los cam bios, la sección superior de la

vínculos activos de la
página web tendrá m ás o m enos este aspecto:
W
íMS¡%
1. A grega la siguiente regla CSS debajo de . tittie b o x e s i
#navegacion a\ rtecfo d i £,*?*•*.S con CSS- F ln d * n «n !e s
i
M eé Contoe »<_•

#navegacion a:active { background-color: Fig. 40: Texto a la derecha, otro color, linea de borde oscura
white; }
2. G uarda la hoja de estilos y observa las pá­ Modificar los vínculos de la navegación
ginas w eb en el navegador. También deberem os adaptar ligeram ente los h i­
pervínculos de la navegación:
• Deben tener un color de fondo propio.
• A um entarem os el padding para que el texto
Tabbed Navigation - Navegación tenga cierta distancia desde el borde de la
con fichas caja.
• A plicarem os la m isma línea de borde a la
Los tabs en una página web son lo que se conoce
izquierda, derecha y arriba de los vínculos
com o registros, pestañas o fichas. Los tabs se uti­
que la que tiene la navegación abajo.
lizan m ucho para la navegación porque resaltan
--------------------------------------------------------------------------
claram ente las distintas opciones disponibles y
Tarea: dar formato a los hipervínculos del área
la m ayoría de usuarios ya están fam iliarizados
con ellos.
de navegación
1. M odifica el C SS de los hipervínculos de la
Medidas preliminares para la navegación sección de navegación:
Com o preparación, deberíam os m odificar un
#navegacion li {
par de cosas para #navegación:
display: inline;
• El texto de navegación debe alinearse a la de­ list-style: none;
recha. margin: 0; /* antes era lOpx para <9
• El fondo se adaptará al encabezado para que la derecha */
las secciones de encabezado y de navegación }
parezcan una sola sección. #navegacion a {
• M odificarem os ligeram ente el padding para color: black;
que la sección sea m ás bonita. background-color: #ffeda0;
• La navegación tam bién debe tener una línea padding: 4px 8px 4px 8px;
de borde com o separación. border: lpx solid #8c8c8c;
}
Tarea: preparar la navegación para las pesta­
2. G uarda la hoja de estilos y observa las p á­
ñas ginas web en el navegador.
1. M odifica el área de navegación en el códi­
go C SS com o sigue: Puesto que los vínculos tienen ahora un padding
propio, el m argen exterior derecho de los ele­
#navegacion {
m entos de la lista ya no es necesario, y lo hem os
text-align: right; /* a la derecha */
cam biado de lOpx a 0.
color: black;
background-color: #f3c600; Tras aplicar los cam bios, la parte superior de la
bac kground -image: <P página tendrá este aspecto:
u r l ( e n c a b e z a d o b g r e p .jpg);
background-repeat: repeat-y;
uttie b n x e s 1
d» concss. rmémcmo» ♦
background-position: top left;
padding: 5px lOpx 4px lOpx; Fig. 41: Con links modificados - casi listo
border-bottom: lpx solid #8c8c8c;
}
2. G uarda la hoja de estilos y observa las pá­
ginas w eb en el navegador.
 Navegación, versión para imprimir y formulario de contacto 55

Definir un efecto rollover para los vínculos Y com o suele ser habitual, la solución es sencilla
Q uerem os aplicar un efecto rollover a los víncu­ si se sabe cóm o hacerlo. H em os definido una ID
los de la navegación. En cuanto el punto del ra­ para body en la estructura HTML:
tón se coloque sobre los enlaces: • <body id="inicio"> en la página de inicio
• Se elim inará el subrayado de los vínculos. • <body id= “p ag con tad o "> en la página de con­
• Los vínculos tendrán un fondo blanco. tacto
• D esaparecerá la línea de borde inferior de Al crear la lista de navegación, tam bién hem os
m odo que la pestaña se abra hacia abajo. asignado una ID a los elem entos de la lista:
Para que desaparezca el borde deberem os apli­ • <// id = ”navi01 "> en el punto de m enú de la
car una sencilla y genial com binación de dos de­ página de inicio
claraciones: prim ero aum entam os el padding in­ • <li id = ”navi02"> en el punto de m enú de la
ferior de 4 a 5 píxeles, y después elim inam os la página de contacto
línea de borde inferior.
5-------------------------------------------------------------------------------------------------------------------------------------------------
Podem os utilizar una com binación de estas ID
para resaltar el punto de m enú actual con ayuda
Tarea: definir un efecto rollover para los víncu­
de selectores anidados.
los de la navegación _— .— _ _ _ _ _ _ — ■ ■
1. A grega las siguientes líneas de código de­ Tarea: resaltar visualmente el punto de nave­
bajo de la regla para los hipervínculos de gación actual
la sección de navegación:
1. A ñade los dos selectores m arcados en ne-
#navegacion arhover { grita:
text-decoration: none; /* <9
#navegacion a:hover, / * con coma al <9
fuera el subrayado */
final */
color: black;
#inicio #navi01 a, /* con coma al &
background-color: white;
final */
padding-bottom: 5px; /* un píxel <P
#pagcontacto #navi02 a /* sin coma al <9
más que arriba * /
final */
border-bottom: none; /* adiós &
{
a la línea inferior */
}
}
2. G uarda la hoja de estilos y observa las pá­
2. G uarda la hoja de estilos y abre las páginas
ginas web en el navegador.
w eb en el navegador.
D espués de aplicar los últim os cam bios, la parte
El form ato para el efecto rollover tam bién se
superior d e la página tendrá este aspecto:
■— —
aplica a los dos selectores siguientes. La com bi­
nación #itiicio ttnaviOl solam ente se encuentra en
|little bnXES la página de inicio, y #p ag con tad o #navi02 sola­
O W t t t ó* p d Q irts* C o r C Í -5 r u k M m c n td s

m ente en la página de contacto. Sim ple y genial.

Fig. 42: No está nada mal - la navegación con efecto rollover Una vez aplicados los últim os cam bios, la pági­
na tendrá m ás o m enos este aspecto:
Ud. está aquí: resaltar la página actual
Todavía nos falta una forma visual de indicar al § lit t le b O X E S
CV*«Ao Oé ntb CSS fyrvlannoc*»
visitante en qué página se encuentra. Lo ideal Inoo C v .tí4 i!

sería que la pestaña actual tenga el m ism o aspec­ Con tacto bbe. t
to que durante el efecto de rollover. ¿Ol» * a u t farwutano CtfXXtS.

Fig. 43: Navegación con tabs, el punto de menú actual resaltado, y

todo únicamente con CSS
56 Navegación, versión para imprimir y formulario de contacto

En esta hoja de estilos ocultarem os el skip-link y

Crear una versión para imprimir la sección de navegación, ya que no tienen sen­
de las páginas tido sobre papel.

M uchas páginas ofrecen una versión para im ­ Tarea: ocultar la navegación y el skip-link al
prim ir en la que el contenido está preparado pa­ imprimir
ra su salida a la im presora. CSS perm ite autom a­
tizar este proceso y dar form atos separados a las 1. Crea una nueva hoja de estilos con las si­
páginas en función de si se visualizan en panta­ guientes reglas CSS:
lla o se im prim en. .skiplink { display: none; }
El elem ento link, que vincula los archivos HTM L #navegacion {display: none,* }
y CSS, acepta el atributo media para indicar el 2. G uarda la hoja com o versionim prim ir.css en
m edio de visualización. De este m odo es posible la carpeta de ejercicios del cuaderno.
utilizar una hoja de estilos exclusivam ente para 3. Abre las páginas index.html y contacto.htm l
la visualización en pantalla o para la impresora. y agrega la línea de código resaltada en
negrita:
Utilizar una hoja de estilos para la
<head>
visualización en pantalla
<!-- Otros elementos HTML
Para, por ejem plo, lim itar la hoja de estilos que
<link href="littleboxes.css" ... &
hem os creado para la pantalla, sólo tenem os que
media="screen" />
com pletar link con el atributo m edia="screen".
<link href»"versionimprimir.css" <P
■ ' — " . ,..
rel="stylesheet" type»"text/css" &
Tarea: utilizar una stylesheet solamente para la
media»"print" />
visualización en pantalla
</head>
1. A bre las dos páginas index.htm l y contac­ 4. Guarda todos los archivos y observa las
to.html en el editor. páginas web en el navegador.
2. Com pleta en am bos archivos el elem ento
link com o sigue (debe estar en una sola lí­ Para com probar que funciona, activa nuevam en­
nea): te la vista previa del navegador:
clink href="littleboxes.css" <P
rel="stylesheet" type="text/css" <P Little b O X E S
Efcse&j dspsEüfl* web Facdaoeotos
media»"screen" />
3. G uarda la hoja de estilos y observa las pá­ Inicio
ginas w eb en el navegador. Las piíSMs e*an coapae «tas de cutiros recta agolares que se peedee rofecac ta»s «as» a
«ros o fflpcTproweon dte? Twk? t eqee sea redondo es na troco, ac aüfeo c sróas rosas
Lo» ágemete» pasos tmreitrec n caartnc» d&d» te rtwnón de te? ratas hasta la íss-vw
En el navegador no ha cam biado nada en panta­ wmiensda

lla, pero haz la prueba seleccionando la vista

Fig. 44: Versión para imprimir sin skip-link y navegación
previa de im presión, que en la m ayoría de nave­
gadores se encuentra dentro del m enú A rchivo: Ya hem os term inado la versión para im prim ir
sim ple. N aturalm ente, puedes dar otro form ato
• En la vista previa, el navegador m uestra la
a todos los elem entos en versionimprimir.css y uti­
página sin form ato, ya que la hoja de estilos
lizar unidades com o cm y pt.
únicam ente está destinada al m edio pantalla
(screen).
O tros m edios

Integrar una segunda hoja de estilos para la A dem ás de screen y print, CSS tam bién acepta
impresión otros m edios de salida. En SelfH TM L encon­
El siguiente paso es crear una segunda hoja de trarás un listado detallado:
estilos con el nom bre versionimprimir.css. U tiliza­ http://es.selfhtml.Org/selfhtml7/tdba.htm#a3
rem os esta hoja únicam ente para la versión im ­
presa de la página, integrándola con el elem ento
link e indicando m edia="print".
 Navegación, versión para im prim ir y formulario de contacto 57

Un formulario para la página de M ás detalles sobre los form ularios

contacto Si deseas am pliar el form ulario de contacto,

Form ularios, form ularios y nada m ás que for­
m ularios. En la rutina diaria, los form ularios tie­
nen una connotación principalm ente negativa.
Pero en la w eb, todas las interacciones con el
usuario se basan en form ularios.
Paso 1: el form ulario en el código HTML
La página de contacto hace tiem po que espera
que incluyam os un form ulario de contacto. Pues
bien, ha llegado su m om ento.
_— ---- — ---------------
Tarea: crear un formulario de contacto HTML
sencillo
1. A bre la página contacto.htm l en el editor y
agrega las siguientes líneas en el área de
texto, debajo del título h2 C ontacto:
encontrarás una referencia com pleta en
SelfH TM L:
http://es.selfhtml.orq/html/formularios/index.htm/
Paso 2: aplicar formato al formulario
mediante CSS
Con un par de reglas CSS sencillas podem os
hacer que el form ulario parezca m ás atractivo.
Enseguida nos ocuparem os de la explicación de
las distintas definiciones.
Tarea: dar formato al formulario de contacto
mediante CSS
1. A grega las siguientes líneas al final de la
h o ja de estilos:
/* = ===========================

<form id="formulariocontacto" <P El formulario de contacto

name="formulariocontacto" action=""> ==========.==========.====== */
<div> form {
clabel for-"remitente">Tu e-mail:<P background-color: #eee;
</label> width: 4 OOpx; /* anchura del formulario*/
cinput type="text" id="remitente" <P padding: 2 Opx;
name="remitente" /> border: lpx solid #8c8c8c;
</div> }
<div> label { display: block; } /* <9
<label for="text">Texto: </label> título en una línea propia */
ctextarea id="text" name="text " ><P /* ambos campos de entrada iguales */
< / textarea> #remitente, textarea {
c/div> width: 3OOpx;
<div> border: lpx solid #8c8c8c;
cinput type="submit" id="submit" margin-bottom: lem;
value="Enviar" /> }
</div> textarea { height: 7em; }
</form> input:focus, textarea:focus
2. G uarda la página y ábrela en el navegador. {
background-color: #d9d9d9;
Este código fuente crea un form ulario con un so­ }
lo cuadro de entrada para la dirección de correo 2. G uarda la hoja de estilos y abre la página
electrónico, un área de texto para introducir tex­ en el navegador.
to y un botón para enviar el form ulario. No es
m aravilloso, pero lo tiene todo: El form ulario tendrá este aspecto:
C o n ta cto Fig. 45: Fig. 46:
El formulario sin El formulario ter­
form ato minado
58 Navegación, versión para imprimir y formulario de contacto
A continuación, analicem os en detalle las reglas:
• El estilo de fo r m es simple: ya conocem os las
instrucciones para color de fondo, anchura,
relleno y borde.
• En la segunda regla el elem ento inline label
se convierte en elem ento de bloque. De este
m odo el cam po del form ulario tiene una lí­
nea propia y logram os suficiente espacio pa­
ra el título descriptivo.
• El cam po #remitente para la dirección de e-
m ail y el cam po de com entarios textarea tie­
nen el m ism o form ato: 300 píxeles de anchu­
ra, con una fina línea de borde y un m argen
exterior inferior de lem .
• En la siguiente regla, el cam po de com enta­
rios textarea recibe una altura de 7em , de
m odo que en caso de am pliar la fuente tam ­
bién se vuelva m ás grande.
• La últim a regla para in pu tfocu s asigna un
color de fondo a los cam pos del form ulario
cuando el usuario escribe algo en ellos. No
funciona en todos los navegadores, pero no
tiene efectos secundarios.
Para term inar el form ato del form ulario pon­
drem os los puntos sobre las íes. Con un código
JavaScript de una sola línea facilitarem os el uso
del form ulario colocando el cursor en el prim er
cam po del form ulario en cuanto se cargue la pá-
gina.
Tarea: posicionar el cursor en el primer campo
del formulario
1. M odifica el tag de <body> de la página de
contacto com o sigue (el com ando puede
aparecer en una línea):
cbody id="pagcontacto" onload="document.<9
formulariocontacto.remitente.focus();">
2. G uarda la página y ábrela en el navegador.
onload significa que el navegador debe ejecutar
la línea de código cuando se cargue la página
w eb. docum ent.form ulariocontacto. rem itente.focusí);
significa:
• Busca en el docum ento actual (document) un
elem ento cuyo nom bre sea form ulariocontac-
to.
• En dicho elem ento, busca un cam po con el
nom bre rem itente y coloca el cursor en él (fo-
cus).
En caso de que JavaScript esté desactivado en el
navegador, no ocurrirá absolutam ente nada.
Paso 3: definir el destino del formulario
Al hacer clic en el botón Enviar, los datos del for­
m ulario se enviarán a un program a en un s e n a ­
dor web para ser procesados.
Si tu alojam iento w eb no te perm ite tener acceso
a este tipo de program a, el Form ular-C hef de
nettz.de es una alternativa sim ple y segura. Fun­
ciona sin necesidad de registrarse ni ninguna
obligación (esta es la página en inglés, la versión
original está en alem án):
• http://www.formular-chef.com/
Tarea: enviar los datos del formulario al Formu­
lar-Chef
1. Com pleta form com o sigue (el com ando
puede aparecer en una sola línea):
<form id="formulariocontact.o"
name="formulariocontacto'1 method= "post ■
action="http://www.formular-
chef.com/Formular-Chef.cgi■>
2. No te olvides de guardar el archivo.
_________________________________________________
El atributo action indica el destino de los datos
del form ulario, es decir el program a que proce­
sará los datos. A quí es donde debem os indicar la
URL com pleta del Form ular-Chef.
A dem ás, es necesario indicar m ethod= ”p o s t”. Es­
te atributo garantiza que los datos del form ula­
rio que ocupen más de 2 KB tam bién lleguen a
su destino.
La seriedad del Form ular-C hef
nettz.de gestiona el Form ular-Chef desde
agosto de 1999, y la página principal ha sido
traducida al inglés y al francés. En todo este
tiem po nunca se han producido problem as ju­
rídicos o de ningún tipo. A dem ás, nettz.de
asegura que ninguna dirección o inform ación
es alm acenada o registrada.
Puedes consultar el foro (sólo en alem án) para
conocer las opiniones de los usuarios del
Form ular-Chef:
http://www.nettz.de/forum//YaBB.cqi?board=:1
Paso 4: indicar la dirección de e-mail al
Formular-Chef
Ya casi hem os term inado. Sólo nos queda indicar
nuestra dirección de correo electrónico para que
el Form ular-C hef nos pueda enviar los datos por
e-m ail.
 Navegación, versión para imprimir y formulario de contacto
1. A ñade la línea resaltada en negrita al có­
digo de contacto.html. Sustituye TU_EM AIL
por tu dirección de correo electrónico:
<form id="formulariocontacto"
name=" formulariocontacto" method="post" <9
action="http://www.formular-chef.c o m / ^
Formular-Chef.cgi">
<input type*"hidden" name ="recipient" <9
value="TUEMAIL" />
<div>
<label for="remitente">Tu e-mail :<£
</label>
<input type="text" id="remitente" <9
name="remitente" />
</div>
2. Guarda el archivo.
El código HTM L crea un cam po de form ulario
invisible (hidden) con el nom bre recipient. El For­
m ular-Chef espera recibir la dirección de correo
electrónico en un cam po de form ulario exacta­
m ente con ese nombre.
Protégete contra el spam
Para que las direcciones de e-m ail indicadas
en el código fuente no se puedan utilizar para
spam , el Form ular-Chef ofrece un truco senci­
llo.
Sustituye el sím bolo por "X§X". De esta
form a, los robots de spam y m otores de bús­
queda no podrán reconocer tan fácilm ente tu
dirección. En lugar de:
<input type="hidden" ñame="recipient" <9
valúe="ejemplo@prueba.es"i >
Escribe:
<input type="hidden" name="recipient" <9
valúe= ej emploXSXprueba.e s M/>
Paso 5: probar el formulario
Si lo deseas, puedes probar el form ulario direc­
tam ente desde tu disco duro, con la condición de
que tengas una conexión a Internet:
• Abre la página de contacto en el navegador.
• Rellena el formulario.
• Haz clic en Enviar.
59
El Form ular-Chef enviará los datos del form ula­
rio a la dirección de e-m ail facilitada y el visitan­
te verá una página de confirm ación en el nave­
gador:
Fig. 47: La página de respuesta del Formular-Chef
En la página de respuesta, dado que estam os
usando una versión gratuita del servicio, se in­
cluye un banner publicitario. Los productos
anunciados solam ente hacen referencia a
nettz.de. N o se m ostrarán banners externos.
Recordatorio
Repasem os a continuación los puntos m ás im ­
portantes de este capítulo:
• La base de m uchas secciones de navegación
son las listas H TM L no ordenadas.
• Con displai/: inline podem os colocar los ele­
m entos de una lista unos junto a otros, al
m ism o nivel.
• CSS perm ite dar form atos muy diferentes a
la sección de navegación:
- N avegación con elem entos de lista al
m ism o nivel
- N avegación horizontal con tabs (fichas)
- Efectos rollover para hipervínculos
- Resaltado del punto de menú actual
• La definición del m edio de salida print para
el elem ento H TM L link perm ite crear fácil­
m ente versiones para im prim ir de la página.
• CSS perm ite crear fácilm ente form ularios de
contacto atractivos.
• Si no dispones de scripts del lado de servi­
dor para procesar los datos de form ularios,
el Form ular-Chef es una buena alternativa
gratuita.
60 El navegador y CSS: cascada y herencia

El navegador y CSS: cascada y

herencia
En este capítulo analizaremos la página web desde el punto body
7
de vista del navegador. El navegador crea un árbol del do­
| d«v#wrapper j
cumentek encuentra los valores para cada propiedad con la
ayuda de la cascada, y en caso necesario utiliza reglas de div#encabozado

herencia y valores por defecto. -j'a skiplink j

Este capítulo es m ás bien teórico, y si no tienes c { )

ganas de leer teoría, puedes saltarlo.
Sin em bargo, si observas fenóm enos extraños en
tu hoja de estilos que logran que te tires de los d iv ttta v e g a o o rt ]

pelos, vuelve a este capítulo y léelo con calma.

Contiene la respuesta a m uchos enigmas.

El árbol genealógico: la estructura

de la página web
U n archivo H TM L no es en realidad nada más
que una im bricación jerárquica de elem entos -C 7 E D
HTM L. Cuando el navegador recibe el código
)
del servidor w eb, lo prim ero que hace es esta­
^----- ( strorg )
blecer una visión general de dicha jerarquía para
crear un m odelo. - ( ‘ )
'-------^ ©m J
C oncretam ente se llam a "D ocu m ent O bject Mo-
d el" (DOM ), porque se trata de un m odelo de ----£ em j
los objetos, es decir, los elem entos de una página
- -
w eb. Com o es habitual en inform ática, el resul­
tado se representa en form a arbórea: — ( * )

• El elem ento m ás alto de una página es html. — ( ■ )

ul
El elem ento m aestro o raíz. Abraham . El an­ M
cestro de todos los elem entos de la página.
H “ )
• Dos elem entos derivan de html: head y body.
También podríam os decir que head y body □
son hijos de htm l, y entre ellos son herm a­ -C
M • )
nos.
'•— ^ address j
Así, todo el docum ento H TM L es com o una gran
Fig. 48: Extracto del árbol genealógico de la página de inicio
fam ilia con distintas relaciones de parentesco y
A l Bundy en el papel de body. N aturalm ente tú no eres ningún navegador y no
te interesa crear este tipo de estructuras para ca­
La estructura de la página de inicio da página, pero en la planificación de las hojas
En la siguiente ilustración podem os observar de estilos o cuando algo no funciona de ninguna
una parte del árbol de la página index.htm l, en la form a, un árbol com o este puede ser útil.
que los elem entos con ID estructural se m ues­ N o im porta si lo dibujas sobre papel o lo im agi­
tran en amarillo: nas en tu cabeza, aunque la variante de papel
seguram ente será la m ás agradable para princi­
piantes.
 El navegador y CSS: cascada y herencia
El árb o l en Firefox: H e r r a m ie n ta s - D O M
In s p e c to r
Si en el m enú H erram ientas aparece el com an­
do D O M -Inspector, podrás visualizar el árbol
que Firefox ha creado a partir del código
H TM L de la página.
Del m ism o m odo, tam bién podrás ver todos
los detalles e instrucciones C SS de cada ele­
m ento. El D O M -Inspector puede ser m uy in­
form ativo.
El orden: cascada - herencia - valor por
defecto
U na vez que el navegador ha creado el árbol del
docum ento, intenta determ inar cóm o debe re­
presentarlo. Para ello utiliza tres conceptos que
aplica uno tras otro:
1. C ascada: si se genera un valor a lo largo de
la cascada, tom a este.
2. H erencia: en caso contrario, observa si la
propiedad se hereda. En caso afirm ativo,
tom a el valor del elem ento padre, el ele­
m ento abuelo, el elem ento bisabuelo o al­
gún ancestro.
3. Valor por defecto: si nada se hereda, tom a el
valor por defecto que se ha establecido en
la especificación CSS.
El navegador aplica estos tres pasos para cada
elem ento de la estructura, y m ás concretam ente
para cada propiedad posible. E s m ucho trabajo.
La cascada de las Cascading
Style Sheets
El prim er paso es la cascada. Por cada elem ento
del árbol y por cada propiedad, el navegador
toma una decisión de varios niveles. Esta casca­
da es la que ha dado nom bre a las Cascading Sty­
le Sheets.
Por ejem plo, debem os poder recorrer la cascada
para la propiedad margin-bottom de la lista de
navegación ul. ¿Cuántos m árgenes externos se
asignan a la lista de la navegación? Tú eres el
navegador.
Nivel 1: encuentra todas las declaraciones de
un elem ento
En el prim er nivel de la cascada, el navegador
recopila todas las propiedades C SS definidas pa­
ra los elem entos H TM L que aparecen en la es­
61
tructura arbórea y los escribe en una hoja m eta­
fórica.
D urante la recopilación, debe tener en cuenta las
siguientes fuentes:
• Hoja de estilos del navegador: la hoja de estilos
integrada en el navegador.
• Hoja de estilos del autor: el autor puede incluir
reglas CSS tanto en hojas de estilos externas
com o en el código H TM L de la página.
• H oja de estilos del usuario: El usuario puede
indicarle al navegador (com o hem os visto en
la pág. 4) que ignore las indicaciones del au­
tor relativas a fuentes Jv colores e incluso uti-
lizar una hoja de estilos propia.
Es decir, en prim er lugar el navegador observa
su propia hoja de estilos. En el caso de M ozilla
Firefox se llama htm l.css y se encuentra en la
carpeta del program a, en la subcarpeta /res.
La regla de ul es la siguiente:
ul {
display: block;
margin: lem 0;
}
Código 27: Una regla CSS para ul en la hoja de estilos de Mozilla
Firefox
In ternet Explorer no es tan generoso, y se guarda
los estilos integrados para sí m ism o.
Pasem os a la hoja de estilos del autor. En el head
de la página, el navegador encuentra un vínculo
a littleboxes.css. Esta hoja incluye dos reglas rele­
vantes para ul que contienen las declaraciones
para margin-bottom:
#navegacion ul { margin-bottom: 0; }
/* ... y más abajo ... */
ul { margin: 0 0 lem 0; }
Código 28: Dos reglas CSS para ul en la hoja de estilos del autor,
littleboxes.css
Puesto que en el código H TM L de la página de
inicio no se encuentra ningún estilo y el usuario
tam poco ha utilizado ninguna instrucción CSS
especial, el navegador puede term inar su bús­
queda. Ahora que tenem os las declaraciones, el
siguiente paso es ordenarlas.
Nivel 2: ordena según el origen y la
im portancia
D espués de recopilar todas las declaraciones,
em pieza la etapa de ordenación. En prim er lugar
se m ira el origen de la hoja de estilos y la im por­
tancia de las propiedades. Estos son los distintos
62 El navegador y CSS: cascada y herencia
elem entos, de m enos im portante a m ás im por­
tante:
Origen de la declara­ 1. Hoja de estilos del
ción navegador
2. Hoja de estilos del
usuario
3. Hoja de estilos del
autor
Im portancia de las 4. Estilos del autor con
propiedades ümportant
5. Estilos del usuario
con ümportant
Tabla 15: El nivel 2 de la cascada - ordenación por origen e impor­
tancia
En los tres prim eros pasos, se analiza el origen:
las indicaciones de la hoja de estilos del navega­
dor se sobrescriben con las de la hoja del usua­
rio, que a su vez tienen m enos peso que las de la
hoja de estilos del autor. Resumiendo:
• Con respecto al origen de la hoja de estilos,
se aplica el siguiente principio:
A utor antes que usuario antes que navegador.
En el cuarto y quinto paso se analiza la importan­
cia. Podem os indicar que determ inadas declara­
ciones son im portantes añadiendo üm portant. Si
tanto el autor com o el usuario han m arcado una
propiedad com o Ümportant, se aplica "e l usuario
antes que el autor".
En caso de duda, pues, el usuario tiene la última
palabra. Internet Explorer hasta la versión 6 ig­
nora la instrucción Ümportant y sim plem ente se
salta esta parte de la cascada.
Para aplicar form ato al elem ento ul del ejem plo,
esto significa concretam ente:
• En la hoja de estilos del navegador se ha de­
finido el m argen externo inferior de una lista
no ordenada, pero en la hoja de estilos del
autor le siguen dos declaraciones.
• Ninguna de las declaraciones de la hoja del
autor es Ümportant.
Puesto que no se dispone de las indicaciones del
usuario, las dos instrucciones de la hoja de esti­
los del autor pasan a la tercera ronda de la cas­
cada.
Nivel 3: ordena según la especificidad del
selector
En el nivel 3 es la especificidad la que decide:
• ul es un selector sim ple y obtiene un punto.
• #navegación ul, p or el contrario, obtiene 101
puntos.
En consecuencia, el ganador indiscutible es el se­
lector #navegacion ul, y por ese m otivo la lista no
ordenada del área de navegación tiene un m ar­
gen inferior de 0 (nuil).
Esta constatación perm ite tom ar una decisión
clara. El cuarto nivel de la cascada, así com o la
herencia y el valor por defecto, no se aplica para
margin-bottom de #navegación ul.
Nivel 4: ordena según el orden de aparición
Com o hem os visto, en este ejem plo el navegador
ha term inado la búsqueda, pero todavía hay un
cuarto nivel de la cascada:
• Si dos declaraciones tienen el m ism o origen,
la m isma im portancia y la m ism a especifici­
dad, la última declaración notada es la que tie­
ne prioridad.
La últim a regla. C uanto más cercana esté la de­
claración al elem ento que se debe crear, m ayor
será su prioridad.
O bserva el ejem plo siguiente, situado en una
hoja de estilos externa ficticia de un autor:
#navegacion ul {
margin: 20px;
margin-bottom: 0;
}
Código 29: El nivel 4 de la cascada - ordenar por orden de apari­
ción
En este caso m argin-bottom se define dos veces.
A m bas reglas tienen el m ism o origen, el m ism o
peso y la misma especificidad. En consecuencia,
es la últim a declaración la que se aplica, margin-
bottom : 0.
Sin em bargo, el cuarto nivel puede ir todavía
m ás allá, porque el autor podría guardar las de­
claraciones CSS directam ente en la página web.
El navegador recopila todas las declaraciones en
el siguiente orden:
• Prim ero las de archivos CSS externos
• Después las que están entre <style> y
</style> en el head de la página
• Para term inar, las del tag de inicio de un
elem ento de la página
 El navegador y CSS: cascada y herencia
Im aginem os las siguientes líneas de código
H TM L en la página de inicio:
<div id="navegacionM>
<ul style="margin-bottom: 20px;">
<!-- Otros elementos -->
</ul>
</div>
Código 30: Una instrucción de estilo en un elemento HTML de la
página
La regla CSS de la línea 2 del ejem plo se encuen­
tra directam ente en el tag de inicio del selector,
por lo que no puede acercarse m ás al elem ento
al que debe dar form ato. En este caso, la lista ul
tendría un margin inferior de 20px, no im porta lo
que digan las otras hojas de estilos precedentes.
Fin de la cascada.
El navegador repite esta cascada por cada pro­
piedad de cada elem ento de la estructura del
docum ento.
Si deseas m ás inform ación sobre la cascada, te
recom iendo la fuente oficial, el W 3C:
http://www.w3.orQ/TR/CSS21/
cascade. html#cascade
Herencia (inheritance)
Si al term inar la cascada el navegador no ha en­
contrado nada para una propiedad, entra en
juego la herencia. A unque no recuerdes m ucho
de las leyes de M endel de la clase de biología, es
necesario que analicem os la herencia en el m arco
de las CSS.
La herencia mejora la claridad de una hoja de
estilos
En la página de inicio ya hem os aplicado el
principio de la herencia, por ejem plo en la decla­
ración del tipo y el tam año de fuente. Una de las
prim eras reglas de la hoja de estilos de las pági­
na de ejem plo es esta -ligeram en te abreviada:
body {
font-family: Verdana, Arial,
Helvética, sans-serif;
} propiedades en cualquier referencia sobre CSS
Código 32: Todos los descendientes de body heredan el tipo de fu en ­
te
63
Estas declaraciones no sólo se aplican a body, si­
no a todos sus descendientes. Puesto que en
principio todos los elem entos de una página son
descendientes de body, la fuente se aplicará a to­
dos los elem entos de la página, a m enos que se
haya definido otra cosa en el m arco de la casca­
da.
Sin el principio de herencia, deberíam os m en­
cionar todos los elem entos uno a uno y la misma
declaración podría tener este aspecto:
body, hl, h2, p, ul, li, a, strong, &
em, address {
font-family: Verdana, Arial, <P
Helvética, sans-serif;
}
Código 32: Sin herencia, es necesario mencionar explícitamente to­
dos los selectores
Resulta m ucho m ás com plicado que la versión
anterior. El uso apropiado de la herencia contri­
buye a la claridad de la hoja de estilos.
Algunas propiedades no se heredan
Sin em bargo, algunas propiedades no se here­
dan. Es el caso, por ejem plo, de todas las pro­
piedades del m odelo de cajas com o zvidth, back­
ground, padding, border y margin. ¿Por qué?
• Im agina un docum ento en el que se hubiera
definido una línea de borde roja de 2 píxeles
de anchura para body.
• A hora im agina la m ism a m áquina si todos
los descendientes heredasen la propiedad
border: deberíam os declarar para todos los
elem entos explícitam ente border: none a fin de
que no tuvieran tam bién un borde rojo.
Valor por defecto (initial valué)
Si después de la cascada y la herencia sigue sin
haber un valor para una determ inada propie­
dad, el navegador toma el valor por defecto fija­
do en la especificación CSS.
F n l l P r o p e r t y T a b le
Encontrarás inform ación sobre la herencia de
o en el W 3C, en una tabla poco atractiva pero
m uy útil llam ada Full Property Table.
http://www.w3.orQ/TR/CSS21/propidx.html
64 El navegador y CSS: cascada y herencia
Recordatorio
• Cuando un navegador recibe el código de
una página w eb, crea en prim er lugar la es­
tructura arbórea del docum ento ("D ocum ent
O bject M o d el"), que representa la jerarquía
de los elem entos HTM L.
• Para la búsqueda de las instrucciones de
form ato de cada elem ento, el navegador se
basa en tres conceptos:
- C ascada ("cascad e")
- H erencia ("in h eritan ce")
- Valor por defecto ("in itial valu é")
• La cascada da nom bre a las Cascading Style
Sheets y se com pone de los siguientes nive­
les:
- N ivel 1: encuentra todas las declaracio­
nes de un elem ento
- N ivel 2: ordena en función del origen y
la im portancia
- N ivel 3: ordena según la especificidad
del selector
- N ivel 4: ordena según el orden de apa­
rición
• Si una propiedad C SS sigue sin valor des­
pués de la cascada, el navegador com prueba
si puede encontrar algún valor a través de la
herencia de los elem entos padre. Las pro­
piedades del m odelo de cajas (y algunas
otras) no se heredan.
• Si una propiedad sigue sin valor después de
la cascada y la herencia, se tom a el valor por
defecto de la especificación CSS.
 Flujo y posicionamiento 65

Flujo y posicionam iento

En este capítu lo com probarem os q u e lo s cu adros de las p á ­
g in a s w eb sigu en un flu jo natural. A d em á s, verem os cóm o
Let it flow: el flujo normal de los
p od em os m an ipu lar dicho flu jo y co locar elem en tos fijos o cuadros
flo ta n tes.
Com o primera aproxim ación, em pezarem os por
estudiar el com portam iento natural de las cajas
Existen tres posibilidades de colocar las cajas en
cuando éstas no están som etidas a ninguna otra
una página web:
fuerza excepcional.
1. Flujo norm al: abarca los elem entos de blo­
que e inline, que ya conocem os, así com o Tres cajas en el flujo
los cuadros con un posicionam iento relati­ O bserva el siguiente código H TM L y CSS:
vo.
HTML CSS
2. Posicionam iento absoluto: los elem entos
<body> body {
con posicionam iento absoluto quedan ex­ <div>Box l</div> color: black;
cluidos del flujo y no existen para los de­ <div>Box 2</div> background-color: gray;
<div>Box 3</div> padding: 0;
m ás elem entos de la página. Se trata de </body> margin:0;
elem entos que utilizan position:absolute y }
div {
position:fixed. background-color: white;
3. Float: los elem entos flotantes en la jerga de padding: 1Opx;
border: Ipx solid black;
C SS son elem entos interm edios. Prim ero la margin: 5px;
caja se coloca de forma norm al, después se }
extrae del flujo y flota tanto com o sea posi­ Tabla 76: Tres cajas en el flu jo del documento
ble hacia la derecha o la izquierda.
Puesto que div es un elem ento de bloque, las
En este capítulo verem os los fundam entos del cuatro cajas se encuentran una debajo de otra,
posicionam iento y cóm o aplicarlos. Pero antes aunque su contenido sea m uy pequeño.
hablarem os del estado norm al de una página
w eb, el docum ent flozv.

La página es un río tranquilo

N orm alm ente, los elem entos de una página si­
guen el llam ado docum ent flo w , el "flu jo del do­
cum ento". Todos los elem entos H TM L nadan en
dicho flujo. Es el estado natural de una página
web, y es a los diseñadores lo que la gravedad
para los arquitectos. En realidad es sencillo: Fig. 49: Los elementos de bloque son tan anchos como sea posible y
se colocan uno encima de otro
• U n elem ento se coloca tan alto y tan a la iz­
quierda com o sea posible. Por naturaleza, un elem ento de bloque im pone
• Al añadir otros elem entos, se colocan a su su anchura: adopta siempre toda la anchura dis­
derecha hasta que no hay m ás espacio. ponible del elem ento padre, en este caso de body.
• Cuando no hay m ás espacio a la derecha,
saltan una línea abajo y vuelven a em pezar
Tres cajas reducidas en el flujo
por la izquierda. A continuación, los tres herm anos div se reducen
a un 20% con la propiedad width. Todo lo demás
Pantha Rei. Todo fluye. El flujo hace que las pá­
es igual. 3 por 20 son 60. ¿Pero significa eso que
ginas web sean tan flexibles com o el periódico las cajas se encuentran una junto a otra?
del que hablábam os en la pág. 5. Com o diseña­
dor w eb, deberás com prender el flujo e intentar
adaptarte a él, en lugar de pelearte con él.
66 Flujo y posicionamiento

div {
w id th : 20%;
background-color: white;
padding: lOpx;
border: lpx solid black;
margin: 5px; <body> body
<div i d » " o t r o * > B o x color: black;
} l</div> background-color:
Código 33: Reducción de los divs a un 20% de la anchura <div>Box 2</div> gray;
<div>Box 3</div> padding: 0;
Las cajas reducidas tam bién están apiladas en </body> margin:0;
vertical. D iv es un elem ento de bloque, y los }
div {
elem entos de bloque tienen un salto de línea in­ background-color:
tegrado. A unque ividth reduce el tam año de la white;
padding: lO p x ;
caja, el salto de línea se m antiene. border: lpx solid
black;
» i« | e D a n s Flcrw W id th 2Q & Mo/íHa l ' t f d i a
margin: 5px;
}
# o tr o {

p o s i t io n : r e l a t i v a ,
to p : 2 5 p x ;

r i g h t : 2 5 p x ;

b a c k g r o u n d - c o lo r :
#f3có00;
}
Tabla 17: Posicionamiento relativo

Este es el resultado:
t in te fU tK tíi pcaitÍou :rrta!rv > > M ó n ita i tro fo a
Fig. 50: Las cajas cortas también se apilan en vertical. é r c ft.v 5 £fl‘a r Ve* W fttrU : ¡ jc r c a é c 't t H trrv M n c u Avu^,i

Este com portam iento norm al de los cuadros en

el flujo en CSS tam bién se denom ina posi-
tion:static. El posicionam iento que perm ite el flu­
jo natural de los elem entos se conoce com o static.
A sí es la vida.

Posicionamiento relativo: flujo

desplazado Fig. 51: Posicionamiento relativo en acción

El posicionam iento relativo con position:relative
consigue dos cosas:
• Desplaza la caja fuera de su posición norm al
en el flujo.
• M arca la posición original del elem ento co­
m o protegida.
Los dem ás elem entos del docum ento se com por­
tan com o si el elem ento todavía se encontrase en
su sitio original dentro del flujo norm al.
El código H TM L y C SS para este ejem plo varía
ligeram ente:
O bserva que las cajas 2 y 3 no han cam biado. El
posicionam iento relativo preserva el espacio ori­
ginal del elem ento, y los elem entos siguientes no
pasan a ocuparlo.
U n elem ento posicionado obtiene sus coordena­
das de las propiedades top, right, bottom y left,
que se calculan con respecto a la posición origi­
nal en el flujo:
• top:25px coloca la caja hacia abajo. Se añaden
25 píxeles desde arriba a la posición norm al
de la caja.
• right:25px desplaza la caja h ad a la izquierda,
de form a que en parte desaparece. Se inser­
tan 25 píxeles a la derecha de la posición
original.
 Flujo y posicionamiento 67

Todos los datos son relativos a la posición origi­ La posición exacta se indica m ediante top, right,
nal e indican dónde se inserta el valor, y no la bottom o left, pero los valores de estas cuatro
dirección en la que debe desplazarse la caja. En propiedades ya no dependen de la posición ori­
realidad es lógico, pero a prim era vista posi- ginal en el flujo:
tiom réíative puede parecer com plicado.
1. El posicionam iento absoluto de un elem en­
to hace referencia al siguiente elem ento
contenedor (containing block), posicionado
Posicionamiento absoluto: fuera con relative, absolute o fixed.
de flujo 2. En el supuesto de que no haya ningún ele­
m ento contenedor (muy habitual en la
A diferencia del posicionam iento relativo, el ab­
práctica), el posicionam iento se efectúa en
soluto saca el elem ento fuera del flujo. El elem en­
función del elem ento m ás alto en la estruc­
to se "e le v a " y todos los dem ás elem entos de la
página se com portan com o si ya no estuviera tura del docum ento, es decir no body, sino
allí. html.
Estas dos afirm aciones se pueden resum ir de la
El H TM L de este ejem plo es el m ism o, sólo cam ­
siguiente forma:
bia una palabra del código CSS:
• El posicionam iento absoluto es relativo a al­
HTML CSS
gún punto de referencia.
<body> body {
<div id=',otro”>3ox color: black; • Existen dos puntos de referencia posibles:
l</div> background-color: gray;
<div>Sox 2</div> padding: 0; - U n elem ento contenedor posicionado
<div>Box 3</div> margin:0; - El elem ento raíz html
</body> i
div { En la rutina diaria, estos hechos dan origen a
background-color: white;
padding: lGpx; m ucha confusión. Por eso los analizarem os en
border: lpx solid black; m ás detalle.
margin: 5px;
i
ífotro { 1. Posicionamiento absoluto, relativo al
position: a b s o lu te
top: 2 5px; elemento raíz
right: 25px; En la página de inicio de "L ittle Boxes" el logo­
background-color:
#f3c600; tipo del encabezado se encuentra dentro de
i < h l> y < / h l> . D ebajo aparece el párrafo "D ise­
Tabla 18: Posicionamiento absoluto ño de páginas w eb con CSS. Fundam entos.", que
enseguida colocarem os junto a la im agen con la
Sólo cam bia una palabra pero el efecto es colo­
ayuda del posicionam iento absoluto.
sal. De repente, la caja 1 se encuentra a la dere­
cha y las cajas 2 y 3 suben hacia arriba: A quí la primera variante, con posicionam iento
absoluto relativo al elem ento raíz html:
- — —:
— --
Tarea: posicionamiento del párrafo relativo al
elemento maestro html
1. M odifica la regla de #encabezado p com o si­
gue:
#encabezado p {
position:absolute;
top: 25px ;
left: 50%;
Fig. 52: Sólo cambia una palabra - posicionamiento absoluto padding: 5px 0 5px 0;
margin-bottom: 0;
Los elem entos con posicionam iento absoluto sa­
len del flujo y se colocan encim a de los demás }
elem entos. 2. G uarda la hoja de estilos y observa las pá­
ginas w eb en el navegador.
68 Flujo y posicionamiento

La página pasará a tener este aspecto: Pruébalo:

1. M odifica littleboxes.css com o sigue:

#encabezado {
position: relative; /* Posicionado, &
pero en el flujo * /

Fig. 53; Posicionamiento absoluto relativo al elemento maestro color: black; /* otras &
propiedades...*/
Esto es lo que ocurre en este ejemplo:
}
• En prim er lugar, #encabezado p se extrae del #encabezado p {
flujo y ya no está presente para los dem ás position:absolute;
elem entos. top: lOpx;
• Puesto que no hay ningún elem ento conte­ right: lOpx; /* En lugar de: 50% */
nedor, las indicaciones top:25px y left:50% padding: 5px 0 5px 0;
hacen referencia al elem ento htm l y el párra­ margin-bottom: 0;
fo em pieza 25px desde arriba y exactam ente }
en la m itad de la ventana del navegador. 2. G uarda la hoja de estilos y observa las pá­
El posicionam iento vertical desde el m argen su­ ginas w eb en el navegador.
perior de la ventana del navegador es m uy pre­
ciso, pero el posicionam iento horizontal, 50% A prim era vista, el resultado no parece tan dife­
desde la izquierda, es una cuestión de suerte. rente:

Si en algún m om ento dejásem os de centrar la ¡fvnsz McraeW s«smcíi Keíowiwn»

página, al párrafo posicionado le daría igual. Se
m antendría en sus trece porque su punto de re­ I CtM flo sSc p d gm si cvtESS. F jr c a o t - 'C K K
ferencia es el elem ento m aestro html. Lítble bDXE5 *

2. Posicionamiento absoluto, relativo al In ic io

Un{««xas»wro cdc-^ussuade m ttmirtim tvtoufcsMrcsf jtmts

encabezado ázrao a juponíoiw tctr aScs radc ii <&¡a cas nOonOa tmrft, i*n g rtVa r, vnB*«

Lo m ejor y más seguro sería posicionar el párra­

fo relativo al encabezado, y para lograrlo recurri­
rem os a un sencillo truco.
• El posicionam iento absoluto de un elem ento
hace referencia al siguiente elem ento conte­
nedor (containing block), posicionado (con re-
lative, absolute o fix e d ).
El truco es el siguiente: si posicionam os el enca­
bezado con po$ition:relative, pero no le atribui­
mos ningún valor, estará posicionado y se con­
vertirá en el punto de referencia para el posicio­
nam iento absoluto de #encabezado p.
El encabezado se m antendrá en el flo w , pero se
considerará posicionado. ¿Parece com plicado?
Fig. 54: El párrafo tiene posicionamiento absoluto, relativo a #en-
cabezado
Esta solución ofrece algunas ventajas con respec­
to a la primera:
• El punto de referencia del párrafo es #enca­
bezado, y m ás concretam ente el borde exter­
no del padding ("the padding edge") superior y
derecho.
• Si, por ejem plo, la página deja de estar cen­
trada, no tendrá ninguna repercusión. El pá­
rrafo nunca abandonará la sección de enca­
bezado.
Recuerda: el posicionam iento absoluto se vuelve
relativam ente flexible gracias a este truco.
 Flujo y posicionamiento
Estilo de fuente para e! eslogan del
encabezado
Antes de que sigam os con los elem entos fijos,
harem os una pequeña pausa. Q uerem os que la
letra del párrafo sea negrita, y que la palabra
"Fundam entos" se resalte en rojo. ¿Todavía re­
cuerdas el span de la introducción a H TM L?
Tarea: resaltar el eslogan en negrita y la pala­
bra “fundamentos” en rojo
1. M odifica la hoja de estilos littleboxes.css
com o sigue:
#encabezado p {
position:absolute;
top: lOpx ;
right: lOpx;
font-weight: bold; /* Negrita */
padding: 5px 0 5px 0;
margin-bottom: 0;
} H TM L, en el que el elem ento div se m antiene fijo
#encabezado p span {
color: #d90000; /* Color de fuente */
} <div id=nfijon>Cuadro fijo</div>
2. G uarda la hoja de estilos y observa las pá­
ginas web en el navegador.
Si no recuerdas m uy bien el span, repasa el có­
digo HTML:
<div id=”encabezadon>
<p>Diseño de páginas web con CSS.
<span>Fundamentos.</span></p>
</div>
Código 34: El uso de span puede ser muy útil
El selector #encabezado p span solam ente selec­
ciona la palabra "Fu nd am entos". De este m odo
podem os aplicar form ato a determ inadas partes
del texto con la ayuda de span.
Como una estatua:
posicionamiento fijo
El posicionam iento fijo con position:fixed se com ­
porta casi com o po$ition:absolute, pero con una
leve diferencia:
• U n elem ento fijo no se desplaza.
69
Los elem entos con posicionam iento absoluto es­
tán colocados relativos a un punto de referencia
del docum ento, por lo que se desplazan con el
resto del contenido.
Por el contrario, en los elem entos fijos:
• El elem ento contenedor (containing block) de
los elem entos fijos es siem pre la ventana del
navegador (el viezvport).
Puesto que la ventana del navegador en sí m is­
ma tam poco se desplaza, los elem entos fijos se
m antienen en su sitio, position fixed es ideal para
secciones de navegación y hace prácticam ente
innecesario el uso de m arcos (frarnes), actual­
m ente caídos en desuso.
Por desgracia, Internet Explorer hasta la versión
6 ignora por com pleto positionifixed, algo que
puede tener consecuencias drásticas para lograr
el diseño deseado.
Veamos un ejem plo. Crea el siguiente código
m ediante CSS:
<body>
<p>Párrafo 1. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi rhoncus
volutpat n isl. Praesent elementum odio ac
nibh. Duis at quam nec dolor consequat
blandit. Sed libero. Vivamus faucibus purus
non purus. Suspendisse id ante ut nulla
facilisis porta.</p>
<p>Párrafo 2. Nullam vulputate hendrerit
nunc. Nullam dapibus blandit o rci. Nunc
metus. Sed sed ante. Cras interdum, erat at
pharetra sodales, elit ligula nonummy nisi,
sit amet auctor purus leo vel urna.
Pellentesque ac augue sit amet ipsum nonummy
sodales. Sed libero augue, ultricies et,
tristique ut, posuere commoao, ligula.
Integer aliquet. Doñee varius lectus. </p>
< /body>
Código 35: Un poco de HTML con el elemento div que fijaremos
Y aquí el correspondiente código CSS:
p { marqin-left: 25%; }
#fijo {
position: fixed;
top: lCpx;
left: lOpx;
background-color: #f3c600;
width: 15%;
padding: lOpx;
border: Ipx solid black;
i
Código 36: El CSS para fijar el elemento div
70 Flujo y posicionamiento

Con este código obtenem os la ilustración a con­ To flo a t significa flo ta r y una caja flotante hace
tinuación, prim ero en Firefox, después en Inter­ tres m ovim ientos: se eleva y sale del flujo nor­
net Explorer V.6: mal, flota com o un globo dentro del elem ento
contenedor y se desplaza hacia la izquierda o la
Archivo Ebnar Jftí rt$tor«i « jt r c u o H e v i a m i e ^ ja j A,yda derecha en función de cóm o sopla el viento.

Sí O U no de los usos clásicos de flo a t es el posiciona­

«odalcs S e d lib ero augue. u k riá e s e t, trisbqu e a . p o su c rc m iento de gráficos en un flujo de texto.
Cuadro fijo c o o m o d o keuia I n t e c a aSquH D o n r c varios leetns D a s
fioddum
Dejar que el texto fluya junto a las imágenes

t P i n a te 2 L o tc m ipsom d o lo r sjt am et, co n s e c te ta e r adiptsdQg

e fe Mocfc» tb o o c u s votatpat a s i P r a e s e o i d e m e o n x n odk» s e
n ib li D a is at quara « c d s lo r c o o s e q a a f hhgkfe S e d libero
V ivam os ía n d b u i p u r a n o n p u r a S u s p é n d a s e id ante ut ñufla
f a c ifc ü p o n a N o la m v uipatate h en d re rk cu ne N xA sm d B p b a s
Para ilustrar el funcionam iento de flo a t, integra­
rem os en la página de inicio una im agen de un
globo. Puedes utilizar cualquier otra im agen pa­
blandir c r c i N u n c m etus. S e d se d a r te C í a s n trr d o m . r r a : at
ra este ejem plo, o sim plem ente el archivo ba-
p h a ie tra so d a ie s. efe hgula c o c a r a n y m u . sk aznet auccor p tru s
le o > d u rna P e S e o te sq o e o c angoe s í a m e ! ipsum noaum m v llon.jpg del suplem ento del cuaderno.
w i n i r s S e d fevro-TO Poe i^ n icirs í í irra in n e a t x ia ie r e -------------------------
Tarea: integrar una imagen en la página de ini­
Fig. 55: positionfixed en F irefox...
cio
3 I itlW* K ítíé * s - poótfon'.Tfrttd Mu ro su ft In tc fiio t Etpkw >*t
ArtJvo SAacr ver F*ioK at Ayuía 1. D escarga la foto ballon.jpg y guárdala en la
m ism a carpeta que la página index.html.
O O á á d . / €> -J-
fj ■Xjar'jfv-i v: f l l- 2. A bre la página de inicio index.htm l y m odi­
fica el código fuente:
n
Cuadro fijo
<div id="areatexto">
1 L a r r a ipsum dolor sx a t o a , c o n s e c te tu a a d p is c r o efe <h2>Inicio</h2>
M or tu fh o acu s v’oiutpat ntsl PraesenT r la n c in a n odio a c n b b
Duxs w quaro nec dolor co o sequ at blanda S e d í b e r o Vivam os
<p><img src="bailón.jpg" alt="Globo <P
fiiucibos p am s non p u r a Su spendiste id aníe a nu la fa c £ s » rojo" width="78" height="100" /><P
p o rta Nu&am '•Tdpotatí ben d rerí nunc. N d b m dapibus b lan d í
o tc i N uce m etus S e d se d ante. C ra s n r c r i a n , eral al pharetra Las páginas están compuestas de <strong><P
vodolcs, efe aguia oocmaxTr txsi. sk atnel anclo* p e n is leo v d unía
P d b s te s q u e s e msgoc ut emet q>«um no nu n m v codales. S e d Sbero
cuadros rectangulares</strong>,
aucue. uk rioes e l tnshque ut. posuere c o o a n o d o . bgula Ictegei
<!-- Resto del párrafo --> </p>
HMwe« 3. Guarda la página w eb y ábrela en el nave­
Fig. 56: ...y en Internet Explorer 6 gador.
Com o se puede apreciar, Internet Explorer igno­
La im agen ya está ahí, aunque no resulta espe­
ra com pletam ente position fixed y los elem entos
cialm ente atractiva:
H TM L fluyen norm alm ente. Por suerte parece
que la situación ha m ejorado en Explorer 7. En
cualquier caso, esto dificulta el uso de posi­
tionfixed.

Float: cuadros flotantes

A dem ás de los posicionam ientos que ya hem os
visto, tam bién existe la propiedad float. A dife­
rencia de relative, absolute y fix ed , float no es un
valor de la propiedad position sino una propie­
dad CSS en toda regla.
Fig. 57: El globo ya se muestra, aunque todavía no flota
 Flujo y posicionamiento 71

Para que la im agen flote, deberem os incluir la Atención: soZo eZ texto rodea a la im agen, tecfc-
declaración float:right directam ente en el elem en­ ground, padding, border y margin del párrafo están
to img: debajo. Es decir, para definir un espacio entre el
texto y la im agen, lo m ás sencillo es asignárselo
a la im agen, y n o al párrafo.
hacia la derecha té r, -
Tarea: crear una separación entre la imagen y
1. A bre la página index.html y m odifica el có­
el texto
digo fuente com o sigue:
1. Abre la página de inicio index.html y m odi­
<h2>Inicio</h2>
fica el código fuente com o sigue:
< p x i m g src="ballon.jpg" alt="Globo <9
rojo” width="78" height="100" & <h2>Inicio</h2 >
style="f loat:right;" />Las páginas <9 <p><img src="ballon.jpg" alt="Globo &
web están compuestas... rojo" width="78" height="100" <P
2. G uarda la página web y ábrela en el nave­ style="float:right; margin-left:15px;" /><P

gador. Las páginas web están compuestas...

2. G uarda la página web y ábrela en el nave­
A unque el resultado todavía no es fantástico, el gador.
texto fluye junto a la imagen. La im agen sigue
los tres m ovim ientos típicos de float: sale del flu­
jo, se coloca encima de la caja contenedora p y Hacer flotar clases CSS a izquierda y derecha
después lo más a la derecha posible. Puesto que Para probar las propiedades CSS es perfecta­
la im agen se encuentra dentro de p, no flota más m ente correcto integrarlas directam ente m edian­
arriba que el lím ite superior del párrafo. te el atributo style en el código HTM L, pero si
querem os reutilizarlas es m ejor definir una clase
en la hoja de estilos para las im ágenes que floten
a la izquierda y a la derecha. Com o nom bres po­
D K ^ ílo t e p a g in a s c o n C S S . f-N w fAnteM n-v
dríamos utilizar .imgizda e .imgdcha.
littie b o x e s
!f*»Bt:CWIOCM D espués bastaría con asignar las clases a las
In icio im ágenes de la página en función del efecto de­
Lü £50*-.i5 ü'3r> rc t'í'jítV ii fle iMesOrr-t iw.«anoul«>»a au* K ;*c4e*> c©tocar seado: si la im agen debe flotar a la izquierda, le
fjñ íc a c » » e c ^ w . T o v r •*{ « 0 « T « í c - te fstíe/yJe « s j p truco u n c ra f e o j
O¿eO¿»£Oi<rí asignarem os en el HTM L class=" imgizda", y para
i u c<é3f<r- os j t a fmgt*»
que flote a la derecha, cla ss-" im gdcha".
• A i fu ^ c o n i K TVt
• «1HTNtBKOOfty^M
*'¡Ojos En la siguiente tarea tam bién aprovecharem os
— « J im fa i «jgtas _
para definir un borde para la im agen con la
Fig. 55: E/ globo flota ayuda de padding y border.

• El texto del párrafo envuelve el gráfico.

• background, padding, border y margin del pá­
rrafo no fluyen alrededor del gráfico, sino
que se colocan debajo.
72 Flujo y posicionamiento

¿M argen externo du plicado en In tern et Ex­

plorer?

1. A bre la hoja de estilos littleboxes.css. Cuando un elem ento flotante tiene un margin
2. D efine debajo de #areatexto las siguientes horizontal, Internet Explorer lo duplica. Este
dos clases: "bug de doble m argen flotante" se puede
arreglar fácilm ente asignando al elem ento flo­
.imgizda {
float:left;
tante la declaración display: inline.
padding: 3px; /* Distancia entre <9
imagen y borde * / Adiós a la flotación: clear
border: 5px solid #ccc; /* El & En la ilustración anterior se puede observar que
borde de la imagen */ no sólo el prim er párrafo rodea la im agen, sino
margin-right: lOpx; /* Distancia <9 tam bién todos los siguientes. Si no deseam os es­
entre borde y texto */ te efecto, es necesario hacer que la im agen deje
margin-bottom: lOpx; /* Distancia <P de flotar.
hacia abajo*/
La propiedad clear obliga a una caja a em pezar
} debajo de un elem ento flotante, clear puede tener
.iragdcha { los valores left, right o both:
float:right;
padding: 3px; • clear.left term ina un floatd eft
border: 5px solid #ccc; • clear:right term ina un flo a t: right
margin-bottom: lOpx; • clear.both term ina un float: right y un floatdeft
margin-left: lOpx; Si no querem os que el segundo párrafo de texto
} de la página de inicio se coloque junto a la ima­
3. G uarda la hoja de estilos. gen, la solución es bien sencilla:
4. M odifica el código de la página index.htm l <p style="clear:right“>Los siguientes pasos
para la imagen: muestran...</p>
Código 57: "clear: right" para forzar el párrafo a colocarse debajo
< p x i m g src="ballon.jpg" alt=d*
del globo
"Globo rojo" width="78" <9
height="100" class="imgdcha" /> ... Float term ina y el margin superior del párrafo
"lim p iad o" se rellena de form a que el texto em ­
5. G uarda la página w eb y ábrela en el nave­
pieza justo debajo del globo.
gador.
Float y clear
Este es el nuevo aspecto de la página con la im a­
gen flotante a la derecha: Float suele im plicar la intervención de clear.
Sin clear el estado flotan te se aplica a todos los
elem entos siguientes. En el caso de los dise­
ños de varias colum nas, clear puede ser muy
im portante.

Recordatorio
Repasem os los puntos principales de este capí­
tulo:
• Los elem entos H TM L de una página web si­
Fig. 59: El globo flota y se muestra correctamente
guen el docnm ent flow, el flujo natural del
docum ento:
— U n elem ento em pieza lo m ás arriba y
m ás a la izquierda posible.
 Flujo y posicionamiento
- Los dem ás elem entos se colocan a su
derecha hasta que no hay m ás espacio.
- Cuando no queda espacio, los siguien­
tes elem entos saltan una línea y vuelven
a em pezar a la izquierda.
• Los elem entos de bloque ocupan una línea
com pleta, independientem ente de su anchu­
ra.
• La propiedad CSS position puede tener tres
valores: relative, absolute y fixed. Las coorde­
nadas exactas para el posicionam iento se in­
dican con top, right, bottom y left.
• El posicionam iento relativo coloca el ele­
m ento de forma relativa con respecto a su
posición original en el flow . La posición ori­
ginal se m antiene protegida.
• El posicionam iento absoluto extrae el ele­
m ento del flujo. Los valores de top, rightf bot­
tom y left hacen referencia al elem ento raíz o
al elem ento contenedor m ás cercano que
tam bién esté posicionado.
• Los elem entos fijos se m antienen en su posi­
ción y no se desplazan con el resto del con­
tenido. Internet Explorer 6 no com prende
73
position: fix ed y deja que los elem entos fijos
fluyan.
• Float significa " flotar" y es una propiedad en
sí m ism a, cuyos valores posibles son left y
right. Los elem entos flotantes flotan por en­
cim a de la página y realizan tres m ovim ien­
tos:
- Se extraen del flujo del docum ento.
- Flotan dentro del elem ento padre tan
arriba com o sea posible.
- Se colocan a la derecha o a la izquierda
dentro del elem ento padre.
• Las secciones de contenido de todos los
elem entos posteriores rodean al elem ento
flotante, m ientras que padding, border y mar­
gin se desplazan debajo.
• Las clases C SS para que los elem entos floten
a la derecha o a la izquierda son prácticas.
• Para term inar el estado de flotación, se apli­
ca a un elem ento siguiente la propiedad
clear, que acepta los valores /e/f, right o both.
74
Diseños de varias colum nas con CSS
En este capítulo verem os cómo se pueden crear diseños de
varias columnas sin tablas y qué posibilidades existen a tal
efecto.
En CSS casi siempre hay varias form as de alcan­
zar el objetivo deseado, y esto es especialm ente
cierto en el caso de los diseños de varias colum ­
nas. En tus paseos por Internet encontrarás m u­
chos ejem plos de diseños basados en CSS que se
basan en aproxim aciones totalm ente diferentes,
y al principio esta variedad puede ser m ás des­
concertante que útil.
Desgraciadam ente no existe una receta universal,
porque todas las posibilidades tienen ventajas e
inconvenientes. M ientras el m undo de Internet
espera el santo grial del diseño con CSS, pode­
m os salir del paso con las opciones im perfectas a
nuestro alcance, basadas en dos principios esen­
ciales:
• position:abselute y margin
• flo a t en distintas variantes
Con position.absolute
position:absolute se basa en la idea de asignar a
un div un gran margin y colocar otro div dentro
de dicho margin con ayuda del posicionam iento
absoluto. Veamos un ejem plo sencillo:
snavegoaon { 1ftoreatexto {
posrtion absoluto width 7 0 % ,
top 0. margm-lefl 30%,
leH 0, }
width 30% .
1 determinado por ol
m a rg ln -IJt: I ¿ % w id th : 7 0 %
Fig. 60: Ejemplo sencillo de un diseño de 2 columnas con "posi­
tion.absolute"
En este ejemplo, tenem os dos secciones div #area-
texto y #navegación:
• üareatexto tiene un gran m argen izquierdo
• #navegación se coloca dentro del m argen
Diseños de varias columnas con CSS
La anchura del m argen se puede indicar perfec­
tam ente en píxeles, porcentaje o em. A ñadir una
tercera columna es fácil: basta con asignar otro
m argen exterior a la derecha de üareatexto, en el
que se colocará una tercera sección con posicio­
nam iento absoluto.
El posicionam iento absoluto es estable, fácil de
com prender y solam ente presenta dos inconve­
nientes:
1. Si el diseño debe tener un encabezado que
abarque todas las colum nas, resulta difícil
determ inar el punto de partida superior
(top) para #navegación. Una posible solución
sería definir una altura fija para el encabe­
zado.
2. N o es posible dejar que una línea de pie
abarque toda al anchura de la página deba­
jo de las colum nas, porque los elem entos
con posición absoluta no se pueden limpiar
(clear), al contrario que los elem entos flotan­
tes. Si la colum na de navegación es m ás lar­
ga que el área de texto, ésta fluirá encim a de
la línea de pie.
La siguiente im agen ilustra estos dos problem as
potenciales:
r á n c a b e z á d o ( ho *g ht 8 0 p x J
p 0 9 fl»o n flb s á k jís . width 7 0 % ;
m argm -Jeft 3 0 % .
51 vatoc de top está
hetQ?>íde^encabezado
S i smavegaocn es
másusrgoque o
se coíoch
r.
~ -
Fig. 61: Dos desventajas de position:absolute
Los dos inconvenientes no siem pre son proble­
m áticos. Si en el diseño deseado no m olesta que
el encabezado tenga una altura fija y si la línea
de pie no tiene que abarcar toda la anchura, sino
que puede colocarse en la parte inferior de #area-
texto, por ejem plo, el posicionam iento absoluto
no presenta ningún inconveniente.
 Diseños de varias columnas con CSS 75

A pesar de ello, estos dos problem as han logrado • Después se asigna a #areatexto un m argen
que cada vez m ás diseñadores echen m ano de izquierdo.
float.
Puesto que el margin izquierdo del área de texto
En los siguientes sitios w eb puedes ver algunos se coloca debajo de la navegación flotante, parece
ejem plos de posicionam iento clásico que se han com o si am bas secciones estuvieran una junto a
convertido en clásicos del diseño web: otra.
• Las Box Lessons de O w en Briggs (alias "Lit-
Tarea: hacer flotar el área de navegación a la
tle Boxes")
http://www.thenoodleincident.com/tutorials/ izquierda
box lesson/boxes.html 1. Elimina todas las declaraciones existentes
• El Layout Reservoir de Blue Robot (propiedades y valores) relativas a #nave­
http://www.biuerobot.com/web/lavouts/
gación. Los selectores se pueden m antener,
puesto que los utilizarem os enseguida.
2.. A ñade las propiedades y valores resalta­
Float I: 2 columnas con float y dos en negrita:
margin #navegacion {
Float no sólo perm ite hacer que floten las im áge­ float: left;
nes, sino secciones div com pletas. A continua­ width: 130px;
ción crearem os un diseño sencillo de dos colum ­ padding-left: lOpx;
nas con una navegación vertical en el lado iz­ padding-top: 20px;
quierdo de la página. El proceso consta de seis >
pasos: #navegacion ul {

1. Flotación de la navegación. }
^navegación li {
2. A tribución de un gran m argen izquierdo al
list-style: none;
área de texto.
3. Preparación de la lista no ordenada. }
#navegacion a {
4. Form ato de los vínculos de la lista.
5. Resaltado del punto de navegación actual. }
#navegacion arhover,
6. Color de fondo para la navegación ("Faux
#inicio #navi01 a,
C olum n").
#pagcontacto #navi02 a
Cuando se utilice float, siem pre se debe de­ {
clarar la anchura con w idth }
3. G uarda la hoja de estilos y abre las páginas
Los elem entos posicionados con flo a t siempre
en el navegador.
deben tener una anchura declarada con width.
Sin indicación de la anchura, el com porta­ No está nada mal. La navegación ya está coloca­
m iento del navegador es im predecible. da en vertical en el m argen izquierdo, pero el
En el ejem plo de la im agen flotante del capí­ área de texto la rodea en lugar de m ostrarse en
tulo anterior esto no era im portante, porque el una colum na separada.
gráfico tiene de todas form as una anchura fija.
Por el contrario, las secciones div flotantes is¡¡ ¿
exigen una indicación de la anchura. L_» _ . . __ _ _ liapAqenac « » i i Ü B . fam tefW eQ tw i
'little b o x e s
In icio
Paso 1: flotación del área de navegación u*s ow-** -« fc « t m com pt.-ct-ij. •)« -...xtsfrv* «x-tM>OMÍ«Tw o os
I r a t e e » ? uno» ,intn » avvt a m -w parw «nt* r Mo io que * «
Para crear las dos colum nas recurrirem os a un •í ewco> un g r » *c c •>a r a ta i to w *

pequeño truco, parecido al que hem os visto en el

posicionam iento absoluto:
Fig. 62: El contenido envuelve la navegación
• En primer lugar, #navegación se coloca a la
izquierda con flo a t :left.
76 Diseños de varias columnas con CSS

___ .....
Paso 2: asignar un gran margen al área de
"
texto m sM
v/ / <*.v. r ' ■?' .* x ¿u

En el siguiente paso, asignarem os al área de tex­

1. Com pleta las reglas CSS para ul y li en el
to un gran m argen exterior izquierdo, y acolcha­
área de navegación:
rem os ligeram ente el encabezado.
#navegacion ul {
color: black;
width: 80px;
padding-left: lOpx;
1. A signa un margin izquierdo al área de tex­
margin-left: 0;
to:
}
#areatexto { #navegacion li {
padding-top: 20px ; list-style: none;
padding-right: lOpx; border-left: lpx solid #d90000;
padding-bottom: 2 Opx; border-bottom: lpx solid #d90000;
padding-left: 20px; margin: 0;
margin-left: 130px;
}
} /+ Línea de borde encima del elemento de
2. A m plía el padding-bottom del encabezado lista "Inicio" */
de 0 a lOpx: #navegacion #navi01 {
#encabezado { border-top: lpx solid #d90000;
position: relative; }
color: #000; 2. Guarda la hoja de estilos y abre las páginas
background-color: #f3c600; en el navegador.
padding: lOpx 2Opx lOpx 2 Opx;
En las dos prim eras reglas, hem os definido una
}
anchura fija y un par de m árgenes y líneas de
3. G uarda la hoja de estilos y abre las páginas
borde.
en el navegador.
La única novedad es ünavegacion ttnaviOl. Este
La página se verá así: selector nos perm ite seleccionar el prim er punto
de navegación y darle una línea de borde supe­
rior, para que la lista de navegación no quede
► abierta por arriba:
Oñ-Ao « W » » s KM) C « ¡ w .l.sw n io ' ------- .
r
UtttB b D X E S VUttta *.mrt - *Mfcv
xxiczautí -nntnensu
| y- f

Inicio I 4- • 1,* * - £ ■ Q

L ¿8 W íír lK W «e e « t v . eca-OCuettas ó* «Vi ET ■ "^ísL

:a ccíocar unos juwo » ¡> v ts s suc»rptmr * ta * ' udu 1 da p i n i n a » ».«b uw C S S . tw
16 que s a a 'adundo e s ji-üjf.i un y a V io t c « k
K Little b n X E B
_____ __ _________

uÜ s*gui«nCM pasos ntuasrrar. *t cacninc do«la la creaodn de las

a»>ktaitavi
• aíi eavuna hti* I
H iT o r'O itto
■ In ic io
• BMtaQMft “'TW ttf MftVMM.
* T lh io t _____________________________________ i ac paginas n*£ ostan --ixnpuesiai tía cuadros r«cUnov<A.-i>t ,>»

•
se ( CMCCar UT4» 3 CtTO* o c-^ s^ p cr-el eoL- e *u s ToJC
lo o>» <•> ir- .« I ln - í . 1 , <
*\ _»V6. o a m ? -» c <vt»í
Fig. 63: El contenido se encuentra junto a la navegación
L2~ pssoe ai carena de&dé créeoso de ¡as
-e>si r«ata <a renrw^a»

Paso3: dar formato a los elementos de la lista

de la navegación
I ■
• fUnocíie hTMl
• Ete.ver'fos H7M» importancat

Fig. 64: Navegación con lista formateada

Em pezarem os preparando las propiedades del
m odelo de cajas para la lista no ordenada y sus Paso 4: formato de los vínculos de la
com ponentes. navegación
El siguiente paso consiste en dar form ato a los
vínculos.
 Diseños de varias columnas con CSS 77

tAtktoC i-6 at ftr riltti-il Í»(l«ní t-yjCi

. á f o
0*s«Ao<}ep¿9teaswebcoeCSS. »
1. Com pleta las reglas CSS de los vínculos Itittle b o x ES
com o sigue:
I n i c io

#navegacion a { LH t í 'í v : S*
>* ^uevierr CC I3C 9 urtot j u r í r a sfres i
r+etMnrpA**** cut
tr»tr tfc s T oOc

display: block; /* toda la superficie &

oo.cU2 ■•s-ocncB«cv truc»,tílgrsftrc avBsccacas.
es "clickable" * /
í te* laanros ti vW» í» Sí

text-decoration: none;
color: black; F/g. 65: Navegación con lista formateada
padding: 4px;
border-left: 3px solid white; /* &
Paso 6: “Faux column” - Color de fondo para
invisible */ la navegación
} Quizás habrás observado que la colum na de na­
2. G uarda la hoja de estilos y abre las páginas vegación en realidad no es una colum na, puesto
que la altura de la sección de navegación corres­
en el navegador.
ponde a su contenido. Si asignam os un color de
En la prim era declaración, los vínculos se con­ fondo a #navegación, el efecto salta a la vista:
vierten en elem ento de bloque, de m odo que el
!*** • s sB .t » g a iw n ii M cm n iH ta C
vínculo se vuelve tan ancho com o el contenedor 3 «9 'ICr—- §
li y el usuario podrá hacer clic en todo el punto
de navegación. '■hlllB bDXES
:i«s w e b con C S S .

Para com pletarlo, un pequeño padding y una lí­

nea de borde izquierda de 3 píxeles invisible.
sí cck<¿r -jet* 5 o i - j í t í V f t w «n» ~i*3o
te s « « e -rtu eo o a* tiveo. tí» :c«w

Paso 5: resaltar el punto de navegación tea ! ^ ¡ u i r < í i o e « a m * r ít» jr » « t n r r ¿ d e e s » * ¡ n a c a s se ¡es

CS5>c k» i i* « w » :i.-trar.=tí=

actual •rwítt K“«t«wpmsm»

Por últim o, nos ocuparem os de los efectos rollo- Fig. 66: ¿Una columna? Parece que no...
ver y del resaltado del punto de navegación ac­
tual. Para dejarlo claro:
• La única forma segura de colorear toda la
Tarea: barra de navegación vertical - punto de columna hasta el pie es utilizar una imagen
navegación actual de fondo.
1. Com pleta las reglas CSS de los hipervíncu­ • Asignarem os dicha im agen a un elemento
los de la navegación com o sigue: que llegue hasta el pie, por ejem plo thorap-
per.
#navegacion a:hover,
#inicio #navi01 a,
Dan Cederholm bautizó esta técnica com o "faux
colum n" ("colum na falsa"). Para la siguiente ta­
#pagcontacto #navi02 a
rea necesitarás una im agen de color que tenga la
{
m ism a anchura que el área de navegación: 130 x
color: black?
5 píxeles en este caso serían unas dim ensiones
background-color: white;
adecuadas.
border-left: 3px solid #d90000;
} Si lo deseas, puedes utilizar el gráfico na-
2. Guarda la hoja de estilos y abre las páginas vi_bg_solid.jpg que se incluye en el suplem ento
del cuaderno, o tam bién puedes crear una im a­
en el navegador.
gen propia. Para que el pie de la página no ad­
Estas declaraciones no son nada com plicadas. El quiera color, deberem os asignarle explícitam ente
truco radica en que el borde invisible de 3 píxe­ blanco com o color de fondo.
les que hem os definido antes se sustituye aquí
por una línea de color de la m ism a anchura. Lis­
tos. La navegación está casi terminada.
78 Diseños de varias columnas con CSS

— la derecha c o n flo a t :right. Com o recordatorio,

de navegación vertical - fondo de
veam os una vez m ás la estructura HTML:
<div id="wrapper">
1. Com pleta la regla de tkvrapper: <div id="encabezado"> ...</div>
<div id="navegación"> ...</div>
#wrapper {
<div id="areatexto"> ...</div>
color: black; <div id="pie"> ...</div>
background-color: white; </div>
background-image: urKnavi_bg_solid.jpg) ; Código 38: Las secciones div del ejemplo
background-repeat: repeat-y;
El código CSS básico para un diseño a dos co­
background-position: top left;
lum nas con elem entos flotantes opuestos sería el
width: 720px;
siguiente:
min-width: 600px;
#wrapper {
margin: lOpx auto;
width: 720px;
} margin: auto;
2. Vuelve a hacer que el fondo sea blanco: }
#encabezado {
#pie {
background-color: #f3c600;
background-color: white;
}
padding: 20px; #areatexto {
padding-top: lOpx; float: right;
border-top: lpx solid #5c743d; width: 520px;
background-color: #eee;
margin-top: 2 0px;
}
} #navegacion {
3. G uarda la hoja de estilos y abre las páginas float: left;
en el navegador. width: 180px;
background-color: #d9d9d9;
El diseño a dos colum nas basado en flo a t y mar­ }
#pie {
gin ya está listo.
clear:both;
}
Código 39: Areatexto float.right y navegación float:left

O K efto d a p t jm e 'S w e b c o a C S S . l:*n*l.% rv;>iTov

Con algo de CSS adicional para la decoración, el
diseño tendrá m ás o m enos este aspecto:
Inicio
LOS r.*b 6£C3r> CWO'J®*?*? rijjKbtyi rccfeoyxjbwe-' Vjtt
1.0 rt.vxivn cok-car ur*» /jn io a ctibs o «otr Tí*4o
90
to ( * * ¡*ri» '&3#r4t< ijr m x » . >jn gráfica c »rt>3S eo»<».
LW P9SO« a roorine desde ia cíóo S í ’ís 0.
x-aiotbastabságw Uummidai
• Ai funoona K'ML
• HTML ynpofbyitst Llttle Boxes - Encabezado
Fig. 67: El diseño a dos columnas terminado con float y margin
m A re a te x to

~c£r e$aóoo i tfcefo íovdb de 2 « <«e4eetkfe•Qeor»&t

SeeJdr.
Float II: 2 columnas con floats i afpfltrto {
ftwí neia.
opuestos XTdñL

A continuación, m e gustaría presentar breve­ «í¡íe{drarbo»-}

m ente otro m étodo para crear diseños basados
en float: los floats opuestos ("O pposing floats").
La ventaja de este sistem a es que constituyen Fig. 68: Dos columnas con float:left y floatright
una base m uy flexible y se pueden transform ar Entre las dos colum nas se crea un espacio virtual
fácilm ente en diseños con m ás de dos colum nas. de 20px. Para desplazar la navegación hacia la
derecha, solam ente es necesario invertir las de­
Dos columnas con float:left y float:right claraciones float:left y float:right.
En prim er lugar, crearem os un diseño de dos co­
lum nas con dos secciones flotantes opuestas:
una flotará a la izquierda con float:left y la otra a
 Diseños de varias columnas con CSS 79

Orden flexible en HTML: el área de texto antes background-color: #d9d9d9;

}
de la navegación #contenidosec {
Una de las ventajas de los floats opuestos es que float: right;
podem os invertir fácilm ente en el código HTM L width: 150px;
el orden de üareatexto y #navegación sin que ello }
afecte al diseño: Código 42: CSS adicional para 3 columnas

<div id="wrapper"> En el navegador, las secciones div tendrán este

<div id="encabezado"> ...</div> aspecto:
<div id="areatexto"> Primero el <P
contenido...</div>
<div id="navegación"> ...después lad*
navegación. </div>
<div id="pien> ...</div>
</div>
Código 40: Primero el contenido, después la navegación

M uchos diseñadores prefieren este orden del

código, ya que creen que el contenido es más
im portante que la navegación, y los usuarios sin
CSS no tendrán que pelear primero con la nave­
gación para encontrar el contenido.
Otros diseñadores dejan la navegación antes que
el contenido y ofrecen a los usuarios sin CSS un
skip-link. A m bas opciones son discutibles. Fig. 69: Diseño de 3 columnas con float:left y float:right

Float III: 3 columnas con floats Diseños flexibles

opuestos
Hasta ahora para todos los ejem plos de diseño
hem os utilizado la misma estructura HTM L en
todo el cuaderno. Para la barra de navegación
sencilla, la navegación con pestañas y la navega­
ción flotante con 2 colum nas, la estructura
H TM L era simpre la misma.
Para am pliar el diseño a 3 colum nas necesitare­
mos por primera vez otra estructura. El siguien­
te ejem plo añade dos nuevos divs dentro del
área de texto:
<div id="wrapper">
<div id="encabezado"> ...</div>
<div id="areatexto">
<div id=*"contenidoprin"> ... </div>
<div id=ncontenidosec"> ... </div>
</div>
<div id="navegación"> ...</div>
<div id="pie"> ...</div>
</div>
Código 41: Divs adicionales para un diseño de 3 columnas
En el diseño de 2 colum nas, el área de texto tenía
una anchura de 520 px, que ahora podem os re­
partir com o nos parezca entre las dos nuevas
secciones. Un ejemplo:
#contenidoprin {
float: left;
width: 350px;
H asta ahora hem os indicado todas las anchuras
en píxeles porque el hecho de diseñar con CSS
con m edidas fijas en píxeles es m ás fácilm ente
com prensible al principio.
Sin em bargo, uno de los inconvenientes de los
diseños basados en píxeles es su falta de flexibi­
lidad, por lo que enseguida presentaré dos al­
ternativas:
• En los diseños líquidos ("liqu id layouts") la
anchura se indica en porcentaje
• En los diseños elásticos ("elastic layouts") la
anchura se indica en em
Este tema va m ás allá del alcance de este cua­
derno, por lo que solam ente lo verem os m uy por
encim a, pero puedes utilizarlo com o punto de
partida para tus propios experimentos.
Líquidos, elásticos, frustrados
Solam ente recom iendo probar los diseños lí­
quidos y elásticos cuando se hayan adquirido
conocim ientos sólidos de los diseños en píxe-
les, o si se tiene una gran capacidad de sobre­
ponerse a la frustración. El resultado de estos
diseños no siempre es lo que uno espera.
80 Diseños de varias columnas con CSS

Diseños líquidos con porcentajes El 85% para #wrapper es el resultado de prue­

En los diseños líquidos, la anchura de las seccio­ bas, errores y el análisis del código fuente de
nes div se expresa en porcentaje, por lo que se otras páginas. El área de navegación y el área de
adaptan a las dim ensiones de la ventana del na­ texto se dividen a razón de aproxim adam ente 1
vegador. Si asignam os a üwrapper una anchura a 3, sacrificando un 1% en cada caso para una
del 85% en lugar de 720px, este div siem pre ten­ colum na virtual entre la navegación y el texto.
drá una anchura correspondiente al 85% de la En cifras, eso significa:
ventana, independientem ente de su tam año. • 24% para la sección de navegación
La ventaja es que en resoluciones de pantalla • 74% para el área de texto
grandes se aprovecha m ejor la superficie de pan­ Ten en cuenta que las indicaciones en porcentaje
talla disponible. Sin em bargo, esta ventaja tam ­ en el cálculo de las dos colum nas ücontenidoprin
bién puede ser un inconveniente, ya que las ven­ y #contenidosec en la zona de texto hacen referen­
tanas de navegador muy anchas (o muy estre­ cia a la anchura de üareatexto, y no a üwrapper.
chas) dificultan la lectura del texto. Con los valores indicados de 32% y 65%, la co­
En el siguiente ejem plo, cam biam os el formato lumna ücontenidosec es visualm ente tan ancha
del anterior diseño de tres colum nas por porcen­ com o el área de navegación.
tajes:
Diseños elásticos con em
#wrapper { width: 85%; }
/* Navegación y área de texto = 98%, con 2%
Los diseños elásticos resultan aún m ás difíciles
de columna entre ambos * / de com prender inicialm ente, porque se basan en
#navegacion { el tam año de fuente que se utiliza. Incluso los
float:left; usuarios experim entados pueden tener proble­
width: 24%; mas.
}
#areatexto { Para no perderse en un m ar de cálculos, vale la
float: right; pena recurrir a un pequeño truco que Richard
width: 74%; Rutter descubrió en un artículo que vale la pena
} leer (http://zvm v.clagnut.com /blog/348/).
#contenidoprin {
float: left; El truco consiste en definir el tam año de fuente
width: 65%; de body en 62,5%:
background-color: #d9d9d9;
• body { font-size: 62.5%; }
}
#contenidosec { Después de aplicar este cam bio es necesario am ­
float: right; pliar el tam año de fuente de otros elem entos, p e­
width: 32%;
ro de esta form a se sim plifica en gran m edida la
} creación de diseños basados en em. El razona­
Código 43: CSS adicional para 3 columnas
m iento subyacente es el siguiente:
Este será el aspecto del diseño en el navegador:
• lem corresponde al tam año de fuente están­
'} fias» K * .%■« > £ fj£ }
tf rr x s v t i « y wai mw luyas
dar.
V - & Q «i* Ourxfi* O I na.'* m -• » . © B -• « • En casi todos los navegadores, el tam año de
o í-* • • o * * w » *€*«* -UKT--V Q 1 fuente estándar es de 16px.
ir a t ase atrSws ó tí 5?*»
• Con núm eros redondos com o 10 es m ás fácil
Little Boxes - Encabezado hacer cálculos.
• 10 es a 16 lo que 62,5 es a 100.
C o n te n id o p r in c ip a l SiíSJMSwdMTl '
«Etarnsfii.
> La quintaesencia de este juego m atem ático es ex­
te fe )
CongiOB
l o K t& e a n * rr—rarfripragysév
m m b M » se « t a r a * » *x srr
trem adam ente práctica:
q t t «cape ti 71% 1# n c h n 4e
¿* tq rtr
• Para convertir un diseño basado en píxeles
•CCSMttfcfSK •
en un diseño basado en em, solam ente de­
Somekñ.
bem os dividir todas las indicaciones por 10
: ) y sustituir px por em.
dH T& A )

Tt'WMQBfe

Fig. 70: La base de un diseño liquido

 Diseños de varias columnas con CSS 81

En esta tabla se ilustra más claram ente: Aunque parezca im presionante, este m étodo
tam bién presenta inconvenientes:
Diseño en píxeles Diseño en em
• En el caso de elem entos anidados, em dism i­
#wrapper { #wrapper {
nuye progresivam ente. Ello puede traducir­
width: 720px; width: 72em;
margin: auto: margin: auto;
se en m ás de una sorpresa para los diseña­
dores web.
} }
#areatexto { #areatexto { • Cuando se utiliza un tam año de fuente
float: right: float: right; grande, un diseño elástico puede crecer más
width: 520px: width: 52em; allá del 100% y obligar al usuario a despla­
} } zarse horizontalm ente por la página.
#contenidoprin { #contenidoprin {
float: left; float: left; Este últim o problem a se podría resolver indi­
width: 350px; width: 35em; cando una anchura m áxim a de 100% (m ax-width:
} } 100% ), pero no todos los navegadores com pren­
#contenidosec { #contenidosec { den la orden. ¿Adivinas cornetam ente cu ál?...
float: right; float: right;
width: 150px; width: 15em;
\ \
/
#navegacion {
;
#navegacion { Recordatorio
float: left: float: left; Para terminar, repasem os los puntos m ás im por­
width: 180px; width: 18em;
tantes de este capítulo:
} }
• Los diseños CSS de varias colum nas se ba­
Tabla 19: A la izquierda el diseño basado en píxeles, a la derecha la
correspondencia en em san principalm ente en dos técnicas:

U tilizando un tam año de fuente normal no se - position:absolute y margin

aprecia la diferencia entre diseño fijo y elástico: - float en distintas variantes

• Los diseños con position:absolute no pueden

tener una línea de pie que abarque todas las
columnas.
• Los diseños con anchuras fijas son m ás fáci­
les de crear para el principiante, pero restan
a la página parte de la flexibilidad.
• Dos m étodos de diseño con flo a t son:
- flo a t y margin
- flo a t: left y flo a t: right (elem entos flotan­
tes opuestos)

Fig. 71: Un diseño basado en em con tamaño de fuente normal
En la siguiente ilustración se puede apreciar la
ventaja de un diseño basado en em: si am plia­
m os el tam año de la fuente, la anchura de las co­
lum nas crece de forma dinámica.
i»*— 1«**> ■**—
D ttlr Boxes - En ca b ra d o
• H ay dos tipos de diseños flexibles:
- Diseños líquidos ("liq u id ") con anchu­
ras en porcentaje
- Diseños elásticos ("elastic") con anchu­
ras en em
• N aturalm ente, tam bién es posible m ezclar
todas las variantes.

«M ttílSaa,

Fig. 72: El diseño es elástico. El tamaño de la columna aumenta

con el tamaño de la fuente.
82 Patchwork: parches en CSS
Patchw ork: parches en CSS
El mundo de CSS es un paraíso, contrariamente al de los
navegadores.
En los últim os años, los navegadores se vieron
obligados a aprender lentam ente CSS. De ahí
que, cuanto m ás antiguo sea un navegador, m e­
nor será su capacidad CSS y m ayor su propen­
sión a los errores. De todas form as, puede que
sea una buena noticia, porque significa que en
algún m om ento este capítulo necesario sobre
rem iendos term inará desapareciendo.
Parches y hacks
Sin parches, en los últim os años el diseño con
CSS habría sido prácticam ente im posible en m u­
chos casos, y por eso en algunos libros sobre el
tem a la sección dedicada a los parches es incluso
m ás extensa que la descripción de algunos con­
ceptos tan im portantes com o la cascada.
Antes de aplicar parches, comprobar
A unque todavía no es posible renunciar com ple­
tam ente a los parches, cabe esperar que con la
desaparición de los navegadores antiguos a lar­
go plazo desaparezca la necesidad de usarlos.
Utiliza navegadores conform es a los estándares
com o Firefox u Opera para probar tus páginas y
excluir posibles errores.
Puedes consultar la siguiente página (en inglés)
para com probar si un determ inado navegador
tiene problem as con determ inadas propiedades
o selectores CSS:
• http://www.westciv.com/style master/academy/
browser support/index.html
Estilos especiales para determinados
navegadores
Si un navegador exige un tratam iento especial
para representar correctam ente CSS, existen dos
posibilidades:
1. Incluir los parches en la propia hoja de esti­
los, directam ente en las reglas afectadas.
2. Incluir los parches en una hoja de estilos
separada que solam ente se aplicará a de­
term inados navegadores.
La segunda variante presenta la ventaja de que
el CSS original correcto es m ás fácil de leer y re­
sulta m ás sencillo gestionar los parches. Descu­
brirem os algunos ejem plos m ás adelante con
@im port y los Conditional Comments.
Otros parches con nom bres tan fantásticos como
hack de la estrella, Tantek's Box M odel H ack, Box
M odel H ack sim plificado y Box M odel H ack sim plifi­
cado am pliado se integran directam ente en el CSS
y dificultan la lectura de las instrucciones de
formato.
A lgunos autores de CSS parecen trabajar si­
guiendo el lem a "cu antos m ás parches, m ás ex­
perto". E n realidad es lo contrario: sólo deberías
usar parches cuando no haya m ás remedio. En
las siguientes páginas encontrarás m ás inform a­
ción:
• http://www.disenorama.com/tutoriales/
comentarios-condicionales-para-ie
• http://www.communitvmx.com/content/
article.cfm?cid=E0989953B6F20B41/
• http://www.positioniseverythinq.net/
• http://www.csslab.cl/cateqorv/hacks/
@import - ocultar estilos a los
navegadores antiguos
@im port supone una alternativa a link para vin­
cular H TM L y CSS y presenta la ventaja de que
los navegadores antiguos com o N etscape 4 no
com prenden esta orden, por lo que no llegan a
ver las reglas CSS que les resultan tan difíciles
de digerir. U n ejem plo:
<head>
<!-- Otros elementos HTML -->
<style type="text/css">
©import url(littleboxes.css);
</style>
</head>
Código 44: Vincular una hoja de estilos con @import
Para lim itar el CSS a un determ inado m edio uti­
lizando @im port, deberem os escribir después del
com ando (no funciona en IE6 e inferior):
 Patchwork: parches en CSS
<head>
<!-- Otros elementos HTML -->
<style type="text/cssn>
@import url(littleboxes.css) screen;
@import url(versionimprimir.css) print;
</style>
</head>
Código 45: Definición de un medio de salida utilizando @itnport
Internet Explorer
Después de que M icrosoft ganase la primera
gran batalla de navegadores contra N etscape en­
tre 1996 y 1998, Internet Explorer se convirtió en
el program a m ás utilizado para surfear por la
Red:
• La versión 5 de Internet Explorer se desarro­
lló entre 1999 y 2001 y presenta graves pro­
blem as con respecto a CSS, que todavía es
necesario tener en cuenta en la actualidad
(en la medida en la que esperem os visitantes
con IE 5.x).
• IE6 apareció en octubre de 2001 y soportaba
las CSS relativam ente bien, teniendo en
cuenta las condiciones de la época. D esgra­
ciadam ente, no se m ejoró nada en los últi­
m os años.
Com o otros navegadores, IE 6 presenta una par­
ticularidad, el llam ado modo quirks. En este m o­
do, que se activa por una indicación de doctype
incom pleta o incorrecta (véase pág. 10), IE6 se
com porta com o sus procesadores.
En IE7 se han eliminado m uchos de los proble­
mas relacionados con CSS. Es posible que el día
en que desaparezca el últim o navegador antiguo
podam os dar la bienvenida a una nueva era de
CSS sin parches, pero de m om ento volvam os a
la cruda realidad.
W ikipedia: guerra de navegadores e Internet
Explorer
Si quieres más inform ación sobre la guerra de
navegadores o la historia de Internet Explorer,
la W ikipedia es un buen punto de partida:
http://es.wikipedia.orQ/wiki/
Guerra de navegadores
http://es.wikipedia.orQ/wiki/lntemet Explorer
83
Conditional Comments: estilos sólo para IE
Los Conditional Comments son <!— com entarios
en HTM L —> que se pueden asociar a determ i­
nadas condiciones. Este tipo de com entarios son
una invención de Microsoft, y se introdujeron
por prim era vez con IE5. Todos los demás nave­
gadores tratan las instrucciones com o un com en­
tario norm al, lo cual puede ser m uy práctico a la
hora de aplicar parches.
Para enviar una hoja de estilos únicam ente a IE5
o superior (también a IE6 y 7), incluye el si­
guiente com entario en la página HTML:
< I-- [if IE]>
<style type="text/css">
@import (ie.css);
</style>
< I [endif]-->
Código 46: Conditional Ccmment - sólo para Internet Explorer
Para enviar una hoja de estilos únicam ente a In­
ternet Explorer V5.0 y V5.5, puedes utilizar el si­
guiente comentario.
<1-- [if lt IE 6]>
<style type="text/css">
©import (ie5x.ces)/
</style>
< 1 [endif3-->
Código 47: Conditional Comment - sólo para IE5.X
Las letras It de la condición //‘significan 'Tess
than" (m enor que). Toda la condición se traduce
com o "Si la versión del navegador IE es inferior
a 6".
Otros operadores condicionales posibles en los
Conditional Com m ents son gt ("m ayor qu e"), Ite
("m enor o igual que"), gte ("m ayor o igual
que").
Probar el funcionamiento de los Conditional
Comments
El siguiente código perm ite com probar fácilm en­
te si los Conditional Com m ents funcionan o si
hem os com etido algún error al escribir el código.
Abre la página de ejem plo index.html y escribe
las siguientes líneas entre <head> y </head>, de­
bajo de <link> :
<!-- [if IE 6]>
<style type=”text/css">
body { background-color: yellow; }
</style>
< J [endif]-->
Código 48: Un fondo amarillo sólo para IE 6
Si todo funciona, la página debería tener un as­
pecto norm al en Firefox, pero en Internet Explo­
rer 6 debería presentar un fondo amarillo.
84 Patchwork: parches en CSS
V in cu lar las h o ja s de estilos para IE después
de las dem ás h o ja s de estilos
Ten en cuenta que la hoja de estilos para IE5
se debe vincular después de las otras hojas de
estilos. De lo contrario se podrían elim inar al­
gunos elem entos relativos a la cascada, y todo
el esfuerzo resultaría inútil.
Conditional Comments en acción
En el siguiente ejem plo, Internet Explorer 5.x ob­
tendrá una hoja de estilos propia.
La hoja de estilos: tamaño de fuente y
centrado para IE5.X
Com o ejem plo del uso de los Conditional Com ­
m ents, utilizarem os dos instrucciones de form a­
to que causan problem as a Internet Explorer 5.x:
• En prim er lugar font-size: small, que hem os
definido para body en la página 30.
• En segundo lugar el centrado de la página
con margiivauto que hem os visto en la pági­
na 46.
Internet Explorer 5.x interpreta el valor sím il
com o médium. En consecuencia, para corregir el
tam año de fuente es necesario transm itirle el va­
lor x-sm all, que será interpretado com o un nivel
mayor. De m odo que volverá a ser small. Vamos
allá con los parches.
Tarea: corregir el tamaño de fuente para IE 5.x
1. Crea una nueva hoja de estilos con la si­
guiente regla CSS:
body {
font-size: x-small;
} <head>
2. G uarda la hoja de estilos com o ie5.css en la
m isma carpeta de los dem ás archivos.
Y ahora nos ocuparem os del problem a de cóm o
centrar las páginas. Recordem os brevem ente la
regla C SS sim plificada de las páginas de ejem plo
del cuaderno:
#wrapper (
width: 72 Opx;
margin: auto;
}
Código 49: Centrado de #wrapper
IE 5.x no com prende el centrado con margin: au­
to. Sin em bargo, la solución es sim ple, porque
por suerte interpreta incorrectam ente la propie­
dad text-align: center y no sólo centra su conteni­
do sino todo el cuaderno.
La siguiente línea de código para IE 5.x nos
perm ite centrar thvrapper:
• body { text-align: center; }
Sin em bargo, para que el texto dentro de #wrap-
per no quede tam bién centrado, deberem os
com pletarlo con una segunda regla:
• #wrapper { text-align: left; }
— — --- — :
-----------------
Tarea: centrado de la página para IE 5.x
1. Com pleta en la hoja de estilos ieS.css las lí­
neas siguientes:
body {
font-size: x-small;
text-align: center;
}
#wrapper { text-align: left; }
2. G uarda nuevam ente la hoja de estilos.
En las páginas web: vincular una hoja de
estilos sólo para IE 5.x
A continuación, insertarem os un Conditional
C om m ent en am bas páginas web para que In­
ternet Explorer 5.x reciba la hoja de estilos
ie5.css.
Tarea: integrar Conditional Comments en el
documento HTML
1. A bre las páginas index.html y contacto.html
y añade los com entarios resaltados en negri­
ta:
<!-- Otros elementos HTML incl. &
todos los vínculos -->
< i-- [if lt IE 6]>
<style type="text/css">
©ixnport (ie5.css);
</style>
<1 [endif]-->
</head>
2. G uarda todos los archivos y abre las pági­
nas en IE5 (si está instalado).
La condición iflt IE 6 significa "S i la versión del
navegador es inferior a 6 ", que es lo m ism o que
decir V5 y V5.5.
 Patchwork: parches en CSS 85

El otro modelo de cajas de IE 5.x ño m ediante CSS. Siem pre que indiquem os un
En el capítulo sobre el m odelo de cajas, en la doctype correcto para nuestras páginas w eb, IE6
pág. 44 descubrim os que el cálculo de la anchura trabajará en m odo estándar, por lo que sólo de­
total de una caja no es nada intuitivo: bem os preocupam os por IE5. De algún m odo
tenem os que indicarle a IE5 que calcule la an­
• En el m undo real, el relleno y la anchura del chura de la caja de otra forma. La solución: Con-
m arco se incluyen en la indicación de la an­ ditional Comments.
chura de una caja.
En una hoja de estilos especial (p.ej. la que
• En las cajas CSS, el relleno (padding) y la an­
hem os creado antes ie5.css)f que solam ente se
chura del m arco (border-zvidth) se añaden a la
enviará a Internet Explorer 5.x con ayuda de
indicación de la anchura (zvidth).
Conditional Com m ents, definirem os la anchura
Para calcular la anchura total, Internet Explorer de la caja en 440px:
5.x toma com o m odelo las cajas del m undo real,
• p#ejemplo { width: 44Opx; }
por lo que se equivoca. Internet Explorer 6 calcu­
la las cajas correctam ente, siempre que esté fun­ Las indicaciones de padding y border se m antie­
cionando en m odo estándar. nen sin cam bios conform e a la cascada, y por fin
las aguas vuelven a su cauce.
D icho de otro m odo: si en una caja se definen
tanto zvidth com o valores horizontales para pad­
ding o border, IE5.X e IE6 en modo quirks repre­
sentan la caja dem asiado pequeña. Un ejemplo: Recordatorio
p#ejemplo { H agam os un repaso de los puntos m ás im por­
width:40Opx; tantes de este capítulo:
padding:lOpx;
border:solid lOpx #333; • Existen num erosos tipos de parches, filtros y
} hacks para navegadores, aunque es aconse­
Código 50: Ejemplo CSS para el cálculo de la anchura de una caja jable m oderar su uso al m ínim o im prescin­
dible.
• Si se calcula correctam ente, este párrafo tie­
• @ im port perm ite ocultar hojas de estilos a los
ne una anchura de 440px:
navegadores antiguos.
400px zvidth m ás lOpx de padding-left, pad-
• Los Conditional Com ments perm iten definir
ding-right, border-left y border-right.
estilos exclusivos para Internet Explorer y
• Si se calcula erróneam ente, el párrafo sola­
lograr así que m uestre las páginas correcta­
m ente mide 400px:
m ente a pesar de los errores CSS.
Los 400px del zvidth incluyen padding y bor­
• Internet Explorer V5.x y V 6 en el llam ado
der. Es decir, para el contenido solam ente
m odo quirks interpretan incorrectam ente el
nos quedan 360px.
m odelo de cajas.
No cuesta im aginar que estos cálculos erróneos
pueden tener consecuencias drásticas en el dise­
86 Herramientas importantes

Herram ientas im portantes

En este capítulo conoceremos una serie de Jterramientas 5^CSS* ¿Jfo rm s^ g&Jmages* Qí Informa#
importantes, concretamente programas útiles, sitios zveb de
Disafcie Stytes ►
ayuda y algunos libros.
Display £SS fiy Msdia Type ►
Para term inar el cuaderno m e gustaría ofrecer
^ CSS Ctrl+Mayús.+C
algún últim o consejo sobre navegadores, edito­
res, sitios web y libros. VtewSryte Information Ctrl+Ma*/ús +Y

Add Us*r Style Sheet...

Navegadores CS5 Ctrl+Mayús. +£

Use Border Box Model

Toda página w eb se visualiza a través de un na­
vegador, y bajo W indows el equipam iento m í­ Fig.73: Web Developer Toolbar
nim o para los d esabollad ores web es la última
versión del siguiente triunvirato: A sí, por ejem plo, por cualquier página w eb que
estem os viendo en Firefox, podem os visualizar y
• Internet Explorer editar las instrucciones CSS que utiliza la misma
• M ozilla Firefox en la barra lateral.
• Opera
El navegador m ostrará los cam bios en tiempo real
Firefox y Opera funcionan conform e a los están­ en la ventana del navegador, lo que perm ite
dares, e IE7 prom ete incorporar m uchas mejoras. com prender fácilm ente el efecto de los com an­
Para M ac debem os incluir en la lista Safari, y pa­ dos CSS:
ra Linux, Konqtieror.
U n navegador de sólo texto com o Lynx tam bién
puede resultar útil para valorar la accesibilidad
de una página web: los m otores de búsqueda só­
lo pueden leer las páginas com o navegadores de
sólo texto. Lo que no vea Lynx, probablem ente
tam poco lo verá el robot de Google.

Lynx V iew er

En Internet es posible encontrar una em ula­

ción de Lynx para probar tus páginas en la di­
rección siguiente:
http://www.delorie.com/web/lvnxview.html
Fig. 74: Edición en vivo de CSS con Web Developer Extensión

Web D eveloper Extensión es una herram ienta

Extensiones: Web Developer para
Firefox
Web Developer es una recopilación de herram ien­
tas útiles y, para m uchos diseñadores w eb, es la
extensión de Firefoz m ás im portante.
Web D eveloper perm ite hacer m uchísim as cosas:
analizar páginas web, com probar la accesibili­
dad, m ostrar y editar el código CSS de cualquier
página, ocultar im ágenes, m edir objetos con pre­
cisión del orden de píxeles y m ucho más.
verdaderam ente útil para la verificación y análi­
sis. Recom iendo a cualquiera que se tom e el
tiem po de fam iliarizarse con esta extensión; en
poco tiem po te estarás preguntando cóm o podí­
as vivir sin ella.
Chris Pederick ofrece la descarga del programa y
de la docum entación:
• Descarga:
http://chrispederick.com/work/webdeveloper/
• D ocum entación:
http://chrispederick.com/work/webdeveloper/
documentation/
 Herramientas importantes 87

Incluso existe una versión traducida al español y En TopStyle Pro es posible visualizar sim ultá­
al catalán del program a, aunque la docum enta­ neamente una página en Internet Explorer (arri­
ción sólo está disponible en inglés. ba) y M ozilla Firefox (abajo):

Internet Explorer D eveloper Toolbar

M icrosoft tam bién ofrece una Internet Explorer

D eveloper Toolbar, aunque sólo está disponible Mc<hC« SU***
en inglés y no es com parable al original de
Chris Pederick.

Si te interesa, visita la dirección

http://www.microsoft.com/downloads/ e introduce
com o criterio de búsqueda "Internet Explorer
D eveloper Toolbar".

.. ■
■
■■
■
v. . . ; . y .... « w V.

■ j j | H ___
Editor de código ¿i.—
Fig. 76: TopStyle Pro muestra la vista previa de la página simul­
táneamente en IE y Firefox
*£ «XHTML1 0 - i3 i¡7 1 Lo único que criticaría de TopStyle es que no in­
B f t t n t w t e c i A ttttb trtfrx &
iP * lropecíO f
tegra una función de adm inistración de proyec­
m »c n s p e c tg r f tos ni de carga por FTP/SFTP.
Si te interesa, puedes descargar una versión de
prueba de 20 días de TopStyle en la siguiente di­
rección:
http://www.newsqator.com/NGOLProduct.aspx?
ProdlD=TopStvle
arrouth
backgrcvxj Existía una versión gratuita llam ada TopStyle Li­
background-attdcbrnení te, aunque ya no se puede encontrar en el site
background-coíor
BDefwerMcrf ^ backgjoundHmage
desde que N ew sgator adquirió la empresa de
backgfound-pcabon Nick Bradbury.
b«d« backgfound-repeaf
fcpsce B border Si todavía encuentras alguna versión de TopSty­
"-¥Ms 3 bofdei-bottom
JÍ® ac e borderbottomcolor
le Lite para descargar (busca en Google p.ej.
B t venís botdeí-bottom-síyte "TopStyle Lite Dozvnload"), la versión Lite será
/ onclick
* ..J U I .C .I ,
A más que suficiente para estudiar este manual.
oc-ssj ; Sample Text '$■
# C SS1 • E4 # M S4 # NS8 #08 Alternativas a TopStyle
Fig. 75: TupStyle Pro en acción Puedes encontrar una lista m uy exhaustiva de
H ace unos años, N ick Bradbury creó HomeSite, editores CSS (tam bién para otros sistem as
uno de los m ejores editores de código HTML operativos) en la w eb del W 3C:
que posteriorm ente fue absorbido por M acrome­ http://www.w3.Org/Style/CSS/#editors
dia Dreamweaver.
Con TopStyle Pro, ha creado un editor de CSS
que tam bién perm ite editar HTM L cóm odam en­
te. A lgunos de sus puntos destacados:
Sitios útiles
Los siguientes sitios web sobre CSS m erecen
• H TM L jv CSS en un editor
com o m ínim o una vista, aunque esta lista no
• Com probación de sintaxis CSS y del nave­
pretende ser exhaustiva y existen m uchos más.
gador
• Búsqueda y sustitución de colores CSS Sitios generales sobre CSS
• Integración con el validador del W3C Adem ás de mi propio sitio web
(http://infotekten.de) en alem án, puedo recom en­
dar los siguientes sitios relacionados con CSS:
 94 índice de palabras clave

índice de palabras clave

limportant, 39, 62 Editores, 87 Elementos inline, 12 h e a d (elem en to H T M L ),
@import, 82 estructura de una regla em (elem ento HTML), 10
C SS (style), 3 1 16 h e ig h t, 42
a (elem ento HTML), 19,
Guardar en el head
32 em (unidad CSS), 39 H eren cia (inheritance),
(<style>), 34
address (elemento Guardar en un archivo
Entities (HTML), 22 61,63
HTML), 22 extemo, 28,34 Especificidad H ip e rv ín c u lo s
Árbol genealógico del Guardar en un elemento (specificity), 38,53, "V olver arriba". 20
(style), 34 62 aiactive, 33
docum ento, 60
Hacks. Véase Parches arfocus, 33
background, 48 Faux colum n, 77
Hoja de estilos del aihover, 33
background - Firefox Anatomía (estructural.
navegador, 16 DOM-Inspector, 61
attachment, 49 Hojas de estilos más 19
background-color, 29, Hacer vínculos no crear (<a>). 19
claras, 49 visitados, 32
30 Imágenes de fondo, 48 Efecto rollover, 33
Mostrar la barra de Formato, 32 ,53, 54. 55.
background-image, 48 Modelo de cajas, 42 desplazamiento, 45
Patches, 82 76
background-position, 49 Web Developer
Qué es una stvlesheet, Selecdonar en
background-repeat, 48 Extensión, 86 #navegadon, 37
28
blockquote (elem ento float, 70 Sldp-Link, 20
Selectores, 36
HTML), 22 Dejar fluir imágenes. 70 visitados v no visitados.
Selectores anidados, 36,
body (elem ento HTML), Y dear, 72 32
52
11 Y diseños de varias H TM L
Sintaxis de una regla
columnas, 75, 78 ¿Qué es H TM L’ , 8
border, 43, 46 CSS, 39
Vincular con HTML, 29 Flow (docum ent), 65 Anidadón de
bottom
Y HTML (cometidos), 8 Flujo del documento, 65 elementos, 12
(posicionamiento),
Y HTML (tareas), 28 font.... Véase Fuente... Atributos (visión
66,67
CSS Z e n G a rd e n , 2 5 font-family, 30 general), 19
br (elem ento HTML), 21 Caracteres especiales
D e c larac io n e s font-size, 3 0 ,3 1 ,5 0
Cascada, 60 (Entities). 22
Definición, 31 font-style, 31,50
Especificidad Construcdón de
Orden, 50 font-weight, 69
(specificity), 38 elementos, 12
Los niveles de la D e fin ir co lo re s (R G B ), form (elem ento HTML), Creación de listas, 17
cascada, 61 40 57 Crear coméntanos. 9
Vinculación de estilos, Diseñar Formato de color de Crear secdones con div,
34 Con float y float, 78 fondo, 29 14
Y herencia, 61 Con float y margin, 75 Crear tablas. 23
Formato de color de
Centrar Diseños Datos de interés sobre
fuente, 29
Página web, 46 Con position:absolute, elementos, 1 1
Texto, 31 74 Formato de colores, 29, Elementos de bloque e
Character Entities D ise ñ o s d e v a r ia s 77 inline, 12
(HTML), 22 c o lu m n a s Formato de la Estructura básica, 9
cite (elem ento HTML), Con float y float, 78 navegación HTML-Validator, 24
con float y m argin, 75 "Ud. está aquí". 55, 77 id (como atributo), 37
22
Con positionrabsolute, Horizontal (con fichas), Lo que no es HTML. 9
class 54 Ocultar elementos con
74
Como atributo, 3 8 ,7 1 Horizontal CSS, 33
Com o selector, 71 D ise ñ o s p re p a r a d o s , 88
(display:inline), 52 Resaltar texto, 16
Com o selector (.), 38 d is p la y
Vertical, 76 Skip-Link, 20
Diferencia con respecto block, 58
Formato del color de Tags (son etiquetas), 8
a id, 38 inline, 52
fondo, 77 Tags (y elementos), 12
Ejemplo práctico, 71 none, 33
Uso de títulos, 15
Nombres para clases, 38 d is p la y (g e n eral), 5 2 Formato del tamaño de
Y XHTML. 8
clear (y float), 72 D istan cia en tre fuente, 30
h tm l (elem en to
C ódigo fuente (es la c aracte re s (letter- Formato del tipo de
m aestro ), 10
página), 5 sp a c in g ), 3 1 fuente, 30
id
collapsing margins, 43 D istan cia e n tre le tras Formulario Como atributo HTML.
color, 29, 30, 69 (le tte r-sp acin g ), 50 Formato con CSS, 57 37
Conditional Comments D istan cia e n tre lín e as Formularios Como selector (#), 37
Crear con HTML, 57 Diferenda con respecto
(IE), 83 (lin e-h eigh t), 3 1
Formular-Chef a dass, 38
Crear formulario de d iv (elem en to H T M L ), (nettz.de), 58 Nombres, 38
contacto, 57 14 Gráficos Im á g e n e s. Véase
Crear versión para di, dt y dd (elemento Atributos de <im g ... G rá fic o s
imprimir, 56 HTML), 18 />, 20 Im á g e n e s d e fo n d o , 48
CSS DOCTYPE (HTML), 10 Como título, 21
Imágenes de fondo, 48 im g (elem en to H T M L ),
Cascada, 34 ,60 Docum ent flow, 65
Clases (class), 71 texto alternativo, 21 20
Document Object
Core Styles del W 3C ,25 vincular con HTML, 20 In d ic a d o n e s d e
M odel (DOM), 60
Crear comentarios, 28 h l a h6 (elemento m e d id a s . Véase
Efecto rollover, 55, 77
Definir medio, 56 HTML), 15 U n id a d e s
Definir medio de salida, Elementos de bloque,
12,66 Hacks. Véase Parches in p u t (elem en to
82
H T M L ), 5 7
 índice de palabras clave

Internet Explorer List-O -M atic, 88 Diseñar adecuadas al Selector de tipo

Accesibilidad, 4 L y n x (n a v e g a d o r), 86 medio, 6 (sencillo), 36
Conditional Comments, m a n u a ld e css.co m , 88 Diseños con tablas, 6 SelfHTML.org, 88
83 Diseños sin tablas, 6 span (elemento HTML),
M arg e n
Double margin float Flexibilidad (periódico),
exte rio r(m argin ), 43 22, 69
bug, 72 5
Hacer vínculos no M a rg e n in terio r strong (elemento
Pantha Reí (flow), 65
visitados, 32 (p ad d in g ), 43 HTML), 16
Parches, 82
IE6 e ümportant, 39 m a rg in , 43 Style. Véase Regla CSS
Pegar etiquetas
Y el modelo de cajas, 44, centrar (auto), 46 style (como atributo), 34
(HTML), 8
85 und positionrabsolute, style (como elemento),
Y la guerra de los 74 positionrabsolute, 67
Y elemento contenedor, 34
navegadores, 83 Y float, 75 Tablas
68
JavaScript, 6,58 M e n ta lid a d d e p a p e l, 4, Diseños con tablas, 6
Y elemento raíz html, 67
Konqueror (navegador), 6 HTML, 23
positionrfixed, 69
86 m eta (elem en to H T M L ),
positionrrelative, 66
table, tr y td, 23
label (elemento HTML), 11 thead, tfoot y tbody, 24
print (medio CSS), 56,
57 M o d e lo d e cajas Tags (HTML), 8,12
82
left (posicionamiento), border, 43 text-align, 31
Calcular la anchura Propiedad (property),
66, 67 textarea (elemento
total, 44 31 HTML), 57
letter-spacing, 31, 50
Calibración (todo a 0), Pseudociases
li (elemento HTML), 17 Texto alternativo, 21
44 (hipervínculos), 32 Texto centrado, 31
Líneas de borde Escritura abreviada, 50 Pseudociases
(border), 43 margin, 43 title (elemento HTML),
(Hipervínculos), 33
line-height, 31 padding, 43 11
Regla CSS
link (elemento HTML), Representación Títulos (hl a h6), 15
¿Qué es?, 28
29,56 esquemática, 42 top (posicionamiento),
Sintaxis, 31
Links. Véase Terminología 66, 67
(ingl./esp.), 42
Representación
Hipervínculos esquemática TopStyle, 87
Visión general, 42
Lista Anidación de ul (elemento HTML),
width, 42
Listas anidadas, 17 Y formato de colores, 48 elementos, 12 17,19
Listas Y herencia (ínheritance), Listas anidadas, 18 Unidades, 39
Elementos juntos, 52 63 Modelo de cajas, 42 Unidades, absolutas
Formato de los N avegador positionrabsolute (cm, in, pt), 40
elementos de las Hoja de estilos (diseños), 74
Unidades, relativas (px,
listas, 37 integrada, 16 Secciones div, 15
Lista de navegación, 19 em, %), 39
N a v e g a d o re s right (posicionamiento),
Lista de navegación Valor (valué), 31
Navegadores antiguos, 66, 67
(con tabs), 54 Viñetas, 17,37
82 Safari (navegador), 86
Lista de navegación W3C
(horizontal), 52
Problemas con CSS, 82 scourdesign.com, 88
Core Styles, 25
Lista de navegación N o m b re s d e colores, 40 screen (medio CSS), 56, HTML-Validator, 24
(vertical), 76 o l (elem ento H T M L ), 17 82 Web Developer
Listas de definiciones, O p era (n a v e g a d o r), 86 Selectores, 31,36 Extensión, 32, 86
18 p (elem ento H T M L ), 16 agrupar con comas, 36
width, 42, 44, 45
Listas no ordenadas(ul), p a d d in g , 47 anidados, 52
17 anidar, 36
XHTML, 8
P a d d in g , 43
Listas ordenadas (ol), 17 class, 3 8 ,7 1 YAML, 88
P á g in a s w eb
Numeración por CSS, 37 Especificidad (sistema yourhtmlsource.com, 88
.hechas de
Numeraciones(ol), 17 de puntos), 38 ,5 3,6 2
rectángulos, 8
Viñetas (ul), 17 id (#), 37
...tienen capas, 5
 CSS, un juego de niños
README.TXT........................................................... 3
La idea sobre el cuaderno......................................3
¿AQUIÉN SE DIRIGE?.................................................3
L a WEB NO ESTÁ HECHA DE PAPEL....................... 4
Mentalidad de papel, páginas web y expectativas
FRUSTRADAS........................................................... 4
PÁGINAS WEBADECUADAS AL MEDIO: MÁSALLÁ DEL PAPEL 5
¿Diseño de páginas con tablas? ............................. 6
Así FUNCIONA H TM L ............................................. 8
Las páginas web están hechas de cuadros
RECTANGULARES...................................................... 8
¿QUÉ ES REALMENTE HT - M - L?.............................. 8
LOS TRES MALENTENDIDOS SOBRE HTML MÁS COMUNES.. 9
<!-- Comentarios HTML - > ...................................... 9
EN TODAS LAS PÁGINAS HAY UNAESTRUCTURA BÁSICA 9
Datos de interés sobre elementos HTML.............. 11
Recordatorio...................................................... 13
LOS ELEMENTOS H TM L MÁS IMPORTANTES 14
Dividir la página en secciones: d i v .........................14
Títulos: h 1 a h 6 .................................................... 15
Párrafos: pde p a r a g r a p h ............................. 16
Resaltar texto: s t r o n g y e m .................................16
Cada navegador tiene una hoja de estilos integrada
16
Listas: viñetas y numeraciones............................. 17
Hipervínculos: la peculiaridad de la World Wide
Web..................................................................... 19
Ruta de acceso a la imagen: i m g ............................. 20
Otros elementos útiles .......................................21
Las tablas no están prohibidas............................. 23
¿Todo correcto? Comprobación de HTML con el
valí dador ............................................................24
CSS para probar: los W3C core styles ............25
Página de contacto: de la página al sitio ............... 26
Recordatorio......................................................26
D es c u b r ir CSS: f u e n t e s , c o lo r e s e
HIPERVÍNCULOS .......................................... 28
Una hoja de estilos es un conjunto de patrones de
formato...............................................................28
CSS Y LAS CAJAS HTML EN LAPÁGINAWEB..................28
La primera stylesheet propia................................28
Definición de colores de fondo y de fuente ......... 29
Tipo y tamaño de fuente: f o n t - f a m i l y y f o n t - s i z e 30
Tamaño de fuente de los títulos .......................... 31
Style: estructura de una regla CSS.................... 31
Formato de la dirección.......................................31
Formato de los hipervínculos..............................32
Estilos en tres sitios distintos............................ 34
Recordatorio......................................................35
S e l e c t o r e s , unidades y validador C S S 36
Un selector selecciona el cuadro al que se aplica el
formato...............................................................36
SÓLO en esta sección: anidación de selectores 36
Asignación de nombres propios con ID y class 37
Especificidad: el sistema de puntos para
selectores......................................................... 38
Valores y unidades en CSS.................................. 39
El validador CSS................................................ 40
Recordatorio......................................................41
F o r m a to de m á r g en es y espacios c o n el
MODELO DE CAJAS............................................... 42
Problemas potenciales en el formato de los
cuadros..............................................................42
Visión general del modelo de cajas ..................... 42
Calibración: definir un margen nulo..................... 44
Definir la anchura del elemento: w i d t h .................45
Centrar la página: m a r g i n : a u t o ............................ 46
Creación de un borde: b o r d e r ..............................46
Más espacio alrededor: p a d d i n g ........................... 47
El modelo de cajas y los colores........................ 48
Imágenes de fondo con C S S ................ 48
T rucos para redactar hojas de estilos................49
Escrituraabreviada para padding y margin........... 50
Recordatorio...................................................... 51
N av e g a c ió n , ver sió n para imprimir y
FORMULARIO DE CONTACTO................................. 52
Elementos de listas juntos: d i s p l a y : i n u n e ........... 52
Especificidad (specificity) en la práctica.............. 53
Tabbed Navigation - Navegación con fichas...........54
Crear una versión para imprimir de las páginas 56
Un formulario para la página de contacto............ 57
Recordatorio .......................................... 59
E l NAVEGADOR Y C S S: CASCADA Y HERENCIA.. 60
El árbol genealógico: l a estructura de la página
web .....................................................................60
La cascada de las C a s c a d i n g Style Sheets........... 61
Herencia ( i n h e r í t a n c e ) ......................................... 63
Valor por defecto { i n i t i a l v a l u é ) .......................... 63
Recordatorio......................................................64
F l u jo y p o s ic io n a m ie n to ................................. 65
La página es un río tranquilo................................65
LET IT FLOW: EL FLUJO NORMAL DE LOS CUADROS..........65
Posicionamiento relativo: flujo desplazado.........66
POSICIONAMIENTOABSOLUTO: FUERADE FLUJO............ 67
Como una estatua: posicionamiento fijo................69
Float cuadros flotantes.................................... 70
Recordatorio......................................................72
D iseño s de varias c o lu m n a s con C S S .........74
Con P o s m o N :a b s o l u t e ......................................... 74
Float 1:2 columnas con f l o a t y m a r g i n ..................75
Float II: 2 columnas con floats opuestos............. 78
Float III: 3 columnas con floats opuestos............ 79
Diseños flexibles .................................. 79
Recordatorio......................................................81
Pa tc h w o r k : par c h es en C S S ......................... 82
Parches y hacks.................................................. 82
@IMPORT - OCULTAR ESTILOS ALOS NAVEGADORES
ANTIGUOS..............................................................82
Internet Explorer...............................................83
CONDITIONAL COMMENTS ENACCIÓN..........................84
Recordatorio......................................................85
H err am ientas im p o r ta n te s ............................ 86
Navegadores.......................................................86
Extensiones: W e b D e v e l o p e r para Firefox........... 86
Editor de código................................................. 87
Sitios útiles........................................................ 87
Libros interesantes.............................................88
N o t a s ................................................................... 89
LOS MANUALES DE PC CUADERNOS...................91
V e n ta a l n ú m e r o ............................................... 92
Índice de p alab r as c l a v e .................... 94
ISBN 2 -9 1 5 6 0 5 -6 2 -9
9782915605624
9 7 8 2 9 1 5 60 5 6 2 4