Documentos de Académico
Documentos de Profesional
Documentos de Cultura
php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
Hojasdeestilos.
Casoprctico
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/inde
2/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
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/inde
3/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
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/inde
4/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
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/inde
5/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
Debesconocer
Resumentextualalternativo
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/inde
6/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
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,
projection
Proyectoresydispositivosparapresentaciones.
screen
Pantallasdeordenador.
speech
tty
tv
Televisoresydispositivosconresolucinbaja.
PDA,etctera.
Enelejemplosiguientesemuestracmosepuedenemplearenlafuncin @mediade
lamismaformaquehacamosconlafuncin@import.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/inde
7/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
Ejemplo:
<styletype="text/css">
<!
@importurl(http://estilos/miestilo.css)
@mediaprint{
body{fontsize:10pt}/*Estableceeltamaodefuenteparaimpresin*/
}
@mediascreen{
body{fontsize:13px}/*Estableceeltamaodefuenteparavisualizacin*/
}
p{fontface:Verdana}
>
</style>
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/inde
8/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
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).
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/inde
9/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
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
21/12/2014 educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
Autoevaluacin
Ejercicioderelacionar
ElementoXHTML
Relacin
Tipodeelemento
1.Debloque.
div
strong
2.Enlinea.
em
Enviar
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
11/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
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
12/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
En los siguientes subapartados podrs ver con detalle las propiedades con las que
podremosmodificarlaaparienciadelascajas
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
13/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
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,
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
14/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
div{padding:3px20px3px}
div{padding:3px20px}
div{padding:3px}
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
15/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
1.4.2.Bordes.
Unbordeesunalneadibujadaalrededordelreadecontenidodeunelementoyde
surelleno(padding),aunqueyavimosquesteltimoeraopcional.
Podemosconfigurarelestilodelborde,sugrosorysu
color.Laspropiedadesquenospermitenhacerloson:
Borderstyle:
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
16/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
Ejemplos:
h1{border:.5emsolidblue}
h2{borderleft:solidblue.5em}
h3{borderright:solid.5em}
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
17/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
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
18/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
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
19/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
Recomendacin
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
20/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
2.1.Selectoresdeelemento.
Recomendacin
h1{color:blue}
h2{color:blue}
p{color:blue}
Cuandoserealizaunadeclaracinsobrevariosselectoresalavez,stos
seseparanporcomas.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
21/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
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
22/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
Autoevaluacin
23/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
Subttulo1.
Prrafo1
Subtitulo2.
Prrafo2.
Subttulo1ySubtitulo2.
Prrafo1yPrrafo2.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
24/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
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
25/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
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
26/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
RecomendacionesgeneralessobreCSS.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
27/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
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}
a:link{color:redtextdecoration:none}
a:visited{color:bluetextdecoration:none}
a:hover{color:redtextdecoration:underline}
28/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
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}
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
29/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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
30/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
2.5.Lapalabraclave!importantenCSS.
!important
#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}
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!
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
31/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
Autoevaluacin
table.nuevo
table#nuevo
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
32/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
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
33/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
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
34/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
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
Debesconocer
Resumentextualalternativo
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
35/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
3.2.Propiedadesdetexto.
Laspropiedadesdetextopermitenaplicarestilosalos
textos espaciando sus palabras o sus letras,
decorndolo, alinendolo, transformndolo, etctera.
Algunasdeestaspropiedadesson:
textdecoration
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:
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
36/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
p{letterspacing:12px}/*Expandeloscaracteres.Lossepara*/
p{letterspacing:0.5px}/*Contraeloscaracteres.Losjunta*/
whitespace
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
37/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
4.Loscoloresylosfondos.
Casoprctico
CSSpermitecontrolarelcolorylosfondosconunasposibilidadesqueestnaaos
luzdelosefectosquepodemosalcanzarempleandosloHTML.
Recomendacin
Debesconocer
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
38/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
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
39/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
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
40/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
ConCSSnoslosepuedeproporcionaruncolordefondoatodalapgina,tambin
sepuedeconfigurarelcolordefondodecualquierelementodeldocumento,tantosi
sonelementosdebloquecomodelnea.
ConlaaparicindeCSS,serecomiendaemplear"cajasdecolor"ensustitucinde
lastablas.
Ejemplo:p{padding:5pxbackgroundcolor:#ccc}
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
41/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
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.
body{backgroundimage:url(fondo.gif)}
p#cabecera{backgroundimage:url(fondocuerpo.gif)}
backgroundrepeat
<div#cuerpo{backgroundimage:url(fondo.gif)backgroundrepeat:norepeat}
div.horiz{backgroundimage:url(imagen.gif)backgroundrepeat:repeatx}
div.vert{backgroundimage:url(imagen.gif)backgroundrepeat:repeaty}
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
42/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
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}
body{backgroundimage:url(fondo.gif)
backgroundposition:150px150px
backgroundrepeat:norepeat}
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%
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
43/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
backgroundrepeat:norepeat}
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.
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
44/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
4.3.Opacidades.
Reflexiona
Laopacidadesunacaractersticadeloselementosquenos
permite mostrar o no otros elementos que tengan por
debajo.Paraconseguirefectosdetransparenciaenalgunos
elementostieneslassiguientespropiedades:opacity,mozopacity
yfilter.
opacity
Esta propiedad, permite asignar los mismo valores que la propiedad anterior. La
diferenciaestenquesloescompatibleconversionesanterioresdelFirefox0.9.
filter
<html>
<head>
<styletype="text/css">
body{background:#00fcolor:black}
#saludo{background:white
width:200pxheight:200px
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
45/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
filter:alpha(opacity=50)
mozopacity:0.5
opacity:0.5}
#frase{background:white
width:200pxheight:200px
filter:alpha(opacity=100)
mozopacity:1
opacity:1}
#despedida{background:white
width:200pxheight:200px
filter:alpha(opacity=0)
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
46/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
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
47/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
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
48/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
5.1.Flotar.
Flotar sirve para mover una caja a la izquierda o a la derecha hasta que su borde
exteriortoqueelbordedelacajaquelocontieneotoqueotracajaflotante.
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
49/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
Debesconocer
Resumentextualalternativo
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
50/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
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
#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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
51/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
Ejercicioresuelto
ApartirdelsiguientecdigoXHTML:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtm
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
52/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
<metahttpequiv="ContentType"content="text/htmlcharset=iso88591"/>
<title>EjerciciodeFlotaryPosicionamiento</title>
<styletype="text/css"></style>
</head>
<body>
<div>«Anterior Siguiente»</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:
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
53/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
6.Cambiarlaaparienciadeotros
elementosweb.
Casoprctico
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
54/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
6.1LastablasconCSS.
Recomendacin
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 .Los
valoresqueadmiteson:
show que permite mostrar los bordes y fondos como en las celdas con
contenido.
hidequepermiteocultarlosbordesyfondosdelasceldasvacas.
inheritquepermiteheredarelvalordeemptycellsquetengasuelementopadre.
bordercollapse
55/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
que,enelmodocollapselasceldascontiguascompartensusbordes.
borderspacing
table{border:#000solidthin/*Paraquelosbordesaparezcan*/
bordercollapse:separate/*Bordesseparados*/
borderspacing:0.5em1em/*Separacindelosbordes*/
emptycells:show/*Lasceldasvacassemuestran*/
}
tablecaption{captionside:bottom/*Elttulodelatablaaparecedebajo*/}
Recomendacin
Ejercicioresuelto
Enelsiguienteenlacepodrsdescargarelarchivoquecontieneelcdigo
fuentedelquetendrsquepartirpararealizarelejerciciopropuesto(enla
pgina,botnderechoyguardarcomo).
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
56/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
Cdigofuente(0.01MB)
UnavezdescargadoelcdigoXHTMLpuedesabrirloscontunavegador.
Versqueelresultadoeselquesemuestraenlaimagensiguiente:
TendrsqueeditarelcdigoydeterminarlasreglasCSSnecesariaspara
que el resultado sea lo ms parecido posible al de la siguiente imagen
(Nota:Aunquenosaleenlaimagen,elpunteroestsobrelaprimerafila,
poresosevedecoloramarillo):
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
57/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
6.2.LaslistasconCSS.
Laslistassonunelementomuyutilizadoenlaspginasweb.Hoyenda,suempleo
noestlimitadoalasimpleenumeracindeelementosenelcontenido,tambinse
utilizanparacrearbarrasdenavegacinverticalesyhorizontales.
Recomendacin
Paradarformatoalaslistastenemos,entreotras,laspropiedades: liststyletype,liststyle
image,liststylepositionyliststyle.
liststyletype
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
58/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
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}
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
59/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
li{display:inline
border:1pxsolid#00f}
Sinosinteresaeliminarlosbordessimplementedebemosponerlapropiedad border a
0.
Debesconocer
Esimportantesabercrearmensdenavegacinhorizontalesyverticales,
en la siguiente presentacin puedes ver con detalle cmo convertir una
simplelistaenunmendenavegacin.
Resumentextualalternativo
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
60/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
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
Mostrarretroalimentacin
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
61/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
7.IntroduccinCSS3.
Casoprctico
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.
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
62/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
Muyimportanteparamejorarlaaccesibilidaddelaspginas.
Parasaberms
Enelsiguienteenlaceencontrarstodalainformacinrelevantereferente
alasnovedadesquetieneCSS3.
NovedadesdeCSS3.
Recomendacin
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
63/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
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
64/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
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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
65/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
http://educacionadistancia.juntadeandalucia.es/cursos/pluginfile.php/585404/mod_resource/content/2/DIW04/DAW_DIW_4_v1_3__202292_Ver_impr/ind
66/66