DIW04 Contenidos

21/12/2014 educacionadistancia.juntadeandalucia.es/cursos/pluginfile.
php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
Hojasdeestilos.
Casoprctico
Como todas las semanas, se renen los

miembros del equipo de trabajo de la empresa
BK programacin, para comentar las incidencias
delasemanaanterior.
Antonio ha empleado los bocetos realizados por
Juan y Mara para elaborar la gua de estilo que
habr que tener en cuenta a la hora de
desarrollarlainterfazdelapginadelaempresa
"Migas Amigas". Ha hecho un gran trabajo, con
una presentacin muy meticulosa. Sus
compaeros lo han felicitado porque era su
primeraguaylohahechomuybien.
Caramba, cmo se nota que eres un experto en ofimtica. Menuda
presentacin. Qu elegante! Dice Ada al hojear el ejemplar de la gua
quehatradoimpreso.
PodemosponernosyaconelHTML?preguntaCarlos.
Ada sabe que Carlos est deseando comenzar su primera pgina pero
tiene que frenarlo un poco porque todava no tiene mucha experiencia y
noesconscientedelautilidaddeusarlashojasdeestiloencascadapara
separarlapresentacindelcontenido.
NocorrastantolecontestaAdahayqueprepararunaovariashojas
de estilo que se adapten a la gua elaborada por Antonio y que permita
realizarlapginasegnlosbocetosdeJuanyMara.
Pero,noentiendoPorquesnecesariaunahojadeestilo?vuelvea
preguntarCarlos.
Por que la pgina es ms fcil de mantener le responde rpidamente
Mara,queeslaquesueleencargarsedeesatarea.
YnosloesocontinaJuandiciendoHaymuchasotrasventajas,ya
vers.Estavezlovasahacerconmigoyteirenseandoelmaravilloso
mundodelasCSS.
Todos sueltan a la vez una sonora carcajada. Qu divertido es trabajar
enBKprogramacin!
Adadaporterminadalareunindiciendo:
Puesatrabajartodosyt,Antonio,aperseguiralconejoblanco.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/inde
1/66
21/12/2014 educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
MaterialesformativosdeFPOnlinepropiedaddelMinisterio
deEducacin,CulturayDeporte.
AvisoLegal
2/66
1.IntroduccinaCSS.
Casoprctico
Carlossaledelareuninmuyintrigadopensandoentodoloquelecont
Ada con respecto a las hojas de estilo en cascada. As que, al llegar a
casa, decide buscar informacin en la web sobre los beneficios de su
utilizacinalahorademejorarlapresentacindelaspginasweb.
CarlosaprovechaparairconfeccionndoseunpequeomanualdeCSS
en el
wiki de BK Programacin que todos podrn ir editando y
completando.
Lashojasdeestiloencascada(CSSCascadingStyleSheets)sonunestndar
W3CquedefinelapresentacindelosdocumentosWeb,esdecir,elmodoenel
que se muestra un documento en pantalla o se suministra al usuario, ya sea por el
monitor, en la pantalla del telfono mvil o ledo por un lector de pantalla. Lo ms
importante es que con CSS se mantienen las instrucciones de presentacin
separadasdelcontenidodeldocumentoXHTML.
Lashojasdeestiloencascadacomohoylasconocemos,comenzaroncuandoHkon
LiepublicsuprimerborradordehojasdeestiloHTMLencascada,alqueprontose
leuniBertBos,granimpulsordeesteestndar.
CSSNivel2,Revisin1queessimplementeunarecomendacinquerealiza
unos ajustes menores a CSS2 basndose en la experiencia de trabajo con l
entre1998y2004.
CSS Nivel 3, basada en mdulos, aade soporte para texto flotante vertical,
mejor manejo de tablas, idiomas internacionales y una mejor integracin con
otrastecnologasXMLcomoSVG, MathMLySMIL.
El CSS WG tambin est trabajando en conjuntos CSS especiales orientados a
mediosespecficoscomo:CSSMobile,CSSPrintyCSSTV.
3/66
Parasaberms
Enelenlacesiguientepuedesencontrarinformacinactualizadasobrelas
actividadesdelW3CWG.
www.w3.org/Style/CSS
Los navegadores actuales implementan bastante bien CSS1 desde 1999 (tres aos
despus de su lanzamiento) aunque, dependiendo de la marca y versin del
navegador, hay algunas pequeas diferencias de implementacin. El primer
navegador en dar soporte completo al CSS1 ha sido Internet Explorer 5.0 aunque
hasta ese momento fue el Opera el que soportaba mejor CSS1. Despus otros
navegadorestambinlohanidoimplementando.
Sin embargo, en los navegadores ms recientes hay diferentes niveles de
implementacindeCSS2.1.
Autoevaluacin
Siquieresdefinirlapresentacindeunapginawebutilizas...?
CSS
XHTML
Javascript.
PHP
4/66
1.1.AadirestilosaundocumentoconCSS.
Sin duda, no existe ninguna desventaja por utilizar CSS en la maquetacin de
pginasweb,sontodoventajasy,entreellas,podemosdestacarlassiguientes:
Mayorcontroleneldiseodelaspginas:Sepuedellegaradiseosfueradel
alcancedeHTML.
Menostrabajo:Sepuedecambiarelestilodetodounsitioconlamodificacin
deunnicoarchivo.
Documentosmspequeos:Lasetiquetas <font>ylagrancantidaddetablas
empleadasparadarunabuenaaparienciaalossitioswebdesaparecenahora,
porloqueseahorracdigoenlaconfiguracindelapresentacindelsitio.
Documentosmuchomsestructurados:Losdocumentosbienestructurados
sonaccesiblesamsdispositivosyusuarios.
ElHTMLdepresentacinestenvasdedesaparecer:Todosloselementos
y atributos de presentacin de las especificaciones HTMLy XHTML fueron
declaradosobsoletosporelW3C.
Tienebuensoporte: En este momento, casi todos los navegadores soportan
casitodalaespecificacinCSS1ylamayoratambinlasrecomendacionesde
nivel2y2.1.
Pero,cmofuncionaCSS?Elprocesodefuncionamientodelashojasdeestiloen
cascadapodemosresumirloentrespasos:
1. Hay que comenzar con un documento XHTML (o HTML). En teora, el
documentotendrunaestructuralgicayunsignificadosemnticoatravsde
los elementos XHTML adecuados. Con XHTML se crea la estructura de la
pginaweb.
2. Luegohayqueescribirlasreglasdeestiloparadefinirelaspectoidealde
todos los elementos. Las reglas seleccionan el elemento en cuestin por su
nombre y, a continuacin, listan las propiedades (fuente, color, etc.) y los
valoresqueselevanaaplicar.
3. Por ltimo, hay que vincular los estilos al documento. Las reglas de estilo
pueden reunirse en un documento independiente y aplicarse a todo el sitio, o
puedenaparecerenlacabecerayaplicarsesoloaesedocumento.
Lo primero que deberas saber es que, las hojas de estilo consisten en una o ms
reglasquedescribencmodeberamostrarseenpantallaunelemento.
A la hora de aplicar las reglas de estilo a un documento (X)HTML, debes tener en
cuentaqueexistentresmodosdistintos:
Estilosenlnea.
Hojasdeestilosincrustados.
Hojasdeestilosexternas:vinculadasoimportadas.
5/66
Debesconocer
En el enlace siguiente vers una presentacin donde se vern las

principales diferencias que existen entre los modos de aplicar las reglas
deestiloysusintaxis.
Resumentextualalternativo
6/66
1.2.Hojasdeestiloexternas.
Enlapresentacindelapartadoanterioryahaspodido
ver el modo de emplear las hojas de estilo externas:
importndolas o enlazndolas. Tambin has visto
cmo se crea una regla de estilo y sus componentes:
selector, propiedad y valor. Pero hay algunas cosas
quenosquedanporcomentar.
Las hojas de estilo son documentos de texto con, por lo menos, una regla. Estos
archivos no contienen ninguna etiqueta HTML, para qu?. Al igual que en los
documentosHTML,enlashojasdeestilosepuedenincluircomentariospero,eneste
caso,seescribendelsiguientemodo:/*Esteesuncomentario*/
CSS2introducelaposibilidaddeorientarlashojasdeestiloamediosdepresentacin
especficos.Paraelloseempleaelatributo mediadelelemento linkdelcualyavisteun
ejemploenlapresentacindelapartadoanterior.
Lasiguientetablamuestralosvaloresquepuedetomarelatributomedia:
Valoresdelatributomedia.
Mediosde
presentacin
Valoratributomedia
all
Todoslosmediosdefinidos.
braille
DispositivostctilesqueempleanelsistemaBraille.
embosed
ImpresorasqueempleanelsistemaBraille.
handheld
Dispositivosdemano:mviles,
print
Impresoras y navegadores en el modo "vista previa para

imprimir".
projection
Proyectoresydispositivosparapresentaciones.
screen
Pantallasdeordenador.
speech
Sintetizadores para navegadores de voz empleados por

personasdiscapacitadas.
tty
Dispositivos textuales limitados, como teletipos y terminales

