CLASE5APRENDEASERUNWEBMASTER2009

Etiquetasparaestilo
Antesdeempezaraverhojasdeestilo.Vamosaaprender2etiquetasenXHTMLqueayudarna implementarcuestionesdediseoennuestrossitiosweb.

DIV
Laetiquetadivpermitealosdesarrolladoresasignarciertosatributosabloquesdecontenido. Esprincipalmenteutilizadoenconjuntoconhojasdeestiloparadaratributosvisualesaporcionesde contenidoenundocumento.Estosbloquespuedencontenertexto,imgenes,formularios,video,etc. independientementedelacantidaddecontenido. Ejemplo:
<div> elemento 1 ... elemento 2 ... elemento 3 ... </div>

SPAN
LaetiquetaspanproveeunaformadedefiniratributosauntrozodeelementosXHTMLenunasola lineaorengln.Enlugardeldivdefinidoparacontenidoenbloque,spanescorrectoparausarloen situacionesdondedebamosdefinirlneas. Ejemplo:
<span> elemento ... </span>

Atributos:

id="valor" Permite identificar unvocamente al elemento div. Es usado entre otras cosas con hojas de estilos e indica al navegador cul es el elemento asociado.Se puede utilizar en cualquier elemento XHTML. class="valor" - Asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento est asociado. Una clase provee atributos visuales para los elementos, se puede utilizar en cualquier elemento XHTML.

Nota: Los atributos id y class pueden ser usados en cualquier elemento XHTML visible para el usuario.

Ejemplosdeusodedivconidyclass:
<div id="login" class="formularios"> <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" /> <br /> <label for="pass">Contrasea:</label> <input type="password" name="password" id="pass" /> </div>

Ejemplosdeusodespanconclass:
Ms informacin en <span class="enlaces"><a href="http://www.gdotg.com">Un enlace</a></span>

Ejemplosdeotrasetiquetasconidy/oclass:
<p id="parrafo1"> Blender es un programa, dedicado especialmente al modelado, animacin y creacin de grficos 3D. El programa fue inicialmente distribuido de forma gratuita pero sin el cdigo fuente con un manual disponible para la venta, aunque posteriormente pas a ser software libre. </p> <a id="link1" class="verde" href="http://google.com">Link a google</a> <img id="imagen1" src="images/imagen1.jpg" />

CSS(Hojasdeestiloencascada).
CSSesunlenguajedehojasdeestiloscreadoparacontrolarelaspectoopresentacindelos documentoselectrnicosdefinidosconHTMLyXHTML.CSSeslamejorformadesepararlos contenidosysupresentacinyesimprescindibleparacrearpginaswebcomplejas. Estorepresentanumerosasventajas,yaqueobligaacreardocumentosHTML/XHTMLbiendefinidos yconsignificadocompleto(tambinllamados"documentossemnticos"). Adems,mejoralaaccesibilidaddeldocumento,reducelacomplejidaddesumantenimientoypermite visualizarelmismodocumentoeninfinidaddedispositivosdiferentes. UnavezcreadosloscontenidosenXHTML,seutilizaellenguajeCSSparadefinirelaspectodecada elemento:color,tamaoytipodeletradeltexto,separacinhorizontalyverticalentreelementos, posicindecadaelementodentrodelapgina,etc. SiquieresverelpoderdeCSSpuedesvisitarhttp://www.csszengarden.com/

1.Modelodecajas(boxmodel)
Elmodelodecajaso"boxmodel"esseguramentelacaractersticamsimportantedellenguajede hojasdeestilosCSS,yaquecondicionaeldiseodetodaslaspginasweb.El"boxmodel"esel comportamientodeCSSquehacequetodosloselementosincluidosenunapginaHTMLse representenmediantecajasrectangulares.CSSpermitecontrolarelaspectodetodaslascajas. EldiseodecualquierpginaXHTMLestcompuestoporcajasrectangulares.CSSpermitedefinirla alturayanchuradecadacaja,elmargenexistenteentrecajasyelespacioderellenointeriorque muestracadacaja.Adems,CSSpermitecontrolarlaformaenlaquesevisualizanlascajas:sepueden ocultar,desplazarrespectodesuposicinoriginalyfijarlasenunaposicinespecficadentrodel documento. Comolamayoradecajasdelaspginaswebnomuestranningncolordefondoniningnborde,no sonvisiblesasimplevista.

Nota:Lamayoradelosnavegadoresrespetaneste modelodecajasalvoelIE6,conesteejemplo visualizamoselmodelodecajaparaunmejor entendimientocomparandoloqueestablece laW3C(ConsorciodelaWWW)yelnavegador delacompaamultinacional.

