introduccion a css libros web

7/25/2019 Introduccion a CSS Libros Web

http://slidepdf.com/reader/full/introduccion-a-css-libros-web 1/184

Capítulo 1. Introducción

1.1. ¿Qué es CSS?

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentaciónde los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma deseparar los contenidos y su presentación y es imprescindi le para crear p!ginas "ecomplejas.Separar la definición de los contenidos y la definición de su aspecto presenta numerosas#entajas$ ya %ue o liga a crear documentos HTML&XHTML ien definidos y con significadocompleto 'tam i(n llamados "documentos semánticos" ). *dem!s$ mejora la accesi ilidaddel documento$ reduce la complejidad de su mantenimiento y permite #isuali+ar el mismo

documento en infinidad de dispositi#os diferentes. *l crear una p!gina "e $ se utili+a en primer lugar el lenguaje HTML&XHTML para marcar los contenidos$ es decir$ para designar la función de cada elemento dentro de la p!gina,p!rrafo$ titular$ te-to destacado$ ta la$ lista de elementos$ etc.

na #e+ creados los contenidos$ se utili+a el lenguaje CSS para definir el aspecto de cadaelemento, color$ tama/o y tipo de letra del te-to$ separación hori+ontal y #ertical entreelementos$ posición de cada elemento dentro de la p!gina$ etc.

1.0. Breve historia de CSSLas hojas de estilos aparecieron poco despu(s %ue el lenguaje de eti%uetas S ML$alrededor del a/o 1234. 5esde la creación de S ML$ se o ser#ó la necesidad de definirun mecanismo %ue permitiera aplicar de forma consistente diferentes estilos a losdocumentos electrónicos.6l gran impulso de los lenguajes de hojas de estilos se produjo con el oom de 7nternet yel crecimiento e-ponencial del lenguaje HTML para la creación de documentoselectrónicos. La guerra de na#egadores y la falta de un est!ndar para la definición de los

estilos dificulta an la creación de documentos con la misma apariencia en diferentesna#egadores.6l organismo 89C '8orld 8ide 8e Consortium)$ encargado de crear todos losest!ndares relacionados con la "e $ propuso la creación de un lenguaje de hojas deestilos específico para el lenguaje HTML y se presentaron nue#e propuestas. Las dospropuestas %ue se tu#ieron en cuenta fueron la CHSS ' Cascading HTML Style Sheets ) yla SS: ' Stream-based Style Sheet Proposal ).La propuesta CHSS fue reali+ada por H;<on 8ium Lie y SS: fue propuesto por =ert =os.6ntre finales de 122> y 122? Lie y =os se unieron para definir un nue#o lenguaje %uetoma a lo mejor de cada propuesta y lo llamaron CSS ' Cascading Style Sheets ).6n 122?$ el 89C decidió apostar por el desarrollo y estandari+ación de CSS y lo a/adió a

http://www.w3.org/

http://www.w3.org/



su grupo de tra ajo de HTML. * finales de 122@$ el 89C pu licó la primerarecomendación oficial$ conocida como ACSS ni#el 1A.

* principios de 1223$ el 89C decide separar los tra ajos del grupo de HTML en tressecciones, el grupo de tra ajo de HTML$ el grupo de tra ajo de 5BM y el grupo de tra ajode CSS.6l 10 de Mayo de 122 $ el grupo de tra ajo de CSS pu lica su segunda recomendaciónoficial$ conocida como ACSS ni#el 0A. La #ersión de CSS %ue utili+an todos losna#egadores de hoy en día es CSS 0.1$ una re#isión de CSS 0 %ue aDn se est!ela orando 'la Dltima actuali+ación es del de septiem re de 0442). *l mismo tiempo$ lasiguiente recomendación de CSS$ conocida como ACSS ni#el 9A$ continDa en desarrollodesde 122 y hasta el momento sólo se han pu licado orradores.La adopción de CSS por parte de los na#egadores ha re%uerido un largo periodo detiempo. 6l mismo a/o %ue se pu licó CSS 1$ Microsoft lan+a a su na#egador 7nternet6-plorer 9.4$ %ue disponía de un soporte astante reducido de CSS. 6l primer na#egadorcon soporte completo de CSS 1 fue la #ersión para Mac de 7nternet 6-plorer ?$ %ue sepu licó en el a/o 0444. :or el momento$ ningDn na#egador tiene soporte completo deCSS 0.1.

1.9. Soporte de CSS en los navegadores6l tra ajo del dise/ador "e siempre est! limitado por las posi ilidades de losna#egadores %ue utili+an los usuarios para acceder a sus p!ginas. :or este moti#o esimprescindi le conocer el soporte de CSS en cada uno de los na#egadores m!s utili+adosdel mercado.7nternamente los na#egadores est!n di#ididos en #arios componentes. La parte delna#egador %ue se encarga de interpretar el código HTML y CSS para mostrar las p!ginasse denomina motor. 5esde el punto de #ista del dise/ador CSS$ la #ersión de un motor esmucho m!s importante %ue la #ersión del propio na#egador.La siguiente ta la muestra el soporte de CSS 1$ CSS 0.1 y CSS 9 de los cincona#egadores m!s utili+ados por los usuarios,

Navegador Motor CSS 1 CSS 2.1 CSS 3Google

ChromeWebKit

Completo desde la

versión 85 del motor Completo

Todos los selectores, pseudo-clases y

muchas propiedades

Internet

!plorer Trident

Completo desde la

versión "#$ del

navegador

Completo


muchas propiedades a partir de la versión

%$#$ del navegador

&ire'o! Gec(o

Completo desde la

versión %#$ del

navegador

CompletoTodos los selectores, pseudo-clases y

muchas propiedades

)a'ari WebKitCompleto desde la

versión 85 del motor Completo


muchas propiedades



Navegador Motor CSS 1 CSS 2.1 CSS 3

*pera +resto

Completo desde la

versión %#$ del

navegador

CompletoTodos los selectores, pseudo-clases y

muchas propiedades

Los na#egadores Eirefo-$ Chrome$ Safari y Bpera son los m!s a#an+ados en el soportede CSS$ ya %ue incluyen muchos elementos de la futura #ersión CSS 9 y un soporte casiperfecto de la actual #ersion 0.1.:or su parte$ el na#egador 7nternet 6-plorer sólo puede considerarse adecuado desde elpunto de #ista de CSS a partir de su #ersión 3. 7nternet 6-plorer @$ utili+ado toda#ía por unnDmero no desprecia le de usuarios$ sufre carencias muy importantes y contiene decenasde errores en su soporte de CSS. 7nternet 6-plorer soporta casi todas las propiedades ycaracterísticas de CSS 0.1.La ta la anterior ha sido ela orada a partir de la información %ue se puede encontrar en la

p!gina Comparison of layout engines de la 8i<ipedia$ donde se muestra una comparacióne-hausti#a so re el soporte de todas las características de CSS por parte de cadana#egador.

1.>. Especificación oficialLa especificación o norma oficial %ue se utili+a actualmente para dise/ar p!ginas "e conCSS es la #ersión CSS 0.1$ actuali+ada por Dltima #e+ el 3 de junio de 0411 y %ue sepuede consultar li remente en "9.org&TF&CSS01

5esde hace #arios a/os$ el organismo 89C tra aja en la ela oración de la pró-ima#ersión de CSS$ conocida como CSS 9. 6sta nue#a #ersión incluye multitud de cam iosimportantes en todos los ni#eles y es mucho m!s a#an+ada y compleja %ue CSS 0.:uedes consultar el estado actual de cada componente de CSS 9en "9.org&Style&CSS&currentG"or< . Tam i(n e-iste un log oficial en el %ue se pu licantodas las no#edades relacionadas con el est!ndar CSS .

1.?. Funciona iento !"sico de CSS *ntes de %ue se generali+ara el uso de CSS$ los dise/adores de p!ginas "e utili+a aneti%uetas HTML especiales para modificar el aspecto de los elementos de la p!gina. 6lsiguiente ejemplo muestra una p!gina HTML con estilos definidos sin utili+ar CSS,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra t # al//E$" "htt%&//'''.'3.#r(/T)/*html1/DTD/*html1-tra t # al.+t+",

<html *ml "htt%&//'''.'3.#r(/1 /*html" ,

<h a+, <m ta htt%- 2 "C# t t-T % " 4# t t "t *t/html5 4har t #-667 -1" / ,

<t tl ,E8 m%l# + t l# C99< / t tl ,</ h a+,

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

http://www.w3.org/TR/CSS21/

http://www.w3.org/Style/CSS/current-work

http://www.w3.org/blog/CSS


http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)


http://www.w3.org/Style/CSS/current-work





<:#+ , <h1,<;# t 4#l#r "r +" ;a4 " r al" = "7" ,T t lar + la

%>( a</ ;# t,< / h1, <%,<;# t 4#l#r "(ra " ;a4 "? r+a a" = "@",U %>rra;# + t *t# # m

lar(#.< / ;# t,< / %,

</ :#+ ,

</ html ,

6l ejemplo anterior utili+a la eti%ueta <;# t, con sus atri utos 4#l#r $;a4 y = paradefinir el color$ el tipo y el tama/o de letra de cada elemento de la p!gina.6l pro lema de utili+ar este m(todo para definir el aspecto de los elementos se puede #erclaramente con el siguiente ejemplo, si la p!gina tu#iera ?4 elementos diferentes$ ha ría%ue insertar ?4 eti%uetas <;# t, . Si el sitio "e entero se compone de 14.444 p!ginas

diferentes$ ha ría %ue definir ?44.444 eti%uetas <;# t, . Como cada eti%ueta <;# t, tienetres atri utos$ ha ría %ue definir 1.? millones de atri utos.Como el dise/o de los sitios "e est! en constante e#olución$ es ha itual modificar cadacierto tiempo el aspecto de las p!ginas del sitio. Siguiendo con el ejemplo anterior$cam iar el aspecto del sitio re%ueriría modificar ?44.444 eti%uetas y 1.? millones deatri utos.La solución %ue propone CSS es mucho mejor$ como se puede #er en el siguienteejemplo,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra t # al//E$" "htt%&//'''.'3.#r(/T)/*html1/DTD/*html1-tra t # al.+t+",

<html *ml "htt%&//'''.'3.#r(/1 /*html" ,<h a+,

<m ta htt%- 2 "C# t t-T % " 4# t t "t *t/html5 4har t #-667 -1" / ,<t tl ,E8 m%l# + t l# 4# C99< / t tl ,

< t l t % "t *t/4 " , h1 A 4#l#r& r +5 ;# t-;am l & r al5 ;# t- = & lar( 5

% A 4#l#r& (ra 5 ;# t-;am l & ? r+a a5 ;# t- = & m + m5 </ t l ,

</ h a+,

<:#+ , <h1,T t lar + la %>( a< / h1, <%,U %>rra;# + t *t# # m lar(#.< / %,

</ :#+ ,

</ html ,

CSS permite separar los contenidos de la p!gina y la información so re su aspecto. 6n el



</ :#+ ,</ html ,

6ste m(todo se emplea cuando se define un nDmero pe%ue/o de estilos o cuando se%uieren incluir estilos específicos en una determinada p!gina HTML %ue completen losestilos %ue se incluyen por defecto en todas las p!ginas del sitio "e .6l principal incon#eniente es %ue si se %uiere hacer una modificación en los estilosdefinidos$ es necesario modificar todas las p!ginas %ue incluyen el estilo %ue se #a amodificar.Los ejemplos mostrados en este li ro utili+an este m(todo para aplicar CSS al contenidoHTML de las p!ginas. 5e esta forma el código de los ejemplos es m!s conciso y seapro#echa mejor el espacio.

1.(.). *efinir CSS en un archivo e+terno

6n este caso$ todos los estilos CSS se incluyen en un archi#o de tipo CSS %ue lasp!ginas HTML enla+an mediante la eti%ueta <l , . n archi#o de tipo CSS no es m!s%ue un archi#o simple de te-to cuya e-tensión es .4 Se pueden crear todos los archi#osCSS %ue sean necesarios y cada p!gina HTML puede enla+ar tantos archi#os CSS comonecesite.Si se %uieren incluir los estilos del ejemplo anterior en un archi#o CSS e-terno$ se de enseguir los siguientes pasos,

1) Se crea un archi#o de te-to y se le a/ade solamente el siguiente contenido,% A 4#l#r & :la4 5 ;# t-;am l & ? r+a a 5

0) Se guarda el archi#o de te-to con el nom re t l# .4 Se de e poner especialatención a %ue el archi#o tenga e-tensión .4 y no .t*t9) 6n la p!gina HTML se enla+a el archi#o CSS e-terno mediante la eti%ueta <l , ,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra t # al//E$" "htt%&//'''.'3.#r(/T)/*html1/DTD/*html1-tra t # al.+t+",

<html *ml "htt%&//'''.'3.#r(/1 /*html" ,

<h a+,<m ta htt%- 2 "C# t t-T % " 4# t t "t *t/html5 4har t #-667 -1" / ,

<t tl ,E8 m%l# + t l# C99 ar4h 2# *t r #< / t tl ,

<l r l " t l h t" t % "t *t/4 " hr ; "/4 / t l# .4 " m + a " 4r "

/ ,</ h a+,

<:#+ ,

<%,U %>rra;# + t *t#.< / %,</ :#+ ,



</ html ,

Cuando el na#egador carga la p!gina HTML anterior$ antes de mostrar sus contenidostam i(n descarga los archi#os CSS e-ternos enla+ados mediante la eti%ueta <l , yaplica los estilos a los contenidos de la p!gina.Iormalmente$ la eti%ueta <l , incluye cuatro atri utos cuando enla+a un archi#o CSS,• r l , indica el tipo de relación %ue e-iste entre el recurso enla+ado 'en este caso$ el

archi#o CSS) y la p!gina HTML. :ara los archi#os CSS$ siempre se utili+a el

#alor t l h t

• t % , indica el tipo de recurso enla+ado. Sus #alores est!n estandari+ados y para los

archi#os CSS su #alor siempre es t *t/4

• hr ; , indica la FL del archi#o CSS %ue contiene los estilos. La FL indicada puede ser

relati#a o a soluta y puede apuntar a un recurso interno o e-terno al sitio "e .• m + a, indica el medio en el %ue se #an a aplicar los estilos del archi#o CSS. M!s

adelante se e-plican en detalle los medios CSS y su funcionamiento.

5e todas las formas de incluir CSS en las p!ginas HTML$ esta es la m!s utili+ada conmucha diferencia. La principal #entaja es %ue se puede incluir un mismo archi#o CSS enmultitud de p!ginas HTML$ por lo %ue se garanti+a la aplicación homog(nea de losmismos estilos a todas las p!ginas %ue forman un sitio "e .

Con este m(todo$ el mantenimiento del sitio "e se simplifica al m!-imo$ ya %ue un solocam io en un solo archi#o CSS permite #ariar de forma instant!nea los estilos de todaslas p!ginas HTML %ue enla+an ese archi#o.

*un%ue generalmente se emplea la eti%ueta <l , para enla+ar los archi#os CSSe-ternos$ tam i(n se puede utili+ar la eti%ueta < t l , . La forma alternati#a de incluir unarchi#o CSS e-terno se muestra a continuación,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra t # al//E$" "htt%&//'''.'3.#r(/T)/*html1/DTD/*html1-tra t # al.+t+",

<html *ml "htt%&//'''.'3.#r(/1 /*html" ,

<h a+,

<m ta htt%- 2 "C# t t-T % " 4# t t "t *t/html5 4har t #-667 -1" / ,<t tl ,E8 m%l# + t l# C99 ar4h 2# *t r #< / t tl ,

< t l t % "t *t/4 " m + a " 4r " , m%#rt /4 / t l# .4 5

</ t l ,</ h a+,

<:#+ ,<%,U %>rra;# + t *t#.< / %,



</ :#+ ,</ html ,

6n este caso$ para incluir en la p!gina HTML los estilos definidos en archi#os CSSe-ternos se utili+a una regla especial de tipo m%#rt. Las reglas de tipo m%#rtsiemprepreceden a cual%uier otra regla CSS 'con la Dnica e-cepción de la regla 4har t ).La FL del archi#o CSS e-terno se indica mediante una cadena de te-to encerrada concomillas simples o do les o mediante la pala ra reser#ada rlFG . 5e esta forma$ lassiguientes reglas m%#rt son e%ui#alentes,

m%#rt /4 / t l# .4 5

m%#rt "/4 / t l# .4 "5m%#rt rlF /4 / t l# .4 G5

m%#rt rlF"/4 / t l# .4 "G5

1.(.,. Incluir CSS en los ele entos $%&'

6l Dltimo m(todo para incluir estilos CSS en documentos HTML es el peor y el menosutili+ado$ ya %ue tiene los mismos pro lemas %ue la utili+ación de las eti%uetas <;# t, .6jemplo,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra t # al//E$" "htt%&//'''.'3.#r(/T)/*html1/DTD/*html1-tra t # al.+t+",

<html *ml "htt%&//'''.'3.#r(/1 /*html" ,<h a+,

<m ta htt%- 2 "C# t t-T % " 4# t t "t *t/html5 4har t #-667 -1" / ,

<t tl ,E8 m%l# + t l# C99 l %r#% # +#4 m t#< / t tl ,

</ h a+,

<:#+ ,<% t l "4#l#r& :la4 5 ;# t-;am l & ? r+a a5" ,U %>rra;# + t *t#.< / %,

</ :#+ ,</ html ,

6sta forma de incluir CSS directamente en los elementos HTML solamente se utili+a endeterminadas situaciones en las %ue se de e incluir un estilo muy específico para un soloelemento concreto.



1.3. -losario !"sicoCSS define una serie de t(rminos %ue permiten descri ir cada una de las partes %uecomponen los estilos CSS. 6l siguiente es%uema muestra las partes %ue forman un estiloCSS muy !sico,

Figura 1.1 Componentes de un estilo CSS !sico

Los diferentes t(rminos se definen a continuación,• Fegla, cada uno de los estilos %ue componen una hoja de estilos CSS. Cada regla est!

compuesta de una parte de "selectores" $ un sím olo de "llave de apertura" ' A)$ otra parte

denominada "declaraci n" y por Dltimo$ un sím olo de "llave de cierre" ' ).• Selector, indica el elemento o elementos HTML a los %ue se aplica la regla CSS.

• 5eclaración, especifica los estilos %ue se aplican a los elementos. 6st! compuesta por

una o m!s propiedades CSS.• :ropiedad, característica %ue se modifica en el elemento seleccionado$ como por ejemplo

su tama/o de letra$ su color de fondo$ etc.• alor, esta lece el nue#o #alor de la característica modificada en el elemento.

n archi#o CSS puede contener un nDmero ilimitado de reglas CSS$ cada regla se puedeaplicar a #arios selectores diferentes y cada declaración puede incluir tantos parespropiedad&#alor como se desee.6l est!ndar CSS 0.1 define 11? propiedades$ cada una con su propia lista de #alorespermitidos. :or su parte$ los Dltimos orradores del est!ndar CSS 9 ya incluyen 092

propiedades.

1. . &edios CSSna de las características m!s importantes de las hojas de estilos CSS es %ue permiten

definir diferentes estilos para diferentes medios o dispositi#os, pantallas$ impresoras$mó#iles$ proyectores$ etc.

*dem!s$ CSS define algunas propiedades específicamente para determinados medios$

como por ejemplo la paginación y los saltos de p!gina para los medios impresos o el#olumen y tipo de #o+ para los medios de audio. La siguiente ta la muestra el nom re %ueCSS utili+a para identificar cada medio y su descripción,



Medio Descripciónall Todos los medios de'inidos:ra ll ispositivos t ctiles .ue emplean el sistema braille

m:# + Impresoras brailleha +h l+ ispositivos de mano/ móviles, + 0, etc#

%r t Impresoras y navegadores en el modo "Vista Previa para Imprimir" %r#8 4t # +royectores y dispositivos para presentaciones

4r +antallas de ordenador % 4h )inteti1adores para navegadores de vo1 utili1ados por personas discapacitadas

tt ispositivos te!tuales limitados como teletipos y terminales de te!tot2 Televisores y dispositivos con resolución ba2a

Los medios m!s utili+ados actualmente son 4r 'para definir el aspecto de la p!ginaen pantalla) y %r t 'para definir el aspecto de la p!gina cuando se imprime)$ seguidos deha +h l+ '%ue define el aspecto de la p!gina cuando se #isuali+a mediante un dispositi#omó#il).

*dem!s$ CSS clasifica a los medios en diferentes grupos segDn sus características. Lasiguiente ta la resume todos los grupos definidos en el est!ndar,

MedioContinuo /

Paginado

Visual / Auditivo /

T ctil / Vocal

Mapa de !its /

Caracteres

"nteractivo /

#st tico:ra ll continuo t ctil caracteres ambos

m:# + paginado t ctil caracteres est ticoha +h l+ ambos visual, auditivo, vocal ambos ambos

%r t paginado visual mapa de bits est tico%r#8 4t # paginado visual mapa de bits interactivo4r continuo visual, auditivo mapa de bits ambos% 4h continuo vocal 3no tiene sentido4 ambos

tt continuo visual caracteres ambost2 ambos visual, auditivo mapa de bits ambos

La gran #entaja de CSS es %ue permite modificar los estilos de una p!gina en función delmedio en el %ue se #isuali+a. 6-isten cuatro formas diferentes de indicar el medio en el%ue se de en aplicar los estilos CSS.

1. .1. &edios definidos con las reglas de tipo / edia

Las reglas m + a son un tipo especial de regla CSS %ue permiten indicar de formadirecta el medio o medios en los %ue se aplicar!n los estilos incluidos en la regla. :araespecificar el medio en el %ue se aplican los estilos$ se incluye su nom re despu(sde m + a. Si los estilos se aplican a #arios medios$ se incluyen los nom res de todos losmedios separados por comas.

* continuación se muestra un ejemplo sencillo,

m + a %r t A :#+ A ;# t- = & 10%t



m + a 4r A :#+ A ;# t- = & 13%*

m + a 4r %r t A :#+ A l -h (ht & 1.@

6l ejemplo anterior esta lece %ue el tama/o de letra de la p!gina cuando se #isuali+a enuna pantalla de e ser 13 pí-el. Sin em argo$ cuando se imprimen los contenidos de lap!gina$ su tama/o de letra de e ser de 10 puntos. :or Dltimo$ tanto cuando la p!gina se#isuali+a en una pantalla como cuando se imprimen sus contenidos$ el interlineado delte-to de e ser de 1.@ #eces el tama/o de letra del te-to.

1. .). &edios definidos con las reglas de tipo /i portCuando se utili+an reglas de tipo m%#rt para enla+ar archi#os CSS e-ternos$ se puedeespecificar el medio en el %ue se aplican los estilos indicando el nom re del mediodespu(s de la FL del archi#o CSS,

m%#rt rlF" t l# :a 4# .4 "G 4r 5

m%#rt rlF" t l# m%r #ra.4 "G %r t5

Las reglas del ejemplo anterior esta lecen %ue cuando la p!gina se #isuali+a por pantalla$

se cargan los estilos definidos en el primer archi#o CSS. :or otra parte$ cuando la p!ginase imprime$ se tienen en cuenta los estilos %ue define el segundo archi#o CSS.Si los estilos del archi#o CSS e-terno de en aplicarse en #arios medios$ se indican losnom res de todos los medios separados por comas. Si no se indica el medio en una reglade tipo m%#rt$ el na#egador so reentiende %ue el medio es all $ es decir$ %ue los estilosse aplican en todos los medios.

1. .,. &edios definidos con la eti0ueta

Si se utili+a la eti%ueta <l , para enla+ar los archi#os CSS e-ternos$ se puede utili+ar elatri uto m + a para indicar el medio o medios en los %ue se aplican los estilos de cadaarchi#o,<l r l " t l h t" t % "t *t/4 " m + a " 4r " hr ; ":a 4#.4 " / ,

<l r l " t l h t" t % "t *t/4 " m + a "%r t ha +h l+"

hr ; " % 4 al.4 " / ,

6n este ejemplo$ el primer archi#o CSS se tiene en cuenta cuando la p!gina se #isuali+aen la pantalla ' m + a " 4r "). Los estilos indicados en el segundo archi#o CSS$ se

aplican al imprimir la p!gina ' m + a "%r t" ) o al #isuali+arla en un dispositi#o mó#il' m + a "ha +h l+" )$ como por ejemplo en un i:hone.

Si la eti%ueta <l , no indica el medio CSS$ se so reentiende %ue los estilos se de enaplicar a todos los medios$ por lo %ue es e%ui#alente a indicar m + a "all" .

1. . . &edios definidos e2clando varios étodos

CSS tam i(n permite me+clar los tres m(todos anteriores para indicar los medios en los%ue se aplica cada archi#o CSS e-terno,<l r l " t l h t" t % "t *t/4 " m + a " 4r " hr ; ":a 4#.4 " / ,

m%#rt rlF" t l# 44 # .4 "G 4r 5

m + a %r t A /J E t l# % 4K; 4# %ara m%r #ra J/

Los estilos CSS %ue se aplican cuando se #isuali+a la p!gina en una pantalla se o tienen

mediante el recurso enla+ado con la eti%ueta <l , y mediante el archi#o CSS e-ternoincluido con la regla de tipo m%#rt. *dem!s$ los estilos aplicados cuando se imprime lap!gina se indican directamente en la p!gina HTML mediante la regla de tipo m + a.

1.2. Co entariosCSS permite incluir comentarios entre sus reglas y estilos. Los comentarios soncontenidos de te-to %ue el dise/ador incluye en el archi#o CSS para su propia información

y utilidad. Los na#egadores ignoran por completo cual%uier comentario de los archi#osCSS$ por lo %ue es comDn utili+arlos para estructurar de forma clara los archi#os CSScomplejos.6l comien+o de un comentario se indica mediante los caracteres /J y el final delcomentario se indica mediante J/ $ tal y como se muestra en el siguiente ejemplo,/J E t 4#m tar # C99 J/

Los comentarios pueden ocupar tantas líneas como sea necesario$ pero no se puede

incluir un comentario dentro de otro comentario,/J E t 4#m tar # C99 + 2ar a l a J/

*un%ue los na#egadores ignoran los comentarios$ su contenido se en#ía junto con el restode estilos$ por lo %ue no se de e incluir en ellos ninguna información sensi le oconfidencial.La sinta-is de los comentarios CSS es muy diferente a la de los comentarios HTML$ por lo%ue no de en confundirse,<!-- E t 4#m tar # HTML --,

<!-- E t 4#m tar # HTML + 2ar a l a --,

1.14. Sinta+is de la definición de cadapropiedad CSS

* lo largo de los pró-imos capítulos$ se incluyen las definiciones formales de la mayoríade propiedades de CSS. La definición formal se asa en la información recogida en elest!ndar oficial y se muestra en forma de ta la.

na de las principales informaciones de cada definición es la lista de posi les #alores %ueadmite la propiedad. :ara definir la lista de #alores permitidos se sigue un formato %ue esnecesario detallar.Si el #alor permitido se indica como una sucesión de pala ras sin ningDn car!cter %ue lassepare 'par(ntesis$ comas$ arras$ etc.) el #alor de la propiedad se de e indicar tal ycomo se muestra y con esas pala ras en el mismo orden.Si el #alor permitido se indica como una sucesión de #alores separados por una arrasimple 'car!cter ) el #alor de la propiedad de e tomar uno y sólo uno de los #aloresindicados. :or ejemplo$ la notación <%#r4 ta8 , <m + +a, h r t indica %ue lapropiedad solamente puede tomar como #alor la pala ra reser#ada h r t o unporcentaje o una medida.Si el #alor permitido se indica como una sucesión de #alores separados por una arrado le 'sím olo ) el #alor de la propiedad puede tomar uno o m!s #alores de losindicados y en cual%uier orden.:or ejemplo$ la notación <4#l#r, < t l#, <m + +a, indica %ue la propiedadpuede tomar como #alor cual%uier com inación de los #alores indicados y en cual%uierorden. Se podría esta lecer un color y un estilo$ solamente una medida o una medida y unestilo. *dem!s$ el orden en el %ue se indican los #alores es indiferente. Bpcionalmente$ se

pueden utili+ar par(ntesis para agrupar diferentes #alores.:or Dltimo$ en cada #alor o agrupación de #alores se puede indicar el tipo de #alor,opcional$ o ligatorio$ mDltiple o restringido.6l car!cter J indica %ue el #alor ocurre cero o m!s #ecesJ el car!cter indica %ue el #alorocurre una o m!s #ecesJ el car!cter N indica %ue el #alor es opcional y por Dltimo$ elcar!cter A m r# 1 m r# @ indica %ue el #alor ocurre al menos tantas #eces como el#alor indicado en m r# 1 y como m!-imo tantas #eces como el #alor indicado en

m r# @.

:or ejemplo$ el #alor <;am l - am , QJ indica %ue el #alor de tipo<;am l am , seguido por una coma se puede incluir cero o m!s #eces. 6l #alor < rl,N<4#l#r, significa %ue la FL es opcional y el color o ligatorio y en el orden indicado. :or



Dltimo$ el #alor <m + +a, th 4 th Q A1 R indica %ue se pueden escri ir entre 1 y> #eces un #alor %ue sea o una medida o la pala ra th 4 o la pala ra th .Io o stante$ la mejor forma de entender la notación formal para las propiedades de CSSes o ser#ar la definición de cada propiedad y #ol#er a esta sección siempre %ue seanecesario.

Capítulo 0. Selectores:ara crear dise/os "e profesionales$ es imprescindi le conocer y dominar los selectoresde CSS. Como se #io en el capítulo anterior$ una regla de CSS est! formada por unaparte llamada AselectorA y otra parte llamada AdeclaraciónA.La declaración indica "!u hay !ue hacer" y el selector indica "a !ui n hay !uehac rselo" . :or lo tanto$ los selectores son imprescindi les para aplicar de forma correctalos estilos CSS en una p!gina.

* un mismo elemento HTML se le pueden aplicar #arias reglas CSS y cada regla CSSpuede aplicarse a un nDmero ilimitado de elementos. 6n otras pala ras$ una misma reglapuede aplicarse so re #arios selectores y un mismo selector se puede utili+ar en #ariasreglas.6l est!ndar de CSS 0.1 incluye una docena de tipos diferentes de selectores$ %uepermiten seleccionar de forma muy precisa elementos indi#iduales o conjuntos deelementos dentro de una p!gina "e .

Io o stante$ la mayoría de p!ginas de los sitios "e se pueden dise/ar utili+andosolamente los cinco selectores !sicos.

0.1. Selectores !"sicos

).1.1. Selector universal

Se utili+a para seleccionar todos los elementos de la p!gina. 6l siguiente ejemplo elimina

el margen y el relleno de todos los elementos HTML 'por ahora no es importante fijarse enla parte de la declaración de la regla CSS),J A mar( & 0 5 %a++ (& 0 5

6l selector uni#ersal se indica mediante un asterisco ' J ). * pesar de su sencille+$ no se

utili+a ha itualmente$ ya %ue es difícil %ue un mismo estilo se pueda aplicar a todos loselementos de una p!gina.Io o stante$ sí %ue se suele com inar con otros selectores y adem!s$ forma parte de



algunos hac#s muy utili+ados$ como se #er! m!s adelante.

).1.). Selector de tipo o eti0ueta

Selecciona todos los elementos de la p!gina cuya eti%ueta HTML coincide con el #alor delselector. 6l siguiente ejemplo selecciona todos los p!rrafos de la p!gina,% A ...

:ara utili+ar este selector$ solamente es necesario indicar el nom re de una eti%uetaHTML 'sin los caracteres < y , ) correspondiente a los elementos %ue se %uierenseleccionar.6l siguiente ejemplo aplica diferentes estilos a los titulares y a los p!rrafos de una p!gina

HTML,h1 A 4#l#r & r +5

h@ A 4#l#r & :l 5

% A 4#l#r & :la4 5

Si se %uiere aplicar los mismos estilos a dos eti%uetas diferentes$ se pueden encadenarlos selectores. 6n el siguiente ejemplo$ los títulos de sección h1$h@ y h3 comparten losmismos estilos,h1 A 4#l#r & S6 6E@ 5 ;# t-' (ht & #rmal 5 ;# t-;am l & r al H l2 t 4a a - r ; 5

h@ A 4#l#r & S6 6E@ 5 ;# t-' (ht & #rmal 5 ;# t-;am l & r al H l2 t 4a a - r ; 5

h3 A



4#l#r & S6 6E@ 5 ;# t-' (ht & #rmal 5 ;# t-;am l & r al H l2 t 4a a - r ; 5

6n este caso$ CSS permite agrupar todas las reglas indi#iduales en una sola regla con unselector mDltiple. :ara ello$ se incluyen todos los selectores separados por una coma ' ) yel resultado es %ue la siguiente regla CSS es e%ui#alente a las tres reglas anteriores,h1 h@ h3 A 4#l#r & S6 6E@ 5 ;# t-' (ht & #rmal 5 ;# t-;am l & r al H l2 t 4a a - r ; 5

6n las hojas de estilo complejas$ es ha itual agrupar las propiedades comunes de #arioselementos en una Dnica regla CSS y posteriormente definir las propiedades específicasde esos mismos elementos. 6l siguiente ejemplo esta lece en primer lugar laspropiedades comunes de los títulos de sección 'color y tipo de letra) y a continuación$esta lece el tama/o de letra de cada uno de ellos,h1 h@ h3 A 4#l#r & S6 6E@ 5

;# t-' (ht & #rmal 5 ;# t-;am l & r al H l2 t 4a a - r ; 5

h1 A ;# t- = & @ m5

h@ A ;# t- = & 1.7 m 5

h3 A ;# t- = & 1.@ m5

).1.,. Selector descendenteSelecciona los elementos %ue se encuentran dentro de otros elementos. n elemento esdescendiente de otro cuando se encuentra entre las eti%uetas de apertura y de cierre delotro elemento.6l selector del siguiente ejemplo selecciona todos los elementos < %a , de la p!gina %uese encuentren dentro de un elemento <%,,% %a A 4#l#r & r +5

Si el código HTML de la p!gina es el siguiente,<%, ...



< %a ,t *t#1< / %a , ... <a hr ; "" ,...< %a ,t *t#@< / %a ,< / a, ...

</ %,

6l selector % %a selecciona tanto t *t#1 como t *t#@ . 6l moti#o es %ue en el selectordescendente$ un elemento no tiene %ue ser descendiente directo del otro. La Dnicacondición es %ue un elemento de e estar dentro de otro elemento$ sin importar el ni#el deprofundidad en el %ue se encuentre.

*l resto de elementos < %a , de la p!gina %ue no est!n dentro de un elemento <%,$ no seles aplica la regla CSS anterior.Los selectores descendentes permiten aumentar la precisión del selector de tipo o

eti%ueta. *sí$ utili+ando el selector descendente es posi le aplicar diferentes estilos a loselementos del mismo tipo. 6l siguiente ejemplo amplía el anterior y muestra de color a+ultodo el te-to de los < %a , contenidos dentro de un <h1, ,% %a A 4#l#r & r + 5 h1 %a A 4#l#r & :l 5

Con las reglas CSS anteriores,• Los elementos < %a , %ue se encuentran dentro de un elemento <%, se muestran de

color rojo.• Los elementos < %a , %ue se encuentran dentro de un elemento <h1, se muestran de

color a+ul.• 6l resto de elementos < %a , de la p!gina$ se muestran con el color por defecto aplicado

por el na#egador.

La sinta-is formal del selector descendente se muestra a continuación,l 4t#r1 l 4t#r@ l 4t#r3 ... l 4t#r$

Los selectores descendentes siempre est!n formados por dos o m!s selectoresseparados entre sí por espacios en lanco. 6l Dltimo selector indica el elemento so re el%ue se aplican los estilos y todos los selectores anteriores indican el lugar en el %ue sede e encontrar ese elemento.6n el siguiente ejemplo$ el selector descendente se compone de cuatro selectores,% a %a m A t *t-+ 4#rat # & + rl 5

Los estilos de la regla anterior se aplican a los elementos de tipo < m, %ue se encuentrendentro de elementos de tipo < %a ,$ %ue a su #e+ se encuentren dentro de elementos detipo <a, %ue se encuentren dentro de elementos de tipo <%,.



Io de e confundirse el selector descendente con la com inación de selectores,/J El t l# a%l 4a a t#+# l# l m t# "%" "a" " %a " " m" J/

% a %a m A t *t-+ 4#rat # & + rl 5

/J El t l# a%l 4a #l# a l# l m t# " m"

4 tra + tr# + "% a %a " J/% a %a m A t *t-+ 4#rat # & + rl 5

Se puede restringir el alcance del selector descendente com in!ndolo con el selectoruni#ersal. 6l siguiente ejemplo$ muestra los dos enlaces de color rojo,% a A 4#l#r & r + 5

<%, <a hr ; "S" , E la4 </a , </%,

<%, < %a , <a hr ; "S" , E la4 </a , </ %a , </%,

Sin em argo$ en el siguiente ejemplo solamente el segundo enlace se muestra de colorrojo,% J a A 4#l#r & r +5

<%, <a hr ; "S" , E la4 </a , </%,<%, < %a , <a hr ; "S" , E la4 </a , </ %a , </%,

La ra+ón es %ue el selector % J a se interpreta como todos los elementos de tipo <a> !ue

se encuentren dentro de cual!uier elemento !ue$ a su ve%$ se encuentre dentro de unelemento de tipo <p> . Como el primer elemento <a, se encuentra directamente ajo unelemento <%,$ no se cumple la condición del selector % J a .

).1. . Selector de clase

Si se considera el siguiente código HTML de ejemplo,<:#+ ,

<%,L#r m % m +#l#r t am t...< / %, <%,$ 4 + la4 t t a+ % 4 ( a44 m a ...< / %, <%,Cla a%t t ta4 t #4 # a+ l t#ra...< / %,

</ :#+ ,

KCómo se pueden aplicar estilos CSS sólo al primer p!rrafo 6l selector uni#ersal ' J ) nose puede utili+ar por%ue selecciona todos los elementos de la p!gina. 6l selector de tipo oeti%ueta ' %) tampoco se puede utili+ar por%ue seleccionaría todos los p!rrafos. :or Dltimo$

el selector descendente ' :#+ % ) tampoco se puede utili+ar por%ue todos los p!rrafos seencuentran en el mismo sitio.

na de las soluciones m!s sencillas para aplicar estilos a un solo elemento de la p!gina



consiste en utili+ar el atri uto 4la de HTML so re ese elemento para indicardirectamente la regla CSS %ue se le de e aplicar,<:#+ , <% 4la "+ ta4a+#" ,L#r m % m +#l#r t am t...< / %, <%,$ 4 + la4 t t a+ % 4 ( a44 m a ...< / %, <%,Cla a%t t ta4 t #4 # a+ l t#ra...< / %,

