Diplomado en Tecnologa Web

Mdulo II. Diseo de Hojas de Estilo - CSS

Ing. sca! "mest# Mt!. oamest#$gmail.com

Contenido
".- CSS %asico& Int!oduccin' sinta(is # como utili)a! CSS en paginas *eb. %.- Estilos CSS& Elementos pa!a manipula! el estilo del bac+g!ound' te(tos' ,uentes de let!a' enlaces' listas # tablas. C.- Modelo de Caja& El modelo de caja de CSS desc!ibe las cajas !ectangula!es -ue son gene!adas po! los elementos de una pagina *eb. .%o!de!' utline' Ma!gin' /adding0 .%o!de' Conto!no' Ma!gen' 1elleno0.

D.- CSS "2an)ado& T3cnicas a2an)adas pa!a&

"g!upa!4anida! estilos. Manejo de las dimensiones de los elementos' 5isuali)acin u ocultacin de elementos' 6bicacin espacial de los elementos . posicin' alineacin # ,lotacin0. 6tili)acin de /seudo-clases # pseudoelementos. C!eacin de Men7s con CSS. 8estin de im9genes' manejo de gale!as' t!anspa!encias' ti!as de imagen .sp!ites0. Implementacin de estilos CSS de acue!do al medio de p!esentacin.

Diseo de Hojas de Estilo CSS

"l ,inal del modulo el estudiante se!a capa) de&

6sa! # c!ea! CSS pa!a disea! el estilo # disposicin del contenido de una p9gina Web.

6tili)a! CSS pa!a ag!ega! ,ondos' ,o!matea! te(tos. 6tili)a! CSS pa!a ag!ega! # ,o!matea! bo!des. Mediante CSS de,ini! el espaciado # ma!gen de los elementos de una pagina. /osiciona! un elemento' cont!ola! su 2isibilidad # ag!ega! e,ectos mediante CSS.

Conoce! las !ecomendaciones del W:C con el objeto de gene!a! cdigo est9nda!.

Diseo de Hojas de Estilo CSS

CSS Bsico

CSS Int!oduccin.
Conocimientos previos Debemos conoce! el ,uncionamiento de HTM; 4 <HTM; Que es CSS? CSS iniciales pa!a Cascading St#le S=eets .=ojas de estilo en cascada0 El estilo de,ine como se p!esentan elementos HTM;. ;os estilos ,ue!on incluidos en HTM; >.?. ;as =ojas de estilo e(te!nas son almacenadas en a!c=i2os con e(tensin CSS.

CSS Int!oduccin.
Los estilos resuelven un gran problema HTM; nunca estu2o destinado a contene! eti-uetas pa!a ,o!matea! el documento' esta o!ientado pa!a de,ini! el contenido del documento' como po! ejemplo& <h1>Esto es una cabecera</h1> <p>Esto es un parrafo.</p> Cuando las eti-uetas como @,ontA' # los at!ibutos de colo! ,ue!on aadidos a la especi,icacin HTM; :.B' comen) una pesadilla pa!a los desa!!ollado!es *eb. El desa!!ollo de sitios *eb g!andes' donde las ,uentes # la in,o!macin de colo! se aaden a cada p9gina' se con2i!ti en un p!oceso la!go # costoso. /a!a !esol2e! este p!oblema' el conso!cio de la Wo!ld Wide Web .W:C0 c!eo la especi,icacin CSS. En HTM; >.?' todo el ,o!mato poda se! !emo2ido del HTM; # almacenado en un a!c=i2o CSS sepa!ado. Todos lo na2egado!es actuales sopo!tan CSS.

CSS Int!oduccin.