2.CmoincluirCSSenundocumentoXHTML?
UnadelasprincipalescaractersticasdeCSSessuflexibilidadylasdiferentesopcionesqueofrece pararealizarunamismatarea.Dehecho,existentresopcionesparaincluirCSSenundocumento XHTML.

2.1IncluirCSSenelmismodocumentoHTML
LosestilossedefinenenunazonaespecficadelpropiodocumentoHTML.Seemplealaetiqueta <style>deHTMLysolamentesepuedenincluirenlacabeceradeldocumento(slodentrodela seccin<head>). Ejemplo:
... <head> <title>Ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> p { color: black; font-family: Verdana; } </style> </head> <body> <p>Un prrafo de texto.</p> ...

2.2IncluirCSSenloselementosXHTML
ParaincluirestilosCSSendocumentosHTMLeselpeoryelmenosutilizado,yaquetienelos mismosproblemasquelautilizacindelasetiquetas<font>,endesusohoyendaporquemezcla cuestionesestilsticasenelmismodocumentodecontenidodelsitioweb. Ejemplo:
... <p style="color: black; font-family: Verdana;">Un prrafo de texto.</p> ...

2.3DefinirCSSenunarchivoexterno
Enestecaso,todoslosestilosCSSseincluyenenunarchivodetipoCSSquelaspginasXHTML enlazanmediantelaetiqueta<link>.UnarchivodetipoCSSnoesmsqueunarchivosimplede textocuyaextensines.css SepuedencreartodoslosarchivosCSSqueseannecesariosycada pginaHTMLpuedeenlazartantosarchivosCSScomonecesite.

SisequierenincluirlosestilosdelejemploanteriorenunarchivoCSSexterno,sedebenseguir lossiguientespasos: 1)Secreaunarchivodetextoyseleaadesolamenteelsiguientecontenido:

p { color: black; font-family: Verdana; }

2) Seguardaelarchivodetextoconelnombreestilo.cssSedebeponerespecialatencinaqueel archivotengaextensin .css y no .txt 3) EnlapginaHTMLseenlazaelarchivoCSSexternomediantelaetiqueta <link>:

... <head> <title>Ejemplo de estilos CSS en un archivo externo</title> <link rel="stylesheet" type="text/css" href="/css/estilo.css" media="screen" /> </head> <body> <p>Un prrafo de texto.</p> </body> </html>

DetodaslasformasdeincluirCSSenlaspginasHTML,estaeslamsutilizadaconmucha diferencia.LaprincipalventajaesquesepuedeincluirunmismoarchivoCSSenmultituddepginas HTML,porloquesegarantizalaaplicacinhomogneadelosmismosestilosatodaslaspginasque formanunsitioweb. CuandoelnavegadorcargalapginaHTMLanterior,antesdemostrarsuscontenidostambin descargalosarchivosCSSexternosenlazadosmediantelaetiqueta<link>yaplicalosestilosalos contenidosdelapgina. Normalmente,laetiqueta<link>incluyecuatroatributoscuandoseenlazaunarchivoCSS:

rel:indicaeltipoderelacinquetieneelrecursoenlazado(enestecaso,elarchivoCSS)yla pginaHTML.ParalosarchivosCSS,siempreseutilizaelvalorstylesheet. type:indicaeltipoderecursoenlazado.Susvaloresestnestandarizadosyparalosarchivos CSSsuvalorsiempreestext/css href:indicalaURLdelarchivoCSSquecontienelosestilos.LaURLindicadapuedeser relativaoabsolutaypuedeapuntaraunrecursointernooexternoalsitioweb. media:indicaelmedioenelquesevanaaplicarlosestilosdelarchivoCSS.

Conestemtodo,elmantenimientodelsitiowebsesimplificaalmximo,yaqueunsolocambioenun soloarchivoCSSpermitevariardeformainstantnealosestilosdetodaslaspginasHTMLque enlazanesearchivo.

Aunquegeneralmenteseemplealaetiqueta<link>paraenlazarlosarchivosCSSexternos,tambinse puedeutilizarlaetiqueta<style>.LaformaalternativadeincluirunarchivoCSSexternosemuestraa continuacin: ...

<head> <title>Ejemplo de estilos CSS en un archivo externo</title> <style type="text/css" media="screen"> @import '/css/estilos.css'; </style> </head> <body> <p>Un prrafo de texto.</p> </body> </html>