</ :#+ ,

* continuación$ se crea en el archi#o CSS una nue#a regla llamada + ta4a+# con todoslos estilos %ue se #an a aplicar al elemento. :ara %ue el na#egador no confunda esteselector con los otros tipos de selectores$ se prefija el #alor del atri uto 4la con unpunto ' . ) tal y como muestra el siguiente ejemplo,.+ ta4a+# A 4#l#r & r + 5

6l selector .+ ta4a+# se interpreta como "cual!uier elemento de la página cuyo atributoclass sea igual a destacado " $ por lo %ue solamente el primer p!rrafo cumple esacondición.6ste tipo de selectores se llaman selectores de clase y son los m!s utili+ados junto conlos selectores de 75 %ue se #er!n a continuación. La principal característica de esteselector es %ue en una misma p!gina HTML #arios elementos diferentes pueden utili+ar elmismo #alor en el atri uto 4la ,<:#+ , <% 4la "+ ta4a+#" ,L#r m % m +#l#r t am t...< / %, <%,$ 4 + la4 t < a hr ; "S" 4la "+ ta4a+#" , t a+ % 4 (< / a,

a44 m a ...< / %, <%,Cla a%t t ta4 t < m 4la "+ ta4a+#" , #4 # a+< / m, l t#ra...< / %,

</ :#+ ,

Los selectores de clase son imprescindi les para dise/ar p!ginas "e complejas$ ya %uepermiten disponer de una precisión total al seleccionar los elementos. *dem!s$ estosselectores permiten reutili+ar los mismos estilos para #arios elementos diferentes.

* continuación se muestra otro ejemplo de selectores de clase,.a2 # A %a++ (& 0.7 m 5 :#r+ r & 1%* #l + S 6: 10 5 :a4 (r# + & S; ; +a 5

. rr#r A 4#l#r & S 305



;# t-' (ht & :#l+ 5

< %a 4la " rr#r" , ...</ %a ,

<+ 2 4la "a2 #" , ...</+ 2 ,

6l elemento < %a , tiene un atri uto 4la " rr#r" $ por lo %ue se le aplican las reglasCSS indicadas por el selector . rr#r . :or su parte$ el elemento <+ 2, tiene unatri uto 4la "a2 #" $ por lo %ue su estilo es el %ue definen las reglas CSS delselector .a2 # .6n ocasiones$ es necesario restringir el alcance del selector de clase. Si se considera denue#o el ejemplo anterior,<:#+ ,

<% 4la "+ ta4a+#" ,L#r m % m +#l#r t am t...< / %, <%,$ 4 + la4 t < a hr ; "S" 4la "+ ta4a+#" , t a+ % 4 (< / a,

a44 m a ...< / %, <%,Cla a%t t ta4 t < m 4la "+ ta4a+#" , #4 # a+< / m, l t#ra...< / %,

</ :#+ ,

KCómo es posi le aplicar estilos solamente al p!rrafo cuyo atri uto 4la sea iguala + ta4a+# Com inando el selector de tipo y el selector de clase$ se o tiene un selector

mucho m!s específico,%.+ ta4a+# A 4#l#r & r +

6l selector %.+ ta4a+# se interpreta como "a!uellos elementos de tipo <p> !uedispongan de un atributo class con valor destacado " . 5e la misma forma$ elselector a.+ ta4a+# solamente selecciona los enlaces cuyo atri uto 4la sea iguala + ta4a+# .5e lo anterior se deduce %ue el atri uto .+ ta4a+# es e%ui#alente a J.+ ta4a+# $ por lo%ue todos los dise/adores o #ian el sím olo J al escri ir un selector de clase normal.Io de e confundirse el selector de clase con los selectores anteriores,/J T#+# l# l m t# + t %# "%" 4# atr : t# 4la "a2 #" J/%.a2 # A ...

/J T#+# l# l m t# 4# atr : t# 4la "a2 #" tV + tr# + 4 al r l m t# + t %# "%" J/

% .a2 # A ...

/J T#+# l# l m t# "%" + la %>( a t#+# l# l m t# 4# atr : t# 4la "a2 #" + la %>( a J/

% .a2 # A ...



:or Dltimo$ es posi le aplicar los estilos de #arias clases CSS so re un mismo elemento.La sinta-is es similar$ pero los diferentes #alores del atri uto 4la se separan conespacios en lanco. 6n el siguiente ejemplo,<% 4la " % 4 al + ta4a+# rr#r" ,P>rra;# + t *t#...< / %,

*l p!rrafo anterior se le aplican los estilos definidos en las reglas . % 4 al $.+ ta4a+# y. rr#r $ por lo %ue en el siguiente ejemplo$ el te-to del p!rrafo se #ería de color rojo$ ennegrita y con un tama/o de letra de 1? pí-el,. rr#r A 4#l#r& r +5

.+ ta4a+# A ;# t- = & 17%*5

. % 4 al A ;# t-' (ht& :#l+5

<% 4la " % 4 al + ta4a+# rr#r" ,P>rra;# + t *t#...< / %,

Si un elemento dispone de un atri uto 4la con m!s de un #alor$ es posi le utili+ar unselector m!s a#an+ado,. rr#r A 4#l#r& r +5 . rr#r.+ ta4a+# A 4#l#r& :l 5

.+ ta4a+# A ;# t- = & 17%*5

. % 4 al A ;# t-' (ht& :#l+5

<% 4la " % 4 al + ta4a+# rr#r" ,P>rra;# + t *t#...< / %,

6n el ejemplo anterior$ el color de la letra del te-to es a+ul y no rojo. 6l moti#o es %ue seha utili+ado un selector de clase mDltiple . rr#r.+ ta4a+# $ %ue se interpretacomo "a!uellos elementos de la página !ue dispongan de un atributo class con al menoslos valores error y destacado " .

).1.3. Selectores de I*

6n ocasiones$ es necesario aplicar estilos CSS a un Dnico elemento de la p!gina. *un%ue

puede utili+arse un selector de clase para aplicar estilos a un Dnico elemento$ e-iste otroselector m!s eficiente en este caso.6l selector de 75 permite seleccionar un elemento de la p!gina a tra#(s del #alor de suatri uto +. 6ste tipo de selectores sólo seleccionan un elemento de la p!gina por%ue el#alor del atri uto + no se puede repetir en dos elementos diferentes de una mismap!gina.La sinta-is de los selectores de 75 es muy parecida a la de los selectores de clase$ sal#o%ue se utili+a el sím olo de la almohadilla ' S) en #e+ del punto ' . ) como prefijo del nom re

de la regla CSS,S+ ta4a+# A 4#l#r & r + 5



<%, Pr m r %>rra;#</% ,<% + "+ ta4a+#" , 9 ( +# %>rra;#</% ,

<%, T r4 r %>rra;#</% ,

6n el ejemplo anterior$ el selector S+ ta4a+# solamente selecciona el segundo p!rrafo'cuyo atri uto + es igual a + ta4a+# ).La principal diferencia entre este tipo de selector y el selector de clase tiene %ue #er conHTML y no con CSS. Como se sa e$ en una misma p!gina$ el #alor del atri uto + de eser Dnico$ de forma %ue dos elementos diferentes no pueden tener el mismo #alor de +.Sin em argo$ el atri uto 4la no es o ligatorio %ue sea Dnico$ de forma %ue muchoselementos HTML diferentes pueden compartir el mismo #alor para su atri uto 4la .5e esta forma$ la recomendación general es la de utili+ar el selector de 75 cuando se%uiere aplicar un estilo a un solo elemento específico de la p!gina y utili+ar el selector de

clase cuando se %uiere aplicar un estilo a #arios elementos diferentes de la p!gina HTML. *l igual %ue los selectores de clase$ en este caso tam i(n se puede restringir el alcancedel selector mediante la com inación con otros selectores. 6l siguiente ejemplo aplica laregla CSS solamente al elemento de tipo <%, %ue tenga un atri uto + igual al indicado,%Sa2 # A 4#l#r & :l 5

* primera #ista$ restringir el alcance de un selector de 75 puede parecer a surdo. 6nrealidad$ un selector de tipo %Sa2 # sólo tiene sentido cuando el archi#o CSS se aplica

so re muchas p!ginas HTML diferentes.6n este caso$ algunas p!ginas pueden disponer de elementos con un atri uto + iguala a2 # y %ue no sean p!rrafos$ por lo %ue la regla anterior no se aplica so re esoselementos.Io de e confundirse el selector de 75 con los selectores anteriores,/J T#+# l# l m t# + t %# "%" 4# atr : t# + "a2 #" J/

%Sa2 # A ...

/J T#+# l# l m t# 4# atr : t# + "a2 #" tV + tr#

+ 4 al r l m t# + t %# "%" J/% Sa2 # A ...

/J T#+# l# l m t# "%" + la %>( a t#+# l# l m t# 4# atr : t# + "a2 #" + la %>( a J/

% Sa2 # A ...

).1.(. Co !inación de selectores !"sicos

CSS permite la com inación de uno o m!s tipos de selectores para restringir el alcance



de las reglas CSS. * continuación se muestran algunos ejemplos ha ituales decom inación de selectores..a2 # . % 4 al A ...

6l anterior selector solamente selecciona a%uellos elementos con un4la " % 4 al" %ue se encuentren dentro de cual%uier elemento con un4la "a2 #" .Si se modifica el anterior selector,+ 2.a2 # %a . % 4 al A ...

*hora$ el selector solamente selecciona a%uellos elementos de tipo < %a , con un atri uto4la " % 4 al" %ue est(n dentro de cual%uier elemento de tipo <+ 2, %ue tenga unatri uto 4la "a2 #" .

La com inación de selectores puede llegar a ser todo lo compleja %ue sea necesario,l Sm Pr 4 %al l .+ ta4a+# a S 4 # A ...

6l anterior selector hace referencia al enlace con un atri uto + igual a 4 # %ue seencuentra dentro de un elemento de tipo <l , con un atri uto 4la igual a + ta4a+# $%ue forma parte de una lista < l, con un atri uto + igual a m Pr 4 %al.E4ercicio 1

er enunciado

0.0. Selectores avan2adostili+ando solamente los selectores !sicos de la sección anterior$ es posi le dise/ar

pr!cticamente cual%uier p!gina "e . Io o stante$ CSS define otros selectores m!sa#an+ados %ue permiten simplificar las hojas de estilos.5esafortunadamente$ el na#egador 7nternet 6-plorer @ y sus #ersiones anteriores nosoporta an este tipo de selectores a#an+ados$ por lo %ue su uso no era comDn hastahace poco tiempo. Si %uieres consultar el soporte de los selectores en los distintosna#egadores$ puedes utili+ar las siguientes referencias,• Lista completa de los selectores %ue soporta cada #ersión de cada na#egador

• Test online en el %ue puedes compro ar los selectores %ue soporta el na#egador con el

%ue reali+as el test

).).1. Selector de hi4os

Se trata de un selector similar al selector descendente$ pero muy diferente en su

funcionamiento. Se utili+a para seleccionar un elemento %ue es hi&o directo de otroelemento y se indica mediante el "signo de mayor !ue" ' , ),% , %a A 4#l#r & :l 5

http://librosweb.es/css/capitulo_15.html

http://dev.l-c-n.com/CSS3-selectors/browser-support.php

http://www.css3.info/selectors-test/


http://librosweb.es/css/capitulo_15.html

http://dev.l-c-n.com/CSS3-selectors/browser-support.php





<%, < %a , T *t#1</ %a , </%,

<%, <a hr ; "S" , < %a , T *t#@</ %a , </a , </%,

6n el ejemplo anterior$ el selector % , %a se interpreta como "cual!uier elemento <span>

!ue sea hi&o directo de un elemento <p> " $ por lo %ue el primer elemento < %a ,cumple lacondición del selector. Sin em argo$ el segundo elemento < %a , no la cumple por%ue esdescendiente pero no es hijo directo de un elemento <%,.6l siguiente ejemplo muestra las diferencias entre el selector descendente y el selector dehijos,% a A 4#l#r & r + 5

% , a A 4#l#r & r +5

<%, <a hr ; "S" , E la4 1</a , </%,

<%, < %a , <a hr ; "S" , E la4 @</a , </ %a , </%,

6l primer selector es de tipo descendente y por tanto se aplica a todos los elementos <a, %ue se encuentran dentro de elementos <%,. 6n este caso$ los estilos de este selector seaplican a los dos enlaces.:or otra parte$ el selector de hijos o liga a %ue el elemento <a, sea hijo directo de unelemento <%,. :or lo tanto$ los estilos del selector % , a no se aplican al segundo enlacedel ejemplo anterior.

).).). Selector ad5acente

6l selector adyacente se emplea para seleccionar elementos %ue en el código HTML de lap!gina se encuentran justo a continuación de otros elementos. Su sinta-is emplea elsigno para separar los dos elementos,

l m t#1 l m t#@ A ...

Si se considera el siguiente código HTML,

<:#+ ,<h1,T t l#1< / h1,

<h@,9 :tKt l#< / h@,

...

<h@,Otr# :tKt l#< / h@,

...

</ :#+ ,

La p!gina anterior dispone de dos elementos <h@,$ pero sólo uno de ellos se encuentra



inmediatamente despu(s del elemento <h1, . Si se %uiere aplicar diferentes colores enfunción de esta circunstancia$ el selector adyacente es el m!s adecuado,h@ A 4#l#r & (r 5

h1 h@ A 4#l#r & r +

Las reglas CSS anteriores hacen %ue todos los <h@, de la p!gina se #ean de color #erde$sal#o a%uellos <h@, %ue se encuentran inmediatamente despu(s de cual%uier elemento<h1, y %ue se muestran de color rojo.T(cnicamente$ los elementos %ue forman el selector adyacente de en cumplir las dossiguientes condiciones,• l m t#1 y l m t#@ de en ser elementos hermanos $ por lo %ue su elemento padre

de e ser el mismo.• l m t#@ de e aparecer inmediatamente despu(s de l m t#1 en el código HTML de

la p!gina.

6l siguiente ejemplo es muy Dtil para los te-tos %ue se muestran como li ros,% % A t *t- + t & 1.7 m 5

6n muchos li ros$ suele ser ha itual %ue la primera línea de todos los p!rrafos est(indentada$ sal#o la primera línea del primer p!rrafo. Con el selector % %$ se seleccionantodos los p!rrafos de la p!gina %ue est(n precedidos por otro p!rrafo$ por lo %ue no se

aplica al primer p!rrafo de la p!gina.).).,. Selector de atri!utos

6l Dltimo tipo de selectores a#an+ados lo forman los selectores de atri utos$ %ue permitenseleccionar elementos HTML en función de sus atri utos y&o #alores de esos atri utos.Los cuatro tipos de selectores de atri utos son,• #m:r atr : t#Q $ selecciona los elementos %ue tienen esta lecido el atri uto llamado

#m:r atr : t# $ independientemente de su #alor.•

#m:r atr : t# 2al#rQ $ selecciona los elementos %ue tienen esta lecido un atri utollamado #m:r atr : t# con un #alor igual a 2al#r .• #m:r atr : t# 2al#rQ $ selecciona los elementos %ue tienen esta lecido un atri uto

llamado #m:r atr : t# y al menos uno de los #alores del atri uto es 2al#r .• #m:r atr : t# 2al#rQ $ selecciona los elementos %ue tienen esta lecido un atri uto

llamado #m:r atr : t# y cuyo #alor es una serie de pala ras separadas con guiones$

pero %ue comien+a con 2al#r . 6ste tipo de selector sólo es Dtil para los atri utos de tipo

