Css Introduccion

www.librosweb.
es

Introduccin a
CSS

Javier Eguluz Prez
Sobre este libro...
Los conteniuos ue este libio estn bajo una licencia Cieative Commons
Reconocimiento - No Comeicial - Sin 0bia Beiivaua S.u
(http:cieativecommons.oiglicensesby-nc-nuS.uueeu.es)
Esta versin impresa se cre el 8 de mayo de 2009 y todava est incompleta.
La veision ms actualizaua ue los conteniuos ue este libio se pueue encontiai en
http:www.libiosweb.escss
Si quieies apoitai sugeiencias, comentaiios, ciiticas o infoimai sobie eiioies,
pueues enviainos un mensaje a contacto@librosweb.es
Introduccin a CSS
www.librosweb.es
2
Captulo 1. Introduccin............................................................................................................... 5
1.1. Qu es CSS? ............................................................................................................................ 5
1.2. Breve historia de CSS................................................................................................................ 5
1.3. Soporte de CSS en los navegadores.......................................................................................... 6
1.4. Especificacin oficial ................................................................................................................. 7
1.5. Funcionamiento bsico de CSS ................................................................................................. 7
1.6. Cmo incluir CSS en un documento XHTML ............................................................................. 9
1.7. Glosario bsico ....................................................................................................................... 12
1.8. Medios CSS ............................................................................................................................. 13
1.9. Comentarios ........................................................................................................................... 15
1.10. Sintaxis de la definicin de cada propiedad CSS................................................................... 16
Captulo 2. Selectores................................................................................................................. 18
2.1. Selectores bsicos................................................................................................................... 18
2.2. Selectores avanzados ............................................................................................................. 26
2.3. Agrupacin de reglas .............................................................................................................. 29
2.4. Herencia.................................................................................................................................. 30
2.5. Colisiones de estilos................................................................................................................ 30
Captulo 3. Unidades de medida y colores .................................................................................. 32
3.1. Unidades de medida............................................................................................................... 32
3.2. Colores.................................................................................................................................... 39
Captulo 4. Modelo de cajas (box model).................................................................................... 44
4.1. Anchura y altura ..................................................................................................................... 46
4.2. Margen y relleno .................................................................................................................... 47
4.3. Bordes..................................................................................................................................... 55
4.4. Margen, relleno, bordes y modelo de cajas ........................................................................... 63
4.5. Fondos .................................................................................................................................... 68
Captulo 5. Posicionamiento y visualizacin................................................................................ 77
5.1. Tipos de elementos ................................................................................................................ 77
5.2. Posicionamiento..................................................................................................................... 79
5.3. Posicionamiento normal......................................................................................................... 81
5.4. Posicionamiento relativo........................................................................................................ 82
5.5. Posicionamiento absoluto ...................................................................................................... 84
5.6. Posicionamiento fijo............................................................................................................... 89
5.7. Posicionamiento flotante ....................................................................................................... 90
5.8. Visualizacin ........................................................................................................................... 97
Captulo 6. Texto...................................................................................................................... 104
6.1. Tipografa.............................................................................................................................. 104
6.2. Texto..................................................................................................................................... 111
Captulo 7. Enlaces ................................................................................................................... 123
7.1. Estilos bsicos ....................................................................................................................... 123
7.2. Estilos avanzados.................................................................................................................. 126
Captulo 8. Imgenes................................................................................................................ 129
Introduccin a CSS
www.librosweb.es
3
8.1. Estilos bsicos ....................................................................................................................... 129
Captulo 9. Listas ...................................................................................................................... 132
9.1. Estilos bsicos ....................................................................................................................... 132
Captulo 10. Tablas ................................................................................................................... 145
10.1. Estilos bsicos ..................................................................................................................... 145
10.2. Estilos avanzados................................................................................................................ 148
Captulo 11. Formularios .......................................................................................................... 153
11.1. Estilos bsicos ..................................................................................................................... 153
Captulo 12. Layout .................................................................................................................. 161
12.1. Centrar una pgina horizontalmente ................................................................................. 161
12.2. Centrar una pgina verticalmente...................................................................................... 165
12.3. Estructura o layout ............................................................................................................. 167
12.4. Alturas/anchuras mximas y mnimas................................................................................ 172
Captulo 13. Otros .................................................................................................................... 176
13.1. Propiedades shorthand ...................................................................................................... 176
13.2. Versin para imprimir......................................................................................................... 177
13.3. Personalizar el cursor ......................................................................................................... 180
13.4. Hacks y filtros...................................................................................................................... 183
13.5. Prioridad de las declaraciones CSS ..................................................................................... 186
13.6. Validador ............................................................................................................................ 188
13.7. Recomendaciones generales sobre CSS ............................................................................. 188
Captulo 14. Recursos tiles...................................................................................................... 194
14.1. Extensiones de Firefox........................................................................................................ 194
14.2. Aplicaciones web................................................................................................................ 197
14.3. Sitios web de inspiracin .................................................................................................... 197
14.4. Referencias y colecciones de recursos ............................................................................... 198
Captulo 15. Ejercicios .............................................................................................................. 199
Captulo 16. Ejercicios resueltos ............................................................................................... 224
Introduccin a CSS
www.librosweb.es
4
Captulo 1. Introduccin
1.1. Qu es CSS?
CSS es un lenguaje ue hojas ue estilos cieauo paia contiolai el aspecto o piesentacion ue
los uocumentos electionicos uefiniuos con BTNL y XBTNL. CSS es la mejoi foima ue
sepaiai los conteniuos y su piesentacion y es impiescinuible paia cieai pginas web
complejas.
Sepaiai la uefinicion ue los conteniuos y la uefinicion ue su aspecto piesenta numeiosas
ventajas, ya que obliga a cieai uocumentos BTNLXBTNL bien uefiniuos y con
significauo completo (tambin llamauos "documentos semnticos"). Auems, mejoia la
accesibiliuau uel uocumento, ieuuce la complejiuau ue su mantenimiento y peimite
visualizai el mismo uocumento en infiniuau ue uispositivos uifeientes.
Al cieai una pgina web, se utiliza en piimei lugai el lenguaje BTNLXBTNL paia
marcar los conteniuos, es uecii, paia uesignai la funcion ue caua elemento uentio ue la
pgina: piiafo, titulai, texto uestacauo, tabla, lista ue elementos, etc.
0na vez cieauos los conteniuos, se utiliza el lenguaje CSS paia uefinii el aspecto ue caua
elemento: coloi, tamao y tipo ue letia uel texto, sepaiacion hoiizontal y veitical entie
elementos, posicion ue caua elemento uentio ue la pgina, etc.
1.2. Breve historia de CSS
Las hojas ue estilos apaiecieion poco uespus que el lenguaje ue etiquetas SuNL,
alieueuoi uel ao 197u. Besue la cieacion ue SuNL, se obseivo la necesiuau ue uefinii
un mecanismo que peimitieia aplicai ue foima consistente uifeientes estilos a los
uocumentos electionicos.
El gian impulso ue los lenguajes ue hojas ue estilos se piouujo con el boom ue Inteinet y
el ciecimiento exponencial uel lenguaje BTNL paia la cieacion ue uocumentos
electionicos. La gueiia ue navegauoies y la falta ue un estnuai paia la uefinicion ue los
estilos uificultaban la cieacion ue uocumentos con la misma apaiiencia en uifeientes
navegauoies.
El oiganismo WSC (http:www.wS.oig) (Woilu Wiue Web Consoitium), encaigauo ue
cieai touos los estnuaies ielacionauos con la web, piopuso la cieacion ue un lenguaje
ue hojas ue estilos especifico paia el lenguaje BTNL y se piesentaion nueve piopuestas.
Las uos piopuestas que se tuvieion en cuenta fueion la CBSS (Cascading HTML Style
Sheets) y la SSP (Stream-based Style Sheet Proposal).
La piopuesta CBSS fue iealizaua poi Bkon Wium Lie y SSP fue piopuesto poi Beit Bos.
Entie finales ue 1994 y 199S Lie y Bos se unieion paia uefinii un nuevo lenguaje que
tomaba lo mejoi ue caua piopuesta y lo llamaion CSS (Cascading Style Sheets).
Introduccin a CSS Captulo 1. Introduccin
www.librosweb.es
5
En 199S, el WSC ueciuio apostai poi el uesaiiollo y estanuaiizacion ue CSS y lo aauio a
su giupo ue tiabajo ue BTNL. A finales ue 1996, el WSC publico la piimeia
iecomenuacion oficial, conociua como "CSS nivel 1".
A piincipios ue 1997, el WSC ueciue sepaiai los tiabajos uel giupo ue BTNL en ties
secciones: el giupo ue tiabajo ue BTNL, el giupo ue tiabajo ue B0N y el giupo ue
tiabajo ue CSS.
El 12 ue Nayo ue 1998, el giupo ue tiabajo ue CSS publica su segunua iecomenuacion
oficial, conociua como "CSS nivel 2". La veision ue CSS que utilizan touos los
navegauoies ue hoy en uia es CSS 2.1, una ievision ue CSS 2 que an se est elaboianuo
(la ltima actualizacion es uel 19 ue julio ue 2uu7). Al mismo tiempo, la siguiente
iecomenuacion ue CSS, conociua como "CSS nivel S", contina en uesaiiollo uesue 1998
y hasta el momento solo se han publicauo boiiauoies.
La auopcion ue CSS poi paite ue los navegauoies ha iequeiiuo un laigo peiiouo ue
tiempo. El mismo ao que se publico CSS 1, Niciosoft lanzaba su navegauoi Inteinet
Exploiei S.u, que uisponia ue un sopoite bastante ieuuciuo ue CSS. El piimei navegauoi
con sopoite completo ue CSS 1 fue la veision paia Nac ue Inteinet Exploiei S, que se
publico en el ao 2uuu. Poi el momento, ningn navegauoi tiene sopoite completo ue
CSS 2.1.
1.3. Soporte de CSS en los navegadores
El tiabajo uel uiseauoi web siempie est limitauo poi las posibiliuaues ue los
navegauoies que utilizan los usuaiios paia acceuei a sus pginas. Poi este motivo es
impiescinuible conocei el sopoite ue CSS en caua uno ue los navegauoies ms utilizauos
uel meicauo.
Inteinamente los navegauoies estn uiviuiuos en vaiios componentes. La paite uel
navegauoi que se encaiga ue inteipietai el couigo BTNL y CSS paia mostiai las pginas
se uenomina motoi. Besue el punto ue vista uel uiseauoi CSS, la veision ue un motoi es
mucho ms impoitante que la veision uel piopio navegauoi.
La siguiente tabla muestia el sopoite ue CSS 1, CSS 2.1 y CSS S ue los cinco navegauoies
ms utilizauos poi los usuaiios:
Navegador Motor CSS 1 CSS 2.1 CSS 3
Internet
Explorer
Trident
Completo desde la
versin 6.0
Completo desde la
versin 8.0
Prcticamente nulo
Firefox Gecko Completo Casi completo
Selectores, pseudo-clases y algunas
propiedades
Safari WebKit Completo Casi completo
Todos los selectores, pseudo-clases y
muchas propiedades
Opera Presto Completo Casi completo
muchas propiedades
www.librosweb.es
6
Google
Chrome
WebKit Completo Casi completo
muchas propiedades
Los navegauoies Safaii y 0peia son los ms avanzauos en el sopoite ue CSS, ya que
incluyen muchos elementos ue la futuia veision CSS S y un sopoite casi peifecto ue la
actual veision 2.1. El navegauoi Fiiefox no tiene un sopoite tan avanzauo ue CSS S peio
las ltimas veisiones estn alcanzanuo ipiuamente a Safaii y 0peia.
Poi su paite, el navegauoi Inteinet Exploiei solo pueue consiueiaise auecuauo uesue el
punto ue vista ue CSS a paitii ue su veision 7. Inteinet Exploiei 6, utilizauo touavia poi
un nmeio significativo ue usuaiios, sufie caiencias muy impoitantes y contiene
uecenas ue eiioies en su sopoite ue CSS. Inteinet Exploiei 8 incluye el sopoite
completo ue touas las piopieuaues y caiacteiisticas ue CSS 2.1.
La tabla anteiioi ha siuo elaboiaua a paitii ue la infoimacion que se pueue encontiai en
la pgina Comparison of layout engines (http:en.wikipeuia.oigwiki
Compaiison_of_layout_engines_(Cascauing_Style_Sheets)) ue la Wikipeuia, uonue se
muestia una compaiacion exhaustiva sobie el sopoite ue touas las caiacteiisticas ue
CSS poi paite ue caua navegauoi.
1.4. Especificacin oficial
La especificacion o noima oficial que se utiliza actualmente paia uiseai pginas web
con CSS es la veision CSS 2.1, actualizaua poi ltima vez el 19 ue julio ue 2uu7 y que se
pueue consultai libiemente en http:www.wS.oigTRCSS21
Besue hace vaiios aos, el oiganismo WSC tiabaja en la elaboiacion ue la pioxima
veision ue CSS, conociua como CSS S. Esta nueva veision incluye miles ue cambios
impoitantes en touos los niveles y es mucho ms avanzaua y compleja que CSS 2.
No obstante, pasain muchos aos hasta que se publique la veision uefinitiva completa
ue CSS S y hasta que los piincipales navegauoies uel meicauo incluyan la mayoi paite
uel nuevo estnuai.
El sitio web uel oiganismo WSC uispone ue una seccion en la que se uetalla el tiabajo
que el WSC est uesaiiollanuo actualmente en ielacion a CSS (http:www.wS.oig
StyleCSScuiient-woik) y tambin uispone ue un blog en el que se publican touas las
noveuaues ielacionauas con CSS (http:www.wS.oigblogCSS) .
1.5. Funcionamiento bsico de CSS
Antes ue la auopcion ue CSS, los uiseauoies ue pginas web uebian uefinii el aspecto ue
caua elemento uentio ue las etiquetas BTNL ue la pgina. El siguiente ejemplo muestia
una pgina BTNL con estilos uefiniuos sin utilizai CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
www.librosweb.es
7
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la pgina</font></h1>
<p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy
largo.</font></p>
</body>
</html>
El ejemplo anteiioi utiliza la etiqueta <font> con sus atiibutos color, face y size paia
uefinii el coloi, la tipogiafia y el tamao uel texto ue caua elemento uel uocumento.
El piincipal pioblema ue esta foima ue uefinii el aspecto ue los elementos se pueue vei
claiamente con el siguiente ejemplo: si la pgina tuvieia Su elementos uifeientes, habiia
que inseitai Su etiquetas <font>. Si el sitio web enteio se compone ue 1u.uuu pginas
uifeientes, habiia que uefinii Suu.uuu etiquetas <font>. Como caua etiqueta <font>
tiene S atiibutos, habiia que uefinii 1.S millones ue atiibutos.
Poi otia paite, el uiseo ue los sitios web est en constante evolucion y es habitual
mouificai caua cieito tiempo los coloies piincipales ue las pginas o la tipogiafia
utilizaua paia el texto. Si se emplea la etiqueta <font>, habiia que mouificai el valoi ue
1.S millones ue atiibutos paia mouificai el uiseo geneial uel sitio web.
La solucion que piopone CSS es mucho mejoi, como se pueue vei en el siguiente
ejemplo:
<head>
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
CSS peimite sepaiai los conteniuos ue la pgina y su aspecto o piesentacion. En el
ejemplo anteiioi, uentio ue la piopia pgina BTNL se ieseiva una zona en la que se
incluye toua la infoimacion ielacionaua con los estilos ue la pgina.
www.librosweb.es
8
0tilizanuo CSS, en esa zona ieseivaua se inuica que touas las etiquetas <h1> ue la pgina
se ueben vei ue coloi iojo, con un tipo ue letia Aiial y con un tamao ue letia gianue.
Auems, las etiquetas <p> ue la pgina se ueben vei ue coloi giis, con un tipo ue letia
veiuana y con un tamao ue letia meuio.
Befinienuo los estilos ue esta foima, no impoita el nmeio ue elementos <p> que existan
en la pgina, ya que touos tenuin el mismo aspecto estableciuo meuiante CSS. Como se
vei a continuacion, esta foima ue tiabajai con CSS no es iueal, ya que si el sitio web
uispone ue 1u.uuu pginas, habiia que uefinii 1u.uuu veces el mismo estilo CSS.
1.6. Cmo incluir CSS en un documento XHTML
0na ue las piincipales caiacteiisticas ue CSS es su flexibiliuau y las uifeientes opciones
que ofiece paia iealizai una misma taiea. Be hecho, existen ties opciones paia incluii
CSS en un uocumento BTNL.
1.6.1. Incluir CSS en el mismo documento HTML
Los estilos se uefinen en una zona especifica uel piopio uocumento BTNL. Se emplea la
etiqueta <style> ue BTNL y solamente se pueuen incluii en la cabeceia uel uocumento
(solo uentio ue la seccion <head>).
Ejemplo:
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un prrafo de texto.</p>
</body>
</html>
Este mtouo se emplea cuanuo se uefine un nmeio pequeo ue estilos o cuanuo se
quieien incluii estilos especificos en una ueteiminaua pgina BTNL que completen los
estilos que se incluyen poi uefecto en touas las pginas uel sitio web.
El piincipal inconveniente es que si se quieie hacei una mouificacion en los estilos
uefiniuos, es necesaiio mouificai touas las pginas que incluyen el estilo que se va a
mouificai.
www.librosweb.es
9
1.6.2. Definir CSS en un archivo externo
En este caso, touos los estilos CSS se incluyen en un aichivo ue tipo CSS que las pginas
BTNL enlazan meuiante la etiqueta <link>. 0n aichivo ue tipo CSS no es ms que un
aichivo simple ue texto cuya extension es .css Se pueuen cieai touos los aichivos CSS
que sean necesaiios y caua pgina BTNL pueue enlazai tantos aichivos CSS como
necesite.
Si se quieien incluii los estilos uel ejemplo anteiioi en un aichivo CSS exteino, se ueben
seguii los siguientes pasos:
1) Se ciea un aichivo ue texto y se le aaue solamente el siguiente conteniuo:
p { color: black; font-family: Verdana; }
2) Se guaiua el aichivo ue texto con el nombie estilos.css Se uebe ponei especial
atencion a que el aichivo tenga extension .css y no .txt
S) En la pgina BTNL se enlaza el aichivo CSS exteino meuiante la etiqueta <link>:
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>
<body>
</body>
</html>
Cuanuo el navegauoi caiga la pgina BTNL anteiioi, antes ue mostiai sus conteniuos
tambin uescaiga los aichivos CSS exteinos enlazauos meuiante la etiqueta <link> y
aplica los estilos a los conteniuos ue la pgina.
Noimalmente, la etiqueta <link> incluye cuatio atiibutos cuanuo se enlaza un aichivo
CSS:
rel: inuica el tipo ue ielacion que tiene el iecuiso enlazauo (en este caso, el
aichivo CSS) y la pgina BTNL. Paia los aichivos CSS, siempie se utiliza el valoi
stylesheet
type: inuica el tipo ue iecuiso enlazauo. Sus valoies estn estanuaiizauos y paia
los aichivos CSS su valoi siempie es text/css
href: inuica la 0RL uel aichivo CSS que contiene los estilos. La 0RL inuicaua pueue
sei ielativa o absoluta y pueue apuntai a un iecuiso inteino o exteino al sitio web.
media: inuica el meuio en el que se van a aplicai los estilos uel aichivo CSS. Ns
auelante se explican en uetalle los meuios CSS y su funcionamiento.
www.librosweb.es
10
Be touas las foimas ue incluii CSS en las pginas BTNL, esta es la ms utilizaua con
mucha uifeiencia. La piincipal ventaja es que se pueue incluii un mismo aichivo CSS en
multituu ue pginas BTNL, poi lo que se gaiantiza la aplicacion homognea ue los
mismos estilos a touas las pginas que foiman un sitio web.
Con este mtouo, el mantenimiento uel sitio web se simplifica al mximo, ya que un solo
cambio en un solo aichivo CSS peimite vaiiai ue foima instantnea los estilos ue touas
las pginas BTNL que enlazan ese aichivo.
Aunque geneialmente se emplea la etiqueta <link> paia enlazai los aichivos CSS
exteinos, tambin se pueue utilizai la etiqueta <style>. La foima alteinativa ue incluii
un aichivo CSS exteino se muestia a continuacion:
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>
<body>
</body>
</html>
En este caso, paia incluii en la pgina BTNL los estilos uefiniuos en aichivos CSS
exteinos se utiliza una iegla especial ue tipo @import. Las ieglas ue tipo @import
siempie pieceuen a cualquiei otia iegla CSS (con la nica excepcion ue la iegla
@charset).
La 0RL uel aichivo CSS exteino se inuica meuiante una cauena ue texto enceiiaua con
comillas simples o uobles o meuiante la palabia ieseivaua url(). Be esta foima, las
siguientes ieglas @import son equivalentes:
@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");
1.6.3. Incluir CSS en los elementos HTML
El ltimo mtouo paia incluii estilos CSS en uocumentos BTNL es el peoi y el menos
utilizauo, ya que tiene los mismos pioblemas que la utilizacion ue las etiquetas <font>.
Ejemplo:
www.librosweb.es
11
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
</head>
<body>
<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>
</body>
</html>
Esta foima ue incluii CSS uiiectamente en los elementos BTNL solamente se utiliza en
ueteiminauas situaciones en las que se uebe incluii un estilo muy especifico paia un
solo elemento concieto.
1.7. Glosario bsico
CSS uefine una seiie ue timinos que peimiten uesciibii caua una ue las paites que
componen los estilos CSS. El siguiente esquema muestia las paites que foiman un estilo
CSS muy bsico:
Figura 1.1. Componentes de un estilo CSS bsico
Los uifeientes timinos se uefinen a continuacion:
Regla: caua uno ue los estilos que componen una hoja ue estilos CSS. Caua iegla
est compuesta ue una paite ue "selectores", un simbolo ue "llave de apertura" ({),
otia paite uenominaua "declaracin" y poi ltimo, un simbolo ue "llave de cierre"
(}).
Selectoi: inuica el elemento o elementos BTNL a los que se aplica la iegla CSS.
Beclaiacion: especifica los estilos que se aplican a los elementos. Est compuesta
poi una o ms piopieuaues CSS.
Piopieuau: peimite mouificai el aspecto ue una caiacteiistica uel elemento.
valoi: inuica el nuevo valoi ue la caiacteiistica mouificaua en el elemento.
0n aichivo CSS pueue contenei infinitas ieglas CSS, caua iegla pueue contenei infinitos
selectoies y caua ueclaiacion pueue estai foimaua poi un nmeio infinito ue paies
piopieuauvaloi.
www.librosweb.es
12
1.8. Medios CSS
0na ue las caiacteiisticas ms impoitantes ue las hojas ue estilos CSS es que peimiten
uefinii uifeientes estilos paia uifeientes meuios o uispositivos: pantallas, impiesoias,
moviles, pioyectoies, etc.
Auems, CSS uefine algunas piopieuaues especificamente paia ueteiminauos meuios,
como poi ejemplo la paginacion y los saltos ue pgina paia los meuios impiesos o el
volumen y tipo ue voz paia los meuios ue auuio. La siguiente tabla muestia el nombie
que CSS utiliza paia iuentificai caua meuio y su uesciipcion:
Medio Descripcin
all Todos los medios definidos
braille Dispositivos tctiles que emplean el sistema braille
embosed Impresoras braille
handheld Dispositivos de mano: mviles, PDA, etc.
print Impresoras y navegadores en el modo "Vista Previa para Imprimir"
projection Proyectores y dispositivos para presentaciones
screen Pantallas de ordenador
speech Sintetizadores para navegadores de voz utilizados por personas discapacitadas
tty Dispositivos textuales limitados como teletipos y terminales de texto
tv Televisores y dispositivos con resolucin baja
Los meuios ms utilizauos actualmente son screen (paia uefinii el aspecto ue la pgina
en pantalla) y print (paia uefinii el aspecto ue la pgina cuanuo se impiime), seguiuos
ue handheld (que uefine el aspecto ue la pgina cuanuo se visualiza meuiante un
uispositivo movil).
Auems, CSS clasifica a los meuios en uifeientes giupos segn sus caiacteiisticas. La
siguiente tabla iesume touos los giupos uefiniuos en el estnuai:
Medio
Continuo /
Paginado
Visual / Auditivo / Tctil
/ Vocal
Mapa de bits /
Caracteres
Interactivo /
Esttico
braille continuo tctil caracteres ambos
embossed paginado tctil caracteres esttico
handheld ambos visual, auditivo, vocal ambos ambos
print paginado visual mapa de bits esttico
projection paginado visual mapa de bits interactivo
screen continuo visual, auditivo mapa de bits ambos
speech continuo vocal (no tiene sentido) ambos
tty continuo visual caracteres ambos
www.librosweb.es
13
tv ambos visual, auditivo mapa de bits ambos
La gian ventaja ue CSS es que peimite mouificai los estilos ue una pgina en funcion uel
meuio en el que se visualiza. Existen cuatio foimas uifeientes ue inuicai el meuio en el
que se ueben aplicai los estilos CSS.
1.8.1. Medios definidos con las reglas de tipo @media
Las ieglas @media son un tipo especial ue iegla CSS que peimiten inuicai ue foima
uiiecta el meuio o meuios en los que se aplicain los estilos incluiuos en la iegla. Paia
especificai el meuio en el que se aplican los estilos, se incluye su nombie uespus ue
@media. Si los estilos se aplican a vaiios meuios, se incluyen los nombies ue touos los
meuios sepaiauos poi comas.
A continuacion se muestia un ejemplo sencillo:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
El ejemplo anteiioi establece que el tamao ue letia ue la pgina cuanuo se visualiza en
una pantalla uebe sei 13 pixel. Sin embaigo, cuanuo se impiimen los conteniuos ue la
pgina, su tamao ue letia uebe sei ue 10 puntos. Poi ltimo, tanto cuanuo la pgina se
visualiza en una pantalla como cuanuo se impiimen sus conteniuos, el inteilineauo uel
texto uebe sei ue 1.2 veces el tamao ue letia uel texto.
1.8.2. Medios definidos con las reglas de tipo @import
Cuanuo se utilizan ieglas ue tipo @import paia enlazai aichivos CSS exteinos, se pueue
especificai el meuio en el que se aplican los estilos inuicanuo el nombie uel meuio
uespus ue la 0RL uel aichivo CSS:
@import url("estilos_basicos.css") screen;
@import url("estilos_impresora.css") print;
Las ieglas uel ejemplo anteiioi establecen que cuanuo la pgina se visualiza poi
pantalla, se caigan los estilos uefiniuos en el piimei aichivo CSS. Poi otia paite, cuanuo
la pgina se impiime, se tienen en cuenta los estilos que uefine el segunuo aichivo CSS.
Si los estilos uel aichivo CSS exteino ueben aplicaise en vaiios meuios, se inuican los
nombies ue touos los meuios sepaiauos poi comas. Si no se inuica el meuio en una iegla
ue tipo @import, el navegauoi sobieentienue que el meuio es all, es uecii, que los estilos
se aplican en touos los meuios.
www.librosweb.es
14
1.8.3. Medios definidos con la etiqueta <link>
Si se utiliza la etiqueta <link> paia enlazai los aichivos CSS exteinos, se pueue utilizai
el atiibuto media paia inuicai el meuio o meuios en los que se aplican los estilos ue caua
aichivo:
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
<link rel="stylesheet" type="text/css" media="print, handheld"
href="especial.css" />
En este ejemplo, el piimei aichivo CSS se tiene en cuenta cuanuo la pgina se visualiza
en la pantalla (media="screen"). Los estilos inuicauos en el segunuo aichivo CSS, se
aplican al impiimii la pgina (media="print") o al visualizaila en un uispositivo movil
(media="handheld"), como poi ejemplo en un iPhone.
Si la etiqueta <link> no inuica el meuio CSS, se sobieentienue que los estilos se ueben
aplicai a touos los meuios, poi lo que es equivalente a inuicai media="all".
1.8.4. Medios definidos mezclando varios mtodos
CSS tambin peimite mezclai los ties mtouos anteiioies paia inuicai los meuios en los
que se aplica caua aichivo CSS exteino:
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
@import url("estilos_seccion.css") screen;
@media print {
/* Estilos especficos para impresora */
}
Los estilos CSS que se aplican cuanuo se visualiza la pgina en una pantalla se obtienen
meuiante el iecuiso enlazauo con la etiqueta <link> y meuiante el aichivo CSS exteino
incluiuo con la iegla ue tipo @import. Auems, los estilos aplicauos cuanuo se impiime la
pgina se inuican uiiectamente en la pgina BTNL meuiante la iegla ue tipo @media.
1.9. Comentarios
CSS peimite incluii comentaiios entie sus ieglas y estilos. Los comentaiios son
conteniuos ue texto que el uiseauoi incluye en el aichivo CSS paia su piopia
infoimacion y utiliuau. Los navegauoies ignoian poi completo cualquiei comentaiio ue
los aichivos CSS, poi lo que es comn utilizailos paia estiuctuiai ue foima claia los
aichivos CSS complejos.
El comienzo ue un comentaiio se inuica meuiante los caiacteies /* y el final uel
comentaiio se inuica meuiante */, tal y como se muestia en el siguiente ejemplo:
/* Este es un comentario en CSS */
Los comentaiios pueuen ocupai tantas lineas como sea necesaiio, peio no se pueue
incluii un comentaiio uentio ue otio comentaiio:
www.librosweb.es
15
/* Este es un
comentario CSS de varias
lineas */
Aunque los navegauoies ignoian los comentaiios, su conteniuo se envia junto con el
iesto ue estilos, poi lo que no se uebe incluii en ellos ninguna infoimacion sensible o
confiuencial.
La sintaxis ue los comentaiios CSS es muy uifeiente a la ue los comentaiios BTNL, poi lo
que no ueben confunuiise:


1.10. Sintaxis de la definicin de cada propiedad CSS
A lo laigo ue los pioximos capitulos, se incluyen las uefiniciones foimales ue la mayoiia
ue piopieuaues ue CSS. La uefinicion foimal se basa en la infoimacion iecogiua en el
estnuai oficial y se muestia en foima ue tabla.
0na ue las piincipales infoimaciones ue caua uefinicion es la lista ue posibles valoies
que aumite la piopieuau. Paia uefinii la lista ue valoies peimitiuos se sigue un foimato
que es necesaiio uetallai.
Si el valoi peimitiuo se inuica como una sucesion ue palabias sin ningn caictei que las
sepaie (paintesis, comas, baiias, etc.) el valoi ue la piopieuau se uebe inuicai tal y
como se muestia y con esas palabias en el mismo oiuen.
Si el valoi peimitiuo se inuica como una sucesion ue valoies sepaiauos poi una baiia
simple (caictei |) el valoi ue la piopieuau uebe tomai uno y solo uno ue los valoies
inuicauos. Poi ejemplo, la notacion <porcentaje> | <medida> | inherit inuica que la
piopieuau solamente pueue tomai como valoi la palabia ieseivaua inherit o un
poicentaje o una meuiua.
Si el valoi peimitiuo se inuica como una sucesion ue valoies sepaiauos poi una baiia
uoble (simbolo ||) el valoi ue la piopieuau pueue tomai uno o ms valoies ue los
inuicauos y en cualquiei oiuen.
Poi ejemplo, la notacion <color> || <estilo> || <medida> inuica que la piopieuau
pueue tomai como valoi cualquiei combinacion ue los valoies inuicauos y en cualquiei
oiuen. Se pouiia establecei un coloi y un estilo, solamente una meuiua o una meuiua y
un estilo. Auems, el oiuen en el que se inuican los valoies es inuifeiente.
0pcionalmente, se pueuen utilizai paintesis paia agiupai uifeientes valoies.
Poi ltimo, en caua valoi o agiupacion ue valoies se pueue inuicai el tipo ue valoi:
opcional, obligatoiio, mltiple o iestiingiuo.
www.librosweb.es
16
El caictei * inuica que el valoi ocuiie ceio o ms veces; el caictei + inuica que el valoi
ocuiie una o ms veces; el caictei ? inuica que el valoi es opcional y poi ltimo, el
caictei {nmero_1, nmero_2} inuica que el valoi ocuiie al menos tantas veces como
el valoi inuicauo en nmero_1 y como mximo tantas veces como el valoi inuicauo en
nmero_2.
Poi ejemplo, el valoi [<family-name> , ]* inuica que el valoi ue tipo <family_name>
seguiuo poi una coma se pueue incluii ceio o ms veces. El valoi <url>? <color>
significa que la 0RL es opcional y el coloi obligatoiio y en el oiuen inuicauo. Poi ltimo,
el valoi [<medida> | thick | thin] {1,4} inuica que se pueuen esciibii entie 1 y 4
veces un valoi que sea o una meuiua o la palabia thick o la palabia thin.
No obstante, la mejoi foima ue entenuei la notacion foimal paia las piopieuaues ue CSS
es obseivai la uefinicion ue caua piopieuau y volvei a esta seccion siempie que sea
necesaiio.
www.librosweb.es
17
Captulo 2. Selectores
Paia cieai uiseos web piofesionales, es impiescinuible conocei y uominai los
selectoies ue CSS. Como se vio en el capitulo anteiioi, una iegla ue CSS est foimaua poi
una paite llamaua "selectoi" y otia paite llamaua "ueclaiacion".
La ueclaiacion inuica "qu hay que hacer" y el selectoi inuica "a quin hay que hacrselo".
Poi lo tanto, los selectoies son impiescinuibles paia aplicai ue foima coiiecta los estilos
CSS en una pgina.
A un mismo elemento BTNL se le pueuen asignai infinitas ieglas CSS y caua iegla CSS
pueue aplicaise a un nmeio infinito ue elementos. En otias palabias, una misma iegla
pueue aplicaise sobie vaiios selectoies y un mismo selectoi se pueue utilizai en vaiias
ieglas.
El estnuai ue CSS 2.1 incluye una uocena ue tipos uifeientes ue selectoies, que
peimiten seleccionai ue foima muy piecisa elementos inuiviuuales o conjuntos ue
elementos uentio ue una pgina web.
No obstante, la mayoiia ue pginas ue los sitios web se pueuen uiseai utilizanuo
solamente los cinco selectoies bsicos.
2.1. Selectores bsicos
2.1.1. Selector universal
Se utiliza paia seleccionai touos los elementos ue la pgina. El siguiente ejemplo elimina
el maigen y el ielleno ue touos los elementos BTNL (poi ahoia no es impoitante fijaise
en la paite ue la ueclaiacion ue la iegla CSS):
* {
margin: 0;
padding: 0;
}
El selectoi univeisal se inuica meuiante un asteiisco (*). A pesai ue su sencillez, no se
utiliza habitualmente, ya que es uificil que un mismo estilo se pueua aplicai a touos los
elementos ue una pgina.
No obstante, si que se suele combinai con otios selectoies y auems, foima paite ue
algunos hacks muy utilizauos (como se vei ms auelante).
2.1.2. Selector de tipo o etiqueta
Selecciona touos los elementos ue la pgina cuya etiqueta BTNL coinciue con el valoi
uel selectoi. El siguiente ejemplo selecciona touos los piiafos ue la pgina:
Introduccin a CSS Captulo 2. Selectores
www.librosweb.es
18
p {
...
}
Paia utilizai este selectoi, solamente es necesaiio inuicai el nombie ue una etiqueta
BTNL (sin los caiacteies < y >) coiiesponuiente a los elementos que se quieien
seleccionai.
El siguiente ejemplo aplica uifeientes estilos a los titulaies y a los piiafos ue una
pgina BTNL:
h1 {
color: red;
}
h2 {
color: blue;
}
p {
color: black;
}
Si se quieie aplicai los mismos estilos a uos etiquetas uifeientes, se pueuen encauenai
los selectoies. En el siguiente ejemplo, los titulos ue seccion h1, h2 y h3 compaiten los
mismos estilos:
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
}
h3 {
color: #8A8E27;
}
En este caso, CSS peimite agiupai touas las ieglas inuiviuuales en una sola iegla con un
selectoi mltiple. Paia ello, se incluyen touos los selectoies sepaiauos poi una coma (,)
y el iesultauo es que la siguiente iegla CSS es equivalente a las ties ieglas anteiioies:
h1, h2, h3 {
color: #8A8E27;
}
En las hojas ue estilo complejas, es habitual agiupai las piopieuaues comunes ue vaiios
elementos en una nica iegla CSS y posteiioimente uefinii las piopieuaues especificas
www.librosweb.es
19
ue esos mismos elementos. El siguiente ejemplo establece en piimei lugai las
piopieuaues comunes ue los titulos ue seccion (coloi y tipo ue letia) y a continuacion,
establece el tamao ue letia ue caua uno ue ellos:
h1, h2, h3 {
color: #8A8E27;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
2.1.3. Selector descendente
Selecciona los elementos que se encuentian uentio ue otios elementos. 0n elemento es
uescenuiente ue otio cuanuo se encuentia entie las etiquetas ue apeituia y ue cieiie uel
otio elemento.
El selectoi uel siguiente ejemplo selecciona touos los elementos <span> ue la pgina que
se encuentien uentio ue un elemento <p>:
p span { color: red; }
Si el couigo BTNL ue la pgina es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
El selectoi p span selecciona tanto texto1 como texto2. El motivo es que en el selectoi
uescenuente, un elemento no tiene que sei "hijo directo" ue otio. La nica conuicion es
que un elemento uebe estai uentio ue otio elemento, sin impoitai lo piofunuo que se
encuentie.
Al iesto ue elementos <span> ue la pgina que no estn uentio ue un elemento <p>, no se
les aplica la iegla CSS anteiioi.
Los selectoies uescenuentes peimiten mejoiai la piecision uel selectoi ue tipo o
etiqueta. Asi, utilizanuo el selectoi uescenuente es posible aplicai uifeientes estilos a los
elementos uel mismo tipo. El siguiente ejemplo amplia el anteiioi y muestia ue coloi
azul touo el texto ue los <span> conteniuos uentio ue un <h1>:
p span { color: red; }
h1 span { color: blue; }
Con las ieglas CSS anteiioies:
www.librosweb.es
20
Los elementos <span> que se encuentian uentio ue un elemento <p> se muestian
ue coloi iojo.
Los elementos <span> que se encuentian uentio ue un elemento <h1> se muestian
ue coloi azul.
El iesto ue elementos <span> ue la pgina, se muestian con el coloi poi uefecto
aplicauo poi el navegauoi.
La sintaxis foimal uel selectoi uescenuente se muestia a continuacion:
elemento1 elemento2 elemento3 ... elementoN
Los selectoies uescenuentes siempie estn foimauos poi uos o ms paites sepaiauas
entie si poi espacios en blanco. La ltima paite inuica el elemento sobie el que se
aplican los estilos y touas las paites anteiioies inuican el lugai en el que se tiene que
encontiai ese elemento paia que los estilos se apliquen iealmente.
En el siguiente ejemplo, el selectoi uescenuente se compone ue cuatio paites:
p a span em { text-decoration: underline; }
Los estilos ue la iegla anteiioi se aplican a los elementos ue tipo <em> que se encuentien
uentio ue elementos ue tipo <span>, que a su vez se encuentien uentio ue elementos ue
tipo <a> que se encuentien uentio ue elementos ue tipo <p>.
No uebe confunuiise el selectoi uescenuente con la combinacion ue selectoies:
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }
/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
Si se emplea el selectoi uescenuente combinauo con el selectoi univeisal, se pueue
iestiingii el alcance ue un selectoi uescenuente. El siguiente ejemplo, muestia los uos
enlaces ue coloi iojo:
p a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
Sin embaigo, en el siguiente ejemplo solamente el segunuo enlace se muestia ue coloi
iojo:
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
La iazon es que el selectoi p * a se tiauuce como todos los elementos de tipo <a> que se
encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento
www.librosweb.es
21
de tipo <p>. Como el piimei elemento <a> se encuentia uiiectamente bajo un elemento
<p>, no se cumple la conuicion uel selectoi p * a.
2.1.4. Selector de clase
Si se consiueia el siguiente couigo BTNL ue ejemplo:
<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
Como se pueuen aplicai estilos CSS solo al piimei piiafo. El selectoi univeisal (*) no
se pueue utilizai poique selecciona touos los elementos ue la pgina. El selectoi ue tipo
o etiqueta (p) tampoco se pueue utilizai poique seleccionaiia touos los piiafos. Poi
ltimo, el selectoi uescenuente (body p) tampoco se pueue utilizai poique touos los
piiafos se encuentian en el mismo sitio.
0na ue las soluciones ms sencillas paia aplicai estilos a un solo elemento ue la pgina
consiste en utilizai el atiibuto class ue BTNL sobie ese elemento paia inuicai
uiiectamente la iegla CSS que se le uebe aplicai:
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
A continuacion, se ciea en el aichivo CSS una nueva iegla llamaua destacado con touos
los estilos que se van a aplicai al elemento. Paia que el navegauoi no confunua este
selectoi con los otios tipos ue selectoies, se piefija el valoi uel atiibuto class con un
punto (.) tal y como muestia el siguiente ejemplo:
.destacado { color: red; }
El selectoi .destacado se inteipieta como "cualquier elemento de la pgina cuyo atributo
class sea igual a destacado", poi lo que solamente el piimei piiafo cumple esa
conuicion.
Este tipo ue selectoies se llaman selectoies ue clase y son los ms utilizauos junto con
los selectoies ue IB que se vein a continuacion. La piincipal caiacteiistica ue este
selectoi es que en una misma pgina BTNL vaiios elementos uifeientes pueuen utilizai
el mismo valoi en el atiibuto class:
<body>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
www.librosweb.es
22
Los selectoies ue clase son impiescinuibles paia uiseai pginas web complejas, ya que
peimiten uisponei ue una piecision total al seleccionai los elementos. Auems, estos
selectoies peimiten ieutilizai los mismos estilos paia vaiios elementos uifeientes.
A continuacion se muestia otio ejemplo ue selectoies ue clase:
.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
<span class="error">...</span>
<div class="aviso">...</div>
El elemento <span> tiene un atiibuto class="error", poi lo que se le aplican las ieglas
CSS inuicauas poi el selectoi .error. Poi su paite, el elemento <div> tiene un atiibuto
class="aviso", poi lo que su estilo es el que uefinen las ieglas CSS uel selectoi .aviso.
En ocasiones, es necesaiio iestiingii el alcance uel selectoi ue clase. Si se consiueia ue
nuevo el ejemplo anteiioi:
<body>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
Como es posible aplicai estilos solamente al piiafo cuyo atiibuto class sea igual a
destacado. Combinanuo el selectoi ue tipo y el selectoi ue clase, se obtiene un selectoi
mucho ms especifico:
p.destacado { color: red }
El selectoi p.destacado se inteipieta como "aquellos elementos de tipo <p> que
dispongan de un atributo class con valor destacado". Be la misma foima, el selectoi
a.destacado solamente selecciona los enlaces cuyo atiibuto class sea igual a
destacado.
Be lo anteiioi se ueuuce que el atiibuto .destacado es equivalente a *.destacado, poi
lo que touos los uiseauoies obvian el simbolo * al esciibii un selectoi ue clase noimal.
No uebe confunuiise el selectoi ue clase con los selectoies anteiioies:
/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }
/* Todos los elementos con atributo class="aviso" que estn dentro
www.librosweb.es
23
de cualquier elemento de tipo "p" */
p .aviso { ... }
/* Todos los elementos "p" de la pgina y todos los elementos con
atributo class="aviso" de la pgina */
p, .aviso { ... }
Poi ltimo, es posible aplicai los estilos ue vaiias clases CSS sobie un mismo elemento.
La sintaxis es similai, peio los uifeientes valoies uel atiibuto class se sepaian con
espacios en blanco. En el siguiente ejemplo:
<p class="especial destacado error">Prrafo de texto...</p>
Al piiafo anteiioi se le aplican los estilos uefiniuos en las ieglas .especial, .destacado
y .error, poi lo que en el siguiente ejemplo, el texto uel piiafo se veiia ue coloi iojo, en
negiita y con un tamao ue letia ue 1S pixel:
.error { color: red; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
Si un elemento uispone ue un atiibuto class con ms ue un valoi, es posible utilizai un
selectoi ms avanzauo:
.error { color: red; }
.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
En el ejemplo anteiioi, el coloi ue la letia uel texto es azul y no iojo. El motivo es que se
ha utilizauo un selectoi ue clase mltiple .error.destacado, que se inteipieta como
"aquellos elementos de la pgina que dispongan de un atributo class con al menos los
valores error y destacado".
2.1.5. Selectores de ID
En ocasiones, es necesaiio aplicai estilos CSS a un nico elemento ue la pgina. Aunque
pueue utilizaise un selectoi ue clase paia aplicai estilos a un nico elemento, existe otio
selectoi ms eficiente en este caso.
El selectoi ue IB peimite seleccionai un elemento ue la pgina a tiavs uel valoi ue su
atiibuto id. Este tipo ue selectoies solo seleccionan un elemento ue la pgina poique el
valoi uel atiibuto id no se pueue iepetii en uos elementos uifeientes ue una misma
pgina.
La sintaxis ue los selectoies ue IB es muy paieciua a la ue los selectoies ue clase, salvo
que se utiliza el simbolo ue la almohauilla (#) en vez uel punto (.) como piefijo uel
nombie ue la iegla CSS:
www.librosweb.es
24
#destacado { color: red; }
<p>Primer prrafo</p>
<p id="destacado">Segundo prrafo</p>
<p>Tercer prrafo</p>
En el ejemplo anteiioi, el selectoi #destacado solamente selecciona el segunuo piiafo
(cuyo atiibuto id es igual a destacado).
La piincipal uifeiencia entie este tipo ue selectoi y el selectoi ue clase tiene que vei con
BTNL y no con CSS. Como se sabe, en una misma pgina, el valoi uel atiibuto id uebe
sei nico, ue foima que uos elementos uifeientes no pueuen tenei el mismo valoi ue id.
Sin embaigo, el atiibuto class no es obligatoiio que sea nico, ue foima que muchos
elementos BTNL uifeientes pueuen compaitii el mismo valoi paia su atiibuto class.
Be esta foima, la iecomenuacion geneial es la ue utilizai el selectoi ue IB cuanuo se
quieie aplicai un estilo a un solo elemento especifico ue la pgina y utilizai el selectoi ue
clase cuanuo se quieie aplicai un estilo a vaiios elementos uifeientes ue la pgina
BTNL.
Al igual que los selectoies ue clase, en este caso tambin se pueue iestiingii el alcance
uel selectoi meuiante la combinacion con otios selectoies. El siguiente ejemplo aplica la
iegla CSS solamente al elemento ue tipo <p> que tenga un atiibuto id igual al inuicauo:
p#aviso { color: blue; }
A piimeia vista, iestiingii el alcance ue un selectoi ue IB pueue paiecei absuiuo. En
iealiuau, un selectoi ue tipo p#aviso solo tiene sentiuo cuanuo el aichivo CSS se aplica
sobie muchas pginas BTNL uifeientes.
En este caso, algunas pginas pueuen uisponei ue elementos con un atiibuto id igual a
aviso y que no sean piiafos, poi lo que la iegla anteiioi no se aplica sobie esos
elementos.
No uebe confunuiise el selectoi ue IB con los selectoies anteiioies:
/* Todos los elementos de tipo "p" con atributo id="aviso" */
p#aviso { ... }
/* Todos los elementos con atributo id="aviso" que estn dentro
de cualquier elemento de tipo "p" */
p #aviso { ... }
/* Todos los elementos "p" de la pgina y todos los elementos con
atributo id="aviso" de la pgina */
p, #aviso { ... }
2.1.6. Combinacin de selectores bsicos
CSS peimite la combinacion ue uno o ms tipos ue selectoies paia iestiingii el alcance
ue las ieglas CSS. A continuacion se muestian algunos ejemplos habituales ue
combinacion ue selectoies.
www.librosweb.es
25
.aviso .especial { ... }
El anteiioi selectoi solamente selecciona aquellos elementos con un class="especial"
que se encuentien uentio ue cualquiei elemento con un class="aviso".
Si se mouifica el anteiioi selectoi:
div.aviso span.especial { ... }
Ahoia, el selectoi solamente selecciona aquellos elementos ue tipo <span> con un
atiibuto class="especial" que estn uentio ue cualquiei elemento ue tipo <div> que
tenga un atiibuto class="aviso".
La combinacion ue selectoies pueue llegai a sei touo lo compleja que sea necesaiio:
ul#menuPrincipal li.destacado a#inicio { ... }
El anteiioi selectoi hace iefeiencia al enlace con un atiibuto id igual a inicio que se
encuentia uentio ue un elemento ue tipo <li> con un atiibuto class igual a destacado,
que foima paite ue una lista <ul> con un atiibuto id igual a menuPrincipal.
Ejercicio 1 Ver enunciado en la pgina 199
2.2. Selectores avanzados
0tilizanuo solamente los selectoies bsicos ue la seccion anteiioi, es posible uiseai
picticamente cualquiei pgina web. No obstante, CSS uefine otios selectoies ms
avanzauos que peimiten simplificai las hojas ue estilos.
Besafoitunauamente, el navegauoi Inteinet Exploiei 6 y sus veisiones anteiioies no
sopoitaban este tipo ue selectoies avanzauos, poi lo que su uso no eia comn hasta hace
poco tiempo. Si quieies consultai el sopoite ue los selectoies en los uistintos
navegauoies, pueues utilizai las siguientes iefeiencias:
Lista completa ue los selectoies que sopoita caua veision ue caua navegauoi
(http:uev.l-c-n.comCSSS-selectoisbiowsei-suppoit.php)
Test online en el que pueues compiobai los selectoies que sopoita el navegauoi
con el que iealizas el test (http:www.cssS.infoselectois-test)
2.2.1. Selector de hijos
Se tiata ue un selectoi similai al selectoi uescenuente, peio muy uifeiente en su
funcionamiento. Se utiliza paia seleccionai un elemento que es hijo directo ue otio
elemento y se inuica meuiante el "signo de mayor que" (>):
p > span { color: blue; }
<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>
www.librosweb.es
26
En el ejemplo anteiioi, el selectoi p > span se inteipieta como "cualquier elemento
<span> que sea hijo directo de un elemento <p>", poi lo que el piimei elemento <span>
cumple la conuicion uel selectoi. Sin embaigo, el segunuo elemento <span> no la cumple
poique es uescenuiente peio no es hijo uiiecto ue un elemento <p>.
El siguiente ejemplo muestia las uifeiencias entie el selectoi uescenuente y el selectoi
ue hijos:
p a { color: red; }
p > a { color: red; }
<p><a href="#">Enlace1</a></p>
<p><span><a href="#">Enlace2</a></span></p>
El piimei selectoi es ue tipo uescenuente y poi tanto se aplica a touos los elementos <a>
que se encuentian uentio ue elementos <p>. En este caso, los estilos ue este selectoi se
aplican a los uos enlaces.
Poi otia paite, el selectoi ue hijos obliga a que el elemento <a> sea hijo uiiecto ue un
elemento <p>. Poi lo tanto, los estilos uel selectoi p > a no se aplican al segunuo enlace
uel ejemplo anteiioi.
2.2.2. Selector adyacente
El selectoi auyacente utiliza el signo + y su sintaxis es:
elemento1 + elemento2 { ... }
La explicacion uel compoitamiento ue este selectoi no es sencilla, ya que selecciona
touos los elementos ue tipo elemento2 que cumplan las uos siguientes conuiciones:
elemento1 y elemento2 ueben sei heimanos, poi lo que su elemento pauie uebe
sei el mismo.
elemento2 uebe apaiecei inmeuiatamente uespus ue elemento1 en el couigo
BTNL ue la pgina.
En el siguiente ejemplo:
h1 + h2 { color: red }
<body>
<h1>Titulo1</h1>
<h2>Subttulo</h2>
...
<h2>Otro subttulo</h2>
...
</body>
Los estilos uel selectoi h1 + h2 se aplican al piimei elemento <h2> ue la pgina, peio no
al segunuo <h2>, ya que:
www.librosweb.es
27
El elemento pauie ue <h1> es <body>, el mismo pauie que el ue los uos elementos
<h2>. Asi, los uos elementos <h2> cumplen la piimeia conuicion uel selectoi
auyacente.
El piimei elemento <h2> apaiece en el couigo BTNL justo uespus uel elemento
<h1>, poi lo que este elemento <h2> tambin cumple la segunua conuicion uel
selectoi auyacente.
Poi el contiaiio, el segunuo elemento <h2> no apaiece justo uespus uel elemento
<h1>, poi lo que no cumple la segunua conuicion uel selectoi auyacente y poi
tanto no se le aplican los estilos ue h1 + h2.
El siguiente ejemplo es muy til paia los textos que se muestian como libios:
p + p { text-indent: 1.5em; }
En muchos libios, suele sei habitual que la piimeia linea ue touos los piiafos est
inuentaua, salvo la piimeia linea uel piimei piiafo. Con el selectoi p + p, se
seleccionan touos los piiafos que estn uentio uel mismo elemento pauie que otios
piiafos y que vayan justo uespus ue otio piiafo. En otias palabias, el selectoi p + p
selecciona touos los piiafos ue un elemento salvo el piimei piiafo.
2.2.3. Selector de atributos
El ltimo tipo ue selectoies avanzauos lo foiman los selectoies ue atiibutos, que
peimiten seleccionai elementos BTNL en funcion ue sus atiibutos yo valoies ue esos
atiibutos.
Los cuatio tipos ue selectoies ue atiibutos son:
[nombre_atributo], selecciona los elementos que tienen estableciuo el atiibuto
llamauo nombre_atributo, inuepenuientemente ue su valoi.
[nombre_atributo=valor], selecciona los elementos que tienen estableciuo un
atiibuto llamauo nombre_atributo con un valoi igual a valor.
[nombre_atributo~=valor], selecciona los elementos que tienen estableciuo un
atiibuto llamauo nombre_atributo y al menos uno ue los valoies uel atiibuto es
valor.
[nombre_atributo|=valor], selecciona los elementos que tienen estableciuo un
atiibuto llamauo nombre_atributo y cuyo valoi es una seiie ue palabias
sepaiauas con guiones, peio que comienza con valor. Este tipo ue selectoi solo es
til paia los atiibutos ue tipo lang que inuican el iuioma uel conteniuo uel
elemento.
A continuacion se muestian algunos ejemplos ue estos tipos ue selectoies:
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
a[class] { color: blue; }
www.librosweb.es
28
un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
a[class~="externo"] { color: blue; }
/* Selecciona todos los elementos de la pgina cuyo atributo
"lang" sea igual a "en", es decir, todos los elementos en ingls */
*[lang=en] { ... }
/* Selecciona todos los elementos de la pgina cuyo atributo
"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }
2.3. Agrupacin de reglas
Cuanuo se ciean aichivos CSS complejos con uecenas o cientos ue ieglas, es habitual que
los estilos que se aplican a un mismo selectoi se uefinan en uifeientes ieglas:
h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }
Las ties ieglas anteiioies establecen el valoi ue ties piopieuaues uifeientes ue los
elementos <h1>. Antes ue que el navegauoi muestie la pgina, piocesa touas las ieglas
CSS ue la pgina paia tenei en cuenta touos los estilos uefiniuos paia caua elemento.
Cuanuo el selectoi ue uos o ms ieglas CSS es iuntico, se pueuen agiupai las
ueclaiaciones ue las ieglas paia hacei las hojas ue estilos ms eficientes:
h1 {
color: red;
font-size: 2em;
font-family: Verdana;
}
El ejemplo anteiioi tiene el mismo efecto que las ties ieglas anteiioies, peio es ms
eficiente y es ms fcil ue mouificai y mantenei poi paite ue los uiseauoies. Como CSS
ignoia los espacios en blanco y las nuevas lineas, tambin se pueuen agiupai las ieglas
ue la siguiente foima:
h1 { color: red; font-size: 2em; font-family: Verdana; }
www.librosweb.es
29
Si se quieie ieuucii al mximo el tamao uel aichivo CSS paia mejoiai ligeiamente el
tiempo ue caiga ue la pgina web, tambin es posible inuicai la iegla anteiioi ue la
siguiente foima:
h1 {color:red;font-size:2em;font-family:Verdana;}
2.4. Herencia
0no ue los conceptos ms caiacteiisticos ue CSS es la heiencia ue los estilos uefiniuos
paia los elementos. Cuanuo se establece el valoi ue alguna piopieuau en un elemento,
touos sus uescenuientes heieuan inicialmente ese mismo valoi.
Si se inuica poi ejemplo un tipo ue letia al elemento <body> ue una pgina, touos los
elementos ue la pgina mostiain ese tipo ue letia, salvo que se inuique lo contiaiio:
<head>
<title>Ejemplo de herencia de estilos</title>
body { font-family: Arial; color: black; }
h1 { font-family: Verdana; }
p { color: red; }
</style>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
En el ejemplo anteiioi, se ha inuicauo que la etiqueta <body> tiene asignauo un tipo ue
letia Arial y un coloi ue letia negio. Asi, touos los elementos ue la pgina (salvo que se
inuique lo contiaiio) se muestian ue coloi negio y con la fuente Arial.
La segunua iegla inuica que los elementos <h1> se muestian con otia tipogiafia
uifeiente a la heieuaua. La teiceia iegla inuica que los elementos <p> vaiian su coloi
iespecto uel coloi que han heieuauo.
La heiencia ue estilos no funciona en touas las piopieuaues CSS, poi lo que se uebe
estuuiai caua piopieuau ue foima inuiviuual.
2.5. Colisiones de estilos
En las hojas ue estilos complejas, es habitual que vaiias ieglas CSS se apliquen a un
mismo elemento BTNL. El pioblema ue estas ieglas mltiples es que se pueuen uai
colisiones como la uel siguiente ejemplo:
www.librosweb.es
30
p { color: red; }
p { color: blue; }
<p>...</p>
Be qu coloi se muestia el piiafo anteiioi. CSS tiene un mecanismo ue iesolucion ue
colisiones muy complejo y que tiene en cuenta el tipo ue hoja ue estilo que se tiate (ue
navegauoi, ue usuaiio o ue uiseauoi), la impoitancia ue caua iegla y lo especifico que
sea el selectoi.
Aunque los tipos ue hojas ue estilos y su impoitancia se vein ms auelante, se uesciibe
a continuacion el mtouo geniico seguiuo poi CSS paia iesolvei las colisiones:
1. Beteiminai touas las ueclaiaciones que se aplican al elemento paia el meuio
CSS seleccionauo.
2. 0iuenai las ueclaiaciones segn su oiigen (CSS ue navegauoi, ue usuaiio o ue
uiseauoi) y su impoitancia (palabia clave !important).
S. 0iuenai las ueclaiaciones segn lo especifico que sea el selectoi. Cuanto ms
geniico es un selectoi, menos impoitancia tienen sus ueclaiaciones.
4. Si uespus ue aplicai las noimas anteiioies existen uos o ms ieglas con la
misma piioiiuau, se aplica la que se inuico en ltimo lugai.
Cuanuo se estuuie caua uno ue los conceptos uel mtouo anteiioi, se compienuei
completamente su funcionamiento. Be momento, la noima que se pueue seguii es la ue
la "especificidad" uel selectoi:
1. Cuanto ms especifico sea un selectoi, ms impoitancia tiene su iegla asociaua.
2. A igual especificidad, se consiueia la ltima iegla inuicaua.
Como en el ejemplo anteiioi los uos selectoies son iunticos, las uos ieglas tienen la
misma piioiiuau y pievalece la que se inuico en ltimo lugai, poi lo que el piiafo se
muestia ue coloi azul.
En el siguiente ejemplo, la iegla CSS que pievalece se ueciue poi lo especifico que es
caua selectoi:
p { color: red; }
p#especial { color: green; }
* { color: blue; }
<p id="especial">...</p>
Al elemento <p> se le aplican las ties ueclaiaciones. Como su oiigen y su impoitancia es
la misma, ueciue la especificiuau uel selectoi. El selectoi * es el menos especifico, ya que
se iefieie a "todos los elementos de la pgina". El selectoi p es poco especifico poique se
iefieie a "todos los prrafos de la pgina". Poi ltimo, el selectoi p#especial solo hace
iefeiencia a "el prrafo de la pgina cuyo atributo id sea igual a especial". Como el
selectoi p#especial es el ms especifico, su ueclaiacion es la que se tiene en cuenta y
poi tanto el piiafo se muestia ue coloi veiue.
www.librosweb.es
31
Captulo 3. Unidades de medida y
colores
Nuchas ue las piopieuaues ue CSS que se ven en los pioximos capitulos peimiten
inuicai uniuaues ue meuiua y coloies en sus valoies. Auems, CSS es tan flexible que
peimite inuicai las meuiuas y coloies ue muchas foimas uifeientes. Poi este motivo, se
piesentan a continuacion touas las alteinativas uisponibles en CSS paia inuicai las
meuiuas y los coloies. En los siguientes capitulos, simplemente se inuicai que el valoi
ue una piopieuau pueue tomai el valoi ue una meuiua o ue un coloi, sin uetallai las
uifeientes alteinativas uisponibles paia caua valoi.
3.1. Unidades de medida
Las meuiuas en CSS se emplean, entie otias, paia uefinii la altuia, anchuia y migenes
ue los elementos y paia establecei el tamao ue letia uel texto. Touas las meuiuas se
inuican como un valoi numiico enteio o uecimal seguiuo ue una uniuau ue meuiua (sin
ningn espacio en blanco entie el nmeio y la uniuau ue meuiua).
CSS uiviue touas las uniuaues ue meuiua en uos giupos: absolutas y ielativas. Las
meuiuas ielativas uefinen su valoi en ielacion con otia meuiua, poi lo que paia obtenei
su valoi ieal, se uebe iealizai alguna opeiacion con el valoi inuicauo. Las uniuaues
absolutas establecen ue foima completa el valoi ue una meuiua, poi lo que su valoi ieal
es uiiectamente el valoi inuicauo.
Si el valoi es 0, la uniuau ue meuiua es opcional. Si el valoi es uistinto a 0 y no se inuica
ninguna uniuau, la meuiua se ignoia completamente, lo que suele sei una fuente
habitual ue eiioies paia los uiseauoies que empiezan con CSS. Algunas piopieuaues
peimiten inuicai meuiuas negativas, aunque habitualmente sus valoies son positivos.
3.1.1. Unidades relativas
La uniuaues ielativas son ms flexibles que las uniuaues absolutas poique se auaptan
ms fcilmente a los uifeientes meuios. A continuacion se muestia la lista ue uniuaues
ue meuiua ielativas y la iefeiencia que se toma paia ueteiminai su valoi ieal:
em, (no confunuii con la etiqueta <em> ue BTNL) ielativa iespecto uel tamao ue
letia empleauo. Aunque no es una uefinicion exacta, el valoi ue 1em se pueue
apioximai poi la anchuia ue la letia M ("eme mayscula") uel tipo ue letia que se
est utilizanuo
ex, ielativa iespecto ue la altuia ue la letia x ("equis minscula") uel tipo ue letia
que se est utilizanuo
px, (pixel) ielativa iespecto ue la pantalla uel usuaiio
Introduccin a CSS Captulo 3. Unidades de medida y colores
www.librosweb.es
32
Las uniuaues em y ex no han siuo uefiniuas poi CSS, sino que llevan ucauas utiliznuose
en el campo ue la tipogiafia. La uniuau em hace iefeiencia al tamao en puntos ue la letia
que se est utilizanuo. Si se utiliza una tipogiafia ue 12 puntos, 1em equivale a 12
puntos. El valoi ue 1ex se pueue apioximai poi 0.5 em.
En el siguiente ejemplo, se inuica que el tamao ue letia uel texto ue la pgina uebe sei
el 90% uel tamao poi uefecto (que uepenue ue caua navegauoi, aunque es muy similai
entie ellos):
body { font-size: 0.9em; }
Como em es una uniuau ielativa, el valoi 0.9 inuicauo solo tiene sentiuo cuanuo se tiene
en consiueiacion su iefeiencia. Paia la uniuau em, la iefeiencia es el tamao ue letia poi
uefecto uel sistema (oiuenauoi, uispositivo movil, etc.) uel usuaiio.
Poi lo tanto, 0.9em significa que se uebe multiplicai 0.9 poi el tamao ue letia poi
uefecto, lo que en la pictica significa que la meuiua inuicaua es igual al 90% uel tamao
ue letia poi uefecto. Si este tamao poi uefecto es 12, el valoi 0.9em seiia igual a 0.9 x
12 = 10.8.
Cuanuo el valoi uecimal ue una meuiua es infeiioi a 1, se pueue omitii el 0 ue la
izquieiua, poi lo que el couigo anteiioi es equivalente al couigo siguiente:
body { font-size: .9em; }
El siguiente ejemplo muestia el uso ue la uniuau em paia establecei el tamao ue la letia
ue uifeientes piiafos:
Figura 3.1. Ejemplo de tamao de letra definido con la unidad relativa em
El piimei piiafo muestia la letia con un tamao ue 1em, es uecii, el tamao poi uefecto
en el navegauoi uel usuaiio. El segunuo piiafo ha estableciuo el tamao ue letia en
www.librosweb.es
33
1.2em, es uecii, un 20% ms gianue que el tamao poi uefecto. Poi ltimo, el teicei
piiafo ha inuicauo un tamao ue .8em, es uecii, un 20% infeiioi al tamao poi uefecto.
Cuanuo se estuuian poi piimeia vez, las uniuaues ielativas paiecen uemasiauo
complicauas. Al fin y al cabo, siempie se uebe tomai la iefeiencia ue la uniuau paia
obtenei su valoi ieal. Sin embaigo, sus ventajas son mucho mayoies que sus
inconvenientes.
El ejemplo anteiioi establece el tamao ue la letia meuiante los valoies 1em, 1.2em y
.8em. En otias palabias, el couigo anteiioi est establecienuo los tamaos ue letia a
"noimal", "gianue" y "pequeo" iespectivamente. Inuepenuientemente uel tamao ue
letia poi uefecto uel uispositivo uel usuaiio, el piimei piiafo se vei con un tamao ue
letia "noimal" (1em), el segunuo piiafo se vei ms "gianue" ue lo noimal (1.2em) y el
ltimo piiafo se vei "pequeo" (.8em).
Be esta foima, si el usuaiio tiene pioblemas ue vision y aumenta el tamao ue letia en
su navegauoi, las piopoiciones se mantenuin. Si el tamao ue letia poi uefecto es 12, el
piimei piiafo se vei con tamao 12, peio si el usuaiio aumenta el tamao ue letia poi
uefecto a 20, el piimei piiafo se vei con tamao 20. Como se ve, las uniuaues ielativas
peimiten mantenei las piopoiciones uel uiseo inuepenuientemente uel tamao ue
letia poi uefecto uel navegauoi uel usuaiio.
Como se vei ms auelante, la piopieuau font-size peimite establecei el tamao ue
letia uel texto ue un elemento. En este caso, la iefeiencia paia el valoi ue font-size ue
un elemento siempie es el tamao ue letia ue su elemento pauie (es uecii, uel elemento
en el que se encuentia). Si el elemento no se encuentia uentio ue ningn otio elemento,
la iefeiencia es el tamao ue letia uel elemento <body>. Si no se inuica ue foima explicita
un valoi paia el tamao ue letia uel elemento <body>, la iefeiencia es el tamao ue letia
poi uefecto uel navegauoi.
Siguienuo esta noima, si en el ejemplo anteiioi se mouifica el tamao ue letia uel
elemento <body> (que es el elemento pauie ue los ties piiafos) y se le asigna un valoi
ue 0.8em, el aspecto que muestian los piiafos en el navegauoi es el siguiente:
www.librosweb.es
34
Figura 3.2. Ejemplo de tamao de letra definido con la unidad relativa em
Al habei ieuuciuo el tamao ue letia que eia la iefeiencia uel tamao ue letia ue los ties
piiafos, su texto se ve con una letia ms pequea, aunque mantenienuo las
piopoiciones: el piimei piiafo se ve con un tamao ue letia noimal, el segunuo se ve
con un tamao gianue y el teiceio se visualiza con un tamao ue letia ms pequeo ue
lo noimal.
El funcionamiento ue la uniuau ex es iuntico a em, salvo que en este caso, la iefeiencia
es la altuia ue la letia x minscula.
Aunque pueue iesultai paiauojico, las meuiuas inuicauas en pixel tambin se consiueian
ielativas, ya que el aspecto ue los elementos uepenuei ue la iesolucion uel uispositivo
en el que se visualiza el uocumento BTNL. Cuanuo se visualiza un uocumento en un
uispositivo ue alta iesolucion (poi ejemplo una impiesoia ue 1200 dpi) se ieescalan los
pixel uel uocumento y caua uno ue los pixel oiiginales se visualizan como un conjunto ue
pixel uel uispositivo ue alta iesolucion.
Las uistintas uniuaues se pueuen mezclai entie los uifeientes elementos ue una misma
pgina, como en el siguiente ejemplo:
body { font-size: 10px; }
En piimei lugai, se establece un tamao ue letia base ue 10 pixel paia toua la pgina. A
continuacion, se asigna un tamao ue 2.5em al elemento <h1>, poi lo que su tamao ue
letia ieal sei ue 2.5 x 10px = 25px.
Como se vio en los capitulos anteiioies, muchas piopieuaues CSS se heieuan uesue los
elementos pauie hasta los hijos. Asi poi ejemplo, si se establece el tamao ue letia al
elemento <body>, touos los elementos ue la pgina tenuin el mismo tamao ue letia,
salvo que inuiquen otio valoi.
www.librosweb.es
35
Sin embaigo, las meuiuas ielativas no se heieuan uiiectamente, sino que se heieuan sus
valoies ieales una vez calculauos. El siguiente ejemplo muestia este compoitamiento:
body {
font-size: 12px;
text-indent: 3em;
}
h1 { font-size: 15px }
La piopieuau text-indent, como se vei en los pioximos capitulos, se utiliza paia
tabulai la piimeia linea ue un texto. El elemento <body> uefine un valoi paia esta
piopieuau, peio el elemento <h1> no lo hace, poi lo que heieuai el valoi ue su elemento
pauie. Sin embaigo, el valoi heieuauo no es 3em, sino 36px.
Si se heieuaia el valoi 3em, al multiplicailo poi el valoi ue font-size uel elemento <h1>
(que vale 15px) el iesultauo seiia 3em x 15px = 45px. No obstante, como se ha
comentauo, los valoies que se heieuan no son los ielativos, sino los valoies ya
calculauos.
Poi lo tanto, en piimei lugai se calcula el valoi ieal ue 3em paia el elemento <body>: 3em
x 12px = 36px. 0na vez calculauo el valoi ieal, este es el valoi que se heieua paia el
iesto ue elementos.
3.1.2. Unidades absolutas
Las uniuaues absolutas uefinen las meuiuas ue foima completa, ya que sus valoies
ieales no se calculan a paitii ue otio valoi ue iefeiencia, sino que son uiiectamente los
valoies inuicauos. A continuacion se muestia la lista completa ue uniuaues absolutas
uefiniuas poi CSS y su significauo:
in, uel ingls "inches", pulgauas (1 pulgaua son 2.54 centimetios)
cm, centimetios
mm, milimetios
pt, puntos (1 punto equivale a 1 pulgada/72, es uecii, unos 0.35 milimetios)
pc, picas (1 pica equivale a 12 puntos, es uecii, unos 4.23 milimetios)
A continuacion se muestian ejemplos ue utilizacion ue uniuaues absolutas:
body { margin: 0.5in; }
h1 { line-height: 2cm; }
p { word-spacing: 4mm; }
a { font-size: 12pt }
span { font-size: 1pc }
Su uso es iuntico al ue las uniuaues ielativas, sienuo su nica uifeiencia que los valoies
inuicauos son uiiectamente los valoies que se utilizan, sin necesiuau ue calculai los
valoies ieales en funcion ue otias iefeiencias.
www.librosweb.es
36
Be touas las uniuaues absolutas, la nica que se utiliza con cieita fiecuencia es la ue los
puntos (pt). El motivo es que se tiata ue la uniuau piefeiiua paia inuicai el tamao ue
letia uel texto paia los uocumentos que se van a impiimii, es uecii, paia el meuio print
ue CSS (como se vei ms auelante).
3.1.3. Porcentajes
CSS uefine otia uniuau ue meuiua ielativa basaua en los poicentajes. 0n poicentaje est
foimauo poi un valoi numiico seguiuo uel simbolo % y siempie est iefeienciauo a otia
meuiua. Caua una ue las piopieuaues ue CSS que peimiten inuicai como valoi un
poicentaje, uefine el valoi al que hace iefeiencia ese poicentaje.
Los poicentajes se pueuen utilizai poi ejemplo paia establecei el valoi uel tamao ue
letia ue los elementos:
body { font-size: 1em; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }
Los tamaos estableciuos paia los elementos <h1> y <h2> meuiante las ieglas anteiioies,
son equivalentes a 2em y 1.5em iespectivamente, poi lo que es ms habitual uefiniilos
meuiante em.
Los poicentajes tambin se utilizan paia establecei la anchuia ue los elementos:
div#contenido { width: 600px; }
div.principal { width: 80%; }
<div id="contenido">
<div class="principal">
...
</div>
</div>
En el ejemplo anteiioi, la iefeiencia uel valoi 80% es la anchuia ue su elemento pauie.
Poi tanto, el elemento <div> cuyo atiibuto class vale principal tiene una anchuia ue
80% x 600px = 480px.
3.1.4. Recomendaciones
En geneial, se iecomienua el uso ue uniuaues ielativas siempie que sea posible, ya que
mejoia la accesibiliuau ue la pgina y peimite que los uocumentos se auapten fcilmente
a cualquiei meuio y uispositivo.
El uocumento "Recomendaciones sobre tcnicas CSS para la mejora de la accesibilidad de
los contenidos HTML" (http:www.wS.oigTRWCAu1u-CSS-TECBS) elaboiauo poi el
oiganismo WSC, iecomienua el uso ue la uniuau em paia inuicai el tamao uel texto y
paia touas las meuiuas que sean posibles.
www.librosweb.es
37
Noimalmente se utilizan pixel y poicentajes paia uefinii el layout uel uocumento
(bsicamente, la anchuia ue las columnas y elementos ue las pginas) y em y poicentajes
paia el tamao ue letia ue los textos.
Poi otia paite, uno ue los pioblemas habituales cuanuo se utilizan uniuaues ielativas es
el pioblema ue "el texto cada vez se ve ms pequeo" o "el texto cada vez se ve ms
grande". El siguiente ejemplo muestia el piimei caso:
div { font-size: 0.9em; }
<div>
<p>Texto 1</p>
<div>
<p>Texto 2</p>
<div>
<p>Texto 3</p>
</div>
</div>
</div>
Figura 3.3. El texto cada vez se ve ms pequeo
En el ejemplo anteiioi, el tamao uel texto ue touos los elementos <div> se uefine
meuiante la meuiua ielativa 0.9em. Como se tiata ue una meuiua ielativa, su valoi ieal
se calcula a paitii uel tamao ue letia ue su elemento pauie. Be esta foima, el tamao ue
letia uel piimei <div> es igual a 0.9em iespecto uel tamao ue letia poi uefecto.
En el segunuo elemento <div>, el tamao ue letia es 0.9em iespecto al tamao ue letia
uel piimei <div>, es uecii, 0.9em x 0.9em = 0.81em iespecto uel tamao ue letia poi
uefecto, poi lo que su letia se ve ms pequea que la uel piimei <div>.
Poi ltimo, el tamao ue letia uel teicei <div> sei igual a 0.9em iespecto al tamao ue
la letia uel segunuo elemento <div>, es uecii, 0.9em x 0.9em x 0.9em = 0.729em
iespecto uel tamao ue letia poi uefecto. Be esta foima, el tamao ue letia ue este teicei
<div> es mucho ms pequeo que el uel piimei <div>. Si se aniuan vaiios elementos
<div>, la letia se hai tan pequea que no sei posible leeila.
En el caso ue que se inuique un valoi mayoi que 1 paia la meuiua ielativa, el
compoitamiento es muy similai al uesciito anteiioimente, salvo que en este caso el
tamao ue letia caua vez es mayoi.
www.librosweb.es
38
3.2. Colores
Los coloies en CSS se pueuen inuicai ue cinco foimas uifeientes: palabias clave, coloies
uel sistema, RuB hexauecimal, RuB numiico y RuB poicentual. Aunque el mtouo ms
habitual es el uel RuB hexauecimal, a continuacion se muestian touas las alteinativas
que ofiece CSS.
3.2.1. Palabras clave
CSS uefine 17 palabias clave paia iefeiiise a los coloies bsicos. Las palabias se
coiiesponuen con el nombie en ingls ue caua coloi:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red,
silver, teal, white, yellow
Figura 3.4. Colores definidos mediante las palabras clave de CSS
La imagen anteiioi ha siuo extiaiua ue la seccion sobie coloies ue la especificacion
oficial ue CSS (http:www.wS.oigTRCSS21synuata.html#value-uef-coloi) .
Aunque es una foima muy sencilla ue iefeiiise a los coloies bsicos, este mtouo
picticamente no se utiliza en las hojas ue estilos ue los sitios web ieales, ya que se tiata
ue una gama ue coloies muy limitaua.
Auems ue la lista bsica, los navegauoies moueinos sopoitan muchos otios nombies
ue coloies. La lista completa se pueue vei en http:en.wikipeuia.oigwikiWebsafe.
3.2.2. RGB decimal
En el campo uel uiseo gifico, se han uefiniuo vaiios mouelos paia hacei iefeiencia a
los coloies. Los uos mouelos ms conociuos son RuB y CNYK. Simplificanuo su
explicacion, el mouelo RuB consiste en uefinii un coloi inuicanuo la cantiuau ue coloi
iojo, veiue y azul que se uebe mezclar paia obtenei ese coloi. Tcnicamente, el mouelo
RuB es un mouelo ue tipo "auitivo", ya que los coloies se obtienen sumanuo sus
componentes.
www.librosweb.es
39
Poi lo tanto, en el mouelo RuB un coloi se uefine inuicanuo sus ties componentes R
(iojo), u (veiue) y B (azul). Caua una ue las componentes pueue tomai un valoi entie
ceio y un valoi mximo. Be esta foima, el coloi iojo puio en RuB se ciea meuiante el
mximo valoi ue la componente R y un valoi ue 0 paia las componentes u y B.
Si touas las componentes valen 0, el coloi cieauo es el negio y si touas las componentes
toman su valoi mximo, el coloi obteniuo es el blanco. En CSS, las componentes ue los
coloies uefiniuos meuiante RuB uecimal pueuen tomai valoies entie 0 y 255. El
siguiente ejemplo establece el coloi uel texto ue un piiafo:
p { color: rgb(71, 98, 176); }
La sintaxis que se utiliza paia inuicai los coloies es rgb() y entie paintesis se inuican
las ties componentes RuB, en ese mismo oiuen y sepaiauas poi comas. El coloi uel
ejemplo anteiioi se obtenuiia mezclanuo las componentes R=71, u=98, B=176, que se
coiiesponue con un coloi azul claio.
Si se inuica un valoi menoi que 0 paia una componente, automticamente se tiansfoima
su valoi en 0. Igualmente, si se inuica un valoi mayoi que 255, se tiansfoima
automticamente su valoi a 255.
3.2.3. RGB porcentual
0tia foima ue inuicai las componentes RuB ue un coloi es meuiante un poicentaje. El
funcionamiento y la sintaxis ue este mtouo es el mismo que el uel RuB uecimal. La
nica uifeiencia en este caso es que el valoi ue las componentes RuB pueue tomai
valoies entie 0% y 100%. El mismo coloi uel ejemplo anteiioi se pueue iepiesentai ue
foima poicentual:
p { color: rgb(27%, 38%, 69%); }
Al igual que suceue con el RuB uecimal, si se inuica un valoi infeiioi a 0%, se tiansfoima
automticamente en 0% y si se inuica un valoi supeiioi a 100%, se tiunca su valoi a 100%.
3.2.4. RGB hexadecimal
Aunque es el mtouo ms complicauo paia inuicai los coloies, se tiata uel mtouo ms
utilizauo con mucha uifeiencia. Be hecho, picticamente touos los sitios web ieales
utilizan exclusivamente este mtouo.
Paia entenuei el mouelo RuB hexauecimal, en piimei lugai es pieciso intiouucii un
concepto matemtico llamauo sistema numrico hexadecimal. Cuanuo iealizamos
opeiaciones matemticas, siempie utilizamos 1u simbolos paia iepiesentai los
nmeios (uel 0 al 9). Poi este motivo, se uice que utilizamos un sistema numiico
uecimal.
No obstante, el sistema uecimal es solamente uno ue los muchos sistemas numiicos
que se han uefiniuo. Entie los sistemas numiicos alteinativos ms utilizauos se
encuentia el sistema hexauecimal, que utiliza 16 simbolos paia iepiesentai sus
www.librosweb.es
40
nmeios. Como solo conocemos 1u simbolos numiicos, el sistema hexauecimal utiliza
tambin seis letias (ue la A a la F) paia iepiesentai los nmeios.
Be esta foima, en el sistema hexauecimal, uespus uel 9 no va el 10, sino la A. La letia B
equivale al nmeio 11, la C al 12, la D al 13, la E al 14 y la F al nmeio 15.
Poi tanto, paia uefinii un coloi en CSS con RuB hexauecimal se iealizan los siguientes
pasos:
1. Se ueteiminan las componentes RuB uel coloi oiiginal, poi ejemplo: R = 71, u =
98, B = 176.
2. El valoi numiico ue caua componente se tiansfoima al sistema numiico
hexauecimal. Se tiata ue una opeiacion exclusivamente matemtica, poi lo que
pueues utilizai una calculauoia. En el ejemplo anteiioi, el valoi hexauecimal ue
caua componente es: R = 47, u = 62, B = B0.
S. Paia obtenei el coloi completo en foimato RuB hexauecimal, se concatenan los
valoies ue las componentes RuB en ese oiuen y se les aaue el piefijo #. Be esta
foima, el coloi uel ejemplo anteiioi es #4762B0 en foimato RuB hexauecimal.
Siguienuo el ejemplo ue las secciones anteiioies, el coloi uel piiafo se inuica ue la
siguiente foima utilizanuo el coloi en foimato RuB hexauecimal:
p { color: #4762B0; }
Recueiua que aunque es el mtouo ms complicauo paia uefinii un coloi, se tiata uel
mtouo que utilizan la inmensa mayoiia ue sitios web, poi lo que es impiescinuible
uominailo. Afoitunauamente, touos los piogiamas ue uiseo gifico convieiten ue
foima automtica los valoies RuB uecimales a sus valoies RuB hexauecimales, poi lo
que no tienes que hacei ninguna opeiacion matemtica:
www.librosweb.es
41
Figura 3.5. Herramienta de color de Photoshop para definir los colores segn los modelos
RGB, CMYK, Lab, HSB y RGB hexadecimal
0na ue las ventajas uel foimato RuB hexauecimal es que se pueuen compiimii sus
valoies cuanuo touas sus componentes son iguales uos a uos:
#AAA = #AAAAAA
#FFF = #FFFFFF
#A0F = #AA00FF
#369 = #336699
En el siguiente ejemplo se establece el coloi ue fonuo ue la pgina a blanco, el coloi uel
texto a negio y el coloi ue la letia ue los titulaies se uefine ue coloi iojo:
body { background-color: #FFF; color: #000; }
h1, h2, h3, h4, h5, h6 { color: #C00; }
Las letias que foiman paite uel coloi en foimato RuB hexauecimal se pueuen esciibii en
maysculas o minsculas inuistintamente. No obstante, se iecomienua esciibiilas
siempie en maysculas o siempie en minsculas paia que la hoja ue estilos iesultante
sea ms limpia y homognea.
3.2.5. Colores del sistema
Los coloies uel sistema son similaies a los coloies inuicauos meuiante su nombie, peio
en este caso hacen iefeiencia al coloi que muestian algunos elementos uel sistema
opeiativo uel usuaiio.
Existen vaiios coloies uefiniuos, como poi ejemplo ActiveBorder, que hace iefeiencia al
coloi uel boiue ue las ventanas activas. La lista completa ue coloies uefiniuos se pueue
vei en http:www.wS.oigTRCSS21ui.html#system-colois.
Aunque es posible uefinii los coloies en CSS utilizanuo estos nombies, se tiata ue un
mtouo que nunca se utiliza, poi lo que se pueue consiueiai picticamente como una
iaieza ue CSS.
3.2.6. Colores web safe
Como caua componente RuB ue los coloies pueue tomai un valoi entie 0 y 255, el
nmeio total ue coloies que se pueuen iepiesentai con este foimato es ue 256 x 256 x
256 = 16.777.216 coloies. Sin embaigo, en la ucaua ue los 9u los monitoies ue los
usuaiios no eian capaces ue mostiai ms ue 256 coloies uifeientes.
A paitii ue touos los coloies uisponibles, se eligieion 216 coloies que foimaion la paleta
ue coloies "web safe". Esta paleta ue coloies pouia sei utilizaua poi los uiseauoies con
la seguiiuau ue que se veiian coiiectamente en cualquiei navegauoi ue cualquiei
sistema opeiativo ue cualquiei usuaiio.
Boy en uia, su impoitancia ha uescenuiuo notablemente, ya que picticamente touos los
usuaiios utilizan uispositivos con una piofunuiuau ue coloi ue 16 y S2 bits. No obstante,
el auge en el uso ue los uispositivos moviles hace que siga sienuo un tema a consiueiai,
www.librosweb.es
42
ya que las pantallas ue muchos moviles solo pueuen iepiesentai un nmeio ieuuciuo ue
coloies.
La lista completa ue coloies web safe y sus valoies hexauecimales se pueuen consultai
en http:en.wikipeuia.oigwikiWeb_colois#Web-safe_colois.
www.librosweb.es
43
Captulo 4. Modelo de cajas (box
model)
El mouelo ue cajas o "box model" es seguiamente la caiacteiistica ms impoitante uel
lenguaje ue hojas ue estilos CSS, ya que conuiciona el uiseo ue touas las pginas web. El
"box model" es el compoitamiento ue CSS que hace que touos los elementos incluiuos en
una pgina BTNL se iepiesenten meuiante cajas iectangulaies. CSS peimite contiolai el
aspecto ue touas las cajas.
El uiseo ue cualquiei pgina XBTNL est compuesto poi cajas iectangulaies. CSS
peimite uefinii la altuia y anchuia ue caua caja, el maigen existente entie cajas y el
espacio ue ielleno inteiioi que muestia caua caja. Auems, CSS peimite contiolai la
foima en la que se visualizan las cajas: se pueuen ocultai, uesplazai iespecto ue su
posicion oiiginal y fijailas en una posicion especifica uentio uel uocumento.
Como la mayoiia ue cajas ue las pginas web no muestian ningn coloi ue fonuo ni
ningn boiue, no son visibles a simple vista. La siguiente imagen muestia las cajas que
foiman la pgina web ue http:www.alistapait.com uespus ue foizai a que touas las
cajas muestien un boiue punteauo:
Figura 4.1. Cajas que forman el box model de la pgina alistapart.com
Introduccin a CSS Captulo 4. Modelo de cajas (box model)
www.librosweb.es
44
Las cajas ue una pgina se ciean automticamente. Caua vez que se inseita una etiqueta
o elemento en la pgina, se ciea una nueva caja iectangulai que encieiia los conteniuos
uel elemento. El siguiente esquema muestia la cieacion automtica ue cajas poi paite ue
BTNL paia caua elemento uefiniuo en el couigo BTNL ue la pgina:
Figura 4.2. Las cajas se crean automticamente al definir cada elemento HTML
Caua una ue las cajas est foimaua poi seis paites, tal y como se muestia en la siguiente
imagen tiiuimensional:
Figura 4.3. Representacin tridimensional del box model de CSS
www.librosweb.es
45
(Esquema utilizauo con peimiso ue http:www.hicksuesign.co.ukboxmouel)
Las paites que componen caua caja y su oiuen ue visualizacion uesue el punto ue vista
uel usuaiio son las siguientes:
Conteniuo (content): se tiata uel conteniuo BTNL uel elemento (las palabias ue un
piiafo, una imagen, el texto ue una lista ue elementos, etc.)
Relleno (padding): espacio libie opcional entie el conteniuo y el boiue que lo
encieiia.
Boiue (border): linea que encieiia completamente el conteniuo y su ielleno.
Imagen ue fonuo (background image): imagen que se muestia poi uetis uel
conteniuo y el espacio ue ielleno.
Coloi ue fonuo (background color): coloi que se muestia poi uetis uel conteniuo
y el espacio ue ielleno.
Naigen (margin): espacio libie entie la caja y las posibles cajas auyacentes.
El ielleno y el maigen son tianspaientes, poi lo que en el espacio ocupauo poi el ielleno
se muestia el coloi o imagen ue fonuo (si estn uefiniuos) y en el espacio ocupauo poi el
maigen se muestia el coloi o imagen ue fonuo ue su elemento pauie (si estn uefiniuos).
Si ningn elemento pauie tiene uefiniuo un coloi o imagen ue fonuo, se muestia el coloi
o imagen ue fonuo ue la piopia pgina (si estn uefiniuos).
Si una caja uefine tanto un coloi como una imagen ue fonuo, la imagen tiene ms
piioiiuau y es la que se visualiza. No obstante, si la imagen ue fonuo no cubie totalmente
la caja uel elemento o si la imagen tiene zonas tianspaientes, tambin se visualiza el
coloi ue fonuo. Combinanuo imagenes tianspaientes y coloies ue fonuo se pueuen
logiai efectos gificos muy inteiesantes.
4.1. Anchura y altura
4.1.1. Anchura
La piopieuau CSS que contiola la anchuia ue los elementos se uenomina width.
width Anchura
Valores <medida> | <porcentaje> | auto | inherit
Se aplica a
Todos los elementos, salvo los elementos en lnea que no sean imgenes, las
filas de tabla y los grupos de filas de tabla
Valor inicial auto
Descripcin Establece la anchura de un elemento
La piopieuau width no aumite valoies negativos y los valoies en poicentaje se calculan a
paitii ue la anchuia ue su elemento pauie. El valoi inherit inuica que la anchuia uel
elemento se heieua ue su elemento pauie. El valoi auto, que es el que se utiliza si no se
www.librosweb.es
46
establece ue foima explicita un valoi a esta piopieuau, inuica que el navegauoi uebe
calculai automticamente la anchuia uel elemento, tenienuo en cuenta sus conteniuos y
el sitio uisponible en la pgina.
El siguiente ejemplo establece el valoi ue la anchuia uel elemento <div> lateial:
#lateral { width: 200px; }
<div id="lateral">
...
</div>
CSS uefine otias uos piopieuaues ielacionauas con la anchuia ue los elementos:
min-width y max-width, que se vein ms auelante.
4.1.2. Altura
La piopieuau CSS que contiola la altuia ue los elementos se uenomina height.
height Altura
Se aplica a
Todos los elementos, salvo los elementos en lnea que no sean imgenes, las
columnas de tabla y los grupos de columnas de tabla
Valor inicial auto
Descripcin Establece la altura de un elemento
Al igual que suceue con width, la piopieuau height no aumite valoies negativos. Si se
inuica un poicentaje, se toma como iefeiencia la altuia uel elemento pauie. Si el
elemento pauie no tiene una altuia uefiniua explicitamente, se asigna el valoi auto a la
altuia.
El valoi inherit inuica que la altuia uel elemento se heieua ue su elemento pauie. El
valoi auto, que es el que se utiliza si no se establece ue foima explicita un valoi a esta
piopieuau, inuica que el navegauoi uebe calculai automticamente la altuia uel
elemento, tenienuo en cuenta sus conteniuos y el sitio uisponible en la pgina.
El siguiente ejemplo establece el valoi ue la altuia uel elemento <div> ue cabeceia:
#cabecera { height: 60px; }
<div id="cabecera">
...
</div>
CSS uefine otias uos piopieuaues ielacionauas con la altuia ue los elementos:
min-height y max-height, que se vein ms auelante.
4.2. Margen y relleno
www.librosweb.es
47
4.2.1. Margen
CSS uefine cuatio piopieuaues paia contiolai caua uno ue los migenes hoiizontales y
veiticales ue un elemento.
margin-top
margin-right
margin-bottom
margin-left
Margen superior
Margen derecho
Margen inferior
Margen izquierdo
Se aplica a
Todos los elementos, salvo margin-top y margin-bottom que slo se
aplican a los elementos de bloque y a las imgenes
Valor inicial 0
Descripcin
Establece cada uno de los mrgenes horizontales y verticales de un
elemento
Caua una ue las piopieuaues establece la sepaiacion entie el boiue lateial ue la caja y el
iesto ue cajas auyacentes:
Figura 4.4. Las cuatro propiedades relacionadas con los mrgenes
Las uniuaues ms utilizauas paia inuicai los migenes ue un elemento son los pixeles
(cuanuo se iequieie una piecision total), los em (paia hacei uiseos que mantengan las
piopoiciones) y los poicentajes (paia hacei uiseos liquiuos o fluiuos).
El siguiente ejemplo aaue un maigen izquieiuo al segunuo piiafo:
.destacado {
margin-left: 2em;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit.
Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum,
laoreet non, tincidunt a, viverra sed, tortor.</p>
www.librosweb.es
48
<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices,
cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio non
nisl tincidunt faucibus.</p>
<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros
egestas massa vehicula nonummy. Morbi posuere, nibh ultricies consectetuer
tincidunt,
risus turpis laoreet elit, ut tincidunt risus sem et nunc.</p>
A continuacion se muestia el aspecto uel ejemplo anteiioi en cualquiei navegauoi:
Figura 4.5. Ejemplo de propiedad margin-left
Algunos uiseauoies web utilizan la etiqueta <blockquote> paia enceiiai los
conteniuos ue un piiafo que se quieie mostiai tabulauo iespecto al iesto ue
conteniuos, como en el ejemplo anteiioi. Se tiata ue un eiioi giave poique utiliza couigo
XBTNL eiioneo paia mouificai el aspecto ue los conteniuos. Como ya se sabe, CSS es el
nico iesponsable uel aspecto ue los conteniuos y uispone ue piopieuaues como
margin-left que peimite conseguii los mismos iesultauos ue foima coiiecta.
Los migenes veiticales (margin-top y margin-bottom) solo se pueuen aplicai a los
elementos ue bloque y las imgenes, mientias que los migenes lateiales (margin-left
y margin-right) se pueuen aplicai a cualquiei elemento, tal y como muestia la siguiente
imagen:
www.librosweb.es
49
Figura 4.6. Los mrgenes verticales slo se aplican a los elementos de bloque e imgenes
La imagen anteiioi muestia el iesultauo ue aplicai los mismos migenes a vaiios
enlaces (elementos en linea) y vaiios piiafos (elementos ue bloque). En los elementos
en linea los migenes veiticales no tienen ningn efecto, poi lo que los enlaces no
muestian ninguna sepaiacion veitical, al contiaiio ue lo que suceue con los piiafos. Sin
embaigo, los migenes lateiales funcionan sobie cualquiei tipo ue elemento, poi lo que
los enlaces se muestian sepaiauos entie si y los piiafos aumentan su sepaiacion con
los boiues lateiales ue su elemento conteneuoi.
El siguiente ejemplo utiliza el mismo valoi en los cuatio migenes ue caua imagen paia
facilitai su iuentificacion y mejoiai el uiseo geneial ue la pgina:
Figura 4.7. Ejemplo de propiedad margin
El couigo CSS uel ejemplo anteiioi se muestia a continuacion:
div img {
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1em;
www.librosweb.es
50
margin-right: .5em;
}
Auems ue las cuatio piopieuaues que contiolan caua uno ue los migenes uel
elemento, CSS uefine una piopieuau que peimite establecei los cuatio migenes ue
foima uiiecta empleanuo una nica piopieuau. Este tipo ue piopieuaues iesumiuas se
uenominan piopieuaues ue tipo "shorthand" y CSS uefine vaiias piopieuaues ue este
tipo, como se vei ms auelante.
La piopieuau que peimite uefinii ue foima simultanea los cuatio migenes se uenomina
margin.
margin Margen
Valores ( <medida> | <porcentaje> | auto ) {1, 4} | inherit
Se aplica a
Todos los elementos salvo algunos casos especiales de elementos mostrados
como tablas
Valor inicial -
Descripcin Establece de forma directa todos los mrgenes de un elemento
La notacion {1, 4} ue la uefinicion anteiioi significa que la piopieuau margin aumite
entie uno y cuatio valoies, con el siguiente significauo:
Si solo se inuica un valoi, touos los migenes tienen ese valoi.
Si se inuican uos valoies, el piimeio se asigna al maigen supeiioi e infeiioi y el
segunuo se asigna a los migenes izquieiuo y ueiecho.
Si se inuican ties valoies, el piimeio se asigna al maigen supeiioi, el teiceio se
asigna al maigen infeiioi y el segunuo valoi se asigna los migenes izquieiuo y
ueiecho.
Si se inuican los cuatio valoies, el oiuen ue asignacion es: maigen supeiioi,
maigen ueiecho, maigen infeiioi y maigen izquieiuo.
El ejemplo anteiioi ue migenes se pueue ieesciibii utilizanuo la piopieuau margin:
Couigo CSS oiiginal:
div img {
margin-top: .5em;
margin-left: 1em;
margin-right: .5em;
}
Alteinativa uiiecta:
div img {
margin: .5em .5em .5m 1em;
}
0tia alteinativa:
www.librosweb.es
51
div img {
margin: .5em;
margin-left: 1em;
}
El compoitamiento ue los migenes veiticales es ms complejo ue lo que se pueue
imaginai. Cuanuo se juntan uos o ms migenes veiticales, se fusionan ue foima
automtica y la altuia uel nuevo maigen sei igual a la altuia uel maigen ms alto ue los
que se han fusionauo.
Figura 4.8. Fusin automtica de los mrgenes verticales
Be la misma foima, si un elemento est conteniuo uentio ue otio elemento, sus
migenes veiticales se fusionan y iesultan en un nuevo maigen ue la misma altuia que
el mayoi maigen ue los que se han fusionauo:
Figura 4.9. Fusin de los mrgenes de los elementos interiores
Aunque en piincipio pueue paiecei un compoitamiento extiao, la iazon poi la que se
piopuso este mecanismo ue fusion automtica ue migenes veiticales es el ue uai
unifoimiuau a las pginas web habituales. En una pgina con vaiios piiafos, si no se
uieia este compoitamiento y se establecieia un ueteiminauo maigen a touos los
piiafos, el piimei piiafo no mostiaiia un aspecto homogneo iespecto ue los uems.
www.librosweb.es
52
Figura 4.10. Motivo por el que se fusionan automticamente los mrgenes verticales
En el caso ue un elemento que se encuentia en el inteiioi ue otio y sus migenes se
fusionan ue foima automtica, se pueue evitai este compoitamiento aauienuo un
pequeo ielleno (padding: 1px) o un boiue (border: 1px solid transparent) al
elemento conteneuoi.
4.2.2. Relleno
CSS uefine cuatio piopieuaues paia contiolai caua uno ue los espacios ue ielleno
hoiizontales y veiticales ue un elemento.
padding-top
padding-right
padding-bottom
padding-left
Relleno superior
Relleno derecho
Relleno inferior
Relleno izquierdo
Valores <medida> | <porcentaje> | inherit
Se aplica a
Todos los elementos excepto algunos elementos de tablas como
grupos de cabeceras y grupos de pies de tabla
Valor inicial 0
Descripcin
Establece cada uno de los rellenos horizontales y verticales de un
elemento
Caua una ue las piopieuaues establece la sepaiacion entie el lateial ue los conteniuos y
el boiue lateial ue la caja:
www.librosweb.es
53
Figura 4.11. Las cuatro propiedades relacionadas con los rellenos
La siguiente imagen muestia la uifeiencia entie el maigen y el ielleno ue los elementos:
Figura 4.12. Diferencia entre relleno (padding) y margen (margin)
El couigo BTNL y CSS uel ejemplo se muestia a continuacion:
.margen {
margin-top: 2em; margin-right: 2em; margin-bottom: 2em; margin-left: 2em;
}
.relleno {
padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em;
}
<p class="margen">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi.</p>
www.librosweb.es
54
<p class="relleno">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi.</p>
Como suceue con la piopieuau margin, CSS tambin uefine una piopieuau ue tipo
"shorthand" paia establecei los cuatio iellenos ue un elemento ue foima uiiecta. La
piopieuau que peimite uefinii ue foima simultanea los cuatio migenes se uenomina
padding.
padding Relleno
Valores ( <medida> | <porcentaje> ) {1, 4} | inherit
Se aplica a
Todos los elementos excepto algunos elementos de tablas como grupos de
cabeceras y grupos de pies de tabla
Valor inicial -
Descripcin Establece de forma directa todos los rellenos de los elementos
La notacion {1, 4} ue la uefinicion anteiioi significa que la piopieuau padding aumite
entie uno y cuatio valoies, con el mismo significauo que el ue la piopieuau margin.
Ejemplo:
body {padding: 2em} /* Todos los rellenos valen 2em */
body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y derecho = 2em
*/
body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em, inferior = 3em,
izquierdo = 2em */
body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho = 2em, inferior =
3em, izquierdo = 4em */
4.3. Bordes
CSS peimite uefinii el aspecto ue caua uno ue los cuatio boiues hoiizontales y veiticales
ue los elementos. Paia caua boiue se pueue establecei su anchuia, su coloi y su estilo.
4.3.1. Anchura
La anchuia ue los boiues se contiola con las cuatio piopieuaues siguientes:
www.librosweb.es
55
border-top-width
border-right-width
border-bottom-width
border-left-width
Anchura del borde superior
Anchura del borde derecho
Anchura del borde inferior
Anchura del borde izquierdo
Valores
( <medida> | thin | medium | thick ) |
inherit
Se aplica a Todos los elementos
Valor inicial Medium
Descripcin
Establece la anchura de cada uno de los cuatro bordes de los
elementos
La anchuia ue los boiues se pueue inuicai meuiante una meuiua (absoluta o ielativa y
en cualquiei uniuau ue meuiua ue las uefiniuas) o meuiante las palabias clave thin
(boiue uelgauo), medium (boiue noimal) y thick (boiue ancho).
La meuiua ms habitual paia inuicai la anchuia ue los boiues es el pixel, ya que peimite
un contiol pieciso uel giosoi. Las palabias clave apenas se utilizan, ya que impiuen
mostiai boiues iguales en uifeientes navegauoies. El motivo es que el estnuai CSS no
inuica explicitamente el giosoi al que equivale caua palabia clave. Asi poi ejemplo, el
giosoi medium equivale a 4px en Inteinet Exploiei y 3px en el iesto ue navegauoies.
El siguiente ejemplo muestia un elemento con cuatio anchuias uifeientes ue boiue:
Figura 4.13. Ejemplo de propiedad border-width
Las ieglas CSS utilizauas se muestian a continuacion:
div {
border-top-width: 10px;
border-right-width: 1em;
border-bottom-width: thick;
border-left-width: thin;
}
www.librosweb.es
56
Si se quieie establecei la misma anchuia a touos los boiues, CSS peimite la utilizacion
ue un atajo meuiante una piopieuau ue tipo "shorthand", que peimiten inuicai vaiias
piopieuaues ue foima iesumiua:
border-width Anchura del borde
Valores ( <medida> | thin | medium | thick ) {1, 4} | inherit
Valor inicial Medium
Descripcin Establece la anchura de todos los bordes del elemento
La piopieuau border-width peimite inuicai entie uno y cuatio valoies. El significauo ue
caua caso es el habitual ue las piopieuaues "shorthand":
p { border-width: thin } /* thin thin thin thin */
p { border-width: thin thick } /* thin thick thin thick */
p { border-width: thin thick medium } /* thin thick medium thick */
p { border-width: thin thick medium thin } /* thin thick medium thin */
Si se inuica un solo valoi, se aplica a los cuatio boiues. Si se inuican uos valoies, el
piimeio se aplica al boiue supeiioi e infeiioi y el segunuo valoi se aplica al boiue
izquieiuo y ueiecho.
Si se inuican ties valoies, el piimeio se aplica al boiue supeiioi, el segunuo se aplica al
boiue izquieiuo y ueiecho y el teicei valoi se aplica al boiue infeiioi. Si se inuican los
cuatio valoies, el oiuen ue aplicacion es supeiioi, ueiecho, infeiioi e izquieiuo.
4.3.2. Color
El coloi ue los boiues se contiola con las cuatio piopieuaues siguientes:
border-top-color
border-right-color
border-bottom-color
border-left-color
Color del borde superior
Color del borde derecho
Color del borde inferior
Color del borde izquierdo
Valores <color> | transparent | inherit
Valor inicial -
Descripcin
Establece el color de cada uno de los cuatro bordes de los
elementos
El ejemplo anteiioi se pueue mouificai paia mostiai caua uno ue los boiues ue un coloi
uifeiente:
www.librosweb.es
57
Figura 4.14. Ejemplo de propiedad border-color
Las ieglas CSS necesaiias paia mostiai los coloies anteiioies son las siguientes:
div {
border-top-color: #CC0000;
border-right-color: blue;
border-bottom-color: #00FF00;
border-left-color: #CCC;
}
Si se quieie establecei el mismo coloi paia touos los boiues, CSS peimite la utilizacion
ue un atajo meuiante una piopieuau ue tipo "shorthand", que peimiten inuicai vaiias
piopieuaues ue foima iesumiua:
border-color Color del borde
Valores ( <color> | transparent ) {1, 4} | inherit
Valor inicial -
Descripcin Establece el color de todos los bordes del elemento
En este caso, al igual que suceue con la piopieuau border-width, es posible inuicai ue
uno a cuatio valoies y las ieglas ue aplicacion son iunticas a la piopieuau
border-width.
4.3.3. Estilo
Poi ltimo, CSS peimite establecei el estilo ue caua uno ue los boiues meuiante las
siguientes piopieuaues:
www.librosweb.es
58
border-top-style
border-right-style
border-bottom-style
border-left-style
Estilo del borde superior
Estilo del borde derecho
Estilo del borde inferior
Estilo del borde izquierdo
Valores
none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset |
inherit
Valor inicial none
Descripcin
Establece el estilo de cada uno de los cuatro bordes de los
elementos
El estilo ue los boiues solo se pueue inuicai meuiante alguna ue las palabias ieseivauas
uefiniuas poi CSS. Como el valoi poi uefecto ue esta piopieuau es none, los elementos no
muestian ningn boiue visible a menos que se establezca explicitamente un estilo ue
boiue.
Siguienuo el ejemplo anteiioi, se pueue mouificai el estilo ue caua uno ue los boiues:
Figura 4.15. Ejemplo de propiedad border-style
Las ieglas CSS necesaiias paia mostiai los estilos anteiioies son las siguientes:
div {
border-top-style: dashed;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: solid;
}
El aspecto con el que los navegauoies muestian los uifeientes tipos ue boiue se muestia
a continuacion:
www.librosweb.es
59
Figura 4.16. Tipos de bordes definidos por CSS
Los boiues ms utilizauos en los uiseos habituales son solid y dashed, seguiuos ue
double y dotted. Los estilos none y hidden son iunticos visualmente, peio se
uifeiencian en la foima que los navegauoies iesuelven los conflictos entie los boiues ue
las celuas auyacentes en las tablas.
Si se quieie establecei el mismo estilo paia touos los boiues, CSS uefine una piopieuau
ue tipo "shorthand":
www.librosweb.es
60
border-style Estilo del borde
Valores
(none | hidden | dotted | dashed | solid | double |
groove | ridge | inset | outset ) {1, 4} | inherit
Valor inicial -
Descripcin Establece el estilo de todos los bordes del elemento
Como es habitual, la piopieuau peimite inuicai ue uno a cuatio valoies uifeientes y las
ieglas ue aplicacion son las habituales ue las piopieuaues "shorthand".
4.3.4. Propiedades shorthand
Como suceue con los migenes y los iellenos, CSS uefine una seiie ue piopieuaues ue
tipo "shorthand" que peimiten establecei touos los atiibutos ue los boiues ue foima
uiiecta. CSS ha uefiniuo una piopieuau "shorthand" paia caua uno ue los cuatio boiues y
una piopieuau "shorthand" global.
Antes ue piesentai las piopieuaues, es conveniente uefinii los ties siguientes tipos ue
valoies:
<medida_borde> = <medida> | thin | medium | thick
<color_borde> = <color> | transparent
<estilo_borde> = none | hidden | dotted | dashed | solid | double | groove |
ridge | inset | outset
border-top
border-right
border-bottom
border-left
Estilo completo del borde superior
Estilo completo del borde derecho
Estilo completo del borde inferior
Estilo completo del borde izquierdo
Valores
( <medida_borde> || <color_borde> || <estilo_borde> )
| inherit
Valor inicial -
Descripcin
Establece el estilo completo de cada uno de los cuatro bordes de los
elementos
Las piopieuaues "shorthand" peimiten establecei alguno o touos los atiibutos ue caua
boiue. El siguiente ejemplo establece el coloi y el tipo uel boiue infeiioi, peio no su
anchuia:
h1 {
border-bottom: solid red;
}
www.librosweb.es
61
En el ejemplo anteiioi, la anchuia uel boiue sei la coiiesponuiente al valoi poi uefecto
(medium). Este otio ejemplo muestia la foima habitual utilizaua paia establecei el estilo
ue caua boiue:
div {
border-top: 1px solid #369;
border-bottom: 3px double #369;
}
Poi ultimo, CSS uefine una piopieuau ue tipo "shorthand" global paia establecei el valoi
ue touos los atiibutos ue touos los boiues ue foima uiiecta:
border Estilo completo de todos los bordes
Valores
( <medida_borde> || <color_borde> || <estilo_borde> ) |
inherit
Valor inicial -
Descripcin Establece el estilo completo de todos los bordes de los elementos
Las siguientes ieglas CSS son equivalentes:
div {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
div { border: 1px solid red; }
Como el valoi poi uefecto ue la piopieuau border-style es none, si una piopieuau
shorthand no establece explicitamente el estilo ue un boiue, el elemento no muestia ese
boiue:
/* Slo se establece el color, por lo que el estilo es
"none" y el borde no se muestra */
div { border: red; }
/* Se establece el grosor y el color del borde, pero no
su estilo, por lo que es "none" y el borde no se muestra */
div { border-bottom: 5px blue; }
Cuanuo los cuatio boiues no son iunticos peio si muy paieciuos, se pueue utilizai la
piopieuau border paia establecei ue foima uiiecta los atiibutos comunes ue touos los
boiues y posteiioimente especificai paia caua uno ue los cuatio boiues sus piopieuaues
paiticulaies:
h1 {
border: solid #000;
border-top-width: 6px;
www.librosweb.es
62
border-left-width: 8px;
}
4.4. Margen, relleno, bordes y modelo de cajas
La anchuia y altuia ue un elemento no solamente se calculan tenienuo en cuenta sus
piopieuaues width y height. El maigen, el ielleno y los boiues estableciuos a un
elemento ueteiminan la anchuia y altuia final uel elemento. En el siguiente ejemplo se
muestian los estilos CSS ue un elemento:
div {
width: 300px;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
margin-right: 30px;
border: 10px solid black;
}
La anchuia total con la que se muestia el elemento no son los 300 pixel inuicauos en la
piopieuau width, sino que se tienen en cuenta touos sus migenes, iellenos y boiues:
Figura 4.17. La anchura total de un elemento tiene en cuenta los mrgenes, rellenos y
bordes
Be esta foima, la anchuia uel elemento en pantalla seiia igual a la suma ue la anchuia
oiiginal, los migenes, los boiues y los iellenos:
30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 pxel
Asi, la anchuiaaltuia estableciua con CSS siempie hace iefeiencia a la anchuiaaltuia
uel conteniuo. La anchuiaaltuia total uel elemento uebe tenei en cuenta auems los
valoies uel iesto ue paites que componen la caja uel box model.
Poi otia paite, la gueiia ue navegauoies que se piouujo en los aos 9u piovoco que caua
fabiicante (Niciosoft y Netscape) aauieia sus piopias extensiones y mejoias en sus
piouuctos. Posteiioimente, apaiecieion los estnuaies publicauos poi el WSC y los
fabiicantes se encontiaion con el pioblema ue la incompatibiliuau entie sus
implementaciones anteiioies ue BTNL y CSS y las implementaciones que iequeiian los
estnuaies.
www.librosweb.es
63
La solucion que auoptaion fue la ue incluii en el navegauoi uos mouos uifeientes ue
funcionamiento: mouo compatible con las pginas antiguas (uenominauo "modo quirks"
y que se pouiia tiauucii como "modo raro") y mouo compatible con los nuevos
estnuaies (uenominauo "modo estndar"). El mouo quirks es equivalente a la foima en
la que se visualizaban las pginas en los navegauoies Inteinet Exploiei 4 y Netscape
Navigatoi 4.
La uifeiencia ms notable entie los uos mouos es el tiatamiento uel "box model", lo que
pueue afectai giavemente al uiseo ue las pginas BTNL. Los navegauoies seleccionan
automticamente el mouo en el que muestian las pginas en funcion uel DOCTYPE
uefiniuo poi el uocumento. En geneial, los siguientes tipos ue DOCTYPE activan el mouo
quirks en los navegauoies:
No utilizai ningn DOCTYPE
DOCTYPE anteiioi a BTNL 4.u (<!DOCTYPE HTML PUBLIC "-//W3CDTD HTML 3.2
Final//EN">) * DOCTYPE de HTML 4.01 sin URL (<!DOCTYPE HTML PUBLIC
"-//W3CDTD HTML 4.01 Transitional//EN">)
En el caso concieto ue Inteinet Exploiei, tambin activan el mouo quiiks los mouos
XBTNL 1.u que incluyen la ueclaiacion ue XNL (poi ejemplo <?xml version="1.0"
encoding="UTF-8"?>) al piincipio ue la pgina web:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Se pueuen consultai touos los casos concietos que activan el mouo quirks paia caua
navegauoi en la pgina http:hsivonen.iki.fiuoctype
La veision S.S y anteiioies ue Inteinet Exploiei y las veisiones 6 y 7 en mouo quirks
siguen su piopio mouelo ue clculo ue anchuias y altuias que es muy uifeiente al
mtouo uefiniuo poi el estnuai.
La siguiente imagen muestia el elemento uel ejemplo anteiioi en la veision 6 ue
Inteinet Exploiei en mouo estnuai:
www.librosweb.es
64
Figura 4.18. Internet Explorer 6 en modo estndar
La anchuia uel elemento es la que se obtiene ue sumai la anchuia ue su conteniuo (300),
sus boiues (2 x 10) y sus iellenos (2 x 50). Poi lo tanto, la anchuia uel elemento son
420 pixel, a los que se suman los 30 pixel ue maigen lateial a caua lauo.
Sin embaigo, el mismo ejemplo en el mouo quirks ue la veision 6 ue Inteinet Exploiei
muestia el siguiente aspecto:
Figura 4.19. Internet Explorer 6 en modo quirks
www.librosweb.es
65
Las veisiones anteiioies ue Inteinet Exploiei y las veisiones 6 y 7 en mouo quirks
consiueian que la anchuia estableciua poi CSS no solo es la anchuia uel conteniuo, sino
que tambin incluye los boiues y el ielleno.
Poi lo tanto, en este caso la anchuia total uel elemento (sin contai los migenes
lateiales) es ue 300 pixel, el mismo valoi que se inuica en la piopieuau width. El espacio
ocupauo poi los boiues uel elemento (2 x 10) y sus iellenos (2 x 50) se iesta ue la
anchuia ue su conteniuo.
Paia evitai este pioblema y cieai uiseos con el mismo aspecto en cualquiei navegauoi,
es necesaiio evitai el mouo quirks ue Inteinet Exploiei. Poi tanto, touas las pginas
ueben incluii la ueclaiacion apiopiaua ue DOCTYPE.
4.4.1. Los modos de compatibilidad de Internet Explorer 8
El navegauoi Inteinet Exploiei 8 intiouuce el concepto ue "compatibilidad de la pgina"
paia aseguiai que touas las pginas BTNL se vean coiiectamente en cualquiei veision
ue ese navegauoi. En iealiuau, esta nueva caiacteiistica es una mejoia uel modo quirks
explicauo anteiioimente.
Inteinet Exploiei 8, a uifeiencia ue sus veisiones anteiioies, sopoita completamente el
estnuai CSS 2.1. Sin embaigo, muchos sitios web se uiseaion paia Inteinet Exploiei 6
y 7, poi lo que incluyen tiucos, hacks y filtios que aiieglan los eiioies y caiencias ue
esas veisiones uel navegauoi.
Paia evitai que las pginas uiseauas paia navegauoies anteiioies se vean mal en esta
nueva veision, Inteinet Exploiei 8 incluye la opcion ue "compatibiliuau ue la pgina",
que peimite inuicai la veision ue Inteinet Exploiei paia la que la pgina ha siuo
uiseaua.
Be esta foima, si la pgina no se visualiza coiiectamente en Inteinet Exploiei 8, se
pueue inuicai al navegauoi que la muestie como si fueia Inteinet Exploiei 6 o 7. En
iealiuau, Inteinet Exploiei 8 incluye seis mouos ue funcionamiento:
Modo IE5: la pgina se muestia segn el mouo quirks ue Inteinet Exploiei 7, que
es casi iuntico a como se veian las pginas en el navegauoi Inteinet Exploiei S.
Modo IE7: la pgina se muestia en el mouo estnuai ue Inteinet Exploiei 7, sin
impoitai si la pgina contiene o no la uiiectiva <!DOCTYPE>.
Modo IE8: los conteniuos se muestian en el mouo estnuai ue Inteinet Exploiei
8, que es el ms paieciuo al uel iesto ue navegauoies que sopoitan los estnuaies
(Fiiefox, 0peia, Safaii y uoogle Chiome).
Emular el modo IE7: el navegauoi ueciue como mostiai los conteniuos a paitii
ue la uiiectiva <!DOCTYPE> ue la pgina. Si esa uiiectiva es una ue las que activan el
mouo estnuai, la pgina se muestia en el mouo estnuai ue Inteinet Exploiei 7.
En otio caso, se muestia en el mouo quirks ue Inteinet Exploiei S. Este mouo es el
ms til paia la mayoiia ue sitios web.
www.librosweb.es
66
Emular el modo IE8: el navegauoi ueciue como mostiai los conteniuos a paitii
ue la uiiectiva <!DOCTYPE> ue la pgina. Si esa uiiectiva es una ue las que activan el
mouo estnuai, la pgina se muestia en el mouo estnuai ue Inteinet Exploiei 8.
En otio caso, se muestia en el mouo quirks ue Inteinet Exploiei S.
Modo lmite ("edge mode"): inuica a Inteinet Exploiei que los conteniuos se
ueben mostiai en el mouo ue compatibiliuau ms avanzauo uisponible.
Actualmente, este mouo es equivalente al mouo IE8. Si las futuias veisiones
Inteinet Exploiei 9 y 1u incluyeian mejoi compatibiliuau, las pginas se
visualizaiian en ese mouo avanzauo ue compatibiliuau.
El mouo ue compatibiliuau ue la pgina se inuica meuiante una nueva etiqueta <meta>
con la piopieuau X-UA-Compatible y cuyo valoi es el que utiliza Inteinet Exploiei 8 paia
ueteiminai el mouo que se utiliza:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=5" >
...
</head>

<head>
...
</head>

<head>
...
</head>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
...
</head>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
...
</head>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
...
</head>
No obstante, esta opcion ue compatibiliuau ue la pgina uebe entenueise como una
solucion tempoial que evita que los sitios web se vean mal en Inteinet Exploiei 8. La
www.librosweb.es
67
nica solucion coiiecta a laigo plazo consiste en actualizai las pginas paia que sus
uiseos sigan los estnuaies web.
4.5. Fondos
El ltimo elemento que foima el box model es el fonuo ue la caja uel elemento. El fonuo
pueue sei un coloi simple o una imagen. El fonuo solamente se visualiza en el iea
ocupaua poi el conteniuo y su ielleno, ya que el coloi ue los boiues se contiola
uiiectamente uesue los boiues y las zonas ue los migenes siempie son tianspaientes.
Paia establecei un coloi o imagen ue fonuo en la pgina enteia, se uebe establecei un
fonuo al elemento <body>. Si se establece un fonuo a la pgina, como el valoi inicial uel
fonuo ue los elementos es tianspaiente, touos los elementos ue la pgina se visualizan
con el mismo fonuo a menos que algn elemento especifique su piopio fonuo.
CSS uefine cinco piopieuaues paia establecei el fonuo ue caua elemento
(background-color, background-image, background-repeat, background-attachment,
background-position) y otia piopieuau ue tipo "shorthand" (background).
background-color Color de fondo
Valores <color> | transparent | inherit
Valor inicial transparent
Descripcin Establece un color de fondo para los elementos
El siguiente ejemplo muestia una pgina web con un coloi giis claio ue fonuo:
body {
background-color: #F5F5F5;
}
En ocasiones, es necesaiio cieai un fonuo ms complejo que un simple coloi. CSS
peimite mostiai una imagen como fonuo ue cualquiei elemento:
background-image Imagen de fondo
Valores <url> | none | inherit
Valor inicial none
Descripcin Establece una imagen como fondo para los elementos
CSS peimite establecei ue foima simultnea un coloi y una imagen ue fonuo. En este
caso, la imagen se muestia uelante uel coloi, poi lo que solamente si la imagen contiene
zonas tianspaientes es posible vei el coloi ue fonuo.
El siguiente ejemplo muestia una imagen como fonuo ue toua la pgina:
www.librosweb.es
68
body { background-image: url("imagenes/fondo.png") }
Las imgenes ue fonuo se inuican a tiavs ue su 0RL, que pueue sei absoluta o ielativa.
Suele sei iecomenuable cieai una caipeta ue imgenes que se encuentie en el mismo
uiiectoiio que los aichivos CSS y que almacene touas las imgenes utilizauas en el
uiseo ue las pginas.
Asi, las imgenes coiiesponuientes al uiseo ue la pgina se mantienen sepaiauas uel
iesto ue imgenes uel sitio y el couigo CSS es ms sencillo (poi utilizai 0RL ielativas) y
ms fcil ue mantenei (poi no tenei que actualizai 0RL absolutas en caso ue que se
cambie la estiuctuia uel sitio web).
Poi otia paite, suele sei habitual inuicai un coloi ue fonuo siempie que se muestia una
imagen ue fonuo. En caso ue que la imagen no se pueua mostiai o contenga eiioies, el
navegauoi mostiai el coloi inuicauo (que uebeiia sei, en lo posible, similai a la
imagen) y la pgina no paiecei que contiene eiioies.
Si la imagen que se quieie mostiai es uemasiauo gianue paia el fonuo uel elemento,
solamente se muestia la paite ue imagen compienuiua en el tamao uel elemento. Si la
imagen es ms pequea que el elemento, CSS la iepite hoiizontal y veiticalmente hasta
llenai el fonuo uel elemento.
Este compoitamiento es til paia establecei un fonuo complejo a una pgina web
enteia. El siguiente ejemplo utiliza una imagen muy pequea paia establecei un fonuo
complejo a toua una pgina:
Imagen oiiginal
Figura 4.20. Imagen original utilizada para el fondo de la pgina
Reglas CSS
body {
background-image:url(imagenes/fondo.gif);
}
Resultauo
www.librosweb.es
69
Figura 4.21. Pgina con una imagen de fondo
Con una imagen muy pequea (y que poi tanto, se pueue uescaigai en muy poco
tiempo) se consigue cubiii completamente el fonuo ue la pgina, con lo que se consigue
un gian ahoiio ue ancho ue banua.
En ocasiones, no es conveniente que la imagen ue fonuo se iepita hoiizontal y
veiticalmente. Paia ello, CSS intiouuce la piopieuau background-repeat que peimite
contiolai la foima ue iepeticion ue las imgenes ue fonuo.
background-repeat Repeticin de la imagen de fondo
Valores
repeat | repeat-x | repeat-y | no-repeat |
inherit
Valor inicial repeat
Descripcin Controla la forma en la que se repiten las imgenes de fondo
El valoi repeat inuica que la imagen se uebe iepetii en touas uiiecciones y poi tanto, es
el compoitamiento poi uefecto. El valoi no-repeat muestia una sola vez la imagen y no
se iepite en ninguna uiieccion. El valoi repeat-x iepite la imagen solo hoiizontalmente
y el valoi repeat-y iepite la imagen solamente ue foima veitical.
El sitio web http:www.kottke.oig utiliza el valoi repeat-x paia mostiai una imagen
ue fonuo en la cabeceia ue la pgina:
www.librosweb.es
70
Figura 4.22. Uso de repeat-x en la pgina de Kottke.org
Las ieglas CSS uefiniuas paia la cabeceia son:
#hdr {
background: url("/images/ds.gif") repeat-x;
width: 100%;
text-align: center;
}
Poi otia paite, el sitio web http:veeile.uuoh.com utiliza el valoi repeat-y paia
mostiai el fonuo ue una columna ue conteniuos:
www.librosweb.es
71
Figura 4.23. Uso de repeat-y en la pgina de Veerle.duoh.com
Las ieglas CSS uefiniuas paia esa columna ue conteniuos son:
.wide #content-secondary {
width: 272px;
margin: 13px 0 0 0;
position: relative;
margin-left: -8px;
background: url("./graphics/wide/bg-content-secondary.gif") repeat-y;
}
Auems ue seleccionai el tipo ue iepeticion ue las imgenes ue fonuo, CSS peimite
contiolai la posicion ue la imagen uentio uel fonuo uel elemento meuiante la piopieuau
background-position.
www.librosweb.es
72
background-position Posicin de la imagen de fondo
Valores
( ( <porcentaje> | <medida> | left | center |
right ) ( <porcentaje> | <medida> | top |
center | bottom )? ) | ( ( left | center |
right ) || ( top | center | bottom ) ) |
inherit
Valor inicial 0% 0%
Descripcin
Controla la posicin en la que se muestra la imagen en el
fondo del elemento
La piopieuau background-position peimite inuicai la uistancia que se uesplaza la
imagen ue fonuo iespecto ue su posicion oiiginal situaua en la esquina supeiioi
izquieiua.
Si se inuican uos poicentajes o uos meuiuas, el piimeio inuica el uesplazamiento
hoiizontal y el segunuo el uesplazamiento veitical iespecto uel oiigen (situauo en la
esquina supeiioi izquieiua). Si solamente se inuica un poicentaje o una meuiua, se
consiueia que es el uesplazamiento hoiizontal y al uesplazamiento veitical se le asigna
automticamente el valoi ue Su%.
Cuanuo se utilizan poicentajes, su inteipietacion no es intuitiva. Si el valoi ue la
piopieuau background-position se inuica meuiante uos poicentajes x% y%, el
navegauoi coloca el punto (x%, y%) ue la imagen ue fonuo en el punto (x%, y%) uel
elemento.
Las palabias clave peimitiuas son equivalentes a algunos poicentajes significativos: top
= u%, left = u%, center = Su%, bottom = 1uu%, right = 1uu%.
CSS peimite mezclai poicentajes y palabias clave, como poi ejemplo 50% 2cm, center
2cm, center 10%.
Si se utilizan solamente palabias clave, el oiuen es inuifeiente y poi tanto, es
equivalente inuicai top left y left top.
El siguiente ejemplo muestia una misma imagen ue fonuo posicionaua ue ties foimas
uifeientes:
www.librosweb.es
73
Figura 4.24. Ejemplo de propiedad background-position
Las ieglas CSS uel ejemplo anteiioi se muestian a continuacion:
#caja1 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: bottom left;
}
#caja2 {
background-position: right top;
}
#caja3 {
background-position: 50% 50%;
}
<div id="caja1"><h1>bottom left</h1></div>
<div id="caja2"><h1>right top</h1></div>
<div id="caja3"><h1>50% 50%</h1></div>
0pcionalmente, se pueue inuicai que el fonuo peimanezca fijo cuanuo la ventana uel
navegauoi se uesplaza meuiante las baiias ue scroll. Se tiata ue un compoitamiento que
en geneial no es ueseable y que algunos navegauoies no sopoitan coiiectamente. La
piopieuau que contiola este compoitamiento es background-attachment.
www.librosweb.es
74
background-attachment Comportamiento de la imagen de fondo
Valores scroll | fixed | inherit
Valor inicial scroll
Descripcin
Controla la forma en la que se visualiza la imagen de
fondo: permanece fija cuando se hace scroll en la ventana
del navegador o se desplaza junto con la ventana
Paia hacei que una imagen ue fonuo se muestie fija al uesplazai la ventana uel
navegauoi, se uebe aauii la piopieuau background-attachment: fixed.
Poi ltimo, CSS uefine una piopieuau ue tipo "shorthand" paia inuicai touas las
piopieuaues ue los coloies e imgenes ue fonuo ue foima uiiecta. La piopieuau se
uenomina background y es la que geneialmente se utiliza paia establecei las
piopieuaues uel fonuo ue los elementos.
background Fondo de un elemento
Valores
( <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position> ) | inherit
Valor inicial -
Descripcin Establece todas las propiedades del fondo de un elemento
El oiuen en el que se inuican las piopieuaues es inuifeiente, aunque en geneial se sigue
el foimato inuicauo ue coloi, uil ue imagen, iepeticion y posicion.
El siguiente ejemplo muestia la ventaja ue utilizai la piopieuau background:
/* Color e imagen de fondo de la pgina mediante una propiedad shorthand */
body { background: #222d2d url(./graphics/colorstrip.gif) repeat-x 0 0; }
/* La propiedad shorthand anterior es equivalente a las siguientes propiedades
*/
body {
background-color: #222d2d;
background-image: url("./graphics/colorstrip.gif");
background-repeat: repeat-x;
background-position: 0 0;
}
La piopieuau background peimite asignai touos o solo algunos ue touos los valoies que
se pueuen uefinii paia los fonuos ue los elementos:
background: url("./graphics/wide/bg-content-secondary.gif") repeat-y;
background: url("./graphics/wide/footer-content-secondary.gif") no-repeat
www.librosweb.es
75
bottom left;
background: transparent url("./graphics/navigation.gif") no-repeat 0 -27px;
background: none;
background: #293838 url("./graphics/icons/icon-permalink-big.gif") no-repeat
center left;
www.librosweb.es
76
Captulo 5. Posicionamiento y
visualizacin
Cuanuo los navegauoies uescaigan el conteniuo BTNL y CSS ue las pginas web, aplican
un piocesamiento muy complejo antes ue mostiai las pginas en la pantalla uel usuaiio.
Paia cumplii con el mouelo ue cajas piesentauo en el capitulo anteiioi, los navegauoies
ciean una caja paia iepiesentai a caua elemento ue la pgina BTNL. Los factoies que se
tienen en cuenta paia geneiai caua caja son:
Las piopieuaues width y height ue la caja (si estn estableciuas).
El tipo ue caua elemento BTNL (elemento ue bloque o elemento en linea).
Posicionamiento ue la caja (noimal, ielativo, absoluto, fijo o flotante).
Las ielaciones entie elementos (uonue se encuentia caua elemento, elementos
uescenuientes, etc.)
0tio tipo ue infoimacion, como poi ejemplo el tamao ue las imgenes y el
tamao ue la ventana uel navegauoi.
En este capitulo se muestian los cinco tipos ue posicionamientos uefiniuos paia las cajas
y se piesentan otias piopieuaues que afectan a la foima en la que se visualizan las cajas.
5.1. Tipos de elementos
El estnuai BTNL clasifica a touos sus elementos en uos gianues giupos: elementos en
linea y elementos ue bloque.
Los elementos ue bloque ("block elements" en ingls) siempie empiezan en una nueva
linea y ocupan touo el espacio uisponible hasta el final ue la linea. Poi su paite, los
elementos en linea ("inline elements" en ingls) no empiezan necesaiiamente en nueva
linea y solo ocupan el espacio necesaiio paia mostiai sus conteniuos.
Bebiuo a este compoitamiento, el tipo ue un elemento influye ue foima uecisiva en la
caja que el navegauoi ciea paia mostiailo. La siguiente imagen muestia las cajas que
ciea el navegauoi paia iepiesentai los uifeientes elementos que foiman una pgina
BTNL:
Introduccin a CSS Captulo 5. Posicionamiento y visualizacin
www.librosweb.es
77
Figura 5.1. Cajas creadas por los elementos de lnea y los elementos de bloque
El piimei elemento ue la pgina anteiioi es un piiafo. Los piiafos son elementos ue
bloque y poi ese motivo su caja empieza en una nueva linea y llega hasta el final ue esa
misma linea. Aunque los conteniuos ue texto uel piiafo no son suficientes paia ocupai
toua la linea, el navegauoi ieseiva touo el espacio uisponible en la piimeia linea.
El segunuo elemento ue la pgina es un enlace. Los enlaces son elementos en linea, poi
lo que su caja solo ocupa el espacio necesaiio paia mostiai sus conteniuos. Si uespus
ue este elemento se incluye otio elemento en linea (poi ejemplo otio enlace o una
imagen) el navegauoi mostiaiia los uos elementos en la misma linea, ya que existe
espacio suficiente.
Poi ltimo, el teicei elemento ue la pgina es un piiafo que se compoita ue la misma
foima que el piimei piiafo. En su inteiioi, se encuentia un enlace que tambin se
compoita ue la misma foima que el enlace anteiioi. Asi, el segunuo piiafo ocupa toua
una linea y el segunuo enlace solo ocupa el espacio necesaiio paia mostiai sus
conteniuos.
Poi sus caiacteiisticas, los elementos ue bloque no pueuen inseitaise uentio ue
elementos en linea y tan solo pueuen apaiecei uentio ue otios elementos ue bloque. En
cambio, un elemento en linea pueue apaiecei tanto uentio ue un elemento ue bloque
como uentio ue otio elemento en linea.
Los elementos en linea uefiniuos poi BTNL son: a, abbr, acronym, b, basefont, bdo, big,
br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span,
strike, strong, sub, sup, textarea, tt, u, var.
Los elementos ue bloque uefiniuos poi BTNL son: address, blockquote, center, dir,
div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p,
pre, table, ul.
www.librosweb.es
78
Los siguientes elementos tambin se consiueia que son ue bloque: dd, dt, frameset, li,
tbody, td, tfoot, th, thead, tr.
Los siguientes elementos pueuen sei en linea y ue bloque segn las ciicunstancias:
button, del, iframe, ins, map, object, script.
5.2. Posicionamiento
Los navegauoies ciean y posicionan ue foima automtica touas las cajas que foiman
caua pgina BTNL. No obstante, CSS peimite al uiseauoi mouificai la posicion en la
que se muestia caua caja.
0tilizanuo las piopieuaues que piopoiciona CSS paia alteiai la posicion ue las cajas es
posible iealizai efectos muy avanzauos y uiseai estiuctuias ue pginas que ue otia
foima no seiian posibles.
El estnuai ue CSS uefine cinco mouelos uifeientes paia posicionai una caja:
Posicionamiento noimal o esttico: se tiata uel posicionamiento que utilizan los
navegauoies si no se inuica lo contiaiio.
Posicionamiento ielativo: vaiiante uel posicionamiento noimal que consiste en
posicionai una caja segn el posicionamiento noimal y uespus uesplazaila
iespecto ue su posicion oiiginal.
Posicionamiento absoluto: la posicion ue una caja se establece ue foima absoluta
iespecto ue su elemento conteneuoi y el iesto ue elementos ue la pgina ignoian
la nueva posicion uel elemento.
Posicionamiento fijo: vaiiante uel posicionamiento absoluto que convieite una
caja en un elemento inamovible, ue foima que su posicion en la pantalla siempie
es la misma inuepenuientemente uel iesto ue elementos e inuepenuientemente ue
si el usuaiio sube o baja la pgina en la ventana uel navegauoi.
Posicionamiento flotante: se tiata uel mouelo ms especial ue posicionamiento, ya
que uesplaza las cajas touo lo posible hacia la izquieiua o hacia la ueiecha ue la
linea en la que se encuentian.
El posicionamiento ue una caja se establece meuiante la piopieuau position:
position Posicionamiento
Valores static | relative | absolute | fixed | inherit
Valor inicial static
Descripcin Selecciona el posicionamiento con el que se mostrar el elemento
El significauo ue caua uno ue los posibles valoies ue la piopieuau position es el
siguiente:
www.librosweb.es
79
static: coiiesponue al posicionamiento noimal o esttico. Si se utiliza este valoi,
se ignoian los valoies ue las piopieuaues top, right, bottom y left que se vein a
continuacion.
relative: coiiesponue al posicionamiento ielativo. El uesplazamiento ue la caja
se contiola con las piopieuaues top, right, bottom y left.
absolute: coiiesponue al posicionamiento absoluto. El uesplazamiento ue la caja
tambin se contiola con las piopieuaues top, right, bottom y left, peio su
inteipietacion es mucho ms compleja, ya que el oiigen ue cooiuenauas uel
uesplazamiento uepenue uel posicionamiento ue su elemento conteneuoi.
fixed: coiiesponue al posicionamiento fijo. El uesplazamiento se establece ue la
misma foima que en el posicionamiento absoluto, peio en este caso el elemento
peimanece inamovible en la pantalla.
La piopieuau position no peimite contiolai el posicionamiento flotante, que se
establece con otia piopieuau llamaua float y que se explica ms auelante. Auems, la
piopieuau position solo inuica como se posiciona una caja, peio no la uesplaza.
Noimalmente, cuanuo se posiciona una caja tambin es necesaiio uesplazaila iespecto
ue su posicion oiiginal o iespecto ue otio oiigen ue cooiuenauas. CSS uefine cuatio
piopieuaues llamauas top, right, bottom y left paia contiolai el uesplazamiento ue las
cajas posicionauas:
top
right
bottom
left
Desplazamiento superior
Desplazamiento lateral derecho
Desplazamiento inferior
Desplazamiento lateral izquierdo
Se aplica a Todos los elementos posicionados
Valor inicial auto
Descripcin
Indican el desplazamiento horizontal y vertical del elemento respecto de su
posicin original
En el caso uel posicionamiento ielativo, caua una ue estas piopieuaues inuica el
uesplazamiento uel elemento uesue la posicion oiiginal ue su boiue supeiioiueiecho
infeiioiizquieiuo. Si el posicionamiento es absoluto, las piopieuaues inuican el
uesplazamiento uel elemento iespecto uel boiue supeiioiueiechoinfeiioiizquieiuo
ue su piimei elemento pauie posicionauo.
En cualquieia ue los uos casos, si el uesplazamiento se inuica en foima ue poicentaje, se
iefieie al poicentaje sobie la anchuia (piopieuaues right y left) o altuia (piopieuaues
top y bottom) uel elemento.
www.librosweb.es
80
5.3. Posicionamiento normal
El posicionamiento noimal o esttico es el mouelo que utilizan poi uefecto los
navegauoies paia mostiai los elementos ue las pginas. En este mouelo, ninguna caja se
uesplaza iespecto ue su posicion oiiginal, poi lo que solo se tiene en cuenta si el
elemento es ue bloque o en linea.
Los elementos ue bloque foiman lo que CSS uenomina "contextos de formato de bloque".
En este tipo ue contextos, las cajas se muestian una uebajo ue otia comenzanuo uesue el
piincipio uel elemento conteneuoi. La uistancia entie las cajas se contiola meuiante los
migenes veiticales.
Figura 5.2. Posicionamiento normal de los elementos de bloque
Si un elemento se encuentia uentio ue otio, el elemento pauie se llama "elemento
contenedor" y ueteimina tanto la posicion como el tamao ue touas sus cajas inteiioies.
Si un elemento no se encuentia uentio ue un elemento conteneuoi, entonces su
elemento conteneuoi es el elemento <body> ue la pgina. Noimalmente, la anchuia ue
los elementos ue bloque est limitaua a la anchuia ue su elemento conteneuoi, aunque
en algunos casos sus conteniuos pueuen uesboiuai el espacio uisponible.
Los elementos en linea foiman los "contextos de formato en lnea". En este tipo ue
contextos, las cajas se muestian una uetis ue otia ue foima hoiizontal comenzanuo
uesue la posicion ms a la izquieiua ue su elemento conteneuoi. La uistancia entie las
cajas se contiola meuiante los migenes lateiales.
www.librosweb.es
81
Figura 5.3. Posicionamiento normal de los elementos en lnea
Si las cajas en linea ocupan ms espacio uel uisponible en su piopia linea, el iesto ue
cajas se muestian en las lineas infeiioies. Si las cajas en linea ocupan un espacio menoi
que su piopia linea, se pueue contiolai la uistiibucion ue las cajas meuiante la
piopieuau text-align paia centiailas, alineailas a la ueiecha o justificailas.
5.4. Posicionamiento relativo
El estnuai CSS consiueia que el posicionamiento ielativo es un caso paiticulai uel
posicionamiento noimal, aunque en iealiuau piesenta muchas uifeiencias.
El posicionamiento ielativo peimite uesplazai una caja iespecto ue su posicion oiiginal
estableciua meuiante el posicionamiento noimal. El uesplazamiento ue la caja se
contiola con las piopieuaues top, right, bottom y left.
El uesplazamiento ue una caja no afecta al iesto ue cajas auyacentes, que se muestian en
la misma posicion que si la caja uesplazaua no se hubieia moviuo ue su posicion oiiginal.
Figura 5.4. Ejemplo de posicionamiento relativo de un elemento
En la imagen anteiioi, la caja 2 se ha uesplazauo lateialmente hacia la ueiecha y
veiticalmente ue foima uescenuente. Como el iesto ue cajas ue la pgina no mouifican
su posicion, se piouucen solapamientos entie los conteniuos ue las cajas.
La piopieuau left uesplaza la caja hacia su ueiecha, la piopieuau right la uesplaza
hacia su izquieiua, la posicion top uesplaza la caja ue foima uescenuente y la piopieuau
bottom uesplaza la caja ue foima ascenuente. Si se utilizan valoies negativos en estas
piopieuaues, su efecto es justamente el inveiso.
Las cajas uesplazauas ue foima ielativa no mouifican su tamao, poi lo que los valoies
ue las piopieuaues left y right siempie cumplen que left = -right.
Si tanto left como right tienen un valoi ue auto (que es su valoi poi uefecto) la caja no
se mueve ue su posicion oiiginal. Si solo el valoi ue left es auto, su valoi ieal es -right.
Igualmente, si solo el valoi ue right es auto, su valoi ieal es -left.
Si tanto left como right tienen valoies uistintos ue auto, uno ue los uos valoies se
tiene que ignoiai poique son mutuamente excluyentes. Paia ueteiminai la piopieuau
que se tiene en cuenta, se consiueia el valoi ue la piopieuau direction.
www.librosweb.es
82
La piopieuau direction peimite establecei la uiieccion uel texto ue un conteniuo. Si el
valoi ue direction es ltr, el texto se muestia ue izquieiua a ueiecha, que es el mtouo
ue esciituia habitual en la mayoiia ue paises. Si el valoi ue direction es rtl, el mtouo
ue esciituia es ue ueiecha a izquieiua, como el utilizauo poi los iuiomas iabe y hebieo.
Si el valoi ue direction es ltr, y las piopieuaues left y right tienen valoies uistintos
ue auto, se ignoia la piopieuau right y solo se tiene en cuenta el valoi ue la piopieuau
left. Be la misma foima, si el valoi ue direction es rtl, se ignoia el valoi ue left y solo
se tiene en cuenta el valoi ue right.
El siguiente ejemplo muestia ties imgenes posicionauas ue foima noimal:
Figura 5.5. Elementos posicionados de forma normal
Aplicanuo el posicionamiento ielativo, se uesplaza la piimeia imagen ue foima
uescenuente:
img.desplazada {
position: relative;
top: 8em;
}
<img class="desplazada" src="imagenes/imagen.png" alt="Imagen genrica" />
<img src="imagenes/imagen.png" alt="Imagen genrica" />
El aspecto que muestian ahoia las imgenes es el siguiente:
www.librosweb.es
83
Figura 5.6. Elemento posicionado de forma relativa
El iesto ue imgenes no vaiian su posicion y poi tanto no ocupan el hueco uejauo poi la
piimeia imagen, ya que el posicionamiento ielativo no influye en el iesto ue elementos
ue la pgina. El nico pioblema ue posicionai elementos ue foima ielativa es que se
pueuen piouucii solapamientos con otios elementos ue la pgina.
5.5. Posicionamiento absoluto
El posicionamiento absoluto se emplea paia establecei ue foima piecisa la posicion en
la que se muestia la caja ue un elemento. La nueva posicion ue la caja se inuica meuiante
las piopieuaues top, right, bottom y left. La inteipietacion ue los valoies ue estas
piopieuaues es mucho ms compleja que en el posicionamiento ielativo, ya que en este
caso uepenuen uel posicionamiento uel elemento conteneuoi.
Cuanuo una caja se posiciona ue foima absoluta, el iesto ue elementos ue la pgina la
ignoian y ocupan el lugai oiiginal ocupauo poi la caja posicionaua. Al igual que en el
posicionamiento ielativo, cuanuo se posiciona ue foima absoluta una caja es piobable
que se piouuzcan solapamientos con otias cajas.
En el siguiente ejemplo, se posiciona ue foima absoluta la caja 2:
Figura 5.7. Ejemplo de posicionamiento absoluto de un elemento
www.librosweb.es
84
La caja 2 est posicionaua ue foima absoluta, lo que implica que el iesto ue elementos
ignoian que esa caja exista. Poi este motivo, la caja S ueja su lugai oiiginal y pasa a
ocupai el hueco uejauo poi la caja 2.
En el estnuai ue CSS, esta caiacteiistica ue las cajas posicionauas ue foima absoluta se
explica como que la caja sale por completo del flujo normal del documento. Be hecho, las
cajas posicionauas ue foima absoluta paiece que estan en un nivel uifeiente al iesto ue
elementos ue la pgina.
Poi otia paite, el uesplazamiento ue una caja posicionaua ue foima absoluta se inuica
meuiante las piopieuaues top, right, bottom y left. A uifeiencia ue posicionamiento
ielativo, en este caso la iefeiencia ue los valoies ue esas piopieuaues es el oiigen ue
cooiuenauas ue su piimei elemento conteneuoi posicionauo.
Beteiminai el oiigen ue cooiuenauas a paitii uel cual se uesplaza una caja posicionaua
ue foima absoluta es un pioceso complejo que se compone ue los siguientes pasos:
Se buscan touos los elementos conteneuoies ue la caja hasta llegai al elemento
<body> ue la pgina.
Se iecoiien touos los elementos conteneuoies empezanuo poi el ms ceicano a la
caja y lleganuo hasta el <body>
Be touos ellos, el navegauoi se queua con el piimei elemento conteneuoi que est
posicionauo ue cualquiei foima uifeiente a position: static
La esquina supeiioi izquieiua ue ese elemento conteneuoi posicionauo es el
oiigen ue cooiuenauas.
0na vez obteniuo el oiigen ue cooiuenauas, se inteipietan los valoies ue las
piopieuaues top, right, bottom y left iespecto a ese oiigen y se uesplaza la caja hasta
su nueva posicion.
En los siguientes ejemplos, se va a utilizai la pgina BTNL que muestia la siguiente
imagen:
www.librosweb.es
85
Figura 5.8. Situacin original antes de modificar el posicionamiento
A continuacion, se muestia el couigo BTNL y CSS ue la pgina oiiginal:
div {
border: 2px solid #CCC;
padding: 1em;
margin: 1em 0 1em 4em;
width: 300px;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
ullamcorper velit eu ipsum. Ut pellentesque, est in volutpat cursus, risus
mi viverra augue, at pulvinar turpis leo sed orci. Donec ipsum. Curabitur
felis dui, ultrices ut, sollicitudin vel, rutrum at, tellus.</p>
</div>
En piimei lugai, se posiciona ue foima absoluta la imagen meuiante la piopieuau
position y se inuica su nueva posicion meuiante las piopieuaues top y left:
div img {
position: absolute;
top: 50px;
left: 50px;
}
El iesultauo visual se muestia en la siguiente imagen:
www.librosweb.es
86
Figura 5.9. Imagen posicionada de forma absoluta
La imagen posicionaua ue foima absoluta no toma como oiigen ue cooiuenauas la
esquina supeiioi izquieiua ue su elemento conteneuoi <div>, sino que su iefeiencia es
la esquina supeiioi izquieiua ue la pgina:
Figura 5.10. La referencia del posicionamiento absoluto es la pgina entera
Paia posicionai la imagen ue foima absoluta, el navegauoi iealiza los siguientes pasos:
1. 0btiene la lista ue elementos conteneuoies ue la imagen: <div> y <body>.
2. Recoiie la lista ue elementos uesue el ms ceicano a la imagen (el <div>) hasta
teiminai en el <body> buscanuo el piimei elemento conteneuoi que est
posicionauo.
S. El piimei elemento conteneuoi es el <div>, peio su posicionamiento es el
noimal o esttico, ya que ni siquieia tiene estableciua la piopieuau position.
www.librosweb.es
87
4. Como el siguiente elemento conteneuoi es el <body>, el navegauoi establece
uiiectamente el oiigen ue cooiuenauas en la esquina supeiioi izquieiua ue la
pgina.
S. A paitii ue ese oiigen ue cooiuenauas, la caja se uesplaza 50px hacia la ueiecha
(left: 50px) y otios 50px ue foima uescenuente (top: 50px).
Auems, el piiafo que se mostiaba uebajo ue la imagen sube y ocupa el lugai uejauo
poi la imagen. El iesultauo es que el elemento <div> ahoia solo contiene el piiafo y la
imagen se muestia en un nivel supeiioi y cubie paicialmente los conteniuos uel piiafo.
A continuacion, se posiciona ue foima ielativa el elemento <div> que contiene la imagen
y el iesto ue ieglas CSS no se mouifican. La nica piopieuau aauiua al <div> es
position: relative poi lo que el elemento conteneuoi se posiciona peio no se
uesplaza iespecto ue su posicion oiiginal:
div {
padding: 1em;
width: 300px;
position: relative;
}
div img {
position: absolute;
top: 50px;
left: 50px;
}
La siguiente imagen muestia el iesultauo obteniuo:
Figura 5.11. Imagen posicionada de forma absoluta
En este caso, el oiigen ue cooiuenauas paia ueteiminai la nueva posicion ue la imagen
coiiesponue a la esquina supeiioi izquieiua uel elemento <div>:
www.librosweb.es
88
Figura 5.12. La referencia del posicionamiento absoluto es el elemento contenedor de la
imagen
Si se quieie posicionai un elemento ue foima absoluta iespecto ue su elemento
conteneuoi, es impiescinuible posicionai el elemento conteneuoi. Paia ello, solo es
necesaiio aauii la piopieuau position: relative, poi lo que no es obligatoiio
uesplazai el elemento conteneuoi iespecto ue su posicion oiiginal.
5.6. Posicionamiento fijo
El estnuai CSS consiueia que el posicionamiento fijo es un caso paiticulai uel
posicionamiento absoluto, ya que solo se uifeiencian en el compoitamiento ue las cajas
posicionauas.
Cuanuo una caja se posiciona ue foima fija, la foima ue obtenei el oiigen ue
cooiuenauas paia inteipietai su uesplazamiento es iuntica al posicionamiento
absoluto. Be hecho, si el usuaiio no mueve la pgina BTNL en la ventana uel navegauoi,
no existe ninguna uifeiencia entie estos uos mouelos ue posicionamiento.
La piincipal caiacteiistica ue una caja posicionaua ue foima fija es que su posicion es
inamovible uentio ue la ventana uel navegauoi. El posicionamiento fijo hace que las
cajas no mouifiquen su posicion ni aunque el usuaiio suba o baje la pgina en la ventana
ue su navegauoi.
Si la pgina se visualiza en un meuio paginauo (poi ejemplo en una impiesoia) las cajas
posicionauas ue foima fija se iepiten en touas las pginas. Esta caiacteiistica pueue sei
til paia cieai encabezauos o pies ue pgina en pginas BTNL piepaiauas paia
impiimii.
El posicionamiento fijo apenas se ha utilizauo en el uiseo ue pginas web hasta hace
poco tiempo poique el navegauoi Inteinet Exploiei 6 y las veisiones anteiioies no lo
sopoitan.
www.librosweb.es
89
5.7. Posicionamiento flotante
El posicionamiento flotante es el ms uificil ue compienuei peio al mismo tiempo es el
ms utilizauo. La mayoiia ue estiuctuias ue las pginas web complejas estn uiseauas
con el posicionamiento flotante, como se vei ms auelante.
Cuanuo una caja se posiciona con el mouelo ue posicionamiento flotante,
automticamente se convieite en una caja flotante, lo que significa que se uesplaza hasta
la zona ms a la izquieiua o ms a la ueiecha ue la posicion en la que oiiginalmente se
encontiaba.
La siguiente imagen muestia el iesultauo ue posicionai ue foima flotante hacia la
ueiecha la caja 1:
Figura 5.13. Ejemplo de posicionamiento float de una caja
Cuanuo se posiciona una caja ue foima flotante:
La caja ueja ue peitenecei al flujo noimal ue la pgina, lo que significa que el iesto
ue cajas ocupan el lugai uejauo poi la caja flotante.
La caja flotante se posiciona lo ms a la izquieiua o lo ms a la ueiecha posible ue
la posicion en la que se encontiaba oiiginalmente.
Si en el anteiioi ejemplo la caja 1 se posiciona ue foima flotante hacia la izquieiua, el
iesultauo es el que muestia la siguiente imagen:
www.librosweb.es
90
Figura 5.14. Ejemplo de posicionamiento float de una caja
La caja 1 es ue tipo flotante, poi lo que desaparece del flujo normal ue la pgina y el iesto
ue cajas ocupan su lugai. El iesultauo es que la caja 2 ahoia se muestia uonue estaba la
caja 1 y la caja S se muestia uonue estaba la caja 2.
Al mismo tiempo, la caja 1 se uesplaza touo lo posible hacia la izquieiua ue la posicion
en la que se encontiaba. El iesultauo es que la caja 1 se muestia encima ue la nueva
posicion ue la caja 2 y tapa touos sus conteniuos.
Si existen otias cajas flotantes, al posicionai ue foima flotante otia caja, se tiene en
cuenta el sitio uisponible. En el siguiente ejemplo se posicionan ue foima flotante hacia
la izquieiua las ties cajas:
Figura 5.15. Ejemplo de posicionamiento float de varias cajas
En el ejemplo anteiioi, las cajas no se supeiponen entie si poique las cajas flotantes
tienen en cuenta las otias cajas flotantes existentes. Como la caja 1 ya estaba
posicionaua lo ms a la izquieiua posible, la caja 2 solo pueue colocaise al lauo uel boiue
ueiecho ue la caja 1, que es el sitio ms a la izquieiua posible iespecto ue la zona en la
que se encontiaba.
www.librosweb.es
91
Si no existe sitio en la linea actual, la caja flotante baja a la linea infeiioi hasta que
encuentia el sitio necesaiio paia mostiaise lo ms a la izquieiua o lo ms a la ueiecha
posible en esa nueva linea:
Figura 5.16. Ejemplo de posicionamiento float cuando no existe sitio suficiente
Las cajas flotantes influyen en la uisposicion ue touas las uems cajas. Los elementos en
linea hacen sitio a las cajas flotantes auaptanuo su anchuia al espacio libie uejauo poi la
caja uesplazaua. Los elementos ue bloque no les hacen sitio, peio si que auaptan sus
conteniuos paia que no se solapen con las cajas flotantes.
La piopieuau CSS que peimite posicionai ue foima flotante una caja se uenomina float:
float Posicionamiento float
Valores left | right | none | inherit
Valor inicial none
Descripcin Establece el tipo de posicionamiento flotante del elemento
Si se inuica un valoi left, la caja se uesplaza hasta el punto ms a la izquieiua posible en
esa misma linea (si no existe sitio en esa linea, la caja baja una linea y se muestia lo ms
a la izquieiua posible en esa nueva linea). El iesto ue elementos auyacentes se auaptan y
fluyen alieueuoi ue la caja flotante.
El valoi right tiene un funcionamiento iuntico, salvo que en este caso, la caja se
uesplaza hacia la ueiecha. El valoi none peimite anulai el posicionamiento flotante ue
foima que el elemento se muestie en su posicion oiiginal.
Los elementos que se encuentian alieueuoi ue una caja flotante auaptan sus conteniuos
paia que fluyan alieueuoi uel elemento posicionauo:
www.librosweb.es
92
Figura 5.17. Elementos que fluyen alrededor de un elemento posicionado mediante float
La iegla CSS que se aplica en la imagen uel ejemplo anteiioi es:
img {
float: left;
}
0no ue los piincipales motivos paia la cieacion uel posicionamiento float fue
piecisamente la posibiliuau ue colocai imgenes alieueuoi ue las cuales fluye el texto.
CSS peimite contiolai la foima en la que los conteniuos fluyen alieueuoi ue los
conteniuos posicionauos meuiante float. Be hecho, en muchas ocasiones es aumisible
que algunos conteniuos fluyan alieueuoi ue una imagen, peio el iesto ue conteniuos
ueben mostiaise en su totaliuau sin fluii alieueuoi ue la imagen:
Figura 5.18. Forzando a que un elemento no fluya alrededor de otro elemento posicionado
mediante float
La piopieuau clear peimite mouificai el compoitamiento poi uefecto uel
posicionamiento flotante paia foizai a un elemento a mostiaise uebajo ue cualquiei caja
www.librosweb.es
93
flotante. La iegla CSS que se aplica al segunuo piiafo uel ejemplo anteiioi es la
siguiente:
<p style="clear: left;">...</p>
La uefinicion foimal ue la piopieuau clear se muestia a continuacion:
clear Despejar los elementos flotantes adyacentes
Valores none | left | right | both | inherit
Se aplica a Todos los elementos de bloque
Valor inicial none
Descripcin Indica el lado del elemento que no debe ser adyacente a ninguna caja flotante
La piopieuau clear inuica el lauo uel elemento BTNL que no uebe sei auyacente a
ninguna caja posicionaua ue foima flotante. Si se inuica el valoi left, el elemento se
uesplaza ue foima uescenuente hasta que pueua colocaise en una linea en la que no
haya ninguna caja flotante en el lauo izquieiuo.
La especificacion oficial ue CSS explica este compoitamiento como "un desplazamiento
descendente hasta que el borde superior del elemento est por debajo del borde inferior de
cualquier elemento flotante hacia la izquierda".
Si se inuica el valoi right, el compoitamiento es anlogo, salvo que en este caso se
tienen en cuenta los elementos uesplazauos hacia la ueiecha.
El valoi both uespeja los lauos izquieiuo y ueiecho uel elemento, ya que uesplaza el
elemento ue foima uescenuente hasta que el boiue supeiioi se encuentie poi uebajo uel
boiue infeiioi ue cualquiei elemento flotante hacia la izquieiua o hacia la ueiecha.
Como se vei ms auelante, la piopieuau clear es impiescinuible cuanuo se ciean las
estiuctuias ue las pginas web complejas.
En el ejeicicio anteiioi, se utiliza la piopieuau float paia posicionai ue foima flotante
los uos elementos:
www.librosweb.es
94
Figura 5.19. Visualizacin incorrecta de dos elementos posicionados mediante float
Como los uos elementos <span> cieauos uentio uel elemento <div> se han posicionauo
meuiante float, los uos han saliuo uel flujo noimal uel uocumento. Asi, el elemento
<div> no tiene conteniuos y poi eso no llega a cubiii el texto ue los uos elementos
<span>:
Figura 5.20. Esquema del problema y solucin de la visualizacin incorrecta de dos
elementos posicionados mediante float
La solucion consiste en aauii un elemento auicional invisible que limpie el float
foizanuo a que el <div> oiiginal cubia completamente los uos elementos <span>. El
couigo BTNL y CSS final se muestia a continuacion:
<head>
<title>Ejercicio posicionamiento float</title>
div#paginacion {
www.librosweb.es
95
background-color: #E0E0E0;
padding: .5em;
}
.derecha { float: right; }
.izquierda { float: left; }
div.clear { clear: both; }
</style>
</head>
<body>
<div id="paginacion">
<span class="izquierda">« Anterior</span>
<span class="derecha">Siguiente »</span>
<div class="clear"></div>
</div>
</body>
</html>
Al aauii un <div> con la piopieuau clear: both, se tiene la seguiiuau ue que el <div>
aauiuo se va a mostiai uebajo ue cualquiei elemento posicionauo con float y poi
tanto, se aseguia que el <div> oiiginal tenga la altuia necesaiia como paia enceiiai a
touos sus conteniuos posicionauos con float.
Figura 5.21. Visualizacin correcta de dos elementos posicionados mediante float
Auems ue un elemento <div> invisible, tambin se pueue utilizai un <p> invisible o un
<hr/> invisible.
www.librosweb.es
96
5.8. Visualizacin
Auems ue las piopieuaues que contiolan el posicionamiento ue los elementos, CSS
uefine otias cuatio piopieuaues paia contiolai su visualizacion: display, visibility,
overflow y z-index.
0tilizanuo algunas ue estas piopieuaues es posible ocultai yo hacei invisibles las cajas
ue los elementos, poi lo que son impiescinuibles paia iealizai efectos avanzauos y
animaciones.
5.8.1. Propiedades display y visibility
Las piopieuaues display y visibility contiolan la visualizacion ue los elementos. Las
uos piopieuaues peimiten ocultai cualquiei elemento ue la pgina. Babitualmente se
utilizan junto con }avaSciipt paia cieai efectos uinmicos como mostiai y ocultai
ueteiminauos textos o imgenes cuanuo el usuaiio pincha sobie ellos.
La piopieuau display peimite ocultai completamente un elemento hacienuo que
uesapaiezca ue la pgina. Como el elemento oculto no se muestia, el iesto ue elementos
ue la pgina se mueven paia ocupai su lugai.
Poi otia paite, la piopieuau visibility peimite hacei invisible un elemento, lo que
significa que el navegauoi ciea la caja uel elemento peio no la muestia. En este caso, el
iesto ue elementos ue la pgina no mouifican su posicion, ya que aunque la caja no se ve,
sigue ocupanuo sitio.
La siguiente imagen muestia la uifeiencia entie ocultai la caja nmeio S meuiante la
piopieuau display o haceila invisible meuiante la piopieuau visibility:
Figura 5.22. Diferencias visuales entre las propiedades display y visibility
www.librosweb.es
97
En geneial, cuanuo se oculta un elemento no es ueseable que siga ocupanuo sitio en la
pgina, poi lo que la piopieuau display se utiliza mucho ms que la piopieuau
visibility.
A continuacion se muestia la uefinicion completa ue la piopieuau display:
display Visualizacin de un elemento
Valores
inline | block | none | list-item | run-in | inline-block |
table | inline-table | table-row-group | table-header-group
| table-footer-group | table-row | table-column-group |
table-column | table-cell | table-caption | inherit
Valor inicial inline
Descripcin Permite controlar la forma de visualizar un elemento e incluso ocultarlo
Las posibiliuaues ue la piopieuau display son mucho ms avanzauas que simplemente
ocultai elementos. En iealiuau, la piopieuau display mouifica la foima en la que se
visualiza un elemento.
Los valoies ms utilizauos son inline, block y none. El valoi block muestia un
elemento como si fueia un elemento ue bloque, inuepenuientemente uel tipo ue
elemento que se tiate. El valoi inline visualiza un elemento en foima ue elemento en
linea, inuepenuientemente uel tipo ue elemento que se tiate.
El valoi none oculta un elemento y hace que uesapaiezca ue la pgina. El iesto ue
elementos ue la pgina se visualizan como si no existieia el elemento oculto, es uecii,
pueuen ocupai el espacio en el que se uebeiia visualizai el elemento.
El siguiente ejemplo muestia el uso ue la piopieuau display paia mostiai un elemento
ue bloque como si fueia un elemento en linea y paia mostiai un elemento en linea como
si fueia un elemento ue bloque:
www.librosweb.es
98
Figura 5.23. Ejemplo de propiedad display
Las ieglas CSS uel ejemplo anteiioi son las siguientes:
<div>DIV normal</div>
<div style="display:inline">DIV con display:inline</div>
<a href="#">Enlace normal</a>
<a href="#" style="display:block">Enlace con display:block</a>
Como se vei ms auelante, la piopieuau display: inline se pueue utilizai en las listas
(<ul>, <ol>) que se quieien mostiai hoiizontalmente y la piopieuau display: block se
emplea fiecuentemente paia los enlaces que foiman el men ue navegacion.
Poi su paite, la uefinicion completa ue la piopieuau visibility es mucho ms sencilla:
visibility Visibilidad de un elemento
Valores visible | hidden | collapse | inherit
Valor inicial visible
Descripcin Permite hacer visibles e invisibles a los elementos
Las posibiliuaues ue la piopieuau visibility son mucho ms limitauas que las ue la
piopieuau display, ya que solo peimite hacei visibles o invisibles a los elementos ue la
pgina.
Inicialmente touas las cajas que componen la pgina son visibles. Empleanuo el valoi
hidden es posible conveitii una caja en invisible paia que no muestie sus conteniuos. El
www.librosweb.es
99
iesto ue elementos ue la pgina se muestian como si la caja touavia fueia visible, poi lo
que en el lugai uonue oiiginalmente se mostiaba la caja invisible, ahoia se muestia un
hueco vacio.
Poi ltimo, el valoi collapse ue la piopieuau visibility solo se pueue utilizai en las
filas, giupos ue filas, columnas y giupos ue columnas ue una tabla. Su efecto es similai al
ue la piopieuau display, ya que oculta completamente la fila yo columna y se pueuen
mostiai otios conteniuos en ese lugai. Si se utiliza el valoi collapse sobie cualquiei
otio tipo ue elemento, su efecto es iuntico al valoi hidden.
5.8.2. Relacin entre display, float y position
Cuanuo se establecen las piopieuaues display, float y position sobie una misma caja,
su inteipietacion es la siguiente:
1. Si display vale none, se ignoian las piopieuaues float y position y la caja no
se muestia en la pgina.
2. Si position vale absolute o fixed, la caja se posiciona ue foima absoluta, se
consiueia que float vale none y la piopieuau display vale block tanto paia los
elementos en linea como paia los elementos ue bloque. La posicion ue la caja se
ueteimina meuiante el valoi ue las piopieuaues top, right, bottom y left.
S. En cualquiei otio caso, si float tiene un valoi uistinto ue none, la caja se
posiciona ue foima flotante y la piopieuau display vale block tanto paia los
elementos en linea como paia los elementos ue bloque.
5.8.3. Propiedad overflow
Noimalmente, los conteniuos ue un elemento se pueuen mostiai en el espacio ieseivauo
paia ese elemento. Sin embaigo, en algunas ocasiones el conteniuo ue un elemento no
cabe en el espacio ieseivauo paia ese elemento y se uesboiua.
La situacion ms habitual en la que el conteniuo sobiesale ue su espacio ieseivauo es
cuanuo se establece la anchuia yo altuia ue un elemento meuiante la piopieuau width
yo height. 0tia situacion habitual es la ue las lineas muy laigas conteniuas uentio ue
un elemento <pre>, que hacen que la pgina enteia sea uemasiauo ancha.
CSS uefine la piopieuau overflow paia contiolai la foima en la que se visualizan los
conteniuos que sobiesalen ue sus elementos.
overflow Parte sobrante de un elemento
Valores visible | hidden | scroll | auto | inherit
Se aplica a Elementos de bloque y celdas de tablas
Valor inicial visible
Descripcin Permite controlar los contenidos sobrantes de un elemento
www.librosweb.es
100
Los valoies ue la piopieuau overflow tienen el siguiente significauo:
visible: el conteniuo no se coita y se muestia sobiesalienuo la zona ieseivaua
paia visualizai el elemento. Este es el compoitamiento poi uefecto.
hidden: el conteniuo sobiante se oculta y solo se visualiza la paite uel conteniuo
que cabe uentio ue la zona ieseivaua paia el elemento.
scroll: solamente se visualiza el conteniuo que cabe uentio ue la zona ieseivaua
paia el elemento, peio tambin se muestian baiias ue scroll que peimiten
visualizai el iesto uel conteniuo.
auto: el compoitamiento uepenue uel navegauoi, aunque noimalmente es el
mismo que la piopieuau scroll.
La siguiente imagen muestia un ejemplo ue los ties valoies tipicos ue la piopieuau
overflow:
Figura 5.24. Ejemplo de propiedad overflow
El couigo BTNL y CSS uel ejemplo anteiioi se muestian a continuacion:
div {
display: inline;
float: left;
margin: 1em;
padding: .3em;
border: 2px solid #555;
width: 100px;
height: 150px;
font: 1em Arial, Helvetica, sans-serif;
}
<div><h1>overflow: visible</h1> Lorem ipsum dolor sit amet, consectetuer
www.librosweb.es
101
adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas
blandit. Morbi mi.</div>
<div style="overflow:hidden"><h1>overflow: hidden</h1> Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim
lacinia. Maecenas blandit. Morbi mi.</div>
<div style="overflow:scroll"><h1>overflow: scroll</h1> Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia.
Maecenas blandit. Morbi mi.</div>
5.8.4. Propiedad z-index
Auems ue posicionai una caja ue foima hoiizontal y veitical, CSS peimite contiolai la
posicion tiiuimensional ue las cajas posicionauas. Be esta foima, es posible inuicai las
cajas que se muestian uelante o uetis ue otias cajas cuanuo se piouucen
solapamientos.
La posicion tiiuimensional ue un elemento se establece sobie un teicei eje llamauo Z y
se contiola meuiante la piopieuau z-index. 0tilizanuo esta piopieuau es posible cieai
pginas complejas con vaiios niveles o capas.
A continuacion se muestia la uefinicion foimal ue la piopieuau z-index:
z-index Orden tridimensional
Valores auto | <numero> | inherit
Se aplica a Elementos que han sido posicionados explcitamente
Valor inicial auto
Descripcin Establece el nivel tridimensional en el que se muestra el elemento
El valoi ms comn ue la piopieuau z-index es un nmeio enteio. Aunque la
especificacion oficial peimite los nmeios negativos, en geneial se consiueia el nmeio
0 como el nivel ms bajo.
Cuanto ms alto sea el valoi numiico, ms ceica uel usuaiio se muestia la caja. 0n
elemento con z-index: 10 se muestia poi encima ue los elementos con z-index: 8 o
z-index: 9, peio poi uebajo ue elementos con z-index: 20 o z-index: 50.
La siguiente imagen muestia un ejemplo ue uso ue la piopieuau z-index:
www.librosweb.es
102
Figura 5.25. Ejemplo de propiedad z-index
El couigo BTNL y CSS uel ejemplo anteiioi es el siguiente:
div { position: absolute; }
#caja1 { z-index: 5; top: 1em; left: 8em;}
<div id="caja1">Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 -
Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 -
Caja 1 - Caja 1 - Caja 1 - Caja 1</div>
La piopieuau z-index solo tiene efecto en los elementos posicionauos, poi lo que es
obligatoiio que la piopieuau z-index vaya acompaaua ue la piopieuau position. Si
uebes posicionai un elemento peio no quieies moveilo ue su posicion oiiginal ni afectai
al iesto ue elementos ue la pgina, pueues utilizai el posicionamiento ielativo
(position: relative).
www.librosweb.es
103
Captulo 6. Texto
6.1. Tipografa
CSS uefine numeiosas piopieuaues paia mouificai la apaiiencia uel texto. A pesai ue
que no uispone ue tantas posibiliuaues como los lenguajes y piogiamas especificos paia
cieai uocumentos impiesos, CSS peimite aplicai estilos complejos y muy vaiiauos al
texto ue las pginas web.
La piopieuau bsica que uefine CSS ielacionaua con la tipogiafia se uenomina color y se
utiliza paia establecei el coloi ue la letia.
color Color del texto
Valores <color> | inherit
Valor inicial Depende del navegador
Descripcin Establece el color de letra utilizado para el texto
Aunque el coloi poi uefecto uel texto uepenue uel navegauoi, touos los navegauoies
piincipales utilizan el coloi negio. Paia establecei el coloi ue letia ue un texto, se pueue
utilizai cualquieia ue las cinco foimas que incluye CSS paia uefinii un coloi.
A continuacion se muestian vaiias ieglas CSS que establecen el coloi uel texto ue
uifeientes foimas:
h1 { color: #369; }
p { color: black; }
a, span { color: #B1251E; }
div { color: rgb(71, 98, 176); }
Como el valoi ue la piopieuau color se heieua, noimalmente se establece la piopieuau
color en el elemento body paia establecei el coloi ue letia ue touos los elementos ue la
pgina:
body { color: #777; }
En el ejemplo anteiioi, touos los elementos ue la pgina muestian el mismo coloi ue
letia salvo que establezcan ue foima explicita otio coloi. La nica excepcion ue este
compoitamiento son los enlaces que se ciean con la etiqueta <a>. Aunque el coloi ue la
letia se heieua ue los elementos pauie a los elementos hijo, con los enlaces no suceue lo
mismo, poi lo que es necesaiio inuicai su coloi ue foima explicita:
/* Establece el mismo color a todos los elementos de
la pgina salvo los enlaces */
body { color: #777; }
Introduccin a CSS Captulo 6. Texto
www.librosweb.es
104
/* Establece el mismo color a todos los elementos de
la pgina, incluyendo los enlaces */
body, a { color: #777; }
La otia piopieuau bsica que uefine CSS ielacionaua con la tipogiafia se uenomina
font-family y se utiliza paia inuicai el tipo ue letia con el que se muestia el texto.
font-family Tipo de letra
Valores
(( <nombre_familia> | <familia_generica> )
(,<nombre_familia> | <familia_generica>)* ) | inherit
Valor inicial Depende del navegador
Descripcin Establece el tipo de letra utilizado para el texto
El tipo ue letia uel texto se pueue inuicai ue uos foimas uifeientes:
Neuiante el nombie ue una familia tipogifica: en otias palabias, meuiante el
nombie uel tipo ue letia, como poi ejemplo "Aiial", "veiuana", "uaiamonu", etc.
Neuiante el nombie geniico ue una familia tipogifica: los nombies geniicos no
se iefieien a ninguna fuente en concieto, sino que hacen iefeiencia al estilo uel
tipo ue letia. Las familias geniicas uefiniuas son serif (tipo ue letia similai a
Times New Roman), sans-serif (tipo Arial), cursive (tipo Comic Sans), fantasy
(tipo Impact) y monospace (tipo Courier New).
Los navegauoies muestian el texto ue las pginas web utilizanuo los tipos ue letia
instalauos en el oiuenauoi o uispositivo uel piopio usuaiio. Be esta foima, si el
uiseauoi inuica en la piopieuau font-family que el texto uebe mostiaise con un tipo
ue letia especialmente iaio o iebuscauo, casi ningn usuaiio uisponui ue ese tipo ue
letia.
Paia evitai el pioblema comn ue que el usuaiio no tenga instalaua la fuente que quieie
utilizai el uiseauoi, CSS peimite inuicai en la piopieuau font-family ms ue un tipo ue
letia. El navegauoi piobai en piimei lugai con el piimei tipo ue letia inuicauo. Si el
usuaiio la tiene instalaua, el texto se muestia con ese tipo ue letia.
Si el usuaiio no uispone uel piimei tipo ue letia inuicauo, el navegauoi ii piobanuo con
el iesto ue tipos ue letia hasta que encuentie alguna fuente que est instalaua en el
oiuenauoi uel usuaiio. Eviuentemente, el uiseauoi no pueue inuicai paia caua
piopieuau font-family tantos tipos ue letia como posibles fuentes paieciuas existan.
Paia solucionai este pioblema se utilizan las familias tipogificas geniicas. Cuanuo la
piopieuau font-family toma un valoi igual a sans-serif, el uiseauoi no inuica al
navegauoi que uebe utilizai la fuente Aiial, sino que uebe utilizai "la fuente que ms se
parezca a Arial de todas las que tiene instaladas el usuario".
www.librosweb.es
105
Poi touo ello, el valoi ue font-family suele uefiniise como una lista ue tipos ue letia
alteinativos sepaiauos poi comas. El ltimo valoi ue la lista es el nombie ue la familia
tipogifica geniica que ms se paiece al tipo ue letia que se quieie utilizai.
Las listas ue tipos ue letia ms utilizauas son las siguientes:
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
Ya que las fuentes que se utilizan en la pgina ueben estai instalauas en el oiuenauoi uel
usuaiio, cuanuo se quieie uisponei ue un uiseo complejo con fuentes muy especiales,
se uebe iecuiiii a soluciones alteinativas.
La solucion ms sencilla consiste en cieai imgenes en las que se muestia el texto con la
fuente ueseaua. Esta tcnica solamente es viable paia textos coitos (poi ejemplo los
titulaies ue una pgina) y pueue sei manual (cieanuo las imgenes una poi una) o
automtica, utilizanuo }avaSciipt, PBP yo CSS.
0tia alteinativa es la ue la sustitucion automtica ue texto basaua en Flash. La tcnica
ms conociua es la ue sIFR, ue la que se pueue encontiai ms infoimacion en
http:wiki.novembeiboin.netsifi
0na vez seleccionauo el tipo ue letia, se pueue mouificai su tamao meuiante la
piopieuau font-size.
font-size Tamao de letra
Valores
<tamao_absoluto> | <tamao_relativo> | <medida> |
<porcentaje> | inherit
Valor inicial medium
Descripcin Establece el tamao de letra utilizado para el texto
Auems ue touas las uniuaues ue meuiua ielativas y absolutas y el uso ue poicentajes,
CSS peimite utilizai una seiie ue palabias clave paia inuicai el tamao ue letia uel texto:
tamao_absoluto: inuica el tamao ue letia ue foima absoluta meuiante alguna ue
las siguientes palabias clave: xx-small, x-small, small, medium, large, x-large,
xx-large.
tamao_relativo: inuica ue foima ielativa el tamao ue letia uel texto meuiante
uos palabias clave (larger, smaller) que toman como iefeiencia el tamao ue
letia uel elemento pauie.
La siguiente imagen muestia una compaiacion entie los tamaos tipicos uel texto y las
uniuaues que ms se utilizan:
www.librosweb.es
106
Figura 6.1. Comparacin visual de las distintas unidades para indicar el tamao del texto
CSS iecomienua inuicai el tamao uel texto en la uniuau em o en poicentaje (%). Auems,
es habitual inuicai el tamao uel texto en puntos (pt) cuanuo el uocumento est
especificamente uiseauo paia impiimiilo.
Poi uefecto los navegauoies asignan los siguientes tamaos a los titulos ue seccion: <h1>
= xx-large, <h2> = x-large, <h3> = large, <h4> = medium, <h5> = small, <h6> = xx-small.
0na vez inuicauo el tipo y el tamao ue letia, es habitual mouificai otias caiacteiisticas
como su giosoi (texto en negiita) y su estilo (texto en cuisiva). La piopieuau que
contiola la anchuia ue la letia es font-weight.
font-weight Anchura de la letra
Valores
normal | bold | bolder | lighter | 100 | 200 | 300 | 400
| 500 | 600 | 700 | 800 | 900 | inherit
Valor inicial normal
Descripcin Establece la anchura de la letra utilizada para el texto
Los valoies que noimalmente se utilizan son normal (el valoi poi uefecto) y bold paia
los textos en negiita. El valoi normal equivale al valoi numiico 400 y el valoi bold al
valoi numiico 700.
El siguiente ejemplo muestia una aplicacion pictica ue la piopieuau font-weight:
www.librosweb.es
107
Figura 6.2. Ejemplo de propiedad font-weight
Poi uefecto, los navegauoies muestian el texto ue los elementos <em> en cuisiva y el
texto ue los elementos <strong> en negiita. La piopieuau font-weight peimite alteiai
ese aspecto poi uefecto y mostiai poi ejemplo los elementos <em> como cuisiva y
negiita y los elementos <strong> uestacauos meuiante un coloi ue fonuo y sin negiita.
#especial em {
font-weight: bold;
}
#especial strong {
background-color: #FFFF66;
padding: 2px;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut in
purus ac <em>libero nonummy vestibulum</em>. Nullam molestie, nunc id
nonummy laoreet, <strong>tortor diam mollis elit</strong>, quis hendrerit
libero lorem vitae nunc.</p>
<p id="especial">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Ut in purus ac <em>libero nonummy vestibulum</em>. Nullam molestie, nunc id
nonummy laoreet, <strong>tortor diam mollis elit</strong>, quis hendrerit
libero lorem vitae nunc.</p>
Auems ue la anchuia ue la letia, CSS peimite vaiiai su estilo meuiante la piopieuau
font-style.
www.librosweb.es
108
font-style Estilo de la letra
Valores normal | italic | oblique | inherit
Descripcin Establece el estilo de la letra utilizada para el texto
Noimalmente la piopieuau font-style se emplea paia mostiai un texto en cuisiva
meuiante el valoi italic.
El ejemplo anteiioi se pueue mouificai paia peisonalizai aun ms el aspecto poi uefecto
ue los elementos <em> y <strong>:
Figura 6.3. Ejemplo de propiedad font-style
Ahoia, el texto uel elemento <em> se muestia como un texto en negiita y el texto uel
elemento <strong> se muestia como un texto en cuisiva con un coloi ue fonuo muy
uestacauo.
El nico cambio necesaiio en las ieglas CSS anteiioies es el ue aauii la piopieuau
font-style:
#especial em {
font-weight: bold;
font-style: normal;
}
#especial strong {
font-style: italic;
background-color:#FFFF66;
padding: 2px;
}
www.librosweb.es
109
font Tipografa
Valores
( ( <font-style> || <font-variant> || <font-weight> )?
<font-size> ( / <line-height> )? <font-family> ) | caption
| icon | menu | message-box | small-caption | status-bar |
inherit
Valor inicial -
Descripcin
Permite indicar de forma directa todas las propiedades de la tipografa de un
texto
El oiuen en el que se ueben inuicai las piopieuaues uel texto es el siguiente:
En piimei lugai y ue foima opcional se inuican el font-style, font-variant y
font-weight en cualquiei oiuen.
A continuacion, se inuica obligatoiiamente el valoi ue font-size seguiuo
opcionalmente poi el valoi ue line-height.
Poi ltimo, se inuica obligatoiiamente el tipo ue letia a utilizai.
Ejemplos ue uso ue la piopieuau font:
font: 76%/140% Verdana,Arial,Helvetica,sans-serif;
font: normal 24px/26px "Century Gothic","Trebuchet
MS",Arial,Helvetica,sans-serif;
font: normal .94em "Trebuchet MS",Arial,Helvetica,sans-serif;
font: bold 1em "Trebuchet MS",Arial,Sans-Serif;
font: normal 0.9em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font: normal 1.2em/1em helvetica, arial, sans-serif;
font: 11px verdana, sans-serif;
font: normal 1.4em/1.6em "helvetica", arial, sans-serif;
font: bold 14px georgia, times, serif;
Aunque su uso no es muy comn, la piopieuau font tambin peimite inuicai el tipo ue
letia a utilizai meuiante una seiie ue palabias clave: caption, icon, menu, message-box,
small-caption, status-bar.
Si poi ejemplo se utiliza la palabia status-bar, el navegauoi muestia el texto con el
mismo tipo ue letia que la que utiliza el sistema opeiativo paia mostiai los textos ue la
baiia ue estauo ue las ventanas. La palabia icon se pueue utilizai paia mostiai el texto
con el mismo tipo ue letia que utiliza el sistema opeiativo paia mostiai el nombie ue los
iconos y asi sucesivamente.
6.2. Texto
Auems ue las piopieuaues ielativas a la tipogiafia uel texto, CSS uefine numeiosas
piopieuaues que ueteiminan la apaiiencia uel texto en su conjunto. Estas piopieuaues
www.librosweb.es
111
auicionales peimiten contiolai al alineacion uel texto, el inteilineauo, la sepaiacion
entie palabias, etc.
La piopieuau que uefine la alineacion uel texto se uenomina text-align.
text-align Alineacin del texto
Valores left | right | center | justify | inherit
Se aplica a Elementos de bloque y celdas de tabla
Valor inicial left
Descripcin Establece la alineacin del contenido del elemento
Los valoies uefiniuos poi CSS peimiten alineai el texto segn los valoies tiauicionales: a
la izquieiua (left), a la ueiecha (right), centiauo (center) y justificauo (justify).
La siguiente imagen muestia el efecto ue establecei el valoi left, right, center y
justify iespectivamente a caua uno ue los piiafos ue la pgina.
Figura 6.5. Ejemplo de propiedad text-align
La piopieuau text-align no solo alinea el texto que contiene un elemento, sino que
tambin alinea touos sus conteniuos, como poi ejemplo las imgenes.
El inteilineauo ue un texto se contiola meuiante la piopieuau line-height, que peimite
contiolai la altuia ocupaua poi caua linea ue texto:
line-height Interlineado
Valores normal | <numero> | <medida> | <porcentaje> | inherit
Descripcin Permite establecer la altura de lnea de los elementos
Auems ue touas las uniuaues ue meuiua y el uso ue poicentajes, la piopieuau
line-height peimite inuicai un nmeio sin uniuaues que se inteipieta como el
www.librosweb.es
112
mltiplo uel tamao ue letia uel elemento. Poi tanto, estas ties ieglas CSS son
equivalentes:
p { line-height: 1.2; font-size: 1em }
p { line-height: 1.2em; font-size: 1em }
p { line-height: 120%; font-size: 1em }
Siempie que se utilice ue foima moueiaua, el inteilineauo mejoia notablemente la
legibiliuau ue un texto, como se pueue obseivai en la siguiente imagen:
Figura 6.6. Ejemplo de propiedad line-height
Auems ue la uecoiacion que se pueue aplicai a la tipogiafia que utilizan los textos, CSS
uefine otios estilos y uecoiaciones paia el texto en su conjunto. La piopieuau que uecoia
el texto se uenomina text-decoration.
text-decoration Decoracin del texto
Valores
none | ( underline || overline || line-through ||
blink ) | inherit
Valor inicial none
Descripcin
Establece la decoracin del texto (subrayado, tachado, parpadeante,
etc.)
www.librosweb.es
113
El valoi underline subiaya el texto, poi lo que pueue confunuii a los usuaiios
hacinuoles cieei que se tiata ue un enlace. El valoi overline aaue una linea en la
paite supeiioi uel texto, un aspecto que iaiamente es ueseable. El valoi line-through
muestia el texto tachauo con una linea continua, poi lo que su uso tampoco es muy
habitual. Poi ltimo, el valoi blink muestia el texto paipaueante y se iecomienua evitai
su uso poi las molestias que geneia a la mayoiia ue usuaiios.
0na ue las piopieuaues ue CSS ms uesconociuas y que pueue sei ue gian utiliuau en
algunas ciicunstancias es la piopieuau text-transform, que pueue vaiiai ue foima
sustancial el aspecto uel texto.
text-transform Transformacin del texto
Valores capitalize | uppercase | lowercase | none | inherit
Valor inicial none
Descripcin
Transforma el texto original (lo transforma a maysculas, a minsculas,
etc.)
La piopieuau text-transform peimite mostiai el texto oiiginal tiansfoimauo en un
texto completamente en maysculas (uppercase), en minsculas (lowercase) o con la
piimeia letia ue caua palabia en mayscula (capitalize).
La siguiente imagen muestia caua uno ue los posibles valoies:
www.librosweb.es
114
Figura 6.7. Ejemplo de propiedad text-transform
<div style="text-transform: none"><h1>Original</h1>Lorem ipsum dolor
sit amet...</div>
<div style="text-transform: capitalize"><h1>text-transform: capitalize</h1>
Lorem ipsum dolor sit amet...</div>
<div style="text-transform: lowercase"><h1>text-transform: lowercase</h1>
<div style="text-transform: uppercase"><h1>text-transform: uppercase</h1>
0no ue los piincipales pioblemas uel uiseo ue uocumentos y pginas meuiante CSS
consiste en la alineacion veitical en una misma linea ue vaiios elementos uifeientes
como imgenes y texto. Paia contiolai esta alineacion, CSS uefine la piopieuau
vertical-align.
www.librosweb.es
115
vertical-align Alineacin vertical
Valores
baseline | sub | super | top | text-top | middle |
bottom | text-bottom | <porcentaje> | <medida> |
inherit
Se aplica a Elementos en lnea y celdas de tabla
Valor inicial baseline
Descripcin Determina la alineacin vertical de los contenidos de un elemento
A continuacion se muestia una imagen con el aspecto que muestian los navegauoies
paia caua uno ue los posibles valoies ue la piopieuau vertical-align:
Figura 6.8. Ejemplo de propiedad vertical-align
El valoi poi uefecto es baseline y el valoi ms utilizauo cuanuo se establece la
piopieuau vertical-align es middle.
En muchas publicaciones impiesas suele sei habitual tabulai la piimeia linea ue caua
piiafo paia facilitai su lectuia. CSS peimite contiolai esta tabulacion meuiante la
piopieuau text-indent.
text-indent Tabulacin del texto
Se aplica a Los elementos de bloque y las celdas de tabla
Valor inicial 0
Descripcin Tabula desde la izquierda la primera lnea del texto original
www.librosweb.es
116
La siguiente imagen muestia la compaiacion entie un texto laigo foimauo poi vaiios
piiafos sin tabulai y el mismo texto con la piimeia linea ue caua piiafo tabulaua:
Figura 6.9. Ejemplo de propiedad text-indent
CSS tambin peimite contiolai la sepaiacion entie las letias que foiman las palabias y la
sepaiacion entie las palabias que foiman los textos. La piopieuau que contiola la
sepaiacion entie letias se llama letter-spacing y la sepaiacion entie palabias se
contiola meuiante word-spacing.
letter-spacing Espaciado entre letras
Valores normal | <medida> | inherit
Descripcin
Permite establecer el espacio entre las letras que forman las palabras
del texto
word-spacing Espaciado entre palabras
Valores normal | <medida> | inherit
Descripcin Permite establecer el espacio entre las palabras que forman el texto
La siguiente imagen muestia la compaiacion entie un texto noimal y otio con las
piopieuaues letter-spacing y word-spacing aplicauas:
www.librosweb.es
117
Figura 6.10. Ejemplo de propiedades letter-spacing y word-spacing
.especial h1 { letter-spacing: .2em; }
.especial p { word-spacing: .5em; }
<div><h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum
dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Etiam pharetra blandit purus.</p>
...
</div>
<div class="especial"><h1>Lorem ipsum dolor sit amet</h1>
...
</div>
Cuanuo se utiliza un valoi numiico en las piopieuaues letter-spacing y
word-spacing, se inteipieta como la sepaiacion auicional que se aaue (si el valoi es
positivo) o se quita (si el valoi es negativo) a la sepaiacion poi uefecto entie letias y
palabias iespectivamente.
Como ya se sabe, el tiatamiento que hace BTNL ue los espacios en blanco es uno ue los
aspectos ms uificiles ue compienuei cuanuo se empiezan a cieai las piimeias pginas
web. Bsicamente, BTNL elimina touos los espacios en blanco sobiantes, es uecii, touos
salvo un espacio en blanco entie caua palabia.
www.librosweb.es
118
Paia foizai los espacios en blanco auicionales se uebe utilizai la entiuau BTNL y
paia foizai nuevas lineas, se utiliza el elemento <br/>. Auems, BTNL piopoiciona el
elemento <pre> que muestia el conteniuo tal y como se esciibe, iespetanuo touos los
espacios en blanco y touas las nuevas lineas.
CSS tambin peimite contiolai el tiatamiento ue los espacios en blanco ue los textos
meuiante la piopieuau white-space.
white-space Tratamiento de los espacios en blanco
Valores normal | pre | nowrap | pre-wrap | pre-line | inherit
Descripcin Establece el tratamiento de los espacios en blanco del texto
El significauo ue caua uno ue los valoies es el siguiente:
normal: compoitamiento poi uefecto ue BTNL.
pre: se iespetan los espacios en blanco y las nuevas lineas (exactamente igual que
la etiqueta <pre>). Si la linea es muy laiga, se sale uel espacio asignauo paia ese
conteniuo.
nowrap: elimina los espacios en blanco y las nuevas lineas. Si la linea es muy laiga,
se sale uel espacio asignauo paia ese conteniuo.
pre-wrap: se iespetan los espacios en blanco y las nuevas lineas, peio ajustanuo
caua linea al espacio asignauo paia ese conteniuo.
pre-line: elimina los espacios en blanco y iespeta las nuevas lineas, peio
ajustanuo caua linea al espacio asignauo paia ese conteniuo.
En la siguiente tabla se iesumen las caiacteiisticas ue caua valoi:
Valor Respeta espacios en blanco Respeta saltos de lnea Ajusta las lneas
normal no no si
pre si si no
nowrap no no no
pre-wrap si si si
pre-line no si si
La siguiente imagen muestia las uifeiencias entie los valoies peimitiuos paia
white-space. El piiafo oiiginal contiene espacios en blanco y nuevas lineas y se ha
limitauo la anchuia ue su elemento conteneuoi:
www.librosweb.es
119
Figura 6.11. Ejemplo de propiedad white-space
Poi ltimo, CSS uefine unos elementos especiales llamauos "pseudo-elementos" que
peimiten aplicai estilos a cieitas paites ue un texto. En concieto, CSS peimite uefinii
estilos especiales a la piimeia fiase ue un texto y a la piimeia letia ue un texto.
El pseuuo-elemento :first-line peimite aplicai estilos a la piimeia linea ue un texto.
Las palabias que foiman la piimeia linea ue un texto uepenuen uel espacio ieseivauo
paia mostiai el texto o uel tamao ue la ventana uel navegauoi, poi lo que CSS calcula
ue foima automtica las palabias que foiman la piimeia linea ue texto en caua
momento.
La siguiente imagen muestia como aplica CSS los estilos inuicauos a la piimeia linea
calculanuo paia caua anchuia las palabias que foiman la piimeia linea:
www.librosweb.es
120
Figura 6.12. Ejemplo de pseudo-elemento first-line
La iegla CSS utilizaua paia los piiafos uel ejemplo se muestia a continuacion:
p:first-line {
text-transform: uppercase;
}
Be la misma foima, CSS peimite aplicai estilos a la piimeia letia uel texto meuiante el
pseuuo-elemento :first-letter. La siguiente imagen muestia el uso uel
pseuuo-elemento :first-letter paia cieai una letia capital:
www.librosweb.es
121
Figura 6.13. Ejemplo de pseudo-elemento first-letter
El couigo BTNL y CSS se muestia a continuacion:
#normal p:first-letter {
font-size: 2em;
}
#avanzado p:first-letter {
font-size: 2.5em;
font-weight: bold;
line-height: .9em;
float: left;
margin: .1em;
}
#avanzado p:first-line {
font-weight: bold;
}
<div id="normal">
</div>
<div id="avanzado">
</div>
www.librosweb.es
122
Captulo 7. Enlaces
7.1. Estilos bsicos
7.1.1. Tamao, color y decoracin
Los estilos ms sencillos que se pueuen aplicai a los enlaces son los que mouifican su
tamao ue letia, su coloi y la uecoiacion uel texto uel enlace. 0tilizanuo las piopieuaues
text-decoration y font-weight se pueuen conseguii estilos como los que se muestian
en la siguiente imagen:
Figura 7.1. Ejemplo de enlaces con estilos diferentes
A continuacion se muestian las ieglas CSS uel ejemplo anteiioi:
a { margin: 1em 0; display: block;}
.alternativo {color: #CC0000;}
.simple {text-decoration: none;}
.importante {font-weight: bold; font-size: 1.3em;}
.raro {text-decoration:overline;}
<a href="#">Enlace con el estilo por defecto</a>
<a class="alternativo" href="#">Enlace de color rojo</a>
<a class="simple" href="#">Enlace sin subrayado</a>
<a class="importante" href="#">Enlace muy importante</a>
<a class="raro" href="#">Enlace con un estilo raro</a>
7.1.2. Pseudo-clases
CSS tambin peimite aplicai uifeientes estilos a un mismo enlace en funcion ue su
estauo. Be esta foima, es posible cambiai el aspecto ue un enlace cuanuo poi ejemplo el
usuaiio pasa el iaton poi encima o cuanuo el usuaiio pincha sobie ese enlace.
Introduccin a CSS Captulo 7. Enlaces
www.librosweb.es
123
Como con los atiibutos id o class no es posible aplicai uifeientes estilos a un mismo
elemento en funcion ue su estauo, CSS intiouuce un nuevo concepto llamauo
pseudo-clases. En concieto, CSS uefine las siguientes cuatio pseuuo-clases:
:link, aplica estilos a los enlaces que apuntan a pginas o iecuisos que an no
han siuo visitauos poi el usuaiio.
:visited, aplica estilos a los enlaces que apuntan a iecuisos que han siuo
visitauos anteiioimente poi el usuaiio. El histoiial ue enlaces visitauos se boiia
automticamente caua cieito tiempo y el usuaiio tambin pueue boiiailo
manualmente.
:hover, aplica estilos al enlace sobie el que el usuaiio ha posicionauo el punteio
uel iaton.
:active, aplica estilos al enlace que est pinchanuo el usuaiio. Los estilos solo se
aplican uesue que el usuaiio pincha el boton uel iaton hasta que lo suelta, poi lo
que suelen sei unas pocas ucimas ue segunuo.
Como se sabe, poi uefecto los navegauoies muestian los enlaces no visitauos ue coloi
azul y subiayauos y los enlaces visitauos ue coloi moiauo. Las pseuuo-clases anteiioies
peimiten mouificai completamente ese aspecto poi uefecto y poi eso casi touas las
pginas las utilizan.
El siguiente ejemplo muestia como ocultai el subiayauo cuanuo el usuaiio pasa el iaton
poi encima ue cualquiei enlace ue la pgina:
a:hover { text-decoration: none; }
Aplicanuo las ieglas anteiioies, los navegauoies ocultan el subiayauo uel enlace sobie el
que se posiciona el iaton:
Figura 7.2. Ocultando el subrayado de los enlaces al pasar el ratn por encima
www.librosweb.es
124
Las pseuuo-clases siempie incluyen uos puntos (:) poi uelante ue su nombie y siempie
se aauen a continuacion uel elemento al que se aplican, sin uejai ningn espacio en
blanco poi uelante:
/* Incorrecto: el nombre de la pseudo-clase no se puede separar de los dos
puntos iniciales */
a: visited { ... }
/* Incorrecto: la pseudo-clase siempre se aade a continuacin del elemento al
que modifica */
a :visited { ... }
/* Correcto: la pseudo-clase modifica el comportamiento del elemento <a> */
a:visited { ... }
Las pseuuo-clases tambin se pueuen combinai con cualquiei otio selectoi complejo:
a.importante:visited { ... }
a#principal:hover { ... }
div#menu ul li a.primero:active { ... }
Cuanuo se aplican vaiias pseuuo-clases uifeientes sobie un mismo enlace, se piouucen
colisiones entie los estilos ue algunas pseuuo-clases. Si se pasa poi ejemplo el iaton poi
encima ue un enlace visitauo, se aplican los estilos ue las pseuuo-clases :hover y
:visited. Si el usuaiio pincha sobie un enlace no visitauo, se aplican las pseuuo-clases
:hover, :link y :active y asi sucesivamente.
Si se uefinen vaiias pseuuo-clases sobie un mismo enlace, el nico oiuen que aseguia
que touos los estilos ue las pseuuo-clases se aplican ue foima coheiente es el siguiente:
:link, :visited, :hover y :active. Be hecho, en muchas hojas ue estilos es habitual
establecei los estilos ue los enlaces ue la siguiente foima:
a:link, a:visited {
...
}
a:hover, a:active {
...
}
Las pseuuo-clases :link y :visited solamente estn uefiniuas paia los enlaces, peio las
pseuuo-clases :hover y :active se uefinen paia touos los elementos BTNL.
Besafoitunauamente, Inteinet Exploiei 6 y sus veisiones anteiioies solamente las
sopoitan paia los enlaces.
Tambin es posible combinai en un mismo elemento las pseuuo-clases que son
compatibles entie si:
/* Los estilos se aplican cuando el usuario pasa el ratn por encima de un
enlace que todava no ha visitado */
a:link:hover { ... }
/* Los estilos se aplican cuando el usuario pasa el ratn por encima de un
www.librosweb.es
125
enlace que ha visitado previamente */
a:visited:hover { ... }
7.2. Estilos avanzados
7.2.1. Decoracin personalizada
La piopieuau text-decoration peimite aauii o eliminai el subiayauo ue los enlaces.
Sin embaigo, el aspecto uel subiayauo lo contiola automticamente el navegauoi, poi lo
que su coloi siempie es el mismo que el uel texto uel enlace y su anchuia es
piopoicional al tamao ue letia.
No obstante, utilizanuo la piopieuau border-bottom es posible aauii cualquiei tipo ue
subiayauo paia los enlaces ue las pginas. El siguiente ejemplo muestia algunos enlaces
con el subiayauo peisonalizauo:
Figura 7.3. Enlaces con subrayado personalizado mediante la propiedad border
Las ieglas CSS uefiniuas en el ejemplo anteiioi se muestian a continuacion:
a { margin: 1em 0; float: left; clear: left; text-decoration: none;}
.simple {text-decoration: underline;}
.color { border-bottom: medium solid #CC0000;}
.ancho {border-bottom: thick solid;}
.separado {border-bottom: 1px solid; padding-bottom: .6em;}
.discontinuo {border-bottom: thin dashed;}
<a class="simple" href="#">Enlace con el estilo por defecto</a>
<a class="color" href="#">Enlace un subrayado de otro color</a>
www.librosweb.es
126
<a class="ancho" href="#">Enlace con un subrayado muy ancho</a>
<a class="separado" href="#">Enlace con un subrayado muy separado</a>
<a class="discontinuo" href="#">Enlace con un subrayado discontinuo</a>
7.2.2. Imgenes segn el tipo de enlace
En ocasiones, pueue iesultai til incluii un pequeo icono al lauo ue un enlace paia
inuicai el tipo ue conteniuo que enlaza, como poi ejemplo un aichivo compiimiuo o un
uocumento con foimato PBF.
Este tipo ue imgenes son puiamente uecoiativas en vez ue imgenes ue conteniuo, poi
lo que se uebeiian aauii con CSS y no con elementos ue tipo <img>. 0tilizanuo la
piopieuau background (y background-image) se pueue peisonalizai el aspecto ue los
enlaces paia que incluyan un pequeo icono a su lauo.
La tcnica consiste en mostiai una imagen ue fonuo sin iepeticion en el enlace y aauii
el padding necesaiio al texto uel enlace paia que no se solape con la imagen ue fonuo.
El siguiente ejemplo peisonaliza el aspecto ue uos enlaces aauinuoles una imagen ue
fonuo:
Figura 7.4. Personalizando el aspecto de los enlaces en funcin de su tipo
Las ieglas CSS necesaiias se muestian a continuacion:
a { margin: 1em 0; float: left; clear: left; }
.rss {
color: #E37529;
padding: 0 0 0 18px;
background: #FFF url(imagenes/rss.gif) no-repeat left center;
}
.pdf {
padding: 0 0 0 22px;
www.librosweb.es
127
background: #FFF url(imagenes/pdf.png) no-repeat left center;
}
<a href="#">Enlace con el estilo por defecto</a>
<a class="rss" href="#">Enlace a un archivo RSS</a>
<a class="pdf" href="#">Enlace a un documento PDF</a>
7.2.3. Mostrar los enlaces como si fueran botones
Las piopieuaues uefiniuas poi CSS peimiten mostiai los enlaces con el aspecto ue un
boton, lo que pueue sei til en foimulaiios en los que no se utilizan elementos
especificos paia cieai botones.
El siguiente ejemplo muestia un enlace simple foimateauo como un boton:
Figura 7.5. Mostrando un enlace como si fuera un botn
Las ieglas CSS utilizauas en el ejemplo anteiioi son las siguientes:
a { margin: 1em 0; float: left; clear: left; }
a.boton {
text-decoration: none;
background: #EEE;
color: #222;
border: 1px outset #CCC;
padding: .1em .5em;
}
a.boton:hover {
background: #CCB;
}
a.boton:active {
border: 1px inset #000;
}
<a class="boton" href="#">Guardar</a>
<a class="boton" href="#">Enviar</a>
www.librosweb.es
128
Captulo 8. Imgenes
8.1. Estilos bsicos
8.1.1. Establecer la anchura y altura de las imgenes
0tilizanuo las piopieuaues width y height, es posible mostiai las imgenes con
cualquiei altuiaanchuia, inuepenuientemente ue su altuiaanchuia ieal:
#destacada {
width: 120px;
height: 250px;
}
<img id="destacada" src="imagen.png" />
No obstante, si se utilizan altuiasanchuias uifeientes ue las ieales, el navegauoi
uefoima las imgenes y el iesultauo esttico es muy uesagiauable.
Poi otia paite, establecei la altuiaanchuia ue touas las imgenes meuiante CSS es una
pictica poco iecomenuable. El motivo es que noimalmente uos imgenes uifeientes no
compaiten la misma altuiaanchuia. Poi lo tanto, se uebe cieai una nueva iegla CSS (y
un nuevo selectoi) paia caua una ue las uifeientes imgenes uel sitio web.
En la pictica, esta foima ue tiabajo piouuce una sobiecaiga ue estilos que la hace
inviable. Poi este motivo, aunque es una solucion que no iespeta la sepaiacion completa
entie conteniuos (XBTNL) y piesentacion (CSS), se iecomienua establecei la altuia
anchuia ue las imgenes meuiante los atiibutos width y height ue la etiqueta <img>:
<img src="imagen.png" width="120" height="250" />
8.1.2. Eliminar el borde de las imgenes con enlaces
Cuanuo una imagen foima paite ue un enlace, los navegauoies muestian poi uefecto un
boiue azul giueso alieueuoi ue las imgenes. Poi tanto, una ue las ieglas ms utilizauas
en los aichivos CSS es la que elimina los boiues ue las imgenes con enlaces:
img {
border: none;
}
Introduccin a CSS Captulo 8. Imgenes
www.librosweb.es
129
8.2.1. Sombra (drop shadow)
La mayoiia ue aplicaciones ue uiseo gifico peimiten aauii una sombia (llamaua drop
shadow en ingls) a las imgenes. CSS no incluye piopieuaues que peimitan mostiai ue
foima sencilla sombias en los elementos.
No obstante, existen vaiias tcnicas sencillas y otias ms avanzauas que peimiten cieai
sombias que se auapten a cualquiei imagen o elemento. A continuacion se muestia una
tcnica sencilla paia aauii sombia a las imgenes.
El estilo final ue las sombias cieauas con esta tcnica se muestia a continuacion:
Figura 8.1. Sombra aplicada a las imgenes y otros elementos mediante CSS
La tcnica mostiaua se piesento poi piimeia vez en la pgina web
http:wubbleyew.comtestsuiopshauows.htm y consiste en la utilizacion ue un pai ue
elementos <div> alieueuoi uel elemento que va a mostiai una sombia. La sombia se
consigue meuiante una imagen muy gianue que contiene una sombia oiientaua hacia el
lauo ueiecho e infeiioi.
La ventaja ue este mtouo es que es sencillo y solamente iequieie aauii un pai ue
<div> poi caua elemento. Auems, como la sombia es una imagen muy gianue, el efecto
funciona con elementos ue cualquiei tamao.
El mayoi inconveniente ue este mtouo es que la sombia siempie se muestia en la
misma uiieccion (ueiecha infeiioi) y que en Inteinet Exploiei 6 y veisiones anteiioies
solo muestian la sombia coiiectamente cuanuo el coloi ue fonuo ue la pgina es blanco
www.librosweb.es
130
(ya que Inteinet Exploiei 6 y veisiones anteiioies no sopoitan imgenes en foimato
PNu con tianspaiencias).
El couigo BTNL y CSS uel ejemplo anteiioi es bastante sencillo:
.dropshadow {
float:left;
clear:left;
background: url(imagenes/shadowAlpha.png) no-repeat bottom right !important;
background: url(imagenes/shadow.gif) no-repeat bottom right;
margin: 10px 0 10px 10px !important;
margin: 10px 0 10px 5px;
padding: 0px;
}
.innerbox {
position:relative;
bottom:6px;
right: 6px;
padding:4px;
margin: 0px 0px 0px 0px;
}
<div class="dropshadow">
<div class="innerbox">
</div>
</div>
<div class="dropshadow">
<div class="innerbox">
<h4>Prrafo de texto</h4>
<p>Esta tcnica no slo permite aadir sombra a las imgenes, sino a
cualquier elemento.</p>
</div>
</div>
www.librosweb.es
131
Captulo 9. Listas
9.1. Estilos bsicos
9.1.1. Vietas personalizadas
Poi uefecto, los navegauoies muestian los elementos ue las listas no oiuenauas con una
vieta foimaua poi un pequeo ciiculo ue coloi negio. Los elementos ue las listas
oiuenauas se muestian poi uefecto con la numeiacion uecimal utilizaua en la mayoiia
ue paises.
No obstante, CSS uefine vaiias piopieuaues paia contiolai el tipo ue vieta que
muestian las listas, auems ue pouei contiolai la posicion ue la piopia vieta. La
piopieuau bsica es la que contiola el tipo ue vieta que se muestia y que se uenomina
list-style-type.
list-style-type Tipo de vieta
Valores
disc | circle | square | decimal |
decimal-leading-zero | lower-roman | upper-roman |
lower-greek | lower-latin | upper-latin | armenian
| georgian | lower-alpha | upper-alpha | none |
inherit
Se aplica a Elementos de una lista
Valor inicial disc
Descripcin Permite establecer el tipo de vieta mostrada para una lista
En piimei lugai, el valoi none peimite mostiai una lista en la que sus elementos no
contienen vietas, nmeios o letias. Se tiata ue un valoi muy utilizauo, ya que es
impiescinuible paia los mens ue navegacion cieauos con listas, como se vei ms
auelante.
El iesto ue valoies ue la piopieuau list-style-type se uiviuen en ties tipos: gificos,
numiicos y alfabticos.
Los valoies gificos son disc, circle y square y muestian como vieta un ciiculo
ielleno, un ciiculo vacio y un cuauiauo ielleno iespectivamente.
Los valoies numiicos estn foimauos poi decimal, decimal-leading-zero,
lower-roman, upper-roman, armenian y georgian.
Poi ltimo, los valoies alfanumiicos se contiolan meuiante lower-latin,
lower-alpha, upper-latin, upper-alpha y lower-greek.
La siguiente imagen muestia algunos ue los valoies uefiniuos poi la piopieuau
list-style-type:
Introduccin a CSS Captulo 9. Listas
www.librosweb.es
132
Figura 9.1. Ejemplo de propiedad list-style-type
El couigo CSS ue algunas ue las listas uel ejemplo anteiioi se muestia a continuacion:
<ul style="list-style-type: square">
<li>list-style-type: square</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
<ol style="list-style-type: lower-roman">
<li>list-style-type: lower-roman</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol style="list-style-type: decimal-leading-zero; padding-left: 2em;">
<li>list-style-type: decimal-leading-zero</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
La piopieuau list-style-position peimite contiolai la colocacion ue las vietas.
list-style-position Posicin de la vieta
Valores inside | outside | inherit
Valor inicial outside
Descripcin
Permite establecer la posicin de la vieta de cada elemento
de una lista
La uifeiencia entie los valoies outside y inside se hace eviuente cuanuo los elementos
contienen mucho texto, como en la siguiente imagen:
www.librosweb.es
133
Figura 9.2. Ejemplo de propiedad list-style-position
0tilizanuo las piopieuaues anteiioies (list-style-type y list-style-position), se
pueue seleccionai el tipo ue vieta y su posicion, peio no es posible peisonalizai algunas
ue sus caiacteiisticas bsicas como su coloi y tamao.
Cuanuo se iequieie peisonalizai el aspecto ue las vietas, se uebe empleai la piopieuau
list-style-image, que peimite mostiai una imagen piopia en vez ue una vieta
automtica.
list-style-image Imagen de la vieta
Valores <url> | none | inherit
Valor inicial none
Descripcin
Permite reemplazar las vietas automticas por una imagen
personalizada
Las imgenes peisonalizauas se inuican meuiante la 0RL ue la imagen. Si no se
encuentia la imagen o no se pueue caigai, se muestia la vieta automtica
coiiesponuiente (salvo que explicitamente se haya eliminauo meuiante la piopieuau
list-style-type).
La siguiente imagen muestia el uso ue la piopieuau list-style-image meuiante ties
ejemplos sencillos ue listas con vietas peisonalizauas:
www.librosweb.es
134
Figura 9.3. Ejemplo de propiedad list-style-image
Las ieglas CSS coiiesponuientes al ejemplo anteiioi se muestian a continuacion:
ul {
margin:0;
padding-left: 1.5em;
line-height: 1.5em;
}
ul li { padding-left: .2em; }
ul.ok { list-style-image: url(imagenes/ok.png); }
ul.go { list-style-image: url(imagenes/bullet_go.png); }
ul.redondo { list-style-image: url(imagenes/bullet_red.png); }
Como es habitual, CSS uefine una piopieuau ue tipo "shorthand" que peimite establecei
touas las piopieuaues ue una lista ue foima uiiecta. La piopieuau se uenomina
list-style.
list-style Estilo de una lista
Valores
( <list-style-type> || <list-style-position> ||
<list-style-image> ) | inherit
Valor inicial -
Descripcin
Propiedad que permite establecer de forma simultnea todas las opciones de
una lista
En la uefinicion anteiioi, la notacion || significa que el oiuen en el que se inuican los
valoies ue la piopieuau es inuifeiente. El siguiente ejemplo inuica que no se uebe
mostiai ni vietas automticas ni vietas peisonalizauas:
ul { list-style: none }
Cuanuo se utiliza una vieta peisonalizaua, es conveniente inuicai la vieta automtica
que se mostiai cuanuo no se pueua caigai la imagen:
ul { list-style: url(imagenes/cuadrado_rojo.gif) square; }
www.librosweb.es
135
9.1.2. Men vertical sencillo
Las listas BTNL se suelen empleai, auems ue paia su funcion natuial, paia la cieacion
ue mens ue navegacion veiticales y hoiizontales.
A continuacion se muestia la tiansfoimacion ue una lista sencilla ue enlaces en un men
veitical ue navegacion.
Lista ue enlaces oiiginal:
<ul>
<li><a href="#" title="Enlace genrico">Elemento 1</a></li>
</ul>
Aspecto final uel men veitical:
Figura 9.4. Men vertical sencillo creado con CSS
El pioceso ue tiansfoimacion ue la lista en un men iequieie ue los siguientes pasos:
1) Befinii la anchuia uel men:
ul.menu { width: 180px; }
www.librosweb.es
136
Figura 9.5. Men vertical: definiendo su anchura
2) Eliminai las vietas automticas y touos los migenes y espaciauos aplicauos poi
uefecto:
ul.menu {
width: 180px;
list-style: none;
margin: 0;
padding: 0;
}
Figura 9.6. Men vertical: eliminar vietas por defecto
S) Aauii un boiue al men ue navegacion y establecei el coloi ue fonuo y los boiues ue
caua elemento uel men:
ul.menu {
width: 180px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #7C7C7C;
www.librosweb.es
137
border-bottom: none;
}
ul.menu li {
border-bottom: 1px solid #7C7C7C;
border-top: 1px solid #FFF;
background: #F4F4F4;
}
Figura 9.7. Men vertical: aadiendo bordes
4) Aplicai estilos a los enlaces: mostiailos como un elemento ue bloque paia que
ocupen touo el espacio ue caua <li> uel men, aauii un espacio ue ielleno y mouificai
los coloies y la uecoiacion poi uefecto:
ul.menu li a {
padding: .2em 0 .2em .5em;
display: block;
color: #333;
}
Figura 9.8. Aspecto final del men vertical sencillo creado con CSS
www.librosweb.es
138
Los tipos ue mens veiticales que se pueuen uefinii meuiante las piopieuaues CSS son
innumeiables, como se pueue obseivai en la pgina http:www.explouing-boy.com
imagesEBmenusmenus.html
9.1.3. Men vertical avanzado
9.2.1. Men horizontal bsico
A paitii ue un men veitical sencillo, es posible cieai un men hoiizontal sencillo
aplicanuo las piopieuaues CSS conociuas hasta el momento.
A continuacion se muestia la tiansfoimacion uel anteiioi men veitical sencillo en un
men hoiizontal sencillo. En este ejemplo, las piopieuaues paia establecei el aspecto ue
los elementos uel men se uefinen en los elementos <a> en lugai ue uefiniilas paia los
elementos <li> como en el ejemplo anteiioi. En cualquiei caso, es inuifeiente el
elemento en el que se aplican los estilos que uefinen el aspecto ue caua opcion uel men.
Couigo BTNL uel men hoiizontal:
<ul>
</ul>
Couigo CSS uel men veitical anteiioi:
ul.menu {
width: 180px;
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li {
border-bottom:1px solid #7C7C7C;
}
ul.menu li a {
padding: .2em 0 .2em .5em;
display:block;
color: #333;
}
www.librosweb.es
139
Aspecto final uel men hoiizontal:
Figura 9.9. Men horizontal sencillo creado con CSS
El pioceso ue tiansfoimacion uel men veitical en un men hoiizontal consta ue los
siguientes pasos:
1) Eliminai la anchuia y el boiue uel elemento <ul> y aplicai las piopieuaues float y
clear:
ul.menu {
clear: both;
float: left;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
Figura 9.10. Men horizontal: definiendo anchura y bordes
2) La clave ue la tiansfoimacion iesiue en mouificai la piopieuau float ue los
elementos <li> uel men:
www.librosweb.es
140
ul.menu li {
float: left;
}
Figura 9.11. Men horizontal: propiedades float y display
S) Nouificai el padding y los boiues ue los enlaces que foiman el men:
ul.menu li a {
padding: .3em;
display: block;
color: #333;
border-top: 1px solid #7C7C7C;
border-right: 1px solid #7C7C7C;
}
Figura 9.12. Men horizontal: relleno y borde de los elementos
4) Poi ltimo, se aaue un boiue izquieiuo en el elemento <ul> paia homogeneizai el
aspecto ue los elementos uel men:
ul.menu {
clear: both;
float: left;
width: 100%;
list-style: none;
margin: 0;
www.librosweb.es
141
padding: 0;
border-left: 1px solid #7C7C7C;
}
Figura 9.13. Aspecto final del men horizontal sencillo creado con CSS
El couigo CSS final se muestia a continuacion:
ul.menu {
clear: both;
float: left;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid #7C7C7C;
}
ul.menu li {
float: left;
}
ul.menu li a {
padding: .3em;
display: block;
color: #333;
border-top: 1px solid #7C7C7C;
border-right: 1px solid #7C7C7C;
}
9.2.2. Men horizontal con pestaas
Nouificanuo los estilos ue caua elemento uel men y utilizanuo imgenes ue fonuo y las
pseuuo-clases :hover y :active, se pueuen cieai mens hoiizontales complejos, incluso
con el aspecto ue un men ue solapas o pestaas:
www.librosweb.es
142
Figura 9.14. Ejemplos de mens horizontales con pestaas creados con CSS
El couigo fuente ue los mens ue la imagen anteiioi y muchos otios se pueue encontiai
en http:explouing-boy.comimagescssmenusmenus.html
9.2.3. Men horizontal avanzado
Auems ue los mens hoiizontales ue solapas, existen muchos otios tipos uifeientes ue
mens hoiizontales (y veiticales) que se pueuen iealizai empleanuo exclusivamente
CSS:
www.librosweb.es
143
Figura 9.15. Ejemplos de mens horizontales y verticales complejos creados con CSS
El couigo CSS ue touos los ejemplos ue la imagen anteiioi y muchos otios se pueuen
encontiai en: http:alvit.uecss-showcasecss-navigation-techniques-showcase.php
www.librosweb.es
144
Captulo 10. Tablas
10.1. Estilos bsicos
Cuanuo se aplican boiues a las celuas ue una tabla, el aspecto poi uefecto con el que se
muestia en un navegauoi es el siguiente:
Figura 10.1. Aspecto por defecto de los bordes de una tabla
El couigo BTNL y CSS uel ejemplo anteiioi se muestia a continuacion:
.normal {
width: 250px;
}
.normal th, .normal td {
}
<table class="normal" summary="Tabla genrica">
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
...
</table>
El estnuai CSS 2.1 uefine uos mouelos uifeientes paia el tiatamiento ue los boiues ue
las celuas. La piopieuau que peimite seleccionai el mouelo ue boiues es
border-collapse:
Introduccin a CSS Captulo 10. Tablas
www.librosweb.es
145
border-collapse Fusin de bordes
Valores collapse | separate | inherit
Se aplica a Todas las tablas
Valor inicial separate
Descripcin
Define el mecanismo de fusin de los bordes de las celdas
adyacentes de una tabla
El mouelo collapse fusiona ue foima automtica los boiues ue las celuas auyacentes,
mientias que el mouelo separate fueiza a que caua celua muestie sus cuatio boiues.
Poi uefecto, los navegauoies utilizan el mouelo separate, tal y como se pueue
compiobai en el ejemplo anteiioi.
En geneial, los uiseauoies piefieien el mouelo collapse poique estticamente iesulta
ms atiactivo y ms paieciuo a las tablas ue uatos tiauicionales. El ejemplo anteiioi se
pueue iehacei paia mostiai la tabla con boiues sencillos y sin sepaiacion entie celuas:
Figura 10.2. Ejemplo de propiedad border-collapse
El couigo CSS completo uel ejemplo anteiioi se muestia a continuacion:
.normal {
width: 250px;
border-collapse: collapse;
}
.normal th, .normal td {
}
<table class="normal" summary="Tabla genrica">
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
www.librosweb.es
146
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
...
</table>
Aunque paiece sencillo, el mecanismo que utiliza el mouelo collapse es muy complejo,
ya que cuanuo los boiues que se fusionan no son exactamente iguales, uebe tenei en
cuenta la anchuia ue caua boiue, su estilo y el tipo ue celua que contiene el boiue
(columna, fila, giupo ue filas, giupo ue columnas) paia ueteiminai la piioiiuau ue caua
boiue.
Si se opta poi el mouelo separate (que es el mouelo poi uefecto si no se inuica lo
contiaiio) se pueue utilizai la piopieuau border-spacing paia contiolai la sepaiacion
entie los boiues ue caua celua.
border-spacing Espaciado entre bordes
Valores <medida> <medida>? | inherit
Se aplica a Todas las tablas
Valor inicial 0
Descripcin
Establece la separacin entre los bordes de las celdas adyacentes de
una tabla
Si solamente se inuica como valoi una meuiua, se asigna ese valoi como sepaiacion
hoiizontal y veitical. Si se inuican uos meuiuas, la piimeia es la sepaiacion hoiizontal y
la segunua es la sepaiacion veitical entie celuas.
La piopieuau border-spacing solo contiola la sepaiacion entie celuas y poi tanto, no se
pueue utilizai paia mouificai el tipo ue mouelo ue boiues que se utiliza. En concieto, si
se establece un valoi igual a 0 paia la sepaiacion entie los boiues ue las celuas, el
iesultauo es muy uifeiente al mouelo collapse:
www.librosweb.es
147
Figura 10.3. Ejemplo de propiedad border-spacing
En la tabla uel ejemplo anteiioi, se ha estableciuo la piopieuau border-spacing: 0, poi
lo que el navegauoi no intiouuce ninguna sepaiacion entie los boiues ue las celuas.
Auems, como no se ha estableciuo ue foima explicita ningn mouelo ue boiues, el
navegauoi utiliza el mouelo separate.
El iesultauo es que border-spacing: 0 muestia los boiues con una anchuia uoble, ya
que en iealiuau se tiata ue uos boiues iguales sin sepaiacion entie ellos. Poi tanto, las
uifeiencias visuales con el mouelo border-collapse: collapse son muy eviuentes.
CSS uefine otias piopieuaues especificas paia el contiol uel aspecto ue las tablas. 0na ue
ellas es el tiatamiento que ieciben las celuas vacias ue una tabla, que se contiola
meuiante la piopieuau empty-cells. Esta piopieuau solo se aplica cuanuo el mouelo ue
boiues ue la tabla es ue tipo separate.
empty-cells Tratamiento de las celdas vacas
Valores show | hide | inherit
Se aplica a Celdas de una tabla
Valor inicial show
Descripcin
Define el mecanismo utilizado para el tratamiento de las celdas vacas de una
tabla
El valoi hide inuica que las celuas vacias no se ueben mostiai. 0na celua vacia es aquella
que no tiene ningn conteniuo, ni siquieia un espacio en blanco o un .
La siguiente imagen muestia las uifeiencias entie una tabla noimal y una tabla con la
piopieuau empty-cells: hide:
www.librosweb.es
148
Figura 10.4. Ejemplo de propiedad empty-cells
Besafoitunauamente, Inteinet Exploiei 6 y las veisiones anteiioies no inteipietan
coiiectamente esta piopieuau y muestian el ejemplo anteiioi ue la siguiente maneia:
Figura 10.5. Internet Explorer no soporta la propiedad empty-cells
Poi otia paite, el titulo ue las tablas se establece meuiante el elemento <caption>, que
poi uefecto se muestia encima ue los conteniuos ue la tabla. La piopieuau caption-side
peimite contiolai la posicion uel titulo ue la tabla.
caption-side Posicin del ttulo de la tabla
Valores top | bottom | inherit
Se aplica a Los elementos caption
Valor inicial top
Descripcin Establece la posicin del ttulo de la tabla
El valoi bottom inuica que el titulo ue la tabla se uebe mostiai uespus ue los conteniuos
ue la tabla. La alineacion hoiizontal se contiola meuiante la piopieuau text-align.
A continuacion se muestia el couigo BTNL y CSS ue un ejemplo sencillo ue uso ue la
piopieuau caption-side:
.especial {
caption-side: bottom;
}
<table class="especial" summary="Tabla genrica">
<caption>Tabla 2.- Ttulo especial</caption>
<tr>
<td>1</td>
<td>2</td>
www.librosweb.es
149
<td>3</td>
</tr>
...
</table>
Besafoitunauamente, el navegauoi 0peia 9 y veisiones anteiioies y el navegauoi
Inteinet Exploiei 6 y veisiones anteiioies no sopoitan esta piopieuau y muestian el
titulo ue la tabla siempie encima ue sus conteniuos:
Figura 10.6. Opera e Internet Explorer no soportan la propiedad caption-side
El navegauoi Fiiefox si que sopoita esta piopieuau y muestia el titulo ue la segunua
tabla uebajo ue sus conteniuos, tal y como se ha inuicauo en el ejemplo:
www.librosweb.es
150
Figura 10.7. Ejemplo de propiedad caption-side
El iesultauo final uel ejeicicio anteiioi se pouiia completai aauienuo una pequea
mejoia: que el coloi ue las filas vaiie cuanuo el usuaiio pasa el iaton poi encima ue caua
fila. La pseudo-clase :hover peimite aauii fcilmente esta caiacteiistica:
Figura 10.8. Pseudo-clase :hover en las filas de una tabla
La iegla CSS necesaiia se muestia a continuacion:
www.librosweb.es
151
table tr:hover {
background: #FFFF66;
}
Besafoitunauamente, Inteinet Exploiei 6 y las veisiones anteiioies no sopoitan la
pseudo-clase :hover en elementos uifeientes a los enlaces, poi lo que se uebe iecuiiii a
soluciones con }avaSciipt paia mostiai ue otio coloi la fila activa.
www.librosweb.es
152
Captulo 11. Formularios
11.1. Estilos bsicos
11.1.1. Mostrar un botn como un enlace
Como ya se vio anteiioimente, el estilo poi uefecto ue los enlaces se pueue mouificai
paia que se muestien como botones ue foimulaiio. Ahoia, los botones ue foimulaiio
tambin se pueuen mouificai paia que paiezcan enlaces.
Figura 11.1. Mostrando un botn como si fuera un enlace
Las ieglas CSS uel ejemplo anteiioi son las siguientes:
.enlace {
border: 0;
padding: 0;
background-color: transparent;
color: blue;
border-bottom: 1px solid blue;
}
<input type="button" value="Botn normal" />
<input class="enlace" type="button" value="Botn como enlace" />
11.1.2. Mejoras en los campos de texto
Poi uefecto, los campos ue texto ue los foimulaiios no incluyen ningn espacio ue
ielleno, poi lo que el texto intiouuciuo poi el usuaiio apaiece pegado a los boiues uel
cuauio ue texto.
Aauienuo un pequeo padding a caua elemento <input>, se mejoia notablemente el
aspecto uel foimulaiio:
Introduccin a CSS Captulo 11. Formularios
www.librosweb.es
153
Figura 11.2. Mejorando el aspecto de los formularios gracias al padding
La iegla CSS necesaiia paia mejoiai el foimulaiio es muy sencilla:
form.elegante input {
padding: .2em;
}
11.1.3. Labels alineadas y formateadas
Los elementos <input> y <label> ue los foimulaiios son elementos en linea, poi lo que
el aspecto que muestian los foimulaiios poi uefecto, es similai al ue la siguiente imagen:
www.librosweb.es
154
Figura 11.3. Aspecto por defecto que muestran los formularios
El couigo BTNL uel ejemplo anteiioi es el siguiente:
<form>
<fieldset>
<legend>Alta en el servicio</legend>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" />
<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" size="50" />
<label for="dni">DNI</label>
<input type="text" id="dni" size="10" maxlength="9" />
<label for="contrasena">Contrasea</label>
<input type="password" id="contrasena" />
<input class="btn" type="submit" value="Darme de alta" />
</fieldset>
</form>
Apiovechanuo los elementos <label>, se pueuen aplicai unos estilos CSS sencillos que
peimitan mostiai el foimulaiio con el aspecto ue la siguiente imagen:
www.librosweb.es
155
Figura 11.4. Mostrando las etiquetas label encima de los campos del formulario
En piimei lugai, se muestian los elementos <label> como elementos ue bloque, paia
que aauan una sepaiacion paia caua campo uel foimulaiio. Auems, se aaue un
maigen supeiioi paia no mostiai juntas touas las filas uel foimulaiio:
label {
display: block;
margin: .5em 0 0 0;
}
El boton uel foimulaiio tambin se muestia como un elemento ue bloque y se le aaue
un maigen paia uaile el aspecto final ueseauo:
.btn {
display: block;
margin: 1em 0;
}
En ocasiones, es ms til mostiai touos los campos uel foimulaiio con su <label>
alineaua a la izquieiua y el campo uel foimulaiio a la ueiecha ue caua <label>, como
muestia la siguiente imagen:
www.librosweb.es
156
Figura 11.5. Mostrando las etiquetas label alineadas con los campos del formulario
Paia mostiai un foimulaiio tal y como apaiece en la imagen anteiioi no es necesaiio
cieai una tabla y contiolai la anchuia ue sus columnas paia conseguii una alineacion
peifecta. Sin embaigo, si que es necesaiio aauii un nuevo elemento (poi ejemplo un
<div>) que encieiie a caua uno ue los campos uel foimulaiio (<label> y <input>). El
esquema ue la solucion piopuesta es el siguiente:
Figura 11.6. Esquema de la tcnica de alineacin de etiquetas label y campos de formulario
Poi tanto, en el couigo BTNL uel foimulaiio anteiioi se aauen los elementos <div>:
<form>
<fieldset>
<legend>Alta en el servicio</legend>
<div>
<input type="text" id="nombre" />
</div>
<div>
<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" size="35" />
</div>
...
</fieldset>
</form>
www.librosweb.es
157
Y en el couigo CSS se aauen las ieglas necesaiias paia alineai los campos uel
foimulaiio:
div {
margin: .4em 0;
}
div label {
width: 25%;
float: left;
}
11.2.1. Formulario en varias columnas
Los foimulaiios complejos con uecenas ue campos pueuen ocupai mucho espacio en la
ventana uel navegauoi. Auems uel uso ue pestaas paia agiupai los campos
ielacionauos en un foimulaiio, tambin es posible mostiai el foimulaiio a uos
columnas, paia apiovechai mejoi el espacio.
Figura 11.7. Ejemplo de formulario a dos columnas
La solucion consiste en aplicai la siguiente iegla CSS a los <fieldset> uel foimulaiio:
form fieldset {
float: left;
width: 48%;
}
<form>
<fieldset>
www.librosweb.es
158
...
</fieldset>
...
</form>
Si se quieie mostiai el foimulaiio con ms ue uos columnas, se aplica la misma iegla
peio mouificanuo el valoi ue la piopieuau width ue caua <fieldset>. Si el foimulaiio es
muy complejo, pueue sei til agiupai los <fieldset> ue caua fila meuiante elementos
<div>.
11.2.2. Resaltar el campo seleccionado
0na ue las mejoias ms tiles paia los foimulaiios BTNL consiste en iesaltai ue alguna
foima especial el campo en el que el usuaiio est intiouucienuo uatos. Paia ello, CSS
uefine la pseuuo-clase :focus, que peimite aplicai estilos especiales al elemento que en
ese momento tiene el foco o atencion uel usuaiio.
La siguiente imagen muestia un foimulaiio que iesalta claiamente el campo en el que el
usuaiio est intiouucienuo la infoimacion:
Figura 11.8. Ejemplo de pseudo-clase :focus
Aauienuo la pseuuo-clase :focus uespus uel selectoi noimal, el navegauoi se encaiga
ue aplicai esos estilos cuanuo el usuaiio activa el elemento:
input:focus {
}
www.librosweb.es
159
Besafoitunauamente, la pseuuo-clase :focus no funciona en navegauoies obsoletos
como Inteinet Exploiei 6, poi lo que si la pgina uebe visualizaise ue la misma foima en
touos los navegauoies, es pieciso iecuiiii a soluciones con }avaSciipt.
www.librosweb.es
160
Captulo 12. Layout
El uiseo ue las pginas web habituales se uiviue en bloques: cabeceia, men,
conteniuos y pie ue pgina. visualmente, los bloques se uisponen en vaiias filas y
columnas. Poi este motivo, hace vaiios aos la estiuctuia ue las pginas BTNL se uefinia
meuiante tablas.
El uesaiiollo ue CSS ha peimitiuo que se pueuan iealizai los mismos uiseos sin utilizai
tablas BTNL. Las piincipales ventajas ue uiseai la estiuctuia ue las pginas web con
CSS en vez ue con tablas BTNL son las siguientes:
Mantenimiento: una pgina uiseaua exclusivamente con CSS es mucho ms fcil
ue mantenei que una pgina uiseaua con tablas. Cambiai el aspecto ue una
pgina cieaua con CSS es tan fcil como mouificai unas pocas ieglas en las hojas
ue estilos. Sin embaigo, iealizai la misma mouificacion en una pgina cieaua con
tablas supone un esfueizo muy supeiioi y es ms piobable cometei eiioies.
Accesibilidad: las pginas cieauas con CSS son ms accesibles que las pginas
uiseauas con tablas. Be hecho, los navegauoies que utilizan las peisonas
uiscapacitauas (en especial las peisonas inviuentes) pueuen tenei uificultaues con
la estiuctuia ue las pginas complejas cieauas con tablas BTNL. No obstante,
uiseai una pgina web exclusivamente con CSS no gaiantiza que la pgina sea
accesible.
Velocidad de carga: el couigo BTNL ue una pgina uiseaua con tablas es mucho
mayoi que el couigo ue la misma pgina uiseaua exclusivamente con CSS, poi lo
que taiua ms tiempo en uescaigaise. En cualquiei caso, si el usuaiio acceue al
sitio con una conexion ue banua ancha y la pgina es ue un tamao meuio o
ieuuciuo, las uifeiencias son casi impeiceptibles.
Semntica: aunque iesulta obvio, las tablas BTNL solo se ueben utilizai paia
mostiai uatos cuya infoimacion solo se entienue en foima ue filas y columnas.
0tilizai tablas paia cieai la estiuctuia completa ue una pgina es tan absuiuo
como utilizai poi ejemplo la etiqueta <ul> paia cieai piiafos ue texto.
Poi estos motivos, la estiuctuia basaua en tablas ha uauo paso a la estiuctuia basaua
exclusivamente en CSS. Aunque cieai la estiuctuia ue las pginas solo con CSS piesenta
en ocasiones ietos impoitantes, en geneial es ms sencilla y flexible.
En este capitulo se muestia como cieai algunas ue las estiuctuias o layouts ms
habituales ue los uiseos web utilizanuo exclusivamente CSS.
12.1. Centrar una pgina horizontalmente
A meuiua que aumenta el tamao y la iesolucion ue las pantallas ue oiuenauoi, se hace
ms uificil uiseai pginas que se auapten al tamao ue la ventana uel navegauoi. El
piincipal ieto que se piesenta con iesoluciones supeiioies a 1u24 x 768 pixel, es que las
Introduccin a CSS Captulo 12. Layout
www.librosweb.es
161
lineas ue texto son uemasiauo laigas como paia leeilas con comouiuau. Poi ese motivo,
noimalmente se opta poi uiseos con una anchuia fija limitaua a un valoi aceptable
paia mantenei la legibiliuau uel texto.
Poi otia paite, los navegauoies alinean poi uefecto las pginas web a la izquieiua ue la
ventana. Cuanuo la iesolucion ue la pantalla es muy gianue, la mayoiia ue pginas ue
anchuia fija alineauas a la izquieiua paiecen muy estiechas y piovocan una sensacion
ue vacio.
La solucion ms sencilla paia evitai los gianues espacios en blanco consiste en cieai
pginas con una anchuia fija auecuaua y centiai la pgina hoiizontalmente iespecto ue
la ventana uel navegauoi. Las siguientes imgenes muestian el aspecto ue una pgina
centiaua a meuiua que aumenta la anchuia ue la ventana uel navegauoi.
Figura 12.1. Pgina de anchura fija centrada mediante CSS
www.librosweb.es
162
0tilizanuo la piopieuau margin ue CSS, es muy sencillo centiai una pgina web
hoiizontalmente. La solucion consiste en agiupai touos los conteniuos ue la pgina en
un elemento <div> y asignaile a ese <div> unos migenes lateiales automticos. El
<div> que encieiia los conteniuos se suele llamai contenedor (en ingls se uenomina
wrapper o container):
#contenedor {
width: 300px;
margin: 0 auto;
}
<body>
<div id="contenedor">
<h1>Lorem ipsum dolor sit amet</h1>
...
</div>
</body>
Como se sabe, el valoi 0 auto significa que los migenes supeiioi e infeiioi son iguales
a 0 y los migenes lateiales toman un valoi ue auto. Cuanuo se asignan migenes
lateiales automticos a un elemento, los navegauoies centian ese elemento iespecto ue
su elemento pauie. En este ejemplo, el elemento pauie uel <div> es la piopia pgina (el
elemento <body>), poi lo que se consigue centiai el elemento <div> iespecto ue la
ventana uel navegauoi.
Nouificanuo ligeiamente el couigo CSS anteiioi se pueue conseguii un uiseo uinmico
o lquido (tambin llamauo fluido) que se auapta a la anchuia ue la ventana uel
navegauoi y peimanece siempie centiauo:
#contenedor {
width: 70%;
margin: 0 auto;
}
Establecienuo la anchuia uel elemento conteneuoi meuiante un poicentaje, su anchuia
se auapta ue foima continua a la anchuia ue la ventana uel navegauoi. Be esta foima, si
www.librosweb.es
163
se ieuuce la anchuia ue la ventana uel navegauoi, la pgina se vei ms estiecha y si se
maximiza la ventana uel navegauoi, la pgina se vei ms ancha.
Las siguientes imgenes muestian como se auapta el uiseo uinmico a la anchuia ue la
ventana uel navegauoi, mostianuo caua vez ms conteniuos a meuiua que se agianua la
ventana.
Figura 12.4. Pgina de anchura variable centrada mediante CSS
www.librosweb.es
164
12.2. Centrar una pgina verticalmente
Cuanuo se centia una pgina web ue foima hoiizontal, sus migenes lateiales se
auaptan uinmicamente ue foima que la pgina siempie apaiece en el centio ue la
ventana uel navegauoi, inuepenuientemente ue la anchuia ue la ventana. Be la misma
foima, cuanuo se centia una pgina web veiticalmente, el objetivo es que sus conteniuos
apaiezcan en el centio ue la ventana uel navegauoi y poi tanto, que sus migenes
veiticales se auapten ue foima uinmica en funcion uel tamao ue la ventana uel
navegauoi.
Aunque centiai una pgina web hoiizontalmente es muy sencillo, centiaila
veiticalmente es mucho ms complicauo. Afoitunauamente, no es muy comn que una
pgina web apaiezca centiaua ue foima veitical. El motivo es que la mayoiia ue pginas
web son ms altas que la ventana uel navegauoi, poi lo que no es posible centiailas
veiticalmente.
A continuacion se muestia la foima ue centiai una pgina web iespecto ue la ventana
uel navegauoi, es uecii, centiaila tanto hoiizontalmente como veiticalmente.
Siguienuo el mismo iazonamiento que el planteauo paia centiai la pgina
hoiizontalmente, se pouiian utilizai las siguientes ieglas CSS paia centiai la pgina
iespecto ue la ventana uel navegauoi:
#contenedor {
width: 300px;
height: 250px;
margin: auto;
}
<body>
...
</div>
</body>
Si el valoi auto se pueue utilizai paia que los migenes lateiales se auapten
uinmicamente, tambin uebeiia sei posible utilizai el valoi auto paia los migenes
veiticales. Besafoitunauamente, la piopieuau margin: auto no funciona tal y como se
espeia paia los migenes veiticales y la pgina no se muestia centiaua.
La solucion coiiecta paia centiai veiticalmente una pgina web se basa en el
posicionamiento absoluto e implica iealizai un clculo matemtico sencillo. A
continuacion se muestia el esquema gifico ue los cuatio pasos necesaiios paia centiai
una pgina web en la ventana uel navegauoi:
www.librosweb.es
165
Figura 12.7. Pasos necesarios para centrar verticalmente una pgina web
En piimei lugai, se asigna una altuia y una anchuia al elemento que encieiia touos los
conteniuos ue la pgina. En la piimeia figuia, los conteniuos ue la pgina tienen una
anchuia llamaua width y una altuia llamaua height que son menoies que la anchuia y
altuia ue la ventana uel navegauoi. En el siguiente ejemplo, se supone que tanto la
anchuia como la altuia ue la pgina es igual a 500px:
#contenedor {
width: 500px;
height: 500px;
}
<body>
...
</div>
</body>
A continuacion, se posiciona ue foima absoluta el elemento contenedor y se asigna un
valoi ue 50% tanto a la piopieuau top como a la piopieuau left. El iesultauo es que la
esquina supeiioi izquieiua uel elemento contenedor se posiciona en el centio ue la
ventana uel navegauoi:
#contenedor {
width: 500px;
height: 500px;
position: absolute;
www.librosweb.es
166
top: 50%;
left: 50%;
}
Si la pgina se uebe mostiai en el centio ue la ventana uel navegauoi, es necesaiio
uesplazai hacia aiiiba y hacia la izquieiua los conteniuos ue la pgina web. Paia
ueteiminai el uesplazamiento necesaiio, se iealiza un clculo matemtico sencillo.
Como se ve en la teiceia figuia uel esquema anteiioi, el punto cential ue la pgina uebe
uesplazaise hasta el centio ue la ventana uel navegauoi.
Como se uespienue ue la imagen anteiioi, la pgina web uebe moveise hacia aiiiba una
cantiuau igual a la mitau ue su altuia y uebe uesplazaise hacia la izquieiua una cantiuau
equivalente a la mitau ue su anchuia. 0tilizanuo las piopieuaues margin-top y
margin-left con valoies negativos, la pgina se uesplaza hasta el centio ue la ventana
uel navegauoi.
#contenedor {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px; /* height/2 = 500px / 2 */
margin-left: -250px; /* width/2 = 500px / 2 */
}
Con las ieglas CSS anteiioies, la pgina web siempie apaiece centiaua veiticalmente y
hoiizontalmente iespecto ue la ventana uel navegauoi. El motivo es que la anchuia
altuia ue la pgina son fijas (piopieuaues width y height), el uesplazamiento necesaiio
paia centiaila tambin es fijo (piopieuaues margin-top y margin-left) y el
uesplazamiento hasta el centio ue la ventana uel navegauoi se calcula uinmicamente
giacias al uso ue poicentajes en las piopieuaues top y left.
Paia centiai una pgina solo veiticalmente, se uebe piescinuii tanto uel
posicionamiento hoiizontal como uel uesplazamiento hoiizontal:
#contenedor {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
margin-top: -250px; /* height/2 = 500px / 2 */
}
12.3. Estructura o layout
www.librosweb.es
167
12.3.1. Diseo a 2 columnas con cabecera y pie de pgina
El objetivo ue este uiseo es uefinii una estiuctuia ue pgina con cabeceia y pie, un
men lateial ue navegacion y una zona ue conteniuos. La anchuia ue la pgina se fija en
700px, la anchuia uel men es ue 150px y la anchuia ue los conteniuos es ue 550px:
Figura 12.8. Esquema del diseo a 2 columnas con cabecera y pie de pgina
La solucion CSS se basa en el uso ue la piopieuau float paia los elementos posicionauos
como el men y los conteniuos y el uso ue la piopieuau clear en el pie ue pgina paia
evitai los solapamientos ocasionauos poi los elementos posicionauos con float.
Figura 12.9. Propiedades CSS necesarias en el diseo a dos columnas con cabecera y pie de
pgina
El couigo BTNL y CSS minimos paia uefinii la estiuctuia ue la pgina sin aplicai ningn
estilo auicional son los siguientes:
#contenedor {
width: 700px;
www.librosweb.es
168
}
#cabecera {
}
#menu {
float: left;
width: 150px;
}
#contenido {
float: left;
width: 550px;
}
#pie {
clear: both;
}
<body>
<div id="cabecera">
</div>
<div id="menu">
</div>
</div>
<div id="pie">
</div>
</div>
</body>
En los estilos CSS anteiioies se ha optauo poi uesplazai tanto el men como los
conteniuos hacia la izquieiua ue la pgina (float: left). Sin embaigo, en este caso
tambin se pouiia uesplazai el men hacia la izquieiua (float:left) y los conteniuos
hacia la ueiecha (float: right).
El uiseo anteiioi es ue anchuia fija, lo que significa que no se auapta a la anchuia ue la
ventana uel navegauoi. Paia conseguii una pgina ue anchuia vaiiable y que se auapte
ue foima uinmica a la ventana uel navegauoi, se ueben aplicai las siguientes ieglas CSS:
#contenedor {
}
#cabecera {
}
#menu {
float: left;
width: 15%;
}
#contenido {
float: left;
width: 85%;
}
#pie {
www.librosweb.es
169
clear: both;
}
Si se inuican la anchuias ue los bloques que foiman la pgina en poicentajes, el uiseo
final es uinmico. Paia cieai uiseos ue anchuia fija, basta con establecei las anchuias
ue los bloques en pixel.
12.3.2. Diseo a 3 columnas con cabecera y pie de pgina
Auems uel uiseo a uos columnas, el uiseo ms utilizauo es el ue ties columnas con
cabeceia y pie ue pgina. En este caso, los conteniuos se uiviuen en uos zonas
uifeienciauas: zona piincipal ue conteniuos y zona lateial ue conteniuos auxiliaies:
Figura 12.10. Esquema del diseo a tres columnas con cabecera y pie de pgina
La solucion CSS emplea la misma estiategia uel uiseo a uos columnas y se basa en
utilizai las piopieuaues float y clear:
Figura 12.11. Propiedades CSS necesarias en el diseo a 3 columnas con cabecera y pie de
pgina
www.librosweb.es
170
El couigo BTNL y CSS minimos paia uefinii la estiuctuia ue la pgina sin aplicai ningn
estilo auicional son los siguientes:
#contenedor {
}
#cabecera {
}
#menu {
float: left;
width: 15%;
}
#contenido {
float: left;
width: 85%;
}
#contenido #principal {
float: left;
width: 80%;
}
#contenido #secundario {
float: left;
width: 20%;
}
#pie {
clear: both;
}
<body>
<div id="cabecera">
</div>
<div id="menu">
</div>
<div id="principal">
</div>
<div id="secundario">
</div>
</div>
<div id="pie">
</div>
</div>
</body>
El couigo anteiioi ciea una pgina con anchuia vaiiable que se auapta a la ventana uel
navegauoi. Paia uefinii una pgina con anchuia fija, solamente es necesaiio sustituii las
anchuias en poicentajes poi anchuias en pixel.
www.librosweb.es
171
Al igual que suceuia en el uiseo a uos columnas, se pueue optai poi posicionai touos
los elementos meuiante float: left o se pueue utilizai float: left paia el men y la
zona piincipal ue conteniuos y float: right paia el conteneuoi ue los conteniuos y la
zona secunuaiia ue conteniuos.
12.4. Alturas/anchuras mximas y mnimas
Cuanuo se uisea la estiuctuia ue una pgina web, se uebe tomai la uecision ue optai
poi un uiseo ue anchuia fija o un uiseo cuya anchuia se auapta a la anchuia ue la
ventana uel navegauoi.
Sin embaigo, la mayoiia ue las veces seiia conveniente una solucion inteimeuia: que la
anchuia ue la pgina sea vaiiable y se auapte a la anchuia ue la ventana uel navegauoi,
peio iespetanuo cieitos limites. En otias palabias, que la anchuia ue la pgina no sea
tan pequea como paia que no se pueuan mostiai coiiectamente los conteniuos y
tampoco sea tan ancha como paia que las lineas ue texto no pueuan leeise
comouamente.
CSS uefine cuatio piopieuaues que peimiten limitai la anchuia y altuia minima y
mxima ue cualquiei elemento ue la pgina. Las piopieuaues son max-width, min-width,
max-height y min-height.
max-width Anchura mxima
Valores <medida> | <porcentaje> | none | inherit
Se aplica a Todos los elementos salvo filas y grupos de filas de tablas
Valor inicial none
Descripcin Permite definir la anchura mxima de un elemento
min-width Anchura mnima
Se aplica a Todos los elementos salvo filas y grupos de filas de tablas
Valor inicial 0
Descripcin Permite definir la anchura mnima de un elemento
max-height Altura mxima
Valores <medida> | <porcentaje> | none | inherit
Se aplica a Todos los elementos salvo columnas y grupos de columnas de tablas
Valor inicial none
Descripcin Permite definir la altura mxima de un elemento
www.librosweb.es
172
min-height Altura mnima
Se aplica a Todos los elementos salvo columnas y grupos de columnas de tablas
Valor inicial 0
Descripcin Permite definir la altura mnima de un elemento
Be esta foima, paia conseguii un uiseo ue anchuia vaiiable peio contiolaua, se pouiian
utilizai ieglas CSS como la siguiente:
#contenedor {
min-width: 500px;
max-width: 900px;
}
Las piopieuaues que uefinen la altuia y anchuia mxima y minima se pueuen aplicai a
cualquiei elemento, aunque solamente suelen utilizaise paia estiuctuiai la pgina. En
geneial, las piopieuaues ms utilizauas son max-width y min-width, ya que no es muy
habitual uefinii altuias mximas y minimas.
Besafoitunauamente, Inteinet Exploiei 6 y las veisiones anteiioies no sopoitan
ninguna ue las cuatio piopieuaues sobie ningn elemento. Basta que se incoipoie en las
nuevas veisiones uel navegauoi, es pieciso iecuiiii a tiucos que simulen el
compoitamiento ue las piopieuaues:
max-width equivalente paia Inteinet Exploiei:
div {
max-width: 800px;
width: expression(document.body.clientWidth > 801? "800px": "auto");
}
min-width equivalente paia Inteinet Exploiei:
div {
min-width:800px;
width: expression(document.body.clientWidth < 801? "800px": "auto" );
}
max-height equivalente paia Inteinet Exploiei:
div {
max-height: 300px;
overflow: hidden;
height: expression(this.scrollHeight > 301? "300px" : "auto" );
}
min-height equivalente paia Inteinet Exploiei:
div {
min-height:300px;
overflow: hidden;
www.librosweb.es
173
height: expression(this.scrollHeight < 301? "300px" : "auto" );
}
Los equivalentes paia Inteinet Exploiei han siuo extiaiuos ue:
http:www.svenutofte.comcouemax_wiuth_in_ie
En geneial, la columna ue los conteniuos es la ms laiga y la columna ue navegacion es
la ms coita. El piincipal inconveniente ue los uiseos mostiauos anteiioimente es que
no se pueue gaiantizai que touas las columnas se muestien con la misma altuia.
Si las columnas tienen algn coloi o imagen ue fonuo, este compoitamiento no es
aumisible, ya que se veiia que alguna columna no llega hasta el final ue la columna ms
laiga y el uiseo final paieceiia inacabauo.
Besue la apaiicion ue este pioblema se han piesentauo numeiosas soluciones. La ms
conociua es la tcnica faux columns ("columnas falsas") y que simula el coloiimagen ue
fonuo ue las columnas lateiales meuiante la imagen ue fonuo ue la columna cential ue
conteniuos.
La tcnica fue piesentaua oiiginalmente poi Ban Ceueiholm en su clebie aiticulo "Faux
Columns" (http:alistapait.comaiticlesfauxcolumns).
Ns iecientemente se ha piesentauo el pioyecto "In Search of the One True Layout" que
busca uefinii una seiie ue tcnicas que peimitan cieai ue foima sencilla cualquiei
estiuctuia ue pgina basaua en columnas.
La pgina piincipal uel pioyecto se pueue encontiai en:
http:www.positioniseveiything.netaiticlesonetiuelayout
Auems, est uisponible una heiiamienta inteiactiva paia cieai uiseos basauos en
columnas con la posibiliuau ue uefinii el nmeio ue columnas, su anchuia y obligai a
que touas las columnas muestien la misma altuia:
www.librosweb.es
174
Figura 12.12. Herramienta online para disear layouts de varias columnas con CSS
La heiiamienta inteiactiva se pueue encontiai en: http:www.fu2k.oigalexcss
onetiuelayoutexampleinteiactive
www.librosweb.es
175
Captulo 13. Otros
13.1. Propiedades shorthand
Las piopieuaues ue tipo "shorthand" son piopieuaues ue CSS que peimiten establecei ue
foima simultnea el valoi ue vaiias piopieuaues uifeientes peio ielacionauas. El uso ue
las piopieuaues "shorthand" es muy extenuiuo, ya que peimiten cieai hojas ue estilos
ms compactas.
A continuacion se incluye a mouo ue iefeiencia touas las piopieuaues ue tipo
"shorthand" que se han mostiauo anteiioimente.
font Tipografa
Valores
( ( <font-style> || <font-variant> || <font-weight> )?
<font-size> ( / <line-height> )? <font-family> ) | caption
| icon | menu | message-box | small-caption | status-bar |
inherit
Valor inicial -
Descripcin
Permite indicar de forma directa todas las propiedades de la tipografa de un
texto
margin Margen
Valores ( <medida> | <porcentaje> | auto ) {1, 4} | inherit
Se aplica a
Todos los elementos salvo algunos casos especialF10 140.0551n.
Valor inicial -
Se apipcin
border Estilo completo de todos los bordes
Valores
( <medida_borde> || <color_borde> || <estilo_borde> ) |
inherit
Valor inicial -
Descripcin Establece el estilo completo de todos los bordes de los elementos
background Fondo de un elemento
Valores
( <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position> ) | inherit
Valor inicial -
Descripcin Establece todas las propiedades del fondo de un elemento
list-style Estilo de una lista
Valores
( <list-style-type> || <list-style-position> ||
<list-style-image> ) | inherit
Valor inicial -
Descripcin
Propiedad que permite establecer de forma simultanea todas las opciones de
una lista
13.2. Versin para imprimir
La mayoiia ue sitios web ue caliuau ofiecen al usuaiio la posibiliuau ue impiimii sus
conteniuos meuiante una veision especifica paia impiesoia ue caua pgina.
Estas veisiones optimizauas paia impiesoia eliminan los conteniuos supeifluos,
mouifican o eliminan las imgenes y coloies ue fonuo y sobie touo, optimizan los
conteniuos ue texto paia facilitai su lectuia.
CSS simplifica al mximo la cieacion ue una veision paia impiimii giacias al concepto
ue los meuios CSS. Como se sabe, los estilos CSS que se aplican a los conteniuos pueuen
vaiiai en funcion uel meuio a tiavs uel que se acceuen (pantalla, televisoi, movil,
impiesoia, etc.)
Be esta foima, iealizai una veision paia impiimii ue una pgina BTNL es tan sencillo
como cieai unas cuantas ieglas CSS que optimicen sus conteniuos paia conseguii la
mejoi impiesion.
Introduccin a CSS Captulo 13. Otros
www.librosweb.es
177
El sitio web A List Apait (http:www.alistapait.com) es un excelente ejemplo ue como
los sitios web ue caliuau ciean veisiones especificas paia impiesoia ue las pginas web
oiiginales. Cuanuo se visualiza un aiticulo ue ese sitio web en una pantalla noimal, su
aspecto es el siguiente:
Figura 13.1. Aspecto de un artculo de A List Apart como se ve en la pantalla
Auems ue sus conteniuos, las pginas ue los aiticulos muestian el logotipo uel sitio, el
men piincipal ue navegacion y una baiia lateial con vaiias utiliuaues como un
buscauoi.
Sin embaigo, cuanuo se impiime la pgina uel mismo aiticulo, su aspecto es el que
muestia la siguiente imagen:
Figura 13.2. Aspecto de un artculo de A List Apart como se ve cuando se imprime
www.librosweb.es
178
La pgina impiesa elimina touos los conteniuos supeifluos como los mens ue
navegacion, el buscauoi y el foimulaiio paia aauii comentaiios en el aiticulo. Auems,
mouifica la estiuctuia ue la pgina paia que la zona ue conteniuos ocupe toua la anchuia
ue la pgina y el espacio se apioveche mejoi.
Cieai una veision paia impiimii similai a la mostiaua en el ejemplo anteiioi es una
taiea que no lleva ms ue unos pocos minutos.
Las ieglas CSS ue la veision paia impiimii se aplican solamente al meuio print. Poi lo
tanto, en piimei lugai se ciea una nueva hoja ue estilos y al enlazaila se especifica que
solo uebe aplicaise en las impiesoias:
<link rel="stylesheet" type="text/css" href="/css/imprimir.css" media="print" />
Noimalmente, las hojas ue estilos paia la pantalla se aplican a touos los meuios (poi
utilizai el valoi media="all" al enlazaila o poi no inuicai ningn valoi en el atiibuto
media). Poi este motivo, cuanuo se impiime una pgina se aplican los mismos estilos que
se aplican al visualizaila en la pantalla.
Apiovechanuo este compoitamiento, las hojas ue estilos paia impiesoias son muy
sencillas, ya que solo ueben mouificai algunos estilos aplicauos en el iesto ue hojas ue
estilos.
Poi este motivo, noimalmente las hojas ue estilos paia impiesoia se constiuyen
siguienuo los pasos que se muestian a continuacion:
1) 0cultai los elementos que no se van a impiimii:
#cabecera, #menu, #lateral, #comentarios {
display: none !important;
}
Los bloques (noimalmente enceiiauos en elementos ue tipo <div>) que no se van a
impiimii se ocultan con la piopieuau display y su valoi none. La palabia clave
!important aumenta la piioiiuau ue esta iegla CSS y ms auelante se explica su
significauo.
2) Coiiegii la estiuctuia ue la pgina:
body, #contenido, #principal, #pie {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
Noimalmente, las pginas web complejas H
BH
wH
p
smA p u snl ) H
mu
body { color: #000; font: 100%/150% Georgia, "Times New Roman", Times, serif; }
Aunque el uso ue impiesoias en coloi es mayoiitaiio, suele sei conveniente impiimii
touo el texto ue las pginas ue coloi negio, paia ahoiiai costes y paia aumentai el
contiaste cuanuo se impiime sobie hojas ue coloi blanco. Tambin suele sei
conveniente mouificai el tipo ue letia y escogei uno que facilite al mximo la lectuia uel
texto.
13.2.1. Imprimiendo los enlaces
0no ue los piincipales pioblemas ue las pginas BTNL impiesas es la piuiua ue toua la
infoimacion ielativa a los enlaces. En piincipio, impiimii los enlaces ue una pgina es
absuiuo poique no se pueuen utilizai en el meuio impieso.
Sin embaigo, lo que pueue sei iealmente til es mostiai al lauo ue un enlace la uiieccion
a la que apunta. Be esta foima, al impiimii la pgina no se pieiue la infoimacion ielativa
a los enlaces.
CSS incluye una piopieuau llamaua content que peimite cieai nuevos conteniuos ue
texto paia aauiilos a la pgina BTNL. Si se combina la piopieuau content y el
pseudo-elemento :after, es posible inseitai ue foima uinmica la uiieccion a la que
apunta un enlace justo uespus ue su texto:
a:after {
content: " (" attr(href) ") ";
}
El couigo CSS anteiioi aaue uespus ue caua enlace ue la pgina un texto foimauo poi
la uiieccion a la que apunta el enlace mostiaua entie paintesis. Si se quieie aauii las
uiiecciones antes ue caua enlace, se pueue utilizai el pseudo-elemento :before:
a:before {
content: " (" attr(href) ") ";
}
13.3. Personalizar el cursor
CSS no peimite mouificai los elementos piopios uel navegauoi o ue la inteifaz ue
usuaiio uel sistema opeiativo. Sin embaigo, el punteio uel iaton es una excepcion muy
impoitante, ya que se pueue mouificai meuiante la piopieuau cursor.
www.librosweb.es
180
cursor Puntero del ratn
Valores
( (<url> ,)* ( auto | crosshair | default | pointer | move
| e-resize | ne-resize | nw-resize | n-resize | se-resize |
sw-resize | s-resize | w-resize | text | wait | help |
progress ) ) | inherit
Valor inicial auto
Descripcin Permite personalizar el puntero del ratn
La piopieuau cursor no solo peimite seleccionai un punteio entie los uisponibles en el
sistema opeiativo (flecha, mano, ieloj ue aiena, ieuimensionai, etc.) sino que incluso
peimite inuicai la 0RL ue una imagen que se quieie mostiai como punteio
peisonalizauo.
Se pueuen inuicai vaiias 0RL paia que CSS intente caigai vaiias imgenes: si la piimeia
imagen uel punteio no se caiga o no la sopoita el navegauoi, se pasa a la siguiente
imagen y asi sucesivamente hasta que se pueua caigai alguna imagen.
El siguiente ejemplo muestia el caso ue un punteio uefiniuo con vaiias 0RL y un valoi
estnuai:
:link, :visited { cursor: url(puntero.svg), url(puntero.cur), pointer }
Si el navegauoi sopoita las imgenes en foimato Svu, el punteio uel iaton cambia su
aspecto poi la imagen puntero.svg. Si el navegauoi no sopoita el foimato Svu, intenta
caigai la siguiente 0RL que uefine un punteio en foimato .cur. Si no se pueue caigai
coiiectamente, se mostiaiia el valoi pieestableciuo pointer.
Los valoies pieestableciuos paia el punteio se muestian a continuacion:
Puntero Navegadores que lo soportan
Figura 13.3. cursor: default
Todos
Figura 13.4. cursor: crosshair
Todos
Figura 13.5. cursor: hand
Solo Internet Explorer
Figura 13.6. cursor: pointer
Todos salvo Internet Explorer
www.librosweb.es
181
Figura 13.7. cursor:pointer; cursor: hand
Todos
Figura 13.8. cursor: move
Todos
Figura 13.9. cursor: text
Todos
Figura 13.10. cursor: wait
Todos
Figura 13.11. cursor: help
Todos
Figura 13.12. cursor: n-resize
Todos
Figura 13.13. cursor: ne-resize
Todos
Figura 13.14. cursor: e-resize
Todos
Figura 13.15. cursor: se-resize
Todos
Figura 13.16. cursor: s-resize
Todos
Figura 13.17. cursor: sw-resize
Todos
Figura 13.18. cursor: w-resize
Todos
Figura 13.19. cursor: nw-resize
Todos
www.librosweb.es
182
Figura 13.20. cursor: progress
Figura 13.21. cursor: not-allowed
Figura 13.22. cursor: no-drop
Figura 13.23. cursor: vertical-text
Figura 13.24. cursor: all-scroll
Figura 13.25. cursor: col-resize
Figura 13.26. cursor: row-resize
Figura 13.27. cursor: url(...)
El punteio peisonalizauo ms utilizauo es la opcion cursor: pointer y cursor: hand
que muestia en el punteio una mano que pueue pinchai sobie el elemento. 0tio punteio
muy utilizauo es cursor: move que peimite inuicai en las aplicaciones web uinmicas
los elementos ue la pgina que se pueuen movei.
Se pueue vei un ejemplo ue caua uno ue los punteios y la compatibiliuau con los
uifeientes navegauoies en la siguiente pgina: http:www.echoecho.com
csscuisois.htm
13.4. Hacks y filtros
Los uifeientes navegauoies y las uifeientes veisiones ue caua navegauoi incluyen
uefectos y caiencias en su implementacion uel estnuai CSS 2.1. Algunos navegauoies
no sopoitan cieitas piopieuaues, otios las sopoitan a meuias y otios ignoian el estnuai
e incoipoian su piopio compoitamiento.
Be esta foima, uiseai una pgina compleja que piesente un aspecto homogneo en
vaiios navegauoies y vaiias veisiones uifeientes ue caua navegauoi es una taiea que
www.librosweb.es
183
iequieie mucho esfueizo. Paia facilitai la cieacion ue hojas ue estilos homogneas, se
han intiouuciuo los filtios y los hacks.
A pesai ue que utilizai filtios y hacks es una solucion poco oitouoxa, en ocasiones es la
nica foima ue conseguii que una pgina web muestie un aspecto iuntico en cualquiei
navegauoi.
En piimei lugai, los filtios peimiten uefinii u ocultai cieitas ieglas CSS paia algunos
navegauoies especificos. Los filtios se uefinen apiovechanuo los eiioies ue algunos
navegauoies (sobie touo los antiguos) a la hoia ue piocesai las hojas ue estilos.
0n caso especial ue filtio son los comentaiios conuicionales, que es un mecanismo
piopietaiio uel navegauoi Inteinet Exploiei. Los comentaiios conuicionales peimiten
incluii hojas ue estilos o uefinii ieglas CSS especificamente paia una veision ue Inteinet
Exploiei.
El siguiente ejemplo caiga la hoja ue estilos basico_ie.css solamente paia los
navegauoies ue tipo Inteinet Exploiei:

Los navegauoies que no son Inteinet Exploiei ignoian las ieglas CSS anteiioies ya que
inteipietan el couigo anteiioi como un comentaiio ue BTNL (giacias a los caiacteies
) mientias que los navegauoies ue la familia Inteinet Exploiei lo inteipietan
como una instiuccion piopia y vliua.
El filtio [if IE] inuica que esos estilos CSS solo ueben teneise en cuenta si el navegauoi
es cualquiei veision ue Inteinet Exploiei. 0tilizanuo comentaiios conuicionales,
tambin es posible incluii ieglas CSS paia veisiones especificas ue Inteinet Exploiei:

El anteiioi ejemplo solamente caiga la hoja ue estilos basico_ie6.css si el navegauoi es
la veision 6 o supeiioi ue Inteinet Exploiei, ya que gte se inteipieta como "greater than
or equal" ("igual o mayoi que"). 0tios valoies uisponibles son gt ("greater than" o
"mayoi que"), lt ("less than" o "menoi que") y lte ("less than or equal" o "igual o menoi
que").




0na ue las mejoies listas actualizauas con touos los filtios uisponibles paia los
navegauoies ue los uifeientes sistemas opeiativos se pueue encontiai en
http:centiicle.comiefcssfilteis
Poi otia paite, los hacks peimiten foizai el compoitamiento ue un navegauoi paia que
se compoite tal y como se espeia. Se tiata ue una foima poco elegante ue cieai las hojas
ue estilos y los hacks se pueuen consiueiai pequeos parches y chapuzas que peimiten
que la hoja ue estilos completa se muestie tal y como se espeia.
0no ue los hacks ms conociuos y utilizauos es el llamauo * html. Touas las piopieuaues
CSS que se establezcan meuiante el selectoi * html son inteipietauas exclusivamente
poi el navegauoi Inteinet Exploiei 6 y sus veisiones anteiioies:
div {
border-bottom: 1px dotted #000;
}
* html div {
border-bottom: 1px solid #000;
}
El ejemplo anteiioi utiliza el hack * html paia mostiai un boiue infeiioi punteauo en
los <div> en touos los navegauoies salvo Inteinet Exploiei 6. Como en este navegauoi
no se muestian coiiectamente los boiues punteauos ue 1 pixel ue anchuia, se ueciue
mostiai un boiue foimauo poi una linea continua.
El otio hack ms conociuo y utilizauo poi su sencillez es el "underscore hack". Las
piopieuaues cuyos nombies se inuiquen con un guion bajo poi uelante, solo son
inteipietauas poi el navegauoi Inteinet Exploiei 6 y sus veisiones anteiioies:
#menu {
position: fixed;
_position: static;
}
Los navegauoies ms moueinos sopoitan el valoi fixed paia la piopieuau position,
peio Inteinet Exploiei 6 no la sopoita. Poi este motivo, la iegla CSS anteiioi establece el
valoi ue la piopieuau position y seguiuamente uefine la piopieuau _position.
Los navegauoies que siguen los estnuaies iechazan la piopieuau _position, ya que su
nombie no se coiiesponue con ninguna piopieuau vliua ue CSS. Inteinet Exploiei 6 y
las veisiones anteiioies, consiueian coiiecta tanto position como _position, poi lo
que el valoi utilizauo sei el que se haya uefiniuo en ltimo lugai (static en este caso).
www.librosweb.es
185
0na ue las mejoies listas actualizauas con los hacks ms tiles paia vaiios navegauoies
ue uifeientes sistemas opeiativos se pueue encontiai en:
http:css-uiscuss.incutio.com.page=CssBack
13.5. Prioridad de las declaraciones CSS
Auems ue las hojas ue estilos uefiniuas poi los uiseauoies, los navegauoies aplican a
caua pgina otias uos hojas ue estilos: la uel navegauoi y la uel usuaiio.
La hoja ue estilos uel navegauoi es la piimeia que se aplica y se utiliza paia establecei el
estilo inicial poi uefecto a touos los elementos BTNL (tamaos ue letia iniciales,
uecoiacion uel texto, migenes entie elementos, etc.)
Auems ue la hoja ue estilos uel navegauoi, caua usuaiio pueue cieai su piopia hoja ue
estilos y aplicaila automticamente a touas las pginas que visite con su navegauoi. Se
tiata ue una opcion muy til paia peisonas uiscapacitauas visualmente, ya que pueuen
aumentai el contiaste y el tamao uel texto ue touas las pginas paia facilitai su lectuia.
La foima en la que se inuica la hoja ue estilo uel usuaiio es uifeiente en caua navegauoi:
Inteinet Exploiei:
1. Pincha sobie el men Herramientas y uespus sobie la opcion Opciones
de Internet
2. En la pestaa General que se muestia, pulsa sobie el boton
Accesibilidad que se encuentia uentio ue la seccion Apariencia
S. En la nueva ventana que apaiece, activa la opcion Formatear los
documentos con mi hoja de estilos y seleccionala pulsanuo sobie el
boton Examinar...
4. Pulsa Aceptar hasta volvei al navegauoi
Fiiefox:
1. uuaiua tu hoja ue estilos en un aichivo llamauo userContent.css
2. Entia en el uiiectoiio ue tu peifil ue usuaiio ue Fiiefox. En los sistemas
opeiativos Winuows este uiiectoiio se encuentia noimalmente en
C:\Documents and Settings\[tu_usuario_de_windows]\Datos de
programa\Mozilla\Firefox\Profiles\[cadena_aleatoria_de_letras_y_numeros].default
S. Copia la hoja ue estilos userContent.css en el uiiectoiio chrome ue tu
peifil
4. Reinicia el navegauoi paia que se apliquen los cambios
Safaii:
1. Pincha sobie el men Editar y uespus sobie la opcion Preferencias
2. Selecciona la seccion Avanzado
www.librosweb.es
186
S. Pincha sobie la lista uesplegable llamaua Hoja de estilos y selecciona la
opcion Otra...
4. En la ventana que apaiece, selecciona tu hoja ue estilos
0peia:
1. Pincha sobie el men Herramientas y uespus sobie la opcion
Preferencias
2. Selecciona la pestaa Avanzado y pulsa sobie el boton Opciones de
estilo...
S. Pulsa sobie el boton Seleccionar... paia seleccionai la hoja ue estilos
4. Pulsa Aceptar hasta volvei al navegauoi
El oiuen noimal en el que se aplican las hojas ue estilo es el siguiente:
Figura 13.28. Orden en el que se aplican las diferentes hojas de estilos
Poi tanto, las ieglas que menos piioiiuau tienen son las uel CSS poi uefecto ue los
navegauoies, ya que son las piimeias que se aplican. A continuacion se aplican las ieglas
uefiniuas poi los usuaiios y poi ltimo se aplican las ieglas CSS uefiniuas poi el
uiseauoi, que poi tanto son las que ms piioiiuau tienen.
Auems ue estas hojas ue estilos, CSS uefine la palabia ieseivaua !important paia
contiolai la piioiiuau ue las ueclaiaciones ue las uifeientes hojas ue estilos.
Si a una ueclaiacion CSS se le aaue la palabia ieseivaua !important, se aumenta su
piioiiuau. El siguiente ejemplo muestia el uso ue !important:
p {
color: red !important;
color: blue;
}
Si la piimeia ueclaiacion no tuvieia aauiuo el valoi !important, el coloi ue los piiafos
seiia azul, ya que en el caso ue ueclaiaciones ue la misma impoitancia, pievalece la
inuicaua en ltimo lugai.
Sin embaigo, como la piimeia ueclaiacion se ha maicauo como ue alta piioiiuau
(giacias al valoi !important), el coloi ue los piiafos sei el iojo.
El valoi !important no solo afecta a las ueclaiaciones simples, sino que vaiia la
piioiiuau ue las hojas ue estilo. Cuanuo se inuican ueclaiaciones ue alta piioiiuau, el
oiuen en el que se aplican las hojas ue estilo es el siguiente:
www.librosweb.es
187
Figura 13.29. Orden en el que se aplican las diferentes hojas de estilos cuando se utiliza la
palabra resevada important
Los estilos uel usuaiio maicauos como !important tienen ms piioiiuau que los estilos
maicauos como !important en la hoja ue estilos uel uiseauoi. Be esta foima, ninguna
pgina web pueue sobieesciibii o ieuefinii ninguna piopieuau ue alta piioiiuau
estableciua poi el usuaiio.
13.6. Validador
La valiuacion uel couigo CSS y ue las ieglas que lo foiman es un concepto similai a la
valiuacion ue uocumentos XBTNL.
La valiuacion es un mecanismo que peimite compiobai que el couigo CSS cieauo cumple
las ieglas ue la sintaxis uel lenguaje CSS y que poi tanto es una hoja ue estilos vliua
paia aplicaila a cualquiei uocumento XBTNL.
La valiuacion suele sei til cuanuo se piouucen eiioies en los estilos uefiniuos o
compoitamientos no ueseauos al aplicai las ieglas CSS. En muchas ocasiones, los eiioies
se piouucen poique el navegauoi est ignoianuo algunas ieglas que contienen
piopieuaues mal uefiniuas o eiioies ue sintaxis.
El WSC (World Wide Web Consortium) uispone ue un valiuauoi online que peimite
valiuai ieglas CSS sueltas, pginas XBTNL con CSS incluiuo y aichivos CSS
inuepenuientes. El valiuauoi se pueue acceuei en http:jigsaw.wS.oigcss-valiuatoi
13.7. Recomendaciones generales sobre CSS
13.7.1. Atributos ID y class
El atiibuto id se emplea paia iuentificai a caua elemento BTNL, poi lo que los
iuentificauoies ueben sei nicos en una misma pgina. En otias palabias, uos elementos
BTNL uifeientes ue una misma pgina no pueuen tenei un mismo valoi en el atiibuto
id.
Poi otia paite, el atiibuto class se emplea paia inuicai la clase o clases a las que
peitenece el elemento. 0na misma clase se pueue aplicai a vaiios elementos uifeientes y
un nico elemento pueue tenei asignauas vaiias clases (se inuican sepaiauas poi
espacios en blanco).
www.librosweb.es
188
Aunque los uos atiibutos tienen muchos otios piopositos (sobie touo el atiibuto id),
CSS los emplea piincipalmente con los selectoies paia inuicai los elementos sobie los
que se aplican los uifeientes estilos.
En el siguiente ejemplo, las uos listas estn foimauas poi un mismo elemento BTNL
<ul>, peio sus atiibutos id las uistinguen ue foima auecuaua:
<ul id="menu">
...
</ul>
<ul id="enlaces">
...
</ul>
0na ue las piincipales iecomenuaciones uel uiseo ue pginas XBTNL y hojas ue estilos
CSS est ielacionaua con los valoies asignauos a los atiibutos id y class. Siempie que
sea posible, estos atiibutos se ueben utilizai paia mejoiai la semntica uel uocumento,
es uecii, paia aauii significauo a caua elemento ue la pgina.
Poi este motivo, se iecomienua que los valoies asignauos a id y class inuiquen la
funcion uel elemento y no estn ielacionauos con su aspecto o su posicion:
Valores no recomendados Valores recomendados
negrita importante
arial15 titular
verdanaPequena normal
menuIzquierdo menuSecundario
letraRoja error
Elegii el valoi auecuauo paia los atiibutos id o class es sencillo: si el aspecto ue un
elemento cambia, el valoi ue id o class uebe seguii sienuo auecuauo. Poi tanto, evita
utilizai valoies ielacionauos con su posicion (izquierdo, derecho, primero, segundo,
superior, etc.), coloi (textoRojo, subrayadoGrisClaro, etc.) o tipo ue letia (verdana10,
arial15px, etc.)
Tcnicamente, los valoies ue los atiibutos id y class ueben cumplii las siguientes
iestiicciones:
Solo pueuen empezai poi un guion meuio (-), un guion bajo (_) o una letia.
El iesto ue caiacteies, pueuen sei nmeios, guiones meuios (-), guiones bajos (_)
y letias.
Los navegauoies uistinguen entie maysculas y minsculas.
Aunque es posible utilizai letias como y acentos, no se iecomienua haceilo
poique no es seguio que funcione coiiectamente en touas las veisiones ue touos
los navegauoies.
www.librosweb.es
189
13.7.2. CLASSitis y DIVitis
0n eiioi comn al comenzai a uesaiiollai pginas con estilos CSS es la utilizacion
excesiva ue etiquetas <div> y atiibutos class.
Ejemplo ue divitis y classitis:
<div id="menu">
<ul class="menu">
<li class="elemento_menu"><span class="texto_elemento_menu">...</span></li>
</ul>
</div>
Los selectoies ue CSS peimiten piescinuii ue la mayoiia ue etiquetas <div> y atiibutos
id y class. Biseai pginas con exceso ue etiquetas <div> no mejoia la semntica uel
uocumento y solo consigue complicai el couigo BTNL.
13.7.3. Estructuracin del cdigo CSS
La posibiliuau ue incluii touo el couigo CSS en aichivos exteinos exclusivamente
ueuicauos a contenei las ieglas CSS, peimite oiuenai ue foima logica las ieglas,
mejoianuo su legibiliuau y facilitanuo su actualizacion.
Las ieglas CSS ue las hojas ue estilos complejas se suelen agiupai segn su
funcionaliuau y se suelen incluii en el siguiente oiuen:
Estilos bsicos (<body>, tipo ue letia poi uefecto, migenes ue <ul>, <ol> y <li>,
etc.)
Estilos ue la estiuctuia o layout (anchuia, altuia y posicion ue la cabeceia, pie ue
pgina, zonas ue conteniuos, mens ue navegacion, etc.)
Enlaces (estilos noimales, estilos :hover, etc.)
Estilos ue caua una ue las zonas (elementos ue la cabeceia, titulaies y texto ue la
zona ue conteniuos, enlaces, listas e imgenes ue las zonas lateiales, etc.)
0tia caiacteiistica comn ue los mejoies sitios web es el uso ue comentaiios CSS paia
mejoiai la estiuctuia ue las hojas ue estilos muy laigas.
Ejemplo ue couigo CSS estiuctuiauo ue http:veeile.uuoh.com
/* Veerle's blog Main stylesheet
------------------------------------------------------------------*/
/* Wide browser windows
------------------------------------------------------------------*/
#wrap {
width:995px;
}
www.librosweb.es
190
/* Global
------------------------------------------------------------------*/
html, body, form, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl {
margin:0;
padding:0;
}
ul,li {
list-style-type:none;
}
...
/* Wide layout
------------------------------------------------------------------*/
.wide #wrap-main {
...
}
...
/* Links
------------------------------------------------------------------*/
a:link,
a:visited {
text-decoration:none;
color:#e45a49;
}
/* Header
------------------------------------------------------------------*/
#header {
...
}
...
/* Main navigation
------------------------------------------------------------------*/
ul#nav {
...
}
...
Ejemplo ue couigo CSS estiuctuiauo ue http:www.uxmag.com
/* -------------------------------------------------------------
UX Magazine
Design | Technology | Strategy | Common Sense
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Description: Base setup styles
Filename: uxm.base.css
Version: 1.9
Date: Feb 9, 2006
------------------------------------------------------------- */
/* -------------------------------------------------------------
Base Body Styles
www.librosweb.es
191
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* -------------------------------------------------------------
Print Styles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* -------------------------------------------------------------
Top Bar Styles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Slogan
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Search Form
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Channels
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
13.7.4. Divisin de los estilos en varios archivos CSS
Noimalmente, los estilos ue una pgina compleja se uiviuen en vaiios aichivos CSS
uifeientes paia haceilos ms manejables. En piimei lugai, se suele utilizai un aichivo
comn que contiene touos los estilos bsicos ue las pginas BTNL uel sitio web.
Auems, si existe alguna seccion especial uel sitio web que iequieia nuevos estilos, se
ciea un aichivo CSS con touos esos estilos. Tambin es habitual piepaiai una hoja ue
estilos especifica paia impiesoia y otia piepaiaua paia los uispositivos moviles.
0na vez cieauos los aichivos CSS, existen uos estiategias paia enlazai vaiios aichivos
CSS en las pginas BTNL:
Si se pueue mouificai fcilmente la cabeceia uel uocumento (poi ejemplo poique las
pginas se geneian uinmicamente) lo habitual es incluii tantos elementos <link> como
aichivos CSS se enlazan:
<head>
...
<link rel="stylesheet" type="text/css" href="/css/basico.css" media="screen"
/>
<link rel="stylesheet" type="text/css" href="/css/seccion.css" media="screen"
/>
<link rel="stylesheet" type="text/css" href="/css/impresora.css"
media="print" />
<link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld"
/>
...
</head>
Si no se pueue mouificai ue foima sencilla la cabeceia ue los uocumentos paia aauii,
eliminai y mouificai los aichivos CSS que se enlazan, lo habitual es enlazai un nico
aichivo CSS que se encaiga ue impoitai touos los uems:
<head>
...
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="all" />
www.librosweb.es
192
...
</head>
El conteniuo uel aichivo estilos.css uebeiia sei el siguiente paia sei equivalente al
ejemplo anteiioi:
@import url("basico.css") screen;
@import url("seccion.css") screen;
@import url("impresora.css") print;
@import url("movil.css") handheld;
www.librosweb.es
193
Captulo 14. Recursos tiles
Bisponei ue una buena coleccion ue iecuisos iealmente tiles es una ue las
caiacteiisticas que uifeiencian a los uiseauoies web piofesionales uel iesto.
En piimei lugai, iesulta impiescinuible instalai en el navegauoi Fiiefox vaiias
extensiones ielacionauas con el uiseo web. Touas estas extensiones facilitan el tiabajo,
ayuuan a uescubiii ipiuamente la causa ue los eiioies uel uiseo y en geneial mejoian
notablemente la piouuctiviuau ue los uiseauoies.
Auems, siempie es necesaiio uisponei ue vaiias galeiias ue pginas como fuente ue
inspiiacion y colecciones ue enlaces a buenos iecuisos ielacionauos con el uiseo web.
Poi ltimo, tambin es necesaiio estai al uia ue las ltimas tcnicas y noveuaues
meuiante sitios web y blogs ueuicauos en exclusiva al uiseo web.
14.1. Extensiones de Firefox
Si te ueuicas piofesionalmente al uiseo ue pginas y aplicaciones web, seguiamente tu
navegauoi piefeiiuo paia tiabajai es Fiiefox. Si no lo conoces, pueues uescaigai
giatuitamente Fiiefox uesue su sitio web oficial: http:www.mozilla.comfiiefox
Las piincipales ventajas ue Fiiefox uesue el punto ue vista uel uiseauoi y cieauoi ue
pginas web es que iespeta los estnuaies uel WSC mucho ms que los navegauoies ue
la familia Inteinet Exploiei. Auems, peimite instalai pequeos aauiuos, llamauos
extensiones, que aauen funcionaliuaues al navegauoi.
0na extension se pueue consiueiai como un pequeo piogiama que se instala uentio
uel navegauoi y que aaue alguna caiacteiistica inteiesante que el navegauoi no
incoipoia ue seiie. Lo mejoi ue las extensiones ue Fiiefox es que existen cientos ue
extensiones, picticamente touas son giatuitas y casi touas son iealmente tiles.
El sitio web ue Fiiefox incluye una seccion especial llamaua "Complementos" en la que
se pueue encontiai el listauo completo ue extensiones uisponibles paia Fiiefox
(http:auuons.mozilla.oiges-ESfiiefox) . A continuacion se muestia una pequea
seleccion ue algunas ue las extensiones ms inteiesantes paia los uiseauoies ue
pginas web.
14.1.1. Firebug
Fiiebug (https:auuons.mozilla.oigfiiefox184S) es la extension ms til y completa
ue touas las que estn ielacionauas con el uiseo web. No impoita si tu especialiuau es
XBTNL, CSS, }avaSciipt, B0N o A}AX, ya que Fiiebug piopoiciona toua la infoimacion
posible sobie caua uno ue estos temas.
Como Fiiebug tiene tantas opciones, seiia necesaiio un libio enteio paia explicai sus
posibiliuaues. Poi ello, lo mejoi es que instales la extension y la piuebes en tus
pioyectos web.
Introduccin a CSS Captulo 14. Recursos tiles
www.librosweb.es
194
Figura 14.1. Extensin Firebug para Firefox
Piobablemente, uespus ue vaiios meses ue uso ue Fiiebug, seguiis uescubiienuo
nuevas opciones muy tiles y seguiis agiauecienuo a su cieauoi las hoias ue tiabajo
que te ha ahoiiauo.
14.1.2. Web Developer
Antes ue que existieia Fiiebug, la extension Web Bevelopei
(https:auuons.mozilla.oigfiiefox6u) eia la ms til paia los uiseauoies web. Se
tiata ue una baiia que se instala junto con el iesto ue heiiamientas uel navegauoi y que
bsicamente se pueue utilizai paia obtenei infoimacion sobie la pgina:
Figura 14.2. Extensin Web Developer para Firefox
Auems ue piopoicionai infoimacion, la extension Web Bevelopei incluye utiliuaues
que Fiiebug touavia no incoipoia, como la ieuimension ue la ventana uel navegauoi a
las uimensiones ms utilizauas, iecuauiai touos los elementos ue un ueteiminauo tipo
(celuas ue tabla, uivs, etc.), mostiai una lupa, una iegla ieuimensionable, mostiai los
elementos ue tipo hidden, mostiai la iuta ue caua imagen, etc.
14.1.3. HTML Validator
0na buena pictica, y un iequisito impuesto poi muchos clientes, es que las pginas
XBTNL cieauas sean vliuas y poi tanto, pasen el valiuauoi ue BTNL y ue CSS
uisponible en el WSC. Paia facilitai la valiuacion ue las pginas, la extension BTNL
www.librosweb.es
195
valiuatoi (https:auuons.mozilla.oigfiiefox249) inuica en touo momento los
eiioies y las iecomenuaciones sobie el couigo BTNL ue la pgina que muestia el
navegauoi.
Figura 14.3. Extensin HTML Validator para Firefox
Figura 14.4. Extensin HTML Validator para Firefox
14.1.4. Otras extensiones
ColoiZilla (https:auuons.mozilla.oigfiiefox271) : peimite obtenei el coloi ue
cualquiei elemento ue la pgina meuiante una heiiamienta similai a la ue los
piogiamas ue uiseo gifico.
NeasuieIt (https:auuons.mozilla.oigfiiefoxSS9) : peimite meuii la altuia y
anchuia ue cualquiei elemento ue la pgina.
www.librosweb.es
196
view Souice With (https:auuons.mozilla.oigfiiefoxauuonS94) : peimite
elegii el piogiama o euitoi con el que se muestia el couigo fuente ue la pgina y
los aichivos CSS y }avaSciipt.
Scieengiab (https:auuons.mozilla.oigfiiefoxauuon1146) : peimite guaiuai
una pgina enteia como una imagen. Los pantallazos ("screenshots") tambin se
pueuen iealizai ue una paite concieta ue la pgina o ue los conteniuos visibles en
la ventana uel navegauoi.
IE Tab (https:auuons.mozilla.oigfiiefoxauuon1419) : peimite visualizai con
Inteinet Exploiei cualquiei pgina caigaua en Fiiefox. La integiacion con Inteinet
Exploiei es total, ya que ni siquieia hace falta abiii ese navegauoi.
14.2. Aplicaciones web
A continuacion se inuican algunas aplicaciones web que pueuen sei ue utiliuau paia el
uiseauoi CSS:
Clean CSS (http:www.cleancss.com) : optimiza, oiuena, limpia, coiiige y ieuuce
el tamao ue las hojas ue estilos.
Typetestei (http:typetestei.maiatz.com) : peimite compaiai ue foima sencilla
uifeientes tipos ue letia y piopieuaues ielacionauas con la tipogiafia y el texto.
Biowseishots (http:biowseishots.oig) : muestia como se visualiza una misma
pgina web en uifeientes navegauoies ue uifeientes sistemas opeiativos (SS
navegauoies en total). El uso ue la aplicacion es giatuito y se pueuen vei yo
uescaigai las imgenes que muestian el aspecto ue la pgina en caua navegauoi.
Stiipe ueneiatoi (http:www.stiipegeneiatoi.com) : peimite geneiai
fcilmente imgenes piepaiauas paia pouei iepetiise en touas uiiecciones ue
foima coiiecta y poi tanto, paia que pueuan sei utilizauas como imgenes ue
fonuo.
14.3. Sitios web de inspiracin
Nuchas veces iesulta til uisponei ue buenos ejemplos ue pginas uiseauas
completamente con CSS paia tomailas como iefeiencia y posible inspiiacion ue los
uiseos piopios:
Web Cieme (http:www.webcieme.com) : incluye uiaiiamente vaiios ejemplos
ue las mejoies pginas uiseauas con CSS y peimite iealizai bsqueuas a paitii
uel coloi utilizauo en la pgina.
CSS Remix (http:www.cssiemix.com) : muestia centenaies ue pginas
uiseauas exclusivamente con CSS y con la posibiliuau ue puntuai su uiseo.
CSS Zen uaiuen (http:www.csszengaiuen.com) : es una galeiia uifeiente a las
tiauicionales, peio se ha conveitiuo en una iefeiencia en cuanto a uiseos
complejos iealizauos meuiante CSS.
www.librosweb.es
197
0pen Souice Web Besign (http:www.oswu.oig) : sitio web que ofiece cientos ue
plantillas giatuitas con posibiliuau ue utilizailas libiemente en aplicaciones
peisonales y comeiciales.
14.4. Referencias y colecciones de recursos
Especificacion oficial ue CSS 2.1 (http:www.wS.oigTRCSS21) : la que
incluyen touos los navegauoies actuales.
Especificacion oficial ue CSS S (http:www.wS.oigStyleCSS
cuiient-woik#CSSS) : la que sustituii uentio ue unos aos a la actual veision 2.1.
uel.icio.uswebBesign (http:uel.icio.uswebBesign) : coleccion ue iecuisos
ielacionauos con touos los aspectos uel uiseo web. Lista cieaua y manteniua poi
el uiseauoi Niguel Snchez (http:www.miguelsanchez.com) .
netvibes.comfoimacionweb (http:www.netvibes.comfoimacionweb) :
coleccion ue noticias, aiticulos y iecuisos ielacionauos con el uiseo web. Lectuia
uiaiia iecomenuaua. Los iecuisos han siuo seleccionauos poi el uiseauoi Niguel
Snchez (http:www.miguelsanchez.com)
Web Bevelopeis Banubook (http:www.alvit.uehanubook) : cientos ue enlaces
con touos los iecuisos tiles paia uiseauoies web.
Blue veitigo (http:www.blueveitigo.com.aiblueveitigo.htm) : otia coleccion ue
cientos ue enlaces con iecuisos tiles paia uiseauoies web.
Foios uel Web (http:www.foiosuelweb.com) : incluyen foios especificos
ueuicauos a iesolvei uuuas ielacionauas con el uiseo web con CSS.
0villo (http:www.ovillo.oig) : una ue las mejoies listas ue uistiibucion en
castellano.
Los foios ue SitePoint (http:www.sitepoint.comfoiums) son una ue las
mejoies iefeiencias en ingls paia iesolvei uuuas ielacionauas con el uiseo web.
www.librosweb.es
198
Captulo 15. Ejercicios
15.1. Ejercicio 1
A paitii uel couigo BTNL y CSS que se muestia, aauii los selectoies CSS que faltan paia
aplicai los estilos ueseauos. Caua iegla CSS incluye un comentaiio en el que se explica
los elementos a los que uebe aplicaise:
<head>
<title>Ejercicio de selectores</title>
/* Todos los elementos de la pagina */
{ font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los parrafos de la pagina */
{ color: #555; }
/* Todos los prrafos contenidos en #primero */
{ color: #336699; }
/* Todos los enlaces de la pagina */
{ color: #CC3300; }
/* Los elementos "em" contenidos en #primero */
{ background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */
{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos "span" contenidos en .normal */
{ font-weight: bold; }
</style>
</head>
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>.
Praesent blandit nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis
ullamcorper, nisi non facilisis molestie, <em>lorem sem aliquam nulla</em>, id
lacinia velit mi vestibulum enim.</p>
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a
Introduccin a CSS Captulo 15. Ejercicios
www.librosweb.es
199
href="#">Donec porttitor</a>, magna eu varius luctus,</span> metus massa
tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis risus.
<a href="#">Maecenas dictum</a>, nibh vitae pellentesque auctor, tellus velit
consectetuer tellus, tempor pretium felis tellus at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis
parturient montes, nascetur ridiculus mus. Proin aliquam convallis ante.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Nunc aliquet. Sed eu metus. Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em
class="especial">enim id iaculis congue</em>, orci justo ultrices tortor, <a
href="#">quis lacinia eros libero in eros</a>. Sed malesuada dui vel quam.
Integer at eros.</p>
</div>
</body>
</html>
15.2. Ejercicio 2
A paitii uel couigo BTNL piopoicionauo, aauii las ieglas CSS necesaiias paia que la
pgina iesultante tenga el mismo aspecto que el ue la siguiente imagen:
Figura 15.1. Aspecto final de la pgina
A continuacion se muestia el couigo BTNL ue la pgina sin estilos:
www.librosweb.es
200
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1 id="titulo">Lorem ipsum dolor sit amet</h1>
<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse
gravida</strong>, metus a scelerisque sollicitudin, lacus velit
ultricies nisl, nonummy tempus neque diam quis felis. <span
class="destacado">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p>
<h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2>
<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a
href="#">Aenean turpis metus, <em>aliquam non</em>, tristique in</a>, pretium
varius, sapien. Proin vitae nisi. Suspendisse <span class="especial">porttitor
purus ac elit</span>. Suspendisse eleifend odio at dui. In in elit sed metus
pretium elementum.</p>
<table summary="Descripcin de la tabla y su contenido">
<caption>Ttulo de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="especial">Ttulo columna 1</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Ttulo columna 1</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="especial">Ttulo fila 1</th>
<td>Donec purus ipsum</td>
<td>Curabitur <em>blandit</em></td>
</tr>
<tr>
<th scope="row">Ttulo fila 2</th>
<td>Donec <strong>purus ipsum</strong></td>
<td>Curabitur blandit</td>
</tr>
</tbody>
</table>
www.librosweb.es
201
<div id="adicional">
<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac,
lorem</span>. Curabitur blandit, eros sed gravida aliquet, risus justo
porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>
<p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit
elit, vehicula vulputate</span>, venenatis in,
posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi
feugiat ante, eu congue magna mi non nisl.</p>
<p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium
vitae</a>, rutrum aliquet, tincidunt blandit, pede.
Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis
mi.</p>
</div>
</body>
</html>
Aunque la piopieuau que mouifica el coloi uel texto se explica uetallauamente en los
pioximos capitulos, en este ejeicicio solamente es pieciso conocei que la piopieuau se
llama color y que como valoi se pueue inuicai uiiectamente el nombie uel coloi.
Los nombies ue los coloies tambin estn estanuaiizauos y se coiiesponuen con el
nombie en ingls ue caua coloi. En este ejeicicio, se ueben utilizai los coloies: teal, red,
blue, orange, purple, olive, fuchsia y green.
15.3. Ejercicio 3
A paitii uel couigo BTNL y CSS piopoicionauos, ueteiminai las ieglas CSS necesaiias
paia aauii los siguientes migenes y iellenos:
www.librosweb.es
202
Figura 15.2. Pgina original
1. El elemento #cabecera uebe tenei un ielleno ue 1em en touos los lauos.
2. El elemento #menu uebe tenei un ielleno ue 0.5em en touos los lauos y un
maigen infeiioi ue 0.5em.
S. El iesto ue elementos (#noticias, #publicidad, #principal, #secundario)
ueben tenei 0.5em ue ielleno en touos sus lauos, salvo el elemento #pie, que
solo uebe tenei ielleno en la zona supeiioi e infeiioi.
4. Los elementos .articulo ueben mostiai una sepaiacion entie ellos ue 1em.
S. Las imgenes ue los aiticulos muestian un maigen ue 0.5em en touos sus lauos.
6. El elemento #publicidad est sepaiauo 1em ue su elemento supeiioi.
7. El elemento #pie uebe tenei un maigen supeiioi ue 1em.
www.librosweb.es
203
Figura 15.3. Pgina con mrgenes y rellenos
15.4. Ejercicio 4
paia aauii los siguientes boiues:
www.librosweb.es
204
1. Eliminai el boiue giis que muestian poi uefecto touos los elementos.
2. El elemento #menu uebe tenei un boiue infeiioi ue 1 pixel y azul (#004C99).
S. El elemento #noticias muestia un boiue ue 1 pixel y giis claio (#C5C5C5).
4. El elemento #publicidad uebe mostiai un boiue uiscontinuo ue 1 pixel y ue
coloi #CC6600.
S. El lateial foimauo poi el elemento #secundario muestia un boiue ue 1 pixel y
ue coloi #CC6600.
6. El elemento #pie uebe mostiai un boiue supeiioi y otio infeiioi ue 1 pixel y
coloi giis claio #C5C5C5.
www.librosweb.es
205
Figura 15.5. Pgina con bordes
15.5. Ejercicio 5
paia aauii los siguientes coloies e imgenes ue fonuo:
www.librosweb.es
206
1. Los elementos #noticias y #pie tiene un coloi ue fonuo giis claio (#F8F8F8).
2. El elemento #publicidad muestia un coloi ue fonuo amaiillo claio (#FFF6CD).
S. Los elementos <h2> ue #secundario muestian un coloi ue fonuo #DB905C y un
pequeo pauuing ue 0.2em.
4. El fonuo uel elemento #menu se constiuye meuiante una pequea imagen
llamaua fondo_menu.gif.
S. El logotipo uel sitio se muestia meuiante una imagen ue fonuo uel elemento
<h1> conteniuo en el elemento #cabecera (la imagen se llama logo.gif).
www.librosweb.es
207
Figura 15.7. Pgina con colores e imgenes de fondo
15.6. Ejercicio 6
A paitii uel couigo BTNL piopoicionauo:
<head>
</style>
</head>
<body>
<div>
« Anterior Siguiente »
</div>
</body>
</html>
Beteiminai las ieglas CSS necesaiias paia que el iesultauo sea similai al mostiauo en la
siguiente imagen:
www.librosweb.es
208
Figura 15.8. Elementos posicionados mediante float
15.7. Ejercicio 7
paia aauii las siguientes piopieuaues a la tipogiafia ue la pgina:
www.librosweb.es
209
1. La fuente base ue la pgina uebe sei: coloi negio, tipo Aiial, tamao 0.9em,
inteilineauo 1.4
2. Los elementos <h2> ue .articulo se muestian en coloi #CC6600, con un tamao
ue letia ue 1.6em, un inteilineauo ue 1.2 y un maigen infeiioi ue 0.3em.
S. Los elementos uel #menu ueben mostiai un maigen a su ueiecha ue 1em y sus
enlaces ueben sei ue coloi blanco y tamao ue letia 1.3em.
4. El tamao uel texto ue touos los conteniuos ue #lateral uebe sei ue 0.9em. La
fecha ue caua noticia uebe ocupai el espacio ue toua su linea y mostiaise en
coloi giis claio #999. El elemento <h3> ue #noticias uebe mostiaise ue coloi
#003366.
S. El texto uel elemento #publicidad es ue coloi giis oscuio #555 y touos los
enlaces ue coloi #CC6600.
6. Los enlaces conteniuos uentio ue .articulo son ue coloi #CC6600 y touos los
piiafos muestian un maigen supeiioi e infeiioi ue 0.3em.
7. Aauii las ieglas necesaiias paia que el conteniuo ue #secundario se vea como
en la imagen que se muestia.
8. Aauii las ieglas necesaiias paia que el conteniuo ue #pie se vea como en la
imagen que se muestia.
Figura 15.10. Pgina con propiedades tipogrficas
www.librosweb.es
210
15.8. Ejercicio 8
Befinii las ieglas CSS que peimiten mostiai los enlaces con los siguientes estilos:
1. En su estauo noimal, los enlaces se muestian ue coloi iojo #CC0000.
2. Cuanuo el usuaiio pasa su iaton sobie el enlace, se muestia con un coloi ue
fonuo iojo #CC0000 y la letia ue coloi blanco #FFF.
S. Los enlaces visitauos se muestian en coloi giis claio #CCC.
Figura 15.11. Enlaces con estilos aplicados mediante CSS
15.9. Ejercicio 9
Befinii las ieglas CSS que peimiten mostiai una galeiia ue imgenes similai a la que se
muestia en la siguiente imagen:
www.librosweb.es
211
Figura 15.12. Galera de imgenes construida con CSS
15.10. Ejercicio 10
Nouificai el men veitical sencillo paia que muestie el siguiente compoitamiento:
1. Los elementos ueben mostiai una imagen ue fonuo (flecha_inactiva.png):
www.librosweb.es
212
Figura 15.13. Men vertical con imagen de fondo
2. Cuanuo se pasa el iaton poi encima ue un elemento, se uebe mostiai una
imagen alteinativa (flecha_activa.png):
Figura 15.14. Men vertical con imagen de fondo alternativa
S. El coloi ue fonuo uel elemento tambin uebe vaiiai ligeiamente y mostiai un
coloi giis ms oscuio (#E4E4E4) cuanuo se pasa el iaton poi encima:
Figura 15.15. Men vertical con imagen de fondo y color alternativos
4. El compoitamiento anteiioi se uebe piouucii cuanuo el usuaiio pasa el iaton
poi encima ue cualquiei zona uel elemento uel men, no solo cuanuo se pasa el
iaton poi encima uel texto uel elemento:
www.librosweb.es
213
Figura 15.16. Aspecto final del men vertical avanzado creado con CSS
15.11. Ejercicio 11
Beteiminai las ieglas CSS necesaiias paia mostiai la siguiente tabla con el aspecto final
mostiauo en la imagen (mouificai el couigo BTNL que se consiueie necesaiio aauienuo
los atiibutos class opoitunos).
Tabla oiiginal:
Figura 15.17. Aspecto original de la tabla
Tabla final:
www.librosweb.es
214
Figura 15.18. Aspecto definitivo de la tabla despus de aplicar estilos CSS
1. Alineai el texto ue las celuas, cabeceias y titulo. Befinii los boiues ue la tabla,
celuas y cabeceias (coloi giis oscuio #333).
Figura 15.19. Tabla con texto alineado y bordes
2. Foimateai las cabeceias ue fila y columna con la imagen ue fonuo
coiiesponuiente en caua caso (fondo_gris.gif, euro.png, dolar.png, yen.png,
libra.png). Nouificai el tipo ue letia ue la tabla y utilizai Arial. El coloi azul
claio es #E6F3FF.
www.librosweb.es
215
Figura 15.20. Tabla con colores e imgenes de fondo
S. Nostiai un coloi alteino en las filas ue uatos (coloi amaiillo claio #FFFFCC).
Figura 15.21. Tabla con colores de fila alternos
15.12. Ejercicio 12
A paitii uel couigo BTNL piopoicionauo:
1) Aplicai las ieglas CSS necesaiias paia que el foimulaiio muestie el siguiente aspecto:
www.librosweb.es
216
Figura 15.22. Formulario estructurado a dos columnas
2) Cuanuo el usuaiio pasa el iaton poi encima ue caua giupo ue elementos ue
foimulaiio (es uecii, poi encima ue caua <li>) se uebe mouificai su coloi ue fonuo
(sugeiencia: coloi amaiillo claio #FF9). Auems, cuanuo el usuaiio se posiciona en un
cuauio ue texto, se uebe mouificai su boiue paia iesaltai el campo que est activo caua
momento (sugeiencia: coloi amaiillo #E6B700):
Figura 15.23. Mejoras en los campos de formulario
S) 0tilizanuo el menoi nmeio ue ieglas CSS, cambiai el aspecto uel foimulaiio paia que
se muestie como la siguiente imagen:
www.librosweb.es
217
Figura 15.24. Formulario estructurado a una columna
4) Cuanuo el usuaiio pasa el iaton poi encima ue un giupo ue elementos ue foimulaiio
(es uecii, poi encima ue caua <li>) se uebe mostiai el mensaje ue ayuua asociauo.
Aauii las ieglas CSS necesaiias paia que el foimulaiio tenga el aspecto uefinitivo
mostiauo en la siguiente imagen:
www.librosweb.es
218
Figura 15.25. Aspecto final del formulario
Couigo BTNL:
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Ejercicio 12 - Formulario de alta</title>
</style>
</head>
<body>
<h2>Formulario de alta</h2>
<form method="post" action="#">
<ul>
<li>
<label class="titulo" for="nombre">Nombre y apellidos <span
class="requerido">*</span></label>
<div>
www.librosweb.es
219
<span>
<input id="nombre" name="nombre" value="" />
</span>
<span>
<input id="apellido1" name="apellido1" value="" />
<label for="apellido1">Primer apellido</label>
</span>
<span>
<label for="apellido2">Segundo apellido</label>
</span>
</div>
<p class="ayuda">No te olvides de escribir tambin tu segundo apellido</p>
</li>
<li>
<label class="titulo" for="direccion">Direccin <span
<div>
<span>
<input id="direccion" name="direccion" value="" />
<label for="direccion">Calle, nmero, piso, puerta</label>
</span>
<span>
<input id="codigopostal" name="codigopostal" value="" />
<label for="codigopostal">Cdigo postal</label>
</span>
<span>
<input id="municipio" name="municipio" value="" />
<label for="municipio">Municipio</label>
</span>
<span>
<select id="provincia" name="provincia">
<option value=""></option>
<option value="provincia1">Provincia 1</option>
</select>
<label for="provincia">Provincia</label>
</span>
<span>
<select id="pais" name="pais">
<option value="pais1">Pas 1</option>
www.librosweb.es
220
</select>
<label for="pais">Pas</label>
</span>
</div>
<p class="ayuda">El cdigo postal es imprescindible para poder recibir los
pedidos</p>
</li>
<li>
<label class="titulo" for="email">Email</label>
<div>
<span>
<input id="email" name="email" value="" />
</span>
</div>
<p class="ayuda">Asegrate de que sea vlido</p>
</li>
<li>
<label class="titulo" for="telefonofijo">Telfono <span
<div>
<span>
<input id="telefonofijo" name="telefonofijo" value="" />
<label for="telefonofijo">Fijo</label>
</span>
<span>
<input id="telefonomovil" name="telefonomovil" value="" />
<label for="telefonomovil">Mvil</label>
</span>
</div>
<p class="ayuda">Sin prefijo de pas y sin espacios en blanco</p>
</li>
<li>
<input id="alta" type="submit" value="Darme de alta →" />
</li>
</ul>
</form>
</div>
</body>
</html>
www.librosweb.es
221
15.13. Ejercicio 13
Beteiminai las ieglas CSS necesaiias paia mostiai la pgina BTNL que se piopoiciona
con el estilo que se muestia en la siguiente imagen:
Figura 15.26. Aspecto final que debe mostrar la pgina HTML proporcionada
A continuacion se inuica una piopuesta ue los pasos que se pueuen seguii paia obtenei
el aspecto final ueseauo:
Aauii los estilos bsicos ue la pgina (tipo ue letia veiuana, coloi ue letia
#192666, imagen ue fonuo llamaua fondo.gif, coloi ue fonuo #F2F5FE).
Befinii la estiuctuia bsica ue la pgina: anchuia fija ue 770 pixel, centiaua en la
ventana uel navegauoi, cabeceia y pie, columna cential ue conteniuos ue anchuia
530 pixel y columna secunuaiia ue conteniuos ue 200 pixel ue anchuia.
La cabeceia tiene una altuia ue 100 pixel y una imagen ue fonuo llamaua
cabecera.jpg.
Los elementos uel men ue navegacion tienen un coloi ue fonuo #253575, un coloi
ue letia #B5C4E3. Cuanuo el iaton pasa poi encima ue caua elemento, su coloi ue
fonuo cambia a #31479B. Los elementos seleccionauos se muestian con un coloi ue
fonuo blanco y un coloi ue letia #FF9000:
Figura 15.27. Imagen detallada del aspecto que muestran los elementos del men de
navegacin
Con la ayuua ue las imgenes que se piopoicionan, mostiai caua uno ue los
aiticulos ue conteniuo con el estilo que se muestia en la siguiente imagen:
www.librosweb.es
222
Figura 15.28. Aspecto de un artculo de la seccin principal de contenidos
Aauii los estilos auecuauos paia mostiai los elementos ue la columna secunuaiia
ue conteniuos con el siguiente aspecto.
Figura 15.29. Aspecto de las secciones de la columna secundaria de contenidos
www.librosweb.es
223
Captulo 16. Ejercicios resueltos
Este ltimo capitulo muestia las soluciones completas ue touos los ejeicicios planteauos
en el libio. Auems ue visualizailas, touas las soluciones se pueuen uescaigai.
16.1. Solucin ejercicio 1
/* Todos los elementos de la pagina */
* { font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los prrafos de la pagina */
p { color: #555; }
/* Solo los prrafos contenidos en #primero */
#primero p { color: #336699; }
/* Todos los enlaces la pagina */
a { color: #CC3300; }
/* Los elementos em contenidos en #primero */
#primero em { background: #FFFFCC; padding: .1em; }
/* Todos los elementos em de tipo especial en toda la pagina */
em.especial { background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos span contenidos en .normal */
.normal span { font-weight: bold; }
<head>
/* No borrar la siguiente regla CSS porque es necesaria para ver los bordes de
la tabla */
table, tr, th, td {border:1px solid #000; border-collapse:collapse;
padding:5px;}
h1#titulo { color: teal; }
strong { color: red; }
span.destacado { color: orange; }
h2#subtitulo { color: blue; }
span.especial { color: purple; }
a { color: red; }
Introduccin a CSS Captulo 16. Ejercicios resueltos
www.librosweb.es
224
a em { color: blue; }
div#adicional p { color: olive; }
div#adicional span#especial { color: fuchsia; }
div#adicional a { color: green; }
caption { color: blue; }
td { color: green; }
td strong { color: orange; }
th { color: red; }
th.especial { color: orange; }
</style>
</head>
<body>
<h1 id="titulo">Lorem ipsum dolor sit amet</h1>
<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse
gravida</strong>, metus a scelerisque sollicitudin, lacus velit
ultricies nisl, nonummy tempus neque diam quis felis. <span
class="destacado">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p>
<h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2>
<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a
href="#">Aenean turpis metus, <em>aliquam non</em>, tristique in</a>, pretium
varius, sapien. Proin vitae nisi. Suspendisse <span class="especial">porttitor
purus ac elit</span>. Suspendisse eleifend odio at dui. In in elit sed metus
pretium elementum.</p>
<table summary="Descripcin de la tabla y su contenido">
<caption>Ttulo de la tabla</caption>
<thead>
<tr>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="especial">Ttulo fila 1</th>
<td>Donec purus ipsum</td>
<td>Curabitur <em>blandit</em></td>
</tr>
<tr>
www.librosweb.es
225
<th scope="row">Ttulo fila 2</th>
<td>Donec <strong>purus ipsum</strong></td>
<td>Curabitur blandit</td>
</tr>
</tbody>
</table>
<div id="adicional">
<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac,
lorem</span>. Curabitur blandit, eros sed gravida aliquet, risus justo
porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>
<p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit
elit, vehicula vulputate</span>, venenatis in,
posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi
feugiat ante, eu congue magna mi non nisl.</p>
<p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium
vitae</a>, rutrum aliquet, tincidunt blandit, pede.
Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis
mi.</p>
</div>
</body>
</html>
/* === IMPORTANTE ===================================================
No modificar estos estilos, ya que son imprescindibles para
que la pgina se vea correctamente.
================================================================== */
/*-- Bsico ----------------------------------------------------------*/
ul, ul li { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, form { margin: 0; padding: 0; }
.clear { clear: both; }
img { border: none; }
/*-- Layout ----------------------------------------------------------*/
#contenedor {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
#cabecera, #menu, #lateral, #contenido, #contenido #principal, #contenido
#secundario, #pie {
}
#cabecera { clear: both; }
#menu { clear: both; }
#lateral { float: left; width: 20%; }
www.librosweb.es
226
#contenido { float: right; width: 78%; }
#contenido #principal { float: left; width: 78%; }
#contenido #secundario { float: right; width: 20%; }
#pie { clear: both; }
/*-- Cabecera --------------------------------------------------------*/
#cabecera #logo { float: left; }
#cabecera #buscador { float: right; }
/*-- Menu ------------------------------------------------------------*/
#menu ul#menu_principal li { display: inline; float: left; }
/*-- Seccin Principal -----------------------------------------------*/
#contenido #principal .articulo img { width: 100px; float: left; }
/*-- Pie de pgina ---------------------------------------------------*/
#pie .enlaces { float: left; }
#pie .copyright { float: right; }
/* === IMPORTANTE ===================================================
A partir de aqu, se pueden aadir todos los estilos propios que
sean necesarios.
================================================================== */
#cabecera,
#menu,
#lateral,
#lateral #noticias,
#lateral #publicidad,
#contenido,
#contenido #principal,
#contenido #secundario,
#pie {
padding: .5em;
}
#lateral {
padding: 0;
}
#cabecera {
padding: 1em;
}
#menu {
}
#contenido {
width: 77%;
padding: 0;
}
www.librosweb.es
227
width: 73%;
}
#pie {
padding: .5em 0;
margin-top: 1em;
}
#contenido #principal .articulo {
margin-bottom: 1em;
}
#contenido #principal .articulo img {
margin: .5em;
}
#lateral #publicidad {
margin-top: 1em;
}
/* === IMPORTANTE ===================================================
================================================================== */
/*-- Bsico ----------------------------------------------------------*/
/*-- Layout ----------------------------------------------------------*/
#contenedor {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
#secundario, #pie {
}
/*-- Cabecera --------------------------------------------------------*/
www.librosweb.es
228
/*-- Menu ------------------------------------------------------------*/
/*-- Pie de pgina ---------------------------------------------------*/
/* === IMPORTANTE ===================================================
sean necesarios.
================================================================== */
#cabecera,
#menu,
#lateral,
#lateral #noticias,
#contenido,
#pie {
padding: .5em;
border: none;
}
#lateral {
padding: 0;
}
#cabecera {
padding: 1em;
}
#menu {
border-bottom: 1px solid #004C99;
}
#contenido {
width: 77%;
padding: 0;
}
width: 73%;
}
www.librosweb.es
229
border: 1px solid #C60;
}
#pie {
padding: .5em 0;
margin-top: 1em;
border-top: 1px solid #C5C5C5;
border-bottom: 1px solid #C5C5C5;
}
margin-bottom: 1em;
}
margin: .5em;
}
#lateral #noticias {
border: 1px solid #C5C5C5;
}
margin-top: 1em;
border: 1px dashed #C60;
}
/* === IMPORTANTE ===================================================
================================================================== */
/*-- Bsico ----------------------------------------------------------*/
/*-- Layout ----------------------------------------------------------*/
#contenedor {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
#secundario, #pie {
}
www.librosweb.es
230
/*-- Cabecera --------------------------------------------------------*/
/*-- Menu ------------------------------------------------------------*/
/*-- Pie de pgina ---------------------------------------------------*/
/* === IMPORTANTE ===================================================
sean necesarios.
================================================================== */
#cabecera,
#menu,
#lateral,
#lateral #noticias,
#contenido,
#pie {
padding: .5em;
border: none;
}
#lateral {
padding: 0;
}
#cabecera {
padding: 1em;
}
#cabecera h1 {
background: url(../comun/imagenes/logo.gif) no-repeat -5px -10px;
width: 180px;
}
#cabecera h1 span {
visibility: hidden;
}
www.librosweb.es
231
#menu {
background: url(../comun/imagenes/fondo_menu.gif) repeat-x;
}
#contenido {
width: 77%;
padding: 0;
}
width: 73%;
}
}
#contenido #secundario h2 {
background: #DB905C;
padding: .2em;
}
#pie {
padding: .5em 0;
margin-top: 1em;
}
margin-bottom: 1em;
}
margin: .5em;
}
}
margin-top: 1em;
background: #FFF6CD;
}
www.librosweb.es
232
<head>
div#paginacion {
background-color: #E0E0E0;
padding: .5em;
}
.derecha {
float: right;
}
.izquierda {
float: left;
}
div.clear {
clear: both;
}
</style>
</head>
<body>
<div id="paginacion">
<span class="izquierda">« Anterior</span> <span class="derecha">Siguiente
»</span>
<div class="clear"></div>
</div>
</body>
</html>
/* === IMPORTANTE ===================================================
================================================================== */
/*-- Bsico ----------------------------------------------------------*/
/*-- Layout ----------------------------------------------------------*/
#contenedor {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
www.librosweb.es
233
#secundario, #pie {
}
/*-- Cabecera --------------------------------------------------------*/
/*-- Menu ------------------------------------------------------------*/
/*-- Pie de pgina ---------------------------------------------------*/
/* === IMPORTANTE ===================================================
sean necesarios.
================================================================== */
body {
font: .9em/1.4 Arial, Helvetica, sans-serif;
color: #000;
}
#cabecera,
#menu,
#lateral,
#lateral #noticias,
#contenido,
#pie {
padding: .5em;
border: none;
}
#lateral {
padding: 0;
font-size: .9em;
}
www.librosweb.es
234
#cabecera {
padding: 1em;
}
#cabecera h1 {
background: url(../comun/imagenes/logo.gif) no-repeat -5px -5px;
width: 180px;
}
#cabecera h1 span {
visibility: hidden;
}
#menu {
background: url(../comun/imagenes/fondo_menu.gif) repeat-x;
}
#menu li {
margin-right: 1em;
font-size: 1.3em;
}
#menu li a {
color: #FFF;
}
#contenido {
width: 77%;
padding: 0;
}
width: 73%;
}
}
background: #DB905C;
padding: .2em;
font-size: 1em;
color: #FFF;
}
#contenido #secundario p {
margin: .5em 0;
}
#pie {
padding: .5em 0;
www.librosweb.es
235
margin-top: 1em;
color: #555;
font-size: .75em;
}
margin-bottom: 1em;
}
#contenido #principal .articulo p {
margin: .3em 0;
}
#contenido #principal .articulo a {
color: #C60;
}
#contenido #principal .articulo h2 {
color: #C60;
font-size: 1.6em;
line-height: 1.2;
}
margin: .5em;
}
}
#lateral #noticias h3 {
color: #036;
}
#lateral #noticias span.fecha {
display: block;
color: #999;
}
margin-top: 1em;
background: #FFF6CD;
color: #555;
}
#lateral #publicidad a {
color: #C60;
}
www.librosweb.es
236
<head>
<title>Ejercicio de pseudo clases de enlaces</title>
a {
margin: 1em 0;
color: #CC0000;
float: left;
clear: left;
padding: 2px;
}
a:hover {
background-color: #CC0000;
color: #FFF;
}
a:visited {
color: #CCC;
}
</style>
</head>
<body>
<a href="#">Enlace nmero 1</a>
</body>
</html>
<head>
<title>Ejercicio galera de imgenes</title>
#galeria {
/* En el navegador Internet Explorer versin 6 y anteriores no funciona la
propiedad "max-width" */
max-width: 650px;
}
#galeria img {
www.librosweb.es
237
float: left;
margin: 1em;
padding: .5em;
}
</style>
</head>
<body>
<div id="galeria">
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
</div>
</body>
</html>
<head>
<title>Ejercicio menu vertical avanzado</title>
ul.menu {
width: 180px;
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li {
}
ul.menu li a {
padding: .2em 0 .2em 1.5em;
display: block;
color: #333;
background: #F4F4F4 url("../../comun/imagenes/flecha_inactiva.png") no-repeat
3px;
}
ul.menu li a:hover, ul.menu li a:active {
background: #E4E4E4 url("../../comun/imagenes/flecha_activa.png") no-repeat
3px;
www.librosweb.es
238
}
</style>
</head>
<body>
<ul class="menu">
</ul>
</body>
</html>
<head>
<title>Ejercicio formatear tabla</title>
table {
font: .9em Arial, Helvetica, sans-serif;
border-collapse: collapse;
text-align: center;
}
table th {
background: #F5F5F5 url(../../comun/imagenes/fondo_gris.gif) repeat-x;
padding: 0 .3em;
text-align: left;
}
table thead th {
text-align: center;
}
table th.euro {
background: #E6F3FF url(../../comun/imagenes/euro.png) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
table th.dolar {
background: #E6F3FF url(../../comun/imagenes/dolar.png) no-repeat left center;
}
table th.libra {
background: #E6F3FF url(../../comun/imagenes/libra.png) no-repeat left center;
}
table th.yen {
background: #E6F3FF url(../../comun/imagenes/yen.png) no-repeat left center;
}
www.librosweb.es
239
table th, table, td {
line-height: 2em;
}
.par {
background-color:#FFFFCC;
}
table tr:hover {
background: #FFFF66 !important;
}
</style>
</head>
<body>
<table summary="Tipos de cambio">
<thead>
<tr class="cabecera">
<th scope="col">Cambio</th>
<th scope="col">Compra</th>
<th scope="col">Venta</th>
<th scope="col">Máximo</th>
<th scope="col">Mínimo</th>
</tr>
</thead>
<tbody>
<tr class="par">
<th scope="row" class="euro">Euro/Dolar</th>
<td>1.2524</td>
<td>1.2527</td>
<td>1.2539</td>
<td>1.2488</td>
</tr>
<tr>
<th scope="row" class="dolar">Dolar/Yen</th>
<td>119.01</td>
<td>119.05</td>
<td>119.82</td>
<td>119.82</td>
</tr>
<tr class="par">
<th scope="row" class="libra">Libra/Dolar</th>
<td>1.8606</td>
<td>1.8611</td>
<td>1.8651</td>
<td>1.8522</td>
</tr>
<tr>
<th scope="row" class="yen">Yen/Euro</th>
<td>0.6711</td>
<td>0.6705</td>
<td>0.6676</td>
<td>0.6713</td>
</tr>
</tbody>
</table>
www.librosweb.es
240
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Ejercicio 12 - Formulario de alta</title>
/* Formatear el formulario a dos columnas */
body {
font: 13px/1.6 Tahoma, sans-serif;
}
.izquierda {
float: left;
clear: left;
}
.derecha {
float: right;
clear: right;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#contenedor {
background: #FFF;
border: 1px solid silver;
margin: 1em auto;
padding: 1em;
width: 768px;
}
span.requerido {
font-size: 1.3em;
font-weight: bold;
color: #C00;
}
h2 {
font: normal 2em arial, sans-serif;
margin: 0;
}
www.librosweb.es
241
ul li.botones {
border-top: 2px solid #CCC;
clear: both;
float: none;
padding: 1em 0;
margin-top: 1em;
text-align: right;
width: 100%;
}
ul li.botones input {
font-size: 1.3em;
}
ul li {
margin: 0.5em 0;
padding: 0.5em;
width: 46%;
}
ul li label.titulo {
font-weight: bold;
}
ul li div span {
float: left;
padding: 0.3em 0;
}
ul li div span.completo {
width: 100%;
}
ul li div span.mitad {
width: 50%;
}
ul li div span.tercio {
width: 33%;
}
ul li div span.dostercios {
width: 66%;
}
ul li div span label {
display: block;
font: normal 0.8em arial, sans-serif;
color: #333;
}
ul li p.ayuda {
display: none;
}
www.librosweb.es
242
ul li input {
padding: 0.2em;
}
input#apellido1, input#apellido2, input#direccion, input#email {
width: 260px;
}
input#codigopostal {
width: 80px;
}
select#provincia {
width: 90px;
}
select#pais {
width: 150px;
}
input#telefonofijo, input#telefonomovil {
width: 135px;
}
/* Cambiar el color en el :hover y resaltar los campos en el :focus */
ul li:hover {
background-color: #FF9;
}
ul li.botones:hover {
background-color: transparent;
}
ul li input:focus {
border: 2px solid #E6B700;
}
/* Formatear el formulario a una columna */
ul li.izquierda, ul li.derecha {
float: none;
width: auto;
}
ul li {
overflow: hidden;
}
float: left;
width: 150px;
}
ul li div {
margin-left: 160px;
www.librosweb.es
243
}
/* Aspecto final del formulario con los mensajes de ayuda */
h2 {
margin-bottom: 0.3em;
}
ul li {
border-top: 1px solid #CCC;
margin: 0;
padding: 1em;
}
ul li.botones {
margin: 0;
}
text-align: right;
width: 100px;
}
ul li div {
margin-left: 110px;
overflow: hidden;
}
ul li {
position: relative;
}
ul li:hover p.ayuda {
display: block;
margin: 0.3em;
position: absolute;
top: 0;
right: 0;
width: 150px;
}
</style>
</head>
<body>
<h2>Formulario de alta</h2>
<form method="post" action="#">
<ul>
<li class="izquierda">
<label class="titulo" for="nombre">Nombre y apellidos <span
<div>
<span class="completo">
<input id="nombre" name="nombre" value="" />
www.librosweb.es
244
</span>
<label for="apellido1">Primer apellido</label>
</span>
<label for="apellido2">Segundo apellido</label>
</span>
</div>
<p class="ayuda">No te olvides de escribir tambin tu segundo apellido</p>
</li>
<li class="derecha">
<label class="titulo" for="direccion">Direccin <span
<div>
<input id="direccion" name="direccion" value="" />
<label for="direccion">Calle, nmero, piso, puerta</label>
</span>
<span class="tercio">
<input id="codigopostal" name="codigopostal" value="" />
<label for="codigopostal">Cdigo postal</label>
</span>
<span class="dostercios">
<input id="municipio" name="municipio" value="" />
<label for="municipio">Municipio</label>
</span>
<span class="tercio">
<select id="provincia" name="provincia">
</select>
<label for="provincia">Provincia</label>
</span>
<span class="dostercios">
<select id="pais" name="pais">
</select>
<label for="pais">Pas</label>
www.librosweb.es
245
</span>
</div>
<p class="ayuda">El cdigo postal es imprescindible para poder recibir los
pedidos</p>
</li>
<li class="izquierda">
<label class="titulo" for="email">Email</label>
<div>
<input id="email" name="email" value="" />
</span>
</div>
<p class="ayuda">Asegrate de que sea vlido</p>
</li>
<li class="derecha">
<label class="titulo" for="telefonofijo">Telfono <span
<div>
<span class="mitad">
<input id="telefonofijo" name="telefonofijo" value="" />
<label for="telefonofijo">Fijo</label>
</span>
<span class="mitad">
<input id="telefonomovil" name="telefonomovil" value="" />
<label for="telefonomovil">Mvil</label>
</span>
</div>
<p class="ayuda">Sin prefijo de pas y sin espacios en blanco</p>
</li>
<li class="botones">
<input id="alta" type="submit" value="Darme de alta →" />
</li>
</ul>
</form>
</div>
</body>
</html>
/* ---- Estilos bsicos ---------------------------------------------------- */
body {
margin: 0;
www.librosweb.es
246
padding: 0;
background: #F2F5FE url("../imagenes/fondo.gif") 0 0 repeat-x;
font: 70%/160% "verdana", sans-serif;
color: #192666;
}
a {
color:#192666;
}
a:hover {
color:#4F6AD7;
}
p {
margin: 1em 0;
padding: 0;
}
.clear {
clear: both;
}
h1, h2, h3, h4, h5 {
margin: 1em 0;
padding:0;
}
h1 {
font-size: 260%;
font-family: "georgia", serif;
}
h2 {
font-size:180%;
font-family: "georgia", serif;
font-weight:normal;
}
h3 {
font-size:120%;
font-weight:bold;
}
ul, ol {
padding:0;
}
/* ---- Layout ------------------------------------------------------------- */
#contenedor {
width:770px;
margin: 50px auto 0 auto;
}
www.librosweb.es
247
#cabecera {
width: 770px;
position: relative;
height: 100px;
margin: 0;
padding: 0;
background: #233C9B url("../imagenes/cabecera.jpg") no-repeat;
color: #FFF;
}
#contenido {
width: 760px;
margin: 0 5px;
background: #FFF;
}
float: left;
width: 530px;
margin-top: 15px;
padding:0 0 0 20px;
background: #FFF;
}
float: left;
width: 200px;
margin: 15px 0 0 0;
padding: 0;
background: #CEDBF9 url("../imagenes/fondo_columna.gif") no-repeat;
}
#pie {
clear: both;
height: 60px;
margin-bottom: 50px;
background: url("../imagenes/fondo_pie.jpg") no-repeat;
color: #6685CC;
position: relative;
}
/* ---- Cabecera ----------------------------------------------------------- */
#cabecera #logo {
position: absolute;
top: 35px;
left: 35px;
margin: 0;
}
#cabecera #logo a {
color: #FFF;
display: block;
line-height: 35px;
}
www.librosweb.es
248
#cabecera #logo a:hover {
color: #B5C4E3;
text-decoration: underline;
}
#cabecera #buscador {
position: absolute;
top: 40px;
right: 20px;
}
#cabecera #buscador legend {
display: none;
}
#cabecera #buscador fieldset {
border: none;
}
/* ---- Men --------------------------------------------------------------- */
#menu {
background: #192666;
margin: 0 5px;
padding: 10px 0 0 0;
}
#menu ul {
margin: 0 10px;
padding: 0;
list-style:none;
}
#menu ul li {
margin: 0 5px 0 0;
padding: 0;
float:left;
}
#menu ul li a {
display: block;
position: relative;
padding: 5px 15px;
border: 0;
background: #253575;
color: #B5C4E3;
font-weight: bold;
cursor: pointer;
}
#menu ul li a:hover {
background: #31479B;
}
www.librosweb.es
249
#menu ul li.seleccionado a {
background: #FFF;
color: #FF9000;
}
/* ---- Contenidos --------------------------------------------------------- */
#contenido .articulo {
clear: both;
margin: 0;
padding: 20px;
background: url("../imagenes/fondo_articulo.jpg") no-repeat;
}
#contenido .articulo h2 {
margin: 0 -20px;
padding: 10px;
background: #DEE5FD;
color: #192666;
}
#contenido .info {
margin: 10px 0;
padding-bottom: 8px;
border-bottom: 1px solid #DEE5FD;
color:#6685CC;
}
#contenido .info a { color:#6685CC; }
#contenido .info a:hover { color:#FF9000; }
#contenido .info span.fecha, #contenido .info span.categoria, #contenido .info
span.autor, #contenido .info span.comentarios {
padding-left:15px;
}
#contenido .info span.fecha { background: url("../imagenes/icono_fecha.gif") 0
50% no-repeat; }
#contenido .info span.categoria { background: url("../imagenes/
icono_categoria.gif") 0 50% no-repeat; margin-left: 8px; }
#contenido .info span.autor { background: url("../imagenes/icono_autor.gif") 0
50% no-repeat; margin-left: 8px; }
#contenido .info span.comentarios { background: url("../imagenes/
icono_comentarios.gif") 0 50% no-repeat; margin-left: 8px; }
padding: 10px 0 10px 10px;
margin-top: 20px;
background: #A0B9F3;
color: #192666;
}
#contenido #secundario #sobremi img {
float: left;
margin: 4px 5px 0 0;
www.librosweb.es
250
}
#contenido #secundario #sobremi p {
}
#contenido #secundario div {
padding: 0 10px;
}
#contenido #secundario ul {
margin: 15px 0;
padding: 0;
list-style:none;
}
#contenido #secundario li {
margin: 0;
padding: 0;
border-bottom: 1px solid #E0E8FA;
}
#contenido #secundario li a {
display: block;
padding: 3px 0 3px 22px;
background: url("../imagenes/icono_elemento.gif") 8px no-repeat;
}
#contenido #secundario li a:hover {
background-color: #E0E8FA;
color: #192666;
}
#contenido #secundario li.seleccionado a {
background: #E0E8FA url("../imagenes/icono_elemento_seleccionado.gif") 8px
no-repeat;
font-weight: bold;
}
/* ---- Pie ---------------------------------------------------------------- */
#pie p {
margin: 0;
padding: 0;
position: absolute;
top: 10px;
left: 40px;
}
www.librosweb.es
251

Css Introduccion

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Css Introduccion

Загружено:

Авторское право:

Доступные форматы

www.librosweb.

Вам также может понравиться