Enestecaso,paraincluirenlapginaHTMLlosestilosdefinidosenarchivosCSSexternosseutiliza unareglaespecialdetipo@import.Lasreglasdetipo@importsiempreprecedenacualquierotra reglaCSS(conlanicaexcepcindelaregla@charset). LaURLdelarchivoCSSexternoseindicamedianteunacadenadetextoencerradaconcomillas simplesodoblesomediantelapalabrareservadaurl().Deestaforma,lassiguientesreglas @importsonequivalentes:

@import @import @import @import '/css/estilos.css'; "/css/estilos.css"; url('/css/estilos.css'); url("/css/estilos.css");

3FuncionamientoBsicodeCSS
ElcdigoCSSdefineunaseriedetrminosquepermitendescribircadaunadelaspartesque componenlosestilosCSS.ElsiguienteesquemamuestralaspartesqueformanunestiloCSSmuy bsico:

Losdiferentestrminossedefinenacontinuacin: Regla:cadaunodelosestilosquecomponenunahojadeestilosCSS.Cadareglaestcompuestade unapartede"selectores",unsmbolode"llavedeapertura"({),otrapartedenominada"declaracin"y porltimo,unsmbolode"llavedecierre"(}).

Selector:indicaelelementooelementosHTMLalosqueseaplicalareglaCSS. Declaracin:especificalosestilosqueseaplicanaloselementos.Estcompuestaporunao mspropiedadesCSS. Propiedad:permitemodificarelaspectodeunacaractersticadelelemento. Valor:indicaelnuevovalordelacaractersticamodificadaenelelemento.

UnarchivoCSSpuedecontenerinfinitasreglasCSS,cadareglapuedecontenerinfinitosselectoresy cadadeclaracinpuedeestarformadaporunnmeroinfinitodeparespropiedad/valor.

4Comentarios
CSSpermiteincluircomentariosentresusreglasyestilos.Loscomentariossoncontenidosdetexto queeldiseadorincluyeenelarchivoCSSparasupropiainformacinyutilidad.Losnavegadores ignoranporcompletocualquiercomentariodelosarchivosCSS,porloqueescomnutilizarlospara estructurardeformaclaralosarchivosCSScomplejos. Elcomienzodeuncomentarioseindicamedianteloscaracteres/*yelfinaldelcomentarioseindica mediante*/,talycomosemuestraenelsiguienteejemplo: /* Este es un comentario en CSS */ Loscomentariospuedenocupartantaslneascomoseanecesario,peronosepuedeincluirun comentariodentrodeotrocomentario:
/* Este es un comentario CSS de varias lineas */

Aunquelosnavegadoresignoranloscomentarios,sucontenidoseenvajuntoconelrestodeestilos, porloquenosedebeincluirenellosningunainformacinsensibleoconfidencial.Lasintaxisdelos comentariosCSSesmuydiferentealadeloscomentariosHTML,porloquenodebenconfundirse: <!-- Este es un comentario en HTML -->

<!-- Este es un comentario HTML de varias lineas -->

5Selectores
Paracreardiseoswebprofesionales,esimprescindibleconocerydominarlosselectoresdeCSS. Comosevioenelcaptuloanterior,unaregladeCSSestformadaporunapartellamada"selector"y otrapartellamada"declaracin". Ladeclaracinindica"quhayquehacer"yelselectorindica"aquinhayquehacrselo".Porlo tanto,losselectoressonimprescindiblesparaaplicardeformacorrectalosestilosCSSenunapgina. AunmismoelementoHTMLselepuedenasignarinfinitasreglasCSSycadareglaCSSpuede aplicarseaunnmeroinfinitodeelementos.Enotraspalabras,unamismareglapuedeaplicarsesobre variosselectoresyunmismoselectorsepuedeutilizarenvariasreglas. ElestndardeCSS2.1incluyeunadocenadetiposdiferentesdeselectores,quepermitenseleccionar deformamuyprecisaelementosindividualesoconjuntosdeelementosdentrodeunapginaweb. Noobstante,lamayoradepginasdelossitioswebsepuedendisearutilizandosolamenteloscinco selectoresbsicos.

5.1Selectoresbsicos
5.1.1.Selectoruniversal
Seutilizaparaseleccionartodosloselementosdelapgina.Elsiguienteejemploeliminael margenyelrellenodetodosloselementosHTML(porahoranoesimportantefijarseenla partedeladeclaracindelareglaCSS):
* { margin: 0; padding: 0; }

Elselectoruniversalseindicamedianteunasterisco(*).Apesardesusencillez,noseutiliza habitualmente,yaqueesdifcilqueunmismoestilosepuedaaplicaratodosloselementosde unapgina.