la ( %ue indican el idioma del contenido del elemento.

* continuación se muestran algunos ejemplos de estos tipos de selectores,



/J 9 m tra + 4#l#r a= l t#+# l# la4 t (a atr : t# "4la " + % + t m t + 2al#r J/

a 4la Q A 4#l#r & :l 5

/J 9 m tra + 4#l#r a= l t#+# l# la4 t (a

atr : t# "4la " 4# l 2al#r " *t r #" J/a 4la " *t r #" Q A 4#l#r & :l 5

/J 9 m tra + 4#l#r a= l t#+# l# la4 a% tal t # "htt%&//'''. 8 m%l#.4#m" J/

a hr ; "htt%&//'''. 8 m%l#.4#m" Q A 4#l#r & :l 5

/J 9 m tra + 4#l#r a= l t#+# l# la4 t (a

atr : t# "4la " l al m # # + 2al#r a " *t r #" J/

a 4la " *t r #" Q A 4#l#r & :l 5

/J 9 l 44 # a t#+# l# l m t# + la %>( a 4 # atr : t# "la (" a ( al a " " + 4 r t#+# l# l m t# (lV J/

J la ( Q A ...

/J 9 l 44 # a t#+# l# l m t# + la %>( a 4 # atr : t# "la (" m% 4 %#r " " + 4 r " " " -E9" " - )" t4. J/

J la ( " " Q A 4#l#r & r +

0.9. 6grupación de reglasCuando se crean archi#os CSS complejos con decenas o cientos de reglas$ es ha itual%ue los estilos %ue se aplican a un mismo selector se definan en diferentes reglas,h1 A 4#l#r & r + 5 ...

h1 A ;# t- = & @ m5

...

h1 A ;# t-;am l & ? r+a a 5

Las tres reglas anteriores esta lecen el #alor de tres propiedades diferentes de loselementos <h1, . *ntes de %ue el na#egador muestre la p!gina$ procesa todas las reglasCSS de la p!gina para tener en cuenta todos los estilos definidos para cada elemento.Cuando el selector de dos o m!s reglas CSS es id(ntico$ se pueden agrupar lasdeclaraciones de las reglas para hacer las hojas de estilos m!s eficientes,



h1 A 4#l#r & r +5 ;# t- = & @ m5 ;# t-;am l & ? r+a a 5

6l ejemplo anterior tiene el mismo efecto %ue las tres reglas anteriores$ pero es m!seficiente y es m!s f!cil de modificar y mantener por parte de los dise/adores. Como CSSignora los espacios en lanco y las nue#as líneas$ tam i(n se pueden agrupar las reglasde la siguiente forma,h1 A 4#l#r & r + 5 ;# t- = & @ m5 ;# t-;am l & ? r+a a 5

Si se %uiere reducir al m!-imo el tama/o del archi#o CSS para mejorar ligeramente el

tiempo de carga de la p!gina "e $ tam i(n es posi le indicar la regla anterior de lasiguiente forma,h1 A4#l#r &r + 5;# t- = &@ m5;# t-;am l &? r+a a 5

0.>. $erenciana de las características principales de CSS es la herencia de los estilos definidos para

los elementos. Cuando se esta lece el #alor de una propiedad CSS en un elemento$ sus

elementos descendientes heredan de forma autom!tica el #alor de esa propiedad. Si seconsidera el siguiente ejemplo,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra t # al//E$" "htt%&//'''.'3.#r(/T)/*html1/DTD/*html1-tra t # al.+t+",

<html *ml "htt%&//'''.'3.#r(/1 /*html" ,

<h a+,


<t tl ,E8 m%l# + h r 4 a + t l# < / t tl ,< t l t % "t *t/4 " , :#+ A 4#l#r& :l 5

</ t l ,

</ h a+,


</ :#+ ,

</ html ,



6n el ejemplo anterior$ el selector :#+ solamente esta lece el color de la letra para elelemento <:#+ , . Io o stante$ la propiedad 4#l#r es una de las %ue se heredan de formaautom!tica$ por lo %ue todos los elementos descendientes de <:#+ , muestran ese mismocolor de letra. :or tanto$ esta lecer el color de la letra en el elemento <:#+ , de la p!ginaimplica cam iar el color de letra de todos los elementos de la p!gina.

*un%ue la herencia de estilos se aplica autom!ticamente$ se puede anular su efectoesta leciendo de forma e-plícita otro #alor para la propiedad %ue se hereda$ como semuestra en el siguiente ejemplo,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra t # al//E$" "htt%&//'''.'3.#r(/T)/*html1/DTD/*html1-tra t # al.+t+",

<html *ml "htt%&//'''.'3.#r(/1 /*html" ,

<h a+,


<t tl ,E8 m%l# + h r 4 a + t l# < / t tl ,< t l t % "t *t/4 " , :#+ A ;# t-;am l & r al5 4#l#r& :la4 5 h1 A ;# t-;am l & ? r+a a5 % A 4#l#r& r +5

</ t l ,</ h a+,


</ :#+ ,

</ html ,

6n el ejemplo anterior$ se esta lece en primer lugar el color y tipo de letra delelemento <:#+ , $ por lo %ue todos los elementos de la p!gina se mostrarían con ese

mismo color y tipo de letra. Io o stante$ las otras reglas CSS modifican alguno de losestilos heredados.5e esta forma$ los elementos <h1, de la p!gina se muestran con el tipo de letra? r+a a esta lecido por el selector h1 y se muestran de color negro %ue es el #alorheredado del elemento <:#+ , . 7gualmente$ los elementos <%, de la p!gina se muestrandel color rojo esta lecido por el selector % y con un tipo de letra r al heredado delelemento <:#+ , .La mayoría de propiedades CSS aplican la herencia de estilos de forma autom!tica.

*dem!s$ para a%uellas propiedades %ue no se heredan autom!ticamente$ CSS incluye unmecanismo para for+ar a %ue se hereden sus #alores$ tal y como se #er! m!s adelante.:or Dltimo$ aun%ue la herencia autom!tica de estilos puede parecer complicada$ simplifica



en gran medida la creación de hojas de estilos complejas. Como se ha #isto en losejemplos anteriores$ si se %uiere esta lecer por ejemplo la tipografía ase de la p!gina$simplemente se de e esta lecer en el elemento <:#+ , de la p!gina y el resto deelementos la heredar!n de forma autom!tica.

0.?. Colisiones de estilos6n las hojas de estilos complejas$ es ha itual %ue #arias reglas CSS se apli%uen a unmismo elemento HTML. 6l pro lema de estas reglas mDltiples es %ue se pueden darcolisiones como la del siguiente ejemplo,% A 4#l#r & r + 5

% A 4#l#r & :l 5

<%, ...</% ,

K5e %u( color se muestra el p!rrafo anterior CSS tiene un mecanismo de resolución decolisiones muy complejo y %ue tiene en cuenta el tipo de hoja de estilo %ue se trate 'dena#egador$ de usuario o de dise/ador)$ la importancia de cada regla y lo específico %uesea el selector.6l m(todo seguido por CSS para resol#er las colisiones de estilos se muestra acontinuación,

1.5eterminar todas las declaraciones %ue se aplican al elemento para el medio CSSseleccionado.

#Brdenar las declaraciones segDn su origen 'CSS de na#egador$ de usuario o de

dise/ador) y su prioridad 'pala ra cla#e ! m%#rta t ).

9.Brdenar las declaraciones segDn lo específico %ue sea el selector. Cuanto m!s gen(rico

es un selector$ menos importancia tienen sus declaraciones.

>.Si despu(s de aplicar las normas anteriores e-isten dos o m!s reglas con la misma

prioridad$ se aplica la %ue se indicó en Dltimo lugar.

Hasta %ue no se e-pli%uen m!s adelante los conceptos de tipo de hoja de estilo y laprioridad$ el mecanismo simplificado %ue se puede aplicar es el siguiente,1.Cuanto m!s específico sea un selector$ m!s importancia tiene su regla asociada.

# * igual especificidad $ se considera la Dltima regla indicada.

Como en el ejemplo anterior los dos selectores son id(nticos$ las dos reglas tienen lamisma prioridad y pre#alece la %ue se indicó en Dltimo lugar$ por lo %ue el p!rrafo semuestra de color a+ul.6n el siguiente ejemplo$ la regla CSS %ue pre#alece se decide por lo específico %ue escada selector,



% A 4#l#r & r + 5 %S % 4 al A 4#l#r & (r 5

J A 4#l#r & :l 5

<% + " % 4 al" , ...</% ,

*l elemento <%, se le aplican las tres declaraciones. Como su origen y su importancia esla misma$ decide la especificidad del selector. 6l selector J es el menos específico$ ya %uese refiere a "todos los elementos de la página" . 6l selector % es poco específico por%ue serefiere a "todos los párrafos de la página" . :or Dltimo$ el selector %S % 4 alsólo hacereferencia a "el párrafo de la página cuyo atributo id sea igual a especial" . Como elselector %S % 4 al es el m!s específico$ su declaración es la %ue se tiene en cuenta ypor tanto el p!rrafo se muestra de color #erde.

E4ercicio )er enunciado

Capítulo 9. 7nidades de edida 5 coloresMuchas de las propiedades de CSS %ue se #en en los pró-imos capítulos permiten indicar medidas y colores en sus #alores. *dem!s$ CSS es tan fle-i le %ue permite indicar lasmedidas y colores de muchas formas diferentes.

:or este moti#o$ se presentan a continuación todas las alternati#as disponi les en CSSpara indicar las medidas y los colores. 6n los siguientes capítulos$ cuando una propiedadpueda tomar como #alor una medida o un color$ no se #ol#er!n a e-plicar todas estasalternati#as.

9.1. 7nidades de edidaLas medidas en CSS se emplean$ entre otras$ para definir la altura$ anchura y m!rgenes

de los elementos y para esta lecer el tama/o de letra del te-to. Todas las medidas seindican como un #alor num(rico entero o decimal seguido de una unidad de medida 'sinningDn espacio en lanco entre el nDmero y la unidad de medida).CSS di#ide las unidades de medida en dos grupos, a solutas y relati#as. Las medidasrelati#as definen su #alor en relación con otra medida$ por lo %ue para o tener su #alorreal$ se de e reali+ar alguna operación con el #alor indicado. Las unidades a solutasesta lecen de forma completa el #alor de una medida$ por lo %ue su #alor real esdirectamente el #alor indicado.Si el #alor es 0$ la unidad de medida es opcional. Si el #alor es distinto a 0 y no se indicaninguna unidad$ la medida se ignora completamente$ lo %ue suele ser uno de los erroresm!s ha ituales de los dise/adores %ue empie+an con CSS. *lgunas propiedades

http://librosweb.es/css/capitulo_15/ejercicio_2.html




permiten indicar medidas negati#as$ aun%ue ha itualmente sus #alores son positi#os. Si el#alor decimal de una medida es inferior a 1$ se puede omitir el 0 de la i+%uierda ' 0.7 m ese%ui#alente a .7 m).

,.1.1. 7nidades a!solutas

na medida indicada mediante unidades a solutas est! completamente definida$ ya %uesu #alor no depende de otro #alor de referencia. * continuación se muestra la listacompleta de unidades a solutas definidas por CSS y su significado,• $ pulgadas ' "inches" $ en ingl(s). na pulgada e%ui#ale a @.7R centímetros.

• 4m$ centímetros.

• mm$ milímetros.

• %t$ puntos. n punto e%ui#ale a 1 % l(a+a/ @ $ es decir$ unos 0.37 milímetros.

• %4$ picas. na pica e%ui#ale a 1@ puntos$ es decir$ unos R.@3 milímetros.

* continuación se muestran ejemplos de utili+ación de unidades a solutas,/J El 4 r%# + la %>( a + : m# trar mar( + m + a % l(a+a J/

:#+ A mar( & 0.7 5

/J L# l m t# <h1, + : m# trar t rl a+# + @ 4 tKm tr# J/

h1 A l -h (ht & @4m5

/J La %ala:ra + t#+# l# %>rra;# + : tar %ara+a R m lKm tr#

tr J/

% A '#r+- %a4 ( & Rmm5

/J L# la4 + : m# trar 4# tama # + l tra + 1@ % t# J/a A ;# t- = & 1@%t

/J L# l m t# < %a , + : t r tama # + l tra + 1 % 4a J/

%a A ;# t- = & 1%4

La principal #entaja de las unidades a solutas es %ue su #alor es directamente el #alor%ue se de e utili+ar$ sin necesidad de reali+ar c!lculos intermedios. Su principaldes#entaja es %ue son muy poco fle-i les y no se adaptan f!cilmente a los diferentesmedios.5e todas las unidades a solutas$ la Dnica %ue suele utili+arse es el punto ' %t). Se trata dela unidad de medida preferida para esta lecer el tama/o del te-to en los documentos %ue

se #an a imprimir$ es decir$ para el medio %r t de CSS$ tal y como se #er! m!s adelante.



,.1.). 7nidades relativas

La unidades relati#as$ a diferencia de las a solutas$ no est!n completamente definidas$ ya%ue su #alor siempre est! referenciado respecto a otro #alor. * pesar de su aparentedificultad$ son las m!s utili+adas en el dise/o "e por la fle-i ilidad con la %ue se adaptan

a los diferentes medios. * continuación se muestran las tres unidades de medida relati#as definidas por CSS y lareferencia %ue toma cada una para determinar su #alor real,• m$ 'no confundir con la eti%ueta < m, de HTML) relati#a respecto del tama/o de letra del

elemento.• *$ relati#a respecto de la altura de la letra * ' "e!uis min'scula" ) del tipo y tama/o de

letra del elemento.• %*$ 'pí-el) relati#a respecto de la resolución de la pantalla del dispositi#o en el %ue se

#isuali+a la p!gina HTML.

Las unidades m y * no han sido creadas por CSS$ sino %ue lle#an d(cadas utili+!ndoseen el campo de la tipografía. *un%ue no es una definición e-acta$ la unidad 1 m e%ui#ale ala anchura de la letra M ' "eme may'scula" ) del tipo y tama/o de letra del elemento.La unidad m hace referencia al tama/o en puntos de la letra %ue se est! utili+ando. Si seutili+a una tipografía de 10 puntos$ 1 m e%ui#ale a 1@ % t# . 6l #alor de 1 * se puedeapro-imar por 0.7 m .

Si se considera el siguiente ejemplo,% A mar( & 1 m5

La regla CSS anterior indica %ue los p!rrafos de en mostrar un margen de anchura iguala 1 m. Como se trata de una unidad de medida relati#a$ es necesario reali+ar un c!lculomatem!tico para determinar la anchura real de ese margen.La unidad de medida m siempre hace referencia al tama/o de letra del elemento. :or otraparte$ todos los na#egadores muestran por defecto el te-to de los p!rrafos con un tama/o

de letra de 1@ pí-el. :or tanto$ en este caso el margen de 1 m e%ui#ale a un margen deanchura 1 %*. * continuación se modifica el ejemplo anterior para cam iar el tama/o de letra de losp!rrafos,% A ;# t- = & 3@%*5 mar( & 1 m5

6l #alor del margen sigue siendo el mismo en unidades relati#as ' 1 m) pero su #alor realha #ariado por%ue el tama/o de letra de los p!rrafos ha #ariado. 6n este caso$ el margentendr! una anchura de 3@%*$ ya %ue 1 m siempre e%ui#ale al tama/o de letra del

elemento.Si se %uiere reducir la anchura del margen a 1 %* pero manteniendo el tama/o de letra de



los p!rrafos en 3@%*$ se de e utili+ar la siguiente regla CSS,% A ;# t- = & 3@%*5 mar( & 0.7 m 5

6l #alor 0.7 m se interpreta como "la mitad del tama(o de letra del elemento" $ ya %ue sede e multiplicar por 0.7 su tama/o de letra ' 3@%* * 0.7 1 %* ). 5e la misma forma$ sise %uiere mostrar un margen de 6%* de anchura$ se de ería utili+ar el #alor 0.@7 m$ ya %ue3@%* * 0.@7 6%* .La gran #entaja de las unidades relati#as es %ue siempre mantienen las proporciones deldise/o de la p!gina. 6sta lecer el margen de un elemento con el #alor 1 m e%ui#ale aindicar %ue "el margen del elemento debe ser del mismo tama(o !ue su letra y debecambiar proporcionalmente" .6n efecto$ si el tama/o de letra de un elemento aumenta hasta un #alor enorme$ sumargen de 1 m tam i(n ser! enorme. Si su tama/o de letra se reduce hasta un #alor

diminuto$ el margen de 1 m tam i(n ser! diminuto. 6l uso de unidades relati#as permitemantener las proporciones del dise/o cuando se modifica el tama/o de letra de la p!gina.6l funcionamiento de la unidad * es id(ntico a m$ sal#o %ue en este caso$ la referenciaes la altura de la letra * minDscula$ por lo %ue su #alor es apro-imadamente la mitad %ueel de la unidad m.:or Dltimo$ las medidas indicadas en pí-el tam i(n se consideran relati#as$ ya %ue elaspecto de los elementos depender! de la resolución del dispositi#o en el %ue se #isuali+ala p!gina HTML. Si un elemento tiene una anchura de R00%*$ ocupar! la mitad de una

pantalla con una resolución de 600* 00 $ pero ocupar! menos de la tercera parte en unapantalla con resolución de 1RR0* 00.Las unidades de medida se pueden me+clar en los diferentes elementos de una mismap!gina$ como en el siguiente ejemplo,:#+ A ;# t- = & 10%* 5 h1 A ;# t- = & @.7 m5

6n primer lugar$ se esta lece un tama/o de letra ase de 10 pí-el para toda la p!gina. *continuación$ se asigna un tama/o de @.7 m al elemento <h1, $ por lo %ue su tama/o deletra real ser! de @.7 * 10%* @7%* .Como se #io en los capítulos anteriores$ el #alor de la mayoría de propiedades CSS sehereda de padres a hijos. *sí por ejemplo$ si se esta lece el tama/o de letra al elemento<:#+ , $ todos los elementos de la p!gina tendr!n el mismo tama/o de letra$ sal#o %ueindi%uen otro #alor.Sin em argo$ el #alor de las medidas relati#as no se hereda directamente$ sino %ue sehereda su #alor real una #e+ calculado. 6l siguiente ejemplo muestra estecomportamiento,

:#+ A ;# t- = & 1@%*5 t *t- + t & 3 m5



h1 A ;# t- = & 17%*

La propiedad t *t- + t $ como se #er! en los pró-imos capítulos$ se utili+a para ta ular la primera línea de un te-to. 6l elemento <:#+ , define un #alor para esta propiedad$ peroel elemento <h1, no lo hace$ por lo %ue heredar! el #alor de su elemento padre. Sinem argo$ el #alor heredado no es 3 m$ sino 3 %*.Si se heredara el #alor 3 m$ al multiplicarlo por el #alor de ;# t- = del elemento<h1, '%ue #ale 17%*) el resultado sería 3 m * 17%* R7%* . Io o stante$ como se hacomentado$ los #alores %ue se heredan no son los relati#os$ sino los #alores yacalculados.:or lo tanto$ en primer lugar se calcula el #alor real de 3 m para el elemento <:#+ , , 3 m *1@%* 3 %*. na #e+ calculado el #alor real$ este es el #alor %ue se hereda para el resto

de elementos.

,.1.,. 8orcenta4es

6l porcentaje tam i(n es una unidad de medida relati#a$ aun%ue por su importancia CSSla trata de forma separada a m$ * y %*. n porcentaje est! formado por un #alornum(rico seguido del sím olo y siempre est! referenciado a otra medida. Cada una delas propiedades de CSS %ue permiten indicar como #alor un porcentaje$ define el #alor al%ue hace referencia ese porcentaje.

Los porcentajes se pueden utili+ar por ejemplo para esta lecer el #alor del tama/o deletra de los elementos,:#+ A ;# t- = & 1 m5

h1 A ;# t- = & @00 5

h@ A ;# t- = & 170 5

Los tama/os esta lecidos para los elementos <h1, y <h@, mediante las reglas anteriores$son e%ui#alentes a @ m y 1.7 m respecti#amente$ por lo %ue es m!s ha itual definirlosmediante m.Los porcentajes tam i(n se utili+an para esta lecer la anchura de los elementos,+ 2S4# t +# A ' +th & 00%*5

+ 2.%r 4 %al A ' +th & 60 5

<+ 2 + "4# t +#" , <+ 2 4la "%r 4 %al" , ... </+ 2 ,

</+ 2 ,



6n el ejemplo anterior$ la referencia del #alor 60 es la anchura de su elemento padre. :or tanto$ el elemento <+ 2, cuyo atri uto 4la #ale %r 4 %al tiene una anchura de 60 *

00%* R60%* .

,.1. . 9eco endaciones

6n general$ se recomienda el uso de unidades relati#as siempre %ue sea posi le$ ya %uemejora la accesi ilidad de la p!gina y permite %ue los documentos se adapten f!cilmentea cual%uier medio y dispositi#o.6l documento Fecomendaciones so re t(cnicas CSS para la mejora de la accesi ilidadde los contenidos HTML $ ela orado por el organismo 89C$ recomienda el uso de launidad m para indicar el tama/o del te-to y para todas las medidas %ue sean posi les.Iormalmente se utili+an pí-el y porcentajes para definir el layout del documento' !sicamente$ la anchura de las columnas y de los elementos de las p!ginas) y m yporcentajes para el tama/o de letra de los te-tos.

9.0. ColoresLos colores en CSS se pueden indicar de cinco formas diferentes, pala ras cla#e$ coloresdel sistema$ F = he-adecimal$ F = num(rico y F = porcentual. *un%ue el m(todo m!sha itual es el del F = he-adecimal$ a continuación se muestran todas las alternati#as%ue ofrece CSS.

,.).1. 8ala!ras clave

CSS define 13 pala ras cla#e para referirse a los colores !sicos. Las pala ras secorresponden con el nom re en ingl(s de cada color,a a$:la4 $:l $; 4h a $(ra $(r $l m $mar## $ a2 $#l 2 $#ra ( $% r%l $r + $ l2 r $t al $'h t $ ll#'

Figura ,.1 Colores definidos mediante las pala ras cla#e de CSS

La imagen anterior ha sido e-traída de la sección so re colores de la especificación oficialde CSS .

http://www.w3.org/TR/WCAG10-CSS-TECHS/


http://www.w3.org/TR/CSS21/syndata.html#value-def-color








*un%ue es una forma muy sencilla de referirse a los colores !sicos$ este m(todopr!cticamente no se utili+a en las hojas de estilos de los sitios "e reales$ ya %ue se tratade una gama de colores muy limitada.

*dem!s de la lista !sica$ los na#egadores modernos soportan muchos otros nom res decolores. La lista completa se puede #er en en."i<ipedia.org&"i<i&8e safe .

,.).). 9-B deci al

6n el campo del dise/o gr!fico$ se han definido #arios modelos para hacer referencia alos colores. Los dos modelos m!s conocidos son F = y CM N. Simplificando sue-plicación$ el modelo F = consiste en definir un color indicando la cantidad de colorrojo$ #erde y a+ul %ue se de e me%clar para o tener ese color. T(cnicamente$ el modeloF = es un modelo de tipo Aaditi#oA$ ya %ue los colores se o tienen sumando suscomponentes.:or lo tanto$ en el modelo F = un color se define indicando sus tres componentes F'rojo)$ '#erde) y = 'a+ul). Cada una de las componentes puede tomar un #alor entrecero y un #alor m!-imo. 5e esta forma$ el color rojo puro en F = se crea mediante elm!-imo #alor de la componente F y un #alor de 0 para las componentes y =.Si todas las componentes #alen 0$ el color creado es el negro y si todas las componentestoman su #alor m!-imo$ el color o tenido es el lanco. 6n CSS$ las componentes de loscolores definidos mediante F = decimal pueden tomar #alores entre 0 y @77. 6l siguienteejemplo esta lece el color del te-to de un p!rrafo,

% A 4#l#r & r(: F 1 6 1 G5

La sinta-is %ue se utili+a para indicar los colores es r(:FG y entre par(ntesis se indican lastres componentes F =$ en ese mismo orden y separadas por comas. 6l color del ejemploanterior se o tendría me+clando las componentes FO 1$ O 6$ =O1 $ %ue secorresponde con un color a+ul claro.Si se indica un #alor menor %ue 0 para una componente$ autom!ticamente se transformasu #alor en 0. 7gualmente$ si se indica un #alor mayor %ue @77$ se transformaautom!ticamente su #alor a @77.

,.).,. 9-B porcentual

Las componentes F = de un color tam i(n se pueden indicar mediante un porcentaje. 6lfuncionamiento y la sinta-is de este m(todo es el mismo %ue el del F = decimal. La Dnicadiferencia es %ue en este caso el #alor de las componentes F = puede tomar #aloresentre 0 y 100 . :or tanto$ para transformar un #alor F = decimal en un #alor F =porcentual$ es preciso reali+ar una regla de tres considerando %ue 0 es igual a 0 y@77 esigual a 100 .6l mismo color del ejemplo anterior se puede representar de forma porcentual,% A 4#l#r & r(: F@ 36 G5

http://en.wikipedia.org/wiki/Websafe

http://en.wikipedia.org/wiki/Websafe



*l igual %ue sucede con el F = decimal$ si se indica un #alor inferior a 0 $ se transformaautom!ticamente en 0 y si se indica un #alor superior a 100 $ se trunca su #alor a 100 .

,.). . 9-B he+adeci al

*un%ue es el m(todo m!s complicado para indicar los colores$ se trata del m(todo m!sutili+ado con mucha diferencia. 5e hecho$ pr!cticamente todos los sitios "e realesutili+an e-clusi#amente este m(todo.:ara entender el modelo F = he-adecimal$ en primer lugar es preciso introducir unconcepto matem!tico llamado sistema num rico he)adecimal . Cuando reali+amosoperaciones matem!ticas$ siempre utili+amos 14 sím olos para representar los nDmeros'del 0 al ). :or este moti#o$ se dice %ue utili+amos un sistema num(rico decimal.Io o stante$ el sistema decimal es solamente uno de los muchos sistemas num(ricos %uese han definido. 6ntre los sistemas num(ricos alternati#os m!s utili+ados se encuentra elsistema he-adecimal$ %ue utili+a 1@ sím olos para representar sus nDmeros.Como sólo conocemos 14 sím olos num(ricos$ el sistema he-adecimal utili+a tam i(nseis letras 'de la a la Z) para representar los nDmeros. 5e esta forma$ en el sistemahe-adecimal$ despu(s del no #a el 10$ sino la . La letra B e%ui#ale al nDmero 11$ la C al1@$ la D al 13$ la E al 1R y la Z al nDmero 17.5efinir un color en CSS con el m(todo F = he-adecimal re%uiere reali+ar los siguientespasos, G 5eterminar las componentes F = decimales del color original$ por ejemplo, F O

1$ O 6$ = O 1 G Transformar el #alor decimal de cada componente al sistema

num(rico he-adecimal. Se trata de una operación e-clusi#amente matem!tica$ por lo %uepuedes utili+ar una calculadora. 6n el ejemplo anterior$ el #alor he-adecimal de cadacomponente es, F O R $ O @$ = O B0 G :ara o tener el color completo en formato F =he-adecimal$ se concatenan los #alores he-adecimales de las componentes F = en eseorden y se les a/ade el prefijo S. 5e esta forma$ el color del ejemplo anterior es SR @B0 en formato F = he-adecimal.Siguiendo el mismo ejemplo de las secciones anteriores$ el color del p!rrafo se indica dela siguiente forma utili+ando el formato F = he-adecimal,% A 4#l#r & SR @B05

Fecuerda %ue aun%ue es el m(todo m!s complicado para definir un color$ se trata delm(todo %ue utili+an la inmensa mayoría de sitios "e $ por lo %ue es imprescindi ledominarlo. *fortunadamente$ todos los programas de dise/o gr!fico con#ierten de formaautom!tica los #alores F = decimales a sus #alores F = he-adecimales$ por lo %ue notienes %ue hacer ninguna operación matem!tica,



Figura ,.) Herramienta de color de :hotoshop para definir los colores segDn los modelos

F =$ CM N$ La $ HS= y F = he-adecimal

6l formato F = he-adecimal es la forma m!s compacta de indicar un color$ ya %ueincluso es posi le comprimir sus #alores cuando todas sus componentes son iguales dosa dos,S S

SZZZ SZZZZZZS 0Z S 00ZZ

S3 S33

6n el siguiente ejemplo se esta lece el color de fondo de la p!gina a lanco$ el color delte-to a negro y el color de la letra de los titulares se define de color rojo,:#+ A :a4 (r# +-4#l#r & SZZZ5 4#l#r & S000 5 h1 h@ h3 hR h7 h A 4#l#r & SC005

Las letras %ue forman parte del color en formato F = he-adecimal se pueden escri ir enmayDsculas o minDsculas indistintamente. Io o stante$ se recomienda escri irlas siempreen mayDsculas o siempre en minDsculas para %ue la hoja de estilos resultante sea m!slimpia y homog(nea.

,.).3. Colores del siste a

Los colores del sistema son similares a los colores indicados mediante su nom re$ peroen este caso hacen referencia al color %ue muestran algunos elementos del sistemaoperati#o del usuario.6-isten #arios colores definidos$ como por ejemplo 4t 2 B#r+ r $ %ue hace referencia al



color del orde de las #entanas acti#as. Consulta la lista completa de colores del sistema . *un%ue es posi le definir los colores en CSS utili+ando estos nom res$ se trata de unm(todo %ue nunca se utili+a$ por lo %ue se puede considerar pr!cticamente como unarare+a de CSS.

,.).(. Colores :e! safeComo cada componente F = de los colores puede tomar un #alor entre 0 y @77$ elnDmero total de colores %ue se pueden representar con este formato es de @7 * @7 *@7 1 . .@1 colores. Sin em argo$ en la d(cada de los 24 los monitores de losusuarios no eran capaces de mostrar m!s de @7 colores diferentes.

* partir de todos los colores disponi les$ se eligieron @1 colores %ue formaron la paletade colores "*eb safe" . 6sta paleta de colores podía ser utili+ada por los dise/adores conla seguridad de %ue se #erían correctamente en cual%uier na#egador de cual%uier sistemaoperati#o de cual%uier usuario.Hoy en día$ su importancia ha descendido nota lemente$ ya %ue pr!cticamente todos losusuarios utili+an dispositi#os con una profundidad de color de 1@ y 90 its. Io o stante$ elauge en el uso de los dispositi#os mó#iles hace %ue siga siendo un tema a considerar$ ya%ue las pantallas de muchos mó#iles sólo pueden representar un nDmero reducido decolores.Consulta la lista completa de colores "e safe y sus #alores he-adecimales .

Capítulo >. &odelo de ca4as6l modelo de cajas o "bo) model" es seguramente la característica m!s importante dellenguaje de hojas de estilos CSS$ ya %ue condiciona el dise/o de todas las p!ginas "e .6l modelo de cajas es el comportamiento de CSS %ue hace %ue todos los elementos delas p!ginas se representen mediante cajas rectangulares.Las cajas de una p!gina se crean autom!ticamente. Cada #e+ %ue se inserta una eti%uetaHTML$ se crea una nue#a caja rectangular %ue encierra los contenidos de ese elemento.

La siguiente imagen muestra las tres cajas rectangulares %ue crean las tres eti%uetasHTML %ue incluye la p!gina,

Figura .1 Las cajas se crean autom!ticamente al definir cada elemento HTML

Las cajas de las p!ginas no son #isi les a simple #ista por%ue inicialmente no muestranningDn color de fondo ni ningDn orde. La siguiente imagen muestra las cajas %ue formanla p!gina "e de http,&&""".alistapart.com& despu(s de for+ar a %ue todas las cajas

http://www.w3.org/TR/CSS21/ui.html#system-colors

http://en.wikipedia.org/wiki/Web_colors#Web-safe_colors

http://www.w3.org/TR/CSS21/ui.html#system-colors

http://en.wikipedia.org/wiki/Web_colors#Web-safe_colors



muestren su orde,

Figura .) Cajas %ue forman la p!gina alistapart.com

Los na#egadores crean y colocan las cajas de forma autom!tica$ pero CSS permitemodificar todas sus características. Cada una de las cajas est! formada por seis partes$tal y como muestra la siguiente imagen,



Figura ., Fepresentación tridimensional del o- model de CSS

'6s%uema utili+ado con permiso de http,&&""".hic<sdesign.co.u<& o-model&)

Las partes %ue componen cada caja y su orden de #isuali+ación desde el punto de #istadel usuario son las siguientes,• Contenido ' content ), se trata del contenido HTML del elemento 'las pala ras de un

p!rrafo$ una imagen$ el te-to de una lista de elementos$ etc.)• Felleno ' padding ), espacio li re opcional e-istente entre el contenido y el orde.

• =orde ' border ), línea %ue encierra completamente el contenido y su relleno.• 7magen de fondo ' bac#ground image ), imagen %ue se muestra por detr!s del contenido y

el espacio de relleno.• Color de fondo ' bac#ground color ), color %ue se muestra por detr!s del contenido y el

espacio de relleno.• Margen ' margin ), separación opcional e-istente entre la caja y el resto de cajas

adyacentes.

6l relleno y el margen son transparentes$ por lo %ue en el espacio ocupado por el relleno

se muestra el color o imagen de fondo 'si est!n definidos) y en el espacio ocupado por elmargen se muestra el color o imagen de fondo de su elemento padre 'si est!n definidos).Si ningDn elemento padre tiene definido un color o imagen de fondo$ se muestra el color o



imagen de fondo de la propia p!gina 'si est!n definidos).Si una caja define tanto un color como una imagen de fondo$ la imagen tiene m!sprioridad y es la %ue se #isuali+a. Io o stante$ si la imagen de fondo no cu re totalmentela caja del elemento o si la imagen tiene +onas transparentes$ tam i(n se #isuali+a elcolor de fondo. Com inando imagenes transparentes y colores de fondo se pueden lograrefectos gr!ficos muy interesantes.

>.1. 6nchura 5 altura

.,.1. 6nchura

La propiedad CSS %ue controla la anchura de la caja de los elementos sedenomina ' +th .Propiedad $idt%Valores unidad de medida 6 porcenta2e 6 auto 6 inherit

Se aplica aTodos los elementos, salvo los elementos en l7nea .ue no sean im genes, las 'ilas de

tabla y los grupos de 'ilas de tablaValor inicial autoDescripción stablece la anchura de un elemento

La propiedad ' +th no admite #alores negati#os y los #alores en porcentaje se calculan apartir de la anchura de su elemento padre. 6l #alor h r t indica %ue la anchura del

elemento se hereda de su elemento padre. 6l #alor a t# $ %ue es el %ue se utili+a si no seesta lece de forma e-plícita un #alor a esta propiedad$ indica %ue el na#egador de ecalcular autom!ticamente la anchura del elemento$ teniendo en cuenta sus contenidos yel sitio disponi le en la p!gina.6l siguiente ejemplo esta lece el #alor de la anchura del elemento <+ 2, lateral,Slat ral A ' +th & @00%*5

<+ 2 + "lat ral" , ...

</+ 2 ,

CSS define otras dos propiedades relacionadas con la anchura de los elementos, m -' +th y ma*-' +th $ %ue se #er!n m!s adelante.

.1.). 6ltura

La propiedad CSS %ue controla la altura de los elementos se denomina h (ht .

Propiedad

%eig%tValores unidad de medida 6 porcenta2e 6 auto 6 inheritSe aplica a Todos los elementos, salvo los elementos en l7nea .ue no sean im genes, las columnas

http://librosweb.es/referencia/css/unidades_de_medida.html

http://librosweb.es/referencia/css/porcentajes.html

http://librosweb.es/referencia/css/el_valor_inherit.html














Propiedad %eig%tde tabla y los grupos de columnas de tabla

Valor inicial autoDescripción stablece la altura de un elemento

*l igual %ue sucede con ' +th $ la propiedad h (ht no admite #alores negati#os. Si seindica un porcentaje$ se toma como referencia la altura del elemento padre. Si el elementopadre no tiene una altura definida e-plícitamente$ se asigna el #alor a t# a la altura.6l #alor h r t indica %ue la altura del elemento se hereda de su elemento padre. 6l#alor a t# $ %ue es el %ue se utili+a si no se esta lece de forma e-plícita un #alor a estapropiedad$ indica %ue el na#egador de e calcular autom!ticamente la altura del elemento$teniendo en cuenta sus contenidos y el sitio disponi le en la p!gina.6l siguiente ejemplo esta lece el #alor de la altura del elemento <+ 2, de ca ecera,S4a: 4 ra A h (ht & 0%*5

<+ 2 + "4a: 4 ra" , ...

</+ 2 ,

CSS define otras dos propiedades relacionadas con la altura de los elementos, m -h (ht y ma*-h (ht $ %ue se #er!n m!s adelante.

>.0. &argen 5 relleno.).1. &argen

CSS define cuatro propiedades para controlar cada uno de los m!rgenes hori+ontales y#erticales de un elemento.Propiedades &argin'top( &argin'rig%t( &argin'!otto&( &argin'le)tValores unidad de medida 6 porcenta2e 6 auto 6inherit

Se aplica a Todos los elementos, salvo margin-top y margin-bottom .ue sólo se aplican a loselementos de blo.ue y a las im genes

Valor inicial $Descripción stablece cada uno de los m rgenes hori1ontales y verticales de un elemento

Cada una de las propiedades esta lece la separación entre el orde lateral de la caja y elresto de cajas adyacentes,











Figura . Las cuatro propiedades relacionadas con los m!rgenes

Las unidades m!s utili+adas para indicar los m!rgenes de un elemento son los pí-eles'cuando se re%uiere una precisión total)$ los m 'para hacer dise/os %ue mantengan lasproporciones) y los porcentajes 'para hacer dise/os lí%uidos o fluidos).6l siguiente ejemplo a/ade un margen i+%uierdo al segundo p!rrafo,.+ ta4a+# A mar( -l ;t& @ m5

<%,L#r m % m +#l#r t am t 4# 4t t r a+ % 4 ( l t. $am t l t.

? 2am %la4 rat l#r m. Ma 4 a a% . I t ( r t ma a. Cra + am % m

la#r t # t 4 + t a 2 2 rra + t#rt#r.< / %,

<% 4la "+ ta4a+#" ,? t : l m l 4t + am l 4t 2 l 2 at ltr 44 r 2 l t ll . Et am %la4 rat rat # m. $ lla m#l t #+ # #

l t 4 + t ;a 4 : .< / %,

<%, l am m#+ a% l : r#. Ut t m%#r #r4 at lla. $am r#( ta ma a 2 h 4 la # mm . M#r: %# r :h ltr 4 4# 4t t r

t 4 + tr t r% la#r t l t t t 4 + t r m t 4.< / %,

* continuación se muestra el aspecto del ejemplo anterior en cual%uier na#egador,



Figura .3 6jemplo de propiedad marginGleft

*lgunos dise/adores "e utili+an la eti%ueta <:l#4 #t , para ta ular los contenidos delos p!rrafos. Se trata de un error gra#e por%ue HTML no de e utili+arse para controlar elaspecto de los elementos. CSS es el Dnico responsa le de esta lecer el estilo de loselementos$ por lo %ue en #e+ de utili+ar la eti%ueta <:l#4 #t , de HTML$ de eríautili+arse la propiedad mar( -l ;t de CSS.

Los m!rgenes #erticales ' mar( -t#% y mar( -:#tt#m ) sólo se pueden aplicar a loselementos de lo%ue y las im!genes$ mientras %ue los m!rgenes laterales ' mar( -l ;t ymar( -r (ht ) se pueden aplicar a cual%uier elemento$ tal y como muestra la siguienteimagen,

Figura .( Los m!rgenes #erticales sólo se aplican a los elementos de lo%ue e im!genes

La imagen anterior muestra el resultado de aplicar los mismos m!rgenes a #arios enlaces

'elementos en línea) y #arios p!rrafos 'elementos de lo%ue). 6n los elementos en línealos m!rgenes #erticales no tienen ningDn efecto$ por lo %ue los enlaces no muestranninguna separación #ertical$ al contrario de lo %ue sucede con los p!rrafos. Sin em argo$



los m!rgenes laterales funcionan so re cual%uier tipo de elemento$ por lo %ue los enlacesse muestran separados entre sí y los p!rrafos aumentan su separación con los ordeslaterales de su elemento contenedor.

*dem!s de las cuatro propiedades %ue controlan cada uno de los m!rgenes del elemento$CSS define una propiedad especial %ue permite esta lecer los cuatro m!rgenes de formasimult!nea. 6stas propiedades especiales se denominan "propiedades shorthand" y CSSdefine #arias propiedades de este tipo$ como se #er! m!s adelante.La propiedad %ue permite definir de forma simultanea los cuatro m!rgenes se denominamar( .Propiedad &arginValores 3 unidad de medida 6 porcenta2e 6 auto 4 %, 9: 6inherit

Se aplica aTodos los elementos salvo algunos casos especiales de elementos mostrados como

tablasValor inicial -Descripción stablece de 'orma directa todos los m rgenes de un elemento

La notación A1 R de la definición anterior significa %ue la propiedad mar( admite entreuno y cuatro #alores$ con el siguiente significado,• Si solo se indica un #alor$ todos los m!rgenes tienen ese #alor.

• Si se indican dos #alores$ el primero se asigna al margen superior e inferior y el segundo

se asigna a los m!rgenes i+%uierdo y derecho.• Si se indican tres #alores$ el primero se asigna al margen superior$ el tercero se asigna al

margen inferior y el segundo #alor se asigna los m!rgenes i+%uierdo y derecho.• Si se indican los cuatro #alores$ el orden de asignación es, margen superior$ margen

derecho$ margen inferior y margen i+%uierdo.

6l ejemplo anterior de m!rgenes se puede reescri ir utili+ando la propiedad mar( ,Código CSS original,+ 2 m( A mar( -t#% & .7 m 5

mar( -:#tt#m & .7 m 5 mar( -l ;t & 1 m5 mar( -r (ht & .7 m 5

*lternati#a directa,+ 2 m( A mar( & .7 m .7 m .7m 1 m 5










Btra alternati#a,+ 2 m( A mar( & .7 m 5 mar( -l ;t & 1 m5

6l comportamiento de los m!rgenes #erticales es m!s complejo de lo %ue se puedeimaginar. Cuando se juntan dos o m!s m!rgenes #erticales$ se fusionan de formaautom!tica y la altura del nue#o margen ser! igual a la altura del margen m!s alto de los%ue se han fusionado.

Figura .; Eusión autom!tica de los m!rgenes #erticales

5e la misma forma$ si un elemento est! contenido dentro de otro elemento$ sus m!rgenes#erticales se fusionan y resultan en un nue#o margen de la misma altura %ue el mayormargen de los %ue se han fusionado,

Figura . Eusión de los m!rgenes de los elementos interiores

*un%ue en principio puede parecer un comportamiento e-tra/o$ la ra+ón por la %ue sepropuso este mecanismo de fusión autom!tica de m!rgenes #erticales es el de daruniformidad a las p!ginas "e ha ituales. 6n una p!gina con #arios p!rrafos$ si no sediera este comportamiento y se esta leciera un determinado margen a todos los p!rrafos$

el primer p!rrafo no mostraría un aspecto homog(neo respecto de los dem!s.



Figura .< Moti#o por el %ue se fusionan autom!ticamente los m!rgenes #erticales

6n el caso de un elemento %ue se encuentra en el interior de otro y sus m!rgenes sefusionan de forma autom!tica$ se puede e#itar este comportamiento a/adiendo unpe%ue/o relleno ' %a++ (& 1%*) o un orde ' :#r+ r& 1%* #l + tra %ar t ) alelemento contenedor.

.).). 9elleno

CSS define cuatro propiedades para controlar cada uno de los espacios de rellenohori+ontales y #erticales de un elemento.Propiedades padding'top( padding'rig%t( padding'!otto&( padding'le)tValores unidad de medida 6 porcenta2e 6inherit

Se aplica aTodos los elementos e!cepto algunos elementos de tablas como grupos de cabeceras y grupos

de pies de tablaValor inicial $Descripción stablece cada uno de los rellenos hori1ontales y verticales de un elemento

Cada una de estas propiedades esta lece la separación entre el contenido y los ordeslaterales de la caja del elemento,

Figura .1= Las cuatro propiedades relacionadas con los rellenos

Como sucede con los m!rgenes$ CSS tam i(n define una propiedad de tipo "shorthand"

llamada %a++ ( para esta lecer los cuatro rellenos de un elemento de forma simult!nea.











Propiedad paddingValores 3 unidad de medida 6 porcenta2e 4 %, 9: 6inherit

Se aplica aTodos los elementos e!cepto algunos elementos de tablas como grupos de cabeceras y

grupos de pies de tablaValor inicial -Descripción stablece de 'orma directa todos los rellenos de los elementos

La notación A1 R de la definición anterior significa %ue la propiedad %a++ ( admiteentre uno y cuatro #alores$ con el mismo significado %ue el de la propiedad mar( .6jemplo,:#+ A%a++ (& @ m /J T#+# l# r ll # 2al @ m J/

:#+ A%a++ (& 1 m @ m /J 9 % r #r ; r #r 1 m I= r+# + r 4h#

@ m J/:#+ A%a++ (& 1 m @ m 3 m /J 9 % r #r 1 m + r 4h# @ m ; r #r 3 m

= r+# @ m J/:#+ A%a++ (& 1 m @ m 3 m R m /J 9 % r #r 1 m + r 4h# @ m ; r #r

3 m = r+# R m J/

E4ercicio ,

er enunciado

>.9. =ordes

CSS permite modificar el aspecto de cada uno de los cuatro ordes de la caja de unelemento. :ara cada orde se puede esta lecer su anchura o grosor$ su color y su estilo$por lo %ue en total CSS define 04 propiedades relacionadas con los ordes.

.,.1. 6nchura

La anchura de los ordes se controla con las cuatro propiedades siguientes,

Propiedades!order'top'$idt%( !order'rig%t'$idt%(!order'!otto&'$idt%( !order'le)t'$idt%

Valores 3 unidad de medida 6 thin 6 medium 6 thic( 4 6 inheritSe aplica a Todos los elementosValor inicial ;ediumDescripción stablece la anchura de cada uno de los cuatro bordes de los elementos

La anchura de los ordes se indica mediante una medida 'en cual%uier unidad de medidaa soluta o relati#a) o mediante las pala ras cla#e th ' orde delgado)$ m + m' ordenormal) y th 4 ' orde ancho).La unidad de medida m!s ha itual para esta lecer el grosor de los ordes es el pí-el$ ya

%ue es la %ue permite un control m!s preciso so re el grosor. Las pala ras cla#e apenasse utili+an$ ya %ue el est!ndar CSS no indica e-plícitamente el grosor al %ue e%ui#ale


















cada pala ra cla#e$ por lo %ue pueden producirse diferencias #isuales entre na#egadores. *sí por ejemplo$ el grosor m + m e%ui#ale a R%* en algunas #ersiones de 7nternet6-plorer y a 3%* en el resto de na#egadores.6l siguiente ejemplo muestra un elemento con cuatro anchuras diferentes de orde,

Figura .11 6jemplo de propiedad orderG"idth

Las reglas CSS utili+adas se muestran a continuación,+ 2 A :#r+ r-t#%-' +th & 10%* 5 :#r+ r-r (ht-' +th & 1 m5 :#r+ r-:#tt#m-' +th & th 4 5

:#r+ r-l ;t-' +th & th 5

Si se %uiere esta lecer de forma simult!nea la anchura de todos los ordes de una caja$es necesario utili+ar una propiedad "shorthand" llamada :#r+ r-' +th ,Propiedad !order'$idt%Valores 3 unidad de medida 6 thin 6 medium 6 thic( 4 %, 9: 6 inheritSe aplica a Todos los elementosValor inicial ;ediumDescripción stablece la anchura de todos los bordes del elemento

La propiedad :#r+ r-' +th permite indicar entre uno y cuatro #alores. 6l significado decada caso es el ha itual de las propiedades "shorthand" ,% A :#r+ r-' +th & th /J th th th th J/% A :#r+ r-' +th & th th 4 /J th th 4 th th 4 J/

% A :#r+ r-' +th & th th 4 m + m /J th th 4 m + m th 4 J/

% A :#r+ r-' +th & th th 4 m + m th /J th th 4 m + m th J/

Si se indica un solo #alor$ se aplica a los cuatro ordes. Si se indican dos #alores$ elprimero se aplica al orde superior e inferior y el segundo #alor se aplica al orde








i+%uierdo y derecho.Si se indican tres #alores$ el primero se aplica al orde superior$ el segundo se aplica al

orde i+%uierdo y derecho y el tercer #alor se aplica al orde inferior. Si se indican loscuatro #alores$ el orden de aplicación es superior$ derecho$ inferior e i+%uierdo.

.,.). Color 6l color de los ordes se controla con las cuatro propiedades siguientes,

Propiedades!order'top'color( !order'rig%t'color(!order'!otto&'color( !order'le)t'color

Valores color 6 transparent 6 inheritSe aplica a Todos los elementosValor inicial -Descripción stablece el color de cada uno de los cuatro bordes de los elementos

6l ejemplo anterior se puede modificar para mostrar cada uno de los ordes de un colordiferente,

Figura .1) 6jemplo de propiedad orderGcolor

Las reglas CSS necesarias para mostrar los colores anteriores son las siguientes,+ 2 A

:#r+ r-t#%-4#l#r & SCC00005 :#r+ r-r (ht-4#l#r & :l 5 :#r+ r-:#tt#m-4#l#r & S00ZZ005 :#r+ r-l ;t-4#l#r & SCCC5

CSS incluye una propiedad "shorthand" llamada :#r+ r-4#l#r para esta lecer de formasimult!nea el color de todos los ordes de una caja,

Propiedad !order'colorValores 3 color 6 transparent 4 %, 9: 6 inheritSe aplica a Todos los elementos

http://librosweb.es/referencia/css/colores.html











Propiedad !order'colorValor inicial -Descripción stablece el color de todos los bordes del elemento

6n este caso$ al igual %ue sucede con la propiedad :#r+ r-' +th $ es posi le indicar de

uno a cuatro #alores y las reglas de aplicación son id(nticas a las de la propiedad :#r+ r-' +th .

.,.,. Estilo

:or Dltimo$ CSS permite esta lecer el estilo de cada uno de los ordes mediante lassiguientes propiedades,

Propiedades!order'top'st*le( !order'rig%t'st*le(!order'!otto&'st*le( !order'le)t'st*le

Valores none 6 hidden 6 dotted 6 dashed 6 solid 6 double 6 groove 6 ridge 6 inset 6 outset 6 inheritSe aplica a Todos los elementosValor inicial noneDescripción stablece el estilo de cada uno de los cuatro bordes de los elementos

6l estilo de los ordes sólo se puede indicar mediante alguna de las pala ras reser#adasdefinidas por CSS. Como el #alor por defecto de esta propiedad es # $ los elementos nomuestran ningDn orde #isi le a menos %ue se esta le+ca e-plícitamente un estilo de

orde.Siguiendo el ejemplo anterior$ se puede modificar el estilo de cada uno de los ordes,

Figura .1, 6jemplo de propiedad orderGstyle

Las reglas CSS necesarias para mostrar los estilos anteriores son las siguientes,+ 2 A :#r+ r-t#%- t l & +a h +5 :#r+ r-r (ht- t l & +# :l 5

:#r+ r-:#tt#m- t l & +#tt + 5 :#r+ r-l ;t- t l & #l + 5





6l aspecto con el %ue los na#egadores muestran los diferentes tipos de orde se muestraa continuación,

Figura .1 Tipos de ordes definidos por CSS

Los ordes m!s utili+ados son #l + y +a h +$ seguidos de +# :l y +#tt + . Los

estilos # y h ++ son id(nticos #isualmente$ pero se diferencian en la forma %ue losna#egadores resuel#en los conflictos entre los ordes de las celdas adyacentes en lasta las.:ara esta lecer de forma simult!nea los estilos de todos los ordes de una caja$ esnecesario utili+ar la propiedad "shorthand" llamada :#r+ r- t l ,Propiedad !order'st*leValores

3none 6 hidden 6 dotted 6 dashed 6 solid 6 double 6 groove 6 ridge 6 inset 6 outset 4 %, 9: 6

inherit

Se aplica a Todos los elementosValor inicial -Descripción stablece el estilo de todos los bordes del elemento





Como es ha itual$ la propiedad permite indicar de uno a cuatro #alores diferentes y lasreglas de aplicación son las ha ituales de las propiedades "shorthand" .

.,. . 8ropiedades shorthand

Como sucede con los m!rgenes y los rellenos$ CSS define una serie de propiedades detipo "shorthand" %ue permiten esta lecer todos los atri utos de los ordes de formasimult!nea. CSS incluye una propiedad "shorthand" para cada uno de los cuatro ordes yuna propiedad "shorthand" glo al.Propiedades !order'top( !order'rig%t( !order'!otto&(!order'le)tValores 3 unidad de medida <borde 66color <borde 66 estilo<borde 4 6 inheritSe aplica a Todos los elementosValor inicial -Descripción stablece el estilo completo de cada uno de los cuatro bordes de los elementos

6l significado de cada uno de los #alores especiales es el siguiente,• <m + +a :#r+ , , una medida CSS o alguna de las siguientes pala ras cla#e,

th $m + m$th 4 .• <4#l#r :#r+ , , un color de CSS o la pala ra cla#e tra %ar t

• < t l# :#r+ , , una de las siguientes pala ras cla#e, # $h ++ $+#tt + $+a h +$

#l + $+# :l $(r##2 $r +( $ t$# t t .

Las propiedades "shorthand" permiten esta lecer alguno o todos los atri utos de cadaorde. 6l siguiente ejemplo esta lece el color y el tipo del orde inferior$ pero no su

anchura,h1 A :#r+ r-:#tt#m & #l + r + 5

6n el ejemplo anterior$ la anchura del orde ser! la correspondiente al #alor por defecto' m + m). 6ste otro ejemplo muestra la forma ha itual utili+ada para esta lecer el estilo de

cada orde,+ 2 A :#r+ r-t#% & 1%* #l + S3 5 :#r+ r-:#tt#m & 3%* +# :l S3 5

:or ultimo$ CSS define una propiedad de tipo "shorthand" glo al para esta lecer el #alorde todos los atri utos de todos los ordes de forma directa,

Propiedad !orderValores 3 unidad de medida <borde 66 color <borde 66 estilo<borde 4 6inheritSe aplica a Todos los elementos





















Propiedad !orderValor inicial -Descripción stablece el estilo completo de todos los bordes de los elementos

Las siguientes reglas CSS son e%ui#alentes,+ 2 A :#r+ r-t#% & 1%* #l + r + 5 :#r+ r-r (ht & 1%* #l + r +5 :#r+ r-:#tt#m & 1%* #l + r +5 :#r+ r-l ;t & 1%* #l + r +5

+ 2 A :#r+ r & 1%* #l + r + 5

Como el #alor por defecto de la propiedad :#r+ r- t l es # $ si unapropiedad shorthand no esta lece e-plícitamente el estilo de un orde$ el elemento nomuestra ese orde,/J 9[l# ta:l 4 l 4#l#r %#r l# l t l#

" # " l :#r+ # m tra J/

+ 2 A :#r+ r & r + 5

/J 9 ta:l 4 l (r# #r l 4#l#r + l :#r+ % r# #

t l# %#r l# " # " l :#r+ # m tra J/+ 2 A :#r+ r-:#tt#m & 7%* :l 5

Cuando los cuatro ordes no son id(nticos pero sí muy parecidos$ se puede utili+ar lapropiedad :#r+ r para esta lecer de forma directa los atri utos comunes de todos los

ordes y posteriormente especificar para cada uno de los cuatro ordes sus propiedadesparticulares,h1 A :#r+ r & #l + S000 5 :#r+ r-t#%-' +th & %*5 :#r+ r-l ;t-' +th & 6%*5

E4ercicio

er enunciado

>.>. &argen> relleno> !ordes 5 odelo de ca4asLa anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus





propiedades ' +th y h (ht . 6l margen$ el relleno y los ordes esta lecidos a unelemento determinan la anchura y altura final del elemento. 6n el siguiente ejemplo semuestran los estilos CSS de un elemento,+ 2 A ' +th & 300%* 5 %a++ (-l ;t & 70%* 5 %a++ (-r (ht & 70%* 5 mar( -l ;t & 30%* 5 mar( -r (ht & 30%* 5 :#r+ r & 10%* #l + :la4 5

La anchura total con la %ue se muestra el elemento no son los 300 pí-el indicados en lapropiedad ' +th $ sino %ue tam i(n se a/aden todos sus m!rgenes$ rellenos y ordes,

Figura .13 La anchura total de un elemento tiene en cuenta los m!rgenes$ rellenos yordes

5e esta forma$ la anchura del elemento en pantalla sería igual a la suma de la anchuraoriginal$ los m!rgenes$ los ordes y los rellenos,30%* 10%* 70%* 300%* 70%* 10%* 30%* R60 %K* l

*sí$ la anchura&altura esta lecida con CSS siempre hace referencia a la anchura&alturadel contenido. La anchura&altura total del elemento de e tener en cuenta adem!s los

#alores del resto de partes %ue componen la caja del bo) model .:or otra parte$ la guerra de na#egadores %ue se produjo en los a/os 24 pro#ocó %ue cadafa ricante 'Microsoft y Ietscape) a/adiera sus propias e-tensiones y mejoras en susproductos. :osteriormente$ aparecieron los est!ndares pu licados por el 89C y losfa ricantes se encontraron con el pro lema de la incompati ilidad entre susimplementaciones anteriores de HTML y CSS y las implementaciones %ue re%uerían losest!ndares.La solución %ue adoptaron fue la de incluir en el na#egador dos modos diferentes de

funcionamiento, modo compati le con las p!ginas antiguas 'denominado "modo !uir#s" y%ue se podría traducir como "modo raro" ) y modo compati le con los nue#os est!ndares'denominado "modo estándar" ). 6l modo !uir#s es e%ui#alente a la forma en la %ue se



#isuali+a an las p!ginas en los na#egadores 7nternet 6-plorer > y Ietscape Ia#igator >.La diferencia m!s nota le entre los dos modos es el tratamiento del "bo) model" $ lo %uepuede afectar gra#emente al dise/o de las p!ginas HTML. Los na#egadores seleccionanautom!ticamente el modo en el %ue muestran las p!ginas en función del DOCTYPE definidopor el documento. 6n general$ los siguientes tipos de DOCTYPE acti#an el modo !uir#s enlos na#egadores,• Io utili+ar ningDn DOCTYPE

• DOCTYPE anterior a HTML >.4 ' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.@

Z al//E$", )

• DOCTYPE de HTML >.41 sin FL ' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML R.01

Tra t # al//E$", )

6n el caso concreto de 7nternet 6-plorer$ tam i(n acti#an el modo %uir<s los modosXHTML 1.4 %ue incluyen la declaración de XML 'por ejemplo <N*ml 2 r # "1.0"

4#+ ( "UTZ-6"N, ) al principio de la p!gina "e ,<N*ml 2 r # "1.0" 4#+ ( "UTZ-6" N,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 9tr 4t//E$"

"htt%&//'''.'3.#r(/T)/*html1/DTD/*html1- tr 4t.+t+",

Se pueden consultar todos los casos concretos %ue acti#an el modo !uir#s para cadana#egador en la p!gina http,&&hsi#onen.i<i.fi&doctype&La #ersión ?.? y anteriores de 7nternet 6-plorer y las #ersiones @ y 3 en modo!uir#s siguen su propio modelo de c!lculo de anchuras y alturas %ue es muy diferente alm(todo definido por el est!ndar.La siguiente imagen muestra el elemento del ejemplo anterior en la #ersión @ de 7nternet6-plorer en modo est!ndar,



Figura .1( 7nternet 6-plorer @ en modo est!ndar

La anchura del elemento es la %ue se o tiene de sumar la anchura de su contenido ' 300 )$sus ordes ' @ * 10 ) y sus rellenos ' @ * 70 ). :or lo tanto$ la anchura del elemento son R@0pí-el$ a los %ue se suman los 30 pí-el de margen lateral a cada lado.Sin em argo$ el mismo ejemplo en el modo !uir#s de la #ersión @ de 7nternet 6-plorermuestra el siguiente aspecto,

Figura .1; 7nternet 6-plorer @ en modo %uir<s

Las #ersiones anteriores de 7nternet 6-plorer y las #ersiones @ y 3 en modo

!uir#s consideran %ue la anchura esta lecida por CSS no sólo es la anchura del contenido$sino %ue tam i(n incluye los ordes y el relleno.



:or lo tanto$ en este caso la anchura total del elemento 'sin contar los m!rgenes laterales)es de 300 pí-el$ el mismo #alor %ue se indica en la propiedad ' +th . 6l espacio ocupadopor los ordes del elemento ' @ * 10 ) y sus rellenos ' @ * 70 ) se resta de la anchura de sucontenido.:ara e#itar este pro lema y crear dise/os con el mismo aspecto en cual%uier na#egador$es necesario e#itar el modo !uir#s de 7nternet 6-plorer. :or tanto$ todas las p!ginasde en incluir la declaración apropiada de DOCTYPE.

. .1. 'os odos de co pati!ilidad de Internet E+plorer

6l na#egador 7nternet 6-plorer introduce el concepto de "compatibilidad de la página" para asegurar %ue todas las p!ginas HTML se #ean correctamente en cual%uier#ersión de ese na#egador. 6n realidad$ esta nue#a característica es una mejora del modo!uir#s e-plicado anteriormente.7nternet 6-plorer $ a diferencia de sus #ersiones anteriores$ soporta completamente elest!ndar CSS 0.1. Sin em argo$ muchos sitios "e se dise/aron para 7nternet 6-plorer @y 3$ por lo %ue incluyen trucos$ hac#s y filtros %ue arreglan los errores y carencias de esas#ersiones del na#egador.:ara e#itar %ue las p!ginas dise/adas para na#egadores anteriores se #ean mal en estanue#a #ersión$ 7nternet 6-plorer incluye la opción de Acompati ilidad de la p!ginaA$ %uepermite indicar la #ersión de 7nternet 6-plorer para la %ue la p!gina ha sido dise/ada.5e esta forma$ si la p!gina no se #isuali+a correctamente en 7nternet 6-plorer $ se puede

indicar al na#egador %ue la muestre como si fuera 7nternet 6-plorer @ o 3. 6n realidad$7nternet 6-plorer incluye seis modos de funcionamiento,• &odo IE3 , la p!gina se muestra segDn el modo !uir#s de 7nternet 6-plorer 3$ %ue es casi

id(ntico a como se #eían las p!ginas en el na#egador 7nternet 6-plorer ?.• &odo IE; , la p!gina se muestra en el modo est!ndar de 7nternet 6-plorer 3$ sin importar

si la p!gina contiene o no la directi#a <!DOCTYPE,.

• &odo IE , los contenidos se muestran en el modo est!ndar de 7nternet 6-plorer $ %ue

es el m!s parecido al del resto de na#egadores %ue soportan los est!ndares 'Eirefo-$

Bpera$ Safari y oogle Chrome).• E ular el odo IE; , el na#egador decide cómo mostrar los contenidos a partir de la

directi#a <!DOCTYPE, de la p!gina. Si esa directi#a es una de las %ue acti#an el modo

est!ndar$ la p!gina se muestra en el modo est!ndar de 7nternet 6-plorer 3. 6n otro caso$

se muestra en el modo !uir#s de 7nternet 6-plorer ?. 6ste modo es el m!s Dtil para la

mayoría de sitios "e .• E ular el odo IE , el na#egador decide cómo mostrar los contenidos a partir de la

directi#a <!DOCTYPE, de la p!gina. Si esa directi#a es una de las %ue acti#an el modo

est!ndar$ la p!gina se muestra en el modo est!ndar de 7nternet 6-plorer . 6n otro caso$

se muestra en el modo !uir#s de 7nternet 6-plorer ?.• &odo l ite ' "edge mode" ), indica a 7nternet 6-plorer %ue los contenidos se de en

mostrar en el modo de compati ilidad m!s a#an+ado disponi le. *ctualmente$ este modo

es e%ui#alente al modo 76 . Si las futuras #ersiones 7nternet 6-plorer 2 y 14 incluyeran

mejor compati ilidad$ las p!ginas se #isuali+arían en ese modo a#an+ado decompati ilidad.

6l modo de compati ilidad de la p!gina se indica mediante una nue#a eti%ueta <m ta, conla propiedad X-U -C#m%at :l y cuyo #alor es el %ue utili+a 7nternet 6-plorer paradeterminar el modo %ue se utili+a,<!-- M#+# IE7 --,

<h a+, <m ta htt%- 2 "X-U -C#m%at :l " 4# t t "IE 7" / , ...

</ h a+,

<!-- M#+# IE --,<h a+, <m ta htt%- 2 "X-U -C#m%at :l " 4# t t "IE " / , ...

</ h a+,

<!-- M#+# IE6 --,<h a+, <m ta htt%- 2 "X-U -C#m%at :l " 4# t t "IE 6" / , ...

</ h a+,

<!-- Em lar l m#+# IE --,

<h a+, <m ta htt%- 2 "X-U -C#m%at :l " 4# t t "IE Em lat IE " / , ...

</ h a+,

<!-- Em lar l m#+# IE6 --,<h a+, <m ta htt%- 2 "X-U -C#m%at :l " 4# t t "IE Em lat IE6" / ,

...</ h a+,

<!-- M#+# lKm t --,<h a+, <m ta htt%- 2 "X-U -C#m%at :l " 4# t t "IE +( " / , ...

</ h a+,

Io o stante$ esta opción de compati ilidad de la p!gina de e entenderse como unasolución temporal %ue e#ita %ue los sitios "e se #ean mal en 7nternet 6-plorer . LaDnica solución correcta a largo pla+o consiste en actuali+ar las p!ginas para %ue susdise/os sigan los est!ndares "e .

>.?. Fondos6l Dltimo elemento %ue forma el bo) model es el fondo de la caja del elemento. 6l fondopuede ser un color simple o una imagen. 6l fondo solamente se #isuali+a en el !reaocupada por el contenido y su relleno$ ya %ue el color de los ordes se controladirectamente desde los ordes y las +onas de los m!rgenes siempre son transparentes.:ara esta lecer un color o imagen de fondo en la p!gina entera$ se de e esta lecer unfondo al elemento <:#+ , . Si se esta lece un fondo a la p!gina$ como el #alor inicial delfondo de los elementos es transparente$ todos los elementos de la p!gina se #isuali+ancon el mismo fondo a menos %ue algDn elemento especifi%ue su propio fondo.

CSS define cinco propiedades para esta lecer el fondo de cada elemento ' :a4 (r# +-4#l#r $:a4 (r# +- ma( $:a4 (r# +-r % at $:a4 (r# +-atta4hm t $:a4 (r# +-%# t # ) y otra propiedad de tipo "shorthand" ' :a4 (r# + ).La propiedad :a4 (r# +-4#l#r permite mostrar un color de fondo sólido en la caja de unelemento. 6sta propiedad no permite crear degradados ni ningDn otro efecto a#an+ado.Propiedad !ac+ground'colorValores color 6 transparent 6 inheritSe aplica a Todos los elementos

Valor inicial transparentDescripción stablece un color de 'ondo para los elementos

6l siguiente ejemplo muestra una p!gina "e con un color gris claro de fondo,:#+ A :a4 (r# +-4#l#r & SZ7Z7Z75

:ara crear efectos gr!ficos a#an+ados$ es necesario utili+ar la propiedad :a4 (r# +-ma( $ %ue permite mostrar una imagen como fondo de la caja de cual%uier elemento,

Propiedad !ac+ground'i&ageValores url 6 none 6 inherit



Propiedad !ac+ground'i&ageSe aplica a Todos los elementosValor inicial noneDescripción stablece una imagen como 'ondo para los elementos

CSS permite esta lecer de forma simult!nea un color y una imagen de fondo. 6n estecaso$ la imagen se muestra delante del color$ por lo %ue solamente si la imagen contiene+onas transparentes es posi le #er el color de fondo.6l siguiente ejemplo muestra una imagen como fondo de toda la p!gina,:#+ A :a4 (r# +- ma( & rl F" ma( /;# +#.% (" G

Las im!genes de fondo se indican a tra#(s de su FL$ %ue puede ser a soluta o relati#a.Suele ser recomenda le crear una carpeta de im!genes %ue se encuentre en el mismodirectorio %ue los archi#os CSS y %ue almacene todas las im!genes utili+adas en el

dise/o de las p!ginas. *sí$ las im!genes correspondientes al dise/o de la p!gina se mantienen separadas delresto de im!genes del sitio y el código CSS es m!s sencillo 'por utili+ar FL relati#as) ym!s f!cil de mantener 'por no tener %ue actuali+ar FL a solutas en caso de %ue secam ie la estructura del sitio "e ).:or otra parte$ suele ser ha itual indicar un color de fondo siempre %ue se muestra unaimagen de fondo. 6n caso de %ue la imagen no se pueda mostrar o contenga errores$ elna#egador mostrar! el color indicado '%ue de ería ser$ en lo posi le$ similar a la imagen)

y la p!gina no parecer! %ue contiene errores.Si la imagen %ue se %uiere mostrar es demasiado grande para el fondo del elemento$solamente se muestra la parte de imagen comprendida en el tama/o del elemento. Si laimagen es m!s pe%ue/a %ue el elemento$ CSS la repite hori+ontal y #erticalmente hastallenar el fondo del elemento.6ste comportamiento es Dtil para esta lecer un fondo complejo a una p!gina "e entera.6l siguiente ejemplo utili+a una imagen muy pe%ue/a para esta lecer un fondo complejo atoda una p!gina,

7magen original

Figura .1 7magen original utili+ada para el fondo de la p!gina

Feglas CSS:#+ A :a4 (r# +- ma( & rl F ma( /;# +#.( ; G5

Fesultado



Figura .1< :!gina con una imagen de fondoCon una imagen muy pe%ue/a 'y %ue por tanto$ se puede descargar en muy poco tiempo)se consigue cu rir completamente el fondo de la p!gina$ con lo %ue se consigue un granahorro de ancho de anda.6n ocasiones$ no es con#eniente %ue la imagen de fondo se repita hori+ontal y#erticalmente. :ara ello$ CSS introduce la propiedad :a4 (r# +-r % at %ue permitecontrolar la forma de repetición de las im!genes de fondo.Propiedad !ac+ground'repeatValores repeat 6 repeat-! 6 repeat-y 6 no-repeat 6 inheritSe aplica a Todos los elementosValor inicial repeatDescripción Controla la 'orma en la .ue se repiten las im genes de 'ondo

6l #alor r % at indica %ue la imagen se de e repetir en todas direcciones y por tanto$ esel comportamiento por defecto. 6l #alor #-r % at muestra una sola #e+ la imagen y nose repite en ninguna dirección. 6l #alor r % at-* repite la imagen sólo hori+ontalmente yel #alor r % at- repite la imagen solamente de forma #ertical.

6l sitio "e http,&&""".<ott<e.org& utili+a el #alor r % at-* para mostrar una imagen defondo en la ca ecera de la p!gina,





Figura .)= so de repeatG- en la p!gina de Nott<e.org

Las reglas CSS definidas para la ca ecera son,Sh+r A :a4 (r# + & rl F"/ ma( /+ .( ;" G r % at-* 5 ' +th & 100 5 t *t-al ( & 4 t r 5

:or otra parte$ el sitio "e http,&&#eerle.duoh.com& utili+a el #alor r % at- para mostrar elfondo de una columna de contenidos,



Figura .)1 so de repeatGy en la p!gina de eerle.duoh.com

Las reglas CSS definidas para esa columna de contenidos son,.' + S4# t t- 4# +ar A

' +th & @ @%*5 mar( & 13%* 0 0 0 5 %# t # & r lat 2 5 mar( -l ;t & -6%* 5 :a4 (r# + & rl F"./(ra%h 4 /' + /:(-4# t t- 4# +ar .( ;" G r % at- 5

*dem!s de seleccionar el tipo de repetición de las im!genes de fondo$ CSS permite

controlar la posición de la imagen dentro del fondo del elemento mediante lapropiedad :a4 (r# +-%# t # .Propiedad !ac+ground'positionValores

3 3 porcenta2e 6unidad de medida 6 le't 6 center 6 right 4 3 porcenta2e 6unidad de medida 6

top 6 center 6 bottom 4= 4 6 3 3 le't 6 center 6 right 4 66 3 top 6 center 6 bottom 4 4 6 inheritSe aplica a Todos los elementosValor inicial $> $>Descripción Controla la posición en la .ue se muestra la imagen en el 'ondo del elemento

La propiedad :a4 (r# +-%# t # permite indicar la distancia %ue se despla+a laimagen de fondo respecto de su posición original situada en la es%uina superior i+%uierda.Si se indican dos porcentajes o dos medidas$ el primero indica el despla+amiento















:a4 (r# +-%# t # & r (ht t#%5

S4a8a3 A :a4 (r# +- ma( & rl F" ma( /h l%.% (" G5 :a4 (r# +-r % at & #-r % at 5 :a4 (r# +-%# t # & 70 70 5

<+ 2 + "4a8a1" , <h1, :#tt#m l ;t</h1 , </+ 2 ,<+ 2 + "4a8a@" , <h1, r (ht t#%</h1 , </+ 2 ,

<+ 2 + "4a8a3" , <h1, 70 70 </h1 , </+ 2 ,

Bpcionalmente$ se puede indicar %ue el fondo permane+ca fijo cuando la #entana del

na#egador se despla+a mediante las arras de scroll . Se trata de un comportamiento %ueen general no es desea le y %ue algunos na#egadores no soportan correctamente. Lapropiedad %ue controla este comportamiento es :a4 (r# +-atta4hm t .

Propiedad !ac+ground'attac%&entValores scroll 6 'i!ed 6 inheritSe aplica a Todos los elementosValor inicial scroll

DescripciónControla la 'orma en la .ue se visuali1a la imagen de 'ondo/ permanece 'i2a cuando se

hace scroll en la ventana del navegador o se despla1a 2unto con la ventana:ara hacer %ue una imagen de fondo se muestre fija al despla+ar la #entana delna#egador$ se de e a/adir la propiedad :a4 (r# +-atta4hm t& ; * + .:or Dltimo$ CSS define una propiedad de tipo "shorthand" para indicar todas laspropiedades de los colores e im!genes de fondo de forma directa. La propiedad sedenomina :a4 (r# + y es la %ue generalmente se utili+a para esta lecer las propiedadesdel fondo de los elementos.Propiedad !ac+groundValores 3 bac(ground- color 66 bac(ground-image 66 bac(ground-repeat 66 bac(ground-attachment

66 bac(ground-position 4 6 inheritSe aplica a Todos los elementosValor inicial -Descripción stablece todas las propiedades del 'ondo de un elemento

6l orden en el %ue se indican las propiedades es indiferente$ aun%ue en general se sigueel formato indicado de color$ url de imagen$ repetición y posición.6l siguiente ejemplo muestra la #entaja de utili+ar la propiedad :a4 (r# + ,/J C#l#r ma( + ;# +# + la %>( a m + a t a %r#% +a+ h#rtha + J/

:#+ A :a4 (r# + & S@@@+@+ rl F./(ra%h 4 /4#l#r tr %.( ; G r % at-* 0 0 5









/J La %r#% +a+ h#rtha + a t r #r 2al t a la ( t%r#% +a+ J/

:#+ A :a4 (r# +-4#l#r & S@@@+@+5 :a4 (r# +- ma( & rl F"./(ra%h 4 /4#l#r tr %.( ;" G5 :a4 (r# +-r % at & r % at-* 5 :a4 (r# +-%# t # & 0 0 5

La propiedad :a4 (r# + permite asignar todos o sólo algunos de todos los #alores %uese pueden definir para los fondos de los elementos,:a4 (r# + & rl F"./(ra%h 4 /' + /:(-4# t t- 4# +ar .( ;" G r % at- 5

:a4 (r# + & rl F"./(ra%h 4 /' + /;##t r-4# t t- 4# +ar .( ;" G #-r % at :#tt#m l ;t 5

:a4 (r# + & tra %ar t rl F"./(ra%h 4 / a2 (at # .( ;" G #-r % at 0 -@ %* 5

:a4 (r# + & # 5

:a4 (r# + & S@ 3636 rl F"./(ra%h 4 / 4# / 4# -% rmal -: (.( ;" G #-r % at

4 t r l ;t 5

E4ercicio 3

er enunciado

Capítulo ?. 8osiciona iento 5 visuali2aciónCuando los na#egadores descargan el contenido HTML y CSS de las p!ginas "e $aplican un procesamiento muy complejo antes de mostrar las p!ginas en la pantalla delusuario.:ara cumplir con el modelo de cajas presentado en el capítulo anterior$ los na#egadorescrean una caja para representar a cada elemento de la p!gina HTML. Los factores %ue setienen en cuenta para generar cada caja son,• Las propiedades width y height de la caja 'si est!n esta lecidas).

• 6l tipo de cada elemento HTML 'elemento de lo%ue o elemento en línea).• :osicionamiento de la caja 'normal$ relati#o$ a soluto$ fijo o flotante).

•

Las relaciones entre elementos 'dónde se encuentra cada elemento$ elementosdescendientes$ etc.)





• Btro tipo de información$ como por ejemplo el tama/o de las im!genes y el tama/o de la

#entana del na#egador.

6n este capítulo se muestran los cinco tipos de posicionamientos definidos para las cajasy se presentan otras propiedades %ue afectan a la forma en la %ue se #isuali+an las cajas.

?.1. %ipos de ele entos6l est!ndar HTML clasifica a todos sus elementos en dos grandes grupos, elementos enlínea y elementos de lo%ue.Los elementos de lo%ue ' "bloc# elements" en ingl(s) siempre empie+an en una nue#alínea y ocupan todo el espacio disponi le hasta el final de la línea. :or su parte$ loselementos en línea ' "inline elements" en ingl(s) no empie+an necesariamente en nue#a

línea y sólo ocupan el espacio necesario para mostrar sus contenidos.5e ido a este comportamiento$ el tipo de un elemento influye de forma decisi#a en la caja%ue el na#egador crea para mostrarlo. La siguiente imagen muestra las cajas %ue crea elna#egador para representar los diferentes elementos %ue forman una p!gina HTML,

Figura 3.1 Cajas creadas por los elementos de línea y los elementos de lo%ue

6l primer elemento de la p!gina anterior es un p!rrafo. Los p!rrafos son elementos delo%ue y por ese moti#o su caja empie+a en una nue#a línea y llega hasta el final de esa

misma línea. *un%ue los contenidos de te-to del p!rrafo no son suficientes para ocupartoda la línea$ el na#egador reser#a todo el espacio disponi le en la primera línea.6l segundo elemento de la p!gina es un enlace. Los enlaces son elementos en línea$ porlo %ue su caja sólo ocupa el espacio necesario para mostrar sus contenidos. Si despu(sde este elemento se incluye otro elemento en línea 'por ejemplo otro enlace o unaimagen) el na#egador mostraría los dos elementos en la misma línea$ ya %ue e-isteespacio suficiente.



:or Dltimo$ el tercer elemento de la p!gina es un p!rrafo %ue se comporta de la mismaforma %ue el primer p!rrafo. 6n su interior$ se encuentra un enlace %ue tam i(n secomporta de la misma forma %ue el enlace anterior. *sí$ el segundo p!rrafo ocupa todauna línea y el segundo enlace sólo ocupa el espacio necesario para mostrar suscontenidos.:or sus características$ los elementos de lo%ue no pueden insertarse dentro deelementos en línea y tan sólo pueden aparecer dentro de otros elementos de lo%ue. 6ncam io$ un elemento en línea puede aparecer tanto dentro de un elemento de lo%uecomo dentro de otro elemento en línea.Los elementos en línea definidos por HTML son, a$a::r $a4r# m$: $:a ;# t $:+# $: ( $:r $4 t $4#+ $+; $ m$;# t $ $ m($ % t$ :+ $la: l $ $ $ am%$ l 4t $ mall $

%a $ tr $ tr# ( $ : $ %$t *tar a $tt $ $2ar .Los elementos de lo%ue definidos por HTML son, a++r $:l#4 #t $4 t r $+ r $+ 2$+l $; l+ t $;#rm $h1$h@$h3$hR$h7$h $hr $ + *$m $ #;ram $ # 4r %t $#l $%$%r $ta:l $ l .Los siguientes elementos tam i(n se considera %ue son de lo%ue, ++$+t $;ram t $l $t:#+ $t+ $t;##t $th $th a+ $tr .Los siguientes elementos pueden ser en línea y de lo%ue segDn lascircunstancias, : tt# $+ l $ ;ram $ $ma%$#:8 4t $ 4r %t .

?.0. 8osiciona ientoLos na#egadores crean y posicionan de forma autom!tica todas las cajas %ue formancada p!gina HTML. Io o stante$ CSS permite al dise/ador modificar la posición en la %uese muestra cada caja.

tili+ando las propiedades %ue proporciona CSS para alterar la posición de las cajas esposi le reali+ar efectos muy a#an+ados y dise/ar estructuras de p!ginas %ue de otraforma no serían posi les.6l est!ndar de CSS define cinco modelos diferentes para posicionar una caja,•

:osicionamiento normal o est!tico, se trata del posicionamiento %ue utili+an losna#egadores si no se indica lo contrario.• :osicionamiento relati#o, #ariante del posicionamiento normal %ue consiste en posicionar

una caja segDn el posicionamiento normal y despu(s despla+arla respecto de su posición

original.• :osicionamiento a soluto, la posición de una caja se esta lece de forma a soluta

respecto de su elemento contenedor y el resto de elementos de la p!gina ignoran la

nue#a posición del elemento.• :osicionamiento fijo, #ariante del posicionamiento a soluto %ue con#ierte una caja en un

elemento inamo#i le$ de forma %ue su posición en la pantalla siempre es la misma



independientemente del resto de elementos e independientemente de si el usuario su e o

aja la p!gina en la #entana del na#egador.• :osicionamiento flotante, se trata del modelo m!s especial de posicionamiento$ ya %ue

despla+a las cajas todo lo posi le hacia la i+%uierda o hacia la derecha de la línea en la

%ue se encuentran.

6l posicionamiento de una caja se esta lece mediante la propiedad %# t # ,

Propiedad positionValores static 6 relative 6 absolute 6 'i!ed 6 inheritSe aplica a Todos los elementosValor inicial staticDescripción )elecciona el posicionamiento con el .ue se mostrar el elemento

6l significado de cada uno de los posi les #alores de la propiedad %# t # es elsiguiente,• tat 4 , corresponde al posicionamiento normal o est!tico. Si se utili+a este #alor$ se

ignoran los #alores de las propiedades t#%$r (ht $:#tt#m y l ;t %ue se #er!n a

continuación.• r lat 2 , corresponde al posicionamiento relati#o. 6l despla+amiento de la caja se

controla con las propiedades t#%$r (ht $:#tt#m y l ;t .• a: #l t , corresponde al posicionamiento a soluto. 6l despla+amiento de la caja

tam i(n se controla con las propiedades t#%$r (ht $:#tt#m y l ;t $ pero su interpretación

es mucho m!s compleja$ ya %ue el origen de coordenadas del despla+amiento depende

del posicionamiento de su elemento contenedor.• ; * + , corresponde al posicionamiento fijo. 6l despla+amiento se esta lece de la misma

forma %ue en el posicionamiento a soluto$ pero en este caso el elemento permanece

inamo#i le en la pantalla.

La propiedad %# t # no permite controlar el posicionamiento flotante$ %ue se esta lececon otra propiedad llamada ;l#at y %ue se e-plica m!s adelante. *dem!s$ la propiedad%# t # sólo indica cómo se posiciona una caja$ pero no la despla+a.Iormalmente$ cuando se posiciona una caja tam i(n es necesario despla+arla respectode su posición original o respecto de otro origen de coordenadas. CSS define cuatropropiedades llamadas t#%$r (ht $:#tt#m y l ;t para controlar el despla+amiento de lascajas posicionadas,Propiedades top( rig%t( !otto&( le)tValores unidad de medida 6 porcenta2e 6 auto 6inheritSe aplica a Todos los elementos posicionadosValor inicial auto













Propiedades top( rig%t( !otto&( le)tDescripción

Indican el despla1amiento hori1ontal y vertical del elemento respecto de su posición

original

6n el caso del posicionamiento relati#o$ cada una de estas propiedades indica el

despla+amiento del elemento desde la posición original de su ordesuperior&derecho&inferior&i+%uierdo. Si el posicionamiento es a soluto$ las propiedadesindican el despla+amiento del elemento respecto del ordesuperior&derecho&inferior&i+%uierdo de su primer elemento padre posicionado.6n cual%uiera de los dos casos$ si el despla+amiento se indica en forma de porcentaje$ serefiere al porcentaje so re la anchura 'propiedades r (ht y l ;t ) o altura 'propiedadest#% y :#tt#m ) del elemento.

?.9. 8osiciona iento nor al6l posicionamiento normal o est!tico es el modelo %ue utili+an por defecto losna#egadores para mostrar los elementos de las p!ginas. 6n este modelo$ sólo se tiene encuenta si el elemento es de lo%ue o en línea$ sus propiedades ' +th y h (ht y sucontenido.Los elementos de lo%ue forman lo %ue CSS denomina "conte)tos de formato de blo!ue" .6n este tipo de conte-tos$ las cajas se muestran una de ajo de otra comen+ando desde elprincipio del elemento contenedor. La distancia entre las cajas se controla mediante losm!rgenes #erticales.

Figura 3.) :osicionamiento normal de los elementos de lo%ue

Si un elemento se encuentra dentro de otro$ el elemento padre se llama "elementocontenedor" y determina tanto la posición como el tama/o de todas sus cajas interiores.Si un elemento no se encuentra dentro de un elemento contenedor$ entonces su elementocontenedor es el elemento <:#+ , de la p!gina. Iormalmente$ la anchura de loselementos de lo%ue est! limitada a la anchura de su elemento contenedor$ aun%ue en

algunos casos sus contenidos pueden des ordar el espacio disponi le.Los elementos en línea forman los "conte)tos de formato en l+nea" . 6n este tipo de



conte-tos$ las cajas se muestran una detr!s de otra de forma hori+ontal comen+andodesde la posición m!s a la i+%uierda de su elemento contenedor. La distancia entre lascajas se controla mediante los m!rgenes laterales.

Figura 3., :osicionamiento normal de los elementos en línea

Si las cajas en línea ocupan m!s espacio del disponi le en su propia línea$ el resto decajas se muestran en las líneas inferiores. Si las cajas en línea ocupan un espacio menor%ue su propia línea$ se puede controlar la distri ución de las cajas mediante la propiedadt *t-al ( para centrarlas$ alinearlas a la derecha o justificarlas.

?.>. 8osiciona iento relativo6l est!ndar CSS considera %ue el posicionamiento relati#o es un caso particular delposicionamiento normal$ aun%ue en la pr!ctica presenta muchas diferencias.6l posicionamiento relati#o despla+a una caja respecto de su posición original esta lecidamediante el posicionamiento normal. 6l despla+amiento de la caja se controla con laspropiedades t#%$r (ht $:#tt#m y l ;t .6l #alor de la propiedad t#% se interpreta como el despla+amiento entre el orde superiorde la caja en su posición final y el orde superior de la misma caja en su posición original.5e la misma forma$ el #alor de las propiedades l ;t $r (ht y :#tt#m indicarespecti#amente el despla+amiento entre el orde i+%uierdo&derecho&inferior de la caja en

su posición final y el orde i+%uierdo&derecho&inferior de la caja original.:or tanto$ la propiedad t#% se emplea para mo#er las cajas de forma descendente$ lapropiedad :#tt#m mue#e las cajas de forma ascendente$ la propiedad l ;t se utili+a paradespla+ar las cajas hacia la derecha y la propiedad r (ht mue#e las cajas hacia lai+%uierda. 6ste comportamiento parece poco intuiti#o y es causa de errores cuando seempie+an a dise/ar p!ginas con CSS. Si se utili+an #alores negati#os en las propiedadest#%$r (ht $:#tt#m y l ;t $ su efecto es justamente el in#erso.6l despla+amiento relati#o de una caja no afecta al resto de cajas adyacentes$ %ue se

muestran en la misma posición %ue si la caja despla+ada no se hu iera mo#ido de suposición original.



Figura 3. 6jemplo de posicionamiento relati#o de un elemento

6n la imagen anterior$ la caja 0 se ha despla+ado lateralmente hacia la derecha y#erticalmente de forma descendente. Como el resto de cajas de la p!gina no modifican suposición$ se producen solapamientos entre los contenidos de las cajas.Las cajas despla+adas de forma relati#a no modifican su tama/o$ por lo %ue los #alores

de las propiedades l ;t y r (ht siempre cumplen %ue l ;t -r (ht .Si tanto l ;t como r (ht tienen un #alor de a t# '%ue es su #alor por defecto) la caja nose mue#e de su posición original. Si sólo el #alor de l ;t es a t# $ su #alor real es -r (ht .7gualmente$ si sólo el #alor de r (ht es a t# $ su #alor real es -l ;t .Si tanto l ;t como r (ht tienen #alores distintos de a t# $ uno de los dos #alores se tiene%ue ignorar por%ue son mutuamente e-cluyentes. :ara determinar la propiedad %ue setiene en cuenta$ se considera el #alor de la propiedad + r 4t # .La propiedad + r 4t # permite esta lecer la dirección del te-to de un contenido. Si el

#alor de + r 4t # es ltr $ el te-to se muestra de i+%uierda a derecha$ %ue es el m(todode escritura ha itual en la mayoría de países. Si el #alor de + r 4t # es rtl $ el m(todode escritura es de derecha a i+%uierda$ como el utili+ado por los idiomas !ra e y he reo.Si el #alor de + r 4t # es ltr $ y las propiedades l ;t y r (ht tienen #alores distintos dea t# $ se ignora la propiedad r (ht y sólo se tiene en cuenta el #alor de la propiedad l ;t .5e la misma forma$ si el #alor de + r 4t # es rtl $ se ignora el #alor de l ;t y sólo setiene en cuenta el #alor de r (ht .6l siguiente ejemplo muestra tres im!genes posicionadas de forma normal,



Figura 3.3 6lementos posicionados de forma normal

*plicando el posicionamiento relati#o$ se despla+a la primera imagen de formadescendente,

m(.+ %la=a+a A %# t # & r lat 2 5 t#%& 6 m5

< m( 4la "+ %la=a+a" r4 " ma( / ma( .% (" alt "Ima( ( Vr 4a" / ,

< m( r4 " ma( / ma( .% (" alt "Ima( ( Vr 4a" / ,< m( r4 " ma( / ma( .% (" alt "Ima( ( Vr 4a" / ,

6l aspecto %ue muestran ahora las im!genes es el siguiente,

Figura 3.( 6lemento posicionado de forma relati#a6l resto de im!genes no #arían su posición y por tanto no ocupan el hueco dejado por la



primera imagen$ ya %ue el posicionamiento relati#o no influye en el resto de elementos dela p!gina. 6l principal pro lema de posicionar elementos de forma relati#a es %ue sepueden producir solapamientos con otros elementos de la p!gina.

?.?. 8osiciona iento a!soluto6l posicionamiento a soluto se emplea para esta lecer de forma e-acta la posición en la%ue se muestra la caja de un elemento. La nue#a posición de la caja se indica mediantelas propiedades t#%$r (ht $:#tt#m y l ;t . La interpretación de los #alores de estaspropiedades es mucho m!s compleja %ue en el posicionamiento relati#o$ ya %ue en estecaso dependen del posicionamiento del elemento contenedor.Cuando una caja se posiciona de forma a soluta$ el resto de elementos de la p!gina se#en afectados y modifican su posición. *l igual %ue en el posicionamiento relati#o$ cuandose posiciona de forma a soluta una caja es pro a le %ue se produ+can solapamientoscon otras cajas.6n el siguiente ejemplo$ se posiciona de forma a soluta la caja 0,

Figura 3.; 6jemplo de posicionamiento a soluto de un elemento

La caja 0 est! posicionada de forma a soluta$ lo %ue pro#oca %ue el resto de elementos

de la p!gina modifi%uen su posición. 6n concreto$ la caja 9 deja su lugar original y pasa aocupar el hueco dejado por la caja 0.6l est!ndar de CSS 0.1 indica %ue las cajas posicionadas de forma a soluta "salen delflu&o normal de la página" $ lo %ue pro#oca %ue el resto de elementos de la p!gina semue#an y en ocasiones$ ocupen la posición original en la %ue se encontra a la caja.:or otra parte$ el despla+amiento de una caja posicionada de forma a soluta se controlamediante las propiedades t#%$r (ht $:#tt#m y l ;t . * diferencia del posicionamientorelati#o$ la interpretación de los #alores de estas propiedades depende del elementocontenedor de la caja posicionada.5eterminar la referencia utili+ada para interpretar los #alores de t#%$r (ht $:#tt#m yl ;t de una caja posicionada de forma a soluta es un proceso complejo %ue se compone de



los siguientes pasos,• Se uscan todos los elementos contenedores de la caja hasta llegar al elemento <:#+ ,

de la p!gina.• Se recorren todos los elementos contenedores empe+ando por el m!s cercano a la caja y

llegando hasta el <:#+ ,• 6l primer elemento contenedor %ue est( posicionado de cual%uier forma diferente

a %# t # & tat 4 se con#ierte en la referencia %ue determina la posición de la caja

posicionada de forma a soluta.• Si ningDn elemento contenedor est! posicionado$ la referencia es la #entana del

na#egador$ %ue no de e confundirse con el elemento <:#+ , de la p!gina.

na #e+ determinada la referencia del posicionamiento a soluto$ la interpretación de los#alores de las propiedades t#%$r (ht $:#tt#m y l ;t se reali+a como sigue,• 6l #alor de la propiedad t#% indica el despla+amiento desde el orde superior de la caja

hasta el orde superior del elemento contenedor %ue se utili+a como referencia.• 6l #alor de la propiedad r (ht indica el despla+amiento desde el orde derecho de la

caja hasta el orde derecho del elemento contenedor %ue se utili+a como referencia.• 6l #alor de la propiedad :#tt#m indica el despla+amiento desde el orde inferior de la

caja hasta el orde inferior del elemento contenedor %ue se utili+a como referencia.

• 6l #alor de la propiedad l ;t indica el despla+amiento desde el orde i+%uierdo de lacaja hasta el orde i+%uierdo del elemento contenedor %ue se utili+a como referencia.

6n los siguientes ejemplos$ se utili+a la p!gina HTML %ue muestra la siguiente imagen,



Figura 3. Situación original antes de modificar el posicionamiento

* continuación$ se muestra el código HTML y CSS de la p!gina original,+ 2 A :#r+ r& @%* #l + SCCC5 %a++ (& 1 m5 mar( & 1 m 0 1 m R m5 ' +th& 300%*5

<+ 2, < m( r4 " ma( / ma( .% (" alt "Ima( ( Vr 4a" / , <%,L#r m % m +#l#r t am t 4# 4t t r a+ % 4 ( l t. Pha ll

llam4#r% r 2 l t % m. Ut % ll t t 2#l t%at 4 r r

m 2 2 rra a ( at % l2 ar t r% l # + #r4 . D# 4 % m. C ra: t r; l + ltr 4 t #ll 4 t + 2 l r tr m at t ll .< / %,</ + 2,

6n primer lugar$ se posiciona de forma a soluta la imagen mediante la propiedad %# t #y se indica su nue#a posición mediante las propiedades t#% y l ;t ,+ 2 m( A %# t # & a: #l t 5

t#%& 70%* 5 l ;t & 70%* 5



6l resultado #isual se muestra en la siguiente imagen,

Figura 3.< 7magen posicionada de forma a soluta

La imagen posicionada de forma a soluta no toma como referencia su elementocontenedor <+ 2, $ sino la #entana del na#egador$ tal y como demuestra la siguienteimagen,

Figura 3.1= La referencia del posicionamiento a soluto es la #entana del na#egador

:ara posicionar la imagen de forma a soluta$ el na#egador reali+a los siguientes pasos,%#B tiene la lista de elementos contenedores de la imagen, <+ 2, y <:#+ , .

#Fecorre la lista de elementos contenedores desde el m!s cercano a la imagen 'el <+ 2, )

hasta terminar en el <:#+ , uscando el primer elemento contenedor %ue est(

posicionado.

?#6l posicionamiento de todos los elementos contenedores es el normal o est!tico$ ya %ue

ni si%uiera tienen esta lecida la propiedad %# t #

>.Como ningDn elemento contenedor est! posicionado$ la referencia es la #entana del



na#egador.

5# * partir de esa referencia$ la caja de la imagen se despla+a 70%* hacia la derecha ' l ;t&

70%*) y otros 70%* de forma descendente ' t#%& 70%*).

Como la imagen se posiciona de forma a soluta$ el resto de elementos de la p!gina semue#en para ocupar el lugar li re dejado por la imagen. :or este moti#o$ el p!rrafo su ehasta el principio del <+ 2, y se produce un solapamiento con la imagen posicionada %ueimpide #er parte de los contenidos del p!rrafo.

* continuación$ se modifica el ejemplo anterior posicionando de forma relati#a el elemento<+ 2, %ue contiene la imagen y el p!rrafo. La Dnica propiedad a/adida al <+ 2, es%# t # & r lat 2 por lo %ue el elemento contenedor se posiciona pero no se despla+arespecto de su posición original,+ 2 A

:#r+ r & @%* #l + SCCC5 %a++ (& 1 m5 mar( & 1 m 0 1 m R m 5 ' +th & 300%* 5 %# t # & r lat 2 5

+ 2 m( A

%# t # & a: #l t 5 t#%& 70%* 5

l ;t & 70%* 5

La siguiente imagen muestra el resultado o tenido,

Figura 3.11 7magen posicionada de forma a soluta



6n este caso$ como el elemento contenedor de la imagen est! posicionado$ se con#ierteen la referencia para el posicionamiento a soluto. 6l resultado es %ue la posición de laimagen es muy diferente a la del ejemplo anterior,

Figura 3.1) La referencia del posicionamiento a soluto es el elemento contenedor de la

imagen

:or tanto$ si se %uiere posicionar un elemento de forma a soluta respecto de su elementocontenedor$ es imprescindi le posicionar este Dltimo. :ara ello$ sólo es necesario a/adir lapropiedad %# t # & r lat 2 $ por lo %ue no es o ligatorio despla+ar el elemento

contenedor respecto de su posición original.

?.@. 8osiciona iento fi4o6l est!ndar CSS considera %ue el posicionamiento fijo es un caso particular delposicionamiento a soluto$ ya %ue sólo se diferencian en el comportamiento de las cajasposicionadas.Cuando una caja se posiciona de forma fija$ la forma de o tener el origen de coordenadaspara interpretar su despla+amiento es id(ntica al posicionamiento a soluto. 5e hecho$ siel usuario no mue#e la p!gina HTML en la #entana del na#egador$ no e-iste ningunadiferencia entre estos dos modelos de posicionamiento.La principal característica de una caja posicionada de forma fija es %ue su posición esinamo#i le dentro de la #entana del na#egador. 6l posicionamiento fijo hace %ue las cajasno modifi%uen su posición ni aun%ue el usuario su a o aje la p!gina en la #entana de suna#egador.Si la p!gina se #isuali+a en un medio paginado 'por ejemplo en una impresora) las cajasposicionadas de forma fija se repiten en todas las p!ginas. 6sta característica puede ser

Dtil para crear enca e+ados o pies de p!gina en p!ginas HTML preparadas para imprimir.6l posicionamiento fijo apenas se ha utili+ado en el dise/o de p!ginas "e hasta hace



poco tiempo por%ue el na#egador 7nternet 6-plorer @ y las #ersiones anteriores no losoportan.

?.3. 8osiciona iento flotante6l posicionamiento flotante es el m!s difícil de comprender pero al mismo tiempo es elm!s utili+ado. La mayoría de estructuras de las p!ginas "e complejas est!n dise/adascon el posicionamiento flotante$ como se #er! m!s adelante.Cuando una caja se posiciona con el modelo de posicionamiento flotante$autom!ticamente se con#ierte en una ca&a flotante $ lo %ue significa %ue se despla+a hastala +ona m!s a la i+%uierda o m!s a la derecha de la posición en la %ue originalmente seencontra a.La siguiente imagen muestra el resultado de posicionar de forma flotante hacia la derechala caja 1,

Figura 3.1, 6jemplo de posicionamiento float de una caja

Cuando se posiciona una caja de forma flotante, Q La caja deja de pertenecer al flujonormal de la p!gina$ lo %ue significa %ue el resto de cajas ocupan el lugar dejado por la

caja flotante. Q La caja flotante se posiciona lo m!s a la i+%uierda o lo m!s a la derechaposi le de la posición en la %ue se encontra a originalmente.Si en el anterior ejemplo la caja 1 se posiciona de forma flotante hacia la i+%uierda$ elresultado es el %ue muestra la siguiente imagen,



Figura 3.1 6jemplo de posicionamiento float de una caja

La caja 1 es de tipo flotante$ por lo %ue desaparece del flu&o normal de la p!gina y el restode cajas ocupan su lugar. 6l resultado es %ue la caja 0 ahora se muestra donde esta a lacaja 1 y la caja 9 se muestra donde esta a la caja 0.

*l mismo tiempo$ la caja 1 se despla+a todo lo posi le hacia la i+%uierda de la posición enla %ue se encontra a. 6l resultado es %ue la caja 1 se muestra encima de la nue#aposición de la caja 0 y tapa todos sus contenidos.Si e-isten otras cajas flotantes$ al posicionar de forma flotante otra caja$ se tiene encuenta el sitio disponi le. 6n el siguiente ejemplo se posicionan de forma flotante hacia la

i+%uierda las tres cajas,

Figura 3.13 6jemplo de posicionamiento float de #arias cajas

6n el ejemplo anterior$ las cajas no se superponen entre sí por%ue las cajas flotantestienen en cuenta las otras cajas flotantes e-istentes. Como la caja 1 ya esta aposicionada lo m!s a la i+%uierda posi le$ la caja 0 sólo puede colocarse al lado del ordederecho de la caja 1$ %ue es el sitio m!s a la i+%uierda posi le respecto de la +ona en la%ue se encontra a.

Si no e-iste sitio en la línea actual$ la caja flotante aja a la línea inferior hasta %ueencuentra el sitio necesario para mostrarse lo m!s a la i+%uierda o lo m!s a la derecha



posi le en esa nue#a línea,

Figura 3.1( 6jemplo de posicionamiento float cuando no e-iste sitio suficiente

Las cajas flotantes influyen en la disposición de todas las dem!s cajas. Los elementos enlínea hacen sitio a las cajas flotantes adaptando su anchura al espacio li re dejado por lacaja despla+ada. Los elementos de lo%ue no les hacen sitio$ pero sí %ue adaptan suscontenidos para %ue no se solapen con las cajas flotantes.La propiedad CSS %ue permite posicionar de forma flotante una caja se denomina ;l#at ,

Propiedad )loatValores le't 6 right 6 none 6 inheritSe aplica a Todos los elementos

Valor inicial noneDescripción stablece el tipo de posicionamiento 'lotante del elemento

Si se indica un #alor l ;t $ la caja se despla+a hasta el punto m!s a la i+%uierda posi le enesa misma línea 'si no e-iste sitio en esa línea$ la caja aja una línea y se muestra lo m!sa la i+%uierda posi le en esa nue#a línea). 6l resto de elementos adyacentes se adaptan yfluyen alrededor de la caja flotante.6l #alor r (ht tiene un funcionamiento id(ntico$ sal#o %ue en este caso$ la caja sedespla+a hacia la derecha. 6l #alor # permite anular el posicionamiento flotante de

forma %ue el elemento se muestre en su posición original.E4ercicio (

er enunciado

Los elementos %ue se encuentran alrededor de una caja flotante adaptan sus contenidospara %ue fluyan alrededor del elemento posicionado,







Figura 3.1; 6lementos %ue fluyen alrededor de un elemento posicionado mediante float

La regla CSS %ue se aplica en la imagen del ejemplo anterior es,m( A ;l#at & l ;t 5

no de los principales moti#os para la creación del posicionamiento ;l#at fueprecisamente la posi ilidad de colocar im!genes alrededor de las cuales fluye el te-to.CSS permite controlar la forma en la %ue los contenidos fluyen alrededor de loscontenidos posicionados mediante ;l#at . 5e hecho$ en muchas ocasiones es admisi le%ue algunos contenidos fluyan alrededor de una imagen$ pero el resto de contenidosde en mostrarse en su totalidad sin fluir alrededor de la imagen,

Figura 3.1 Eor+ando a %ue un elemento no fluya alrededor de otro elemento posicionado

mediante float

La propiedad 4l ar permite modificar el comportamiento por defecto del posicionamientoflotante para for+ar a un elemento a mostrarse de ajo de cual%uier caja flotante. La reglaCSS %ue se aplica al segundo p!rrafo del ejemplo anterior es la siguiente,



<% t l "4l ar& l ;t5" ,...< / %,

La definición formal de la propiedad 4l ar se muestra a continuación,

Propiedad clearValores none 6 le't 6 right 6 both 6 inheritSe aplica a Todos los elementos de blo.ueValor inicial noneDescripción Indica el lado del elemento .ue no debe ser adyacente a ninguna ca2a 'lotante

La propiedad 4l ar indica el lado del elemento HTML %ue no de e ser adyacente aninguna caja posicionada de forma flotante. Si se indica el #alor l ;t $ el elemento sedespla+a de forma descendente hasta %ue pueda colocarse en una línea en la %ue nohaya ninguna caja flotante en el lado i+%uierdo.La especificación oficial de CSS e-plica este comportamiento como "un despla%amiento

descendente hasta !ue el borde superior del elemento est por deba&o del borde inferiorde cual!uier elemento flotante hacia la i%!uierda" .Si se indica el #alor r (ht $ el comportamiento es an!logo$ sal#o %ue en este caso setienen en cuenta los elementos despla+ados hacia la derecha.6l #alor :#th despeja los lados i+%uierdo y derecho del elemento$ ya %ue despla+a elelemento de forma descendente hasta %ue el orde superior se encuentre por de ajo del

orde inferior de cual%uier elemento flotante hacia la i+%uierda o hacia la derecha.Como se #er! m!s adelante$ la propiedad 4l ar es imprescindi le cuando se crean las

estructuras de las p!ginas "e complejas.Si se considera el siguiente código CSS y HTML,S%a( a4 # A :#r+ r & 1%* #l + SCCC5 :a4 (r# +-4#l#r & SE0E0E05 %a++ (& .7 m 5

.+ r 4ha A ;l#at & r (ht 5

. = r+a A ;l#at & l ;t 5

<+ 2 + "%a( a4 # " , < %a 4la " = r+a" ,\la #5 t r #r< / %a , < %a 4la "+ r 4ha" ,9 ( t \ra #5< / %a ,

</ + 2,

Si se #isuali+a la p!gina anterior en cual%uier na#egador$ el resultado es el %ue muestra la

siguiente imagen,





Figura 3.1< isuali+ación incorrecta de dos elementos posicionados mediante float

Los elementos t r #r y 9 ( t se salen de su elemento contenedor y el resultadoes #isualmente incorrecto. 6l moti#o de este comportamiento es %ue un elementoposicionado de forma flotante ya no pertenece al flujo normal de la p!gina HTML. :ortanto$ el elemento <+ 2 + "%a( a4 # ", en realidad no encierra ningDn contenido y por eso se #isuali+a incorrectamente.La solución consiste en utili+ar la propiedad #2 r;l#' '%ue se e-plica m!s adelante) so reel elemento contenedor,S%a( a4 # A

:#r+ r & 1%* #l + SCCC5 :a4 (r# +-4#l#r & SE0E0E05 %a++ (& .7 m 5 #2 r;l#' & h ++ 5

.+ r 4ha A ;l#at & r (ht 5

. = r+a A ;l#at & l ;t 5

Si se #isuali+a de nue#o la p!gina anterior en cual%uier na#egador$ el resultado ahora sí%ue es el esperado,



Figura 3.)= isuali+ación correcta de dos elementos posicionados mediante float

?. . @isuali2ación *dem!s de las propiedades %ue controlan el posicionamiento de los elementos$ CSSdefine otras cuatro propiedades para controlar su #isuali+ación, + %la $2 : l t $#2 r;l#' y =- + *.

tili+ando algunas de estas propiedades es posi le ocultar y&o hacer in#isi les las cajasde los elementos$ por lo %ue son imprescindi les para reali+ar efectos a#an+ados yanimaciones.

3. .1. 8ropiedades displa5 5 visi!ilit5

Las propiedades + %la y 2 : l t controlan la #isuali+ación de los elementos. Lasdos propiedades permiten ocultar cual%uier elemento de la p!gina. Ha itualmente seutili+an junto con Ra#aScript para crear efectos din!micos como mostrar y ocultardeterminados te-tos o im!genes cuando el usuario pincha so re ellos.La propiedad + %la permite ocultar completamente un elemento haciendo %uedesapare+ca de la p!gina. Como el elemento oculto no se muestra$ el resto de elementosde la p!gina se mue#en para ocupar su lugar.:or otra parte$ la propiedad 2 : l t permite hacer in#isi le un elemento$ lo %uesignifica %ue el na#egador crea la caja del elemento pero no la muestra. 6n este caso$ elresto de elementos de la p!gina no modifican su posición$ ya %ue aun%ue la caja no se #e$sigue ocupando sitio.La siguiente imagen muestra la diferencia entre ocultar la caja nDmero ? mediante lapropiedad + %la o hacerla in#isi le mediante la propiedad 2 : l t ,



Figura 3.)1 5iferencias #isuales entre las propiedades display y #isi ility

6n general$ cuando se oculta un elemento no es desea le %ue siga ocupando sitio en lap!gina$ por lo %ue la propiedad + %la se utili+a mucho m!s %ue lapropiedad 2 : l t .

* continuación se muestra la definición completa de la propiedad + %la ,Propiedad displa*

Valores

inline 6 bloc( 6 none 6 list-item 6 run-in 6 inline-bloc( 6 table 6 inline-table 6 table-ro@-

group 6 table-header-group 6 table-'ooter-group 6 table-ro@ 6 table-column-group 6 table-

column 6 table-cell 6 table-caption 6inheritSe aplica a Todos los elementosValor inicial inlineDescripción +ermite controlar la 'orma de visuali1ar un elemento e incluso ocultarlo

Las posi ilidades de la propiedad + %la son mucho m!s a#an+adas %ue simplementeocultar elementos. 6n realidad$ la propiedad + %la modifica la forma en la %ue se#isuali+a un elemento.

Los #alores m!s utili+ados son l $:l#4 y # . 6l #alor :l#4 muestra un elementocomo si fuera un elemento de lo%ue$ independientemente del tipo de elemento %ue setrate. 6l #alor l #isuali+a un elemento en forma de elemento en línea$independientemente del tipo de elemento %ue se trate.6l #alor # oculta un elemento y hace %ue desapare+ca de la p!gina. 6l resto deelementos de la p!gina se #isuali+an como si no e-istiera el elemento oculto$ es decir$pueden ocupar el espacio en el %ue se de ería #isuali+ar el elemento.6l siguiente ejemplo muestra el uso de la propiedad + %la para mostrar un elemento de

lo%ue como si fuera un elemento en línea y para mostrar un elemento en línea como sifuera un elemento de lo%ue,






Figura 3.)) 6jemplo de propiedad display

Las reglas CSS del ejemplo anterior son las siguientes,<+ 2,DI? #rmal< / + 2,

<+ 2 t l "+ %la & l ",DI? 4# + %la & l < / + 2,

<a hr ; "S" ,E la4 #rmal< / a,

<a hr ; "S" t l "+ %la &:l#4 " ,E la4 4# + %la &:l#4 < / a,

Como se #er! m!s adelante$ la propiedad + %la & l se puede utili+ar en las listas' < l, $<#l, ) %ue se %uieren mostrar hori+ontalmente y la propiedad + %la & :l#4 seemplea frecuentemente para los enlaces %ue forman el menD de na#egación.:or su parte$ la definición completa de la propiedad 2 : l t es mucho m!s sencilla,Propiedad visi!ilit*Valores visible 6 hidden 6 collapse 6 inheritSe aplica a Todos los elementosValor inicial visibleDescripción +ermite hacer visibles e invisibles a los elementos

Las posi ilidades de la propiedad 2 : l t son mucho m!s limitadas %ue las de lapropiedad + %la $ ya %ue sólo permite hacer #isi les o in#isi les a los elementos de lap!gina.7nicialmente todas las cajas %ue componen la p!gina son #isi les. 6mpleando el#alor h ++ es posi le con#ertir una caja en in#isi le para %ue no muestre sus

contenidos. 6l resto de elementos de la p!gina se muestran como si la caja toda#ía fuera#isi le$ por lo %ue en el lugar donde originalmente se mostra a la caja in#isi le$ ahora se





muestra un hueco #acío.:or Dltimo$ el #alor 4#lla% de la propiedad 2 : l t sólo se puede utili+ar en lasfilas$ grupos de filas$ columnas y grupos de columnas de una ta la. Su efecto es similar alde la propiedad + %la $ ya %ue oculta completamente la fila y&o columna y se puedenmostrar otros contenidos en ese lugar. Si se utili+a el #alor 4#lla% so re cual%uier otrotipo de elemento$ su efecto es id(ntico al #alor h ++ .

3. .). 9elación entre displa5> float 5 position

Cuando se esta lecen las propiedades + %la $;l#at y %# t # so re una misma caja$su interpretación es la siguiente,%#Si + %la #ale # $ se ignoran las propiedades ;l#at y %# t # y la caja no se

muestra en la p!gina.

#Si %# t # #ale a: #l t o ; * + $ la caja se posiciona de forma a soluta$ se considera

%ue ;l#at #ale # y la propiedad + %la #ale :l#4 tanto para los elementos en línea

como para los elementos de lo%ue. La posición de la caja se determina mediante el #alor

de las propiedades t#%$r (ht $:#tt#m y l ;t .

?#6n cual%uier otro caso$ si ;l#at tiene un #alor distinto de # $ la caja se posiciona de

forma flotante y la propiedad + %la #ale :l#4 tanto para los elementos en línea como

para los elementos de lo%ue.

3. .,. 8ropiedad overflo:

Iormalmente$ los contenidos de un elemento se pueden mostrar en el espacio reser#adopara ese elemento. Sin em argo$ en algunas ocasiones el contenido de un elemento noca e en el espacio reser#ado para ese elemento y se des orda.La situación m!s ha itual en la %ue el contenido so resale de su espacio reser#ado escuando se esta lece la anchura y&o altura de un elemento mediante la propiedad ' +th y&oh (ht . Btra situación ha itual es la de las líneas muy largas contenidas dentro de un

elemento <%r , $ %ue hacen %ue la p!gina entera sea demasiado ancha.CSS define la propiedad #2 r;l#' para controlar la forma en la %ue se #isuali+an loscontenidos %ue so resalen de sus elementos.Propiedad over)lo$Valores visible 6 hidden 6 scroll 6 auto 6 inheritSe aplica a lementos de blo.ue y celdas de tablasValor inicial visibleDescripción +ermite controlar los contenidos sobrantes de un elemento

Los #alores de la propiedad #2 r;l#' tienen el siguiente significado,• 2 :l , el contenido no se corta y se muestra so resaliendo la +ona reser#ada para

#isuali+ar el elemento. 6ste es el comportamiento por defecto.





• h ++ , el contenido so rante se oculta y sólo se #isuali+a la parte del contenido %ue

ca e dentro de la +ona reser#ada para el elemento.• 4r#ll , solamente se #isuali+a el contenido %ue ca e dentro de la +ona reser#ada para el

elemento$ pero tam i(n se muestran arras de scroll %ue permiten #isuali+ar el resto del

contenido.• a t# , el comportamiento depende del na#egador$ aun%ue normalmente es el mismo %ue

la propiedad 4r#ll .

La siguiente imagen muestra un ejemplo de los tres #alores típicos de lapropiedad #2 r;l#' ,

Figura 3.), 6jemplo de propiedad o#erflo"

6l código HTML y CSS del ejemplo anterior se muestran a continuación,+ 2 A + %la & l 5

;l#at & l ;t 5 mar( & 1 m5 %a++ (& .3 m 5 :#r+ r & @%* #l + S777 5 ' +th & 100%* 5 h (ht & 170%* 5 ;# t & 1 m r al H l2 t 4a a - r ; 5

<+ 2, <h1, #2 r;l#' & 2 :l </h1 , L#r m % m +#l#r t am t 4# 4t t r



a+ % 4 ( l t. Cra 2 ta +#l#r m + ( m la4 a. Ma 4 a:la + t. M#r: m .</+ 2 ,

<+ 2 t l "#2 r;l#'&h ++ " , <h1, #2 r;l#' & h ++ </h1 , L#r m % m +#l#r

t am t 4# 4t t r a+ % 4 ( l t. Cra 2 ta +#l#r m + ( m

la4 a. Ma 4 a :la + t. M#r: m .</+ 2 ,

<+ 2 t l "#2 r;l#'& 4r#ll" , <h1, #2 r;l#' & 4r#ll</h1 , L#r m % m +#l#r t

am t 4# 4t t r a+ % 4 ( l t. Cra 2 ta +#l#r m + ( mla4 a.

Ma 4 a :la + t. M#r: m .</+ 2 ,

3. . . 8ropiedad 2Ainde+

*dem!s de posicionar una caja de forma hori+ontal y #ertical$ CSS permite controlar laposición tridimensional de las cajas posicionadas. 5e esta forma$ es posi le indicar lascajas %ue se muestran delante o detr!s de otras cajas cuando se producensolapamientos.La posición tridimensional de un elemento se esta lece so re un tercer eje llamado y secontrola mediante la propiedad =- + *. tili+ando esta propiedad es posi le crearp!ginas complejas con #arios ni#eles o capas.

* continuación se muestra la definición formal de la propiedad =- + *,Propiedad ,'inde-Valores auto 6 numero 6 inheritSe aplica a lementos .ue han sido posicionados e!pl7citamenteValor inicial autoDescripción stablece el nivel tridimensional en el .ue se muestra el elemento

6l #alor m!s comDn de la propiedad =- + * es un nDmero entero. *un%ue laespecificación oficial permite los nDmeros negati#os$ en general se considera el nDmero 0 como el ni#el m!s ajo.Cuanto m!s alto sea el #alor num(rico$ m!s cerca del usuario se muestra la caja. nelemento con =- + *& 10 se muestra por encima de los elementos con =- + *& 6 o=-

+ *& $ pero por de ajo de elementos con =- + *& @0 o =- + *& 70 .La siguiente imagen muestra un ejemplo de uso de la propiedad =- + *,





Figura 3.) 6jemplo de propiedad +Ginde-

6l código HTML y CSS del ejemplo anterior es el siguiente,+ 2 A %# t # & a: #l t 5

S4a8a1 A =- + *& 7 5 t#%& 1 m5 l ;t & 6 m5

S4a8a@ A =- + *& 17 5 t#%& 7 m5 l ;t & 7 m5

S4a8a3 A =- + *& @75 t#%& @ m5 l ;t & @ m5

<+ 2 + "4a8a1" , Ca8a 1 - Ca8a 1 - Ca8a 1 - Ca8a 1 - Ca8a 1 - Ca8a 1 -Ca8a 1 - Ca8a 1 - Ca8a 1 - Ca8a 1 - Ca8a 1 - Ca8a 1 - Ca8a 1 - Ca8a 1 -Ca8a 1 - Ca8a 1 - Ca8a 1 - Ca8a 1</+ 2 ,

<+ 2 + "4a8a@" , Ca8a @ - Ca8a @ - Ca8a @ - Ca8a @ - Ca8a @ - Ca8a @ -

Ca8a @ - Ca8a @ - Ca8a @ - Ca8a @ - Ca8a @ - Ca8a @ - Ca8a @ - Ca8a @ -

Ca8a @ - Ca8a @ - Ca8a @ - Ca8a @</+ 2 ,

<+ 2 + "4a8a3" , Ca8a 3 - Ca8a 3 - Ca8a 3 - Ca8a 3 - Ca8a 3 - Ca8a 3 -

Ca8a 3 - Ca8a 3 - Ca8a 3 - Ca8a 3 - Ca8a 3 - Ca8a 3 - Ca8a 3 - Ca8a 3 -

Ca8a 3 - Ca8a 3 - Ca8a 3 - Ca8a 3</+ 2 ,

La propiedad =- + * sólo tiene efecto en los elementos posicionados$ por lo %ue eso ligatorio %ue la propiedad =- + * #aya acompa/ada de la propiedad %# t # . Side es posicionar un elemento pero no %uieres mo#erlo de su posición original ni afectar alresto de elementos de la p!gina$ puedes utili+ar el posicionamiento relati#o ' %# t # &r lat 2 ).



Capítulo @. %e+to

(.1. %ipograf a

CSS define numerosas propiedades para modificar la apariencia del te-to. * pesar de %ueno dispone de tantas posi ilidades como los lenguajes y programas específicos para crear documentos impresos$ CSS permite aplicar estilos complejos y muy #ariados al te-to delas p!ginas "e .La propiedad !sica %ue define CSS relacionada con la tipografía se denomina 4#l#r y seutili+a para esta lecer el color de la letra.Propiedad colorValores color 6inheritSe aplica a Todos los elementosValor inicial epende del navegador Descripción stablece el color de letra utili1ado para el te!to

*un%ue el color por defecto del te-to depende del na#egador$ todos los na#egadoresprincipales utili+an el color negro. :ara esta lecer el color de letra de un te-to$ se puedeutili+ar cual%uiera de las cinco formas %ue incluye CSS para definir un color.

* continuación se muestran #arias reglas CSS %ue esta lecen el color del te-to dediferentes formas,h1 A 4#l#r & S3 5

% A 4#l#r & :la4 5 a %a A 4#l#r & SB1@71E5

+ 2 A 4#l#r & r(: F 1 6 1 G5

Como el #alor de la propiedad 4#l#r se hereda$ normalmente se esta lece la propiedad4#l#r en el elemento :#+ para esta lecer el color de letra de todos los elementos de lap!gina,:#+ A 4#l#r & S 5

6n el ejemplo anterior$ todos los elementos de la p!gina muestran el mismo color de letrasal#o %ue esta le+can de forma e-plícita otro color. La Dnica e-cepción de estecomportamiento son los enlaces %ue se crean con la eti%ueta <a, . *un%ue el color de laletra se hereda de los elementos padre a los elementos hijo$ con los enlaces no sucede lomismo$ por lo %ue es necesario indicar su color de forma e-plícita,/J E ta:l 4 l m m# 4#l#r a t#+# l# l m t# + la %>( a al2# l# la4 J/

:#+ A 4#l#r & S 5

/J E ta:l 4 l m m# 4#l#r a t#+# l# l m t# + la %>( a 4l +# l# la4 J/







:#+ a A 4#l#r & S 5

La otra propiedad !sica %ue define CSS relacionada con la tipografía se denomina ;# t-;am l y se utili+a para indicar el tipo de letra con el %ue se muestra el te-to.Propiedad )ont')a&il*Valores 33 nombre<'amilia 6 'amilia<generica 4 3,nombre<'amilia 6 'amilia<generica4A 4 6 inheritSe aplica a Todos los elementosValor inicial epende del navegador Descripción stablece el tipo de letra utili1ado para el te!to

6l tipo de letra del te-to se puede indicar de dos formas diferentes,• Mediante el nom re de una familia tipogr!fica, en otras pala ras$ mediante el nom re del

tipo de letra$ como por ejemplo A*rialA$ A erdanaA$ A aramondA$ etc.• Mediante el nom re gen(rico de una familia tipogr!fica, los nom res gen(ricos no se

refieren a ninguna fuente en concreto$ sino %ue hacen referencia al estilo del tipo de letra.

Las familias gen(ricas definidas son r ; 'tipo de letra similar a Times ,e* oman )$

a - r ; 'tipo .rial )$4 r 2 'tipo Comic Sans )$;a ta 'tipo /mpact ) y m# # %a4 'tipo

Courier ,e* ).

Los na#egadores muestran el te-to de las p!ginas "e utili+ando los tipos de letrainstalados en el ordenador o dispositi#o del propio usuario. 5e esta forma$ si el dise/adorindica en la propiedad ;# t-;am l %ue el te-to de e mostrarse con un tipo de letraespecialmente raro o re uscado$ casi ningDn usuario dispondr! de ese tipo de letra.:ara e#itar el pro lema comDn de %ue el usuario no tenga instalada la fuente %ue %uiereutili+ar el dise/ador$ CSS permite indicar en la propiedad ;# t-;am l m!s de un tipo deletra. 6l na#egador pro ar! en primer lugar con el primer tipo de letra indicado. Si elusuario la tiene instalada$ el te-to se muestra con ese tipo de letra.Si el usuario no dispone del primer tipo de letra indicado$ el na#egador ir! pro ando con elresto de tipos de letra hasta %ue encuentre alguna fuente %ue est( instalada en elordenador del usuario. 6#identemente$ el dise/ador no puede indicar para cada propiedad

;# t-;am l tantos tipos de letra como posi les fuentes parecidas e-istan.:ara solucionar este pro lema se utili+an las familias tipogr!ficas gen(ricas. Cuando lapropiedad ;# t-;am l toma un #alor igual a a - r ; $ el dise/ador no indica alna#egador %ue de e utili+ar la fuente *rial$ sino %ue de e utili+ar "la fuente !ue más se

pare%ca a .rial de todas las !ue tiene instaladas el usuario" .:or todo ello$ el #alor de ;# t-;am l suele definirse como una lista de tipos de letraalternati#os separados por comas. 6l Dltimo #alor de la lista es el nom re de la familiatipogr!fica gen(rica %ue m!s se parece al tipo de letra %ue se %uiere utili+ar.

Las listas de tipos de letra m!s utili+adas son las siguientes,;# t-;am l & r al H l2 t 4a a - r ; 5;# t-;am l & "T m $ ' )#ma " T m r ; 5





;# t-;am l & "C# r r $ '" C# r r m# # %a4 5;# t-;am l & ] #r( a "T m $ ' )#ma " T m r ; 5

;# t-;am l & ? r+a a r al H l2 t 4a a - r ; 5

a %ue las fuentes %ue se utili+an en la p!gina de en estar instaladas en el ordenador delusuario$ cuando se %uiere disponer de un dise/o complejo con fuentes muy especiales$ sede e recurrir a soluciones alternati#as.La solución m!s sencilla consiste en crear im!genes en las %ue se muestra el te-to con lafuente deseada. 6sta t(cnica solamente es #ia le para te-tos cortos 'por ejemplo lostitulares de una p!gina) y puede ser manual 'creando las im!genes una por una) oautom!tica$ utili+ando Ra#aScript$ :H: y&o CSS.Btra alternati#a es la de la sustitución autom!tica de te-to asada en Elash. La t(cnicam!s conocida es la de s7EF$ de la %ue se puede encontrar m!s información en

http,&&"i<i.no#em er orn.net&sifr na #e+ seleccionado el tipo de letra$ se puede modificar su tama/o mediante la

propiedad ;# t- = .Propiedad )ont'si,eValores tamaBo<absoluto 6 tamaBo<relativo 6 unidad de medida 6 porcenta2e 6 inheritSe aplica a Todos los elementosValor inicial mediumDescripción stablece el tamaBo de letra utili1ado para el te!to

*dem!s de todas las unidades de medida relati#as y a solutas y el uso de porcentajes$CSS permite utili+ar una serie de pala ras cla#e para indicar el tama/o de letra del te-to,• tama # a: #l t# , indica el tama/o de letra de forma a soluta mediante alguna de las

siguientes pala ras cla#e, **- mall $*- mall $ mall $m + m$lar( $*-lar( $**-lar( .

• tama # r lat 2# , indica de forma relati#a el tama/o de letra del te-to mediante dos

pala ras cla#e ' lar( r $ mall r ) %ue toman como referencia el tama/o de letra del

elemento padre.

La siguiente imagen muestra una comparación entre los tama/os típicos del te-to y lasunidades %ue m!s se utili+an,












Figura (.1 Comparación #isual de las distintas unidades para indicar el tama/o del te-to

CSS recomienda indicar el tama/o del te-to en la unidad m o en porcentaje ' ). *dem!s$es ha itual indicar el tama/o del te-to en puntos ' %t) cuando el documento est!específicamente dise/ado para imprimirlo.:or defecto los na#egadores asignan los siguientes tama/os a los títulos de sección, <h1, O **-lar( $<h@, O *-lar( $<h3, O lar( $<hR, O m + m$<h7, O mall $<h , O **- mall .

na #e+ indicado el tipo y el tama/o de letra$ es ha itual modificar otras característicascomo su grosor 'te-to en negrita) y su estilo 'te-to en cursi#a). La propiedad %ue controlala anchura de la letra es ;# t-' (ht .

Propiedad )ont'$eig%tValores

normal 6 bold 6 bolder 6 lighter 6 %$$ 6 $$ 6 ?$$ 6 9$$ 6 5$$ 6 $$ 6 "$$ 6 8$$ 6 D$$ 6

inheritSe aplica a Todos los elementosValor inicial normalDescripción stablece la anchura de la letra utili1ada para el te!to

Los #alores %ue normalmente se utili+an son #rmal 'el #alor por defecto) y :#l+ para loste-tos en negrita. 6l #alor #rmal e%ui#ale al #alor num(rico R00 y el #alor :#l+ al #alornum(rico 00.6l siguiente ejemplo muestra una aplicación pr!ctica de la propiedad ;# t-' (ht ,





Figura (.) 6jemplo de propiedad fontG"eight

:or defecto$ los na#egadores muestran el te-to de los elementos < m, en cursi#a y elte-to de los elementos < tr# (, en negrita. La propiedad ;# t-' (ht permite alterar eseaspecto por defecto y mostrar por ejemplo los elementos < m, como cursi#a y negrita y loselementos < tr# (, destacados mediante un color de fondo y sin negrita.Las reglas CSS del ejemplo anterior se muestran a continuación,S % 4 al m A ;# t-' (ht& :#l+5

S % 4 al tr# ( A ;# t-' (ht& #rmal5 :a4 (r# +-4#l#r& SZZZZ 5 %a++ (& @%*5

<%,L#r m % m +#l#r t am t 4# 4t t r a+ % 4 ( l t. Ut % r a4 < m,l : r# # mm 2 t : l m< / m,. $ llam m#l t 4 +

# mm la#r t < tr# ( ,t#rt#r + am m#ll l t< / tr# ( , h +r r tl : r# l#r m 2 ta 4.< / %,

<% + " % 4 al" ,L#r m % m +#l#r t am t 4# 4t t r a+ % 4 ( l t.

Ut % r a4 < m,l : r# # mm 2 t : l m< / m,. $ llam m#l t 4 +

# mm la#r t < tr# ( ,t#rt#r + am m#ll l t< / tr# ( , h +r r t

l : r# l#r m 2 ta 4.< / %,

*dem!s de la anchura de la letra$ CSS permite #ariar su estilo mediante lapropiedad ;# t- t l .



Propiedad )ont'st*leValores normal 6 italic 6 obli.ue 6 inheritSe aplica a Todos los elementosValor inicial normalDescripción stablece el estilo de la letra utili1ada para el te!to

Iormalmente la propiedad ;# t- t l se emplea para mostrar un te-to en cursi#amediante el #alor tal 4 .6l ejemplo anterior se puede modificar para personali+ar aun m!s el aspecto por defectode los elementos < m, y < tr# (, ,

Figura (., 6jemplo de propiedad fontGstyle

*hora$ el te-to del elemento < m, se muestra como un te-to en negrita y el te-to delelemento < tr# (, se muestra como un te-to en cursi#a con un color de fondo muydestacado.6l Dnico cam io necesario en las reglas CSS anteriores es el de a/adir la propiedad ;# t-

t l ,S % 4 al m A ;# t-' (ht & :#l+ 5 ;# t- t l & #rmal 5

S % 4 al tr# ( A ;# t-' (ht & #rmal 5 ;# t- t l & tal 4 5 :a4 (r# +-4#l#r &SZZZZ 5 %a++ (& @%*5

:or Dltimo$ CSS permite otra #ariación en el estilo del tipo de letra$ controlado mediante la





propiedad ;# t-2ar a t .Propiedad )ont'variantValores normal 6 small-caps 6 inheritSe aplica a Todos los elementosValor inicial normalDescripción stablece el estilo alternativo de la letra utili1ada para el te!to

La propiedad ;# t-2ar a t no se suele emplear ha itualmente$ ya %ue sólo permitemostrar el te-to con letra versal 'mayDsculas pe%ue/as).Siguiendo con el ejemplo anterior$ se ha aplicado la propiedad ;# t-2ar a t& mall-4a% al segundo p!rrafo de te-to,

Figura (. 6jemplo de propiedad fontG#ariant

:ara este Dltimo ejemplo$ solamente es necesario a/adir una regla a los estilos CSS,S % 4 al A ;# t-2ar a t & mall-4a% 5

:or otra parte$ CSS proporciona una propiedad tipo "shorthand" denominada ;# t y %uepermite indicar de forma directa algunas o todas las propiedades de la tipografía de unte-to.Propiedad )ontValores

3 3 'ont-style 66 'ont-variant 66 'ont-@eight 4= 'ont-si1e 3 E line-height 4= 'ont-'amily 4 6

caption 6 icon 6 menu 6 message-bo! 6 small-caption 6 status-bar 6 inheritSe aplica a Todos los elementosValor inicial -Descripción +ermite indicar de 'orma directa todas las propiedades de la tipogra'7a de un te!to

6l orden en el %ue se de en indicar las propiedades del te-to es el siguiente,• 6n primer lugar y de forma opcional se indican el ;# t- t l $;# t-2ar a t y;# t-







' (ht en cual%uier orden.• * continuación$ se indica o ligatoriamente el #alor de ;# t- = seguido opcionalmente

por el #alor de l -h (ht .• :or Dltimo$ se indica o ligatoriamente el tipo de letra a utili+ar.

6jemplos de uso de la propiedad ;# t ,;# t & /1R0 ? r+a a r al H l2 t 4a a - r ; 5

;# t & #rmal @R%*/@ %*"C t r ]#th 4" "Tr : 4h t M9" r al H l2 t 4a a -

r ; 5 ;# t & #rmal . R m "Tr : 4h t M9" r al H l2 t 4a a - r ; 5

;# t & :#l+ 1 m "Tr : 4h t M9" r al 9a -9 r ; 5;# t & #rmal 0. m "L 4 +a ]ra + " ? r+a a r al H l2 t 4a a - r ; 5

;# t & #rmal 1.@ m/1 m h l2 t 4a ar al a - r ; 5

;# t & 11%* 2 r+a a a - r ; 5

;# t & #rmal 1.R m/1. m "h l2 t 4a" ar al a - r ; 5;# t & :#l+ 1R%* ( #r( a t m r ; 5

*un%ue su uso no es muy comDn$ la propiedad ;# t tam i(n permite indicar el tipo deletra a utili+ar mediante una serie de pala ras cla#e, 4a%t # $ 4# $m $m a( -:#* $ mall-4a%t # $ tat -:ar .Si por ejemplo se utili+a la pala ra tat -:ar $ el na#egador muestra el te-to con el

mismo tipo de letra %ue la %ue utili+a el sistema operati#o para mostrar los te-tos de laarra de estado de las #entanas. La pala ra 4# se puede utili+ar para mostrar el te-to

con el mismo tipo de letra %ue utili+a el sistema operati#o para mostrar el nom re de losiconos y así sucesi#amente.E4ercicio ;

er enunciado

@.0. %e+to *dem!s de las propiedades relati#as a la tipografía del te-to$ CSS define numerosaspropiedades %ue determinan la apariencia del te-to en su conjunto. 6stas propiedadesadicionales permiten controlar al alineación del te-to$ el interlineado$ la separación entrepala ras$ etc.La propiedad %ue define la alineación del te-to se denomina t *t-al ( .Propiedad te-t'alignValores le't 6 right 6 center 6 2usti'y 6 inherit

Se aplica a lementos de blo.ue y celdas de tablaValor inicial le'tDescripción stablece la alineación del contenido del elemento







Los #alores definidos por CSS permiten alinear el te-to segDn los #alores tradicionales, ala i+%uierda ' l ;t )$ a la derecha ' r (ht )$ centrado ' 4 t r ) y justificado ' 8 t ; ).La siguiente imagen muestra el efecto de esta lecer el #alor l ;t $r (ht $4 t r y8 t ; respecti#amente a cada uno de los p!rrafos de la p!gina.

Figura (.3 6jemplo de propiedad te-tGalign

La propiedad t *t-al ( no sólo alinea el te-to %ue contiene un elemento$ sino %uetam i(n alinea todos sus contenidos$ como por ejemplo las im!genes.6l interlineado de un te-to se controla mediante la propiedad l -h (ht $ %ue permitecontrolar la altura ocupada por cada línea de te-to,Propiedad line'%eig%tValores normal 6 numero 6 unidad de medida 6 porcenta2e 6 inheritSe aplica a Todos los elementosValor inicial normalDescripción +ermite establecer la altura de l7nea de los elementos

*dem!s de todas las unidades de medida y el uso de porcentajes$ la propiedad l -h (ht permite indicar un nDmero sin unidades %ue se interpreta como el mDltiplo deltama/o de letra del elemento. :or tanto$ estas tres reglas CSS son e%ui#alentes,% A l -h (ht & 1.@ 5 ;# t- = & 1 m

% A l -h (ht & 1.@ m5 ;# t- = & 1 m

% A l -h (ht & 1@0 5 ;# t- = & 1 m

Siempre %ue se utilice de forma moderada$ el interlineado mejora nota lemente lalegi ilidad de un te-to$ como se puede o ser#ar en la siguiente imagen,












Figura (.( 6jemplo de propiedad lineGheight

*dem!s de la decoración %ue se puede aplicar a la tipografía %ue utili+an los te-tos$ CSSdefine otros estilos y decoraciones para el te-to en su conjunto. La propiedad %ue decorael te-to se denomina t *t-+ 4#rat # .

Propiedad te-t'decorationValores none 6 3 underline 66 overline 66 line-through 66 blin( 4 6inheritSe aplica a Todos los elementosValor inicial noneDescripción stablece la decoración del te!to 3subrayado, tachado, parpadeante, etc#4

6l #alor + rl su raya el te-to$ por lo %ue puede confundir a los usuarios haci(ndolescreer %ue se trata de un enlace. 6l #alor #2 rl a/ade una línea en la parte superior delte-to$ un aspecto %ue raramente es desea le. 6l #alor l -thr# (h muestra el te-totachado con una línea continua$ por lo %ue su uso tampoco es muy ha itual. :or Dltimo$ el#alor :l muestra el te-to parpadeante y se recomienda e#itar su uso por las molestias%ue genera a la mayoría de usuarios.

na de las propiedades de CSS m!s desconocidas y %ue puede ser de gran utilidad enalgunas circunstancias es la propiedad t *t-tra ;#rm $ %ue puede #ariar de formasustancial el aspecto del te-to.Propiedad te-t'trans)or&Valores capitali1e 6 uppercase 6 lo@ercase 6 none 6 inherit







Propiedad te-t'trans)or&Se aplica a Todos los elementosValor inicial noneDescripción Trans'orma el te!to original 3lo trans'orma a mayFsculas, a minFsculas, etc#4

La propiedad t *t-tra ;#rm permite mostrar el te-to original transformado en un te-tocompletamente en mayDsculas ' %% r4a )$ en minDsculas ' l#' r4a ) o con la primeraletra de cada pala ra en mayDscula ' 4a% tal = ).La siguiente imagen muestra cada uno de los posi les #alores,

Figura (.; 6jemplo de propiedad te-tGtransform

Las reglas CSS del ejemplo anterior se muestran a continuación,<+ 2 t l "t *t-tra ;#rm& # " ,< h1,Or ( al< / h1,L#r m % m +#l#r

t am t...< / + 2,

<+ 2 t l "t *t-tra ;#rm& 4a% tal = " ,< h1,t *t-tra ;#rm& 4a% tal = < / h1,

L#r m % m +#l#r t am t...< / + 2,

<+ 2 t l "t *t-tra ;#rm& l#' r4a " ,< h1,t *t-tra ;#rm& l#' r4a < / h1,

L#r m % m +#l#r t am t...< / + 2,

<+ 2 t l "t *t-tra ;#rm& %% r4a " ,< h1,t *t-tra ;#rm& %% r4a < / h1,



L#r m % m +#l#r t am t...< / + 2,

no de los principales pro lemas del dise/o de documentos y p!ginas mediante CSSconsiste en la alineación #ertical en una misma línea de #arios elementos diferentes comoim!genes y te-to. :ara controlar esta alineación$ CSS define la propiedad 2 rt 4al-al ( .Propiedad vertical'alignValores

baseline 6 sub 6 super 6 top 6 te!t-top 6 middle 6 bottom 6 te!t-bottom 6 porcenta2e 6unidad

de medida 6inheritSe aplica a lementos en l7nea y celdas de tablaValor inicial baselineDescripción etermina la alineación vertical de los contenidos de un elemento

* continuación se muestra una imagen con el aspecto %ue muestran los na#egadores

para cada uno de los posi les #alores de la propiedad 2 rt 4al-al ( ,

Figura (. 6jemplo de propiedad #erticalGalign

6l #alor por defecto es :a l y el #alor m!s utili+ado cuando se esta lece la propiedad2 rt 4al-al ( es m ++l .6n muchas pu licaciones impresas suele ser ha itual ta ular la primera línea de cadap!rrafo para facilitar su lectura. CSS permite controlar esta ta ulación mediante lapropiedad t *t- + t .Propiedad te-t'indentValores unidad de medida 6 porcenta2e 6inheritSe aplica a os elementos de blo.ue y las celdas de tabla


















Propiedad te-t'indentValor inicial $Descripción Tabula desde la i1.uierda la primera l7nea del te!to original

La siguiente imagen muestra la comparación entre un te-to largo formado por #arios

p!rrafos sin ta ular y el mismo te-to con la primera línea de cada p!rrafo ta ulada,

Figura (.< 6jemplo de propiedad te-tGindent

CSS tam i(n permite controlar la separación entre las letras %ue forman las pala ras y laseparación entre las pala ras %ue forman los te-tos. La propiedad %ue controla laseparación entre letras se llama l tt r- %a4 ( y la separación entre pala ras secontrola mediante '#r+- %a4 ( .

Propiedad letter'spacingValores normal 6 unidad de medida 6inheritSe aplica a Todos los elementosValor inicial normalDescripción +ermite establecer el espacio entre las letras .ue 'orman las palabras del te!to

Propiedad $ord'spacingValores normal 6 unidad de medida 6inheritSe aplica a Todos los elementosValor inicial normalDescripción +ermite establecer el espacio entre las palabras .ue 'orman el te!to

La siguiente imagen muestra la comparación entre un te-to normal y otro con laspropiedades l tt r- %a4 ( y '#r+- %a4 ( aplicadas,













Figura (.1= 6jemplo de propiedades letterGspacing y "ordGspacing

Las reglas CSS del ejemplo anterior se muestran a continuación,. % 4 al h1 A l tt r- %a4 (& .@ m5 . % 4 al % A '#r+- %a4 (& .7 m5

<+ 2,< h1,L#r m % m +#l#r t am t< / h1,

<%,L#r m % m +#l#r t am t 4# 4t t r a+ % 4 ( l t. ? t : l m+ 4t m. Cla a%t t ta4 t #4 # a+ l t#ra t#r t % r 4# : a # tra

% r 4 %t# h m a # . Et am %har tra :la + t % r .< / %,

...

</ + 2,

<+ 2 4la " % 4 al" ,< h1,L#r m % m +#l#r t am t< / h1,<%,L#r m % m +#l#r t am t 4# 4t t r a+ % 4 ( l t. ? t : l m

+ 4t m. Cla a%t t ta4 t #4 # a+ l t#ra t#r t % r 4# : a # tra% r 4 %t# h m a # . Et am %har tra :la + t % r .< / %,

...

</ + 2,

Cuando se utili+a un #alor num(rico en las propiedades l tt r- %a4 ( y '#r+- %a4 ( $se interpreta como la separación adicional %ue se a/ade 'si el #alor es positi#o) o se %uita

'si el #alor es negati#o) a la separación por defecto entre letras y pala rasrespecti#amente.



Como ya se sa e$ el tratamiento %ue hace HTML de los espacios en lanco es uno de losaspectos m!s difíciles de comprender cuando se empie+an a crear las primeras p!ginas"e . =!sicamente$ HTML elimina todos los espacios en lanco so rantes$ es decir$ todossal#o un espacio en lanco entre cada pala ra.:ara for+ar los espacios en lanco adicionales se de e utili+ar la entidad HTML \ : %5 ypara for+ar nue#as líneas$ se utili+a el elemento <:r/, . *dem!s$ HTML proporciona elelemento <%r , %ue muestra el contenido tal y como se escri e$ respetando todos losespacios en lanco y todas las nue#as líneas.CSS tam i(n permite controlar el tratamiento de los espacios en lanco de los te-tosmediante la propiedad 'h t - %a4 .Propiedad $%ite'spaceValores normal 6 pre 6 no@rap 6 pre-@rap 6 pre-line 6 inheritSe aplica a Todos los elementosValor inicial normalDescripción stablece el tratamiento de los espacios en blanco del te!to

6l significado de cada uno de los #alores es el siguiente,• #rmal , comportamiento por defecto de HTML.

• %r , se respetan los espacios en lanco y las nue#as líneas 'e-actamente igual %ue la

eti%ueta <%r , ). Si la línea es muy larga$ se sale del espacio asignado para ese

contenido.•

#'ra% , elimina los espacios en lanco y las nue#as líneas. Si la línea es muy larga$ sesale del espacio asignado para ese contenido.• %r -'ra% , se respetan los espacios en lanco y las nue#as líneas$ pero ajustando cada

línea al espacio asignado para ese contenido.• %r -l , elimina los espacios en lanco y respeta las nue#as líneas$ pero ajustando

cada línea al espacio asignado para ese contenido.

6n la siguiente ta la se resumen las características de cada #alor,

Valor espeta espacios en !lanco espeta saltos de l nea A0usta las l neas#rmal no no si

%r si si no#'ra% no no no

%r -'ra% si si si%r -l no si si

La siguiente imagen muestra las diferencias entre los #alores permitidos para 'h t -%a4 . 6l p!rrafo original contiene espacios en lanco y nue#as líneas y se ha limitado la

anchura de su elemento contenedor,





Figura (.11 6jemplo de propiedad "hiteGspace

:or Dltimo$ CSS define unos elementos especiales llamados "pseudo-elementos" %uepermiten aplicar estilos a ciertas partes de un te-to. 6n concreto$ CSS permite definir

estilos especiales a la primera frase de un te-to y a la primera letra de un te-to.6l pseudoGelemento &; r t-l permite aplicar estilos a la primera línea de un te-to.Las pala ras %ue forman la primera línea de un te-to dependen del espacio reser#adopara mostrar el te-to o del tama/o de la #entana del na#egador$ por lo %ue CSS calculade forma autom!tica las pala ras %ue forman la primera línea de te-to en cada momento.La siguiente imagen muestra cómo aplica CSS los estilos indicados a la primera líneacalculando para cada anchura las pala ras %ue forman la primera línea,



Figura (.1) 6jemplo de pseudoGelemento firstGline

La regla CSS utili+ada para los p!rrafos del ejemplo se muestra a continuación,%&; r t-l A

t *t-tra ;#rm & %% r4a 5

5e la misma forma$ CSS permite aplicar estilos a la primera letra del te-to mediante elpseudoGelemento &; r t-l tt r . La siguiente imagen muestra el uso del pseudoGelemento &; r t-l tt r para crear una letra capital,



Figura (.1, 6jemplo de pseudoGelemento firstGletter

6l código HTML y CSS se muestra a continuación,S #rmal %&; r t-l tt r A ;# t- = & @ m5

Sa2a =a+# %&; r t-l tt r A ;# t- = & @.7 m5 ;# t-' (ht& :#l+5 l -h (ht& . m5 ;l#at& l ;t5 mar( & .1 m5

Sa2a =a+# %&; r t-l A ;# t-' (ht& :#l+5

<+ 2 + " #rmal" ,

<%,L#r m % m +#l#r t am t 4# 4t t r a+ % 4 ( l t. ? t : l m+ 4t m. Cla a%t t ta4 t #4 # a+ l t#ra t#r t % r 4# : a # tra

% r 4 %t# h m a # . Et am %har tra :la + t % r .< / %,</ + 2,

<+ 2 + "a2a =a+#" ,

<%,L#r m % m +#l#r t am t 4# 4t t r a+ % 4 ( l t. ? t : l m

+ 4t m. Cla a%t t ta4 t #4 # a+ l t#ra t#r t % r 4# : a # tra



% r 4 %t# h m a # . Et am %har tra :la + t % r .< / %,</ + 2,

Capítulo 3. Enlaces

;.1. Estilos !"sicos

;.1.1. %a a o> color 5 decoración

Los estilos m!s sencillos %ue se pueden aplicar a los enlaces son los %ue modifican sutama/o de letra$ su color y la decoración del te-to del enlace. tili+ando laspropiedades t *t-+ 4#rat # y ;# t-' (ht se pueden conseguir estilos como los %ue

se muestran en la siguiente imagen,

Figura ;.1 6jemplo de enlaces con estilos diferentes

* continuación se muestran las reglas CSS del ejemplo anterior,a A mar( & 1 m 0 5 + %la & :l#4 5

.alt r at 2# A4#l#r & SCC00005

. m%l At *t-+ 4#rat # & # 5

. m%#rta t A;# t-' (ht & :#l+ 5 ;# t- = & 1.3 m 5

.rar# At *t-+ 4#rat # &#2 rl 5

<a hr ; "S" , E la4 4# l t l# %#r + ; 4t#</a ,

<a 4la "alt r at 2#" hr ; "S" , E la4 + 4#l#r r#8#</a ,

<a 4la " m%l " hr ; "S" , E la4 :ra a+#</a ,

<a 4la " m%#rta t " hr ; "S" , E la4 m m%#rta t </a ,<a 4la "rar#" hr ; "S" , E la4 4# t l# rar#</a ,



;.1.). 8seudoAclases

CSS tam i(n permite aplicar diferentes estilos a un mismo enlace en función de suestado. 5e esta forma$ es posi le cam iar el aspecto de un enlace cuando por ejemplo elusuario pasa el ratón por encima o cuando el usuario pincha so re ese enlace.

Como con los atri utos + o 4la no es posi le aplicar diferentes estilos a un mismoelemento en función de su estado$ CSS introduce un nue#o concepto llamado pseudo-clases . 6n concreto$ CSS define las siguientes cuatro pseudoGclases,• &l $ aplica estilos a los enlaces %ue apuntan a p!ginas o recursos %ue aDn no han sido

#isitados por el usuario.• &2 t +$ aplica estilos a los enlaces %ue apuntan a recursos %ue han sido #isitados

anteriormente por el usuario. 6l historial de enlaces #isitados se orra autom!ticamente

cada cierto tiempo y el usuario tam i(n puede orrarlo manualmente.• &h#2 r$ aplica estilos al enlace so re el %ue el usuario ha posicionado el puntero del

ratón.• &a4t 2 $ aplica estilos al enlace %ue est! pinchando el usuario. Los estilos sólo se

aplican desde %ue el usuario pincha el otón del ratón hasta %ue lo suelta$ por lo %ue

suelen ser unas pocas d(cimas de segundo.

Como se sa e$ por defecto los na#egadores muestran los enlaces no #isitados de color

a+ul y su rayados y los enlaces #isitados de color morado. Las pseudoGclases anteriorespermiten modificar completamente ese aspecto por defecto y por eso casi todas lasp!ginas las utili+an.6l siguiente ejemplo muestra cómo ocultar el su rayado cuando el usuario pasa el ratónpor encima de cual%uier enlace de la p!gina,a&h#2 r A t *t-+ 4#rat # & # 5

*plicando las reglas anteriores$ los na#egadores ocultan el su rayado del enlace so re el%ue se posiciona el ratón,



Figura ;.) Bcultando el su rayado de los enlaces al pasar el ratón por encima

Las pseudoGclases siempre incluyen dos puntos ' &) por delante de su nom re y siemprese a/aden a continuación del elemento al %ue se aplican$ sin dejar ningDn espacio en

lanco por delante,/J I 4#rr 4t#& l #m:r + la % +#-4la # % + %arar + l# +#% t# 4 al J/

a& 2 t + A ...

/J I 4#rr 4t#& la % +#-4la m%r a a+ a 4# t a4 [ + l l m t#

al m#+ ; 4a J/a &2 t + A ...

/J C#rr 4t#& la % +#-4la m#+ ; 4a l 4#m%#rtam t# + l l m t# <a, J/a&2 t + A ...

Las pseudoGclases tam i(n se pueden com inar con cual%uier otro selector complejo,a. m%#rta t &2 t + A ...

aS%r 4 %al&h#2 r A ...+ 2Sm l l a.%r m r#&a4t 2 A ...

Cuando se aplican #arias pseudoGclases diferentes so re un mismo enlace$ se producencolisiones entre los estilos de algunas pseudoGclases. Si se pasa por ejemplo el ratón porencima de un enlace #isitado$ se aplican los estilos de las pseudoGclases &h#2 r y&2 t +. Si el usuario pincha so re un enlace no #isitado$ se aplican las pseudoGclases&h#2 r$&l y &a4t 2 y así sucesi#amente.Si se definen #arias pseudoGclases so re un mismo enlace$ el Dnico orden %ue asegura%ue todos los estilos de las pseudoGclases se aplican de forma coherente es el siguiente,&l $&2 t +$&h#2 r y &a4t 2 . 5e hecho$ en muchas hojas de estilos es ha itual



esta lecer los estilos de los enlaces de la siguiente forma,a&l a&2 t + A ...

a&h#2 r a&a4t 2 A ...

Las pseudoGclases &l y &2 t + solamente est!n definidas para los enlaces$ pero laspseudoGclases &h#2 r y &a4t 2 se definen para todos los elementos HTML.5esafortunadamente$ 7nternet 6-plorer @ y sus #ersiones anteriores solamente lassoportan para los enlaces.

Tam i(n es posi le com inar en un mismo elemento las pseudoGclases %ue soncompati les entre sí,/J L# t l# a%l 4a 4 a +# l ar # %a a l rat[ %#r 4 ma +

la4 t#+a2Ka # ha 2 ta+# J/

a&l &h#2 r A ...

/J L# t l# a%l 4a 4 a +# l ar # %a a l rat[ %#r 4 ma +

la4 ha 2 ta+# %r 2 am t J/

a&2 t +&h#2 r A ...

E4ercicio

er enunciado

3.0. Estilos avan2ados

;.).1. *ecoración personali2ada

La propiedad t *t-+ 4#rat # permite a/adir o eliminar el su rayado de los enlaces. Sinem argo$ el aspecto del su rayado lo controla autom!ticamente el na#egador$ por lo %uesu color siempre es el mismo %ue el del te-to del enlace y su anchura es proporcional altama/o de letra.Io o stante$ utili+ando la propiedad :#r+ r-:#tt#m es posi le a/adir cual%uier tipo desu rayado para los enlaces de las p!ginas. 6l siguiente ejemplo muestra algunos enlacescon el su rayado personali+ado,





Figura ;., 6nlaces con su rayado personali+ado mediante la propiedad order

Las reglas CSS definidas en el ejemplo anterior se muestran a continuación,a A mar( & 1 m 0 5 ;l#at & l ;t 5 4l ar & l ;t 5 t *t-+ 4#rat # & # 5. m%l At *t-+ 4#rat # & + rl 5

.4#l#r A :#r+ r-:#tt#m & m + m #l + SCC00005

.a 4h# A:#r+ r-:#tt#m & th 4 #l + 5

. %ara+# A:#r+ r-:#tt#m & 1%* #l + 5 %a++ (-:#tt#m & . m 5

.+ 4# t # A:#r+ r-:#tt#m & th +a h +5

<a 4la " m%l " hr ; "S" , E la4 4# l t l# %#r + ; 4t#</a ,

<a 4la "4#l#r" hr ; "S" , E la4 :ra a+# + #tr# 4#l#r</a ,

<a 4la "a 4h#" hr ; "S" , E la4 4# :ra a+# m a 4h#</a ,

<a 4la " %ara+#" hr ; "S" , E la4 4# :ra a+# m %ara+#</a ,

<a 4la "+ 4# t #" hr ; "S" , E la4 4# :ra a+# + 4# t #</a ,

;.).). I "genes seg n el tipo de enlace

6n ocasiones$ puede resultar Dtil incluir un pe%ue/o icono al lado de un enlace paraindicar el tipo de contenido %ue enla+a$ como por ejemplo un archi#o comprimido o undocumento con formato :5E.6ste tipo de im!genes son puramente decorati#as en #e+ de im!genes de contenido$ por



lo %ue se de erían a/adir con CSS y no con elementos de tipo < m(, . tili+ando lapropiedad :a4 (r# + 'y :a4 (r# +- ma( ) se puede personali+ar el aspecto de losenlaces para %ue incluyan un pe%ue/o icono a su lado.La t(cnica consiste en mostrar una imagen de fondo sin repetición en el enlace y a/adir el%a++ ( necesario al te-to del enlace para %ue no se solape con la imagen de fondo.6l siguiente ejemplo personali+a el aspecto de dos enlaces a/adi(ndoles una imagen defondo,

Figura ;. :ersonali+ando el aspecto de los enlaces en función de su tipo

Las reglas CSS necesarias se muestran a continuación,a A mar( & 1 m 0 5 ;l#at & l ;t 5 4l ar & l ;t 5

.r A 4#l#r & SE3 7@ 5 %a++ (& 0 0 0 16%* 5 :a4 (r# + & SZZZ rl F ma( /r .( ; G #-r % at l ;t 4 t r 5

.%+; A %a++ (& 0 0 0 @@%* 5 :a4 (r# + & SZZZ rl F ma( /%+;.% ( G #-r % at l ;t 4 t r 5

<a hr ; "S" , E la4 4# l t l# %#r + ; 4t#</a ,

<a 4la "r " hr ; "S" , E la4 a ar4h 2# )99</a ,

<a 4la "%+;" hr ; "S" , E la4 a +#4 m t# PDZ</a ,



;.).,. &ostrar los enlaces co o si fueran !otones

Las propiedades definidas por CSS permiten mostrar los enlaces con el aspecto de unotón$ lo %ue puede ser Dtil en formularios en los %ue no se utili+an elementos específicos

para crear otones.

6l siguiente ejemplo muestra un enlace simple formateado como un otón,

Figura ;.3 Mostrando un enlace como si fuera un otón

Las reglas CSS utili+adas en el ejemplo anterior son las siguientes,a A mar( & 1 m 0 5 ;l#at & l ;t 5 4l ar & l ;t 5

a.:#t# A t *t-+ 4#rat # & # 5 :a4 (r# + & SEEE5 4#l#r & S@@@5 :#r+ r & 1%* # t t SCCC5 %a++ (& .1 m .7 m 5

a.:#t# &h#2 r A :a4 (r# + & SCCB5

a.:#t# &a4t 2 A :#r+ r & 1%* t S000 5

<a 4la ":#t# " hr ; "S" , ] ar+ar</a ,

<a 4la ":#t# " hr ; "S" , E 2 ar</a ,



Capítulo . I "genes

.1. Estilos !"sicos

.1.1. Esta!lecer la anchura 5 altura de las i "genestili+ando las propiedades ' +th y h (ht $ es posi le mostrar las im!genes con cual%uier

altura&anchura$ independientemente de su altura&anchura real,S+ ta4a+a A ' +th & 1@0%*5 h (ht & @70%*5

< m( + "+ ta4a+a" r4 " ma( .% (" / ,

Io o stante$ si se utili+an alturas&anchuras diferentes de las reales$ el na#egador deformalas im!genes y el resultado est(tico es muy desagrada le.:or otra parte$ esta lecer la altura&anchura de todas las im!genes mediante CSS es unapr!ctica poco recomenda le. 6l moti#o es %ue normalmente dos im!genes diferentes nocomparten la misma altura&anchura. :or lo tanto$ se de e crear una nue#a regla CSS 'yun nue#o selector) para cada una de las diferentes im!genes del sitio "e .

6n la pr!ctica$ esta forma de tra ajo produce una so recarga de estilos %ue la hacein#ia le. :or este moti#o$ aun%ue es una solución %ue no respeta la separación completaentre contenidos 'XHTML) y presentación 'CSS)$ se recomienda esta lecer laaltura&anchura de las im!genes mediante los atri utos ' +th y h (ht de la eti%ueta < m(, ,< m( r4 " ma( .% (" ' +th "1@0" h (ht "@70" / ,

.1.). Eli inar el !orde de las i "genes con enlaces

Cuando una imagen forma parte de un enlace$ los na#egadores muestran por defecto unorde a+ul grueso alrededor de las im!genes. :or tanto$ una de las reglas m!s utili+adas

en los archi#os CSS es la %ue elimina los ordes de las im!genes con enlaces,m( A

:#r+ r & # 5

E4ercicio <

er enunciado





.0. Estilos avan2ados

.).1. So !ra Ddrop shado:

La mayoría de aplicaciones de dise/o gr!fico permiten a/adir una som ra 'llamada drop

shado* en ingl(s) a las im!genes. CSS no incluye propiedades %ue permitan mostrar deforma sencilla som ras en los elementos.Io o stante$ e-isten #arias t(cnicas sencillas y otras m!s a#an+adas %ue permiten crearsom ras %ue se adapten a cual%uier imagen o elemento. * continuación se muestra unat(cnica sencilla para a/adir som ra a las im!genes.6l estilo final de las som ras creadas con esta t(cnica se muestra a continuación,

Figura .1 Som ra aplicada a las im!genes y otros elementos mediante CSS

La t(cnica mostrada se presentó por primera #e+ en la p!gina "ehttp,&&"u leye".com&tests&dropshado"s.htm y consiste en la utili+ación de un par deelementos <+ 2, alrededor del elemento %ue #a a mostrar una som ra. La som ra seconsigue mediante una imagen muy grande %ue contiene una som ra orientada hacia ellado derecho e inferior.La #entaja de este m(todo es %ue es sencillo y solamente re%uiere a/adir un par de <+ 2, por cada elemento. *dem!s$ como la som ra es una imagen muy grande$ el efectofunciona con elementos de cual%uier tama/o.

6l mayor incon#eniente de este m(todo es %ue la som ra siempre se muestra en lamisma dirección 'derecha inferior) y %ue en 7nternet 6-plorer @ y #ersiones anteriores sólomuestran la som ra correctamente cuando el color de fondo de la p!gina es lanco 'ya



%ue 7nternet 6-plorer @ y #ersiones anteriores no soportan im!genes en formato :I contransparencias).6l código HTML y CSS del ejemplo anterior es astante sencillo,.+r#% ha+#' A ;l#at &l ;t 5 4l ar &l ;t 5 :a4 (r# + & rl F ma( / ha+#' l%ha.% ( G #-r % at :#tt#m r (ht !

m%#rta t 5 :a4 (r# + & rl F ma( / ha+#'.( ; G #-r % at :#tt#m r (ht 5 mar( & 10%* 0 10%* 10%* ! m%#rta t 5 mar( & 10%* 0 10%* 7%* 5 %a++ (& 0%*5

. r:#* A %# t # &r lat 2 5 :#tt#m & %*5 r (ht & %*5 :#r+ r & 1%* #l + S 5 %a++ (&R%*5 mar( & 0%* 0%* 0%* 0%* 5

<+ 2 4la "+r#% ha+#'" ,<+ 2 4la " r:#*" , < m( r4 " ma( / ma( .% (" alt "Ima( ( Vr 4a" / ,

</+ 2 ,

</+ 2 ,

<+ 2 4la "+r#% ha+#'" ,

<+ 2 4la " r:#*" , <hR, P>rra;# + t *t#</hR , <%, E ta tV4 4a # [l# % rm t a a+ r #m:ra a la m>( # a

4 al r l m t#.</% ,

</+ 2 ,

</+ 2 ,



Capítulo 2. 'istas

<.1. Estilos !"sicos

<.1.1. @i etas personali2adas:or defecto$ los na#egadores muestran los elementos de las listas no ordenadas con una#i/eta formada por un pe%ue/o círculo de color negro. Los elementos de las listasordenadas se muestran por defecto con la numeración decimal utili+ada en la mayoría depaíses.Io o stante$ CSS define #arias propiedades para controlar el tipo de #i/eta %ue muestranlas listas$ adem!s de poder controlar la posición de la propia #i/eta. La propiedad !sicaes la %ue controla el tipo de #i/eta %ue se muestra y %ue se denomina l t- t l -t % .Propiedad list'st*le't*pe

Valores

disc 6 circle 6 s.uare 6 decimal 6 decimal-leading-1ero 6 lo@er-roman 6 upper-roman 6

lo@er-gree( 6 lo@er-latin 6 upper-latin 6 armenian 6 georgian 6 lo@er-alpha 6 upper-alpha 6

none 6 inheritSe aplica a lementos de una listaValor inicial discDescripción +ermite establecer el tipo de viBeta mostrada para una lista

6n primer lugar$ el #alor # permite mostrar una lista en la %ue sus elementos no

contienen #i/etas$ nDmeros o letras. Se trata de un #alor muy utili+ado$ ya %ue esimprescindi le para los menDs de na#egación creados con listas$ como se #er! m!sadelante.6l resto de #alores de la propiedad l t- t l -t % se di#iden en tres tipos, gr!ficos$num(ricos y alfa (ticos.• Los #alores gr!ficos son + 4$4 r4l y ar y muestran como #i/eta un círculo

relleno$ un círculo #acío y un cuadrado relleno respecti#amente.• Los #alores num(ricos est!n formados por + 4 mal$+ 4 mal-l a+ (-= r# $l#' r-

r#ma $ %% r-r#ma $arm a y ( #r( a .• :or Dltimo$ los #alores alfanum(ricos se controlan mediante l#' r-lat $l#' r-al%ha $

%% r-lat $ %% r-al%ha y l#' r-(r .

La siguiente imagen muestra algunos de los #alores definidos por la propiedad l t-t l -t % ,





Figura <.1 6jemplo de propiedad listGstyleGtype

6l código CSS de algunas de las listas del ejemplo anterior se muestra a continuación,< l t l "l t- t l -t % & ar " , <l , l t- t l -t % & ar </l , <l , El m t#</l , <l , El m t#</l ,

</ l ,

<#l t l "l t- t l -t % & l#' r-r#ma " , <l , l t- t l -t % & l#' r-r#ma </l , <l , El m t#</l , <l , El m t#</l ,

</#l ,

<#l t l "l t- t l -t % & + 4 mal-l a+ (-= r#5 %a++ (-l ;t& @ m5" , <l , l t- t l -t % & + 4 mal-l a+ (-= r#</l , <l , El m t#</l , <l , El m t#</l ,

</#l ,

La propiedad l t- t l -%# t # permite controlar la colocación de las #i/etas.Propiedad list'st*le'positionValores inside 6 outside 6 inheritSe aplica a lementos de una lista





Propiedad list'st*le'positionValor inicial outsideDescripción +ermite establecer la posición de la viBeta de cada elemento de una lista

La diferencia entre los #alores # t + y + se hace e#idente cuando los elementos

contienen mucho te-to$ como en la siguiente imagen,

Figura <.) 6jemplo de propiedad listGstyleGposition

tili+ando las propiedades anteriores ' l t- t l -t % y l t- t l -%# t # )$ se

puede seleccionar el tipo de #i/eta y su posición$ pero no es posi le personali+ar algunasde sus características !sicas como su color y tama/o.Cuando se re%uiere personali+ar el aspecto de las #i/etas$ se de e emplear la propiedadl t- t l - ma( $ %ue permite mostrar una imagen propia en #e+ de una #i/etaautom!tica.Propiedad list'st*le'i&ageValores url 6 none 6 inheritSe aplica a lementos de una listaValor inicial noneDescripción +ermite reempla1ar las viBetas autom ticas por una imagen personali1ada

Las im!genes personali+adas se indican mediante la FL de la imagen. Si no seencuentra la imagen o no se puede cargar$ se muestra la #i/eta autom!ticacorrespondiente 'sal#o %ue e-plícitamente se haya eliminado mediante la propiedad l t-

t l -t % ).La siguiente imagen muestra el uso de la propiedad l t- t l - ma( mediante tresejemplos sencillos de listas con #i/etas personali+adas,






Figura <., 6jemplo de propiedad listGstyleGimage

Las reglas CSS correspondientes al ejemplo anterior se muestran a continuación,l.# A l t- t l - ma( & rl F" ma( /# .% (" G5

l.;l 4ha A l t- t l - ma( & rl F" ma( /;l 4ha.% (" G5 l.4 r4 l# A l t- t l - ma( & rl F" ma( /4 r4 l# r#8#.% (" G5

Como es ha itual$ CSS define una propiedad de tipo "shorthand" %ue permite esta lecertodas las propiedades de una lista de forma directa. La propiedad se denomina l t-

t l .Propiedad list'st*leValores 3 list-style-type 66 list-style-position 66 list-style-image 4 6 inheritSe aplica a lementos de una listaValor inicial -Descripción +ropiedad .ue permite establecer de 'orma simult nea todas las opciones de una lista

6n la definición anterior$ la notación significa %ue el orden en el %ue se indican los#alores de la propiedad es indiferente. 6l siguiente ejemplo indica %ue no se de e mostrar ni #i/etas autom!ticas ni #i/etas personali+adas,

l A l t- t l & #

Cuando se utili+a una #i/eta personali+ada$ es con#eniente indicar la #i/eta autom!tica%ue se mostrar! cuando no se pueda cargar la imagen,

l A l t- t l & rl F" ma( /4 a+ra+# r#8#.( ;" G ar 5

<.1.). &en vertical

Los sitios "e correctamente dise/ados emplean las listas de elementos para crear todossus menDs de na#egación. tili+ando la eti%ueta < l, de HTML se agrupan todas lasopciones del menD y haciendo uso de CSS se modifica su aspecto para mostrar un menDhori+ontal o #ertical.

* continuación se muestra la transformación de una lista sencilla de enlaces en un menD





#ertical de na#egación.Lista de enlaces original,< l , <l ,< a hr ; "S" ,El m t# 1< / a,< / l , <l ,< a hr ; "S" ,El m t# @< / a,< / l , <l ,< a hr ; "S" ,El m t# 3< / a,< / l , <l ,< a hr ; "S" ,El m t# R< / a,< / l , <l ,< a hr ; "S" ,El m t# 7< / a,< / l , <l ,< a hr ; "S" ,El m t# < / a,< / l ,

</ l ,

*specto final del menD #ertical,

Figura <. MenD #ertical sencillo creado con CSS

6l proceso de transformación de la lista en un menD re%uiere de los siguientes pasos,1) 5efinir la anchura del menD,

l.m A ' +th & 160%* 5



Figura <.3 MenD #ertical, definiendo su anchura

0) 6liminar las #i/etas autom!ticas y todos los m!rgenes y espaciados aplicados pordefecto,

l.m A l t- t l & # 5 mar( & 0 5 %a++ (& 0 5 ' +th & 160%* 5

Figura <.( MenD #ertical, eliminar #i/etas por defecto

9) */adir un orde al menD de na#egación y esta lecer el color de fondo y los ordes decada elemento del menD,

l.m A :#r+ r & 1%* #l + S C C C5 :#r+ r-:#tt#m & # 5

l t- t l & # 5 mar( & 0 5 %a++ (& 0 5 ' +th & 160%* 5

l.m l A :a4 (r# + & SZRZRZR5 :#r+ r-:#tt#m & 1%* #l + S C C C5 :#r+ r-t#% & 1%* #l + SZZZ5



Figura <.; MenD #ertical, a/adiendo ordes

>) *plicar estilos a los enlaces, mostrarlos como un elemento de lo%ue para %ue ocupentodo el espacio de cada <l , del menD$ a/adir un espacio de relleno y modificar loscolores y la decoración por defecto,

l.m l a A 4#l#r & S333 5 + %la & :l#4 5 %a++ (& .@ m 0 .@ m .7 m 5 t *t-+ 4#rat # & # 5

Figura <. *specto final del menD #ertical sencillo creado con CSS

Los tipos de menDs #erticales %ue se pueden definir mediante las propiedades CSS soninnumera les$ como se puede o ser#ar en la p!gina http,&&""".e-plodingG

oy.com&images&6=menus&menus.html



<.1.).1. &en vertical avan2ado

E4ercicio 1=

er enunciado


<.).1. &en hori2ontal !"sico

:artiendo de la misma lista de elementos del menD #ertical$ resulta muy sencillo crear unmenD de na#egación hori+ontal. La cla#e reside en modificar el posicionamiento originalde los elementos de la lista.Código HTML del menD hori+ontal,

< l , <l ,< a hr ; "S" ,El m t# 1< / a,< / l , <l ,< a hr ; "S" ,El m t# @< / a,< / l , <l ,< a hr ; "S" ,El m t# 3< / a,< / l , <l ,< a hr ; "S" ,El m t# R< / a,< / l , <l ,< a hr ; "S" ,El m t# 7< / a,< / l ,

</ l ,

*specto final del menD hori+ontal,

Figura <.< MenD hori+ontal creado con CSS

6l proceso de creación del menD hori+ontal consta de los siguientes pasos,1) *plicar los estilos CSS !sicos para esta lecer el estilo del menD 'similares a los delmenD #ertical anterior),

l.m A :a4 (r# + & SZRZRZR5 :#r+ r & 1%* #l + S C C C5 l t- t l & # 5 mar( & 0 5 %a++ (& 0 5

l.m l a A 4#l#r & S333 5 + %la & :l#4 5 %a++ (& .3 m 5 t *t-+ 4#rat # & # 5





Figura <.1= MenD hori+ontal, estilo !sico inicial

0) 6sta lecer la anchura de los elementos del menD. Como el menD es de anchura#aria le y contiene cinco elementos$ se asigna una anchura del @0 a cada elemento. Sise %uiere tener un control m!s preciso so re el aspecto de cada elemento$ es necesarioasignar una anchura fija al menD.

*dem!s$ se posiciona de forma flotante los elementos de la lista mediante lapropiedad ;l#at . 6sta es la cla#e de la transformación de una lista en un menD hori+ontal,

l.m l A ;l#at & l ;t 5 ' +th & @0 5

5espu(s de posicionar de forma flotante a todos los elementos de la lista$ el

elemento < l, es un elemento #acío ya %ue en su interior no e-iste ningDn elementoposicionado de forma normal.Como ya se e-plicó en las secciones anteriores$ la solución de este pro lema consiste enaplicar la propiedad #2 r;l#'& h ++ 5 al elemento < l, $ de forma %ue encierre a todoslos elementos posicionados de forma flotante,

l.m A #2 r;l#' & h ++ 5

Figura <.11 MenD hori+ontal, anchura y posicionamiento flotante

9) 6sta lecer los ordes de los elementos %ue forman el menD,l.m l a A

:#r+ r-l ;t & 1%* #l + SZZZ5 :#r+ r-r (ht & 1%* #l + S C C C5



Figura <.1) MenD hori+ontal, orde de los elementos

>) :or Dltimo$ se elimina el orde derecho del Dltimo elemento de la lista$ para e#itar elorde duplicado,

< l , <l ,< a hr ; "S" ,El m t# 1< / a,< / l , <l ,< a hr ; "S" ,El m t# @< / a,< / l , <l ,< a hr ; "S" ,El m t# 3< / a,< / l , <l ,< a hr ; "S" ,El m t# R< / a,< / l , <l ,< a hr ; "S" t l ":#r+ r-r (ht& # " ,El m t# 7< / a,< / l ,

</ l ,

Figura <.1, *specto final del menD hori+ontal creado con CSS

6l código CSS final se muestra a continuación,l.m A

:a4 (r# + & SZRZRZR5 :#r+ r & 1%* #l + S C C C5 l t- t l & # 5 mar( & 0 5 %a++ (& 0 5

#2 r;l#' & h ++ 5

l.m l A ;l#at & l ;t 5 ' +th & @0 5

l.m l a A :#r+ r-l ;t & 1%* #l + SZZZ5

:#r+ r-r (ht & 1%* #l + S C C C5 4#l#r & S333 5 + %la & :l#4 5 %a++ (& .3 m 5 t *t-+ 4#rat # & # 5

<.).). &en s avan2ados

Modificando los estilos de cada elemento del menD y utili+ando im!genes de fondo y las



pseudoGclases &h#2 r y &a4t 2 $ se pueden crear menDs hori+ontales complejos$ inclusocon el aspecto de un menD de solapas o pesta/as,

Figura <.1 6jemplos de menDs hori+ontales con pesta/as creados con CSS

6l código fuente de los menDs de la imagen anterior y muchos otros se puede encontraren http,&&e-plodingG oy.com&images&cssmenus&menus.html

*dem!s de los menDs hori+ontales de pesta/as$ haciendo uso de las propiedades deCSS se pueden crear menDs #erticales y hori+ontales muy a#an+ados,

Figura <.13 6jemplos de menDs hori+ontales y #erticales complejos creados con CSS

6l código CSS de todos los ejemplos de la imagen anterior y muchos otros se pueden



encontrar en, http,&&al#it.de&cssGsho"case&cssGna#igationGtechni%uesGsho"case.php

Capítulo 14. %a!las

1=.1. Estilos !"sicosCuando se aplican ordes a las celdas de una ta la$ el aspecto por defecto con el %ue semuestra en un na#egador es el siguiente,

Figura 1=.1 *specto por defecto de los ordes de una ta la

6l código HTML y CSS del ejemplo anterior se muestra a continuación,. #rmal A ' +th & @70%*5 :#r+ r & 1%* #l + S000 5

. #rmal th . #rmal t+ A :#r+ r & 1%* #l + S000 5

<ta:l 4la " #rmal" mmar "Ta:la ( Vr 4a" , <tr , <th 4#% "4#l" , </th , <th 4#% "4#l" , B</th , <th 4#% "4#l" , C</th , <th 4#% "4#l" , D</th , <th 4#% "4#l" , E</th ,

</tr , ...



</ta:l ,

6l est!ndar CSS 0.1 define dos modelos diferentes para el tratamiento de los ordes delas celdas. La propiedad %ue permite seleccionar el modelo de ordes es :#r+ r-4#lla% ,Propiedad !order'collapseValores collapse 6 separate 6 inheritSe aplica a Todas las tablasValor inicial separateDescripción e'ine el mecanismo de 'usión de los bordes de las celdas adyacentes de una tabla

6l modelo 4#lla% fusiona de forma autom!tica los ordes de las celdas adyacentes$mientras %ue el modelo %arat fuer+a a %ue cada celda muestre sus cuatro ordes. :or defecto$ los na#egadores utili+an el modelo %arat $ tal y como se puede compro ar en

el ejemplo anterior.6n general$ los dise/adores prefieren el modelo 4#lla% por%ue est(ticamente resultam!s atracti#o y m!s parecido a las ta las de datos tradicionales. 6l ejemplo anterior sepuede rehacer para mostrar la ta la con ordes sencillos y sin separación entre celdas,

Figura 1=.) 6jemplo de propiedad orderGcollapse

6l código CSS completo del ejemplo anterior se muestra a continuación,. #rmal A ' +th & @70%*5 :#r+ r & 1%* #l + S000 5 :#r+ r-4#lla% & 4#lla% 5

. #rmal th . #rmal t+ A :#r+ r & 1%* #l + S000 5






<ta:l 4la " #rmal" mmar "Ta:la ( Vr 4a" , <tr , <th 4#% "4#l" , </th , <th 4#% "4#l" , B</th , <th 4#% "4#l" , C</th , <th 4#% "4#l" , D</th , <th 4#% "4#l" , E</th , </tr , ...

</ta:l ,

*un%ue parece sencillo$ el mecanismo %ue utili+a el modelo 4#lla% es muy complejo$ya %ue cuando los ordes %ue se fusionan no son e-actamente iguales$ de e tener encuenta la anchura de cada orde$ su estilo y el tipo de celda %ue contiene el orde'columna$ fila$ grupo de filas$ grupo de columnas) para determinar la prioridad de cada

orde.Si se opta por el modelo %arat '%ue es el %ue se aplica si no se indica lo contrario) sepuede utili+ar la propiedad :#r+ r- %a4 ( para controlar la separación entre los ordesde cada celda.Propiedad !order'spacingValores unidad de medida unidad de medida = 6 inheritSe aplica a Todas las tablasValor inicial $Descripción stablece la separación entre los bordes de las celdas adyacentes de una tabla

Si solamente se indica como #alor una medida$ se asigna ese #alor como separaciónhori+ontal y #ertical. Si se indican dos medidas$ la primera es la separación hori+ontal y lasegunda es la separación #ertical entre celdas.La propiedad :#r+ r- %a4 ( sólo controla la separación entre celdas y por tanto$ no sepuede utili+ar para modificar el tipo de modelo de ordes %ue se utili+a. 6n concreto$ si se

esta lece un #alor igual a 0 para la separación entre los ordes de las celdas$ el resultadoes muy diferente al modelo 4#lla% ,











Figura 1=., 6jemplo de propiedad orderGspacing

6n la ta la del ejemplo anterior$ se ha esta lecido la propiedad :#r+ r- %a4 (& 0 $ por lo%ue el na#egador no introduce ninguna separación entre los ordes de las celdas.

*dem!s$ como no se ha esta lecido de forma e-plícita ningDn modelo de ordes$ elna#egador utili+a el modelo %arat .6l resultado es %ue :#r+ r- %a4 (& 0 muestra los ordes con una anchura do le$ ya%ue en realidad se trata de dos ordes iguales sin separación entre ellos. :or tanto$ lasdiferencias #isuales con el modelo :#r+ r-4#lla% & 4#lla% son muy e#identes.

14.0. Estilos avan2adosCSS define otras propiedades específicas para el control del aspecto de las ta las. nade ellas es el tratamiento %ue reci en las celdas #acías de una ta la$ %ue se controlamediante la propiedad m%t -4 ll . 6sta propiedad sólo se aplica cuando el modelo de

ordes de la ta la es de tipo %arat .Propiedad e&pt*'cellsValores sho@ 6 hide 6inherit

Se aplica a Celdas de una tablaValor inicial sho@Descripción e'ine el mecanismo utili1ado para el tratamiento de las celdas vac7as de una tabla

6l #alor h + indica %ue las celdas #acías no se de en mostrar. na celda #acía esa%uella %ue no tiene ningDn contenido$ ni si%uiera un espacio en lanco o un \ : %5 .La siguiente imagen muestra las diferencias entre una ta la normal y una ta la con lapropiedad m%t -4 ll & h + ,





Figura 1=. 6jemplo de propiedad emptyGcells

5esafortunadamente$ 7nternet 6-plorer @ y las #ersiones anteriores no interpretancorrectamente esta propiedad y muestran el ejemplo anterior de la siguiente manera,

Figura 1=.3 7nternet 6-plorer no soporta la propiedad emptyGcells

:or otra parte$ el título de las ta las se esta lece mediante el elemento <4a%t # , $ %uepor defecto se muestra encima de los contenidos de la ta la. La propiedad 4a%t # - + permite controlar la posición del título de la ta la.Propiedad caption'sideValores top 6 bottom 6 inheritSe aplica a os elementos captionValor inicial topDescripción stablece la posición del t7tulo de la tabla

6l #alor :#tt#m indica %ue el título de la ta la se de e mostrar de ajo de los contenidosde la ta la. Si tam i(n se %uiere modificar la alineación hori+ontal del título$ de e utili+arse





la propiedad t *t-al ( . * continuación se muestra el código HTML y CSS de un ejemplo sencillo de uso de lapropiedad 4a%t # - + ,. % 4 al A 4a%t # - + & :#tt#m 5

<ta:l 4la " % 4 al" mmar "Ta:la ( Vr 4a" , <4a%t # , Ta:la @.- TKt l# % 4 al</4a%t # , <tr , <t+ , 1</t+ , <t+ , @</t+ , <t+ , 3</t+ ,

</tr , ...

</ta:l ,

La siguiente imagen muestra el resultado de #isuali+ar el ejemplo anterior en cual%uierna#egador,

Figura 1=.( 6jemplo de propiedad captionGside

E4ercicio 11

er enunciado6l resultado final del ejercicio anterior se podría completar a/adiendo una pe%ue/a





mejora, %ue el color de las filas #aríe cuando el usuario pasa el ratón por encima de cadafila. La pseudo-clase &h#2 r permite a/adir f!cilmente esta característica,

Figura 1=.; :seudoGclase ,ho#er en las filas de una ta la

La regla CSS necesaria se muestra a continuación,ta:l tr&h#2 r A :a4 (r# + & SZZZZ 5

Capítulo 11. For ularios

11.1. Estilos !"sicos

11.1.1. &ostrar un !otón co o un enlace

Como ya se #io anteriormente$ el estilo por defecto de los enlaces se puede modificarpara %ue se muestren como otones de formulario. *hora$ los otones de formulario

tam i(n se pueden modificar para %ue pare+can enlaces.

Figura 11.1 Mostrando un otón como si fuera un enlace



Las reglas CSS del ejemplo anterior son las siguientes,. la4 A :#r+ r & 0 5 %a++ (& 0 5 :a4 (r# +-4#l#r & tra %ar t 5

4#l#r & :l 5 :#r+ r-:#tt#m & 1%* #l + :l 5

< % t t % ": tt# " 2al "B#t[ #rmal" / ,

< % t 4la " la4 " t % ": tt# " 2al "B#t[ 4#m# la4 " / ,

11.1.). &e4oras en los ca pos de te+to

:or defecto$ los campos de te-to de los formularios no incluyen ningDn espacio de relleno$por lo %ue el te-to introducido por el usuario aparece pegado a los ordes del cuadro dete-to.

*/adiendo un pe%ue/o %a++ ( a cada elemento < % t,$ se mejora nota lemente elaspecto del formulario,

Figura 11.) Mejorando el aspecto de los formularios gracias al padding

La regla CSS necesaria para mejorar el formulario es muy sencilla,;#rm. l (a t % t A %a++ (& .@ m5



11.1.,. 'a!els alineadas 5 for ateadas

Los elementos < % t, y <la: l, de los formularios son elementos en línea$ por lo %ue elaspecto %ue muestran los formularios por defecto$ es similar al de la siguiente imagen,

Figura 11., *specto por defecto %ue muestran los formularios

6l código HTML del ejemplo anterior es el siguiente,<;#rm ,<; l+ t , <l ( + , lta l r2 4 #< / l ( + ,

<la: l ;#r " #m:r " ,$#m:r < / la: l , < % t t % "t *t" + " #m:r " / ,

<la: l ;#r "a% ll +# " , % ll +# < / la: l , < % t t % "t *t" + "a% ll +# " = "70" / ,

<la: l ;#r "+ " ,D$I< / la: l , < % t t % "t *t" + "+ " = "10" ma*l (th " " / ,

<la: l ;#r "4# tra a" ,C# tra a< / la: l , < % t t % "%a '#r+" + "4# tra a" / ,

< % t 4la ":t " t % " :m t" 2al "Darm + alta" / ,</ ; l+ t ,



</ ;#rm ,

*pro#echando los elementos <la: l, $ se pueden aplicar unos estilos CSS sencillos %uepermitan mostrar el formulario con el aspecto de la siguiente imagen,

Figura 11. Mostrando las eti%uetas la el encima de los campos del formulario

6n primer lugar$ se muestran los elementos <la: l, como elementos de lo%ue$ para %uea/adan una separación para cada campo del formulario. *dem!s$ se a/ade un margensuperior para no mostrar juntas todas las filas del formulario,la: l A + %la & :l#4 5 mar( & .7 m 0 0 0 5

6l otón del formulario tam i(n se muestra como un elemento de lo%ue y se le a/ade unmargen para darle el aspecto final deseado,.:t A + %la & :l#4 5 mar( & 1 m 0 5

6n ocasiones$ es m!s Dtil mostrar todos los campos del formulario con su<la: l, alineada a la i+%uierda y el campo del formulario a la derecha de cada <la: l, $como muestra la siguiente imagen,



Figura 11.3 Mostrando las eti%uetas la el alineadas con los campos del formulario

:ara mostrar un formulario tal y como aparece en la imagen anterior no es necesariocrear una ta la y controlar la anchura de sus columnas para conseguir una alineaciónperfecta. Sin em argo$ sí %ue es necesario a/adir un nue#o elemento 'por ejemploun <+ 2, ) %ue encierre a cada uno de los campos del formulario ' <la: l, y < % t, ). 6les%uema de la solución propuesta es el siguiente,

Figura 11.( 6s%uema de la t(cnica de alineación de eti%uetas la el y campos de

formulario

:or tanto$ en el código HTML del formulario anterior se a/aden los elementos <+ 2, ,<;#rm , <; l+ t ,

<l ( + , lta l r2 4 #< / l ( + ,

<+ 2, <la: l ;#r " #m:r " ,$#m:r < / la: l , < % t t % "t *t" + " #m:r " / , </ + 2,

<+ 2, <la: l ;#r "a% ll +# " , % ll +# < / la: l , < % t t % "t *t" + "a% ll +# " = "37" / , </ + 2,



...

</ ; l+ t ,

</ ;#rm ,

en el código CSS se a/aden las reglas necesarias para alinear los campos delformulario,+ 2 A mar( & .R m 0 5

+ 2 la: l A ' +th & @7 5 ;l#at & l ;t 5


11.).1. For ulario en varias colu nas

Los formularios complejos con decenas de campos pueden ocupar mucho espacio en la#entana del na#egador. *dem!s del uso de pesta/as para agrupar los campos

relacionados en un formulario$ tam i(n es posi le mostrar el formulario a dos columnas$para apro#echar mejor el espacio.

Figura 11.; 6jemplo de formulario a dos columnas



La solución consiste en aplicar la siguiente regla CSS a los <; l+ t, del formulario,;#rm ; l+ t A ;l#at & l ;t 5 ' +th & R6 5

<;#rm , <; l+ t , ... </; l+ t ,

...

</;#rm ,

Si se %uiere mostrar el formulario con m!s de dos columnas$ se aplica la misma reglapero modificando el #alor de la propiedad ' +th de cada <; l+ t, . Si el formulario esmuy complejo$ puede ser Dtil agrupar los <; l+ t, de cada fila mediante elementos<+ 2, .

11.).). 9esaltar el ca po seleccionado

na de las mejoras m!s Dtiles para los formularios HTML consiste en resaltar de alguna

forma especial el campo en el %ue el usuario est! introduciendo datos. :ara ello$ CSSdefine la pseudoGclase &;#4 $ %ue permite aplicar estilos especiales al elemento %ue enese momento tiene el foco o atención del usuario.La siguiente imagen muestra un formulario %ue resalta claramente el campo en el %ue elusuario est! introduciendo la información,



Figura 11. 6jemplo de pseudoGclase ,focus

*/adiendo la pseudoGclase &;#4 despu(s del selector normal$ el na#egador se encargade aplicar esos estilos cuando el usuario acti#a el elemento,

% t&;#4 A :#r+ r & @%* #l + S000 5

:a4 (r# + & SZ3Z3Z35

5esafortunadamente$ la pseudoGclase &;#4 no funciona en na#egadores o soletoscomo 7nternet 6-plorer @$ por lo %ue si la p!gina de e #isuali+arse de la misma forma entodos los na#egadores$ es preciso recurrir a soluciones con Ra#aScript.E4ercicio 1)

er enunciado

Capítulo 10. 'a5out6l dise/o de las p!ginas "e ha ituales se di#ide en lo%ues, ca ecera$ menD$contenidos y pie de p!gina. isualmente$ los lo%ues se disponen en #arias filas ycolumnas. :or este moti#o$ hace #arios a/os la estructura de las p!ginas HTML se definíamediante ta las.6l desarrollo de CSS ha permitido %ue se puedan reali+ar los mismos dise/os sin utili+ar





ta las HTML. Las principales #entajas de dise/ar la estructura de las p!ginas "e conCSS en #e+ de con ta las HTML son las siguientes,• &anteni iento , una p!gina dise/ada e-clusi#amente con CSS es mucho m!s f!cil de

mantener %ue una p!gina dise/ada con ta las. Cam iar el aspecto de una p!gina creada

con CSS es tan f!cil como modificar unas pocas reglas en las hojas de estilos. Sinem argo$ reali+ar la misma modificación en una p!gina creada con ta las supone un

esfuer+o muy superior y es m!s pro a le cometer errores.• 6ccesi!ilidad , las p!ginas creadas con CSS son m!s accesi les %ue las p!ginas

dise/adas con ta las. 5e hecho$ los na#egadores %ue utili+an las personas

discapacitadas 'en especial las personas in#identes) pueden tener dificultades con la

estructura de las p!ginas complejas creadas con ta las HTML. Io o stante$ dise/ar una

p!gina "e e-clusi#amente con CSS no garanti+a %ue la p!gina sea accesi le.• @elocidad de carga , el código HTML de una p!gina dise/ada con ta las es mucho

mayor %ue el código de la misma p!gina dise/ada e-clusi#amente con CSS$ por lo %ue

tarda m!s tiempo en descargarse. 6n cual%uier caso$ si el usuario accede al sitio con una

cone-ión de anda ancha y la p!gina es de un tama/o medio o reducido$ las diferencias

son casi impercepti les.• Se "ntica , aun%ue resulta o #io$ las ta las HTML sólo se de en utili+ar para mostrar

datos cuya información sólo se entiende en forma de filas y columnas. tili+ar ta las para

crear la estructura completa de una p!gina es tan a surdo como utili+ar por ejemplo la

eti%ueta < l, para crear p!rrafos de te-to.

:or estos moti#os$ la estructura asada en ta las ha dado paso a la estructura asadae-clusi#amente en CSS. *un%ue crear la estructura de las p!ginas sólo con CSS presentaen ocasiones retos importantes$ en general es m!s sencilla y fle-i le.6n este capítulo se muestra cómo crear algunas de las estructuras o layouts m!sha ituales de los dise/os "e utili+ando e-clusi#amente CSS.

10.1. Centrar una p"gina hori2ontal ente * medida %ue aumenta el tama/o y la resolución de las pantallas de ordenador$ se hacem!s difícil dise/ar p!ginas %ue se adapten al tama/o de la #entana del na#egador. 6l

principal reto %ue se presenta con resoluciones superiores a 140> - 3@ pí-el$ es %ue laslíneas de te-to son demasiado largas como para leerlas con comodidad. :or ese moti#o$



normalmente se opta por dise/os con una anchura fija limitada a un #alor acepta le paramantener la legi ilidad del te-to.:or otra parte$ los na#egadores alinean por defecto las p!ginas "e a la i+%uierda de la#entana. Cuando la resolución de la pantalla es muy grande$ la mayoría de p!ginas deanchura fija alineadas a la i+%uierda parecen muy estrechas y pro#ocan una sensación de#acío.La solución m!s sencilla para e#itar los grandes espacios en lanco consiste en crearp!ginas con una anchura fija adecuada y centrar la p!gina hori+ontalmente respecto de la#entana del na#egador. Las siguientes im!genes muestran el aspecto de una p!ginacentrada a medida %ue aumenta la anchura de la #entana del na#egador.

Figura 1).1 :!gina de anchura fija centrada mediante CSS

Figura 1).) :!gina de anchura fija centrada mediante CSS



Figura 1)., :!gina de anchura fija centrada mediante CSS

tili+ando la propiedad mar( de CSS$ es muy sencillo centrar una p!gina "ehori+ontalmente. La solución consiste en agrupar todos los contenidos de la p!gina en unelemento <+ 2, y asignarle a ese <+ 2, unos m!rgenes laterales autom!ticos. 6l <+ 2, %ue encierra los contenidos se suele llamar 4# t +#r 'en ingl(s se denomina 'ra%% r o4# ta r ),S4# t +#r A ' +th & 300%* 5 mar( & 0 a t# 5

<:#+ , <+ 2 + "4# t +#r" , <h1, L#r m % m +#l#r t am t</h1 , ... </+ 2 ,

</:#+ ,

Como se sa e$ el #alor 0 a t# significa %ue los m!rgenes superior e inferior son iguales a

0 y los m!rgenes laterales toman un #alor de a t# . Cuando se asignan m!rgeneslaterales autom!ticos a un elemento$ los na#egadores centran ese elemento respecto desu elemento padre. 6n este ejemplo$ el elemento padre del <+ 2, es la propia p!gina 'elelemento <:#+ , )$ por lo %ue se consigue centrar el elemento <+ 2, respecto de la#entana del na#egador.Modificando ligeramente el código CSS anterior se puede conseguir un dise/o din!mico ol+!uido 'tam i(n llamado fluido ) %ue se adapta a la anchura de la #entana del na#egador ypermanece siempre centrado,S4# t +#r A ' +th & 0 5 mar( & 0 a t# 5



6sta leciendo la anchura del elemento contenedor mediante un porcentaje$ su anchura seadapta de forma continua a la anchura de la #entana del na#egador. 5e esta forma$ si sereduce la anchura de la #entana del na#egador$ la p!gina se #er! m!s estrecha y si sema-imi+a la #entana del na#egador$ la p!gina se #er! m!s ancha.Las siguientes im!genes muestran cómo se adapta el dise/o din!mico a la anchura de la#entana del na#egador$ mostrando cada #e+ m!s contenidos a medida %ue se agranda la#entana.

Figura 1). :!gina de anchura #aria le centrada mediante CSS

Figura 1).3 :!gina de anchura #aria le centrada mediante CSS



Figura 1).( :!gina de anchura #aria le centrada mediante CSS

10.0. Centrar una p"gina vertical enteCuando se centra una p!gina "e de forma hori+ontal$ sus m!rgenes laterales seadaptan din!micamente de forma %ue la p!gina siempre aparece en el centro de la#entana del na#egador$ independientemente de la anchura de la #entana. 5e la mismaforma$ cuando se centra una p!gina "e #erticalmente$ el o jeti#o es %ue sus contenidosapare+can en el centro de la #entana del na#egador y por tanto$ %ue sus m!rgenes#erticales se adapten de forma din!mica en función del tama/o de la #entana delna#egador.

*un%ue centrar una p!gina "e hori+ontalmente es muy sencillo$ centrarla #erticalmentees mucho m!s complicado. *fortunadamente$ no es muy comDn %ue una p!gina "eapare+ca centrada de forma #ertical. 6l moti#o es %ue la mayoría de p!ginas "e sonm!s altas %ue la #entana del na#egador$ por lo %ue no es posi le centrarlas #erticalmente.

* continuación se muestra la forma de centrar una p!gina "e respecto de la #entana delna#egador$ es decir$ centrarla tanto hori+ontalmente como #erticalmente.Siguiendo el mismo ra+onamiento %ue el planteado para centrar la p!ginahori+ontalmente$ se podrían utili+ar las siguientes reglas CSS para centrar la p!gina

respecto de la #entana del na#egador,S4# t +#r A ' +th & 300%* 5 h (ht & @70%*5 mar( & a t# 5

<:#+ , <+ 2 + "4# t +#r" , <h1, L#r m % m +#l#r t am t</h1 , ...



</+ 2 ,

</:#+ ,

Si el #alor a t# se puede utili+ar para %ue los m!rgenes laterales se adaptendin!micamente$ tam i(n de ería ser posi le utili+ar el #alor a t# para los m!rgenes#erticales. 5esafortunadamente$ la propiedad mar( & a t# no funciona tal y como seespera para los m!rgenes #erticales y la p!gina no se muestra centrada.La solución correcta para centrar #erticalmente una p!gina "e se asa en elposicionamiento a soluto e implica reali+ar un c!lculo matem!tico sencillo. * continuaciónse muestra el es%uema gr!fico de los cuatro pasos necesarios para centrar una p!gina"e en la #entana del na#egador,

Figura 1).; :asos necesarios para centrar #erticalmente una p!gina "e

6n primer lugar$ se asigna una altura y una anchura al elemento %ue encierra todos loscontenidos de la p!gina. 6n la primera figura$ los contenidos de la p!gina tienen unaanchura llamada ' +th y una altura llamada h (ht %ue son menores %ue la anchura yaltura de la #entana del na#egador. 6n el siguiente ejemplo$ se supone %ue tanto laanchura como la altura de la p!gina es igual a 700%*,S4# t +#r A



' +th & 700%* 5 h (ht & 700%* 5

<:#+ , <+ 2 + "4# t +#r" , <h1, L#r m % m +#l#r t am t</h1 , ... </+ 2 ,

</:#+ ,

* continuación$ se posiciona de forma a soluta el elemento 4# t +#r y se asigna un#alor de 70 tanto a la propiedad t#% como a la propiedad l ;t . 6l resultado es %ue la

es%uina superior i+%uierda del elemento 4# t +#r se posiciona en el centro de la#entana del na#egador,S4# t +#r A ' +th & 700%* 5 h (ht & 700%* 5

%# t # & a: #l t 5 t#%& 70 5

l ;t & 70 5

Si la p!gina se de e mostrar en el centro de la #entana del na#egador$ es necesariodespla+ar hacia arri a y hacia la i+%uierda los contenidos de la p!gina "e . :aradeterminar el despla+amiento necesario$ se reali+a un c!lculo matem!tico sencillo. Comose #e en la tercera figura del es%uema anterior$ el punto central de la p!gina de edespla+arse hasta el centro de la #entana del na#egador.Como se desprende de la imagen anterior$ la p!gina "e de e mo#erse hacia arri a unacantidad igual a la mitad de su altura y de e despla+arse hacia la i+%uierda una cantidade%ui#alente a la mitad de su anchura. tili+ando las propiedades mar( -t#% ymar( -l ;t con #alores negati#os$ la p!gina se despla+a hasta el centro de la #entana delna#egador.S4# t +#r A ' +th & 700%* 5 h (ht & 700%* 5

%# t # & a: #l t 5 t#%& 70 5



l ;t & 70 5

mar( -t#% & -@70%*5 /J h (ht/@ 700%* / @ J/ mar( -l ;t & -@70%*5 /J ' +th/@ 700%* / @ J/

Con las reglas CSS anteriores$ la p!gina "e siempre aparece centrada #erticalmente yhori+ontalmente respecto de la #entana del na#egador. 6l moti#o es %ue la anchura&alturade la p!gina son fijas 'propiedades ' +th y h (ht )$ el despla+amiento necesario paracentrarla tam i(n es fijo 'propiedades mar( -t#% y mar( -l ;t ) y el despla+amientohasta el centro de la #entana del na#egador se calcula din!micamente gracias al uso deporcentajes en las propiedades t#% y l ;t .:ara centrar una p!gina sólo #erticalmente$ se de e prescindir tanto del posicionamiento

hori+ontal como del despla+amiento hori+ontal,S4# t +#r A ' +th & 700%* 5 h (ht & 700%* 5

%# t # & a: #l t 5 t#%& 70 5

mar( -t#% & -@70%*5 /J h (ht/@ 700%* / @ J/

10.9. Estructura o la5out

1).,.1. *ise o a ) colu nas con ca!ecera 5 pie de p"gina

6l o jeti#o de este dise/o es definir una estructura de p!gina con ca ecera y pie$ un

menD lateral de na#egación y una +ona de contenidos. La anchura de la p!gina se fija en00%*$ la anchura del menD es de 170%* y la anchura de los contenidos es de 770%*,



Figura 1). 6s%uema del dise/o a 0 columnas con ca ecera y pie de p!gina

La solución CSS se asa en el uso de la propiedad ;l#at para los elementosposicionados como el menD y los contenidos y el uso de la propiedad 4l ar en el pie dep!gina para e#itar los solapamientos ocasionados por los elementos posicionadoscon ;l#at .

Figura 1).< :ropiedades CSS necesarias en el dise/o a dos columnas con ca ecera ypie de p!gina

6l código HTML y CSS mínimos para definir la estructura de la p!gina sin aplicar ningDnestilo adicional son los siguientes,S4# t +#r A ' +th & 00%*5

S4a: 4 ra A

Sm A ;l#at & l ;t 5



' +th & 170%* 5

S4# t +# A ;l#at & l ;t 5 ' +th & 770%* 5

S% A 4l ar & :#th 5

<:#+ ,

<+ 2 + "4# t +#r" , <+ 2 + "4a: 4 ra" , </+ 2 ,

<+ 2 + "m ", </+ 2 ,

<+ 2 + "4# t +#" , </+ 2 ,

<+ 2 + "% ", </+ 2 ,

</+ 2 ,

</:#+ ,

6n los estilos CSS anteriores se ha optado por despla+ar tanto el menD como loscontenidos hacia la i+%uierda de la p!gina ' ;l#at& l ;t ). Sin em argo$ en este casotam i(n se podría despla+ar el menD hacia la i+%uierda ' ;l#at&l ;t ) y los contenidos

hacia la derecha ' ;l#at& r (ht ).6l dise/o anterior es de anchura fija$ lo %ue significa %ue no se adapta a la anchura de la#entana del na#egador. :ara conseguir una p!gina de anchura #aria le y %ue se adaptede forma din!mica a la #entana del na#egador$ se de en aplicar las siguientes reglasCSS,S4# t +#r A

S4a: 4 ra A

Sm A ;l#at & l ;t 5



' +th & 17 5

S4# t +# A ;l#at & l ;t 5 ' +th & 67 5

S% A 4l ar & :#th 5

Si se indican la anchuras de los lo%ues %ue forman la p!gina en porcentajes$ el dise/ofinal es din!mico. :ara crear dise/os de anchura fija$ asta con esta lecer las anchurasde los lo%ues en pí-el.

1).,.). *ise o a , colu nas con ca!ecera 5 pie de p"gina

*dem!s del dise/o a dos columnas$ el dise/o m!s utili+ado es el de tres columnas conca ecera y pie de p!gina. 6n este caso$ los contenidos se di#iden en dos +onasdiferenciadas, +ona principal de contenidos y +ona lateral de contenidos au-iliares,

Figura 1).1= 6s%uema del dise/o a tres columnas con ca ecera y pie de p!gina

La solución CSS emplea la misma estrategia del dise/o a dos columnas y se asa enutili+ar las propiedades ;l#at y 4l ar ,



Figura 1).11 :ropiedades CSS necesarias en el dise/o a 9 columnas con ca ecera y pie

de p!gina

6l código HTML y CSS mínimos para definir la estructura de la p!gina sin aplicar ningDnestilo adicional son los siguientes,S4# t +#r A

S4a: 4 ra A

Sm A ;l#at & l ;t 5 ' +th & 17 5

S4# t +# A ;l#at & l ;t 5 ' +th & 67 5

S4# t +# S%r 4 %al A ;l#at & l ;t 5 ' +th & 60 5

S4# t +# S 4 +ar # A ;l#at & l ;t 5 ' +th & @0 5

S% A 4l ar & :#th 5



<:#+ ,<+ 2 + "4# t +#r" , <+ 2 + "4a: 4 ra" , </+ 2 ,

<+ 2 + "m ", </+ 2 ,

<+ 2 + "4# t +#" , <+ 2 + "%r 4 %al" , </+ 2 ,

<+ 2 + " 4 +ar #" ,

</+ 2 , </+ 2 ,

<+ 2 + "% ", </+ 2 ,

</+ 2 ,

</:#+ ,

6l código anterior crea una p!gina con anchura #aria le %ue se adapta a la #entana delna#egador. :ara definir una p!gina con anchura fija$ solamente es necesario sustituir lasanchuras en porcentajes por anchuras en pí-el.

*l igual %ue sucedía en el dise/o a dos columnas$ se puede optar por posicionar todos loselementos mediante ;l#at& l ;t o se puede utili+ar ;l#at& l ;t para el menD y la +onaprincipal de contenidos y ;l#at& r (ht para el contenedor de los contenidos y la +onasecundaria de contenidos.E4ercicio 1,

er enunciado

10.>. 6lturas anchuras "+i as 5 ni asCuando se dise/a la estructura de una p!gina "e $ se de e tomar la decisión de optarpor un dise/o de anchura fija o un dise/o cuya anchura se adapta a la anchura de la#entana del na#egador.Sin em argo$ la mayoría de las #eces sería con#eniente una solución intermedia, %ue laanchura de la p!gina sea #aria le y se adapte a la anchura de la #entana del na#egador$





pero respetando ciertos límites. 6n otras pala ras$ %ue la anchura de la p!gina no sea tanpe%ue/a como para %ue no se puedan mostrar correctamente los contenidos y tampocosea tan ancha como para %ue las líneas de te-to no puedan leerse cómodamente.CSS define cuatro propiedades %ue permiten limitar la anchura y altura mínima y m!-imade cual%uier elemento de la p!gina. Las propiedades son ma*-' +th $m -' +th $ma*-h (ht y m -h (ht .

Propiedad &a-'$idt%Valores unidad de medida 6 porcenta2e 6 none 6inheritSe aplica a Todos los elementos salvo 'ilas y grupos de 'ilas de tablasValor inicial noneDescripción +ermite de'inir la anchura m !ima de un elemento

Propiedad &in'$idt%Valores unidad de medida 6 porcenta2e 6inheritSe aplica a Todos los elementos salvo 'ilas y grupos de 'ilas de tablasValor inicial $Descripción +ermite de'inir la anchura m7nima de un elemento

Propiedad &a-'%eig%tValores unidad de medida 6 porcenta2e 6 none 6inheritSe aplica a Todos los elementos salvo columnas y grupos de columnas de tablasValor inicial noneDescripción +ermite de'inir la altura m !ima de un elemento

Propiedad &in'%eig%tValores unidad de medida 6 porcenta2e 6inheritSe aplica a Todos los elementos salvo columnas y grupos de columnas de tablasValor inicial $Descripción +ermite de'inir la altura m7nima de un elemento

5e esta forma$ para conseguir un dise/o de anchura #aria le pero controlada$ se podríanutili+ar reglas CSS como la siguiente,S4# t +#r A m -' +th & 700%* 5 ma*-' +th & 00%*5

Las propiedades %ue definen la altura y anchura m!-ima y mínima se pueden aplicar acual%uier elemento$ aun%ue solamente suelen utili+arse para estructurar la p!gina. 6ngeneral$ las propiedades m!s utili+adas son ma*-' +th y m -' +th $ ya %ue no es muyha itual definir alturas m!-imas y mínimas.5esafortunadamente$ 7nternet 6-plorer @ y las #ersiones anteriores no soportan ningunade las cuatro propiedades so re ningDn elemento. Hasta %ue se incorpore en las nue#as#ersiones del na#egador$ es preciso recurrir a trucos %ue simulen el comportamiento de



























las propiedades,ma*-' +th e%ui#alente para 7nternet 6-plorer,+ 2 A ma*-' +th & 600%* 5 ' +th & *%r # F+#4 m t.:#+ .4l tW +th , 601N "600%*" & "a t#" G5

m -' +th e%ui#alente para 7nternet 6-plorer,+ 2 A m -' +th &600%*5 ' +th & *%r # F+#4 m t.:#+ .4l tW +th < 601N "600%*" & "a t#" G5

ma*-h (ht e%ui#alente para 7nternet 6-plorer,+ 2 A ma*-h (ht & 300%* 5 #2 r;l#' & h ++ 5 h (ht & *%r # Fth . 4r#llH (ht , 301N "300%*" & "a t#" G5

m -h (ht e%ui#alente para 7nternet 6-plorer,+ 2 A m -h (ht &300%*5 #2 r;l#' & h ++ 5 h (ht & *%r # Fth . 4r#llH (ht < 301N "300%*" & "a t#" G5

Los e%ui#alentes para 7nternet 6-plorer han sido e-traídos de,http,&&""".s#endtofte.com&code&ma- "idth in ie&

10.?. Estilos avan2ados6n general$ la columna de los contenidos es la m!s larga y la columna de na#egación esla m!s corta. 6l principal incon#eniente de los dise/os mostrados anteriormente es %ue nose puede garanti+ar %ue todas las columnas se muestren con la misma altura.Si las columnas tienen algDn color o imagen de fondo$ este comportamiento no esadmisi le$ ya %ue se #ería %ue alguna columna no llega hasta el final de la columna m!slarga y el dise/o final parecería inaca ado.5esde la aparición de este pro lema se han presentado numerosas soluciones. La m!sconocida es la t(cnica fau) columns ' "columnas falsas" ) y %ue simula el color&imagen de



fondo de las columnas laterales mediante la imagen de fondo de la columna central decontenidos.La t(cnica fue presentada originalmente por 5an Cederholm en su c(le re artículo "0au)Columns" 'http,&&alistapart.com&articles&fau-columns&).M!s recientemente se ha presentado el proyecto "/n Search of the 1ne True Layout" %ue

usca definir una serie de t(cnicas %ue permitan crear de forma sencilla cual%uierestructura de p!gina asada en columnas.La p!gina principal del proyecto se puede encontrar en,http,&&""".positionise#erything.net&articles&onetruelayout&

*dem!s$ est! disponi le una herramienta interacti#a para crear dise/os asados encolumnas con la posi ilidad de definir el nDmero de columnas$ su anchura y o ligar a %uetodas las columnas muestren la misma altura,

Figura 1).1) Herramienta online para dise/ar layouts de #arias columnas con CSS

La herramienta interacti#a se puede encontrar en,http,&&""".fu0<.org&ale-&css&onetruelayout&e-ample&interacti#e

Capítulo 19. Gtros

1,.1. 8ropiedades shorthand

Las propiedades de tipo "shorthand" son propiedades de CSS %ue permiten esta lecer deforma simult!nea el #alor de #arias propiedades diferentes pero relacionadas. 6l uso de



las propiedades "shorthand" es muy e-tendido$ ya %ue permiten crear hojas de estilosm!s compactas.

* continuación se incluye a modo de referencia todas las propiedades de tipo "shorthand" %ue se han mostrado anteriormente.Propiedad

)ontValores

3 3 'ont-style 66 'ont-variant 66 'ont-@eight 4= 'ont-si1e 3 E line-height 4= 'ont-'amily 4 6

caption 6 icon 6 menu 6 message-bo! 6 small-caption 6 status-bar 6 inheritSe aplica a Todos los elementosValor inicial -Descripción +ermite indicar de 'orma directa todas las propiedades de la tipogra'7a de un te!to

Propiedad &arginValores 3 unidad de medida 6 porcenta2e 6 auto 4 %, 9: 6inherit

Se aplica aTodos los elementos salvo algunos casos especiales de elementos mostrados como

tablasValor inicial -Descripción stablece de 'orma directa todos los m rgenes de un elemento

Propiedad paddingValores 3 unidad de medida 6 porcenta2e 4 %, 9: 6inherit

Se aplica aTodos los elementos e!cepto algunos elementos de tablas como grupos de cabeceras y

grupos de pies de tablaValor inicial -

Descripción stablece de 'orma directa todos los rellenos de los elementosPropiedad !orderValores 3 unidad de medida <borde 66 color <borde 66 estilo<borde 4 6inheritSe aplica a Todos los elementosValor inicial -Descripción stablece el estilo completo de todos los bordes de los elementos

Propiedad !ac+groundValores

3 bac(ground- color 66 bac(ground-image 66 bac(ground-repeat 66 bac(ground-attachment

66 bac(ground-position 4 6 inheritSe aplica a Todos los elementosValor inicial -Descripción stablece todas las propiedades del 'ondo de un elemento

Propiedad list'st*leValores 3 list-style-type 66 list-style-position 66 list-style-image 4 6 inheritSe aplica a lementos de una listaValor inicial -Descripción +ropiedad .ue permite establecer de 'orma simultanea todas las opciones de una lista

































19.0. @ersión para i pri ir La mayoría de sitios "e de calidad ofrecen al usuario la posi ilidad de imprimir suscontenidos mediante una #ersión específica para impresora de cada p!gina.6stas #ersiones optimi+adas para impresora eliminan los contenidos superfluos$ modifican

o eliminan las im!genes y colores de fondo y so re todo$ optimi+an los contenidos dete-to para facilitar su lectura.CSS simplifica al m!-imo la creación de una #ersión para imprimir gracias al concepto delos medios CSS. Como se sa e$ los estilos CSS %ue se aplican a los contenidos pueden#ariar en función del medio a tra#(s del %ue se acceden 'pantalla$ tele#isor$ mó#il$impresora$ etc.)5e esta forma$ reali+ar una #ersión para imprimir de una p!gina HTML es tan sencillocomo crear unas cuantas reglas CSS %ue optimicen sus contenidos para conseguir la

mejor impresión.6l sitio "e * List *part es un e-celente ejemplo de cómo los sitios "e de calidad crean#ersiones específicas para impresora de las p!ginas "e originales. Cuando se #isuali+aun artículo de ese sitio "e en una pantalla normal$ su aspecto es el siguiente,

Figura 1,.1 *specto de un artículo de * List *part como se #e en la pantalla

*dem!s de sus contenidos$ las p!ginas de los artículos muestran el logotipo del sitio$ elmenD principal de na#egación y una arra lateral con #arias utilidades como un uscador.Sin em argo$ cuando se imprime la p!gina del mismo artículo$ su aspecto es el %uemuestra la siguiente imagen,

http://www.alistapart.com/





Figura 1,.) *specto de un artículo de * List *part como se #e cuando se imprime

La p!gina impresa elimina todos los contenidos superfluos como los menDs dena#egación$ el uscador y el formulario para a/adir comentarios en el artículo. *dem!s$modifica la estructura de la p!gina para %ue la +ona de contenidos ocupe toda la anchurade la p!gina y el espacio se apro#eche mejor.Crear una #ersión para imprimir similar a la mostrada en el ejemplo anterior es una tarea%ue no lle#a m!s de unos pocos minutos.

Las reglas CSS de la #ersión para imprimir se aplican solamente al medio %r t . :or lotanto$ en primer lugar se crea una nue#a hoja de estilos y al enla+arla se especifica %uesólo de e aplicarse en las impresoras,<l r l " t l h t" t % "t *t/4 " hr ; "/4 / m%r m r.4 " m + a "%r t"/ ,

Iormalmente$ las hojas de estilos para la pantalla se aplican a todos los medios 'porutili+ar el #alor m + a "all" al enla+arla o por no indicar ningDn #alor en el atri uto m + a).

:or este moti#o$ cuando se imprime una p!gina se aplican los mismos estilos %ue seaplican al #isuali+arla en la pantalla.

*pro#echando este comportamiento$ las hojas de estilos para impresoras son muysencillas$ ya %ue sólo de en modificar algunos estilos aplicados en el resto de hojas deestilos.:or este moti#o$ normalmente las hojas de estilos para impresora se construyen siguiendolos pasos %ue se muestran a continuación,1) Bcultar los elementos %ue no se #an a imprimir,S4a: 4 ra Sm Slat ral S4#m tar # A + %la & # ! m%#rta t 5



Los lo%ues 'normalmente encerrados en elementos de tipo <+ 2, ) %ue no se #an aimprimir se ocultan con la propiedad + %la y su #alor # . La pala ra cla#e ! m%#rta t

aumenta la prioridad de esta regla CSS y m!s adelante se e-plica su significado.0) Corregir la estructura de la p!gina,:#+ S4# t +# S%r 4 %al S% A ;l#at & # ! m%#rta t 5 ' +th & a t# ! m%#rta t 5 mar( & 0 ! m%#rta t 5 %a++ (& 0 ! m%#rta t 5

Iormalmente$ las p!ginas "e complejas est!n formadas por #arias columnasposicionadas mediante la propiedad ;l#at . Si al imprimir la p!gina se eliminan las

columnas laterales$ es con#eniente reajustar la anchura y el posicionamiento de la +onade contenidos y de otras +onas %ue sí se #an a imprimir.9) Modificar los colores y tipos de letra,:#+ A 4#l#r & S000 5 ;# t & 100 /170 ] #r( a "T m $ ' )#ma " T m r ; 5

*un%ue el uso de impresoras en color es mayoritario$ suele ser con#eniente imprimir todoel te-to de las p!ginas de color negro$ para ahorrar costes y para aumentar el contraste

cuando se imprime so re hojas de color lanco. Tam i(n suele ser con#eniente modificarel tipo de letra y escoger uno %ue facilite al m!-imo la lectura del te-to.

1,.).1. I pri iendo los enlaces

no de los principales pro lemas de las p!ginas HTML impresas es la p(rdida de toda lainformación relati#a a los enlaces. 6n principio$ imprimir los enlaces de una p!gina esa surdo por%ue no se pueden utili+ar en el medio impreso.Sin em argo$ lo %ue puede ser realmente Dtil es mostrar al lado de un enlace la direccióna la %ue apunta. 5e esta forma$ al imprimir la p!gina no se pierde la información relati#a alos enlaces.CSS incluye una propiedad llamada 4# t t %ue permite crear nue#os contenidos dete-to para a/adirlos a la p!gina HTML. Si se com ina la propiedad 4# t t y el pseudo-elemento &a;t r $ es posi le insertar de forma din!mica la dirección a la %ue apunta unenlace justo despu(s de su te-to,a&a;t r A 4# t t & " F" attr Fhr ; G "G " 5

6l código CSS anterior a/ade despu(s de cada enlace de la p!gina un te-to formado por



la dirección a la %ue apunta el enlace mostrada entre par(ntesis. Si se %uiere a/adir lasdirecciones antes de cada enlace$ se puede utili+ar el pseudo-elemento &: ;#r ,a&: ;#r A 4# t t & " F" attr Fhr ; G "G " 5

19.9. 8ersonali2ar el cursor CSS no permite modificar los elementos propios del na#egador o de la interfa+ de usuariodel sistema operati#o. Sin em argo$ el puntero del ratón es una e-cepción muyimportante$ ya %ue se puede modificar mediante la propiedad 4 r #r .

Propiedad cursor

Valores 3 3url ,4A 3 auto 6 crosshair 6 de'ault 6 pointer 6 move 6 e-resi1e 6 ne-resi1e 6 n@-resi1e 6 n-resi1e 6 se-resi1e 6 s@-resi1e 6 s-resi1e 6 @-resi1e 6 te!t 6 @ait 6 help 6 progress 4 4 6inherit

Se aplica a Todos los elementosValor inicial autoDescripción +ermite personali1ar el puntero del ratón

La propiedad 4 r #r no sólo permite seleccionar un puntero entre los disponi les en elsistema operati#o 'flecha$ mano$ reloj de arena$ redimensionar$ etc.) sino %ue inclusopermite indicar la FL de una imagen %ue se %uiere mostrar como puntero personali+ado.Se pueden indicar #arias FL para %ue CSS intente cargar #arias im!genes, si la primera

imagen del puntero no se carga o no la soporta el na#egador$ se pasa a la siguienteimagen y así sucesi#amente hasta %ue se pueda cargar alguna imagen.6l siguiente ejemplo muestra el caso de un puntero definido con #arias FL y un #alorest!ndar,&l &2 t + A 4 r #r & rl F% t r#. 2( G rl F% t r#.4 r G %# t r

Si el na#egador soporta las im!genes en formato S $ el puntero del ratón cam ia suaspecto por la imagen % t r#. 2( . Si el na#egador no soporta el formato S $ intenta

cargar la siguiente FL %ue define un puntero en formato .4 r . Si no se puede cargarcorrectamente$ se mostraría el #alor preesta lecido %# t r .Los #alores preesta lecidos para el puntero se muestran a continuación,

Puntero Navegadores ue lo soportan 4 r #r& + ;a lt Todos 4 r #r& 4r# ha r Todos 4 r #r& ha + )olo Internet !plorer 4 r #r& %# t r Todos salvo Internet !plorer 4 r #r&%# t r5 4 r #r& ha + Todos

4 r #r& m#2 Todos 4 r #r& t *t Todos 4 r #r& 'a t Todos





Puntero Navegadores ue lo soportan 4 r #r& h l% Todos 4 r #r& -r = Todos 4 r #r& -r = Todos 4 r #r& -r = Todos

4 r #r& -r = Todos 4 r #r& -r = Todos 4 r #r& '-r = Todos 4 r #r& '-r = Todos 4 r #r& '-r = Todos 4 r #r& %r#(r )olo Internet !plorer 4 r #r& #t-all#' + )olo Internet !plorer 4 r #r& #-+r#% )olo Internet !plorer 4 r #r& 2 rt 4al-t *t )olo Internet !plorer 4 r #r& all- 4r#ll )olo Internet !plorer 4 r #r& 4#l-r = )olo Internet !plorer 4 r #r& r#'-r = )olo Internet !plorer 4 r #r& rlF...G )olo Internet !plorer

6l puntero personali+ado m!s utili+ado es la opción 4 r #r& %# t r y 4 r #r& ha + %uemuestra en el puntero una mano %ue puede pinchar so re el elemento. Btro puntero muyutili+ado es 4 r #r& m#2 %ue permite indicar en las aplicaciones "e din!micas loselementos de la p!gina %ue se pueden mo#er.

Se puede #er un ejemplo de cada uno de los punteros y la compati ilidad con losdiferentes na#egadores en la siguiente p!gina, http,&&""".echoecho.com&csscursors.htm

19.>. $acHs 5 filtros

Los diferentes na#egadores y las diferentes #ersiones de cada na#egador incluyendefectos y carencias en su implementación del est!ndar CSS 0.1. *lgunos na#egadoresno soportan ciertas propiedades$ otros las soportan a medias y otros ignoran el est!ndar eincorporan su propio comportamiento.5e esta forma$ dise/ar una p!gina compleja %ue presente un aspecto homog(neo en#arios na#egadores y #arias #ersiones diferentes de cada na#egador es una tarea %uere%uiere mucho esfuer+o. :ara facilitar la creación de hojas de estilos homog(neas$ sehan introducido los filtros y los hac#s .

* pesar de %ue utili+ar filtros y hac#s es una solución poco ortodo-a$ en ocasiones es laDnica forma de conseguir %ue una p!gina "e muestre un aspecto id(ntico en cual%uierna#egador.

6n primer lugar$ los filtros permiten definir u ocultar ciertas reglas CSS para algunosna#egadores específicos. Los filtros se definen apro#echando los errores de algunosna#egadores 'so re todo los antiguos) a la hora de procesar las hojas de estilos.

n caso especial de filtro son los comentarios condicionales$ %ue es un mecanismopropietario del na#egador 7nternet 6-plorer. Los comentarios condicionales permitenincluir hojas de estilos o definir reglas CSS específicamente para una #ersión de 7nternet6-plorer.6l siguiente ejemplo carga la hoja de estilos :a 4# .4 solamente para losna#egadores de tipo 7nternet 6-plorer,<!-- ; IEQ, < t l t % "t *t/4 ", m%#rt F":a 4# .4 "G5 </ t l ,

<! + ;Q--,

Los na#egadores %ue no son 7nternet 6-plorer ignoran las reglas CSS anteriores ya %ueinterpretan el código anterior como un comentario de HTML 'gracias a los caracteres <!-- y --, ) mientras %ue los na#egadores de la familia 7nternet 6-plorer lo interpretan comouna instrucción propia y #!lida.6l filtro ; IEQ indica %ue esos estilos CSS sólo de en tenerse en cuenta si el na#egador es cual%uier #ersión de 7nternet 6-plorer. tili+ando comentarios condicionales$ tam i(n

es posi le incluir reglas CSS para #ersiones específicas de 7nternet 6-plorer,<!-- ; (t IE Q, < t l t % "t *t/4 ", m%#rt F":a 4# .4 "G5 </ t l ,

<! + ;Q--,

6l anterior ejemplo solamente carga la hoja de estilos :a 4# .4 si el na#egador es

la #ersión @ o superior de 7nternet 6-plorer$ ya %ue(t

se interpreta como "greater than or e!ual" 'Aigual o mayor %ueA). Btros #alores disponi les son (t ' "greater than" o Amayor%ueA)$lt ' "less than" o Amenor %ueA) y lt ' "less than or e!ual" o Aigual o menor %ueA).<!-- ; (t IE Q, Ma #r I t r t E*%l#r r

<! + ;Q--,

<!-- ; (t IE Q, Ma #r # ( al I t r t E*%l#r r

<! + ;Q--,

<!-- ; lt IE 6Q, M #r I t r t E*%l#r r 6

<! + ;Q--,

<!-- ; lt IE Q, I( al # m #r I t r t E*%l#r r <! + ;Q--,

na de las mejores listas actuali+adas con todos los filtros disponi les para losna#egadores de los diferentes sistemas operati#os se puede encontrar enhttp,&&centricle.com&ref&css&filters&:or otra parte$ los hac#s permiten for+ar el comportamiento de un na#egador para %ue secomporte tal y como se espera. Se trata de una forma poco elegante de crear las hojas de

estilos y los hac#s se pueden considerar pe%ue/os parches y chapu%as %ue permiten %uela hoja de estilos completa se muestre tal y como se espera.

no de los hac#s m!s conocidos y utili+ados es el llamado J html . Todas las propiedadesCSS %ue se esta le+can mediante el selector J html son interpretadas e-clusi#amentepor el na#egador 7nternet 6-plorer @ y sus #ersiones anteriores,+ 2 A :#r+ r-:#tt#m & 1%* +#tt + S000 5

J html + 2 A :#r+ r-:#tt#m & 1%* #l + S000 5

6l ejemplo anterior utili+a el hac# J html para mostrar un orde inferior punteado enlos <+ 2, en todos los na#egadores sal#o 7nternet 6-plorer @. Como en este na#egador nose muestran correctamente los ordes punteados de 1 pí-el de anchura$ se decidemostrar un orde formado por una línea continua.6l otro hac# m!s conocido y utili+ado por su sencille+ es el "underscore hac#" . Laspropiedades cuyos nom res se indi%uen con un guión ajo por delante$ sólo soninterpretadas por el na#egador 7nternet 6-plorer @ y sus #ersiones anteriores,Sm A %# t # & ; * + 5 %# t # & tat 4 5

Los na#egadores m!s modernos soportan el #alor ; * + para la propiedad %# t # $ pero

7nternet 6-plorer @ no la soporta. :or este moti#o$ la regla CSS anterior esta lece el #alorde la propiedad %# t # y seguidamente define la propiedad %# t # .



Los na#egadores %ue siguen los est!ndares recha+an la propiedad %# t # $ ya %ue sunom re no se corresponde con ninguna propiedad #!lida de CSS. 7nternet 6-plorer @ y las#ersiones anteriores$ consideran correcta tanto %# t # como %# t # $ por lo %ue el#alor utili+ado ser! el %ue se haya definido en Dltimo lugar ' tat 4 en este caso).

na de las mejores listas actuali+adas con los hac<s m!s Dtiles para #arios na#egadoresde diferentes sistemas operati#os se puede encontrar en, http,&&cssGdiscuss.incutio.com&pageOCssHac<

19.?. 8rioridad de las declaraciones CSS *dem!s de las hojas de estilos definidas por los dise/adores$ los na#egadores aplican acada p!gina otras dos hojas de estilos, la del na#egador y la del usuario.La hoja de estilos del na#egador es la primera %ue se aplica y se utili+a para esta lecer elestilo inicial por defecto a todos los elementos HTML 'tama/os de letra iniciales$decoración del te-to$ m!rgenes entre elementos$ etc.)

*dem!s de la hoja de estilos del na#egador$ cada usuario puede crear su propia hoja deestilos y aplicarla autom!ticamente a todas las p!ginas %ue #isite con su na#egador. Setrata de una opción muy Dtil para personas discapacitadas #isualmente$ ya %ue puedenaumentar el contraste y el tama/o del te-to de todas las p!ginas para facilitar su lectura.La forma en la %ue se indica la hoja de estilo del usuario es diferente en cada na#egador.

* continuación se muestra cómo se hace en los na#egadores m!s populares,

Internet E+plorer %#:incha so re el menD H rram ta y despu(s so re la opción O%4 # + I t r t

#6n la pesta/a ] ral %ue se muestra$ pulsa so re el otón 44 : l +a+ %ue se

encuentra dentro de la sección %ar 4 a

?#6n la nue#a #entana %ue aparece$ acti#a la opción Z#rmat ar l# +#4 m t# 4# m

h#8a + t l# y selecciónala pulsando so re el otón E*am ar...

9#:ulsa 4 %tar hasta #ol#er al na#egador

Firefo+%#uarda tu hoja de estilos en un archi#o llamado rC# t t.4

#6ntra en el directorio de tu perfil de usuario de Eirefo-. 6n los sistemas operati#os

8indo"s este directorio se encuentra normalmente en C&^D#4 m t a + 9 tt ( ^

t ar # + ' +#' Q^Dat# + %r#(rama^M#= lla^Z r ;#*^Pr#; l ^

4a+ a al at#r a + l tra m r# Q.+ ;a lt

?#Copia la hoja de estilos rC# t t.4 en el directorio 4hr#m de tu perfil

>.Feinicia el na#egador para %ue se apli%uen los cam ios

Safari



%#:incha so re el menD E+ tar y despu(s so re la opción Pr ; r 4 a

#Selecciona la sección 2a =a+#

?#:incha so re la lista desplega le llamada H#8a + t l# y selecciona la

opción Otra...

>.6n la #entana %ue aparece$ selecciona tu hoja de estilos

Gpera%#:incha so re el menD H rram ta y despu(s so re la opción Pr ; r 4 a

#Selecciona la pesta/a 2a =a+# y pulsa so re el otón O%4 # + t l#...

?#:ulsa so re el otón 9 l 44 # ar... para seleccionar la hoja de estilos

9#:ulsa 4 %tar hasta #ol#er al na#egador

6l orden normal en el %ue se aplican las hojas de estilo es el siguiente,

Figura 1,., Brden en el %ue se aplican las diferentes hojas de estilos

:or tanto$ las reglas %ue menos prioridad tienen son las del CSS por defecto de losna#egadores$ ya %ue son las primeras %ue se aplican. * continuación se aplican las reglasdefinidas por los usuarios y por Dltimo se aplican las reglas CSS definidas por eldise/ador$ %ue por tanto son las %ue m!s prioridad tienen.

*dem!s de estas hojas de estilos$ CSS define la pala ra reser#ada ! m%#rta t paracontrolar la prioridad de las declaraciones de las diferentes hojas de estilos.Si a una declaración CSS se le a/ade la pala ra reser#ada ! m%#rta t $ se aumenta suprioridad. 6l siguiente ejemplo muestra el uso de ! m%#rta t ,% A 4#l#r & r + ! m%#rta t 5

4#l#r & :l 5

Si la primera declaración no tu#iera a/adido el #alor ! m%#rta t $ el color de los p!rrafossería a+ul$ ya %ue en el caso de declaraciones de la misma importancia$ pre#alece laindicada en Dltimo lugar.Sin em argo$ como la primera declaración se ha marcado como de alta prioridad 'graciasal #alor ! m%#rta t )$ el color de los p!rrafos ser! el rojo.

6l #alor ! m%#rta t no sólo afecta a las declaraciones simples$ sino %ue #aría la prioridadde las hojas de estilo. Cuando se indican declaraciones de alta prioridad$ el orden en el%ue se aplican las hojas de estilo es el siguiente,



Figura 1,. Brden en el %ue se aplican las diferentes hojas de estilos cuando se utili+a lapala ra rese#ada important

Los estilos del usuario marcados como ! m%#rta t tienen m!s prioridad %ue los estilosmarcados como ! m%#rta t en la hoja de estilos del dise/ador. 5e esta forma$ ningunap!gina "e puede so reescri ir o redefinir ninguna propiedad de alta prioridadesta lecida por el usuario.Si se aplica el #alor ! m%#rta t a una propiedad de tipo "shorthand" $ se interpreta como sise hu iera aplicado el #alor ! m%#rta t a cada una de las propiedades indi#iduales.

19.@. @alidador La #alidación del código CSS y de las reglas %ue lo forman es un concepto similar a la#alidación de documentos XHTML.La #alidación es un mecanismo %ue permite compro ar %ue el código CSS creado cumplelas reglas de la sinta-is del lenguaje CSS y %ue por tanto es una hoja de estilos #!lidapara aplicarla a cual%uier documento XHTML.

La #alidación suele ser Dtil cuando se producen errores en los estilos definidos ocomportamientos no deseados al aplicar las reglas CSS. 6n muchas ocasiones$ loserrores se producen por%ue el na#egador est! ignorando algunas reglas %ue contienenpropiedades mal definidas o errores de sinta-is.6l 89C ' 2orld 2ide 2eb Consortium ) dispone de un #alidador online %ue permite #alidarreglas CSS sueltas$ p!ginas XHTML con CSS incluído y archi#os CSS independientes. 6l#alidador se puede acceder en http,&&jigsa"."9.org&cssG#alidator&

19.3. 9eco endaciones generales so!re CSS1,.;.1. 6tri!utos I* 5 class

6l atri uto + se emplea para identificar a cada elemento HTML$ por lo %ue losidentificadores de en ser Dnicos en una misma p!gina. 6n otras pala ras$ dos elementosHTML diferentes de una misma p!gina no pueden tener un mismo #alor en el atri uto +.:or otra parte$ el atri uto 4la se emplea para indicar la clase o clases a las %ue

pertenece el elemento. na misma clase se puede aplicar a #arios elementos diferentes yun Dnico elemento puede tener asignadas #arias clases 'se indican separadas porespacios en lanco).



*un%ue los dos atri utos tienen muchos otros propósitos 'so re todo el atri uto +)$ CSSlos emplea principalmente con los selectores para indicar los elementos so re los %ue seaplican los diferentes estilos.6n el siguiente ejemplo$ las dos listas est!n formadas por un mismo elemento HTML < l, $pero sus atri utos + las distinguen de forma adecuada,< l + "m ", ...

</ l ,

< l + " la4 " , ...

</ l ,

na de las principales recomendaciones del dise/o de p!ginas XHTML y hojas de estilosCSS est! relacionada con los #alores asignados a los atri utos + y 4la . Siempre %uesea posi le$ estos atri utos se de en utili+ar para mejorar la sem!ntica del documento$ esdecir$ para a/adir significado a cada elemento de la p!gina.:or este moti#o$ se recomienda %ue los #alores asignados a + y 4la indi%uen lafunción del elemento y no est(n relacionados con su aspecto o su posición,Valores no reco&endados Valores reco&endadosnegrita importantearial%5 titular verdana+e.uena normalmenuI1.uierdo menu)ecundarioletraHo2a error

6legir el #alor adecuado para los atri utos + o 4la es sencillo, si el aspecto de unelemento cam ia$ el #alor de + o 4la de e seguir siendo adecuado. :or tanto$ e#itautili+ar #alores relacionados con su posición ' = r+#$+ r 4h# $%r m r#$

( +#$ % r #r$ etc.)$ color ' t *t#)#8# $ :ra a+#]r Clar# $ etc.) o tipo de letra' 2 r+a a10 $ar al17%* $ etc.)

T(cnicamente$ los #alores de los atri utos + y 4la de en cumplir las siguientesrestricciones,• Sólo pueden empe+ar por un guión medio ' - )$ un guión ajo ' ) o una letra.

• 6l resto de caracteres$ pueden ser nDmeros$ guiones medios ' - )$ guiones ajos ' ) y

letras.• Los na#egadores distinguen entre mayDsculas y minDsculas.

• *un%ue es posi le utili+ar letras como y acentos$ no se recomienda hacerlo por%ue no

es seguro %ue funcione correctamente en todas las #ersiones de todos los na#egadores.



1,.;.). C'6SSitis 5 *I@itis

n error comDn al comen+ar a desarrollar p!ginas con estilos CSS es la utili+acióne-cesi#a de eti%uetas <+ 2, y atri utos 4la .6jemplo de divitis y classitis ,

<+ 2 + "m ",< l 4la "m ", <l 4la " l m t# m ",< %a 4la "t *t# l m t# m " ,...< / %a ,< / l , <l 4la " l m t# m ",< %a 4la "t *t# l m t# m " ,...< / %a ,< / l , <l 4la " l m t# m ",< %a 4la "t *t# l m t# m " ,...< / %a ,< / l , <l 4la " l m t# m ",< %a 4la "t *t# l m t# m " ,...< / %a ,< / l ,

</ l ,

</ + 2,

Los selectores de CSS permiten prescindir de la mayoría de eti%uetas <+ 2, y atri utos + y 4la . 5ise/ar p!ginas con e-ceso de eti%uetas <+ 2, no mejora la sem!ntica deldocumento y sólo consigue complicar el código HTML.

1,.;.,. Estructuración del código CSS

La posi ilidad de incluir todo el código CSS en archi#os e-ternos e-clusi#amentededicados a contener las reglas CSS$ permite ordenar de forma lógica las reglas$

mejorando su legi ilidad y facilitando su actuali+ación.Las reglas CSS de las hojas de estilos complejas se suelen agrupar segDn sufuncionalidad y se suelen incluir en el siguiente orden,• 6stilos !sicos ' <:#+ , $ tipo de letra por defecto$ m!rgenes de < l, $<#l, y <l , $ etc.)

• 6stilos de la estructura o layout 'anchura$ altura y posición de la ca ecera$ pie de p!gina$

+onas de contenidos$ menDs de na#egación$ etc.)• 6nlaces 'estilos normales$ estilos &h#2 r$ etc.)

• 6stilos de cada una de las +onas 'elementos de la ca ecera$ titulares y te-to de la +ona

de contenidos$ enlaces$ listas e im!genes de las +onas laterales$ etc.)

Btra característica comDn de los mejores sitios "e es el uso de comentarios CSS paramejorar la estructura de las hojas de estilos muy largas.6jemplo de código CSS estructurado de http,&&#eerle.duoh.com&/J ? rl :l#( Ma t l h t

------------------------------------------------------------------J/

/J W + :r#' r ' +#'------------------------------------------------------------------J/

S'ra% A



' +th & 7%*5

/J ]l#:al

------------------------------------------------------------------J/html :#+ ;#rm h1 h@ h3 hR h7 h % %r :l#4 #t l #l +l A mar( &05 %a++ (&05

l l A l t- t l -t % & # 5

...

/J W + la # t

------------------------------------------------------------------J/

.' + S'ra%-ma A ...

...

/J L------------------------------------------------------------------J/

a&la&2 t + A t *t-+ 4#rat # & # 5 4#l#r &S R7aR 5

/J H a+ r

------------------------------------------------------------------J/

Sh a+ r A ...

...

/J Ma a2 (at #

------------------------------------------------------------------J/l S a2 A



...

...

6jemplo de código CSS estructurado de http,&&""".u-mag.com&/J ------------------------------------------------------------- UX Ma(a= D ( T 4h #l#( 9trat ( C#mm# 9 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D 4r %t # & Ba t % t l Z l am & *m.:a .4 ? r # & 1. Dat & Z : @00

------------------------------------------------------------- J/

/J ------------------------------------------------------------- Ba B#+ 9t l - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - J/

/J ------------------------------------------------------------- Pr t 9t l

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - J/

/J ------------------------------------------------------------- T#% Bar 9t l - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - J/

/J 9l#(a - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - J/

/J 9 ar4h Z#rm - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - J/

/J Cha l - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - J/

1,.;. . *ivisión de los estilos en varios archivos CSS

Iormalmente$ los estilos de una p!gina compleja se di#iden en #arios archi#os CSSdiferentes para hacerlos m!s maneja les. 6n primer lugar$ se suele utili+ar un archi#ocomDn %ue contiene todos los estilos !sicos de las p!ginas HTML del sitio "e .

*dem!s$ si e-iste alguna sección especial del sitio "e %ue re%uiera nue#os estilos$ se



crea un archi#o CSS con todos esos estilos. Tam i(n es ha itual preparar una hoja deestilos específica para impresora y otra preparada para los dispositi#os mó#iles.

na #e+ creados los archi#os CSS$ e-isten dos estrategias para enla+ar #arios archi#osCSS en las p!ginas HTML,Si se puede modificar f!cilmente la ca ecera del documento 'por ejemplo por%ue lasp!ginas se generan din!micamente) lo ha itual es incluir tantos elementos <l , comoarchi#os CSS se enla+an,<h a+, ... <l r l " t l h t" t % "t *t/4 " hr ; "/4 /:a 4#.4 "

m + a " 4r " / , <l r l " t l h t" t % "t *t/4 " hr ; "/4 / 44 # .4 "

m + a " 4r " / ,

<l r l " t l h t" t % "t *t/4 " hr ; "/4 / m%r #ra.4 " m + a "%r t" / , <l r l " t l h t" t % "t *t/4 " hr ; "/4 /m#2 l.4 "

m + a "ha +h l+" / , ...

</ h a+,

Si no se puede modificar de forma sencilla la ca ecera de los documentos para a/adir$

eliminar y modificar los archi#os CSS %ue se enla+an$ lo ha itual es enla+ar un Dnicoarchi#o CSS %ue se encarga de importar todos los dem!s,<h a+, ... <l r l " t l h t" t % "t *t/4 " hr ; "/4 / t l# .4 " m + a "all"

/ , ...

</ h a+,

6l contenido del archi#o t l# .4 de ería ser el siguiente para ser e%ui#alente alejemplo anterior,

m%#rt rlF":a 4#.4 "G 4r 5

m%#rt rlF" 44 # .4 "G 4r 5

m%#rt rlF" m%r #ra.4 "G %r t5

m%#rt rlF"m#2 l.4 "G ha +h l+5

Capítulo 1>. 9ecursos tiles5isponer de una uena colección de recursos realmente Dtiles es una de las



características %ue diferencian a los dise/adores "e profesionales del resto.6n primer lugar$ resulta imprescindi le instalar en el na#egador Eirefo- #arias e-tensionesrelacionadas con el dise/o "e . Todas estas e-tensiones facilitan el tra ajo$ ayudan adescu rir r!pidamente la causa de los errores del dise/o y en general mejorannota lemente la producti#idad de los dise/adores.

*dem!s$ siempre es necesario disponer de #arias galerías de p!ginas como fuente deinspiración y colecciones de enlaces a uenos recursos relacionados con el dise/o "e .:or Dltimo$ tam i(n es necesario estar al día de las Dltimas t(cnicas y no#edadesmediante sitios "e y logs dedicados en e-clusi#a al dise/o "e .

1>.1. E+tensiones de Firefo+Si te dedicas profesionalmente al dise/o de p!ginas y aplicaciones "e $ seguramente tuna#egador preferido para tra ajar es Eirefo-. Si no lo conoces$ puedes descargargratuitamente Eirefo- desde su sitio "e oficial, http,&&""".mo+illa.com&firefo-Las principales #entajas de Eirefo- desde el punto de #ista del dise/ador y creador dep!ginas "e es %ue respeta los est!ndares del 89C mucho m!s %ue los na#egadores dela familia 7nternet 6-plorer. *dem!s$ permite instalar pe%ue/os a/adidos$ llamadose-tensiones$ %ue a/aden funcionalidades al na#egador.

na e-tensión se puede considerar como un pe%ue/o programa %ue se instala dentro delna#egador y %ue a/ade alguna característica interesante %ue el na#egador no incorpora

de serie. Lo mejor de las e-tensiones de Eirefo- es %ue e-isten cientos de e-tensiones$pr!cticamente todas son gratuitas y casi todas son realmente Dtiles.6l sitio "e de Eirefo- incluye una sección especial llamada AComplementosA en la %ue sepuede encontrar el listado completo de e-tensiones disponi les para Eirefo- . *continuación se muestra una pe%ue/a selección de algunas de las e-tensiones m!sinteresantes para los dise/adores de p!ginas "e .

1 .1.1. Fire!ug

Eire ug es la e-tensión m!s Dtil y completa de todas las %ue est!n relacionadas con eldise/o "e . Io importa si tu especialidad es XHTML$ CSS$ Ra#aScript$ 5BM o *R*X$ ya%ue Eire ug proporciona toda la información posi le so re cada uno de estos temas.Como Eire ug tiene tantas opciones$ sería necesario un li ro entero para e-plicar susposi ilidades. :or ello$ lo mejor es %ue instales la e-tensión y la prue es en tus proyectos"e .

http://addons.mozilla.org/es-ES/firefox/

https://addons.mozilla.org/firefox/1843/

http://addons.mozilla.org/es-ES/firefox/




Figura 1 .1 6-tensión Eire ug para Eirefo-

:ro a lemente$ despu(s de #arios meses de uso de Eire ug$ seguir!s descu riendonue#as opciones muy Dtiles y seguir!s agradeciendo a su creador las horas de tra ajo%ue te ha ahorrado.

1 .1.). e! *eveloper

*ntes de %ue e-istiera Eire ug$ la e-tensión 8e 5e#eloper era la m!s Dtil para losdise/adores "e . Se trata de una arra %ue se instala junto con el resto de herramientasdel na#egador y %ue !sicamente se puede utili+ar para o tener información so re lap!gina,

Figura 1 .) 6-tensión 8e 5e#eloper para Eirefo-

*dem!s de proporcionar información$ la e-tensión 8e 5e#eloper incluye utilidades %ueEire ug toda#ía no incorpora$ como la redimensión de la #entana del na#egador a lasdimensiones m!s utili+adas$ recuadrar todos los elementos de un determinado tipo'celdas de ta la$ di#s$ etc.)$ mostrar una lupa$ una regla redimensiona le$ mostrar loselementos de tipo h ++ $ mostrar la ruta de cada imagen$ etc.

1 .1.,. $%&' @alidator

na uena pr!ctica$ y un re%uisito impuesto por muchos clientes$ es %ue las p!ginas

XHTML creadas sean #!lidas y por tanto$ pasen el #alidador de HTML y de CSSdisponi le en el 89C. :ara facilitar la #alidación de las p!ginas$ la e-tensión HTML

alidator indica en todo momento los errores y las recomendaciones so re el código










HTML de la p!gina %ue muestra el na#egador.

Figura 1 ., 6-tensión HTML alidator para Eirefo-

Figura 1 . 6-tensión HTML alidator para Eirefo-

1 .1. . Gtras e+tensiones• Color illa , permite o tener el color de cual%uier elemento de la p!gina mediante una

herramienta similar a la de los programas de dise/o gr!fico.• Measure7t , permite medir la altura y anchura de cual%uier elemento de la p!gina.• ie" Source 8ith , permite elegir el programa o editor con el %ue se muestra el código

fuente de la p!gina y los archi#os CSS y Ra#aScript.

• Screengra , permite guardar una p!gina entera como una imagen. Los pantalla%os ' "screenshots" ) tam i(n se pueden reali+ar de una parte concreta de la p!gina




https://addons.mozilla.org/firefox/addon/394






o de los contenidos #isi les en la #entana del na#egador.• 76 Ta , permite #isuali+ar con 7nternet 6-plorer cual%uier p!gina cargada en Eirefo-. La

integración con 7nternet 6-plorer es total$ ya %ue ni si%uiera hace falta a rir ese

na#egador.

1>.0. 6plicaciones :e! * continuación se indican algunas aplicaciones "e %ue pueden ser de utilidad para eldise/ador CSS,• Clean CSS , optimi+a$ ordena$ limpia$ corrige y reduce el tama/o de las hojas de estilos.

• Typetester , permite comparar de forma sencilla diferentes tipos de letra y propiedades

relacionadas con la tipografía y el te-to.

• =ro"sershots , muestra cómo se #isuali+a una misma p!gina "e en diferentesna#egadores de diferentes sistemas operati#os '?? na#egadores en total). 6l uso de la

aplicación es gratuito y se pueden #er y&o descargar las im!genes %ue muestran el

aspecto de la p!gina en cada na#egador.• Stripe enerator , permite generar f!cilmente im!genes preparadas para poder repetirse

en todas direcciones de forma correcta y por tanto$ para %ue puedan ser utili+adas como

im!genes de fondo.

1>.9. Sitios :e! de inspiraciónMuchas #eces resulta Dtil disponer de uenos ejemplos de p!ginas dise/adascompletamente con CSS para tomarlas como referencia y posi le inspiración de losdise/os propios,• 8e Creme , incluye diariamente #arios ejemplos de las mejores p!ginas dise/adas con

CSS y permite reali+ar Ds%uedas a partir del color utili+ado en la p!gina.•

CSS Femi- , muestra centenares de p!ginas dise/adas e-clusi#amente con CSS y con laposi ilidad de puntuar su dise/o.• CSS en arden , es una galería diferente a las tradicionales$ pero se ha con#ertido en

una referencia en cuanto a dise/os complejos reali+ados mediante CSS.• Bpen Source 8e 5esign , sitio "e %ue ofrece cientos de plantillas gratuitas con

posi ilidad de utili+arlas li remente en aplicaciones personales y comerciales.

1>.>. 9eferencias 5 colecciones de recursos• 6specificación oficial de CSS 0.1 , la %ue incluyen todos los na#egadores actuales.



http://www.cleancss.com/

http://www.typetester.org/

http://browsershots.org/

http://www.stripegenerator.com/

http://www.webcreme.com/


http://www.cssremix.com/

http://www.csszengarden.com/

http://www.oswd.org/



http://www.cleancss.com/

http://www.typetester.org/

http://browsershots.org/

http://www.stripegenerator.com/


http://www.cssremix.com/

http://www.csszengarden.com/

http://www.oswd.org/




• 6specificación oficial de CSS 9 , la #ersión %ue est! reempla+ando a la anterior en todos

los na#egadores modernos.• delicious.com&"e 5esign , colección de recursos relacionados con todos los aspectos del

dise/o "e . Lista creada y mantenida por el dise/ador Miguel S!nche+ .• net#i es.com&formacion"e , colección de noticias$ artículos y recursos relacionados conel dise/o "e . Lectura diaria recomendada. Los recursos han sido seleccionados por el

dise/ador Miguel S!nche+• Eoros del 8e , incluyen foros específicos dedicados a resol#er dudas relacionadas con

el dise/o "e con CSS.

http://www.w3.org/Style/CSS/current-work#CSS3

http://delicious.com/webDesign

http://www.miguelsanchez.com/

http://www.netvibes.com/formacionweb


http://www.forosdelweb.com/


http://www.w3.org/Style/CSS/current-work#CSS3

http://delicious.com/webDesign


http://www.netvibes.com/formacionweb



introduccion a css libros web

Documents