detexto.
tv
Televisoresydispositivosconresolucinbaja.
PDA,etctera.
Enelejemplosiguientesemuestracmosepuedenemplearenlafuncin @mediade
lamismaformaquehacamosconlafuncin@import.
7/66
Ejemplo:
<styletype="text/css">
<!
@importurl(http://estilos/miestilo.css)
@mediaprint{
body{fontsize:10pt}/*Estableceeltamaodefuenteparaimpresin*/
}
@mediascreen{
body{fontsize:13px}/*Estableceeltamaodefuenteparavisualizacin*/
}
p{fontface:Verdana}
>
</style>
8/66
1.3.ConceptosclavedeCSS.
Paraquetepuedasfamiliarizarconelcomportamiento
de CSS, es importante comprender una serie de
conceptosclave.
Estructurayherencia.
Un documento (X)HTML tiene una estructura
determinada que es equivalente a un rbol
genealgico cuando se hace referencia a la relacin
entreelementos:
Sedicequeunelementoes"hijo"deotrosiestcontenidodirectamenteenly
este ltimo pasa a ser su "padre". Por ejemplo: el elemento p es hijo del
elementobodyyelelementobodyespadredelelementop.
Los elementos que tienen el mismo padre son "hermanos". Por ejemplo: un
elemento ppuedeserhermanodeotroelemento psiambossonhijosdirectos
delelementobody.
Controlar la relacin padrehijo es fundamental para el funcionamiento de CSS. Un
hijopuede"heredar"valoresdepropiedaddesupadre.Conunabuenaplanificacin,
laherenciapuedeemplearseparahacermseficientelaespecificacindelosestilos.
Esteprincipioporelquealgunasreglasseignoranyotrasseheredannosintroducen
unconceptomuyimportante:"lacascada".
Reglasdeestiloenconflicto:la"cascada".
La"cascada",delashojasdeestiloencascada,serefierealoqueocurresivarias
fuentes de informacin de estilo quieren dar formato al mismo elemento de una
pgina. Cuando un navegador encuentra un elemento para el cual hay varias
declaraciones de estilo, las ordena de acuerdo al origen de la hoja de estilo, la
especificidad de los selectores y el orden de la regla para poder determinar cul
aplicar.
Origendelahojadeestilo.
Los navegadores otorgan un peso distinto a las hojas de estilo que, ordenadas de
menoramayorpeso,son:
Hojasdeestilodelnavegador.
Hojasdeestilodellector.
Hojasdeestilodelapersonaquehadiseadolapginaweb.
Declaracionesdeestilo!importantdellector.
Ademsdeesteorden,existeotrajerarquadepesosqueseaplicanalashojasde
estilocreadasporlapersonaquehadiseadolapginaweb.Esimportanteentender
estajerarquaytenerencuentaquelasreglasdeestiloqueestnalfinaldelalista
ignorarn a las primeras. La siguiente lista, que como la anterior est ordenada de
menoramayorpeso,muestraestaotrajerarqua:
Hojasdeestiloexternasvinculadas(empleandoelelemento linkenlacabecera
deldocumento).
9/66
Hojasdeestiloexternasimportadas(empleandoelelemento @importdentrodel
elementostyleenlacabeceradeldocumento).
Hojas de estilo incrustadas (empleando el elemento style en la cabecera del
documento).
Estilosenlnea(empleandoelatributostyleenlaetiquetadelelemento).
Declaracionesdeestilomarcadascomo!important.
Especificidaddelselector.
Hasta ahora se tuvieron en cuenta las distintas fuentes de la informacin del estilo.
Peroanpuedeexistiralgnconflictoaniveldereglas.Poresarazn,"lacascada"
contina a nivel de reglas. Lo vers mejor con el el siguiente ejemplo, que podra
estar en una hoja de estilo externa o incrustada. En l se muestran dos reglas que
hacenreferenciaalelementostrong.
Ejemplo:
strong{color:red}h1strong{color:blue}
Enelejemploanterior,todoeltextodeldocumento(X)HTMLmarcadoconlaetiqueta
strongaparecerencolorrojo.Sinembargo,sieltextomarcadoconlaetiqueta strong
aparecedentrodeunacabeceradeprimernivel(h1),sucolorserazul.Estoocurre
porque un elemento en un contexto determinado es ms especfico que en un
contexto general y, por lo tanto, tiene ms peso. Debes tener en claro que, cuanto
msespecficoseaelselectorseledarmspesoparaignorarlasdeclaracionesen
conflicto.
Ordendelasreglas.
Cuandounahojadeestilocontienevariasreglasenconflictodeigualpeso,slose
tendr en cuenta la que est en ltimo lugar. En el siguiente ejemplo, todas las
cabecerasdeprimerniveldeldocumentoseranrojasporqueseimponesiemprela
ltimaregla:
Ejemplo:
h1{color:green}h1{color:blue}h1{color:red}
TiposdeelementosCSS.Elementosdebloqueyenlnea.
En CSS, la nocin de "elemento de bloque" y "en lnea" es puramente de
presentacin.UnelementodebloquedeCSSsiempregenerasaltosdelnea,antesy
despusdel,mientrasqueloselementosenlneadeCSSnolohacen,aparecenen
elflujodelalneayslopasarnaotralneasinotienenespacio.
En(X)HTML,losprrafos(p),cabeceras(comoh1),listas(ol,ul,dl)ycontenedores(div)
sonloselementosdebloquemscomunes,mientrasque,eltextoenfatizado(em),las
anclas(a)yloselementosspansonloselementosenlneamscomunes.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
10/66
ConCSS podrs indicarle al navegador cmo quieres que se vea en el documento

empleando para ello los atributos block e inline de la propiedad display,
independientementedequeunelementoseadebloqueoenlnea.
Autoevaluacin
Relaciona los elementos XHTML con el tipo de elemento que son: de

bloqueoenlnea.
Ejercicioderelacionar
ElementoXHTML
Relacin
Tipodeelemento
1.Debloque.
div
strong
2.Enlinea.
em
Enviar
11/66
1.4.ElmodelodecajasdeCSS.
El modelo de cajas es un concepto fundamental para
comprender el funcionamiento de las hojas de estilo.
Aqupodrsverunaintroduccinbsicaaestemodelo.
De acuerdo con este modelo, todos los elementos de
unapginawebgeneranunacajarectangularalrededor
llamada"cajadelelemento".
Enestascajassepuedenconfigurarpropiedadescomo
bordes, mrgenes y fondos (entre otras). Las cajas
tambin se pueden emplear para posicionar los
elementosydisearlapgina.
Las cajas de elementos, tal y como muestra la imagen, estn hechas de cuatro
componentesprincipales:
Contenidodelelemento:esloqueestenelncleodelacajaestel.
Relleno(padding):eselespacioquerodeaalcontenido.
Borde(border):eslapartequeperfilaelrelleno.
Margen (margin): es el espacio que rodea al borde, la parte ms externa del
elemento.
Hay algunas caractersticas fundamentales del modelo de cajas que vale la pena
destacar:
El relleno, los bordes y los mrgenes son opcionales, por lo que, si ajustas a
cerosusvaloresseeliminarndelacaja.
Cualquiercoloroimagenqueapliquesdefondoalelementoseextenderporel
relleno.
Losbordessegeneranconpropiedadesdeestiloqueespecificansuestilo(por
ejemplo:slido),grosorycolor.Cuandoelbordetienehuecos,elcoloroimagen
defondoapareceratravsdeesoshuecos.
Losmrgenessiempresontransparentes(elcolordelelementopadresevera
travsdeellos).
Cuando definas el largo de un elemento ests definiendo el largo del rea de
contenido (los largos de relleno, de borde y de mrgenes se sumaran a esta
cantidad).
Puedescambiarelestilodelosladossuperior,derecho,inferioreizquierdode
unacajadeunelementoporseparado.
Debesconocer
EnelsiguienteenlacedelawebdelaW3Cencontrarsunresumende
laspropiedadesCSSmsutilizadasenelmodelodecajas.
EnlacealawebdelaW3CquehablasobrelaspropiedadesCSS
relacionadasconelmodelodecajas.
12/66
En los siguientes subapartados podrs ver con detalle las propiedades con las que
podremosmodificarlaaparienciadelascajas
13/66
1.4.1.readecontenidoyrelleno.
Si comparamos el modelo de cajas con un
Huevo
Kinder, el rea de contenido sera la sorpresa (en la
imagen,elcochecitodeportivo),mientrasqueelrelleno
seralacpsuladeplsticodecoloramarilloenlaque
viene la sorpresa. El chocolate sera el borde y el
envoltoriodealuminioseraelmargen.
readecontenido.
Recuerdaqueelreadecontenidoeslapartemsinternadelacaja.Enelejemplo
siguiente se muestra cmo se pueden modificar las propiedades que afectan al
tamaodelreadecontenido:suancho(width)ysualtura(height).
Ejemplo:div{width:100pxheight:200px}
Existenotraspropiedadesinteresantesquenospermitenajustarlaalturayelancho
mximo y mnimo del rea de contenido de las cajas. Estas propiedades son,
respectivamente:maxheight,maxwidth,minheightyminwidth.
Relleno.
El relleno es una cantidad opcional de espacio existente entre el rea de contenido
de un elemento y su borde. Es conveniente que establezcas un valor de relleno
cuandoponesbordeaunelemento.
Para establecer el relleno se emplea la propiedad padding. Esta propiedad, como
muchasotrasenCSS,obligaaconfigurarlosvaloresenunordendeterminado.Estos
valoresysuordenson:top(arriba),rightderecha,bottom(debajo)eleft(izquierda).
Elejemplosiguientemuestraunatablaqueagrupaalgunosejemplosdelaasignacin
devaloresysuinterpretacinporCSS.Entodoslosejemplossehaempleadocomo
selectorelelementodiv.
Ejemplosdeasignacindevaloresalapropiedadpadding.
EJEMPLO
div{padding:3px20px3px20px}
INTERPRETACIN
Establece
un
relleno para todos
los elementos div
de 3 pxeles por
encima del rea de
contenido,
20
pxeles
a
su
derecha, 3 pxeles
por debajo y 20
pxeles
a
su
izquierda.
Al omitir un valor,
14/66
div{padding:3px20px3px}
div{padding:3px20px}
div{padding:3px}
asume que el valor

del relleno a la
izquierda es el
mismo que el de la
derecha.
Al
omitir
dos
valores,asumeque
el primer valor
corresponde
al
relleno por encima
y por debajo del
rea de contenido
y, el segundo valor
corresponde
al
rellenoaladerecha
yalaizquierda.
Al
omitir
tres
valores,asumeque
ese valor es el
mismoparatodos.
Otrascaractersticasinteresantesdelrellenoson:
Elvalordelrellenosesumaraldewidthyadefinidoenelelemento.
Sucoloreselmismoaldelreadecontenido.
El relleno nunca se "colapsa". Esto lo entenders cuando veas los mrgenes
quessecolapsan.
Enelsiguienteejemplosemuestracmoconfiguramoselrellenoyelcolordefondo
delreadecontenidodeloselementosh1deldocumento.Elcolordelreaderelleno
serelmismoqueeldelelemento.
Ejemplo:h1{padding:4px10pxbackground:#ccc}
Autoevaluacin
Elpaddingeselmargenexteriordelobjeto?
Verdadero
Falso
15/66
1.4.2.Bordes.
Unbordeesunalneadibujadaalrededordelreadecontenidodeunelementoyde
surelleno(padding),aunqueyavimosquesteltimoeraopcional.
Los bordes funcionan, a la hora de establecer su valores, de la misma

manera que el relleno visto anteriormente, siguiendo un orden: superior,
derecho,inferior,izquierdo,siempreenelsentidodelasagujasdelrelojy
comenzandoenlas12.Esfcilderecordar.
Se pueden establecer valores distintos para cada uno de los bordes y
omitirvalores,aligualquehacamosconelrelleno.
Podemosconfigurarelestilodelborde,sugrosorysu
color.Laspropiedadesquenospermitenhacerloson:
Borderstyle:
con esta propiedad configuramos el

estilo del borde. Esta propiedad es, sin duda, la
ms importante del borde, ya que, si no est
presenteelbordenoexistir.
La propiedad borderstyle puede tener los valores:
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset e inherit. En el siguiente
ejemploconfiguramoscadaunodelosladosdelacajaconunbordedistinto.
Ejemplo:div{borderstyle:soliddasheddotteddouble}div{borderstyle:soliddasheddotteddouble}
Borderwidth:conestapropiedadconfiguramoselgrosordelborde.
Los valores que puede tomar esta propiedad son: thin, medium, thick, inherit o un
valor concreto en pxeles. Si no se especifica esta propiedad tomar medium

comovalorpordefecto.Enelsiguienteejemploconfiguramosungrosordistinto
encadaunodelosladosdelborde.
Ejemplo:div{borderstyle:solidborderwidth:thinmediumthick12px}
Bordercolor:conestapropiedadconfiguramoselcolordelborde.
Sinoespecificamoselcolorelelementocogeeldel"primerplano",esdecirque
si,porejemplo,tenemosunacajaencuyointeriorhaytexto,elcolordelborde
serelcolordeltexto.
Existeelcolor transparentperonoestsoportadoportodoslosnavegadores.En
el siguiente ejemplo especificamos un estilo y un ancho igual para todos los
bordesyuncolordistintoparacadaborde.
Ejemplo:div{borderstyle:solidborderwidth:4pxbordercolor:#333#redrgb(0,0,255)#0044AC}
La propiedad border une todas las propiedades "border" vistas hasta ahora. En esta
propiedad, a diferencia de las anteriores, no hay que colocar los valores en ningn
ordenconcreto.Lapropiedadborderseempleacuandosequierenconfigurarloscuatro
ladosporigual.
Tambintenemoslaspropiedades:bordertop,borderright,borderbottomyborderleft.
16/66
Ejemplos:
h1{border:.5emsolidblue}
h2{borderleft:solidblue.5em}
h3{borderright:solid.5em}
17/66
1.4.3.Mrgenes.
El margen es la cantidad de espacio que se puede
aadiralrededordelbordedeunelemento.
Estapropiedadseconfiguraconlapropiedad margin.Al
configurar esta propiedad debemos tener en cuenta
que, a la hora de establecer los valores para los
mrgenes,hayqueemplearlamismafilosofaquecon
lapropiedadpadding.
Losmrgenes topy bottom de dos elementos que van seguidos se "
colapsan".Es
decir,seasumecomomargenentreamboselementoselmayordeellos.Elsiguiente
ejemplo muestra lo que que ocurre cuando tenemos dos elementos un h1 y un h2
colocadosunoacontinuacindelotro.
Ejemplo:
h1{margin:10px20px10px20px}
h2{margin:20px}
Enelprimercasoelmargensuperioreinferioresde10px.Enelsegundocasoesde
20px.Elespacioresultanteentrelosdoselementosserde20px.
Porelcontrario,sifuesendoselementoscolocados"unoalladodelotro"(comodos
elementos span), deberamos tener en cuenta que los mrgenes right y left no se
colapsan,sinoquesesuman.
Autoevaluacin
EnquordensedanlasmedidasdelosmrgenesenCSS?
topbottomrightleft
leftrighttopbottom
topleftrightbottom
toprightbottomleft
18/66
2.Selectores.
Casoprctico
DespusdeunosdasestudiandoCSS,Carlosyatieneclarolaestructura
delasreglasdeestiloquecomponenlosarchivosCSS.
Carlos tambin se da cuenta que una parte muy importante de estas
reglassonlosselectoresy,comoestempezando,decidepedirayudaa
Juan,queyallevamsdecuatroaosdesarrollandoaplicacionesweb.
Juanleexplicarcmodebeutilizarlosselectoresparaaprovechartodo
el potencial que tienen y, entre los dos, completarn el manual de CSS
para poder consultarlo en cualquier momento que lo necesiten mientras
realizanlaaplicacinweb.
Elselectoreslapartedelaregladeestiloqueidentificaelelementoconcretoalque
seaplicarnlasinstruccionesdepresentacin.CSSofrecevariostiposdeselectores
quepermitenmejorarlaflexibilidadylaeficienciaenlacreacindehojasdeestilo.
Debesconocer
Debes tener muy claro cul es la sintaxis de las reglas de estilo CSS:
selector{regla1:valorregla2:valor...}
En el siguiente enlace puedes encontrar una explicacin interesante de
cul es la sintaxis de las reglas de estilo que complementar lo que ya
visteanteriormente.
ReglassintcticasdelosestilosCSS.
19/66
Recomendacin
En los siguientes puntos veremos los selectores ms utilizados pero

puedesconsultarlawebdelaW3Cdondeencontrarsunresumendelos
patronesdeselectoresCSSexistentes.
PatronesdeselectoresCSS
20/66
2.1.Selectoresdeelemento.
Recomendacin
Los selectores de elemento son los ms sencillos. Son aquellos que se

aplicanaunelemento(etiqueta)dellenguaje(X)HTML.
Ejemplos:
h1{color:blue}
h2{color:blue}
p{color:blue}
Si te fijas en los ejemplos, vers que se est definiendo la misma

propiedad (color) en todos los elementos e incluso se est asignando el
mismovalor(blue).Elejemplosiguientemuestracomosepuedeescribir
unanicareglaaplicadaavariosselectoresalavez.
Ejemplo:h1,h2,p{color:blue}
Cuandoserealizaunadeclaracinsobrevariosselectoresalavez,stos
seseparanporcomas.
Existe un selector de elementos "universal" representado por el asterisco (*). El

ejemplo siguiente muestra una regla que pondr en gris todos los elementos del
documentoquenotenganespecificadootrocolor.
Ejemplo:*{color:grey}
21/66
2.2.Selectorescontextuales.
Como vimos, los selectores de elemento se
aplican a todos los casos en los que se
encuentre el elemento en el documento
(X)HTML. En cambio, los selectores
contextuales permiten aplicar estilos a los
elementos basndose en su contexto o en su
relacinconotroelemento.
Hayvariostiposdeselectorescontextuales:descendente,hijoyhermano.
Los selectores descendentes hacen referencia a elementos que estn contenidos
enotroelemento.Unselectordescendenteseponeacontinuacindelselectorenel
que est contenido separado de l por un espacio en blanco. El siguiente ejemplo
especifica que los elementos em deben tener color azul, pero slo si son
descendientesdeunelementodelista(li).Elrestodeloselementosemnosevern
afectados.
Ejemplo:liem{color:blue}
Los selectores descendientes tambin pueden estar anidados en varias capas de
profundidad.Elsiguienteejemploponedecoloramarillosloeltextoenfatizado(em)
delasanclas(a)queseencuentrenenlaslistasordenadas(ol).
Ejemplo:olaem{color:yellow}
Siseempleaelselectordescendentecombinadoconelselectoruniversal,sepuede
restringir el alcance de un selector descendente. El siguiente ejemplo muestra dos
prrafos que contienen un hipervnculo. En el primer caso el elemento ancla es
descendientedirectodelelementodeprrafoy,enelsegundocaso,esdescendiente
directodelelementospanque,asuvez,loesdelelementodeprrafo.
Ejemplo:
<p><ahref="#">Enlace</a></p>
<p><span><ahref="#">Enlace</a></span></p>
Examinemoslasdosreglasdeestilosiguientes:
pa{color:red}
p*a{color:red}
Conlaprimeraseconsiguequesemuestrenlosdosenlacesdecolorrojo,mientras
que con la segunda regla slo se mostrara en rojo el segundo de los enlaces. La
raznesqueelselectorp*asetraducecomo"todosloselementosdetipo<a>quese
encuentran dentro de cualquier elemento que, a su vez, se encuentra dentro de un
22/66
elementodetipo <p>".Comoelprimerelemento <a>estdirectamenteincluidoenun

elemento<p>,nosecumplelacondicindelselectorp*a.
Unselectorhijoesuncasoconcretodeunselectordescendenteenelunselector
estcontenidodirectamenteenotro,sinqueexistannivelesintermedios.Unselector
hijoseescribeacontinuacindesuselectorpadreseparndolodelporelsmbolo
"mayorque"(>).Enelsiguienteejemploseponeengriselfondodeltextoenfatizado,
peroslosieshijodirectodeunprrafo.
Ejemplo:p>em{backgroundcolor:gray}
El selector adyacente se utiliza para hacer referencia a un elemento que sigue
inmediatamenteaotroenelcdigo,conelquecomparteelmismoelementopadre.
Un selector adyacente se escribe a continuacin de otro selector separndolodel
por el smbolo de suma (+). El siguiente ejemplo pondra en color azul el primer
prrafoquesigueaunacabeceradeprimernivel.
Ejemplo:h1+p{color:blue}
Autoevaluacin
Tenemos el siguiente documento XHTML con una hoja de estilo

incrustada:
<html>
<head>
h2+p{color:green}
</style>
<title>Unapruebadeselectoresadyacentes</title>
</head>
<body>
<h1>Ttulo1</h1>
<h2>Subttulo1</h2>
<p>Prrafo1</p>
<h2>Subttulo2</h2>
<p>Prrafo2</p>
</body>
</html>
Al abrir este documento en un navegador qu texto aparecer en

colorrojo?
Ttulo1.
23/66
Subttulo1.
Prrafo1
Subtitulo2.
Prrafo2.
Subttulo1ySubtitulo2.
Prrafo1yPrrafo2.
24/66
2.3.SelectoresdeclaseeID.
Para poder hacer uso de selectores ms especficos,
se hace necesario introducir los conceptos de
identificador(id)yclase(class).
Identificadores(id).
LoselementosHTMLdisponendeunatributollamado
identificador(id),quetienecomofinalidadidentificaral
de manera excluyente. De este modo, CSS u otro
lenguaje podr hacer referencia a l y distinguirlo del
restodeloselementosdeldocumento.
Uniddebesernicoencadadocumento(X)HTML.
Ejemplo:<pid="textocabecera">
Se recomienda que el valor del id sea un nombre que caracterice o clarifique, de
forma breve y esquemtica al elemento y que, adems, sea fcilmente reconocible
por el programador. Se utilizan con frecuencia para identificar las secciones
principalesdelaspginas:contenido,cabecera,pie,etctera.
Para escribir una regla de estilo que se aplique a un determinado identificador hay
queescribirelsmbolodelaalmohadilla(#)seguidodelnombredelidentificador.El
ejemplosiguientemuestraalgunasformasdeestablecereltamaodelafuenteen14
pxelesalelementopidentificadocomo"textocabecera"delejemploanterior:
Ejemplo:
p#textocabecera{fontsize:14px}<br>
#textocabecera{fontsize:14px}</p>
Conelprimerareglaindicamosqueseapliqueelestiloaunprrafocuyoidentificador
sea"textocabacera"pero,comoelidesnicoencadadocumento,realmentebasta
conlasegundaformaparadecirlomismo,porquenovaahaberotroelemento <p>o
diferentede<p>quetengaesemismoidentificador.
Si tenemos varios elementos que necesitan un tratamiento similar, emplearemos el
atributoclass.
Clases(class).
Seempleaelatributoclassparaidentificardistintoselementoscomopartedeungrupo
conceptual.As,loselementosdeunaclasepuedenmodificarseconunanicaregla
deestilo.
25/66
Enelsiguienteejemplosemuestracomodoselementosdistintosseclasificandela
mismaformamediantelaasignacindelvalor"especial"alatributoclass.
Ejemplo:
<h1class="especial">Atencin!</h1>
<pclass="especial">Hoytenemosgrandesrebajas.</p>
Tambinsepuedehacerqueunelementopertenezcaamsdeunaclaseseparando
sus nombres de clase con espacios. En el siguiente ejemplo el prrafo pertenece a
dosclases:"textocabecera"y"especial".
Ejemplo:<pclass="textocabeceraespecial">Hoytenemosgrandesrebajas.</p>
Para escribir una regla de estilo que se aplique a todos los elementos de una
determinada clase hay que escribir un punto seguido del nombre de la clase. Por
ejemplo:.especial{color:green}
Elsiguienteejemplomuestralaformadelograrquetodosloselementosdelaclase
"especial" tengan un color verde a excepcin de las cabeceras de primer nivel que
tienenqueserrojas.
Ejemplo:
.especial{color:green}<br/>
h1.especial{color:red}
Losnombresdeclasesydeidentificadoresnopuedencontenerespacios
enblanco.
Recomendacin
En el siguiente enlace podrs leer unas recomendaciones generales

sobreCSS.Sonespecialmenteinteresantesaquellasquemencionanlas
reglas que deben cumplir los nombres de los identificadores y de las
clasesycmosedebeestructurarunahojadeestilos.
26/66
RecomendacionesgeneralessobreCSS.
27/66
2.4.Pseudoselectores.
Siqueremosaplicarreglasdeestiloaelementosespeciales
como:losvnculosvisitados,laprimeralneadeunprrafoo
suprimeraletra,emplearemoslospseudoselectores.
Hay dos tipos de pseudoelectores: pseudoclases y
pseudoelementos.
Pseudoclases.
Clasificanaloselementosbasndoseencaractersticasque
van ms all de su nombre, atributos o contenido. La
mayora de las pseudoclases afectan a los elementos ancla (a), pudiendo definir un
estilo diferente en funcin del comportamiento del enlace: si todava no ha sido
visitado(link),siyalohasido(visited),mientraselratnpasaporencima(hover)ojusto
cuandosepulsaelratnsobrel(active).
Para emplear una pseudoclase se escribe la misma a continuacin del selector
separndola de ste por el smbolo de dos puntos (:). El ejemplo siguiente muestra
cmo se distinguiran los cuatro estados posibles de un enlace mediante colores
diferentes.
Ejemplo:
a:link{color:red}
a:visited{color:blue}
a:hover{color:fuchsia}
a:active{color:maroon}
Con el empleo de estas pseudoclases podemos quitar el subrayado de los

hiperenlacesyhacerqueaparezcaslocuandopasamoselpunteroporencima.Pel
ejemplosiguientemuestraelempleodelapropiedadtextdecorationparaconseguir
dichoobjetivo.
Ejemplo:
a:link{color:redtextdecoration:none}
a:visited{color:bluetextdecoration:none}
a:hover{color:redtextdecoration:underline}
Debes tener en cuenta que las pseudoclases ancla deben aparecer

28/66
siempreenundeterminadoorden.Esteordenes::link,:visited,:hovery:active.
Porsiteayuda,pararecordarlo,seempleanlasiniciales:LVHA.
Existenotraspseudoclases,queseempleanmenos:
:focus
hace referencia a los elementos que tienen el foco, como ocurre, por
ejemplo, en los elementos de un formulario. Un ejemplo sera: input:focus
{backgroundcolor:yellow}
:firstchild hace referencia el primer hijo de un elemento padre. En el siguiente
ejemploseaplicaelestiloalprimerelementodeunalistadesordenada: ulli:first
child{fontweight:bold}
:lang(idioma)hacereferenciaalidiomaenelqueestundeterminadoelemento.
Enelsiguienteejemploseaplicaelestiloacualquierprrafoqueestescritoen
ingls:p:lang(en){color:red}
Cuidado! Muchos navegadores como Explorer 6 y anteriores, IE5 para

Macintosh, Netscape 6+ y Opera 7+ no tienen soporte para las
pseudoclases:focusy:firstchild.
Pseudoelementos.
Estospseudoelementossuelenserpartesdeunelementoyaexistente,comopuede
ser su primera lnea (:firstline) o su primera letra (:firstletter), aunque tambin nos
permite hacer referencia a elementos sin concretar en la estructura del documento
porquedependendelaestructuradeldocumento(:beforey:after).
Ejemplos:
p:firstline{letterspacing:6pt}
p.definicion:firstletter{fontsize:300%color:red}
p.incompleto:after{content:"continuar..."}
En el primer ejemplo aadimos espacio extra a la primera lnea del texto de cada
prrafo,enelsegundomodificamoselestilo(tamao ycolor)delaprimeraletrade
losprrafospertenecientesalaclase"definicion"y,eneltercero,aadimoseltexto"
continuar..."alfinaldecadaprrafopertenecientealaclase"incompleto".
Recomendacin
29/66
En el siguiente enlace podrs hacer pruebas con los distintos tipos de

selectores y familiarizarte con ellos. Podrs escribir selectores
descendentes, hijos y adyacentes, utilizar selectores de clase e ID, los
pseudoelementosylaspseudoclasesycomprobarenelladoderechode
la pgina cules son los elementos que se veran afectados por una
reglasdeestiloaplicadaaesosselectores.
Esta pgina consta de tres bloques titulados: Selector, DOM Sample y
HTMLforDOMSample.
Para saber qu selectores, clases e identificadores puedes comprobar,
tendrs que mirar el cdigo que se encuentra en el tercer bloque.
Escribiendolosselectoresquequierasenelprimerbloqueypulsandoen
el botn Apply, vers que se enmarcan en rojo dichos elementos en el
segundobloque.
Simuladordeselectores
30/66
2.5.Lapalabraclave!importantenCSS.
!important
se utiliza para dar prioridad a ciertas

reglas. Cualquier definicin de estilo que vaya
acompaada de un !important tendr prioridad
sobrecualquierotra.
Como ya sabes, cuando tenemos una
propiedad aplicada dos veces, el navegador
har caso a la ltima. En el ejemplo que se
muestra a continuacin est claro que se le
asignarn 1200 pxeles al ancho del elemento
identificadoconelid="principal".
Ejemplo:
#principal{width:800px
width:1200px}
Sinembargo,enelsiguienteejemplosemuestracomodandoprioridadalaprimera
declaracin con la palabra !important, podemos tener ese elemento con un ancho de
800pxeles.
Ejemplo:
#principal{width:800px!important
width:1200px}
Tambin en este caso debemos tener en cuenta la compatibilidad con los

navegadores. As, Internet Explorer 6 y versiones anteriores ignoran esta palabra
clavemientrasqueIE7lasoportasinproblemas.
Las declaraciones acompaadas de la palabra !important!important tienen

prioridadsobreotrasdeclaracionesqueafectenalmismoelemento.
Conestodelosselectoresdescendentes,hijosyadyacentes,sepuededarelcaso
de que, sin querer, estemos aplicando un estilo que no queremos a un elemento
porque se ve indirectamente afectado por alguna de las reglas y no sabemos cul.
Porejemplo:saleunprrafoencolorrojoynonosacordamosdndeloconfiguramos
porquerealmentenotenemosningunareglaquediga p{color:red}.Enesecaso,ypara
no descerebrarnos buscando dnde est el fallo, si sabemos que los prrafos de
texto emplean la letra de color negro, crearamos la regla p { color: green !important } y
solucionado!
31/66
Autoevaluacin
Cul de los siguientes es el selector CSS que selecciona a todos

losobjetosconclass=nuevoqueestncontenidosenuntabla?
table.nuevo
table.nuevo
table#nuevo
32/66
3.Propiedadesdefuenteytexto.
Casoprctico
LawebdeMigasAmigasofrecerasusvisitantesvariaspginasdonde
se relatar su historia, la descripcin del entorno donde se encuentra
ubicada y, adems, algunas recetas de los productos que en ella se
venden.
TodoestohacenecesarioqueCarlostengalosconocimientosnecesarios
paraconfigurarlaaparienciadetodosestostextos.
CarlosseponedenuevoencontactoconJuanparaquestelegueenel
aprendizajedelaspropiedadesytcnicasquenecesita.
Lashojasdeestilonosvanapermitiruncontroltotalsobreelformatodeltextoenlas
pginasweb.VeamoslaspropiedadesdeCSSmsutilizadasparaformateareltexto.
Recomendacin
A medida que vayas estudiando estos puntos tambin puedes visitar el

siguienteenlacedelawebdelaW3Cdondeencontrarsunresumende
laspropiedadesCSSmsutilizadasparaformatearlasfuentesyeltexto.
PropiedadesCSSparafuentesytexto.
33/66
3.1.Propiedadesdefuente.
Las propiedades de las fuentes en CSS son
usadas para configurar la apariencia deseada
paraeltextodeundocumento.Veamoslasms
empleadas:
fontfamily
Nospermiteespecificarunnombredefuenteenconcretoobienunafamiliagenrica
defuentes.Sepuedeespecificarunalistadefuentesseparadasporcomasteniendo
en cuenta que si el nombre de la fuente o familia etiene algn espacio en blanco
intercaladohabrqueencerrarloentrecomillas.
Hay que darse cuenta de que el tipo de letra elegido debe estar instalado en el
equipocliente.Porloque,siescogemosuntipodeletra"pocohabitual",corremosel
riesgodequeelusuarionovealapginatalycomolahemosdiseado.
Recomendacin
EnelsiguienteenlacepuedesaccederaunrecursoenlneadeMicrosoft.
En l puedes encontrar las fuentes que se instalan por defecto con
cualquiertipodeprogramadeMicrosoft.
RecursoenlneadeMicrosoftsobrefuentesqueseinstalanpordefecto.
Hayvecesqueesteenlacefalla.Sifueraaspuedesaccederalsitio
pulsandoesteenlace:
ReferenciadefuentesytipografadeMicrosoft.
Ypulsaelenlace:"MicrosoftTypographyFontsandProducts"
fontsize
Nos permite configurar el tamao del texto. Mientras que el HTML estndar prev
slo7nivelespredefinidosparaeltamaodeltexto,lashojasdeestiloCSSpermiten
uncontrolmuchomsprecisoyelsticosin,prcticamente,limitaciones.
Podemos establecer tamaos de forma absoluta, de forma relativa, con un valor
numricooenformadeporcentaje.
fontweight
Nospermiteestablecerelespesorointensidaddelasfuentes,como<b>paraelHTML
clsico. Es posible asignar hasta 7 valores diferentes: normal, bold, bolder, lighter, 100,
200,300,400,500,600,700,800900.
34/66
fontstyle
Nospermiteconfigurarel"estilo"delafuente.Haytresvaloresposibles:normalque
no configura ningn estilo en particular sino que toma el definido por defecto en el
navegador,italic:queequivalealelementodelHTMLclsico(<i>)quecolocaeltesto
encursivayobliquequefunciona,aparentemente,como"italic".
fontvariant
Permite dos posibilidades: normal y smallcaps. Con normal, el texto no cambia de

aparienciayconsmallcapseltextopasaamostrarseenmaysculasdeuntamao
inferior.
Debesconocer
En el siguiente enlace puedes acceder a una presentacin donde se

muestranalgunosejemplosdelaspropiedadesanteriores,sehabladelas
unidades de medida, tanto absolutas como relativas, y de la propiedad
font, que permite establecer todos los atributos vistos hasta ahora (y
algunoms)enunanicadeclaracin.
35/66
3.2.Propiedadesdetexto.
Laspropiedadesdetextopermitenaplicarestilosalos
textos espaciando sus palabras o sus letras,
decorndolo, alinendolo, transformndolo, etctera.
Algunasdeestaspropiedadesson:
textdecoration
Permite decorar el texto con subrayados y otros

efectos. Los valores que puede tener son: none
(ninguno), underline (subrayado), overline (con una lnea
porencima),linethrough(tachado),blink(parpadeante)einherit(heredado).
texttransform
Controlalaaparienciadelasletrasenunelemento.Losvaloresquepuedetenerson:
none(textonormal,conmaysculasyminsculas),capitalize(cadapalabracomienzacon
maysculas), uppercase (todo el texto aparece en maysculas) y lowercase (todo el texto
apareceenminsculas).
lineheight
Estableceelespacioquehayentredoslneasconsecutivas.
Ejemplos:
p{lineheight:1.4}/*Seestableceunfactordemultiplicacinrespectoaltamaofontsize*/
p{lineheight:14pt}/*Estableceunadistanciafijaentrelaslneasde14puntos*/
p{lineheight:140%}/*Estableceunadistanciaproporcional(%)respectoafontsize*/
textindent
Sangralaprimeralneadetextodeunprrafo.
Ejemplos:
p{textindent:20px}/*Defineunsangradopositivo.Elvalorpordefectoes0.*/
p{textindent:12px}/*steesnegativo(hacialaizquierda).*/
p{textindent:10%}/*Aquestcomounporcentajerespectoalanchodelelementopadre.*/
letterspacing
Configurasobreelespacioquehayentreloscaracteres.Estevalorpuedeaumentar
odisminuiryaque,aligualquetextindentyotraspropiedades,admitevalorespositivos
ynegativos.
Ejemplos:
36/66
p{letterspacing:12px}/*Expandeloscaracteres.Lossepara*/
p{letterspacing:0.5px}/*Contraeloscaracteres.Losjunta*/
whitespace
Permite establecer cmo se gestionan los espacios en blanco en un elemento. Los

valoresquepuedetenerson:normal(losespaciosenblancoadicionalessonignorados
porelnavegador),pre(losespaciosenblancoadicionalessonutilizadoscomocuando
se emplea la etiqueta pre en HTML), nowrap (no se produce el ajuste de lnea
automtico por lo que el texto permanecer en la misma lnea hasta que encuentre
unaetiqueta<br/>).
Autoevaluacin
Queremosrealizarundocumentowebdondelafuentebasedetoda
lapginasea:decolornegro,detipoArial,conuntamao0.9veces
laletrapordefectodelnavegadoryunespaciadoentrelneasde1,4.
CulseralareglaCSSqueconsigueesto?
body{font:0.9em/1.4Arial,Helvetica,sansserifcolor:#000}
body{font:0.9em/1.4Arial,sansserifcolor:#000}
body{color:#000font:.9em/1.4Arial}
body{font:.9em/1.4Arialcolor:#000}
Mostrarretroalimentacin
37/66
4.Loscoloresylosfondos.
Casoprctico
Ni que decir tiene que el equipo de BK intentar que la web de Migas

Amigasadquieraunaapariencialomseleganteyvistosaposible.Para
que esto sea as, un factor muy importante ser configurar los colores y
losfondosadecuados.
Loscoloresylasimgenesdefondoyafueronseleccionadosportodoel
equipo de diseo. Ahora, Carlos debe descubrir cmo aplicar stos a la
websinquelaprogramacindeCSSseaunobstculoparalograrjustoel
diseodeseado.
EstavezserAdalaquesepongaencontactoconJunparaguiarloen
elaprendizajedelaspropiedadesytcnicasnecesarias.
CSSpermitecontrolarelcolorylosfondosconunasposibilidadesqueestnaaos
luzdelosefectosquepodemosalcanzarempleandosloHTML.
Recomendacin
A medida que vayas estudiando estos puntos tambin puedes visitar el

siguienteenlacedelawebdelaW3Cdondeencontrarsunresumende
laspropiedadesCSSmsutilizadasenelmodelodecajas.
PropiedadesCSSparacoloresyfondo.
Debesconocer
38/66
Alutilizarestilosdeformahabitualtendrsqueestablecerelcolordellos
diferenteselementos,porloquedebesconocerelmododehacerlo.Los
colores en CSS se pueden indicar de cinco formas diferentes: con
palabrasclave(nombrespropiosdeloscolores),concoloresdelsistema,
empleando el sistema RGB con numeracin hexadecimal normal o
simplificada,decimaloporcentual.
39/66
4.1.Colordelprimerplanoyelfondo
Paraestablecerloscoloresdeprimerplanoydefondo
existendospropiedadesdistintas.Lapropiedadcolores
laquedebesutilizarparaconfigurarelcolordelprimer
plano,esdecir,elcolordeltextoyelcolorpordefecto
del borde de un elemento. Mientras que para
configurar el color de fondo debern emplear la
propiedadbackgroundcolor.
color
CSStambinreconocehasta16nombresdecolorvlidos:aqua,black,blue,fuchsia,
gray,green,lime,maroon,navy,olive,purple,red,silver,teal,whiteyyellow.
Conrespectoalcolordelprimerplanodeberstenerencuentaque:
Siaadescoloralprimerplanodeunaimagen,staseguirvindoseperoelcolorse
aplicaralbordedelaimagen.
Lapropiedadbordercolorignoralapropiedadcolor.
Paraconfigurarelcolordetodoundocumentodebemosescribirunareglaconesta
propiedadcolorparaelselectorbody.
Laaplicacindecoloraloselementosdelosformulariosnofuncionabienentodos
losnavegadores.
Losejemplossiguientesmuestrandiversasformasdeconfigurarelcolordeltextode
losprrafos.
Ejemplos:
p{color:#0000FF}
p{color:#00F}
p{color:rgb(0,0,255)}
p{color:rgb(0%,0%,255%)}
p{color:gray}
backgroundcolor
40/66
ConCSSnoslosepuedeproporcionaruncolordefondoatodalapgina,tambin
sepuedeconfigurarelcolordefondodecualquierelementodeldocumento,tantosi
sonelementosdebloquecomodelnea.
ConlaaparicindeCSS,serecomiendaemplear"cajasdecolor"ensustitucinde
lastablas.
Las propiedades relativas al fondo no se heredan pero, como el valor

predeterminadodeestapropiedades transparent, salvo que se especifique
uncolorconcreto,elcolordefondodelelementopadreapareceratravs
desuselementoshijos.
Ejemplo:p{padding:5pxbackgroundcolor:#ccc}
41/66
4.2.Imgenesdefondo.
Las imgenes las podrs configurar de forma
muy completa ya que, adems de poner una
imagen como fondo de una pgina, podrs
ajustar su punto de partida, su patrn de
repeticin, su posicin dentro de un elemento
cualquiera y lograr que permanezca fija en esa
posicin aunque se mueva el resto del
documento. Para realizar esta configuracin
detallada se emplean las propiedades:
backgroundimage, backgroundrepeat, backgroundposition,
backgroundattachmentybackground.
backgroundimage
Estapropiedadsirveparaconfigurarlaimagendefondodecualquierelemento.
Lapropiedadbackgroundimageprevalecesobrelapropiedadbackgroundcolorpor
lo que si con un elemento realizas declaraciones con estas dos
propiedadesignorarladeclaracindebackgroundcolor.
En el siguiente ejemplo se muestra la configuracin de la imagen de fondo, usando

un archivo de imagen de nombre fondo.gif, en todo el documento excepto para el
prrafo que tiene un identificador cabecera que tendr como imagen de fondo un
archivodeimagendenombrefondocuerpo.gif.
Ejemplo:
body{backgroundimage:url(fondo.gif)}
p#cabecera{backgroundimage:url(fondocuerpo.gif)}
backgroundrepeat
Permite configurar a tu gusto la forma en la que se repetir la imagen cuando su

tamaoseamspequeoquelaventanadelnavegador.Tambinpermiteevitarque
laimagenserepita.
Ejemplos:
<div#cuerpo{backgroundimage:url(fondo.gif)backgroundrepeat:norepeat}
div.horiz{backgroundimage:url(imagen.gif)backgroundrepeat:repeatx}
div.vert{backgroundimage:url(imagen.gif)backgroundrepeat:repeaty}
42/66
Con el primer ejemplo, consigues que la imagen aparezca slo una vez, con el
segundo ejemplo la imagen se repetir a lo ancho (horizontalmente) tantas veces
comonecesitey,coneltercerejemplolaimagendefondoserepetiralolargodel
documento(verticalmente).
backgroundposition
Especificalaposicindelaprimeraimagenquecubrirelfondodelelementoenel
queestdefinidaestapropiedad.Alposicionamientopodemosasignarleslosvalores:
left,right,top,bottomycenter los cuales se usan, normalmente, de dos en dos sin
importar el orden (uno indica su posicin horizontal y el otro indica su posicin
vertical).Sisloseindicauna,sesuponequelaotraescenter.
En el siguiente ejemplo, se configura el fondo del elemento body con una imagen
llamadafondo.gifqueaparecerslounavezenlapartesuperiorcentraldelcuerpo
deldocumento.
Ejemplo:
body{backgroundimage:url(fondo.gif)
backgroundposition:topcenter
backgroundrepeat:norepeat}
Para el posicionamiento se pueden emplear tambin las medidas de longitud vistas

anteriormente.Enestecaso,lasmedidassonrelativasalextremosuperiorizquierdo
del elemento. En el siguiente ejemplo, se configura el mismo fondo de antes que
aparecer a 150 pxeles de la esquina superior izquierda del cuerpo del elemento
(horizontalyverticalmente).
Ejemplo:
body{backgroundimage:url(fondo.gif)
backgroundposition:150px150px
Tambin puedes utilizar los valores porcentuales. Como seguro supones, si indicas
slo un valor se asume que el otro es un 50%. Debes tener en cuenta que el valor
porcentualseaplicaalcontenedoryalaimagenens.Enelsiguienteejemplose
muestralaregla de estiloquelograquelaimagen quede colocadaenelcentrodel
elementobody.
Ejemplo:
body{backgroundimage:url(imagen.gif)
backgroundposition:50%50%
43/66
backgroundattachment
Con esta propiedad puedes fijar la imagen en una posicin concreta. Se le pueden
asignar los valores: scroll, fixed e inherit, siendo scroll el valor por defecto. Se suele
emplearelvalorfixedparaconseguirquelaimagennosedesplaceconeldocumento.
background.
Esta propiedad permite configurar todas las propiedades de fondo vistas

anteriormenteusandounanicadeclaracin,deformasimilaraloqueocurraconla
propiedadfont,peroadiferenciadesta,notieneningunapropiedadobligatoriaysus
valorespuedenaparecerencualquierorden.
Slo debes tener una restriccin: la posicin se indica con dos valores que deben
aparecer juntos, primero el horizontal seguido, inmediatamente despus, por el
verticalyaquesisloaplicamosunvalorelotroseconfigurapordefectoacenter.
Ejemplos:
body{background:url(fondo.gif)fixedtopcenternorepeat}
div.cabecera{background:repeatxurl(fondo.gif)red}
p{background:#ccc}
#contenidospan.imagen{background:url("imagenes/imagen.gif")050%norepeat}
Ejercicioresuelto
Queremos realizar un documento web donde el contenedor con id=pie

tienelassiguientescaractersticas:
Rellenosuperioreinferiorde0.5em.
Rellenoderechoeizquierdode0em.
Margensuperiorde1em.
Bordes superior e inferior de tipo slido, de 1 pxel de grosor y de
color#C5C5C5.
Fondodecolor#F8F8F8
CulseralareglaCSSqueconsigueesto?
44/66
4.3.Opacidades.
Reflexiona
Si te fijas en las ventanas, persianas y cortinas de una casa, vers que

algunasventanascomolasdeloscuartosdebaosondecristalperono
son transparentes, dejar ver el exterior pero no de forma ntida. Cuando
se bajan las persianas, no se ve absolutamente nada del exterior, y las
cortinas, dependiendo de su tejido, pueden dejar pasar la claridad en
mayoromenormedida.
Laopacidadesunacaractersticadeloselementosquenos
permite mostrar o no otros elementos que tengan por
debajo.Paraconseguirefectosdetransparenciaenalgunos
elementostieneslassiguientespropiedades:opacity,mozopacity
yfilter.
opacity
Esta propiedad, que es compatible con todos los

navegadores que soporten CSS3, permite asignar valores
comprendidosentre0(invisibleototalmentetransparente)y
1(totalmenteopaco).
mozopacity
Esta propiedad, permite asignar los mismo valores que la propiedad anterior. La
diferenciaestenquesloescompatibleconversionesanterioresdelFirefox0.9.
filter
Esta propiedad, de IE (5.5 y siguientes), tiene varios efectos: degradaciones,

desenfocados,sombras,etctera.Paralograrlatransparenciahayqueaplicarelfiltro
alpha,convaloresentre0y100.
Enelejemplosiguientetieneselcdigodondeseconfiguralaopacidaddealgunos
elementoparaquefuncionesentodoslosnavegadores.
Ejemplo:
<html>
<head>
body{background:#00fcolor:black}
#saludo{background:white
width:200pxheight:200px
45/66
filter:alpha(opacity=50)
mozopacity:0.5
opacity:0.5}
#frase{background:white
mozopacity:1
opacity:1}
#despedida{background:white
mozopacity:0
opacity:0}
</style>
</head>
<body>
<divid="saludo"><h1>Hola!</h1></div>
<divid="frase">Esteesunejemplodeopacidad</div>
<divid="despedida"><h2>Adis!></h2></div>
</body>
</html>
Autoevaluacin
A la vista del ejemplo anterior Cules de las siguientes

afirmacionessoncorrectas?
Elcolordelfondodetodalapginaesblanco.
Elcolordefondodelsaludoesblanco.
Elcolordefondodelafraseesblanco
Elcolordefondodeladespedidaesblanco.
Elsaludonoseve.
Lafrasenoseve.
Ladespedidanoseve.
Elfondodelsaludoeselmismoqueelelfondodelapgina.
Elfondodeltextoeselmismoqueeldelapgina.
Elfondodeladespedidaeselmismoqueeldelapgina.
46/66
5.Flotaryposicionar.
Casoprctico
Paralawebde"MigasAmigas"elequipodeBKprogramacindecidial
finalseleccionarundiseodedoscolumnasclsico,paratodalapginaa
excepcindelapginadeportada.
PararealizarestediseosernecesarioqueCarloscomprendacmose
flotan y se posicionan cada uno de los elementos que aparecen en las
webs.
A medida que Juan le explica las propiedades y tcnicas para flotar y
posicionarloselementos,Carlosvatomandoconcienciadequeestoes,
sinduda,lomscomplicadoaloquesehaenfrentadohastaahoraenlo
querespectaalatecnologaCSS.
Carlospiensa:"Sinduda,mevoyatenerquededicarafondo".
CSSutilizaelflotadoyelposicionamientoparatenerelmximocontrolsobreellugar
que ocupa cada elemento en una pgina web, sus condiciones de visibilidad y
"flotabilidad",ascomocontrolarelmanejodecapas.
EnlossiguientesapartadosveremosalgunaspropiedadesdeCSS2.1queseutilizan
paracontrolarelposicionamientodeloselementos.Estasson:float,clear,position, bottom,
top,left,right,overflow,clip,visibilityyzindex.
Recomendacin
A medida que vayas estudiando de los apartados siguientes tambin

puedesvisitarelsiguienteenlacedelawebdelaW3Cdondeencontrars
un resumen de las propiedades CSS ms utilizadas para dar forma a la
47/66
aparienciadelaswebs.
PropiedadesCSSdelmodelodeformatovisual.
Untrminoqueapareceramenudoesflujonormal.Cuandohablamos
de que los objetos de una pgina siguen el flujo normal del documento,
queremos indicar que la forma en la que se disponen en la ventana del
navegadorcoincideconellugarqueocupaneneldocumentoescrito(en
elcdigo(X)HTML),dondeelordendelecturaesdearribaaabajoyde
izquierdaaderecha.
Flotando y posicionando con CSS conseguimos que los elementos
abandonen su flujo normal. De esta forma un elemento que este en el
documentoescritomsabajoqueotroeneldocumentopuedeverseenel
navegadorporencimadel.
48/66
5.1.Flotar.
Flotar sirve para mover una caja a la izquierda o a la derecha hasta que su borde
exteriortoqueelbordedelacajaquelocontieneotoqueotracajaflotante.
Para que un elemento pueda flotar debe tener definido implcita o

explcitamentesutamao.
Lascajasflotantesnoseencuentranenel"flujonormal"deldocumentoporloquelas
cajasquessiguenelflujonormalsecomportancomosilasflotantesnoestuviesen
ah.
float
Flotar es algo ms que mover una imagen. Sirve para crear diseos multicolumna,
barrasdenavegacindelistasnonumeradas,ponercontenidoenformatabularpero
sinempleartablasymuchoms.
Lapropiedadfloatpuedetenerlossiguientesvalores:
noneharqueelobjetonoseaflotante.
lefthacequeelelementofloteizquierda.
righthacequeelelementoflotealaderecha.
inherit har que el elemento tome el valor de esta propiedad de su elemento
padre.
clear
Sirve para mantener limpia el rea que est al lado del elemento flotante y que el
siguiente elemento comience en su posicin normal dentro del bloque que lo
contiene.
Lapropiedadclearpuedetenerlossiguientesvalores:
leftindicaqueelelementocomienzapordebajodecualquierotroelementodel
bloquealquepertenecequeestuvieseflotandoalaizquierda.
rightfuncionacomoelleftperoenestecasoelelementodeberestarflotando
aladerecha.
both mueve hacia abajo el elemento hasta que est limpio de elementos
flotantesaamboslados.
nonepermiteelementosflotantesaamboslados.Eselvalorpordefecto.
49/66
inheritindica,aligualqueen float,queheredarelvalordelapropiedad clearde

suelementopadre.
Debesconocer
Es importante saber aplicar las tcnicas de flotado en contenedores y

cajas en general. En la siguiente presentacin veremos con detalle el
funcionamientodelaspropiedadesfloatyclear.
50/66
5.2.Posicionamiento.
Unaveztehasfamiliarizadoyaconelmodelodecajas
yconelmododeflotarlas,sehacenecesarioestudiar
los modelos de posicionamiento y del formato visual
para poder tener una visin completa de cmo se
organizan los elementos en una pgina. Para ello
vamos a ver algunas de las propiedades que nos
permitenorganizarloselementos:
display
Estapropiedadpermitealdocumentointerpretardeotraformaloselementosdetipo
bloque y los elementos de tipo lnea. Para ello basta con que asignes a esta
propiedad el valor block si quieres que un elemento "en lnea" se comporte como un
elementodetipobloqueynone,siquieresqueunelementodebloquenogenerecaja,
nomuestresucontenidoynoocupeespacioenlapgina.
position
Permite posicionar los elementos en un documento. Esta propiedad admite cinco

valores:
staticquepermitecolocarloselementossegnelflujonormal.Eselvalorque
asumirpordefectoentodosloselementosHTML.
relative que permite dejar el elemento exactamente donde est. Un elemento
posicionado de esta forma se puede cambiar desde su punto de partida
estableciendo para ello una distancia vertical y/o horizontal. En el siguiente
ejemplosedesplazala"caja2"50pxdelextremoizquierdoy50pxdelextremo
superiordesuposicinrelativa.
Ejemplo:
#caja2{width:130pxheight:130px
backgroundcolor:#00FF00
border:solid1pxblack
margin:10px
/*Posicionamentorelativo*/
position:relative
left:50pxtop:50px}
Unelementoposicionadorelativamente,quesigaenelflujonormal
del XHTML inmediatamente despus a otro elemento posicionado
tambinrelativamente,calcularsuorigendelaformasiguiente:
Sielelementoeshijodelanterior,suorigenestarenelfinal
delanterior(supadre).
Sielelementonoeshijodelanterior,tendrsuorigendondeel
anteriortengasufinalsinosefijaronvaloresdistintosdecero
ensuspropiedadestopyleft.
51/66
absolute permite abandonar el flujo normal del haciendo que el elemento no

ocupe ningn espacio de forma que el resto de elementos del flujo normal
actuarncomosielelementonoestuvieseall.Elmododedeterminarelorigen
decoordenadasdenuestroelementoserelsiguiente:
Sielelementoposicionadodemodoabsolutonoestcontenidodentrode
ningn otro, su origen de coordenadas se mide respecto a la esquina
superiorizquierdadelbody(contenedorprincipal).
Si el elemento posicionado de modo absoluto est contenido dentro de
otro elemento, el origen de coordenadas del elemento se calculan con
respectoalaposicindelaesquinasuperiorizquierdadelelementoquelo
contiene.
fixed funciona de forma parecida al posicionamiento absoluto pero posiciona
con respecto a la ventana del navegador apareciendo en la misma posicin
aunqueelusuariosedesplaceporlapginaconlasbarrasdedesplazamiento.
visibility
Esta propiedad controla si el elemento ser visualizado segn le asignes el valor

visibleohidden.Debestenerencuentaque,aunqueunelementonoseavisible,ste
continaocupandosuespacioenelflujonormaldeldocumentoalcontrariodeloque
ocurraconlapropiedaddisplaycuandoseleasignabaelvalornone.
zindex
Permite controlar el orden en el que se presentan los elementos que quedan

solapadosporefectodeotraspropiedades.Sicuandodefinimosalgnelementocon
posicin absoluta, ste tiene que visualizarse en el mismo lugar ocupado por otro
elemento, se producir una superposicin de elementos visualizndose, en la parte
coincidente, slo el que est ocupando la "posicin superior". La propiedad zindex
permite especificar el orden en el eje z de los elementos, esto es, el orden de
apilamientoencapasdeldocumento.
Por defecto, los elementos se apilan en el orden en que aparecen: el elemento
situadomsabajoenelflujonormaldeldocumentoquedarencima.Siquieresque
estaposicinnoseatenidaencuenta,debessaberqueloselementosconunvalor
mayordelapropiedad zindexsoncolocadosencimadelosquetienenunvalormenor
zindex,quedandoestosltimostapadosporlosprimeros.
Tambindebessaberqueestapropiedadsloseaplicaaelementosquetenganla
propiedadpositionabsoluteoenrelative.
Ejercicioresuelto
ApartirdelsiguientecdigoXHTML:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtm
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
52/66
<metahttpequiv="ContentType"content="text/htmlcharset=iso88591"/>
<title>EjerciciodeFlotaryPosicionamiento</title>
<styletype="text/css"></style>
</head>
<body>
<div>&laquoAnterior&nbspSiguiente&raquo</div>
</body>
</html>
Debes determinar las reglas CSS que pondras en el elemento style, con
lasclases,identificadoresyelementosquecreasnecesariosymodificarel
cdigo para que el resultado sea lo ms parecido posible a la siguiente
imagen:
53/66
6.Cambiarlaaparienciadeotros
elementosweb.
Casoprctico
Como casi todas las web, la web de "Migas

Amigas" tendr imgenes y texto y otros
elementoswebcomolistas,tablasyformularios.
Paraestetipodeelementos(X)HTML,elestndar
CSS ofrece propiedades y tcnicas especficas
que permiten darles la apariencia ms adecuada
encadamomento.
Todo esto obliga a que Carlos posea los
conocimientos necesarios para configurar la
aparienciadetodosestoselementosyenespecial
laslistas,puesunaparteimportantedelawebde
"Migas Amigas" son los mens de navegacin, un elemento al que han
dedicadomuchashoradurantelaplanificacindeldiseo.
CarlosseponedenuevoencontactoconAdaparaquestalegueenel
aprendizajedelaspropiedadesytcnicasnecesarias.
En las pginas web existen muchos elementos especficos a los que debemos dar
formaparaasconseguirlaaparienciaquemsnosinterese.
ConlaaparicindeCSS,quepermitelaseparacindelainformacinde
presentacindelcontenido,yconelmodelodecajas,quepermitecolocar
cada elemento en el lugar deseado, te podras preguntas entonces por
quseguimosconlastablas?
RealmenteconCSS,lastablasyanosonnecesarias,almenosenloque
a la maquetacin de los elementos principales se refiere. No son
necesarias para indicar dnde queremos el encabezado o el pie del
documentoytampocosonnecesariasparahacerundiseodedosotres
columnas.Pero,cuandose tratadecolocarinformacindecontenidoen
formatabular,siguensiendomuytiles.
Enlossiguientesapartadosversaquellaspropiedadesquetepermitirnconseguir
personalizarelementostaninteresantescomolastablas,laslistasylosformularios.
54/66
6.1LastablasconCSS.
Recomendacin
A medida que vayas estudiando las propiedades de este apartado

tambin puedes visitar el siguiente enlace de la web de la W3C donde
encontrarsunresumendelaspropiedadesCSSmsutilizadasparadar
formaalastablas.
PropiedadesCSSparatablas
Paracontrolarlapresentacindelastablastenemoslaspropiedades:captionside, table
layout,bordercollapse,borderspacing,emptycellsydisplay.
captionside
Estapropiedadsirveparaindicardndeseponeelttulodelatabla.Puedetenerlos
valores:top,bottom,leftyright.
La recomendacin CSS2.1 recoge la posibilidad de desplazar el contenido de la
etiquetacaptionalaizquierdaoaladerechacon textalign,perosiempremantenindose
porencimaopordebajodelatabla.
emptycells
Esta propiedad soluciona la carencia del XHTML que, al no dibujar las celdas que
estabanvacas,obligabaaponerunespacioenblancousandoelcarcter&nbsp.Los
valoresqueadmiteson:
show que permite mostrar los bordes y fondos como en las celdas con
contenido.
hidequepermiteocultarlosbordesyfondosdelasceldasvacas.
inheritquepermiteheredarelvalordeemptycellsquetengasuelementopadre.
bordercollapse
Permite establecer el modo en el que se dibujan los bordes de las tablas:separate

(separados), collapse (juntos) e inherit. En el modo separate, cada celda est
rodeadaporsubordehaciendoelefectodeunbordeconunalneadoble,mientras
55/66
que,enelmodocollapselasceldascontiguascompartensusbordes.
borderspacing
Permite establecer la separacin entre celdas contiguas. Para hacerlos se indica el

valordelespaciadohorizontalseguidodelvalordelespaciadovertical.Siseescribe
unnicovalor,laseparacinhorizontalyverticalserniguales.
tablelayout
Permite definir el modo en el que el navegador dibujar la tabla ya que puede

hacersededosformas.Losvaloresqueadmiteson:
fixeddibujalatablabasndoseenlasmedidasestablecidasenelcdigofuente.
Conestevalorseconsiguequeelsistematrabajemsrpido.
autodibujalatablasbasndoseenelcontenidodesusceldas.Eselvalorpor
defecto.
Ejemplos:
table{border:#000solidthin/*Paraquelosbordesaparezcan*/
bordercollapse:separate/*Bordesseparados*/
borderspacing:0.5em1em/*Separacindelosbordes*/
emptycells:show/*Lasceldasvacassemuestran*/
}
tablecaption{captionside:bottom/*Elttulodelatablaaparecedebajo*/}
Recomendacin
Una forma comn de trabajar es usando plantillas que adaptamos a

nuestro gusto. En el siguiente enlace acceders a la web de Christian
Heilmann donde podrs encontrar una gran cantidad de plantillas de
tablascreadasconCSS.
GaleradetablasformateadasconCSS.
Ejercicioresuelto
Enelsiguienteenlacepodrsdescargarelarchivoquecontieneelcdigo
fuentedelquetendrsquepartirpararealizarelejerciciopropuesto(enla
pgina,botnderechoyguardarcomo).
56/66
Cdigofuente(0.01MB)
UnavezdescargadoelcdigoXHTMLpuedesabrirloscontunavegador.
Versqueelresultadoeselquesemuestraenlaimagensiguiente:
TendrsqueeditarelcdigoydeterminarlasreglasCSSnecesariaspara
que el resultado sea lo ms parecido posible al de la siguiente imagen
(Nota:Aunquenosaleenlaimagen,elpunteroestsobrelaprimerafila,
poresosevedecoloramarillo):
57/66
6.2.LaslistasconCSS.
Laslistassonunelementomuyutilizadoenlaspginasweb.Hoyenda,suempleo
noestlimitadoalasimpleenumeracindeelementosenelcontenido,tambinse
utilizanparacrearbarrasdenavegacinverticalesyhorizontales.
Recomendacin
A medida que vayas estudiando las propiedades de este apartado

tambin puedes visitar el siguiente enlace de la web de la W3C donde
encontrarsunresumendelaspropiedadesCSSmsutilizadasparadar
formaalastablas.
PropiedadesCSSparalistasycontenido.
Paradarformatoalaslistastenemos,entreotras,laspropiedades: liststyletype,liststyle
image,liststylepositionyliststyle.
liststyletype
Permite elegir el marcador visual de la lista asignando a la propiedad uno de los

siguientes valores: none (eliminar el marcador), square (cuadrado), disc
(crculo),circle(circunferencia),lowerroman(nmerosromanosenminuscula),lower
alpha(letrasenminscula),upperalpha(letrasenmayscula),etctera.
liststyleimage
Permite especificar una imagen como marcador. Para ello deberemos indicar la
direccinoURLdondeseencuentralaimagen.
Cuandoseusaestapropiedadconvienedeclarartambinlapropiedad liststyletypeen
prevencindeunfalloenlalocalizacindelaimagen.
Esto lo podramos realizar, tambin empleando la propiedad background del
elemento li. En este caso, mostrado en el ejemplo siguiente, debemos seguir los
siguientespasos:
Eliminar previamente el marcador visual estableciendo none como valor de la
propiedadliststyletype.
58/66
Aadimosrellenoalaizquierdadecadaunodeloselementosdelalista.
Colocamosdenuevoelmarcadorvisual,declarandolapropiedad background ala
queasignaremoslaURLdeunaimagen.
Sicadaelementodelalistaocupaunasolalnea,elmarcadordebercentrarse
verticalmenteestableciendosuposicinverticalal50%.
Ejemplo:
ul{margin:0padding:0liststyletype:none}
li{background:url(boliche.gif)norepeat050%
paddingleft:20px}
liststyleposition
Establecelaposicindelmarcadordeloselementosdelalista.Sepuedecolocarel
marcadordentrodelreadecontenidoconloquetodaslaslneasdeesteelemento
estarn alineadas por la izquierda (incluida la que lleva el marcador) o, se puede
colocarfueradelreadecontenido(comoenuna
sangrafrancesa).Losvalores
quepermitenposicionarelmarcadorson:inside(dentro)youtside(fuera).
liststyle
Al igual que ocurra con otras propiedades que se vieron anteriormente, esta
propiedad permite configurar las listas estableciendo, de forma abreviada y en
cualquierorden,elvalordeunaomsdelaspropiedadesindividualesvistaseneste
apartado.
Enelsiguienteejemplosemuestraelusodelaspropiedadesvistashastaahora.
Ejemplo:
ul{liststyleimage:url(boliche.gif)
liststyletype:disc
liststyleposition:outside}
ul.especial{liststyle:outsidecircleurl("imagenes/balon.png")}
Unefectomuyutilizadoparaconvertirunalistaenunabarrademendenavegacin
escolocarlasuselementosdispuestoshorizontalmenteenlamismalnea.Elejemplo
siguientemuestracmohacerlo.
Ejemplo:
ul{liststyletype:none
padding:0
border:1pxsolid#000}
59/66
li{display:inline
border:1pxsolid#00f}
Sinosinteresaeliminarlosbordessimplementedebemosponerlapropiedad border a
0.
Debesconocer
Esimportantesabercrearmensdenavegacinhorizontalesyverticales,
en la siguiente presentacin puedes ver con detalle cmo convertir una
simplelistaenunmendenavegacin.
60/66
6.3.FormulariosconCSS
Los formularios son una parte esencial de toda pgina
web en la que se busque interaccin con los usuarios.
Son muy parecidos a los formularios de papel
tradicionales solo que en el caso de la web habr que
emplearelratnoeltecladopararellenarloenlugarde
unsimplebolgrafo.
Un formulario (elemento form del (X)HTML) pueden
contenerdiferenteselementos:
Elementos en los que el usuario tendr que
escribir:cajasdetexto,reasdetexto.
Elementos que el usuario podr o no seleccionar:
botonesdeopcin,casillasdeverificacin,cuadrosdelistas.
Elementosdecorativosodescriptivos:etiquetas,textos.
Elementosdeagrupacindeotroselementos.
Elementos que permiten limpiar el formulario o enviar los datos para su
procesamiento:botonesdecomando.
ConCSSpuedesposicionarloselementosdelformularioyconfigurarcompletamente
suapariencia.Paraello,seempleanlaspropiedadesvistashastaahorareferentesal
modelodecajas,posicionamiento,flotadoylaspropiedadesdefondo,texto,colores,
etctera.
Aligualqueconlastablas,existengrancantidaddeplantillasparaformulariosquese
pueden utilizar como base para nuestras webs. En el siguiente enlace puedes
encontraralgunosejemplosinteresantes.
Ejemplosdeformularios
Autoevaluacin
Cul de las siguiente reglas de estilo eliminan el marcador de los

elementosdeunalista?
ul{liststyletype:none}
ulli{liststyletype:none}
ul{liststyle:none}
ulli{liststyle:none}
61/66
7.IntroduccinCSS3.
Casoprctico
Carlos est tan entusiasmado con la

tecnologaCSS que, ahora que ya conoce
elestndarCSS2.1,elmscompatiblecon
los
navegadores
actuales,
decide
introducirseenelestudiodeCSS3.
Carlos se da cuenta de que, con las novedades introducidas en CSS3,
pronto podr realizar en cualquier navegador algunos detalles que en
estos momentos slo se pueden realizar con la ayuda de algunos
hacks de los navegadores y de los lenguajes de programacin como
JavaScript.
Carlossehadadocuentadequelatecnologawebevolucionaaunritmo
frenticoyamedidaquevaaprendiendomscosassedacuentadetodo
loquelequedaporaprender.
LaespecificacinCSS3traegrandesnovedadesparaeldiseoCSS.
Tal y como vimos en todo este tema, el objetivo principal de CSS es separar el
contenidodelawebdesuapariencia.LanovedadmsimportantequeaportaCSS3,
decaraalaspersonasquesededicanaldesarrolloweb,consisteenlaincorporacin
denuevosmecanismosparamantenerunmayorcontrolsobreelestiloconelquese
muestranloselementosdelaspginas,sintenerquerecurriratrucosohacks,quea
menudocomplicanelcdigodelasweb.
AhoraCSS3vaunpasomsallconelobjetivodeofreceruncontroltotalsobrelos
elementos de la pgina y detalles como la oportunidad de crear diseos tan
demandadoscomobordesredondeadososombreadodeelementos.
AlgunasdelasnuevaspropiedadesintroducidasenCSS3podemosrecogerlasenla
siguientelista:
Paralosbordes:bordercolor,borderimage,borderradiusyboxshadow.
Paralosfondos:backgroundorigin,backgroundclipybackgroundsize.
ParaelcolorenformatosHSL,HSLAyRGBA.
Para el texto:textshadow y textoverflow que permiten poner sombras y romper
palabraslargasalfinaldelaslneas.
Paralasinterfaces:boxsizing,resize,outline,navtop,navright,navbottomynavleft.
Paraelmanejodecajas:overflowxyoverflowy.
Nuevostiposdeselectoresporatributos.
Creacindemltiplescolumnasdetexto.
Propiedades orientadas al discurso o la lectura automtica de pginas CSS.
62/66
Muyimportanteparamejorarlaaccesibilidaddelaspginas.
Parasaberms
Enelsiguienteenlaceencontrarstodalainformacinrelevantereferente
alasnovedadesquetieneCSS3.
NovedadesdeCSS3.
Recomendacin
Todas las propiedades que hemos visto y algunas ms las podrs

practicarenlapginaw3schoolsQueencontrarsenelsiguienteenlace.
Esta pgina, aunque est en ingls, est muy bien porque las
propiedadesestnordenadasalfabticamente,conloquesonfcilesde
encontrar y, una vez seleccionada una, te permite ver el efecto que
produceuncambiodevalor.
ReferenciaCSS.
63/66
Anexo.Licenciasderecursos.
Licenciasderecurso
Recurso(1)
Datosdelrecurso(1)
Autora:MaximeVALETTE.
Licencia:CCBY2.0.
Procedencia:
http://www.flickr.com/photos/cyberdeeder/2738987935/sizes/z/in/photos
Autora:mauricesvay.
Licencia:CCBY2.0.
Procedencia:
http://www.flickr.com/photos/mauriz/4059476052/sizes/z/in/photostream
Autora:A.Kniesel.
Licencia:CreativeCommonsGenricadeAtribucin/CompartirIgual3.0
Procedencia: http://es.wikipedia.org/wiki/Archivo:%C3%9Cberaschungs
Autora:quinn.anya.
Licencia:CCBYSA2.0.
Procedencia:
http://www.flickr.com/photos/quinnanya/5498045883/sizes/z/in/photostre
Autora:ManuelVieitesRodrguez.
Licencia:CCBYNCSA2.0.
Procedencia:ElaboracinPropia.
Autora:procsilas.
Licencia:CCBY2.0.
Procedencia:
http://www.flickr.com/photos/procsilas/254705672/sizes/z/in/photostream
Autora:FontFont.
Licencia:CCBY2.0.
Procedencia:
http://www.flickr.com/photos/fontfont/4867173178/sizes/z/in/photostream
64/66
Autora:cliff1066.
Licencia:CCBY2.0.
Procedencia:
http://www.flickr.com/photos
imago/3144755228/sizes/z/in/photostream/.
Autora:RobertoVerzo.
Licencia:CCBY2.0.
Procedencia:
http://www.flickr.com/photos/verzo/3297509307/sizes/z/in/photostream/.
Autora:L.Marie.
Licencia:CCBYSA2.0.
Procedencia:
m/441557760/sizes/z/in/photostream/.
http://www.flickr.com/photos/
Autora:billac.
Licencia:CCBY2.0.
Procedencia:
http://www.flickr.com/photos/billac/80713723/sizes/z/in/photostream/.
Autora:teleniek0.
Licencia:CCBY2.0.
Procedencia:
http://www.flickr.com/photos/teleniek0/3345012448/sizes/z/in/photostrea
Autora:ManuelVieitesRodrguez.
Licencia:CCBYNCSA2.0.
Procedencia:ElaboracinPropia.
Autora:PedroLozano.
Licencia:CCBY2.0.
Procedencia:
http://www.flickr.com/photos/peterlozano/5718903482/sizes/z/in/photost
65/66
66/66

DIW04 Contenidos

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

DIW04 Contenidos

Diunggah oleh

Hak Cipta:

Format Tersedia

21/12/2014 educacionadistancia.juntadeandalucia.es/cursos/pluginfile.

Como todas las semanas, se renen los

En el enlace siguiente vers una presentacin donde se vern las

Impresoras y navegadores en el modo "vista previa para

Sintetizadores para navegadores de voz empleados por

Dispositivos textuales limitados, como teletipos y terminales

ConCSS podrs indicarle al navegador cmo quieres que se vea en el documento

Relaciona los elementos XHTML con el tipo de elemento que son: de

asume que el valor

Los bordes funcionan, a la hora de establecer su valores, de la misma

con esta propiedad configuramos el

valor concreto en pxeles. Si no se especifica esta propiedad tomar medium

En los siguientes puntos veremos los selectores ms utilizados pero

Los selectores de elemento son los ms sencillos. Son aquellos que se

Si te fijas en los ejemplos, vers que se est definiendo la misma

Existe un selector de elementos "universal" representado por el asterisco (*). El

elementodetipo <p>".Comoelprimerelemento <a>estdirectamenteincluidoenun

Tenemos el siguiente documento XHTML con una hoja de estilo

Al abrir este documento en un navegador qu texto aparecer en

En el siguiente enlace podrs leer unas recomendaciones generales

Con el empleo de estas pseudoclases podemos quitar el subrayado de los

Debes tener en cuenta que las pseudoclases ancla deben aparecer

Cuidado! Muchos navegadores como Explorer 6 y anteriores, IE5 para

En el siguiente enlace podrs hacer pruebas con los distintos tipos de

se utiliza para dar prioridad a ciertas

Tambin en este caso debemos tener en cuenta la compatibilidad con los

Las declaraciones acompaadas de la palabra !important!important tienen

Cul de los siguientes es el selector CSS que selecciona a todos

A medida que vayas estudiando estos puntos tambin puedes visitar el

Permite dos posibilidades: normal y smallcaps. Con normal, el texto no cambia de

En el siguiente enlace puedes acceder a una presentacin donde se

Permite decorar el texto con subrayados y otros

Permite establecer cmo se gestionan los espacios en blanco en un elemento. Los

Ni que decir tiene que el equipo de BK intentar que la web de Migas

A medida que vayas estudiando estos puntos tambin puedes visitar el

Las propiedades relativas al fondo no se heredan pero, como el valor

En el siguiente ejemplo se muestra la configuracin de la imagen de fondo, usando

Permite configurar a tu gusto la forma en la que se repetir la imagen cuando su

Para el posicionamiento se pueden emplear tambin las medidas de longitud vistas

Esta propiedad permite configurar todas las propiedades de fondo vistas

Queremos realizar un documento web donde el contenedor con id=pie

Si te fijas en las ventanas, persianas y cortinas de una casa, vers que

Esta propiedad, que es compatible con todos los

Esta propiedad, de IE (5.5 y siguientes), tiene varios efectos: degradaciones,

A la vista del ejemplo anterior Cules de las siguientes

A medida que vayas estudiando de los apartados siguientes tambin

Para que un elemento pueda flotar debe tener definido implcita o

inheritindica,aligualqueen float,queheredarelvalordelapropiedad clearde

Es importante saber aplicar las tcnicas de flotado en contenedores y

Permite posicionar los elementos en un documento. Esta propiedad admite cinco

absolute permite abandonar el flujo normal del haciendo que el elemento no

Esta propiedad controla si el elemento ser visualizado segn le asignes el valor

Permite controlar el orden en el que se presentan los elementos que quedan

Como casi todas las web, la web de "Migas

A medida que vayas estudiando las propiedades de este apartado

Permite establecer el modo en el que se dibujan los bordes de las tablas:separate

Permite establecer la separacin entre celdas contiguas. Para hacerlos se indica el

Permite definir el modo en el que el navegador dibujar la tabla ya que puede

Una forma comn de trabajar es usando plantillas que adaptamos a

A medida que vayas estudiando las propiedades de este apartado

Permite elegir el marcador visual de la lista asignando a la propiedad uno de los

Cul de las siguiente reglas de estilo eliminan el marcador de los

Carlos est tan entusiasmado con la