5.1.2.Selectordetipooetiqueta
SeleccionatodosloselementosdelapginacuyaetiquetaHTMLcoincideconelvalordel selector.Elsiguienteejemploseleccionatodoslosprrafosdelapgina:
p { ... }

Parautilizaresteselector,solamenteesnecesarioindicarelnombredeunaetiquetaXHTML (sinloscaracteres<y>)correspondientealoselementosquesequierenseleccionar.El siguienteejemploaplicadiferentesestilosalostitularesyalosprrafosdeunapgina: h1{ color:red; } h2{ color:blue; } p{ color:black; } Sisequiereaplicarlosmismosestilosadosetiquetasdiferentes,sepuedenencadenarlos selectores.Enelsiguienteejemplo,losttulosdeseccinh1,h2yh3compartenlosmismos estilos:
h1 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h2 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }

Enestecaso,CSSpermiteagrupartodaslasreglasindividualesenunasolareglaconun selectormltiple.Paraello,seincluyentodoslosselectoresseparadosporunacoma(,)yel resultadoesquelasiguientereglaCSSesequivalentealastresreglasanteriores:

h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }

Enlashojasdeestilocomplejas,eshabitualagruparlaspropiedadescomunesdevarios elementosenunanicareglaCSSyposteriormentedefinirlaspropiedadesespecficasdeesos mismoselementos.Elsiguienteejemploestableceenprimerlugarlaspropiedadescomunesde losttulosdeseccin(colorytipodeletra)yacontinuacin,estableceeltamaodeletrade cadaunodeellos:

h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 22px; } h2 { font-size: 16px; } h3 { font-size: 13px; }

5.1.3.Selectordescendente Seleccionaloselementosqueseencuentrandentrodeotroselementos.Unelementoes descendientedeotrocuandoseencuentraentrelasetiquetasdeaperturaydecierredelotro elemento. Elselectordelsiguienteejemploseleccionatodosloselementos<span>delapginaquese encuentrendentrodeunelemento<p>:

p span { color: red; }

SielcdigoXHTMLdelapginaeselsiguiente:
<p> ... <span>texto1</span> ... <a href="">...<span>texto2</span></a> ... </p>

Elselectorpspanseleccionatantotexto1comotexto2.Elmotivoesqueenelselector descendente,unelementonotienequeser"hijodirecto"deotro.Lanicacondicinesqueun elementodebeestardentrodeotroelemento,sinimportarloprofundoqueseencuentre. Alrestodeelementos<span>delapginaquenoestndentrodeunelemento<p>,noseles aplicalareglaCSSanterior. Losselectoresdescendentespermitenmejorarlaprecisindelselectordetipooetiqueta.As, utilizandoelselectordescendenteesposibleaplicardiferentesestilosaloselementosdel mismotipo.

Elsiguienteejemploamplaelanteriorymuestradecolorazultodoeltextodelos<span> contenidosdentrodeun<h1>:
p span { color: red; } h1 span { color: blue; }

ConlasreglasCSSanteriores:

Loselementos<span>queseencuentrandentrodeunelemento<p>semuestrandecolor rojo. Loselementos<span>queseencuentrandentrodeunelemento<h1>semuestrandecolor azul. Elrestodeelementos<span>delapgina,semuestranconelcolorpordefectoaplicado porelnavegador.

Lasintaxisformaldelselectordescendentesemuestraacontinuacin:
elemento1 elemento2 elemento3 ... elementoN

Losselectoresdescendentessiempreestnformadospordosomspartesseparadasentrespor espaciosenblanco.Laltimaparteindicaelelementosobreelqueseaplicanlosestilosytodas laspartesanterioresindicanellugarenelquesetienequeencontrareseelementoparaquelos estilosseapliquenrealmente. Enelsiguienteejemplo,elselectordescendentesecomponedecuatropartes:

p a span em { text-decoration: underline; }

Losestilosdelareglaanteriorseaplicanaloselementosdetipo<em>queseencuentren dentrodeelementosdetipo<span>,queasuvezseencuentrendentrodeelementosdetipo <a>queseencuentrendentrodeelementosdetipo<p>. Nodebeconfundirseelselectordescendenteconlacombinacindeselectores:

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */ p, a, span, em { text-decoration: underline; } /* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */ p a span em { text-decoration: underline; }

2.1.4.Selectordeclase
SiseconsideraelsiguientecdigoHTMLdeejemplo:
<body> <p>Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body>