CSS ahorra mucho trabajo! CSS de,ine C M los elementos HTM; se!an p!esentados. ;os estilos est9n no!malmente almacenados en a!c=i2os .css e(te!nos. ;as =ojas de estilos e(te!nas pe!miten cambia! la apa!iencia # disposicin de todas las paginas en un sitio *eb' solamente cambiando un solo archivo!

CSS Sinta(is
6na !egla CSS tiene dos pa!tes& un selecto! # una o mas decla!aciones. El selecto! no!malmente es un elemento HTM;. Cada decla!acin consiste en una p!opiedad # un 2alo!. ;a p!opiedad es el at!ibuto de estilo -ue se -uie!e cambia!' toda p!opiedad tiene un 2alo!. 6na decla!acin CSS siemp!e te!mina con punto # coma .C0' los g!upos de decla!aciones est9n !odeadas po! lla2es& p {color:red;text-align:center;} /a!a =ace! mas legible al CSS' se puede coloca! una decla!acin po! linea as& p { color:red; text-align:center; }

Comenta!ios CSS ;os Comenta!ios son usados pa!a e(plica! el cdigo ;os comenta!ios son igno!ados po! los na2egado!es. 6n comenta!io CSS inicia con D4ED # te!mina con DE4D& /* esto es un co entario de ultiple linea */ p { text-align:center; /*este es otro co entario*/ color:blac!; font-fa il":arial; }

Selecto!es Id # Class
CSS pe!mite especi,ica! selecto!es p!opios El selector class llamados DidD # DclassD. Es utili)ado pa!a especi,ica! el estilo a un g!upo de elementos. El selector id Es utili)ado pa!a especi,ica! el estilo a un 7nico elemento HTM;. El selecto! FidG usa el at!ibuto id de HTM;. Se de,ine en CSS con un nume!al DHD. ;a siguiente !egla de estilo solo aplica al elemento con el idIGpa!aJD& #para ! te"t#align$center% color$red% &

El selecto! FclassG usa el at!ibuto class de HTM;. Esto pe!mite asigna! un estilo pa!ticula! a tantos elementos HTM; con la misma clase. Se de,ine en CSS con un punto D.D .center {text-align:center;} Tambi3n se puede especi,ica! cuales elementos HTM; se!an a,ectados po! una clase. p.center {text-align:center;}

Ko inicie el nomb!e de los selecto!es id o class con un n7me!o' eso S ; es sopo!tado po! Inte!net E(plo!e!.

Como aplica! el CSS

Ha# t!es mane!a de inse!ta! CSS&

Hojas de estilo e(te!na Hojas de estilo inte!na Estilo embebido .inc!ustado0

Hojas de estilo e(te!na <head> <lin! rel#$st"lesheet$ t"pe#$text/css$ href#$ iestilo.css$ /> <lin! rel#$st"lesheet$ t"pe#$text/css$ href#$tuestilo.css$ /> <lin! rel#$st"lesheet$ t"pe#$text/css$ href#$suestilo.css$ /> </head> El a!c=i2o no debe contene! eti-uetas =tml # se almacena con la e(tensin de a!c=i2o .css' po! ejemplo hr {color:sienna;} p { argin-left:%&px;} bod" {bac!ground-i age:url'$i ages/bac!(&.gif$);}

Como aplica! el CSS

Hojas de estilo inte!na <head> <st"le t"pe#$text/css$> hr {color:sienna;} p { argin-left:%&px;} bod" {bac!ground-i age:url'$i ages/bac!(&.gif$);} </st"le> </head> Estilos embebidos o Inline <p st"le#$color:sienna; argin-left:%&px$>Esto es un parrafo.</p> <p st"le#$color:blue; argin-left:*&px;text-align:center$>Este es otro parrafo.</p>

M7ltiples =ojas de estilo

M7ltiples =ojas de estilo Si algunas propiedades han sido establecidas para el mismo selector en diferentes hojas de estilo, los valores sern heredados del estilo mas especifico. Por ejemplo: Una css externa tiene estas propiedades para el selector h : h+ { color:red; text-align:left; font-si,e:-pt; } ! una css interna tiene otra propiedades para el mismo selector: h+ { text-align:right; font-si,e:%&pt; } Si la pagina con la css interna tambien enla"a al css externo las propiedades #uedar$an as$: color:red; text-align:right; font-si,e:%&pt; %l color es heredado del css externo & el text'alignment & el font' si"e son reempla"ados por el css interno.

!den de la cascada LMue estilo se!9 usado' cuando =a# mas de un estilo especi,icado pa!a un elemento HTM;N

Estilo embebido FInlineG CSS Inte!no .en la seccin =ead0 Hojas de estilo E(te!nas Kati2o del na2egado! .%!o*se! de,ault0

"s en estilo inline tiene la p!io!idad mas alta' po! consiguiente sob!esc!ibe cual-uie! estilo p!e2io. Kota& si el enlace al css e(te!no esta ubicado despues de la decla!acin inte!na' el css e(te!no sob!esc!ibe al estilo inte!no.

%stilos CSS

CSS %ac+g!ound
/!opiedades CSS utili)adas pa!a e,ectos de ,ondo .bac+g!ound0&

'ac(ground Color Esta p!opiedad especi,ica el colo! de ,ondo de un elemento. bod" {bac!ground-color:.b&c(de;} Con CSS' el colo! es casi siemp!e especi,icado as&

bac+g!ound-colo! bac+g!ound-image bac+g!ound-!epeat bac+g!ound-attac=ment bac+g!ound-position

6n 2alo! HE< - DH,,????D 6n 2alo! 18% O D!gb.BPP'?'?0D 6n nomb!e de colo! - D!edD

h1 {bac!ground-color:./(0*ed;} p {bac!ground-color:.e&ffff;} di1 {bac!ground-color:blue;}

CSS %ac+g!ound
%ac+g!ound Image ;a p!opiedad especi,ica una imagen a usa! como ,ondo del elemento. bod" {bac!ground-i age:url'2paper.gif2);} %ac+g!ound Image O 1epeti! =o!i)ontalmente # 2e!ticalmente bod" { bac!ground-i age:url'2gradient%.png2); bac!ground-repeat:repeat-x; } %ac+g!ound Image O establece! posicin # Fno-!epeatG ;a posicin de la imagen esta especi,icada po! la p!opiedad bac+g!ound-position& bod" { bac!ground-i age:url'2i g3tree.png2); bac!ground-repeat:no-repeat; bac!ground-position:right top; }

CSS %ac+g!ound
%ac+g!ound - /!opiedad atajo .S=o!t=and 0 /a!a aco!ta! el codigo es posible especi,ica! todas las p!opiedades en una sola p!opiedad. El atajo pa!a las p!opiedades de ,ondo es simplemente Dbac+g!oundD& bod" { bac!ground:.ffffff url'2i g3tree.png2) no-repeat right top; } Cuando se usa la p!opiedad atajo el o!den de las p!opiedades es el siguiente& J.bac+g!ound-colo! B.bac+g!ound-image :.bac+g!ound-!epeat >.bac+g!ound-attac=ment P.bac+g!ound-position Ko impo!ta si ,alta alguna p!opiedad lo impo!tante es -ue las -ue estan p!esentes este en ese o!den.

CSS %ac+g!ound
/!opiedad bac+g!ound bac+g!ound-attac=ment bac+g!ound-colo! bac+g!ound-image bac+g!ound-position bac+g!ound-!epeat Desc!ipcin Establece todas las p!opiedades de ,ondo de un elemento en una sola decla!acin Establece donde la imagen de ,ondo -ueda ,ija o F!uedaG con el !esto de la pagina. Establece el colo! de ,ondo de un elemento Establece la imagen de ,ondo de un elemento Establece la posicin de inicio de la imagen de ,ondo de un elemento Establece como la imagen de ,ondo de un elemento se!a !epetida

CSS Te(tos
Colo! de te(to ;a p!opiedad color establece el colo! del te(to. bod" { color:blue; } h1 { color:.&&ff&&; } h% { color:rgb'%**4&4&); } /a!a compatibilidad del CSS& Si se de,ine la p!opiedad colo!' tambien debe!ia de,ini!se la p!opiedad bac+g!ound-colo!. Identacin del te(to ;a p!opiedad te"t#indentation es usada pa!a indica! la identacin de la p!ime!a linea del te(to. p {text-indent:*&px;} "lineacin de te(to ;a p!opiedad te"t#align es usada pa!a establece! la alineacin =o!i)ontal de un te(to.cent!ado' alineado a la de!ec=a' a la i)-uie!da o justi,icado0. h1 { text-align:center; } p.fecha { text-align:right; } p.principal { text-align:5ustif"; text-indent:*&px; } <h1>E5e plo de alineaci6n</h1> <p class#$fecha$>7a"o4 %&&0</p> <p class#$principal$>Esto es un texto largo. Esto es un texto largo. Esto es un texto largo. Esto es un texto largo. Esto es un texto largo. </p>

CSS Te(tos
Deco!acin de te(to ;a p!opiedad te(t-deco!ation se usa pa!a pone! o -uita! deco!aciones del te(to. a {text-decoration:none;} h1 {text-decoration:o1erline;} h% {text-decoration:line-through;} h+ {text-decoration:underline;} h( {text-decoration:blin!;} <h1>Esto <h%>Esto <h+>Esto <h(>Esto es es es es cabecera cabecera cabecera cabecera 1</h1> %</h%> +</h+> (</h(> T!ans,o!macin de te(to ;a p!opiedad te"t#trans)orm establece las ma#usculas o las minusculas de un te(to. p. a"uscula {text-transfor :uppercase;} p. inuscula {text-transfor :lo8ercase;} p.capitali,e {text-transfor :capitali,e;}

<p class#$ a"uscula$>9lgo de texto.</p> <p class#$ inuscula$>9lgo de texto.</p> <p class#$capitali,e$>9lgo de texto.</p>

Ko es !ecomendado sub!a#a! te(to -ue no sea un enlace pa!a no con,undi! a los usua!ios.

CSS Te(tos
Propert& color direction letter'spacing line'height text'align text'decoration text'indent text'shado* text'transform unicode'bidi vertical'align *hite'space *ord'spacing Sets the vertical alignment of an element Specifies ho* *hite'space inside an element is handled +ncreases or decreases the space bet*een *ords in a text (escription Sets the color of text Specifies the text direction)*riting direction +ncreases or decreases the space bet*een characters in a text Sets the line height Specifies the hori"ontal alignment of text Specifies the decoration added to text Specifies the indentation of the first line in a text'bloc, Specifies the shado* effect added to text Controls the capitali"ation of text

CSS Quentes
Qamilias de ,uentes En CSS' =a# dos tipos de ,amilias de ,uentes&

Qamilia gene!ica& un g!upo de ,amilias de ,uentes con una apa!iencia pa!ecida .como Dse!i,D o DmonospaceD0 Qamilia de Quentes& una ,amilia especi,ica .como DTimes Ke* 1omanD o D"!ialD0

CSS Quentes
Qamilia de ,uentes ;a ,amilia de ,uentes de un te(to esta dado po! la p!opiedad )ont#)amil*. Esta puede contene! 2a!ios nomb!e de ,uentes' esto es si el na2egado! no sopo!ta la p!ime!a ,uente' intenta!a con la siguiente ,uente. Se inicia con la ,uente se desea # se te!mina con una ,amilia gen3!ica Si el nomb!e de la ,uente es mas de una palab!a' se debe delimita! con comillas. Si se especi,ica mas de una ,amilia de ,uentes deben sepa!a!se po! comas& p { font-fa il":$:i es ;e8 <o an$4 :i es4 serif; }
Quentes Se!i,

8eo!gia' se!i, D/alatino ;inot#peD' D%oo+ "nti-uaD' /alatino' se!i, DTimes Ke* 1omanD' Times' se!i,

Quentes Sans-Se!i,

"!ial' Hel2etica' sans-se!i, "!ial %lac+' 8adget' sans-se!i, DComic Sans MSD' cu!si2e' sans-se!i, Impact' C=a!coal' sans-se!i, D;ucida Sans 6nicodeD' D;ucida 8!andeD' sans-se!i, Ta=oma' 8ene2a' sans-se!i, DT!ebuc=et MSD' Hel2etica' sans-se!i, 5e!dana' 8ene2a' sans-se!i,

Quentes Monospace

DCou!ie! Ke*D' Cou!ie!' monospace D;ucida ConsoleD' Monaco' monospace

CSS Quentes
Tamao de Quente ;a p!opiedad )ont#si+e establece el tamao del te(to. Siemp!e usa! las eti-uetas HTM; adecuadas como @=JA - @=RA pa!a cabece!as # @pA pa!a pa!!a,os. El 2alo! de ,ont-si)e puede se! un tamao absoluto o !elati2o. Tamao absoluto: Establece el te(to a un tamao especi,ico Ko pe!mite al usua!io cambia! el tamao en todos los na2egado!es Es 7til cuando el tamao de la salida es conocida Tamao relativo: Establece el tamao en !elacin con los elementos -ue lo !odean /e!mite al usua!io cambia! el tamao del te(to en los na2egado!es Si no se especi,ica el tamao de ,uente' el 2alo! po! omisin del te(to no!mal es de JRp( .JRp(IJem0.
Estilo de ,uente ;a p!opiedad )ont#st*le es usada pa!a especi,ica! te(to italico. Esta p!opiedad maneja t!es 2alo!es&

no!mal O El te(to se muest!a no!mal italic O El te(to se muest!a en italica obli-ue O El te(to es inclinado .es mu# simila! al italico' pe!o es menos sopo!tado0

p.nor al {font-st"le:nor al;} p.italic {font-st"le:italic;} p.obli=ue {font-st"le:obli=ue;} <p class#$nor al$>Esto es un p>rrafo nor al.</p> <p class#$italic$>Esto es un p>rrafo italico.</p> <p class#$obli=ue$>Esto es un p>rrafo oblicuo.</p>

CSS Quentes
Tamao en pi(eles =J S,ont-si)e&>?p(CT =B S,ont-si)e&:?p(CT p S,ont-si)e&J>p(CT Tamao en em ;a unidad de tamao em es !ecomendada po! el W:C. Jem es igual al tamao de ,uente actual. El tamao po! omisin en los na2egado!es es JRp(. El tamao puede se! calculado desde pi(eles a em .pi(el4JR I em0 h1 {font-si,e:%.*e ;} /* (&px/1/#%.*e */ h% {font-si,e:1.-?*e ;} /* +&px/1/#1.-?*e */ p {font-si,e:&.-?*e ;} /* 1(px/1/#&.-?*e */ <h1>:his is heading 1</h1> <h%>:his is heading %</h%> <p>:his is a paragraph.</p> <p>Especificar el font-si,e en unidades e per ite a la a"oria de los na1egadores a5ustar el ta a@o del texto. Aesafortunada ente se antiene un proble a con las 1ersiones anteriores de BE 0.</p>

6sa! una combinacin de po!centual # em 6na solucin -ue ,unciona en todos lo na2egado!es es establece! el ,ont-si)e en po!centual pa!a el elemento@bod#A& bod" {font-si,e:1&&C;} h1 {font-si,e:%.*e ;} h% {font-si,e:1.-?*e ;} p {font-si,e:&.-?*e ;} <h1>:his is heading 1</h1> <h%>:his is heading %</h%> <p>:his is a paragraph.</p> <p>Dpecif"ing the font-si,e in percent and e displa"s the sa e si,e in all a5or bro8sers4 and allo8s all bro8sers to resi,e the textE</p>

CSS Quentes

/!opiedad ,ont ,ont-,amil# ,ont-si)e ,ont-st#le ,ont-2a!iant ,ont-*eig=t

Desc!ipcin Sets all t=e ,ont p!ope!ties in one decla!ation Speci,ies t=e ,ont ,amil# ,o! te(t Speci,ies t=e ,ont si)e o, te(t Speci,ies t=e ,ont st#le ,o! te(t Speci,ies *=et=e! o! not a te(t s=ould be displa#ed in a small-caps ,ont Speci,ies t=e *eig=t o, a ,ont

CSS ;in+s.2nculos0
" enlaces se puede aplica! cual-uie! p!opiedad css .p.e. colo!' ,ont-,amil#' bac+g!ound' etc.0. ;os enlace p!esentan cuat!o estados' -ue son&

Estilos comunes de enlace te(t-deco!ation a:lin! {text-decoration:none;} a:1isited {text-decoration:none;} a:ho1er {text-decoration:underline;} a:acti1e {text-decoration:underline;} bac+g!ound-colo! a:lin! {bac!ground-color:.G%FF00;} a:1isited {bac!ground-color:.FFFF-*;} a:ho1er {bac!ground-color:.FF?&(A;} a:acti1e {bac!ground-color:.FF?&(A;}

a&lin+ O no!mal enlace no 2isitado a&2isited O enlace #a 2isitado a&=o2e! O cuando el usua!io ubica el mouse sob!e el enlace a&acti2e O en el momento -ue es cli-ueado

a:lin! {color:.FF&&&&;} /* un1isited lin! */ a:1isited {color:.&&FF&&;} /* 1isited lin! */ a:ho1er {color:.FF&&FF;} /* ouse o1er lin! */ a:acti1e {color:.&&&&FF;} /* selected lin! */ 1eglas de o!den& a&=o2e! debe esta! despues de a&lin+ # a&2isited a&acti2e debe esta! despues de a&=o2e!

CSS ;istas
;a p!opiedades CSS pa!a las listas pe!miten&

Establece! 2ietas di,e!entes pa!a las listas Establece! una imagen como 2ieta de una lista

En HTM;' =a# dos tipos de listas&

;istas sin o!den O los items estan ma!cados con 2ietas ;istas o!denadas O los items estan ma!cados con n7me!os o let!as

Di,e!entes ma!cado!es de items El tipo de ma!cado! de de,ine con la p!opiedad list#st*le#t*pe& ul.a {list-st"le-t"pe: circle;} ul.b {list-st"le-t"pe: s=uare;} ol.c {list-st"le-t"pe: upper-ro an;} ol.d {list-st"le-t"pe: lo8er-alpha;}

CSS ;istas
6na imagen como ma!cado! de item /a!a especi,ica! la imagen se usa la p!opiedad listst#le-image& ul { list-st"le-i age: url'2s=purple.gif2);} Este ejemplo no se 2isuali)a igual en todos los na2egado!es. IE # pe!a most!a!an la imagen mas alta -ue Qi!e,o(' C=!ome # Sa,a!i. Solucin multina2egado! ul { list-st"le-t"pe: none; padding: &px; argin: &px; } li { bac!ground-i age: url's=purple.gif); bac!ground-repeat: no-repeat; bac!ground-position: &px *px; padding-left: 1(px; }

E(plicacin /a!a ul& Se establece el list-st#le-t#pe a FnoneG pa!a !emo2e! la 2ietas. Coloca el padding # el ma!gin a ?p( /a!a li& Se coloca una imagen de ,ondo sin !epeticin. Se posiciona en la es-uina .i)-uie!da ?p( # abajo Pp(0. 6bica! el te(to de la lista con !elleno a la i)-uie!da.

CSS ;istas
;ist O p!opiedad atajo Tambi3n es posible especi,ica! todas las p!opiedades en una sola. ;a p!opiedad atajo es list#st*le& !den de los 2alo!es&

;ist-st#le-t#pe ;ist-st#le-position list-st#le-image

Ko impo!ta si ,alta alg7n 2alo!' lo impo!tante es el o!den de los mismos. ul { list-st"le: circle4 s=uare url'$s=purple.gif$); }

/!ope!t# list-st#le list-st#le-image list-st#le-position list-st#le-t#pe

Desc!iption Sets all t=e p!ope!ties ,o! a list in one decla!ation Speci,ies an image as t=e list-item ma!+e! Speci,ies i, t=e list-item ma!+e!s s=ould appea! inside o! outside t=e content ,lo* Speci,ies t=e t#pe o, list-item ma!+e!

CSS Tablas
%o!des de tabla /a!a de,ini! los bo!des de tabla se utili)a la p!opiedad border. table4 th4 td { border: 1px solid blac!; } Es de nota! la tabla tiene bo!des dobles' debido a -ue la tabla' los t= # td tienen bo!des sepa!ados. /a!a most!a! un bo!de simple use border#collapse. Colapsa! bo!des ;a p!opiedad bo!de!-collapse indica cuales bo!des de la tabla se colapsan en bo!de simple o sepa!ado& table { border-collapse:collapse; } table4th4 td { border: 1px solid blac!; }
"lto # anc=o de una tabla Estos estan de,inidos po! las p!opiedades ,idth # height. table { 8idth:1&&C; } th { height:*&px; } "lineacin del te(to en una tabla El te(to se alinea mediante las p!opiedades te"t#align # vertical#align. ;a p!opiedad te(t-align establece la alineacin =o!i)ontal como i)-uie!da' de!ec=a o cent!ado. le,t' !ig=t' cente!0 td { text-align:right; } ;a alineacin 2e!tical de 2e!tical-align como a!!iba' abajo o medio. top' bottom' middle0& td { height:*&px; 1ertical-align:botto ; }

CSS Tablas
1elleno de una tabla .padding0 /a!a cont!ola! el espacio ent!e el bo!de # el contenido de una tabla se usa pa p!opiedad padding sob!e los elementos td # t=& td { padding:1*px; } Colo! de tabla Se utili)an las p!opiedades de ,ondo # te(to. table4 td4 th { border:1px solid green; } th { bac!ground-color:green; color:8hite; }

Diseo de Hojas de Estilo CSS

CSS -odelo de Caja

CSS Modelo de Caja

Todos los elementos HTM; son conside!ados cajas # estas consisten en ma!genes' bo!des' !elleno # el contenido. El modelo de caja nos pe!mite un bo!de al!ededo! del elemento # espacia!lo con !elacin a ot!os elementos. E(plicacin de las pa!tes&

Ma!gin- ;impia un a!ea al!ededo! del bo!de' no tiene colo! de ,ondo es totalmente t!anspa!ente. %o!de!- El bo!de !odea al !elleno el bo!de si es a,ectado po! el colo! de ,ondo de la caja. /adding- ;impia un a!ea al!ededo! del contenido # es a,ectado po! el colo! de la caja. Content- El contenido de la caja' es donde apa!ecen el te(to # las im9genes.

CSS Modelo de Caja

"nc=o # alto de un elemento. Cuando se de,inen las p!opiedades anc=o # el alto de un elemento solo se establecen pa!a el contenido de la caja' pa!a dete!mina! el tamao completo debe suma!se las medidas del !elleno' bo!de # ma!gen. 8idth:%*&px; padding:1&px; border:*px solid gra"; argin:1&px; "nc=o W !elleno W bo!de W ma!gen I tamao !eal BP?p( W B?p( W J?p( W B?p( I :??p(

/!oblemas con IEU # ante!io!es al usa! padding # bo!de! pa!a de,ini! la caja' debe especi,ica! el D CTV/E del HTM; -ue estamos deco!ando.
<EAHI:JKE ht l KLGMBI $-//N+I//A:A OP:7M 1.& :ransitional//E;$ $http://888.8+.org/:</xht l1/A:A/xht l1transitional.dtd$>

CSS %o!des
;a p!opiedad border pe!mite especi,ica! el estilo # el colo! del bo!de de un elemento. Estilo de bo!de ;a p!opiedad border#st*le indica -ue tipo de bo!de p!esenta!a. "nc=o de bo!de ;a p!opiedad border#,idth establece en anc=o del bo!de. Se puede de,ini! en pi(eles o con un 2alo! de los p!ede,inidos .t=in' medium o t=ic+0. Colo! del bo!de ;a p!opiedad border#color de,ine el colo! del bo!de' mediante alguno de los siguientes metodos& nomb!e O especi,ica po! nomb!e de colo!' como D!edD 18% - especi,ica un 2alo! 18%' como D!gb.BPP'?'?0D He(adecimal - especi,ic un 2alo! =e(' como DH,,????D Tambien se puede establece! el colo! a t!anspa!ente.Dt!anspa!entD0. Kota p!ime!o =a# -ue establece! la p!opiedad bo!de!-st#le pa!a aplica! las ot!as dos. p.uno { border-st"le:solid; border-8idth:*px; border-color:red; } p.dos { border-st"le:solid; border-8idth: ediu ; border-color:transparent; }

p { border-top-st"le:dotted; border-right-st"le:solid; border-botto -st"le:dotted; border-left-st"le:solid; } p { border-st"le:dotted solid; }

%j

CSS %o!des
/!ope!t# bo!de! bo!de!-bottom bo!de!-bottom-colo! bo!de!-bottom-st#le bo!de!-bottom-*idt= bo!de!-colo! bo!de!-le,t bo!de!-le,t-colo! bo!de!-le,t-st#le bo!de!-le,t-*idt= bo!de!-!ig=t bo!de!-!ig=t-colo! bo!de!-!ig=t-st#le bo!de!-!ig=t-*idt= bo!de!-st#le bo!de!-top bo!de!-top-colo! bo!de!-top-st#le bo!de!-top-*idt= bo!de!-*idt= Desc!iption Sets all t=e bo!de! p!ope!ties in one decla!ation Sets all t=e bottom bo!de! p!ope!ties in one decla!ation Sets t=e colo! o, t=e bottom bo!de! Sets t=e st#le o, t=e bottom bo!de! Sets t=e *idt= o, t=e bottom bo!de! Sets t=e colo! o, t=e ,ou! bo!de!s Sets all t=e le,t bo!de! p!ope!ties in one decla!ation Sets t=e colo! o, t=e le,t bo!de! Sets t=e st#le o, t=e le,t bo!de! Sets t=e *idt= o, t=e le,t bo!de! Sets all t=e !ig=t bo!de! p!ope!ties in one decla!ation Sets t=e colo! o, t=e !ig=t bo!de! Sets t=e st#le o, t=e !ig=t bo!de! Sets t=e *idt= o, t=e !ig=t bo!de! Sets t=e st#le o, t=e ,ou! bo!de!s Sets all t=e top bo!de! p!ope!ties in one decla!ation Sets t=e colo! o, t=e top bo!de! Sets t=e st#le o, t=e top bo!de! Sets t=e *idt= o, t=e top bo!de! Sets t=e *idt= o, t=e ,ou! bo!de!s

CSS
El outline es una linea -ue se dibuja al!ededo! de los elementos Ga,ue!a del bo!deG. Ko ,o!ma pa!te de las dimensiones del elemento' as las dimensiones totales del elemento no son a,ectadas po! el g!ueso del outline.

utline

Propert&
outline outline-colo! outline-st#le outline-*idt=

(escription
Sets all t=e outline p!ope!ties Sets t=e colo! o, an outline Sets t=e st#le o, an outline Sets t=e *idt= o, an outline

CSS Ma!gin
El ma!gen limpia un 9!ea al!ededo! del elemento # no tiene colo! de ,ondo es totalmente t!anspa!ente. ;os ma!genes supe!io!' de!ec=o' in,e!io! e i)-uie!do pueden se! cambiados usando p!opiedades sepa!adas. Tambi3n se puede usa! la p!opiedad atajo margin' pa!a cambia!los todos de una 2e). Es posible utili)a! 2alo!es negati2os pa!a solapa! contenido. argin-top:1&&px; argin-botto :-1&&px; argin-right:*&px; argin-left:*&px;
5alo! auto lengt=
3 4 /2 /0

/!opiedad atajo ;a p!opiedad atajo pa!a todos los ma!genes es DmarginD& argin:%*px *&px ?*px 1&&px; argin:%*px *&px ?*px; argin:%*px *&px; argin:%*px;

Desc!ipcin El na2egado! calcula el ma!gen Se especi,ica el ma!gen en p(' pt' cm' etc. / Columna 5alo! po! omisin& ?p( Columna 0 Especi,ica un ma!gen po!centual del anc=o del elemento contenedo! He!eda el ma!gen del elemento pad!e
.ila / .ila 0 .ila .ila 1 Columna

X 1
0

in=e!it 2

CSS /adding
El !elleno limpia un 9!ea al!ededo! del elemento # dent!o del bo!de # es a,ectado po! el colo! de ,ondo del elemento. ;os !ellenos supe!io!' de!ec=o' in,e!io! e i)-uie!do pueden se! cambiados usando p!opiedades sepa!adas. Tambi3n se puede usa! la p!opiedad atajo padding' pa!a cambia!los todos de una 2e). padding-top:1&&px; padding-botto :1&px; padding-right:*&px; padding-left:*&px;
5alo! la!go X Desc!ipcin De,ine un !elleno ,ijo en p(' pt' em El !elleno es un po!centaje del elemento contenedo!

/!opiedad atajo ;a p!opiedad atajo pa!a todos los !ellenos es DpaddingD& padding:%*px *&px ?*px 1&&px; padding:%*px *&px ?*px; padding:%*px *&px; padding:%*px;

CSS 5van"ado

CSS "g!upando # anidando selecto!es

"g!upando selecto!es En una =oja de estilos e(isten 2a!ios elementos con el mismo estilo. h1 { color:green; } h% { color:green; } p { color:green; } /a!a minimi)a! el cdigo' se pueden ag!upa! los selecto!es' sepa!ados po! comas. h14h%4p { color:green; }
"nidando selecto!es Es posible aplica! un estilo de un selecto! dent!o de un selecto!. p { color:blue; text-align:center; } . ar!ed { bac!ground-color:red; } . ar!ed p { color:8hite; } <h1 class#Q ar!edQ>hola</h1> <p>hola</p> <p class#Q ar!edQ>hola otra 1e,</p>

CSS Dimensiones
;as p!opiedades de dimensin de CSS pe!miten cont!ola! el alto # el anc=o de un elemento.
/!opiedad =eig=t Desc!ipcin Sets t=e =eig=t o, an element 5alo!es auto lengt= X in=e!it none lengt= X in=e!it none lengt= X in=e!it lengt= X in=e!it lengt= X in=e!it auto lengt= X in=e!it

ma(-=eig=t

Sets t=e ma(imum =eig=t o, an element

ma(-*idt=

Sets t=e ma(imum *idt= o, an element

min-=eig=t

Sets t=e minimum =eig=t o, an element

min-*idt=

Sets t=e minimum *idt= o, an element

*idt=

Sets t=e *idt= o, an element

CSS Displa# # 5isibilit#

cultando un elemento culta! un elemento puede =ace!se estableciendo la p!opiedad displa* en FnoneG o la p!opiedad visibilit* en F=iddenG. visibilit*$hidden oculta al elemento pe!o mantiene el espacio -ue este ocupa a,ectado la disposicin de la pagina h1.oculto {1isibilit":hidden;} displa*$none oculta al elemento # no ocupa ningun espacio' la pagina es p!esentada como si el elemento no e(istie!a. h1.oculto {displa":none;}

Elementos como %loc+ o Inline 6n elemento blo-ue toma el anc=o disponible # tiene !ompimiento de linea antes # despues de el. <h1> <p> <di1> 6n elemento inline solo toma el anc=o su,iciente # no ,ue!)a !ompimientos de linea. <span> <a>

Cambiando como un elemento es p!esentado Cambia! un elemento inline a bloc+' o 2ice2e!sa' puede se! util pa!a =ace! -ue la pagina lu)ca de cie!ta mane!a # as mantene! los estanda!es *eb. li {displa":inline;} span {displa":bloc!;} Kota&Cambiando el tipo de p!esentacin de un elemento no se cambia el tipo de elemento -ue es.

CSS /osicionado
/osicin ;as p!opiedades CSS de posicionado pe!miten ubica! un elemento. Este puede se! colocado det!as'delante o al lado. Se pueden ubica! utili)ado las p!opiedades topbottom- le)t * right. Esta p!opiedades solo ,uncionan si se especi,ica la p!opiedad position. Ha# cuat!o metodos de posicionamiento. J.-/osicionamiento est9tico ;os elementos HTM; po! omisin son estaticos' siemp!e esta!9n ubicados con el ,lujo no!mal de la paginaC # no son a,ectados po! las p!opiedades top' bottom' le,t # !ig=t. B.-/osicionamiento ,ijo. 6n elemento con posicin F,i(edG tiene una posicin !elati2a a la 2entana del na2egado!. Ko se mo2e!a aun-ue la 2entana !ealice sc!oll.
:.-/osicionamiento !elati2o. " !elati2e positioned element is positioned !elati2e to its no!mal position. T=e content o, !elati2el# positioned elements can be mo2ed and o2e!lap ot=e! elements' but t=e !ese!2ed space ,o! t=e element is still p!ese!2ed in t=e no!mal ,lo*. >.-/osicionamiento "bsoluto 6n elemento con posicin FabsoluteG esta posicionado !elati2o al p!ime! pad!e -ue tenga una posicin no estatica' sino se consigue ese pad!e el blo-ue se!a @=tmlA. Elemento solapados. Cuando los elementos estan posicionados ,ue!a del ,lujo no!mal' pueden solapa! ot!os elementos. ;a p!opiedad +#inde" especi,ica el o!den de pila de un elemento. 6n elemento puede tene! un o!den de pila positi2o o negati2o. "n element *it= g!eate! stac+ o!de! is al*a#s in ,!ont o, an element *it= a lo*e! stac+ o!de!.

CSS /osicionado
/!opiedad Desc!ipcin 5alo!es

bottom clip cu!so!

Sets t=e bottom ma!gin edge ,o! a positioned bo( Clips an absolutel# positioned element Speci,ies t=e t#pe o, cu!so! to be displa#ed

"uto' lengt=' X' in=e!it S=ape' auto' in=e!it 6!l' auto' c!oss=ai!' de,ault' pointe!' mo2e' e-!esi)e' ne-!esi)e' n*-!esi)e' n-!esi)e' se-!esi)e' s*-!esi)e' s-!esi)e' *-!esi)e' te(t' *ait' =elp "uto' lengt=' X' in=e!it "uto' =idden' sc!oll' 2isible' in=e!it

le,t o2e!,lo*

Sets t=e le,t ma!gin edge ,o! a positioned bo( Speci,ies *=at =appens i, content o2e!,lo*s an elementYs bo( Speci,ies t=e t#pe o, positioning ,o! an element Sets t=e !ig=t ma!gin edge ,o! a positioned bo( Sets t=e top ma!gin edge ,o! a positioned bo( Sets t=e stac+ o!de! o, an element

position !ig=t top )-inde(

"bsolute' ,i(ed' !elati2e' static' in=e!it "uto' lengt=' X' in=e!it "uto' lengt=' X' in=e!it Kumbe!' auto' in=e!it

CSS Qloat
6ith CSS float, an element can be pushed to the left or right, allo*ing other elements to *rap around it. .loat is ver& often used for images, but it is also useful *hen *or,ing *ith la&outs. 7o* %lements .loat %lements are floated hori"ontall&, this means that an element can onl& be floated left or right, not up or do*n. 5 floated element *ill move as far to the left or right as it can. Usuall& this means all the *a& to the left or right of the containing element. 8he elements after the floating element *ill flo* around it. 8he elements before the floating element *ill not be affected. +f an image is floated to the right, a follo*ing text flo*s around it, to the left: %xample img 9 float:right: ;

.loating %lements <ext to %ach =ther +f &ou place several floating elements after each other, the& *ill float next to each other if there is room. 7ere *e have made an image galler& using the float propert&: 8urning off .loat ' Using Clear %lements after the floating element *ill flo* around it. 8o avoid this, use the clear propert&. 8he clear propert& specifies *hich sides of an element other floating elements are not allo*ed. 5dd a text line into the image galler&, using the clear propert&: %xample .text>line 9 clear:both: ;

CSS /seudo-Clases # /seudo-Elementos

Selecto! &lin+ &2isited &acti2e &=o2e! &,ocus &,i!st-lette! &,i!st-line &,i!st-c=ild &be,o!e &a,te! &lang. Ejemplo a&lin+ a&2isited a&acti2e a&=o2e! input&,ocus p&,i!st-lette! p&,i!st-line p&,i!st-c=ild p&be,o!e p&a,te! p&lang.it0 Desc!ipcin Selecciona todos los enlaces Selecciona todos los enlaces 2isitados Selecciona todos los enlaces acti2os Selecciona los enlaces donde el mouse se pose Selecciona el elemento @inputA ce obtenga el ,oco /!ime!a let!a de todos los elementos @pA /!ime!a linea de todos los elemento @pA Selects e2e!# @pA elements t=at is t=e ,i!st c=ild o, its pa!ent Inse!ta contenido antes de cada elemento @pA Inse!ta contenido despues de cada elemento @pA Seleccciona todo @pA con el at!ibuto FlangG de,inido como FitG

CSS %a!!a de Ka2egacin

Tene! una na2egacin ,9cil de usa! es impo!tante pa!a cual-uie! sitio Web. 6na ba!!a de na2egacin es b9sicamente una lista de enlaces' usando los elementos @ulA # @liA pa!a da!le est!uctu!a& <ul> <li><a <li><a <li><a <li><a </ul>

%a!!a de Ka2egacin 5e!tical /a!a const!ui! una ba!!a de na2egacin' solo se debe ag!ega! estilos al elemento @aA& a { displa":bloc!; 8idth:/&px; } E(plicacin& displa#&bloc+ O ;os elementos @aA son de tipo inline' osea -ue el 9!ea cli-ueable solo es el te(to' con este cambio es toda el 9!ea del contenido. "s tambi3n pe!mite establece! un anc=o dado. *idt=&R?p( O se especi,ica un anc=o de R?p( pa!a iguala! el tamao de todos blo-ues de los enlaces

href#$index.ht l$>Bnicio</a></li> href#$ne8s.asp$>;oticias</a></li> href#$cont.asp$>Iontactos</a></li> href#$about.asp$>9cerca</a></li>

"=o!a eliminamos las 2ietas' los ma!genes # el !elleno de la lista& ul { list-st"le-t"pe:none; argin:&; padding:&; }

CSS %a!!a de Ka2egacin

%a!!a de Ka2egacin Ho!i)ontal Ha# dos ,o!mas de c!ea! menues =o!i)ontales. 6sando elementos inline o ,loating. "mbos metodos t!abajan bien pe!o si se -uie!e los enlaces de igual tamao se debe usa! el metodo ,loating. Metodo Inline Esto se log!a decla!ando al elemento @liA como inline& li { displa":inline; } E(plicacin& displa#&inlineC - /o! omisin los elementos @liA son elementos blo-ue. "s al !emo2e! los saltos antes # despues los elementos se muest!an en una lnea.
Metodo Qloating En el ejemplo los enlaces tiene di,e!entes anc=os. /a!a -ue todos tengan igual anc=o' ,lotamos al elemento @liA # establecemos el anc=o pa!a los elementos @aA& li { float:left; } a { displa":bloc!; 8idth:/&px; } E(plicacin& ,loat&le,t O se usa pa!a desli)a! todos losblo-ues unos al lado de ot!os displa#&bloc+ O tenemos toda el a!ea del elemento pa!a cli-uea!' # pode! especi,ica! el anc=o *idt=&R?p( O como lo elemento de blo-ue ocupan todo el anc=o disponible asi lo limitamos a R?p(

CSS 8ale!ia de Imagenes

di1.i g { argin:%px; border:1px solid .&&&&ff; height:auto; 8idth:auto; float:left; text-align:center; } di1.i g i g { displa":inline; argin:+px; border:1px solid .ffffff; } di1.i g a:ho1er i g { border:1px solid .&&&&ff; } di1.desc { text-align:center; font-8eight:nor al; 8idth:1%&px; argin:%px; } <di1 class#$i g$> <a target#$3blan!$ href#$.$><i g src#$!le /></a> <di1 class#$desc$>9gregar una descripci6n </di1> <di1 class#$i g$> <a target#$3blan!$ href#$.$><i g src#$!le /></a> <di1 class#$desc$>9gregar una descripci6n </di1> <di1 class#$i g$> <a target#$3blan!$ href#$.$><i g src#$!le /></a> <di1 class#$desc$>9gregar una descripci6n </di1> atis.5pg$ alt#$Rle atis$ 8idth#$11&$ height#$0&$ a=ui</di1> atis%.5pg$ alt#$Rle atis$ 8idth#$11&$ height#$0&$ a=ui</di1> atis+.5pg$ alt#$Rle atis$ 8idth#$11&$ height#$0&$ a=ui</di1>

CSS

pacidad 4 T!anspa!encia de Imagenes

;a p!opiedad opacit* es pa!te de la !ecomendacin W:C pa!a CSS:. Ejemplo J - C!ea! im9genes t!anspa!entes. i g { opacit":&.(; filter:alpha'opacit"#(&); } IEZ' Qi!e,o(' C=!ome' pe!a # Sa,a!i usan la p!opiedad opacit# pa!a las t!anpa!encias. Esta p!opiedad puede toma! los 2alo!es ent!e ?.? # J.?' meno! 2alo! mas t!anspa!ente IEU # ante!io!es usan )ilter$alpha/opacit*0"1. ;a ( es 2alo! ent!e ? # J??' en meno! 2alo! es mas t!anspa!ente. Ejemplo B O Imagen t!anspa!ente - E,ecto =o2e! img&=o2e! S opacit#&J.?C ,ilte!&alp=a.opacit#IJ??0C T Siguiendo con el ejemplo ante!io! se ag!ega estas p!opiedades. Cuando el !atn se colo-ue sob!e la imagen se 2uel2e opaca # cuando se !eti!a se coloca t!anspa!ente ot!a 2e)

CSS

pacidad 4 T!anspa!encia de Imagenes

Ejemplo : O Te(to en una caja t!anspa!ente di1.bac!ground { 8idth:*&&px; height:%*&px; bac!ground:url'!le atis.5pg) repeat; border:%px solid blac!; } di1.transbox { 8idth:(&&px; height:1-&px; argin:+&px *&px; bac!ground-color:.ffffff; border:1px solid blac!; opacit":&./; filter:alpha'opacit"#/&); } di1.transbox p { argin:+&px (&px; font-8eight:bold; color:.&&&&&&; } /!ime!o se c!ea una di2isin clase Fbac+g!oundG con anc=o # alto ,ijo' una imagen de ,ondo # un bo!de. Se c!ea una di2isin mas pe-uea clase Ft!ansbo(G' dent!o de la ante!io!' t!ansbo( tiene el alto # el anc=o ,ijo' colo! de ,ondo' bo!de # la t!anspa!encia. Dent!o de t!ansbo( tenemos un elemento @pA.

CSS Tipos de Medio .Media T#pes0

;os Media Types pe!miten especi,ica! como los documentos se!9n p!esentados seg7n el medio. ;a pagina se!9 p!esentada de ,o!ma di,e!ente en pantalla' en papel o en un na2egado! au!al. "lgunas p!opiedades CSS est9n diseadas pa!a cie!tos medios. /o! ejemplo D2oice-,amil#D esta diseada pa!a na2egado!es au!al. "lgunas si pueden usa!se en di,e!ente medios ejemplo D,ont-si)eD. ;a !egla 2media /e!mite di,e!entes !eglas de estilo pa!a di,e!entes medios en la misma =oja de estilo. S edia screen { p.test {font-fa il":1erdana4sans-serif;font-si,e:1(px;} } S edia print { p.test {font-fa il":ti es4serif;font-si,e:1&px;} } S edia screen4print { p.test {font-8eight:bold;} }

CSS Tipos de Medio .Media T#pes0

Media T#pe all au!al b!aille embossed =and=eld p!int p!ojection sc!een tt# t2

Desc!ipcin Dispositi2os de cual-uie! tipo de medio ;ecto!es # sinteti)ado!es de sonido Dispositi2os tactiles pa!a b!aille Imp!eso!as b!aille Dispositi2os pe-ueos o de palma Imp!eso!as /!esentaciones p!o#ectadas Monito!es Te!minales # teletipos Dispositi2os tipo T5

CSS Selecto!es po! at!ibuto

Se puede asigna! estilos a elementos HTM; -ue tengan at!ibutos especi,icos. Ko es como class o id. TtitleU { color:blue; } Ttitle#N+DchoolsU { border:*px solid green; } inputTt"pe#$text$U { 8idth:1*&px; displa":bloc!; argin-botto :1&px; bac!ground-color:"ello8; } inputTt"pe#$button$U { 8idth:1%&px; argin-left:+*px; displa":bloc!; }
Kota& IE[ e IEU sopo!tan selecto!es po! at!ibuto solamente si se especi,ica el \D CTV/E. 5e!siones ante!io!es no sopo!tan esta ca!acte!stica.