CmosepuedenaplicarestilosCSSsloalprimerprrafo?Elselectoruniversal(*)nose puedeutilizarporqueseleccionatodosloselementosdelapgina.Elselectordetipooetiqueta (p)tampocosepuedeutilizarporqueseleccionaratodoslosprrafos.Porltimo,elselector descendente(bodyp)tampocosepuedeutilizarporquetodoslosprrafosseencuentranenel mismositio. Unadelassolucionesmssencillasparaaplicarestilosaunsoloelementodelapginaconsiste enutilizarelatributoclassdeHTMLsobreeseelementoparaindicardirectamentelaregla CSSqueseledebeaplicar:

<body> <p class="destacado">Blender es un programa, dedicado...</p> <p>al modelado, animacin y creacin de grficos 3D ...</p> <p>aunque posteriormente pas a ser software libre ...</p> </body>

Acontinuacin,secreaenelarchivoCSSunanuevareglallamadadestacadocontodoslos estilosquesevanaaplicaralelemento.Paraqueelnavegadornoconfundaesteselectorconlos otrostiposdeselectores,seprefijaelvalordelatributoclassconunpunto(.)talycomo muestraelsiguienteejemplo:

.destacado { color: red; }

Elselector.destacadoseinterpretacomo"cualquierelementodelapginacuyoatributoclass seaigualadestacado",porloquesolamenteelprimerprrafocumpleesacondicin. Estetipodeselectoressellamanselectoresdeclaseysonlosmsutilizadosjuntoconlos selectoresdeIDquesevernacontinuacin.Laprincipalcaractersticadeesteselectoresque enunamismapginaXHTMLvarioselementosdiferentespuedenutilizarelmismovalorenel ejemploatributoclass:

<body> <p class="destacado">Blender es un programa, dedicado ...</p> <p> al modelado, <a href="#" class="destacado">animacin</a> y creacin de grficos 3D ...</p> <p>.. pas a ser<em class="destacado">software libre</em> litora...</p> </body>

2.1.5.SelectoresdeID
Enocasiones,esnecesarioaplicarestilosCSSaunnicoelementodelapgina.Aunquepuede utilizarseunselectordeclaseparaaplicarestilosaunnicoelemento,existeotroselectorms eficienteenestecaso. ElselectordeIDpermiteseleccionarunelementodelapginaatravsdelvalordesuatributo id.Estetipodeselectoressloseleccionanunelementodelapginaporqueelvalordel atributoidnosepuederepetirendoselementosdiferentesdeunamismapgina. Seutilizaelsmbolodelaalmohadilla(#)envezdelpunto(.)comoprefijodelnombredela reglaCSS:
#destacado { color: red; } <p>Primer prrafo</p> <p id="destacado">Segundo prrafo</p> <p>Tercer prrafo</p>

Enelejemploanterior,elselector#destacadosolamenteseleccionaelsegundoprrafo(porque suatributoidesigualadestacado). Laprincipaldiferenciaentreestetipodeselectoryelselectordeclasetienequevercon XHTMLynoconCSS.Comosesabe,doselementosdiferentesnopuedentenerelmismo valordeid.Sinembargo,elatributoclassnoesobligatorioqueseanico,deformaque muchoselementosXHTMLdiferentespuedencompartirelmismovalorparasuatributoclass. Deestaforma,larecomendacingeneralesladeutilizarelselectordeIDcuandosequiere aplicarunestiloaunsoloelementoespecficodelapginayutilizarelselectordeclasecuando sequiereaplicarunestiloavarioselementosdiferentesdelapginaXHTML. Sepuederestringirelalcancedelselectormediantelacombinacinconotrosselectores.El siguienteejemploaplicalareglaCSSsolamentealelementodetipo<p>quetengaun atributoidigualalindicado:
p#aviso { color: blue; }

Aprimeravista,restringirelalcancedeunselectordeIDpuedeparecerabsurdo.Enrealidad, unselectordetipop#avisoslotienesentidocuandoelarchivoCSSseaplicasobremuchas pginasXHTMLdiferentes.Enestecaso,algunaspginaspuedendisponerdeelementoscon unatributoidigualaavisoyquenoseanprrafos,porloquelareglaanteriornoseaplica sobreesoselementos.

No debe confundirse el selector de ID con los selectores anteriores: /* Todos los elementos de tipo "p" con atributo id="aviso" */ p#aviso { ... } /* Todos los elementos con atributo id="aviso" dentro de cualquier elemento de tipo "p" */ p #aviso { ... } /* Todos los elementos "p" de la pgina y todos los elementos con atributo id="aviso" de la pgina */ p, #aviso { ... }