HTML & CSS

HTML&CSS

(Versin1.5)

JosMaraMoralesVzquez
josemaria@[Link]

Jos Mara Morales Vzquez Pgina 1

 HTML & CSS

CONTENIDO
[Link]...............................................................................................................6
Historiadeloslenguajesdemarcas.............................................................................6
Algunoslenguajesdemarcas.......................................................................................7
Componentesdeunlenguajedemarcas..................................................................8
DiferenciasentreHTMLyXHTML....................................................................................9
Editoresdetextoenriquecido.....................................................................................10
Navegadores.................................................................................................................11
HTML4vsHTML5..............................................................................................................11
[Link]..................................................................................................................14
[Link]....................................................................................................14
ElDOCTYPE.....................................................................................................................14
LoselementosBsicos..................................................................................................14
[Link].....................................................15
[Link].................................................................................16
Listas................................................................................................................................17
Lasimgenes.................................................................................................................18
Loshiperenlaces............................................................................................................18
Comentarios...................................................................................................................20
Direccindeltexto........................................................................................................20
Acrnimosyabreviaturas.............................................................................................21
Caracteresespeciales..................................................................................................21
[Link]..........................................................................................................................21
[Link]................................24
[Link]............................................................................................25
[Link].............................................................................25
ComentariosenhojasdeestiloCSS...........................................................................26
[Link].................................................................................................26
Selectoresdetipoodeetiqueta................................................................................26
Selectoruniversal...........................................................................................................27
Coloresypropiedadesbsicasdeltexto..................................................................27
Selectoresdescendientes............................................................................................30
Selectoresdeclase.......................................................................................................31
SelectoresdeID.............................................................................................................32
[Link]......................................................................................32
[Link]..........................................................34
Unidadesdemedida....................................................................................................34
Unidadesdemedidaespecficasdelastipografas................................................34
Unidadesabsolutas.......................................................................................................34
Unidadesrelativas.........................................................................................................35
Porcentajes....................................................................................................................36
[Link]..........................................................................36
[Link]...................................................................................38
[Link]:divyspan...............................................................39
[Link].....................................................................................................................40

Jos Mara Morales Vzquez Pgina 2

 HTML & CSS

[Link]............................................................................................................41
Laclausula!important..................................................................................................43
[Link]..................................................................................................44
[Link]............................................................................................44
diveslacajamsversatil.............................................................................................45
[Link]........................................................................................45
Lasdimensionesdelcontenido...................................................................................45
Mrgenesinterioryexterior..........................................................................................45
Elbordedelacaja........................................................................................................46
Imgenesdefondoenlascajasysuspropiedades................................................48
Cajasyjerarquadeelementos..................................................................................49
[Link](YOTROSELEMENTOS)..............................................49
Laspropiedadesfloatyclear......................................................................................50
Introduciendolaterceradimensineneldocumento...........................................52
Visibilidad,desbordamientosyrecortes....................................................................53
[Link]..................................................................................................54
Cambiarelaspectodelpunterodelratn...............................................................54
Alterandosiunelementoesdebloqueodelnea..................................................55
Modificandoelaspectodelosbordesdelasceldasdeunatabla......................55
[Link].............................................................................................56
Selectordehijos.............................................................................................................56
Selectordehermanosadyacentes(oadyacente,sinms)..................................56
Selectordeatributos.....................................................................................................57
[Link]...................................................................58
Pseudoclases................................................................................................................58
Pseudoelementos.........................................................................................................59
[Link].........................................................................61
[Link],LQUIDOS(OFLUIDOS)YELSTICOS...........................61
Ejemplo1Cajas..........................................................................................................61
Ejemplo2Trescolumnas............................................................................................65
Ejemplo3Diseodealtoyanchofijo.....................................................................66
Ejemplos4y5Diseosdeancholquido................................................................67
Ejemplo6Diseofijo,fluido,fijo................................................................................67
Ejemplo7Separadoresentrecolumnastransparentes........................................68
Ejemplo8Sombrasydiagonales..............................................................................68
[Link]......................................................................................................69
7.3OTROSTRUCOS.............................................................................................................70
Ejemplos10y11Transpariencias..............................................................................70
Ejemplo12BoxPunch................................................................................................72
Ejemplos13y14Tooltips............................................................................................73
Ejemplos15y16Mens.............................................................................................75
Ejemplo17Esquinasredondeadas..........................................................................77
Ejemplo18Sprites.......................................................................................................77
Ejemplo19Solapas.....................................................................................................78
Ejemplos20y21Contorneos....................................................................................79

Jos Mara Morales Vzquez Pgina 3

 HTML & CSS

[Link].......................................................................................81
[Link]..................................81
8.1.1Funciones...............................................................................................................81
[Link].............................................................................................................83
[Link](type=text)...........................................................84
8.2.2Cajadeedicindecontraseas(type=password).....................................85
[Link](label)...................................................................................................85
8.2.4RadioButtons(type=radio).............................................................................85
8.2.5Checkboxes(type=checkbox).......................................................................86
[Link]......................................................................................86
8.2.7Cajadeedicindetextodemltipleslneas..................................................87
8.2.8Cajadeseleccindeficheros...........................................................................87
8.2.9Cajasdeseleccin(ComboboxesyListboxes)...............................................87
8.2.10Botones................................................................................................................88
8.2.11.NuevoselementosenHTML5...........................................................................89
[Link]......................................................89
[Link].......................................91
[Link],eventosypropiedades.....................................................................91
[Link]................................................................................91
[Link].......................................................................................91
[Link],Modelodeobjetosdeldocumento......................................................92
[Link]...................................................................................93
[Link]......................95
[Link]..............................................................97
[Link].......................97
[Link]...................98
[Link]......................................................................99
9.HTML5............................................................................................................................100
9.1.ESTRUCTURADEUNDOCUMENTOHTML5OXHTML5............................................100
[Link]....................................................................................101
Etiquetaseliminadas...................................................................................................101
Nuevasetiquetasparalaorganizacindeldocumento......................................101
SolventandolosproblemasdeversionesantiguasdeInternetExplorer.............101
[Link]:NUEVOSTIPOSDEINPUT.................................102
[Link]................................................................................................................104
[Link]............................................................................................107
Audio.............................................................................................................................107
Formatosdeaudio......................................................................................................108
Vdeo.............................................................................................................................108
Formatosdevdeo......................................................................................................109
ArchivosdeFlash.........................................................................................................109
[Link]..............................................................109
[Link].................................................................................................113
[Link]...............................................................................................................114
10.CSS3.............................................................................................................................116

Jos Mara Morales Vzquez Pgina 4

 HTML & CSS

10.1.LOSNUEVOSSELECTORESDECSS3.......................................................................116
Pseudoelementos.......................................................................................................116
Pseudoclases..............................................................................................................116
Nuevosselectoresparausoconformularios...........................................................117
Elselector:not()...........................................................................................................117
Nuevosselectoresdeatributos.................................................................................118
Selectorgeneraldeelementoshermanos..............................................................119
9.2.LASNUEVASPROPIEDADESDECSS3.......................................................................119
Gradientesyunanuevapaletadecolores............................................................119
Fondosmltiples..........................................................................................................120
Esquinasredondeadasybordesdecoradas..........................................................121
Sombras........................................................................................................................122
Opacidad.....................................................................................................................123
Mscontroldelatipografa......................................................................................123
Columnasmsfciles.................................................................................................124
Transformacionesytrancisiones................................................................................125
[Link],BIBLIOGRAFAYREFERENCIAS..................................................................128

Jos Mara Morales Vzquez Pgina 5

 HTML & CSS

[Link]
Unlenguajedemarcasesunaformadecodificarundocumentoque,juntocon
el texto, incorpora etiquetas (o marcas) que contienen informacin adicional
[Link]
quehemosusadodelenguajedemarcasfueraundictadoenelquelapersona
quedictanosvadandonotasacercadeloquetenemosqueponerennegritas,
cursivas,[Link]
[Link],unodelosprimerosprocesadoresdetextoque
existieronparaelmundodelosPCoLatex,elprogramadeautoedicinfavorito
paraedicinprofesionaldetextos,sondosejemplosdeello:

Wordstar
Lalluviaen^BSevilla^Sesuna^Ymaravilla^S.

LATEX
Lalluviaen\textbf{Sevilla}esuna\textit{maravilla}.

Resultado:
LalluviaenSevillaesunamaravilla.

Escomnenmuchosmbitosconfundirunlenguajedemarcasconunlenguaje
[Link]:[Link],fundamentalmente,
trescarenciasdeloslenguajesdemarcasquelosdistinguen:

Notienenfuncionesaritmticas
Notienenvariables
Notienenestructurasdecontrol

Lascaractersticasprincipalesdeunlenguajedemarcasonlassiguientes:

Seusansiempresobretextoplano.
Lasmarcasseentremezclanconelcontenidodeldocumentoaunque,en
general,esfcildistinguirunasdelotro.
Suprocesamientoesmuysencillo.
Sonmuyflexibles.

Historiadeloslenguajesdemarcas
Laprimerareferenciaquesetienedeunlenguajedemarcascomotalestan
[Link]
deanotarmarcasconinstruccionesenlosmrgenesdelaspruebasdeimpresin:

Jos Mara Morales Vzquez Pgina 6

 HTML & CSS

En el mundo de la informtica el padre de los lenguajes de marcas ms

importantes de la actualidad surge en los aos 80. Se llama SGML (Standard
GeneralizedMarkupLanguage)ydefineunasreglasbsicasparaeletiquetado
[Link]
metalenguaje, es decir, un lenguaje creado con la finalidad de definir otros
lenguajes a partir de l. RTF (Rich Text Format), HTML (HyperText Markup
Language)oXML(ExtensibleMarkupLanguage)derivandeSGML.

Algunoslenguajesdemarcas
HTMLes,sinduda,ellenguajedemarcasmsusadoylabasedelaspginas
[Link],quedatadelosaos90,describaslo22elementos
diferentes.Laversinactualesla4.01aunquelaversin5estenunafasemuy
avanzadayseempiezaautilizarcadavezmsapesardequesetratadeuna
normaquenoestanaprobadadeformadefinitiva.

XML deriva de SGML y se trata tambin de otro metalenguaje. Parte de un

subconjunto de SGML y aade algunas restricciones nuevas de forma que los
lenguajesderivadosapartirdeXMLresultenmssencillosyfcilesdeinterpretar
quelosderivadosdirectamentedeSGML.

XHTML(ExtensibleHTML)[Link]
actualesla1.1ylaversin2.0estenborrador.LasdiferenciasentreHTML4y
XHTML1sonnmias.

CSS(CascadingStyleSheets)esunlenguajeusadoparadefinirlapresentacinde
un documento en HTML o XHTML. No se trata en realidad de un lenguaje de
marcas,[Link]
[Link]
HTML5,CSS3seusacadavezmsapesardenotratarsedeunanormadefinitiva.

XSL (Extensible Stylesheet Language) describre la forma en que debera de

mostrarselainformacincontenidaenundocumentoconformatoXML.

Jos Mara Morales Vzquez Pgina 7

 HTML & CSS

SGMLestdefinidocomounanormaISOmientrasqueelrestodeloslenguajes
mencionadosestndefinidosporlaW3C(WorlWideWebConsortium).

Componentesdeunlenguajedemarcas
Veamos un primer ejemplo muy simple de HTML y analicemos los diferentes
componentesquepuedenaparecerenunlenguajedemarcasyalgunasdelas
caractersticasparticularesdeHTML:

<html>
<head>
<title>.:: PAGINA DE PRUEBAS ::.</title>
</head>
<body bgcolor="black" text="white">
<center><h1>TITULAR</h1></center>
Prueba de <strong>texto normal</strong><br />
Segunda linea
-Tambien en la segunda linea
</body>
</html>
Se trata de un ejemplo reducido al mnimo y que, incluso, presenta algunos
defectosoincorrecciones,[Link]
severaenunnavegador:

Jos Mara Morales Vzquez Pgina 8

 HTML & CSS

Elementos: Constan deuna etiquetade inicio, una defin y todo lo que

haya enmedio. Los elementos constan, a su vez, de tres elementos:
etiquetas,[Link]:

<strong>texto normal</strong>

Etiquetasotags: Sonlasmarcaspropiamentedichasyhabitualmentevan
entrecorchetesquebrados<>Lashaydeinicioydefinaunque,enalgunos
casos, ambas pueden coincidir en una sla partcula con una sintaxis
especialcuandoelelementonotienecontenido:

<title> ... </title>

<br/>

Contenido:[Link],enel
anteriorelementoconlasetiquetasstrongelcontenidoseraeltextoque
luegoaparecerennegritas.
Atributos: Es una pareja compuesta por un nombre y un valor que se
encuentra dentro de una etiqueta de inicio e identifica las propiedades
asociadasalelemento.
bgcolor="black"
Enrealidad,enHTMLconvencionalesposibleencontraratributossinvalor,
peroenXHTML,quesernuestropreferido,estonoesvlidocomoveremos
acontinuacin.
DiferenciasentreHTMLyXHTML
Comohemosdichohaceunmomento,XHTMLintroduceciertasrestriccionesa
HTMLparahacerqueellenguajeresultanteseamssencilloyfcildeinterpretar.
Estasdiferenciassonlassiguientes:
Los elementos deben de cerrarse siempre. En HTML normal es
perfectamente vlido, por ejemplo, empezar un prrafo con la etiqueta
<p>y,sinponerlamarcadefindeprrafo</p>comenzarunsegundo
prrafodenuevocon<p>.Puestoquenopodemosanidardosprrafos
uno dentro de otro el intrprete debe de reconocer que al empezar el
[Link]
cerrarelprimeroexplicitamenteoencasocontrariotendremosunerrorde
validacin:
HTML: <p>Primer prrafo <p>Segundo prrafo
XHTML: <p>Primer prrafo</p><p>Segundo prrafo</p>
Los elementos sin contenido deben de cerrarse siempre usando una
etiquetaespecialquerealizaelautocierreenlamismaetiquetadeinicio:
HTML: <br>

Jos Mara Morales Vzquez Pgina 9

 HTML & CSS

XHTML: <br/>
[Link]
enXHTMLesincorrecto:
HTML: <em><strong>Texto</em></strong>
XHTML: <em><strong>Texto</strong></em>
Los valores de los atributos deben de ir siempre entre comillas simples o
dobles:
HTML: <body bgcolor=black text=white>
XHTML: <body bgcolor="black" text='white'>
Losnombresdeetiquetasyatributosdebendeirsiempreenminsculas
HTML: <body BGCOLOT=black text=WHITE>
XHTML: <body bgcolor="black" text="white">
Noestpermitidousarunatributosinvalor(minimizacindeatributos)
HTML: <textarea readonly>
XHTML: <textarea readonly="readonly">
Losatributosyetiquetasdesaprobadosodesaconsejados(deprecated)en
[Link].
Unaaclaracinentodoesto:unficheroquevalidacorrectamentecomoXHTML
siempre validar como HTML pero no a la inversa, es decir, si escribimos de
acuerdoalanormamarcadaporXHTMLtambinconseguimosficherosvlidos
para HTML con una sintaxis ms clara, legible y menos sujeta a errores de
[Link].
Editoresdetextoenriquecido
Alahoradetrabajarconlenguajesdemarcas,laeleccindeuneditordetexto
enriquecidoconayudacontextualesmuyimportante:

Jos Mara Morales Vzquez Pgina 10

 HTML & CSS

Existenmuchoseditoresquecumplenparaestalabor,perositevesperdidoala
horadeempezarpuedesprobarconunodeestosdos:

Bluefish(multiplataforma):[Link]
Notepad++(sloWindows):[Link]

Navegadores
En el caso del HTML y el XHTML, el navegador web funciona como visor o
intrpretedellenguajedemarcasysurespetoporlosestndaresesfundamental.
Muchasvecesenelpasadosehautilizadolaposicindesupremacadeunode
ellos para desviarse del estndar y perjudicar a la competencia.
Afortunadamenteestas prcticas parecenabandonadas hoyen [Link]
variosrecursosparacomprobarlavalidezdeunficheroescritoenHTMLolaforma
enqueelnavegadorimplementalosestndares:

ValidadoresdeHTMLyCSS:
[Link]
[Link]

Testsdecumplimientodeestndares:
[Link]
[Link]
[Link]

HTML4vsHTML5
HTML5, an est en estado de borrador, pero supone un enorme y esperado
[Link] ltimarevisinde HTML,la4.01,sehizo en 1999y desdeentonces
Internet, nuestros hbitos y nuestras espectativas sobre lo que deberamos de
recibiralvisitarunawebhancambiadomucho.
EnparaleloaHTML5existirunaversindeXHTML5msestrictaquetambinse
encuentraanenestadodeborrador.LasdiferenciasentreHTML5yXHTML5sern
lasmismasquelasyavistasparaHTML4yXHTML4:apenasunasrestriccionesextras
parafacilitarlainterpretacindellenguaje.
HTML5,adems,iracompaadodeCSS3quemejoraysimplificaeldiseoweb.
LasprincipalesnovedadesdeHTML5yCSS3sonlassiguientes:
Ya no se habla de pginas web sino de aplicaciones web. Esto quiere
reforzarelcambioenlafilosofaquesepersigueconestanuevaversindel
lenguaje.
Laseparacinentrepresentacinycontenidosevereforzada.EnHTML5
todolorelativoaldiseoirenlosCSS.HTML5sinCSSesenblancoynegroy
nosedeberasiquieraelegiruntipodeletradiferentealqueelnavegador

Jos Mara Morales Vzquez Pgina 11

 HTML & CSS

nosmuestrapordefecto.
Existeunagranmejoraentodolorelativoalmanejodeformularios
[Link],se
encuentraligadodeformacasiindisolubleaunaampliacoleccindeAPI's
de Javascript que le proporcionan soporte para diseo 2D y 3D,
geolocalizacin,arrastrarysoltar,multimedia,etc.
Entonces, si existen todas estas ventajas y el borrador de HTML5 est ya
prcticamentecerradoporqucuestatantotrabajoencontrarwebsrealizadas
enHTML5?Porqunoempezamosnosotrosatrabajardirectamenteconl?La
respuesta est en los navegadores, los intrpretes de todo esto. Veamos una
fotografadelosnavegadoresmsusados(enseptiembrede2011):

Las cifras impresas en rojo representan el porcentaje de HTML5 que ese

navegador es capaz de interpretar correctamente. Como vemos, IE8, el
navegadormsusadoconmsdeuncuartodeltotal,slointerpretael20%dela
normaHTML5.
Enunainfografamsreciente(septiembre2012)seconfirmanestosporcentajes:
unodecadacuatrodelosnavegadoresactualesnoproporcionaansoporte
paraHTML5:

Jos Mara Morales Vzquez Pgina 12

 HTML & CSS

Hoy,febrerode2014,lastornashancambiadobastantedesdequeempezamos
aescribirestemanualyyaesperfectamentefactibleencontrarbastantea
menudoaplicacioneswebconstruidascompletamenteentornoaHTML5

Jos Mara Morales Vzquez Pgina 13

 HTML & CSS

[Link]
En este segundo apartado trataremos los elementos ms bsicos de HTML
siguiendolassiguientesnormas:
Noscentraremosenlaversin4.01,tratandoderespetarlanormaXHTML
1.0 ms estricta (aunque siempre hablaremos de html por simplificar) y
acercndonoscuantopodamosacumplirconloqueestablecerHTML5
parafacilitarunafuturatrancisin.
Veremosenalgunoscasosalgunasdelasetiquetasy/oargumentosdeuso
[Link]
desempeo no slo haremos pginas web sino que tendremos que
modificarlasqueotroshancreadonecesitamossaberparaquersirven.
Trataremos,tambin,deproporcionarsiemprequepodamosuncontenido
semnticoanuestrasetiquetas
Separaremoslapartedediseo(queenunfuturoaprenderemosaaplicar
medianteCSS)[Link],porel
momento,tuspginasresultandemasiadosimples.

[Link]

ElDOCTYPE
TodaslaspginasHTMLdeberandecomenzarporunDOCTYPEoDeclaracinde
tipodedocumentoqueeslaqueasociadichapginaconunDTD(Document
TypeDefinition)oDefinicindeTipodeDocumentoeindicaestoalnavegador.
Enrealidad,yparanohacerlomscomplicadodeloquenecesitamossaber,se
tratameramentedeunalneaformalenlaqueindicamosalnavegadorlanorma
quesigueellenguajedemarcasquedebedeinterpretar.
EnlaWikipediatenemosdiferentestiposdeDOCTYPE:
[Link]
LadefinicindeHTML4.01Trancisional,lamshabitual,esesta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]

ElDOCTYPEdebedeocuparsiemprelaprimeralneadeldocumentohtmlsinque
existaniunsloespacioantesdeellaonotendremosgarantasdequetodoslos
navegadoreslareconozcan.

LoselementosBsicos
LoselementosbsicosenunapginaHTMLson html,head y [Link]
mnimaformaldeundocumentoHTMLseraeste:

Jos Mara Morales Vzquez Pgina 14

 HTML & CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"[Link]
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Lenguajes de Marcas</title>
</head>
<body>
<p>Hola mundo!</p>
</body>
</html>

Elcontenidodelelemento htmlestodanuestrapginaweb(salvoelDOCTYPE).
Llevaunatributodenominadolangqueindicaelidiomaconqueesthechala
web.
El contenido del elemento head est formado, a su vez, por una serie de
elementosquenosevisualizandirectamente(salvoelttulootitlequeaparecer
enlabarradelnavegador).Elelemento meta puedeaparecercondiferentes
[Link],talvez,
el juego de caractres con que hemos escrito el documento HTML. Si nos
equivocamos puede que algunos caracteres especiales (vocales acentuadas,
signosdepuntuacin,etc.)[Link]
UTF8mientrasquesiusaswindowssueleserelISO88591.
Porltimo,elelemento body [Link]
caso se trata de un nico prrafo (etiqueta p) con un mensaje tpico de
bienvenida.

[Link]
Las pginas web estn hechas siempre de elementos rectangulares que se
colocanunodebajodeotro,[Link]
[Link].

Dentrodeesto,tenemosquedistinguirentreloselementosdebloqueylosde
[Link]:ocupan
todoelanchodelasuperficietildeldocumento(odelreadeldocumentoal
quehansidorestringidos)ypuedentenerotroselementos,igualesodiferentes,
arriba, abajo o, en algunas ocasiones, en su interior (aunque esto ltimo no
siempre es correcto). Un prrafo, por ejemplo, no debera de contener a otro
[Link].

Loselementosdelneasesitanunodebajodeotro,unoalladodeotro(como,
por ejemplo, un texto en negrita que puede ir seguido de otro en cursiva) o,
incluso,unodentrodeotro(unacitapuedeteneunapalabraennegritaensu
interior).Loselementosdelneanopuedentenerensuinteriorunelementode
bloque.

Otra caracterstica importante de HTML es que por defecto los saltos de lnea

Jos Mara Morales Vzquez Pgina 15

 HTML & CSS

consecutivasquehagamosmanualmenteennuestrodocumentonoserespetan.
Porejemplo,siyoescribieralosiguiente:
<p>Hola a todos

los compaeros

del curso de HTML</p>

Enelnavegadorsemostraralosiguiente:

Hola a todos los compaeros del curso de HTML

[Link]
ejemplo:
<p>Hola a todos los compaeros del curso de HTML</p>

Severaenelnavegadoras:

Hola a todos los compaeros del curso de HTML

[Link]
<p></p> Define un prrafo
<br /> Salto de lnea
<b></b> Negritas
<strong></strong> Negritas
<i></i> Cursivas
<em></em> Cursivas
 Superndice
 Subndice
<del></del> Texto tachado
<pre></pre> Preformateado
<h1></h1> Encabezado de nivel 1
<h2></h2> Encabezado de nivel 2
...
<h6></h6> Encabezado de nivel 6
<cite></cite> Cita corta
<q></q> Cita corta
<blockquote></blockquote> Cita larga
<hr /> Lnea horizontal

Todaslasetiquetasllevanasociadaunainformacindeestilopordefecto,pero
[Link],cuandoveamosCSS,
veremoscomomodificardichoestiloytratardequesealomsindependiente
posibledelnavegadorqueusemosparaverlas.

Enlasetiquetasenlasquepodemoselegir,preferiremossiemprelasque
conllevaninformacinsemntica(strong,em,cite)frentealasqueslonosdan
informacindeestilo(b,i,q).

Jos Mara Morales Vzquez Pgina 16

 HTML & CSS

Laetiquetapredetextopreformateadodefineunreaenelqueserespetade
formantegralossaltosdelneayespaciosenblancoquehayamosrealizadoal
escribireltexto.

Las etiquetas h1, h2, h3, h4, h5, h6, p, blockquote, y pre son etiquetas que
defienenelementosdebloque,mientrasque strong,b,em,i,sup,sub,del,bdo,
citeoqsonetiquetasdeelementosdelnea.

Listas
Laslistassedefinenmediantelasetiquetasul,liyol.

<ul></ul> Define una lista no ordenada (con boliches)

<ol></ol> Define una lista ordenada
<li></li> Define cada item de la lista en cualquiera de los anteriores

Porejemplo:

<ol>
<li>Lunes</li>
<li>Martes</li>
<li>Mircoles</li>
<li>Jueves</li>
</ol>

Laslistassepuedenanidar,peroteniendoencuentaquelanuevalistatieneque
[Link]:
<ul>
<li>Punto 1</li>
<li>Punto 2
<ul>
<li>Apartado A del punto 2</li>
<li>Apartado B del punto 2</li>
</ul>
</li>
<li>Punto 3</li>
</ul>

El atributo type (de uso desaconsejado!!!) nos permitira cambir el tipo de

[Link]<ultype=square>.Otrosvalores
vlidosparaesteatributosondiscocircle.

Conlaetiqueta ol tenemosdosatributos(tambindeusodesaconsejado)que
nospermitencambiarelcomportamientodelalista: start paravariarelnmero
por el que se inicia la lista ordenada (que por defecto es el 1) y type para
[Link]:<olstart=50>o<ol
type=A>.Otrostiposvlidosson1,I,ioa.

Jos Mara Morales Vzquez Pgina 17

 HTML & CSS

Laetiquetalisepuedeusarfueradeunbloqueoloulypuedellevarunatributo
denominadotypeconcualquieradelasopcionesvlidasenoloul(tambinest
desaconsejadosuuso).

Lasimgenes
Para insertar imgenes se utiliza la etiqueta img Es una etiqueta nica (sin
contenido)porloquetenemosqueusarelmtododeautocerradoparacumplir
[Link]:

<img src=[Link] alt=Texto alternativo />

[Link]
unarutarelativa,absolutaoindicarunaURLweb.:
<img src=pics/2012/[Link] alt=Texto alternativo />
<img src=[Link] alt=Texto alternativo />

El atributo alt tambin es obligatorio en XHTML. Algunos otros atributos tiles y

habitualesymuestrauntextoalternativoquesemostrarcuandolaimagenno
puedavisualizarseporcualquiermotivo:

<img src=[Link] alt=Texto alternativo title=Texto resaltado al

pasar el ratn height=200 width=400 />

El atributo title muestra un tooltip al pasar el ratn sobre la imagen. width y

height nospermitenmodificarelanchoy/oelaltodelaimagenexpresandoel
tamao deseado en pxeles. Si no los usamos la imagen se mostrar con su
[Link]
originalylaimagenresultaranamrfica.

Elatributobordermuytilparaindicarquequeremosunaimagenconborde(sin
lcuandollevaincorporadounhiperenlace)estdesaconsejadoenHTML4yno
[Link].
Por defecto las imgenes se muestran sin borde salvo que pertenezcan a un
hiperenlace(verelpuntosiguiente)

<img src=pics/2012/[Link] alt=Texto alternativo border=2/>

Laetiquetaimgesunaetiquetadelnea.

Loshiperenlaces
Losenlacesaotraspginasserealizanmediantelaetiquetaa
<a href=[Link] />Google</a>

Jos Mara Morales Vzquez Pgina 18

 HTML & CSS

Elatributo href [Link]

unapginawebenelmismodisco,enelmismoservidor,enotroservidor,aun
puntodelamismapgina,aunadireccindecorreo,etc.

<a href="[Link]">lbum de fotos</a>

<a href="[Link] un correo</a>

Otrosatributossontitleytarget:

<a href="[Link]" title=Texto resaltado al pasar el ratn

target=_blank >lbum de fotos</a>

Elatributo title nosmuestrauntooltipalpasarelratnsobrelenlace,mientras

quetargetnospermiteindicardondequeremosqueseabralanuevapginaala
[Link] target es _self eindica
queseabrirenlamismapginadondelopulsamos.Siusamoselvalor_blank
lapginaseabrirenunasolapaoventananueva.

Parahacerunenlaceaunpuntodentrodelamismapginausamoslasiguiente
sintaxis:
<a href="#C4">Ver el captulo 4</a>
...
<a id="C4">CAPTULO 4</a>

Como vemos, usamos un elemento a para crear el hiperenlace usando un

trmino a nuestra eleccin precedido del carcter especial #. En el punto de
destinodelhiperenlacedebemosdecrearotroelemento a peroenestecaso
usaremoselatributoidycomocontenidodelmismopondremoselmismotrmino
quepusimoscomovalordelatributo href peroenestecasoprescindiendodel
carcter#

Parairaunpuntodentrodeotrapginausamosunformatosimilar:
<a href="[Link]#C4">Ver el captulo 4 de [Link]</a>

Enesaotrapginadeberamosdetenerunelemento a conunatributo id de
formasimilaralcasoquehemosvistoantes:
<a id="C4">CAPTULO 4</a>

AntesdeHTML4seusabaelatributo name enlugarde id. EnHTML4 nameest

[Link]
para el destino del hipervnculo no tiene porque ir en un elemento de tipo a.
[Link]:

<a href="#lista_1">Ver la lista de caractersticas</a>

...

Jos Mara Morales Vzquez Pgina 19

 HTML & CSS

<ul id=lista_1>
<li>Procesador ARM</li>
<li>128 Mbytes RAM</li>
<li>16 Gbytes HDD Compact Flash</li>
</ul>

Elvalordelatributoiddebedesernicoynodeberepetirsenuncaenlamisma
pginaweb.

Unejemplomscompletoparaunenlaceaemailenelquerellenamosnosolola
direccindedestino,sinotambinelasuntoyelcampocc:

<a href="[Link] un alumno de

DAW&cc=departamento@[Link]">Enviar correo</a>

NOTAIMPORTANTE:ParaquevalidecorrectamentecomoXHTMLestricto
debemosdesustituirelsigno&porelcdigo&amp;Nosehahechopor
claridad,peroloveremosmsadelante.

Laetiquetaaesunaetiquetadelnea.

Comentarios
LoscomentariosenHTMLseescribenentrelossmbolos<!y>

<!-- Esto es un comentario y jams se visualizar

Un comentario puede tener varias lneas -->

Unanotarespectoaloscomentariosy,engeneral,sobrecualquierotracosa
que hagamos en las pginas web realizadas con HTML y CSS: Todo,
absolutamentetodoloqueescribamosenellasllegaralnavegadordelusuario
[Link]
algnotroargumentopuedequenoresultenvisibles,perosielusuarioquiere(y
sabehacerlo)siemprepodrverlos,porlogeneralconlacombinacindeteclas
Ctrl+U oeligiendolaopcinadecuadaen el men delnavegador. Por tanto,
tenemos que tener mucho cuidado con lo que hacemos en estos campos
aparentemente ocultos. Como norma general lo que no queramos que vea
ningnusuarionodeberadeescribirse.

Direccindeltexto
Paraindicarsieltextovadeizquierdaaderechaodederechaaizquierdaseusa
laetiquetabdoconelatributodir:

<p><bdo dir="ltr">dbale arroz a la zorra el abad</bdo></p>

<p><bdo dir="rtl">dbale arroz a la zorra el abad</bdo></p>

ltrindicaqueeltextovadeizquierdaaderecha(lefttoright)yrtldederechaa

Jos Mara Morales Vzquez Pgina 20

 HTML & CSS

[Link].

Acrnimosyabreviaturas
Usamoslasetiquetas acronym y abbr,respectivamente,conelatributo title que
mostrarunanotaexplicativaotooltipalpasarelratnporencima.

Mi ordenador tiene 512 <abbr title="Megabytes">Mb</abbr> de memoria

<acronym title="Random Access Memory">RAM</acronym>

NOTAIMPORTANTE:acroymdesapareceenHTML5,asquenoconvieneusarlo.

Caracteresespeciales
Loscaracteresespecialesqueseusanparalasetiquetasnopuedenescribirsetal
cualenundocumentoHTML,asquehayqueusarunacodificacinespecial.

&lt; <
&gt; >
&quot;
&amp; &

Existentambinuncaracterespecialquepuedensernosti:

&nbsp; espacio irrompible y no eliminable

Sinecesitamosalgnotrocaracterquenoapareceennuestroteclado(smbolos
tipogrficos,etc.)podemosrecurriralasiguientetabla:
[Link]

[Link]
Las tablas se hanusado durantemucho tiempo en HTML como el sustituto de
[Link]
tabla debe de usarse para lo que es: para presentar datos en un formato
tabulado y no, por ejemplo, para presentar informacin en cuatro columnas
[Link].

Lasintaxisquemuestraunatablasencillaquedaracondosfilasytrescolumnas
seraas:

<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>

Jos Mara Morales Vzquez Pgina 21

 HTML & CSS

Laetiqueta<table></table>[Link]
fila va encerrada como contenido de la etiqueta <tr></tr>. Cada celda va
delimitadaporlaetiqueta <td></td>. Elnmerodeceldasquehayenunafila
determinaelnmerodecolumnasdelatabla.

Casi todos los atributos de la etiqueta table (width, cellpadding, cellspacing,

frame, rules y summary) han sido desaconsejados y/o han desaparecido en
[Link](conunvalornmericoqueindicaelnmerodepxeles
deeste)[Link]
como desaconsejados sus atributos align y valign. La etiqueta td, por ltimo,
tampoco dispone de bendiciones para usar sus atributos width, height, align,
valign, abbr, axis y scope. Puedes ver para que sirven estos y otros atributos
desaconsejadosenlassiguientesreferencias:

[Link]
[Link]
[Link]

Laetiquetatdcontinadisponiendodelosatributoscolspanyrowspanquesirven
parafusionarceldashorizontaloverticalmente.
<table border=1>
<tr>
<td colspan=3>1, 2 y 3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>

<table border=1>
<tr>
<td rowspan=2>1 y 4</td><td>2</td><td>3</td>
</tr>
<tr>
<td>5</td><td>6</td>
</tr>
</table>

Laetiqueta <th> seusaparadefinirunaceldacomodeencabezadoypuede

usarsetantoenfilascomoencolumnas:
<table border="1">
<tr>
<th></th><th>A</th><th>B</th><th>C</th>
</tr>
<tr>
<th>D</th><td>1</td><td>2</td><td>3</td>
</tr>
<tr>

Jos Mara Morales Vzquez Pgina 22

 HTML & CSS

<th>E</th><td>4</td><td>5</td><td>6</td>
</tr>
</table>

[Link]
vezeinmediatamentedespuedelaaperturadelaetiquetatable:

<table border="1">
<caption>Ttulo de la tabla</caption>
<tr>
...
</table>

Las etiquetas thead, tbody y tfoot nos permiten estructurar de forma lgica la
informacin de la tabla, pudiendo incluso variar el orden de los mismos
(definiendo el cuerpo por delante de la cabecera, por ejemplo) si as nos
conviniera:

<table border="1">
<thead>
<tr>
<th>Mes</th>
<th>Ingresos</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>2800,00 </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Enero</td>
<td>1200,00 </td>
</tr>
<tr>
<td>Febrero</td>
<td>1600,00 </td>
</tr>
</tbody>
</table>

Por ltimo, disponemos tambin de la etiqueta colgroup que nos permitir

agrupardeformalgicaalgunascolumnasdelatablaparaaplicarlesestilosde
forma conjunta, pero no tiene sentido ver como funciona hasta que no
trabajemosconCSS.

NOTAimportante: Comohemosdichoenvariasocasiones,HTML5estanen
fase de borrador. Los atributos que aqu aparecen como vlidos o
[Link]

Jos Mara Morales Vzquez Pgina 23

 HTML & CSS

ejemplo, an hay discrepancias acerca de que pasar finalmente con los

atributosborderysummarydelaetiquetatable.

[Link]
font y basefont estn desaconsejadas en HTML 4.01 y desaparecen en HTML5.
[Link]
deuso:

<font face="arial narrow" color="green" size=+4>Esto no se hace</font>.

center tambin est desaconsejado. El atributo align, de la etiqueta p (que

puedetomarvaloresdeleft,right,centerojustify)[Link]
estiloensulugar.

<p align="right">Esto no debe de hacerse</p>

<center>Y esto tampoco</center>.

systrikesedesaconsejan,perolaetiquetadelquehaceexactamentelomismo
siguesiendovlida.
Si queremos mostrar texto tachado deberamos de <del>hacerlo as</del> y
nunca <s>as</s> o <strike>as</strike>.

Laetiquetauparasubrayartextotambindejadeestarsoportada.

<u>As se subrayaba antes</u>. Ahora ya no est permitido.

bigysmalltambindesaparecenenHTML5

<big>Esto no debe de hacerse</big>

<small>Y esto tampoco</small>

frame, frameset y noframes desaparecen en HTML5 y hay mucha controversia

sobre la posibilidad de su uso en versiones anteriores. Sirven para dividir la
superficietildelnavegadorendiferenteszonasdeformaquepodamoscargar
[Link]:

<html>
<frameset cols="25%,*,25%">
<frame name=zona1 src="frame_1.htm" />
<frame name=zona2 src="frame_2.htm" />
<frame name=zona3 src="frame_3.htm" />
<noframes>Tu navegador no soporta frames</noframes>
</frameset>
</html>

Jos Mara Morales Vzquez Pgina 24

 HTML & CSS

[Link]
Lashojasdeestilosirvenparasepararcompletamenteelcontenidodeldiseode
unapginaweb,detalformaque,siloestructuramoscorrectamente,esposible
cambiartotalmenteelaspectodenuestrawebhaciendomodificacionesenlas
hojas de estilo (css) sin tocar ni una sla lnea de su contenido (html). Para
empezar,podemoshacerunapequeademostracinconlapginadeejemplo
que hemos creado en la anterior unidad. Si aadimos la siguiente lnea en la
seccindecabecera(head),elnavegadordejardeusarlahojadeestilospor
defecto y tomar una de las que pone a nuestra disposicin la W3C como
demostracin:
<link href="[Link]
rel="stylesheet" type="text/css" />

Podemos sustituir la hoja Traditional por otra de las siguientes: Midnight,

Ultramarine,Chocolate,Oldstyle,Modernist,[Link]
proporcionarunestilodiferente.

[Link]
Existen tres formas diferentes de integrar las hojas de estilo con HTML. La ms
rudimentariaconsisteenusarelatributo style juntoconcualquieretiquetaHTML.
Porejemplo:
<h1 style="color: red; font-family: Verdana, Arial;" >Ttulo</h1>

La segunda forma sera introducir una nueva seccin dentro de la cabecera

(head)deldocumentoHTMLdondeseinsertaranlosdiferentesestilos:
<style type="text/css">
h1 { color: red; font-family: Verdana, Arial; font-size: large; }
p { color: gray; font-family: Times; font-size: medium; }
</style>

La tercera y ultima sera indicar, tambin en la seccin head de nuestro

documentoHTML,larutaaunarchivoexternodondeseincluiranlosdiferentes
[Link]
[Link]:

<link rel="stylesheet" type="text/css" href="[Link]" media="all" />

En la sentencia anterior, en la etiqueta link podemos incluir un atributo

denominado media que nos permitir tener hojas de estilo diferentes segn el
[Link]
atributosonscreen,print,oall,queeselvalorpordefecto.

[Link]
alavistaenelcasoanterior:

Jos Mara Morales Vzquez Pgina 25

 HTML & CSS

h1 { color: red; font-family: Verdana, Arial; font-size: large; }

p { color: gray; font-family: Times; font-size: medium; }

UndocumentoHTMLpuedeutilizarunadelastresformasanteriores,dosdeellaso
lastres,incluso,[Link],encasodeconflicto,
tomarsiemprecomobuenoelestilomscercanoalcontenidodeldocumento.
En caso de conflicto usando la misma forma de aplicar estilos el navegador
tendrencuentalodefinidoenlaltimaocurrenciaaparecida.

ComentariosenhojasdeestiloCSS
Loscomentariosenlashojasdeestilo(cuandoestasseguardanenficheros
independientes)nosehacendelamismaformaqueenHTML,sinoqueusamos
lossmbolos/*paraabirielcomentarioy*/[Link]
[Link]:

/* Esto es un comentario
y puede ocupar tantas lneas como deseemos
hasta encontrar el smbolo de cierre de comentario */

[Link]
Toda regla de formato en CSS est formadas por dos partes: selector y
declaracin. La declaracin indica que formato hay que aplicar y el selector
[Link]
entrellavesyestformadaporparejas propiedad:valor;terminadassiempreen
[Link]
cadaunodeestoscomponentesycomprobarlosencillodelasintaxis.
As como en HTML la palabra clave es la etiqueta, el corazn de CSS lo
componenlosselectores.Laversin2.1deCSStieneunadocenadeselectores
diferentesperoesposibledisearcasicualquierwebconloscincotiposbsicos
[Link].
Selectoresdetipoodeetiqueta
Elselectordetipoodeetiquetasirveparadefinirlaspropiedadesdeformatode
todosloselementosdelapginacuyaetiquetaHTMLcoincidaconelvalordel
selector.Losdosejemplosquehemosvistoenelpunto2enlosquesedefinael
formato para h1 y p son ejemplos de selectores de este tipo. Podemos definir
selectoresdeetiquetaparacualquierelementoHTMLqueestdentrodelcuerpo
(body)denuestrapginaHTMLe,incluso,paraelpropiobody:

body {font-family: Courier, Monospace; color: red; text-align: justify; }

Podemosaplicarestilossimultneamenteamsdeunaetiquetaseparandolos
selectoresconcomas:
h1, h2, h3, h4, h5, h6 {color: blue; }

Jos Mara Morales Vzquez Pgina 26

 HTML & CSS

Observaquesicometesunerrorenlasintaxis,elnavegadorsencillamenteno
tendrencuentaladeclaracindeeseselector.

Selectoruniversal
[Link]
deunaespeciedecomodnquepermiteseleccionaracualquerelemento:

* {font-family: Courier, Monospace; color: red; text-align: justify; }

Cuidado:asaplicadoserasimilar,peronoigual,aaplicarlamismadeclaracin
sobrelaetiquetabody,[Link]
diferenciasesquepractiquessobrealgunosejemplos.

Coloresypropiedadesbsicasdeltexto
LoscoloresenladeclaracindecualquierselectordeCSSsedefinencondos
propiedades: color (del texto o del elemento en si) y backgroundcolor (del
fondo).Porejemplo:

body {color: white; background-color: green; }

Losvalorespordefectosonblackparaelcolordelelementoytransparentparael
[Link]
selectordelosyavistosylosqueveremosenadelante:
hr {color: red;}

Qucoloressonvlidos?Porunladotenemoslaposibilidaddeusarunapaleta
de17coloresbsicosusandosunombrepredefinidodeentrelosqueaparecen
enelsiguientemapadecolores:

Unasegundaopcinesindicarelcolorexactoquequeremosmediantesuvalor

Jos Mara Morales Vzquez Pgina 27

 HTML & CSS

RGB,yaseaenhexadecimal,decimaloporcentual:
h1 { color: rgb(255, 20, 147); }
h2 { color: rgb(100%, 8%, 58%); }
h3 { color: #FF1493; }

CiertoscoloresexpresadosenRGBhexadecimalsepuedenpresentarmediante
una forma abreviada. Son aquellos en los que los tres componentes de color
tienensuscifrasiguales,porejemplo #660099 puedeexpresarsetambincomo
#609. Un subconjunto formado por 216 de estos colores constituyen lo que se
conocecomopaletadecoloresWebSafeyseusancuandoqueremosgarantizar
que los colores que escojamos se vern exactamente igual en todos los
dispositivos, incluidos aquellos que slo pueden visualizar 256 colores (muchos
ordenadoresy,sobretodo,dispositivosmvilesantiguos).Puedesconsultaresta
paletaenesteenlace:

[Link]

Mediante la propiedad fontfamily elegimos la tipografa que queremos usar.

Podemosindicar,eltipodeletraconcretaquequeremosolafamiliatipogrfica.
Porejemplo:
p {font-family: Arial; }
strong {font-family: serif; }

Sieltipodeletraconstademsdeunapalabratenemosqueindicarloentre
comillasdobles:
em {font-family: Times New Roman;}

Las familias tipogrficas genricas admitidas son serif, sansserif, monoespace,

cursive,[Link].

Eltipodeletraasindicadodecualquieradeestasformasdebedeestarinstalado
en el ordenador o ser accesible a travs de Internet (y, en ese caso, indicar
donde)paraquesemuestrecorrectamente,poresoesmsseguroindicaruna
familiatipogrficao,mejoran,unalistadepreferenciasquesiempreacabaen
[Link]:
h1 {font-family: Verdana, Helvetica, Arial sans-serif; }
p { font-family: Georgia, "Times New Roman", Times, serif; }
pre {font-family: "Courier New", Courier, monospace; }

OtraposibilidadesescogerunafuentedisponibleenInterneteindicarellugar
donde est disponible para que el navegador se la descargue y la use. El
directoriomspopulardefuenteseselqueGoogleponeanuestradisposicin:

[Link]

Jos Mara Morales Vzquez Pgina 28

 HTML & CSS

Elfuncionamientoessencillo:elegimoslasfuentesquevamosausaryGooglenos
proporcionalalneaquetenemosqueincluirenelheaddenuestroHTMLyla
parejapropiedad:[Link],
para usar la fuente Gochi Hand debemos incluir esto en la seccin head de
nuestroHTML:
<link href="[Link]
rel="stylesheet" type="text/css">

YnuestrareglaCSSseraas:
h1 {font-family: "Gochi Hand", cursive;}

Lapropiedad fontweight nospermitircambiarelgrosordeltrazodelafuente.

Tenemosdosopcionesparaello:especificarestemedianteunapalabraclave
predefinida(lighter,normal,boldobolder)ousarunvalornumricotambinde
entreunalistadeposibilidades(100,200,300,400,500,600,700,800o900)donde
el400secorrespondeconnormalyel700con [Link]
que funcionen normal y bold. El resto depender de la forma en que est
diseadanuestratipografa.

La propiedad fontstyle nos permite elegir entre normal, italic u oblique. La

diferenciaentreitalicyobliqueesquela italic debedeexistirdentrodeldiseo
tipografco de la fuente (y si no no se muestra) mientras que la oblique se
consigue forzando una inclinacin de entre 8 y 12 grados la fuente regular.
Siemprequeexistaesaposibildadobtendremosresultadosdemejorcalidadcon
italic.

fontvariant(desapareceenCSS3y,portanto,noesaconsejablesuuso)esuna
propiedadquenospermitedosnicasopciones:normalosmallcaps(loqueen
espaolconocemoscomoversalesoversalitas).
p {font-weight: bold; font-style: italic; font-variant: small-caps; }

La justificacin del texto la realizamos mediante la propiedad textalign cuyos

valoresposiblesson left,right,center o justify. textalign conelvalor center esel
sustitutodelaetiquetacentercuyousoestdesaconsejado.
h1 {text-align: center; }

Estapropiedadnosloalineaeltexto,sinoquehacelomismoconlasimgenes
[Link],si
queremos una imagen alineada no podemos aplicarla sobre la etiqueta img,
perosisobrelaetiquetapdelprrafoquecontieneaesaimagen:

p {text-align: center; }

Jos Mara Morales Vzquez Pgina 29

 HTML & CSS

Yluego,meterlaimagendentrodeunprrafo:
<p><img src="[Link]" alt="Logo de mi empresa" /></p>

Dospropiedadesmsantesdeterminarestepunto: textdecoration nospermite

cinco efectos adicionales sobre nuestro texto: none, underline, overline, line
throught y [Link] texttransform tienecuatrovaloresposibles: none,
capitalize,uppercaseylowercase.

ExistenmspropiedadesreferentesaltextoLapropiedad fontsize, porejemplo,

[Link]
relativas al interlineado y alguna ms. Las veremos ms adelante cuando
hayamoshabladodelasdiferentesunidadesdemedidaquepodemosusar.

Selectoresdescendientes
Es una forma de seleccionar elementos que se encuentran dentro de otros
[Link],porejemplo,que
quieroaplicarunestiloparticularalaetiquetadecursivas(em)peroslocuando
[Link]:

h1 em {color: red; }

Elestiloseaplicaratodaslasetiquetasemdentrodeunelementoh1sin
[Link],enelsiguientefragmentoHTMLtambin
seaplicaran:
<h1><a id="INICIO">Titular de la <em>pagina</em></a></h1>

El selector descendiente debe de estar formado por, almenos, dos selectores

peropodratenermssiasloprecisamos:
p strong em {font-variant: small-caps; }

Elestiloanteriorseaplicaraalascursivas(em),dentrodeunaetiquetadenegrita
(strong)y,asuvez,dentrodeunprrafo(p).

Podemoscombinarestetipodeselectoresconelselectoruniversalpararealizar
restricciones. Por ejemplo, tengamos en cuenta las siguientes dos variantes de
selectoresylosdosfragmentosdecdigoHTMLacontinuacin:
p a { color: green; }
p * a { color: green; }

<p><a id="INICIO">Enlace</a></p>
<p><strong><a href="#">Enlace</a></strong></p>

SiusamoslaprimerareglaCSSsecolorearnenverdelasdoslneas,mientrasque
siusamoslasegundaregla,slosecolorearlasegunda.

Jos Mara Morales Vzquez Pgina 30

 HTML & CSS

Selectoresdeclase
Losselectoresquehemosvistohastaahorafallanenunacosa:nosonflexibles
cuandoqueremosaplicarunestilodiferenciadoaalgunosprrafos,peronoa
[Link]
aplicarlos, lo primero que tenemos que hacer es usar el atributo class en las
etiquetasHTMLcorrespondientesalosprrafoscuyosestilosqueremosdiferenciar:

<p class="verde">Este prrafo debe de ir en verde.</p>

<p>Este prrafo va en color normal.</p>

LareglaCSSseespecificaanteponiendounpuntoalvalorindicadoenelatributo
class:
.verde {color: green; }

LareglaCSSseaplicaracualquieretiquetaHTMLqueincluyaunatributoclass
cuyovalorseaverde,ynosloalasetiquetas [Link],seraperfectamente
vlido que, adems de los prrafos anteriores, tuvieramos algo as en nuestro
HTML:
<p> Si aplicamos el atributo class con valor verde a <strong
class="verde">estas negritas</strong> o a <em class="verde">estas
cursivas</em> tambin aparecen en verde.</p>

Siquisiramosrestringirelusodelselectordeclaseparaquesloseavlidoen
combinacindeunadeterminadaetiqueta,podemoscombinarloconelselector
detipooetiqueta:
[Link] {color: green; }

Ojo,nodebemosdeconfundirlastresdiferentesformasdecombinacinde
selectoresquehemosvistohastaahora:
p, .verde {color: green; }
p .verde {color: green; }
[Link] {color: green; }

Enelprimercasolareglaseaplicaacualquieretiquetapoacualquieretiqueta
que tenga un atributo class con valor verde. En el segundo caso se aplica a
cualquieretiquetaconunatributoclassconvalorverdequeseencuentredentro
[Link],sloseaplicaenlasetiquetasdetipo
pquetenganunatributodetipoclassconvalorigualaverde.

Podemosaplicartambinelformatodemsdeunselectordeclasealmismo
[Link]:
.codigo {font-family: monoespace; color: rojo; }
.versalita {font-variant: small-caps;}

Jos Mara Morales Vzquez Pgina 31

 HTML & CSS

YennuestrapginaHTML:
<p class="codigo versalita">Prrafo en rojo con fuentes monoespaciadas y
usando versalitas</p>

Porltimo,[Link]
expresaas:
.[Link] {font-family: monoespace; color: blue; font-variant:
small-caps;}

Siincluimosestareglaennuestroejemploanterior,tendrpreferenciasobrelas
reglasindividualesynuestroprrafoaparecerenazulenlugardeenrojo.

SelectoresdeID
El selector de id es muy similar al de clase. La principal diferencia es que se
deberadeusarslocuandoesprecisoaplicarestilosaunelementonicoenla
[Link]

<p id="destacado">Parrafo destacado en negritas y color azul.</p>

yelsimboloalmohadilla(#)enlugardelpuntoenladefinicindelareglaCSS.

#destacado {font-weight: bold; color: blue; }

Una nota muy importante: la restriccin de usar la etiqueta id en un nico

elementoesalgoquenosotrosdebemosdeimponernosperoque,silaobviamos
ylaponemosenmsdeunsitioelnavegadornosequejare,incluso,aplicar
correctamente los estilos indicados en todas las ocurrencias de la misma. No
obstante,nopodramosconsiderarcomocorrectodeformaestrictaelcdigoas
escritoy,portanto,deberamosdeevitarlo.

Casitodolodemsdichoenreferenciaalosselectoresdeclase(laformade
restringir su uso, de combinarlo con otros selectores, etc) es aplicable a los
selectores de id con una salvedad: no existen selectores de id mltiple y no
podemos poner dos id diferentes a una misma etiqueta HTML al igual que
hacamosconelselectordeclase.

[Link]
[Link]
[Link]
[Link]:

.aviso .especial { color: red; background-color: yellow; }

El anterior selector solamente selecciona aquellos elementos con un

class="especial" que se encuentren dentro de cualquier elemento con un

Jos Mara Morales Vzquez Pgina 32

 HTML & CSS

class="aviso", es decir, estamos aplicando simultaneamente

selectores de clase y selectores descendientes.

[Link] [Link] { ... }

Ahora, el selector solamente selecciona aquellos elementos de tipo <strong>

conunatributo class="especial" queestndentrodecualquierelementode
tipo <p> que tenga un atributo class="aviso". O sea, estamos aplicando
selectores descendientes junto con selectores de clase que tienen su uso
restringidoaciertasetiquetas.

ul#menu [Link] a#inicio { ... }

Elanteriorselectorhacereferenciaalenlaceconunatributoid=inicioquese
encuentra dentro de un elemento de tipo <li> con un atributo
class=destacado, que forma parte de una lista <ul> con un atributo
id=menu. De nuevo selectores descendientes pero en esta ocasin con tres
niveles yencadaunodeellostenemosunselectordeclaseodeIDconuso
restringido.

Jos Mara Morales Vzquez Pgina 33

 HTML & CSS

[Link]
EnestecaptuloveremosalgunosdeloselementosbsicosdeCSSqueannos
restan. Estudiaremos las diferentes unidades de medida que podemos utilizar,
algunaspropiedadesmsrelativasaltexto,introduciremoslasdosetiquetasdivy
spanyveremoslosconceptosdeherenciayespecificidad.

Unidadesdemedida
CSStieneunamplioyflexibleconjuntodeformasdeexpresartamaosymedidas.
Manejarlascorrectamenteesnecesarioparaexpresareltamaodelasfuentes
que usamos y para otras caractersticas esenciales en un buen diseo:
interlineado,mrgenes,separaciones,etc.
Paraexperimentarconellaspresentaremosunanuevapropiedad: fontsize que
[Link]
formasdeespecificarmedidasqueveremosaqusonslovlidasparalostipos
deletrasmientrasqueotrassonmsgeneralesynosservirnparacualquierotra
cosa.
Unidadesdemedidaespecficasdelastipografas
La forma ms sencilla es expresar esta medida como una palabra clave que
[Link] xxsmall,xsmall,small,
medium,large,xlargeyxxlarge.
h1 {font-size: xx-large;}
p#piedepagina {font-size: x-small;}

La segunda forma deexpresarel tamao de la tipografa sera mediante una

palabra clave que expresa un tamao relativo. Dos son las palabras claves
permitidasenestecaso:[Link]
quelecorresponderapordefectomientrasqueelsegundoloreducir.
p {font-size: medium;}
[Link] {font-size: larger;}

Unidadesabsolutas
Podemos expresar medidas absolutas en pulgadas (in), centmetros (cm),
milmetros (mm), puntos (pt) o picas (pc). Estas dos ltimas son medidas
especficasdelasimprentasymediosgrficos.Unpuntoequivalea1/72pulgadas
(aproximadamente0,35milmetros)yunapicaequivalea12puntos(alrededor
de4,23milmetros).Elpuntotambinesconocidoporqueeslamedidaquesuele
usarseenloseditoresdetextoparaelegireltamaodeunafuente.
Cuatronotasatenerencuentaentodasellas:
Parasepararlascifrasdecimalesusaremoselpuntoqueeslanormaenlas
medidasanglosajonas.
Silaparteenteradeunamedidaescerosepuedesuprimir.
Silamedidaesceronosetienequeponerunidaddemedida.Unceroes0

Jos Mara Morales Vzquez Pgina 34

 HTML & CSS

ybasta.
Entre la magnitud y la unidad de medida no debe de haber nunca
espaciosenblanco.
Lassiguientesreglasserancorrectas:
h1 {font-size: .5in;}
p {width: 25cm; font-size: 8.5pt;}
[Link] {width: 100mm; }
td {width: 10pc; }

Unidadesrelativas
Las unidades relativas son mucho ms flexibles que las absolutas. Adems, es
altamente recomendable usarlas siempre que se pueda porque ante la gran
diversidaddedispositivosquesepuedenusaralahoradeverunapginaweb
(porttiles,grandestelevisoresdeplasma,tablets,telfonosmviles...),estasson
lasquemejorseadaptanacualquiersituacin.
[Link]
a las dimensiones del dispositivo donde estamos viendo la pgina web. Un
ejemplo:
hr {width: 500px;}

em(ojo:noconfundirloconlaetiquetaemdeHTML)yexsonmedidasrelativasa
las dimensiones de la tipografa que estamos usando. Son medidas muy
conocidas por los profesionales de la tipografa. 1em representa,
aproximadamente, el ancho de la letra M mayscula que estamos usando
teniendoencuentatantolatipografacomoeltamaodelamisma:noeslo
mismo una m si estamos usando una Arial Narrow que si estamos usando una
[Link],paracualquieradeambaseltamaovarasiestamos
usandounafuentea12puntosoa18. 1ex equivalealaalturadeunaletrax
[Link],1emsueleaproximarsecomo
eltamaodelafuentequeestamosusando(esdecir,siestamosusandouna
fuentea12puntos,1emequivalea12puntos).
body {font-size: .9em;}

Siconsideramosciertalaaproximacinquehemosdichoantes,podemosdecir
que una fuente con un tamao de .9em es, aproximadamente, el 90% de la
fuentenormalquedeberadeteneresaetiqueta.Unacon1.5emseradel150%
p {font-size: 1.5ex;}

Tambin se suele aproximar, aunque esto es bastante ms irregular, que 1ex

equivaleaproximadamentea0.5em
Aunque a primera vista son medidas que parece que slo tienen sentido
aplicadasatiposdeletra,podemosusarlassobrecualquierelementodenuestra
web:

Jos Mara Morales Vzquez Pgina 35

 HTML & CSS

hr {width: 1em;}

Yunanotaimportante:lareferenciasobrelaquesecalculaeltamaorelativo
deunelementocuandousamosestasmedidasessiempreeseltamaodeletra
de su elemento padre, es decir, del elemento en el que se encuentra. Si el
elementonoseencuentradentrodeningnotroelemento,lareferenciaesel
tamaodeletradelelemento [Link]
paraeltamaodeletradelelemento body,lareferenciaeseltamaodeletra
[Link]:
body { font-size: 10px; }
h1 { font-size: 1em; font-weight: normal;}

Alaplicarestoanuestraweb,definimoseltipodeletrabasea10pxelesyel
tamaodelostitularesdeprimerordena1emque,comohemosdicho,equivale
aproximadamentealtamaodelaletrabase,esdecir,quenohabradiferencia
[Link]:
body { font-size: 12px; }
strong { font-size: 1.2em;}

Conesto,todaslasnegritasseran,aproximadamente,un20%msgrandessobre
eltamaodeltextoenelquesecolocan.
Porcentajes
ElporcentajeesotraformadeexpresarunamedidausadaampliamenteenCSS
que,adems,[Link]
expresareltamaodeunafuente:
p {font-size: medium;}
[Link] {font-size: 200%;}

Cuandoaplicamosunporcentajecomounaunidaddemedidageneral,estese
refiere al espacio que el objeto debera de ocupar. Por ejemplo, una linea
[Link]
siguientereglaCSSocuparsolamentelamitad:
hr {width: 50%;}

LaW3Crecomiendaencarecidamenteusarpxelesyporcentajescomounidades
de medida para especificar el tamao de los diferentes objetos y em como
unidad para especificar el tamao de las fuentes. Cuando se prepara un
documento HTML cuya finalidad es tener salida impresa en papel y no en un
dispositivoptico,esmejorelusodepuntosypicas.

[Link]
Veremos a continuacin algunas propiedades aplicables al texto de nuestros
documentosqueannoconocemos.
[Link]

Jos Mara Morales Vzquez Pgina 36

 HTML & CSS

[Link],un
[Link]
prcticamenteequivalentes:
p { line-height: 1.5;}
p { line-height: 1.5em;}
p { line-height: 150%;}

La propiedad textindent nos permite que la primera lnea de cada prrafo

[Link]
usarunamedida(poejemplo,2.5em)ounporcentajerelativoalanchototalde
la lnea del prrafo (un 50% hara que la primera lnea empezara justo en su
mitad). Admite valores negativos que haran que la primera lnea del prrafo
empiecemsalaizquierdadelmismo.
letterspacingywordspacingsondospropiedadesquenossirvenparacontrolar
el espacio en blanco que separa cada dos letras o cada dos palabras,
[Link] normal ounamedida,representando
esta el espacio adicional que se suma o resta (admite valores negativos) al
espaciadopordefecto.
[Link]{letterspacing:.2em;}
[Link] { word-spacing: .5em; }

Lapropiedad whitespace controlalaformaenquesetrataranlosespaciosen

blanco, los saltos de lnea y el ajuste de las mismas. Los posibles valores son
normal, pre, nowrap, prewrap y preline. normal y pre son las ms usadas. La
primerarepresentaelcomportamientonormaldelnavegador(sloserespetael
primerespacioenblancoyningnsaltodelneaperoestasseajustan)y pre el
queobtendramosusandolaetiquepredeHTML(serespetantodoslosespacios
enblancoysaltosdelneaquehagamosperolaslneasnoseajustanysisonmuy
largasdesbordanelespacioasignado).Lastresrestantessonvariantesdeestas
tresposibiliddes. nowrap seriacomonormalperosinajustarlaslneas, prewrap
seracomo pre pero ajustandolaslneasy,porltimo, preline seracomo pre
perosinrespetarlosespaciosenblanco.
Lapropiedad verticalalign nosayudaaalinearelementosdediferentesalturas
[Link]
imagen junto a una lnea de texto y hacer pruebas con los diferentes valores
[Link]:
<p><img src="[Link] alt="FP" /> IES Rey
Fernando IV</p>

Comoobservamos,textoeimagensealineanporlabasequeeselvalorpor
[Link]
ahoralasiguientesreglasCSS:
img {border:1px solid; vertical-align: text-bottom;}

Jos Mara Morales Vzquez Pgina 37

 HTML & CSS

Ladiferenciaentreelvalortextbottomybaselineesprcticamenteinapreciable:
apenas veremos que la lnea de texto asciende un poco. El primero alinea la
parte inferior de la imagen con la parte ms baja de las letras, mientras que
baseline realizalaalineacinconlalneabasedeescrituradeestas. middle es
unodelosvaloresmscorrientesyalineaelcentrodelaimagenconelcentrode
la lnea de texto, mientras que texttop alineara la parte superior de ambos
[Link],respectivamente,texttopy
textbottom peromsorientadosacuandoqueremosalineardiversasimgenes
[Link]
basedelaimagenconlalneabasedelossubndicesodelossuperndicesdel
texto,[Link],podemosponerunamedidaounporcentaje.
Lamedidapuedeserpositivaonegativayrepresentaladistanciadesdelabase
de la imagen con la base de la lnea de texto (medidas negativas haran
descender la lnea de texto). El porcentaje tiene el mismo efecto
correspondiendoel100%[Link]
12puntos,undesplazamientode100%ode12ptdeberadeserprcticamente
equivalente.

Lapropiedadtextdecorationpermitelosvaloresnone(pordefecto),underline,
overline, line-through o blink.
La propiedad texttransform admite los valores none (por defecto), capitalize,
uppercaseylowercase.

[Link]
Losestilosseaplicanalaslistasmediantetrespropiedades:liststyletype,list
styleimageyliststyleposition.
liststyletypedefineeltipodeencabezadodecadaunodelositemsdelalista.
circle, disc, square o none sonalgunosdelosmsusados,perotambinexisten
otrosmuchosquepuedesconsultaraqu:
[Link]
liststyleimage nos permite usar una imagen de nuestra eleccin como
encabezadodecadaitemenlugardeunodelospredefinidosconlapropiedad
[Link]
[Link],estasegundaslosetendren
cuentasilaimagenqueespecificamosnoesaccesible.
liststylepositionesunadeesaspropiedadesdeajustefinodelformatoyseusa
paraespecificiarsielmarcadordeprincipiodelitemdeberadeaparecerdentro
(inside)ofueraalaizquierda(outside)delacajaenlaquedeberadeaparecer
[Link].
Existeunapropiedadabreviadallamada liststyle quepermitedefiniralastres
anteriores en una sla regla. Las siguientes declaraciones, por tanto, seran

Jos Mara Morales Vzquez Pgina 38

 HTML & CSS

equivalentes:

[Link] { list-style-type: square;

list-style-image: url([Link]);
list-style-position: inside; }

ul.milista2 { list-style: square url([Link]) inside; }

Existen muchas otras propiedades CSS que admiten reglas abreviadas que
[Link]
otrassonfcilesdeidentificarenlosejemplos.

[Link]:divyspan
div y span sondosnuevasetiquetasHTMLcuyoobjetivoesnohacernadapor
[Link]
comprobarlo por ti mismo. El objeto de ambas es dar estructura a nuestro
[Link] y,particularmente,
conlosselectoresdeclaseeID.
div esunaetiquetadebloqueideadaparaestructurardeformalgicanuestra
pgina. Sera similar a un prrafo pero, mucho ms flexible y, adems, por
defectonoconllevalaaplicacindeningnestilo.
Laetiqueta span esmuysimilarperosetratadeunaetiquetadelneayseusa
paraagruparelementosalosqueaplicarestilosdiferenciados.
VeamoselbodydelsiguienteHTML:
<body>
<div class="verde">
<h1><a id="INICIO">Titular de la <strong>pagina</strong></a></h1>
<p>Si meliora dies... bra, bra...</p>
<hr />
<p>Otro prrafo... bra, bra, bra...</p>
</div>
<p>Este bloque ya est fuera del efecto del anterior bloque div y, por
tanto, su fondo ser blanco.</p>
</body>

YloacompaamosdeestareglaCSS:
.verde { background-color: green;}

Observamos que, efectivamente, mediante div podemos agrupar diferentes

elementos de bloque y aplicar propiedades de forma conjunta a todos ellos.
Podramosconseguirelmismoefectoaadiendo class=verde comoatributoa
todos los elementos de bloque incluidos en el elemento div, pero sera ms
pesado,menosclaroypodradarlugaramserroreseinconsistencias.
Imaginemosahoraquequeremosmarcardeformaespecialconotroestiloyotro

Jos Mara Morales Vzquez Pgina 39

 HTML & CSS

tamao,laprimeraletradelprimerprrafodeunlibrodecuentosquequeremos
publicar en la web. Usaremos para ello una fuente de Google Fonts, as que
incluimosestoenelheaddenuestroHTML:
<link href='[Link]
rel='stylesheet' type='text/css'>

Luego,ennuestrashojasdeestilo,definimoslosiguiente:
.primeraletra {font-family: 'Rock Salt', cursive; font-size: 500%; font-
weight: bolder; }

Ylosprrafosdenuestrawebiranas:
<p><span class="primeraletra">S</span>i meliora dies, ut vina</p>
<p><span class="primeraletra">V</span>Veteresne poetas, an quos et
praesens et postera respuat aetas?</p>

(NOTA: Msadelanteveremosqueexisteotraformamsprofesionaldehacer
estomismomediantelospseudoelementos).

[Link]
PodemosexpresarcualquierdocumentoHTMLmedianteunaestructuraenforma
de rbol. Por ejemplo, tengamos el siguiente HTML sencillo (en el que,
intencionadamente,hemossuprimidoalgunasdelasetiquetasyatributospara
simplificarlo):
<html>
<head>
<title>Mi web</title>
</head>
<body>
<h1>La web del profe de Lenguaje de Marcas</h1>
<p>Jos Mara Morales es el <strong>profesor</strong> de este ao
de la asignatura y, entre otras cosas, vamos a ver con l:</p>
<ul>
<li>HTML y <em>XHTML</em></li>
<li>CSS</li>
<li>XML</li>
</ul>
</body>
</html>

PodramosverlaestructuradenuestrodocumentoHTMLesquematizadacomoel
siguienterbol:

Jos Mara Morales Vzquez Pgina 40

 HTML & CSS

Pues bien, la herencia de CSS hace que las propiedades de los diferentes
elementossetrasladesiemprehaciaabajoatravsdelrbolsalvoquedichas
propiedadesseanreescritas,bienporlosestilospordefecto,bienporunaregla
apropiadaquehayamosintroducidonosotros.
Porejemplo,elelementoconlaetiquetastrongaparecerennegrita,noporque
nosotroslohayamosespecificadoas,sinoporqueasestdefinidopordefectoy
aunque definamos la propiedad fontweight: normal para el selector body
seguirnsiendonegritas.
Sinembargo,sidefinimoslapropiedadcolor:orange;ybackgroundcolor:black
enelselectorbody,todoaparecerconfondonegroyletrasnaranjas.
Si nuestra pgina web sencilla llevara un enlace (etiqueta a) el fondo si
aparecera negro, pero el color sera azul porque esa etiqueta si tiene la
propiedadcolorsobreescrita.
Endefinitiva:laspropiedadesdeestiloseheredansiemprehacaabajoenelrbol
salvoquedichapropiedadsearescrita,bienesplicitamente,bienconunaregla
pordefecto.

[Link]
Anadieseleescapaaestasalturasqueamedidaquevayamoshaciendoms
complejasnuestrashojasdeestilo,msdificilsersaberenalgunasocasionesque
[Link],enigualdaddecondiciones
(porejemplo,dosreglasquehacenreferenciaaestiloscontradictoriosparala

Jos Mara Morales Vzquez Pgina 41

 HTML & CSS

etiquetap),seledarpreferenciaalaqueestmscercanaalcontenidosilas
reglasseencuentranendiferentessitios(lasmsprioritariasseranlasconsignadas
a travs del atributo style en el propio HTML, las siguientes las que escribimos
directamenteenlaseccinheaddelmismoy,porltimo,aquellasquevanenun
ficheroexterno).Antedosreglasqueestnenelmismositio(porejemplo,ambas
endoslneasdiferentesdeunmismoarchivoexternoCSS)seledarpreferencia
alaqueestescritaenltimolugar.
Estasreglasnosayudanasolucionarloscasosmssimplesdeconflictopero,que
ocurrecuandoelproblemaloplanteandosreglastotalmentediferentesquese
deberan de aplicar al mismo elemento? Para eso surge lo que llamamos
especificidad.
ImaginemosquenuestroCSStienelassiguientesreglas:
ul ol [Link] {color: red; }
.alerta{color: blue;}
[Link]{color: yellow; background-color: yellow;}
ul .alerta{color: green;}

YennuestroHTMLaparecealgocomoesto:
<ul>
<li>Uno
<ol>
<li>Dos</li>
<li class=alerta>TRES</li>
</ol>
</li>
<li>Cuatro</li>
</ul>

Qureglaoreglasseaplicaranalelementocuyoatributo class corresponde

conalerta,correspondiendoesteconlascuatroreglasqueaparecenenelCSS?
Puedes probar que cualquiera de ellas se corresponde con el elemento
[Link],independientementedelorden
enqueestnobservarsqueeltextoaparececoncolorrojoyelfondoconcolor
amarillo,esdecir,seestaplicandolaregla1y,parcialmente,laregla3.
Elhechodequeelfondoaparezcaamarilloesbiensencillo:apareceasporque,
[Link],podemos
ver que si movemos esa propiedad a cualquiera de las otras reglas el fondo
[Link]
todasysloenelcasodequeexistaunconflictoentrepropiedadesendiferentes
[Link]
laespecificidaddelaregla.
Laformamsampliamenteaceptadadecalcularlaespecificidadesmediante
unconjuntodecuatronmerosseparadosporcomas(porejemplo0,1,0,5).Los
nmeros alaizquierdatienenunrangomayorquealaderechay,portanto,
[Link]
un nivel, miramos en el siguiente. En caso de empate en todos los niveles

Jos Mara Morales Vzquez Pgina 42

 HTML & CSS

prevalecelareglaescritaenltimaposicin.
EJEMPLOS:entreunareglaconvalor0,0,1,0yotraconvalor0,0,0,13prevalecela
primerayentreunareglaconvalor0,1,3,1yotraconvalor0,1,3,2prevalecerala
segunda.
Cmosecalculanestosnmeros?Elprimeroesfcilyseusacuandoelestilose
[Link]
0o1(puestoquenopodemosduplicaratributosenunamismaetiqueta)ytiene
siemprelamximaprioridad.Losotrostressecalculansumando1segnlostipos
deselectoresqueaparezcanenlaregla:
Elsegundonmerosecalculasumandounoporcadaselectordeidque
aparezcaenlaregla
Eltercernmerosecalculasumando1porcadaselectordeclase,selector
deatributoopseudoclasequeaparezcaenlaregla(losdos ltimoslos
veremosenelcaptulosobreCSSavanzado)
Elcuartonmero,eldemenorprevalencia,secalculasumando1porcada
selectordeetiquetaopseudoelemento(esteltimoloveremostambinen
CSSavanzado)queaparezcaenlaregla.
As,sicalculamoslaespecificidaddelascuatroreglasanteriores:
ul ol li#alerta {color: red; } /* 0,1,0,3 */
.alerta{color: blue;} /* 0,0,1,0 */
[Link]{color: yellow; background-color: yellow;} /* 0,0,1,1 */
ul .alerta{color: green;} /* 0,0,1,1 */

Loquenosconfirmaque,efectivamente,elcolordeltextodeberadesalirrojo
independientemente del orden en que se situen las reglas. Si eliminamos esa
regla,eltextosaldrenverde,peropuestoquehayunempateentreestareglay
laquedictaquedeberadesaliramarilloyprevalecelaescritaenltimolugar.
Los selectores de hijos y hermanos (tambin los veremos ms adelante) no
aportanunamayorespecificidadalasreglas.
Laclausula!important
Laclausula!importantsepuedeaplicaracualquierreglaaumentandoassunivel
deprioridaddeformaqueprevalezcasobredefinicionesposterioresdelmismo
selector e, incluso, sobre las valoraciones de especificidad. Ante las siguientes
reglas, un texto etiquetado como strong, dentro de un prrafo (selector
descendiente)yconelidminegrillaapareceraconcolorrojo:
strong {color: red !important;}
p strong#minegrilla {color: blue; }

Jos Mara Morales Vzquez Pgina 43

 HTML & CSS

[Link]
El modelo de cajas se trata, posiblemente, del concepto ms importante
[Link],todoen
HTML est formado por cajas rectangulares que contienen a los diferentes
[Link]
elaspectoycomportamientodelasmismas.

[Link]
HTML y CSS definen una caja como una zona rectangular constituida por los
siguienteselementos:

Tenemos, adems, control total y de forma individual de cada una de las

[Link](enunao
en sus dos dimensiones) o especificarse con dos valores: ancho y alto. Como
unidadesdemedidatenemostodaslasqueyaconocemos
Laprincipalconfusinquesuelentenerlosprimerizoseslaformadecalcularlas
[Link]
ancho de 200 pxeles, el margen interior es de 20 pxeles, el borde de 5 y el
margenexternode25pxelesCuleselanchototaldelacaja?
Hazlascuentas:son300pxelesverdad?.Esmuchomejorverloantesdeecharle
unvistazoalasintaxisqueesanmsengaosa:
.ejemplo { width: 200px;
height: 100px;
border: 5px solid blue;
padding: 20px;
margin: 25px;
background-color: yellow; }

Yaqu,unanotaporsialguienannosehadadocuentadelaimportanciadel
DOCTYPE: El internet explorer ha considerado durante mucho tiempo que el
borde interior y los mrgenes forman parte del contenido pese a que la

Jos Mara Morales Vzquez Pgina 44

 HTML & CSS

especificiacin de la W3C jams ha dicho esto. An con Explorer 9, si nuestro

HTML no especifica un DOCTYPE, nos visualizar la pgina en modo de
compatibilidad (quirk mode) y nos dibujar una caja con un tamao de 250
pxeles,deformaqueelcontenidotilserdeslo150pxeles.
diveslacajamsversatil
AunquemuchoselementosdebloquedeHTMLsonsusceptiblesdeserusados
comocajas,[Link]
msversatilyaquenotieneestilospropiossalvolosquedefinamosnosotros.

[Link]
Lasdimensionesdelcontenido
Lasdimensionesdelcontenidodelacajasedelimitanconlaspropiedadeswidth
y height. Ambaspuedetenerporvalorunporcentaje,unamedidaolapalabra
autoqueharaquesutamaoseajustaralomejorposiblealcontenidorealdela
misma. Los valores por defecto de estas dos propiedades son width: 100% y
height:auto;
Cuandollevanunporcentaje,esteseaplicasobreeltamaodelacajadentro
de la que, a su vez, se encuentran (su elemento padre o contenedor). Por
ejemplo,siunacajatieneporanchoel50%ynoestdentrodeningunaotra,esto
[Link]
estametemosotratambinconunanchodel50%,tendrunanchodelamitad
de la caja donde se encuentra, es decir, un 25% de la superficie til del
navegador. Cambiemos el ancho de la regla .ejemplo vista antes por 50% y
pongamosestoennuestroHTML:
<div class="ejemplo">Hola caja 1
<p class="ejemplo">Hola caja 2</div>
</div>

NOTA IMPORTANTE: La altura slo puede valer un porcentaje si su padre o

[Link]
contrarioseignorarytomarelvalorauto.

Mrgenesinterioryexterior
Alternativamentetenemoslaspropiedades maxheight,minheight,maxwidth y
[Link]
usarlapalabraautosinosloporcentajesomedidasconcretas.
Losmrgenesinterioresyexterioressecontrolanconlaspropiedades padding y
marging respectivamente y tenemos varias posibilidades. Podemos poner auto
(paradejarloalarbitriodelopredefinidoporelnavegador),unvalorexactooun
[Link],tambin
podemosespecificarunmargenigualparacadaunadelascuatrodimensiones
[Link]

Jos Mara Morales Vzquez Pgina 45

 HTML & CSS

para esto son margintop, marginright, marginbottom y marginleft para el

margen externo y paddingtop, paddingright, paddingbottom y paddingleft
para el interno. Una ltima posibilidad, ms compacta, es usar la propiedad
marginconuno,dos,tresocuatrovalores:
/* 20px para cada margen */
margin: 20px;

/* 20px para superior e inferior y 10px para derecho e izquierdo */

margin: 20px 10px;

/* 20px para el superior 10px para los laterales y 30 para el inferior */

margin: 20px 10px 30px;

/* los cuatro en el sentido de las agujas del reloj: 20px superior, 10px
derecho, 30px inferior y 10px izquierdo */
margin: 20px 10px 30px 10px;

Un truco habitual para mostrar una caja centrada con respecto al elemento
dondeestcontenidaeshacerquelosmrgenesaizquierdayderechasean
[Link]
cuandotrabajamosnicamenteconporcentajes,[Link]
navegadorloharsoloestableciendolosmrgeneslateralesaauto.
[Link]
comolosmrgenesderechoeizquierdodecajascontiguassesuman,lossuperior
[Link],porejemplo,doscajas
[Link]
situamosunajuntoaotratendremos40pxelesdeseparacinperosiponemos
unaencimadelaotrasloestarnseparadaspor20pxeles.
Para la propiedad padding la sintaxis es similar. Adems, el margen exterior
permite valores negativos (experimenta con los resultados!) mientras que el
interiortraducirunvalornegativoporcero.
Yunltimodetalle:elbodydeundocumentoHTMLestambinunacajaypuede
tenerpredefinidosvaloresparaelmarginyelpadding deformaquenosquede
[Link]
estoseaaspodemosusarestaregla:
body {margin: 0px; padding: 0px; }

Elbordedelacaja
Elbordedelacajasedefinemediantetrespropiedades:color,grosoryestilo:
bordercolor, borderwidth y borderstyle, aunque luego veremos que tenemos
msposibilidadestantoparasimplificarladefinicincomoparaparticularizarla
conmuchomsdetallecomohemoshechoconlosmrgenes.
Laformaabreviadadeespecificarlascaractersticasdelbordedelacajaesesta:
border: red double 5px;

Jos Mara Morales Vzquez Pgina 46

 HTML & CSS

Dondeelprimerparmetroeselcolor(decualquieradelasformasquehemos
aprendidoadefinirlo),elsegundoelestilo(siendovlidoslosvaloressolid,dashed,
dotted, double, groove, ridge, inset, outset, hidden o none) y el tercero es el
anchodelbordequepuedeserunvalordelongitud(nuncaunporcentaje)olas
palabrasclavethin,mediumothick.
Esteformatoabreviadosloesvlidocuandolascuatrodimensionesdelborde
[Link]
tres(aunquelamayoradelosnavegadoresnosadmitiranunoodossolamente).
Los valores por defecto si prescindimos de alguno son black para el color,
mediumparaelgrosorynoneparaelestilo.
La diferencia entre none y hidden es que aunque en ninguno de los casos el
bordeesvisible,enelsegundoinfluyerespectoallugardondesedibujaraun
elementoadyacentemientrasqueelprimeroseconsideraconunanchode0px.

Podemosespecificarcadaunadeestastrespropiedadesporseparadoconlos
atributos bordercolor, borderstyle y borderwidth. Asimismo,podemoscambiar
losvaloresdecadaunadelascuatrodimensionesencadaunodeellosusando
atributos especficos (bordertopcolor, borderbottomcolor, borderleftcolor y
borderrightcolor,porejemplo)oconunalistadedos,tresocuatrovaloressobre
elatributoprincipaligualquehemoshechoconlosmrgenes:
/* 5px para superior e inferior y 50px para derecho e izquierdo */
border-width: 5px 50px;

/* dotted el superior, solid para los laterales y dashed el inferior */

border-style: dotted solid dashed;

/* los cuatro en el sentido de las agujas del reloj: red superior, blue
derecho, gree inferior y purple izquierdo */
border-color: red blue green purple;

UNANOTAMUYIMPORTANTE: todosestoselementossonvlidosparacualquier
selectorqueapliquemostantoaunelementodelneacomodebloqueaunque,
tienenmuchomssentido(sobretodoalgunosdeellos)sobreunodebloque.

Existeotrapropiedadllamadaoutlinemuchomenosflexibleparaaplicarbordesa
lascajas.
outline: 3px solid black;

outlinenorobaespacioalasdimensionesdelacajay,portanto,noafectaa
[Link],pordecirlodealgunaforma,comosiusramosun
[Link]
y,porejemplo,nopodemosespecificarpropiedadesdiferentesasusdiferentes
segmentos.

Jos Mara Morales Vzquez Pgina 47

 HTML & CSS

Imgenesdefondoenlascajasysuspropiedades
Nuestrascajasnoslopuedenteneruncolordefondo:tambinpuedentener
[Link]:
background-image: url([Link]

Silaimagenestenelpropiodirectoriodondeseencuentralaimageny,por
ejemplo,[Link]:url([Link]).Aligualqueocurracon
elvalordelatributosrcdelaetiquetaimg,silaimagenseencuentraenelpropio
servidorperoenotrodirectoriodiferentepodramosespecificarunarutaabsoluta,
relativa,etc.
[Link]
valor mediante la propiedad backgroundrepeat cuyos posibles valores son
repeat,repeatx,[Link].
Mediante la propiedad backgroundposition podemos dar posicin a nuestra
imagen de fondo, tanto si estamos usando norepeat, como si lo estamos
haciendo(encuyocasoposicionaraunadelasimagenesycrearaelmosaicoa
partirdeesta.)Tenemostresposibilidades:
/* Posiciona la esquina superior izquierda de la imagen en la caja. Est
permitido el uso de valores negativos */
background-position: 50px 100px;

/* Idem al anterior pero usando porcentajes sobre las dimensiones de la

caja */
background-position: 20% 50%;

/* alinea la imagen en la caja admitiendo los valores left center o right

para la posicin horizontal y top center o bottom para la vertical. El
orden es indiferente */
background-position: center center;

Otra propiedad interesante es backgroundattachment. Tiene dos posibles

valores: scroll o fixed. Elprimervaloreseldelcomportamientopordefecto:la
imagen se desplaza al mismo tiemp que se desplaza la pgina. El segundo
permitequeestasefijeensuposicinyquelonicoquesedesplacesobreella
seaelcontenidodelapgina.
Al igual que en otras de las opciones vistas, tambin tenemos un formato
[Link],si
tenemoslassiguientesreglas:
background-image: url([Link]);
background-color: blue;
background-repeat: repeat-x;
background-position: center top;
background-attachment: fixed;

Podramossustituirlasporestaotra:
background: url([Link]) blue repeat-x top center fixed;

Jos Mara Morales Vzquez Pgina 48

 HTML & CSS

Elordendelosvaloresesindiferenteysiomitimosalgunodeelloselnavegadorlo
completarconlaopcinquetengadefinidapordefecto.

Cajasyjerarquadeelementos
ObservalaformaenqueapareceestecdigoHTMLentunavegadorusandola
[Link]:
<h1 class="ejemplo">Hola Mundo</h1>
<div class="ejemplo">Soy la caja nmero 1
<div class="ejemplo">Soy la caja nmero 2</div>
</div>
<p>Hola <strong>mundo</strong> de las cajas. Esto es una prueba.</p>

Ponatencinadoscosas:enprimerlugarlaposicindelsegundo div serealiza

de forma relativa al primero. Adems, el prrafo final se superpone a la caja
nmero2verdad?Paraentenderlacausadeambascosaspiensaenelrbol
formado por las etiquetas HTML. El segundo div es hijo del primero y por eso
[Link],como
elprrafofinaleshermanodelprimer div constituyesureferenciaparafijarsu
posicinenlapantalla.

[Link](YOTROSELEMENTOS)
Hastaahoranonoshemospreocupadodecontrolarlaposicindeloselementos
que colocamos en nuestro HTML y dejamos que estos se vayan situando uno
[Link]
debeaque,pordefecto,usamosunmododeposicionamientoquesedenomina
esttico(static).LapropiedadCSSquelocontrolasellamaposition.
Apartede static,estapropiedaddisponedetresposiblesvaloresms: relative,
absoluteyfixed.
Siusamos elvalor relative,la posicinseindicarespecto alaque deberade
[Link] top,
bottom,[Link],lasmsusadas,aplicanundesplazamientomedido
desdelaesquinasuperiorizquierdadelelementopudiendoserestenegativosise
expresamedianteunvalormientrasquebottomyrightmidenesedesplazamiento
[Link],notienemucho
[Link]
siendoestosrelativosaltamaodelelementopadrealquepertenecen.
div.caja1 {position: relative; left: 10%; top -20px;}
div.caja2 {position: relative;right: -40px; bottom: 40px;}

Si usamos el valor absolute el elemento se posiciona exactamente en las

coordenadas que indiquemos. La forma de indicar la posicin usa las mismas
propiedades vistas en el caso del posicionamiento relativo pero en este caso
estnreferidasasuelementopadre. Sidichoelementopadreesel body del

Jos Mara Morales Vzquez Pgina 49

 HTML & CSS

documento HTML estamos haciendo que la posicin de este elemento sea

independientedelrestodeldocumentoHTMLdeformaquenadaqueaadamos
[Link],no
olvidesqueelmargenexteriordelacaja,espartedelamisma.
Elltimovalores [Link]
forma de marcar el lugar donde lo posicionamos salvo que en este caso la
posicindelelementoquedafijainclusocuandonosdesplazamosatravsdel
documentoHTMLusandolasbarrasdedesplazamiento.
Laspropiedadesfloatyclear
La propiedad float, una de las ms tiles en el mundo de las cajas, nos va a
permitirmodificarelposicionamientodenuestrosbloquesyelementosdeforma
horizontal,[Link]
posiblesvalores:right,[Link]
[Link]:
div#contenedor{width: 90%;
margin-left: 5%;
margin-top: 30px; }

div#top{width: 100%;
background-color: green;
text-align: center;
color: white;
font-weight: bold;
font-size: 3em;
font-family: Verdana, Helvetica, Arial, Sans; }

div#izquierda{width: 80%;
height: 50%;
background-color: aqua;
float: left;}

[Link]{width:90%;
margin-left:5%;
margin-top:10px;
background-color: red;}

div#derecha{width: 20%;
height: 50%;
background-color: teal;
float: right; }

div#pie{width: 100%;
background-color: orange;
font-size: .8em;
text-align: right;
font-family: Courier, Monoespace;}

YahorapondremosestoenelbodydenuestroHTML:

<div id="contenedor">
<div id="top">Cabecera de la pgina</div>

Jos Mara Morales Vzquez Pgina 50

 HTML & CSS

<div id="izquierda">
<div class="caja">Caja 1<br/> En un lugar de la mancha de
cuyo
nombre no quiero acordarme no hace mucho que viva un
hidalgo... </div>
<div class="caja">Caja 2</div>
<div class="caja">Caja 3</div>
</div>
<div id="derecha">Esto est en la columna de la derecha</div>
<div id="pie">Todos los derechos reservados</div>
</div>

Observamos que las cajas que usan el selector de id derecha e izquierda se

posicionan, respectivamente, a derecha e izquierda de la superficie til de su
elementopadre,[Link]
aparecerseaunawebactual,peroannosquedamuchotrabajoparaque
[Link]
quepuestoquehemosusadoporcentajesenlasdimensionesclavedelasreglas,
la pgina se redimensiona cuando cambiamos la superficie til de nuestro
[Link]:paraquetedescuentadeloimportantedelas
medidasenCSS,tratademodificarconunacantidadirrisoriaelanchodelacaja
izquierda(pon,porejemplo,80.005%)ointroduceunpequeo padding enlas
reglas correspondientes al estilo del selector id izquierda y vers como se
descuadratodoelconjunto.
floatesunparmetroqueseusanosloparaposicionarcajassino,porejemplo,
[Link]:
.aderecha {float: right; }

YelHTML:
<img class="aderecha" src="[Link]" alt="copa" />
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa,
varius a, semper congue, euismod non, mi.</p>

Porlgica,setratadeunatributoquenotieneningnefectocuandoestamos
usandoposicionamientoabsoluteofixed.
Lapropiedad clear nospermiteanularlosefectosdelapropiedad [Link]
cuatro valores posibles: none (por defecto), right, left o both. Los dos primeros
anularanunfloatrightoleft,[Link].
Paraverelefecto,aadamoslasiguientereglaanuestroCSSanterior:
.sinfloat {clear: right;}

YahoraaadamosalfinaldelHTMLestenuevoprrafo:
<p class="sinfloat"> Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>

Jos Mara Morales Vzquez Pgina 51

 HTML & CSS

Comopodemosver,elnuevoprrafosaltaalaparteinferiordelaimagencomo
sehabracomportadosiestanotuvieraelatributo float mientrasqueelprrafo
anteriorsigueatenindoseasuexistencia.
Introduciendolaterceradimensineneldocumento
Lapropiedad zindex nospermitirestructurarentresdimensionesloselementos
[Link]
segn su aparicin en el documento, de forma que un elemento aparece
[Link] zindex nospermitealterar
esteordenindicandounnmeroentero,positivoonegativo,queindicaelnivelo
[Link]
CSS:
.caja1 { position: relative;
background-color: yellow;
border: 5px solid blue;
z-index: 2; }

.caja2 { position: relative;

background-color: purple;
border: 5px solid blue;
top: 1px;
left: 80px;
z-index: 1; }

.caja3 { position: relative;

background-color: orange;
border: 5px solid blue;
top: -100px;
left: -1px;
z-index: -1; }

YluegoestefragmentodeHTML:
<p class="caja1">Hola caja 1!</p>
<p class="caja2">Hola caja 2</p>
<p class="caja3">Hola caja 3</p>

Siprescindimosdelapropiedad zindex,lacaja3solaparala2yestaala1.
Conlapropiedadzindexlacaja3serlaquevayaalfondomientrasquela1se
[Link]
capabaseseasignaal0.Porconvencinsesueleusarel1comolacapade
fondoyel999comolacapaquequeremosenprimerplano,peroenrealidad
como hemos dicho, la propiedad admite cualquier valor entero negativo o
[Link],adems,queestapropiedadnotieneningnefectoante
elementosquenosesolapan.
Porltimo,comovesenlacaja1sehaestablecidolapropiedadpositioncomo
relative aunquenoseefectuaningndesplazamientosobresuposicinnormal.
Estoesporquelapropiedadzindexslotieneefectosobreelementosenlosque
sehanmodificadolaspropiedadespositionofloat.

Jos Mara Morales Vzquez Pgina 52

 HTML & CSS

Visibilidad,desbordamientosyrecortes
Lapropiedad visibility,comosunombreindica,permiteocultarunelementosin
que este deje de ocupar su espacio en la pgina. Tiene dos posibles valores:
[Link]:elelementonoseveperoestah
ysientramosenlaopcindevercdigodelnavegador(habitualmenteCtrl+U)
podremosverlo,asquecuidadocondondeyparaqulousamos!
Lapropiedad overflow ledicealnavegadorloquetienequehacercuandoun
elemento no cabe completamente dentro de la caja o elemento que lo
[Link] auto [Link]
posibilidades son hidden (corta y oculta lo que no cabe), scroll (coloca unas
barrasdedesplazamientoparapoderverloquenocabe)o visible (loqueno
cabedesbordaasucontenedorysemuestraenlapgina).Unpequeocdigo
CSSparaverlo:
.caja { width: 200px;
padding: 5px;
height: 100px;
border: 1px dashed black;
overflow: hidden;}

YesteseraelHTMLdeprueba:
<div class="caja">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor.</p>
</div>

Modificaelvalorde overflow [Link]

igualqueocurraconlapropiedadvisibility,siaquusamoselvalorhiddenestono
implica que no se pueda ver en la vista de cdigo de la pgina. Existen las
propiedades overflowx e overflowy porsiqueremoscontrolarindividualmente
lasdosposiblesbarrasdescrollposibles.
Lapropiedadclipnospermitefijarlapartevisibledeunelementodefiniendouna
zona rectangular y slo es aplicable en elementos cuya posicin se ha fijado
[Link]:
clip: rect(0 200px 100px 0);

Estodejaravisibleunrectnguloque,respectoalelementoenelqueseaplique,
empiezaa0pxdelapartesuperior,llegahastalos200pxhacaladerecha,100px
haciaabajoy0pxdesdelaizquierda(osea,cuatrocoordenadasenelsentidode
lasagujasdelrelojempezandodesdearriba,comosiempre)
PuedesverunejemplocompletoconestareglaCSS:
.caja { width: 25%;
padding: 5px;
position: absolute;
border: 1px dashed black;
clip: rect(0 200px 100px 0);}

Jos Mara Morales Vzquez Pgina 53

 HTML & CSS

YestecdigoHTMLquelausa:
<div class="caja">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor.</p>
</div>

Ylamismaadvertenciadesiempre:recuerdaquelapartequenoesvisiblese
puedeverconlaopcindeVercdigodelnavegador!

[Link]
Cambiarelaspectodelpunterodelratn
Podemoscambiarelaspectodelcursorcuandopasamossobreunelementocon
[Link]:
[Link].
[Link].
[Link],amenudounaflecha.
[Link].
[Link].
[Link].
[Link].
[Link].
[Link].
[Link].
[Link].
help. El cursor indica una ayuda. A menudo se muestra un signo de
interrogacin.
[Link].
[Link].
[Link].
[Link].
wait. El cursor indica una progresin. A menudo se muestra un reloj de
arena.
[Link]
[Link]
formatocur(cursor)oani(cursoranimado).

Unejemplo:
.caja { width: 50%;
padding: 5px;
border: 1px dashed black;
cursor: crosshair;}

Jos Mara Morales Vzquez Pgina 54

 HTML & CSS

Alterandosiunelementoesdebloqueodelnea
Lapropiedaddisplaynospermiteredefinirelcaracterdeunelementocomode
bloque o de lnea. block, inline o none. son los valores ms usados. Los dos
primeros son autoexplicativos. El tercero hace que el elemento no se muestre
pero,alcontrariodeloqueocurraconlapropiedad visibility yelvalor hidden,
[Link],sinembargo,sigue
visiblealdaralaopcindevercdigo.
Una utilidad habitual de esta propiedad es mostrar uno al lado del otro los
elementosdeunalistapara,porejemplo,construirunmen(ampliaremoseste
usoenuncaptuloposterior):
li{ display: inline;
list-style-type: none; }

Enrealidadlapropiedaddisplayesmuchomscomplejaytieneotrasopciones
disponibles, pero no vamos a detenernos a verla. Existe una buena referencia
acercadeellaaqu:
[Link]

Modificandoelaspectodelosbordesdelasceldasdeunatabla
Las propiedades bordercollapse y borderspacing controlan la forma en que
[Link]:collapsey
[Link]
queseaposiblemientrasqueconelsegundovalorlaseparacinentrebordesse
controlar mediante la propiedad borderspacing. El valor por defecto es
separate.
borderspacing indica el espacio que habr entre los bordes de celdas
adyacentes,porejemplo:

border-spacing: 2px 0;

Siseindicandosvaloreselprimerohacereferenciaalaseparacinhorizontalyel
segundo a la vertical. En el caso de indicar un slo valor se aplica a ambas
distancias
Por ltimo, la propiedad emptycells tiene dos posibles valores (show o hide)
[Link]
valorpordefectoesshow.

Jos Mara Morales Vzquez Pgina 55

 HTML & CSS

[Link]
Aunquehemosdichoqueprcticamentecualquierpginawebpuedehacerse
con los cinco selectores bsicos que ya conocemos, existen algunos que se
llaman avanzados que nos van a permitir, bien simplificar algunas tareas de
aplicacindeestilosobienpermitirnosalgunosefectosimposiblesdeconseguir
deningunaotraformacomoeselcasodelautilidadproporcionadaporalguna
[Link].

Selectordehijos
Elselectordehijosesmuysimilaralselectordescendienteperoesmuchoms
[Link],[Link]
meimportaqueelelementopertenecientealaclase destacado seencuentre
dentrodelelementop,sinimportarmecuanprofundoseencuentredentrodel
[Link]
quieroqueelelementoconlaclasedestacadoseahijodirectodelelementopy
[Link]:
p > .destacado {color: purple; }

Selectordehermanosadyacentes(oadyacente,sinms)
El selector de hermanos es aquel que nos permite seleccionar elementos que
[Link]
podemos ver destacados los hermanos de un HTML sencillo ya visto en otros
ejemplos:

Paraaplicarundeterminadoestiloalprimerprrafodespusdeuntitulardenivel
1,usaramoslasiguientesintaxis:
h1 + p {text-indent: 2.5em; }

Jos Mara Morales Vzquez Pgina 56

 HTML & CSS

El selector de hermanos es una forma muy til de crear estilos para ciertas
combinacionesdeelementosmuyutilizados:elprimerprrafodeuncaptulo,el
primerprrafoposterioraunatabla,[Link]
[Link]:
p + p { text-indent: 1.5em; }

Selectordeatributos
Losselectoresdeatributosnospermitenaplicarestilosadeterminadoselementos
enfuncindelosatributosqueacompaenalaetiquetaHTMLodelosvalores
[Link],enrealidadlosselectores
declaseodeIDsonunaespeciedeselectoresdeatributoporqueaplicanestilos
en funcin del valor de un atributo (class o ID, respectivamente), as que no
vamosavernadademasiadonuevoenesteapartado.
[Link]
loselementosenfuncindeundeterminadoatributoindependientementedesu
valor:
td[rowspan] {background-color: black; color: white; }

Lossegundosseleccionanunelementoenfuncindeunatributoconunvalor
determinado:
a[href="[Link] {color: red; text-weight: bold; }

La tercera clase de selectores de atributos realiza su seleccin en funcin del

atributoydelaexistenciadeundeterminadovalorperoquenotieneporquser
unico,sinosimplementeaparecerenunalistaseparadaporespacios:
div[class~=alerta] {color: red;}

Podemoscorrerelriesgodepensarquesimplementeesunaformadehacerms
complicado lo que ya sabemos hacer con otros selectores ms simples. Por
ejemplo,estasdefinicionessoncasiidnticas:
[Link] {color: red;}
div[class=alerta] {color: red;}
div[class~=alerta] {color: red;}

Perotambinpodemospensarenotrasposibilidadesmsinteresantes:
img[alt~=ilustracin] {border: 2px solid;}
table[summary~=2010] {background-color: green;}
*[title~=importante] {color: red; cursor: crosshair; }

[Link]
elementos con cierto atributo y que incluyen un determinado valor como el
primerelementodeunalistaseparadaporguiones.
*[lang|="es"] { color: blue; }

Elanteriorejemploseleccionaraatodosloselementosconunatributolangque

Jos Mara Morales Vzquez Pgina 57

 HTML & CSS

empiece por es (por ejemplo esES, esMX, esAR, etc.) De hecho esta es su
principal (y casi nica) utilidad: la seleccin de elementos segn los cdigos
estndaresdeidiomas.

[Link].
ExistenciertosestadosocaractersticasdenuestrodocumentoHTMLalosquees
tilyapropiadoaplicarleunestilodiferenciado:unenlaceyavisitado,laprimera
letra de un prrafo, etc. Esto se consigue mediante las pseudoclases. Para
identificarquehablamosdeunapseudoclaseenunareglaCSSusamoslosdos
puntos comosigno diferenciadoryestaspuedenaplicarsesobreselectores de
tipo,declase,[Link].
Y una nota: en algunos textos se hace una separacin entre pseudoclases y
pseudoelementos mientras que en otras se engloban todas bajo la misma
categora. Aqu haremos la diferenciacin clsica porque, si bien no existen
grandesdiferencias,siqueesnecesariohacerladistincinalahoradecalcularla
especificidaddelasreglasCSS.
Pseudoclases
Las pseudoclases son aquellas que se aplican fundamentalmente sobre los
selectoresdeenlace(aunquealgunadeellaspudeaplicarsetambinsobreotros
elementos).Setratade:link,:visited,:hover,:activey:focus.
Lapseudoclase :link hacereferenciaaunenlacequeannohasidovisitado,
mientrasque :visited hacereferenciaaloopuesto,esdecir,losenlacesqueya
[Link]:
a:link {color: green; background-color: yellow;}
a:visited {color: yellow; background-color: green; }

Lapseudoclase:hovernosdictalosestilosaaplicaralpasarelratnporencima
[Link]
conenlacesperoesaplicableacualquierotroelemento:
a:hover, [Link]:hover{font-weight: bold; }
em:hover {color: blue;}

:active es una pseudoclase cuyos estilos se aplican al hacer click sobre un

elementooactivarlomediantelateclaIntrocuandotieneelfoco:
h1:active {color: orange; background-color: black;}

Como imaginamos, muchas de estas propiedades pueden activarse

simultaneamente:unenlacepuedehabersidovisitadoy,podemospasarelratn
porencimadel,[Link]
fundamental para aplicarlos correctamente cuando queremos aplicar reglas
distintivasatodosellos:
a:link {color: blue;}
a:visited {color: green;}
a:hover {color: orange;}

Jos Mara Morales Vzquez Pgina 58

 HTML & CSS

a:active {color: red;}

Podemos aplicar tambin reglas a dos pseudoclases simultaneamente. Por

ejemplo, la siguiente regla se aplicara sobre un enlace visitado sobre el que
hacemosclick:
a:visited:active {color: black; background-color: orange;}

Porltimo,:focusesunareglaqueseaplicacuandoelelementotieneelfoco,
es decir, cuando se activara si pulsamos la tecla Intro. Para poder usarla
debemosdedefinirqueelementostienenelfocoennuestrapginayelordenen
elqueloreciben(cadavezquepulsamossecuencialmenteeltabulador).Estose
hace mediante el atributo tabindex que podemos usar en las etiquetas a
(enlaces)denuestrawebposibilitandoaslanavegacinsinnecesidadderatn.
Porejemplo:
<p>Un enlace a <a href="[Link] alt="Google"
tabindex="1">Google</a>, otro a <a href="[Link] alt="Bing"
tabindex="2">Bing</a> y un tercero a <a href="[Link]
alt="Yahoo" tabindex="3">Yahoo</a>.</p>

Yahorayasipodemosverlosefectosdelapseudoclase:focus
a:focus {background-color: black; color: white; font-size: 1.8em;}

La pseudoclase :firstchild nos permite seleccionar un determinado elemento

[Link],veamoslasreglas
siguiente:
p:first-child {color: blue; }
p:first-child em {background: yellow; }

Laprimeraseleccionayaplicaestiloaunprrafosiempreycuandoseaelprimer
hijodesupadre,mientrasquelasegundahacelomismosobrelascursivasdeese
mismotipodeprrafos.

Existeunaltimapseudoclasedeaplicacinmuylimitadallamada:langquenos
permiteaplicarestilosdiferenciadosenfuncindelidiomaenqueestescritoel
[Link]:
p:lang(es) {color: red; }

Aunquetienenunusomuysimilaralvistoenunodelosselectoresdeatributo,
existe una ligera diferencia. El selector de atributo es aplicable slo a los
contenidos que usen el atributo lang, mientras que esta pseudoclase sera
aplicable tambin en otras circunstancias, como por ejemplo si el propio
navegadorfuesecapazdeanalizarelcontenidoydetectarelementosescritosen
diferentesidiomas(cosaque,porelmomento,nohacendemasiadobien...).
Pseudoelementos
Losdosprimerospseudoelementosqueveremossonaplicablesaladecoracin

Jos Mara Morales Vzquez Pgina 59

 HTML & CSS

de prrafos de texto. Se llaman :firstletter y :firstline y sus nombres son

autoexplicativos
[Link]:first-letter {margin-right: 4px; font-size: 4em; color: red;
font-weight: bolder;}
[Link]:first-line {font-variant: small-caps; font-weight: bold;}

Existenotrosdospseudoelementosllamados:beforey:afterqueusadosjuntocon
la propiedad content nos permiten insertar contenido (texto, imgenes, etc.)
antesodespuesdeunelemento.
p#insert1:after{ content: " (TM Marca Registrada) ";}
p.insert2:before{ content: url(icon_new.gif);}

Enlosanterioresejemplos,elprimeroinsertaeltextoqueapareceentrecomillasal
finaldecadaprrafoidentificadoconelselectordeIDinsert1,mientrasqueel
segundo inserta el gif animado icon_new.gif delante de cada prrafo
identificadocomopertenecientealaclaseinsert2.

Jos Mara Morales Vzquez Pgina 60

 HTML & CSS

[Link]
Con HTML slo pueden dibujarse cajas. Cajas y rectngulos absolutamente
cuadrados.Estoesverdadal99.00%(sobretodohastalaaparicindeHTML5)
pero,sinembargo,[Link]
efectosdediseoparaengaaralespectadorydarlelasensacindequeest
viendoalgoconuncontenidomuchomselaboradodeloqueenrealidadtiene
[Link] adibujarcajasmucho mejoresdelas
que ya conocemos, pero tambin a decorarlas de forma que parezcan otras
[Link]
queacompaanalcaptulo(yque,siannolohashecho,puedesdescargarte
desde[Link]
analizandounoaunoeindicaremoscualessonlasclavesdediseoqueusamos
enlosmismos.

[Link],LQUIDOS(OFLUIDOS)YELSTICOS
Lastresestrategiaspurasdeafrontarundiseowebson:diseosdeanchofijo,
deancholquido(ofluido)odeanchoelstico.
[Link]
realizarynotenemosquehacerdemasiadaspruebasniajustesparaasegurarnos
[Link]
a800pxelesdeanchosesueletomarcomoestndarunanchode760o780
pxelesparaelcontenido.
Losdiseosdeancholquidosonaquellosquetrabajanmedianteporcentajes.
Aprovechanmuchomejorlasuperficieenlaspantallasgrandesperonosexigen
mspruebasparaasegurarnosdequetodosevecorrectamenteenresoluciones
bajas.
[Link]
unidad em, de forma que si incrementamos el tamao del texto, tambin
aumentamosproporcionalmentelasdimensionesdenuestrodiseo.
Nos encontraremos por ah muchos modelos hbridos pero estos son los
[Link],sehabladeundiseohbridolquidofijocuandolo
fundamentaldeldiseoeslquidoperoexisteenlalgnelementodeanchofijo.
Porejemplo,podemospensarenundiseoadoscolumnasdondeunadeellases
de ancho fijo (para emplazar mens, publicidad, etc.) mientras que la otra,
destinadaaloscontenidos,tieneundiseolquido.
Ejemplo1Cajas
Enelejemplonmero1nosencontramoscuatrodiseosdecajasbsicosdonde
[Link]
habamostrabajado(enelcaptulo5)tenanelancho,obienfijo,obienlquidoy
[Link]
delcontenidoypartiendodelapremisadequenoconocemoseltamaodeese
contenido.

Jos Mara Morales Vzquez Pgina 61

 HTML & CSS

Si metemos dos columnas dentro de una caja contenedora, que suele ser la
estrategia habtual, y no definimos alturas fijas las cajas desbordarn al
[Link]:
Poner un pie al diseo. Este pi debera de llevar definida la propiedad
[Link]
necesitamospodemosponerunoinvisible.
#pie{
color: white;
width: 760px;
padding: 10px;
}
Unasegundasolucinesusartambinlapropiedadfloatenelcontenedor.
#contenedor2 {
border: 2px dotted black;
margin: 5px auto;
width: 780px;
float: left;
}
Unaterceraopcinseradefinirlapropiedadoverflowaautoohiddenen
lacajacontenedora:
#contenedor {
border: 2px dotted black;
margin: 5px auto;
width: 780px;
overflow: auto;
}

Encontramosotroproblemacuandoqueremoscolocartresomscolumnas.
Hastaahoraslohemosusadodosycolocamosunaaladerechaconfloat:right
y otra a la izquierda con float: left. En realidad, si ajustamos bien el espacio
podramoshaberusadodosvecesunouotroporquelosfloatseapilaranen
horizontal llenando todo el espacio disponible. Esto nos da la idea de como
hacerlo con, por ejemplo, tres columnas: podemos apilar la central a la
derechaoalaizquierdapero,esosi,calculandosiemprebienlasdimensiones:
#izquierda2 {
float: left;
width: 31%;
padding: 1%;
}

#centro2{
float: left;
width: 32%;
padding: 1%;
}

#derecha2 {
float: right
width: 31%;
padding: 1%;

Jos Mara Morales Vzquez Pgina 62

 HTML & CSS

Observemosunacosaenelejemploanteriorenelque,comovemos,eldiseo
[Link]
elcontenedorloves?Elpaddingeselespaciointeriorentreelcontenidodela
cajayelbordedelamismaysedejatantoaderechacomoaizquierda,esdecir,
un2%porcadacolumna.Entotalhacenel100%Silascolumnastuvieranbordes
pasaralomismo:unbordedel.5%ocuparaun1%[Link]
muycomnhacermalestosclculos,tantoendiseoslquidoscomofijos,yen
ese caso las cajas se desbordaran, quedaran descuadradas, con mrgenes
antiestticos,etc.
Enlosdosejemplosanterioreshemosusado,intencionadamente,coloreschillones
paracadacolumnaparaquequedeclaroquelacolumnamsalta,seacual
sea, es la que marca el alto total del diseo. Puedes hacer pruebas de esto
[Link]
estos diseos es que, o el fondo es blanco para todas, o si queremos usar
[Link]
[Link]?Enlacaja
nmero tres de este ejemplo tenemos una forma rpida de hacerlo pero slo
vlidaparadiseosdeanchofijo:usarunaimagendefondoparaelcontenedor
denuestrascolumnasdondevandibujadoslosfondosyseparadoresdecada
[Link]:
#contenedor3 {
background-image: url([Link]);
border: 2px dotted black;
margin: 5px auto;
width: 780px;
overflow: auto
}
Laimagenainsertardebaradeseralgoas:

Ynuestratablaas:

Jos Mara Morales Vzquez Pgina 63

 HTML & CSS

[Link]
[Link]
estructuracondoscontenedoressiguiendolossiguientespuntos:
El primer contenedor tendr, como siempre, el ancho total del diseo y
llevar como color de fondo el que queramos dar a la columna de la
izquierda.
Elsegundocontenedoriradentrodelprimeroconunfloat:right;,ocupando
el ancho de la columna de la derecha y con el color de fondo que
queramosquelleveesta.
[Link]
[Link]
lapropiedad position:relative; yun margin:left; convalornegativopara
[Link]
HTMLsimplificadoalmximoquedaraas:
<div id="contenedor4">
<div id="contenedor4-2">
<div id="izquierda4">Lorem ipsum dolor sit amet</div>
<div id="derecha4">Lorem ipsum</div>
</div>
</div>

YelCSS:
#contenedor4 {

Jos Mara Morales Vzquez Pgina 64

 HTML & CSS

width: 780px;
margin: 5px auto;
color: white;
background-color: purple;
overflow: auto;
outline: 3px solid black;
}

#contenedor4-2 {
width: 500px;
float: right;
background-color: orange;
}

#derecha4 {
width: 480px;
float: right;
padding: 10px;
color: black;
}

#izquierda4 {
width: 260px;
float: left;
padding: 10px;
position: relative;
margin-left: -280px;
}

Ejemplo2Trescolumnas
Ysinecesitamostrescolumnas?Elsistemaseramuysimilaralvistoenelltimo
casoconlasalvedaddequeahoranecesitaramosuncontenedorporcadauna

Jos Mara Morales Vzquez Pgina 65

 HTML & CSS

de las columnas (para darle color al fondo de cada una de ellas de forma
diferenciada)ytodaslascolumnasrealesconcontenidoirandentrodelltimo
contenedor,aladerecha,conlosdesplazamientosalaizquierdaqueveamos
[Link],cinco,etc.
Enelejemplo2tieneseldiseotpicoatrescolumnasdelmismoanchoalquese
haaadidoalgoqueahoraestdemodaentodoslosdiseosweb:uncintillofijo
en la parte superior de la pgina donde habitualmente se sitan enlaces a
mens,alperfildeusuario,cerrarsesin,[Link]
una caja en la que hemos definido dos propiedades: position: absolute: y z
index:99;
#cintillo {
width: 100%;
height: 18px;
padding: 2px 10px;
position: fixed;
top: 0;
left: 0;
z-index: 99;
background-color: gray;
color: white;
font-weight: bolder;
font-family: monospace;
}

Ejemplo3Diseodealtoyanchofijo
Losdiseosdealtoyanchofijosnotienenmayorcomplejidadyseincluyeeste

Jos Mara Morales Vzquez Pgina 66

 HTML & CSS

ejemplosloparacompletarlacoleccindecasosposibles.

Ejemplos4y5Diseosdeancholquido
Lacomplejidaddeldiseodeancholquidoconmltiplescolumnasresideenlos
clculos paraajustarestas sinquesedesborden o descuadren almodificarel
anchodelnavegador.Enelejemplo4tienesuncasoatrescolumnasenelquese
[Link]
ejemplo 5 sera exactamente igual pero aqu ya usamos adicionalmente la
estrategiadecontenedoresanidadosquenospermitequetodaslascolumnas
tengan la misma altura independientemente de cual sea la que tenga ms
cantidad de contenido. En ambos casos usamos, adems, dos columnas
auxiliaresparausarlascomoseparadoresentrelascolumnasprincipales.
Ejemplo6Diseofijo,fluido,fijo
En este ejemplo presentamos una estructura en la que las columnas laterales,
derechaeizquierda,sondeanchofijoyeslacolumnacentrallaquemodificar
suanchodeformafluida(porcentual)enfuncindelanchodelnavegador.

Lostrucosdediseosonlossiguientes:
Suponemosqueelcontenidoprincipalestarenlacolumnacentrallacual
[Link]
diseonopodrasertansimplecomosepresentaaqu.
Lascolumnaslateralesllevantrespropiedades: position:absolute;top:0; y
luego,segncorresponda, rigth:0; paralacolumnadeladerechay left:0;

Jos Mara Morales Vzquez Pgina 67

 HTML & CSS

paraladelaizquierda.
Elpaddingaderechaeizquierdadelacolumnaprincipalcentralhadeser
fijoysuficientecomoparacubrirelespacioqueocupanlascolumnas
laterales.
Ejemplo7Separadoresentrecolumnastransparentes
Enesteejemplousamos unavariantedelmtodovisto paraqueelseparador
entrelascolumnasseatransparenteydejeverelfondodelawebque,eneste
caso,[Link]
elespaciodelacolumnadeladerecha,elsecundario,dentrodeeste,tienelos
atributos de position: relative; y marginright: 260px; para desplazarlo a la
derecha,dejandounespaciovacoentreambosqueactuarcomoseparadory
dejarverelfondodelaweby,porltimo,dentrodeestesegundocontenedor
alojaremoslasdoscolumnas,unadeellas,laizquierda,denuevocon position:
relative;yunmarginleft:710;paradesplazarlaasuposicinenlaizquierda.

Ejemplo8Sombrasydiagonales
Elejemplo8estextraidodirectamentedelawebyesuncasosencillodecomo
introducirsombras,bordesredondeadosylneasdiagonalesennuestrodiseode
[Link]:unadecabecera
queintroduceunosbordesredondeadosyunadiagonalquecruzadepartea
parteeldiseo,unadepiconlosbordesredondeadosylasombrainferior,yotra
que se repite verticalmente a lo largo de todo el cuerpo del diseo para
completar el efecto de sombreado. La eleccin de introducir la imagen de
cabeceraenelhtmlynoenelcssesdiscutible,perohequeridodejareldiseo

Jos Mara Morales Vzquez Pgina 68

 HTML & CSS

talycomoloencontrenlawebconlosmnimoscambiosparasuestudio:
CabeceradeldoumentoenelHTML:
<div id="header">
<img src="[Link]" width="883" height="260" alt="[Link]">
</div>
<div class="article">

</div>

RepeticindelaimagenenelcuerpodeldiseoenelCSS:
[Link] {
padding: 0px;
width: 883px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
background-image: url([Link]);
background-repeat: repeat-y; }

Pideldocumento,enelCSS:
#abajo {
background-image: url([Link]);
background-repeat: no-repeat;
height: 25px;
margin: 0px;
padding: 0px; }

[Link]
Elejemplo9muestracomodarunaspectoprofesionalaunatablaconapenas
unas pocas propiedades. El fondo del diseo tiene un degradado de color
vertical conseguido mediante la repeticin de una imagen de fondo. Las
propiedades, como puedes ver, no tienen nada especial ms que una
adecuadautilizacindetipografas,[Link]
[Link]:01px;que
[Link]
tendrencuentaparaelespaciadohorizontalyelsegundoparaelvertical(si
hubiera slo un valor aplicara a ambas magnitudes). Con esto conseguimos
anularelespaciadohorizontalpordefecto(deunpixel)quedejaraunpuntoen
[Link]
demsnoexistenadamsaresear.

Jos Mara Morales Vzquez Pgina 69

 HTML & CSS

7.3OTROSTRUCOS

Ejemplos10y11Transpariencias
Losefectosconimgenestranslcidasyqueparecenfijarsealfondodelaweb
mientras que el contenido se desplaza son muy utilizados y fciles de
[Link]
dediseosonlassiguientes:
Debemosdecontarconunjuegodeimgenesespecialmentepreparadas.
Todasellassimilaresperoconalgnefectodiferenciador

Situaremoscadaunadeestasimgenesenunacajadiferentedeforma
queelcolordefondodelacaja(backgroundcolor)coincidaconelcolor
defondodelaimagen

Jos Mara Morales Vzquez Pgina 70

 HTML & CSS

Fijaremostodaslasimgenesdelamismaformausandolaspropiedades
backgroundattachmentybackgroundposition
EnelsiguienteCSSextraidodelejemplo1semuestranestaspropiedadesen
formato comprimido salvo en la caja correspondiente al body del
documento:

body {
background-color: #ded;
background-image: url([Link]);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 1% 5%;
}

div#contenedor {
background: white url([Link]) top left no-repeat fixed;
width: 800px;
margin: 15px auto;
border: 1px solid black;
padding: 40px;
}

div#contenedor h2 {
background: #cbb196 url([Link]) top left no-repeat fixed;
color: white;
padding: 20px;
margin: 20px auto;
border: 1px solid black;
}

Jos Mara Morales Vzquez Pgina 71

 HTML & CSS

Ejemplo12BoxPunch
El Box Punch es otro ejemplo muy socorrido para disimular el hecho que ya
conocemos de que slo podemos trabajar con cajas perfectamente
[Link]
diferentes cajas superpuestas se consigue el efecto de hacer creer que estas
cajassonmsirregularesdeloqueenrealidadloson.

Jos Mara Morales Vzquez Pgina 72

 HTML & CSS

Enelejemplo12tenemos4variantesdeesteefectoaplicadosaconseguiruna
letra capital destacada en un texto y un quinto caso para crear un texto
destacado, pero con un poco de imaginacin se nos pueden ocurrir muchas
[Link]:

[Link]
primerplano,laquepretendedarelefectodearrancarunbocadoala
[Link]
unadelasvariantesquevemosnoesas:lacajaenprimerplanotieneel
mismocolorqueladesegundoyeselbordedeladeprimerplanolaque
tieneelmismocolorqueelfondo.
Usamos float enlacajadeprimerplanoparasituarlay margin y padding
paraestablecerunaseparacinconeltextoprincipal.
Cuando lacaja donde est el texto principal lleva un borde usamos un
margendevalornegativoenlacajadeprimerplanoparasuperponerlaa
este y borrarlo. El margen negativo tendr el mismo tamao que el
borde.

Ejemplos13y14Tooltips
El ejemplo 13 nos muestra como hacer tooltips, ventanas emergentes que nos
muestraninformacinalpasarelratnporencimadealgnpuntodefinidode
nuestraweb.Enelcasodelejemplo13estasventanassemuestransiempreenel
mismopunto,enelpidelaweb.

En el ejemplo 14 se muestran en un punto dependiente del lugar por el que

pasamoselratnyqueactivasuvisualizacin.

Jos Mara Morales Vzquez Pgina 73

 HTML & CSS

Lasclavesdeestetipodediseossonestas:
Tantoeltextoquedisparaelefectocomoeltextoquesemostrarenel
tooltip aparecern en el HTML como contenidos de elementos
diferenciadosyanidados.Enelejemplo13usamosdosspan:

<p>En un <span class="nota">lugar de la Mancha<span class="tip">lugar: no

con el valor de sitio o paraje, sino como localidad y en especial
pequea entidad de poblacin, en nuestro caso situada concretamente en
el Campo de Montiel (I, 2, 47, y 7,93), a caballo de las actuales
provincias de Ciudad Real y Albacete. Seguramente por azar, la frase
coincide con el verso de un romance nuevo.</span></span>, de cuyo nombre

Yenel14unspandentrodeuna:

<a href="[Link] <span class="txtayuda">1.219

pginas<br/>0,5%</span></a>

Eltextoqueaparecerenlanotasemarcacomoinvisibleusandola
propiedaddisplay:
[Link] [Link] {
display: none;
font-size: .6em;
font-weight: normal;
color: black;
}

Al pasar el ratn sobre el elemento disparador (usaremos para ello la

pseudoclasehover)[Link]
[Link]
esecasoreescribimoslapropiedad display:block paraquesemuestrela
notayusamoslaspropiedadesadicionalesquecreamosoportunassegn
comoydondequeramosmostrardichanota.

Jos Mara Morales Vzquez Pgina 74

 HTML & CSS

[Link]:hover [Link]{
display: block;
/* La nota ir siempre en la parte inferior de la pantalla */
position: fixed;
width: 96%;
margin: 1%;
padding: 1%;
bottom: 0;
left: 0;
background: #cde;
border: 1px solid gray;
}

Enelcasoanteriorlanotairsiempreenlaparteinferiordelapantalla
(ejemplo13)yporesousamoslapropiedadposition:[Link]
marcaranellugardeaparicin.Enelejemplo14quebuscamosuna
posicindiferenteparacadanotausamosposition:absolute.

[Link] li a:hover [Link] {

display: block;
width: 10em;
position: absolute;
top: 0;
left: 100%;
margin: -1em 0 0 1em;
padding: 1em;
background: #cde;
border: 1px solid gray;
}

Ejemplos15y16Mens
De los tooltips a los mens slo hay un pequeo paso. De hecho el anterior
ejemplo14podraconsiderarseyaunpequeomenmuyprimitivo

Jos Mara Morales Vzquez Pgina 75

 HTML & CSS

Elejemplo16tieneademslapeculiaridaddequeapenenascambiandounas
lneasenelCSSpodemostransformarloenunmenhorizontaloverticalanuestro
[Link]:

Jos Mara Morales Vzquez Pgina 76

 HTML & CSS

Ejemplo17Esquinasredondeadas
[Link]
mssencilloconsisteenusarimgenesemplazadasdentrodeunacajamediante
la propiedad position con valor absolute. La caja debera de tener un borde
slidoylaimagendelaesquinadeberadeestarespecialmentepreparadapara
integrarseconelcolordelfondodelapginaydelacajay,adems,morder
el borde de la caja en la que se encuentra para hacer desaparecer
parcialmentelasesquinasdelbordecuadradohabitualdeesta.
Con HTML5 tenemos otros mecanismos ms fciles para hacer bordes
redondeadossimples,perosibuscamosefectosmsllamativos(comoalgunode
losqueacompaanaesteejemplo)tendremosqueseguirusandoestemtodou
otrosimilar:

Ejemplo18Sprites
La carga de una pgina web implica que cada elemento individual que la
compone se recuepera mediante una peticin al servidor. En pginas con
muchasimgenespequeasenlasquequeremosunacargaexcepcionalmente
rpidasesueleusaruntrucoparamejorarelrendimientoqueconsisteenagrupar
variasdeestasimgenesenunaslayseleccionarencadamomentoeltrozode
imagen que queremos ver mediante la propiedad backgroundposition. Se
conoceaestatcnicacomodeSpritesyenelsiguienteejemplopodemosver
comousarla.

Jos Mara Morales Vzquez Pgina 77

 HTML & CSS

ElejemploqueseacompaausadostiposdeSprites:unoconslotresimgenes
y otro, ms complejo, con seis en el que el desplazamiento de la propiedad
backgroundposition implica moverse tanto en el eje horizontal como en el
verticaldelaimagen.

Ejemplo19Solapas
El efecto de solapas, ampliamente usado en la web actual, es similar en su
construccin inicalal de un men. El truco consiste en mantenemos una caja
diferente por cada contenido y alternar entre su visualizacin o no, segn
corresponda,mediantelapropiedad display ylosvaloresdelamisma block o
none,respectivamente.

Jos Mara Morales Vzquez Pgina 78

 HTML & CSS

Ejemplos20y21Contorneos
Elcontorneodeimgenes,algotpicodelasrevistas,esunefectosencillopero
laborioso. La forma ms sencilla de hacerlo consiste, bsicamente, en
diseccionarlaimagenacontornearenrodajasdemsomenosalto(segnlo
finoquequeramosqueseaelefecto)yanchovariabley,simplemente,dejarque
lascajasdenuestrotextoseapoyenlateralmenteendichasimgenes,bienala
izquierda,aladerechaoaamboslados.

Jos Mara Morales Vzquez Pgina 79

 HTML & CSS

Jos Mara Morales Vzquez Pgina 80

 HTML & CSS

[Link]
Javascript es un lenguaje de programacin interpretado por el navegador y
creado por Netscape. Su funcin original era mejorar la funcionalidad de los
[Link]
lado del cliente de una aplicacin web para aportar a estas dinamismo e
interactividad con el usuario. Contina muy ligado al funcionamiento de los
[Link],lanuevaversindel
estndard HTML (HTML5) incluye multiud de nuevas libreras en Javascript que
amplianenormementelafuncionalidaddeunapginaweb.
El programa ms sencillo escrito en Javascript sera la siguiente versin del ya
clsicoHolaMundodondesehausadoparamayorsencillezelesqueletoque
usanlosdocumentosdeHTML5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" / >
<title>Hola Mundo en Javascript</title>
</head>
<body>
<script type="text/javascript" >
alert("Hola Mundo!");
</script>
</body>
</html>
El cdigo javascript es el contenido del elemento con la etiqueta script que
aparece en el ejemplo anterior. Es lo nico que aparece en el body, pero si
introducesotroselementoshtml(ttulos,prrafos,ocualquierotracosa)diferentes
antesy/o despusdelscript vers como laejecucindelmismo interrumpeel
[Link]
eldilogoydesaparezcaelmensaje,noproseguireldibujodelapgina.

[Link]
AligualqueocurraconlosCSS,elcdigoJavascriptsepuedesituardediferentes
[Link]
anterior:directamenteenelpuntodelcuerpodeldocumentodondequeremos
[Link]
queremos reutilizarlas debemos de crear funciones y emplazarlas en una
ubicacindiferente.
8.1.1Funciones
Unafuncinesunapiezadecdigoquepuedeinvocarsedesdedistintospuntos
y en diferentes momentos. El cdigo que vimos en el ejemplo anterior slo se
ejecutacuandoelnavegadorestdibujandolapginayenelmomentoenque
[Link]:

Jos Mara Morales Vzquez Pgina 81

 HTML & CSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Hola Mundo en Javascript</title>
<script language="javascript">
function holamundo(){
alert(Hola mundo!);
}
</script>
</head>
<body>
<p>texto 1</p>
<script type="text/javascript" >
holamundo();
</script>
<p>texto 2</p>
<script type="text/javascript" >
holamundo();
</script>
<p>texto 3</p>
</body>
</html>
Hemos creado una funcin que hace exactamente lo mismo que antes y la
[Link]
[Link]
setratadeunejemploenelquelainvocacinalafuncinocupalomismoque
lafuncinensi,peroimaginmosquenoesasyquesetratandevariasdecenas
[Link]?
Como puedes observar, en algunos puntos se usa el argumento
language="javascript" yenotros type="text/javascript".Elnavegadorentender
cualquieradeellos(lamayora,incluso,loentendersinoponesninguno!)pero
locorrectoenlasltimasversionesdeHTMLserausarelargumentotype.
Lasfuncionestienen,adems,otraparticularidadyeslaposibilidaddequecada
ejecucin sea diferente gracias a la personalizacin que permite el paso de
[Link]:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Hola Mundo en Javascript</title>
<script language="javascript">
function holamundo(texto){
alert(texto);
}
</script>

Jos Mara Morales Vzquez Pgina 82

 HTML & CSS

</head>
<body>
<p>texto 1</p>
<script type="text/javascript" >
holamundo(Hola Mundo!);
</script>
<p>texto 2</p>
<script type="text/javascript" >
holamundo(He dicho ya eso de Hola Mundo?);
</script>
<p>texto 3</p>
</body>
</html>
CuandoundocumentoHTMLnecesitademuchasfuncionesenjavascriptoestas
son utilizadas desde diferentes pginas html lo ms cmodo, al igual que
hacamos con los css, es sacarlas a un fichero externo de forma que el
documento html slo queden las llamadas a las mismas. Veamos una ltima
versindelejemploanterior:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Hola Mundo en Javascript</title>
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
<p>texto 1</p>
<script type="text/javascript" >
holamundo(Hola Mundo!);
</script>
<p>texto 2</p>
<script type="text/javascript" >
holamundo(He dicho ya eso de Hola Mundo?);
</script>
<p>texto 3</p>
</body>
</html>
[Link]:
function holamundo(texto){
alert(texto);
}

[Link]
[Link]
deltendremosdiferenteselementosporcadaobjetoquequeramosmostraren
[Link]:

Jos Mara Morales Vzquez Pgina 83

 HTML & CSS

<form name="form2ASI" action="[Link]">

<p><label for=nombre>Nombre:</label>
<input type="text" id=nombre name="cajanombre" /></p>
<p><input type="submit" value="Enviar" name="botonenv"
/></p>
</form>

Elelementoformtieneunnicoargumentoimprescindible(action)queindicalo
[Link]
que cargue la pgina [Link] que en realidad no hace nada y slo
[Link]
quevalidaralosdatos,aunapginaphpquelosproceseenelladodelservidor
o,muchomsrudimentario,enviarlosresultadosporcorreoelectrnicoconun
mailto (por ejemplo action="[Link] En este ltimo
casodeberadeaparecertambinelargumento method ysuvalordeberade
serpost(loveremosacontinuacin).
Elargumentomethodindicalaformaenqueelformularioenvalosdatosqueel
[Link]:[Link]
defectotomaelvalorget.
ElmtodogetenvalosdatosdelformularioconcatenadosalaURLdelapgina.
Los limita a 100 caracteres y es un mtodo muy til cuando, por ejemplo,
[Link]
URLqueobtendramosdespusdeescribirPepeypulsarelbotndeenviarenel
ejemploanteriordeberadeseralgosimilaraesto:
[Link]
Elmtodo postnotienelmiteensuextensinyelresultadonoesvisibleparael
usuariopero,cuidado,esonoquieredecirqueseaunmtodoseguroparaenviar
[Link]
rellenarlosdatosdelformularioseenviarenclaroancuandoconelmtodo
postnopodamosverlosdirectamente.
En los siguientes puntos iremos viendo uno a uno los distintos elementos que
puedenformarpartedeunformularioyalgunosdesusargumentosmsusados.
Lamayorpartedeellosusanlaetiquetainputeindicaneltipodeobjetodeque
setratamedianteelvalordelargumentotype.
[Link](type=text)
Comosunombreindica,sirveparaintroducirtextoconlarestriccindequeeste
nopuedetenermsdeunalnea.
<input type="text" name="nombre" size="20" maxlength="40"
value= "Escribe aqu tu nombre" />
El argumento size indica el tamao en caracteres de la caja mientras que
maxlength indica la longitud mxima que puede introducirse. value sirve para
introducir un valor por defecto que aparecer al cargar la pgina (en caso

Jos Mara Morales Vzquez Pgina 84

 HTML & CSS

contrario aparecer en blanco). Cuando no queremos queel usuario edite el

campousaremoselparmetro readonly concualquiervalor(recuerdaqueen
XHTMLnoestpermitidolaminimizacindeatributosoatributossinvalor,asque
lo normal es poner readonly=yes o readonly=readonly aunque si ponemos
readonly=no o solamente readonly tambin deshabilitar la escritura en el
campo).Adems,puedenaparecerlosargumentos class e id quenosserviran
[Link],adems,paraasociarla
cajadetextoconunaetiqueta(vermsadelante).
8.2.2Cajadeedicindecontraseas(type=password)
Similaralaanteriorperoenestecasoloqueescribamossobreellaaparecer
camufladomediantepuntos,asteriscosoalgosimilar(segnelnavegador).Los
argumentosquepodemosusartambinsonlosmismosqueenelanterior.
<input type="password" name="pwd" size="12" maxlength="12" />

[Link](label)
Elelementolabelsirveparaasociaruncampodetextoconunobjetodeedicin
de forma que, por ejemplo, si el usuario pulsa con el ratn sobre la etiqueta
asociadaauncampodeedicindetextoelcursosapareceraenmodoedicin
[Link],
portanto,deunaformadeextenderlasuperficiededichosobjetosdeformaque
resultemscmodolacumplimentacindelosformularios.
Tenemos dos formasdiferentesderealizarestaasociacin. La primeradeellas
consistesimplementeenanidarelelementodeedicindentrodelcontenidodel
elementolabel:
<label>Direccin:<br/><input type="text" name="direccion"
size="80" maxlength="120" /></label>
Elsegundomtodoconsisteenidentificarambosobjetosmedianteelvalordel
argumento for delelemento label yelvalordelargumento id delelementode
edicin:
<label for=txtdir>Direccin:</label><br/><input type="text"
name="direccion" size="80" maxlength="120" id=txtdir />

ATENCIN. Siusamoselprimerodelosmtodoshayquetenermuchocuidado
porquelosestilosqueapliquemosalelemento label seextenderantambinal
objetodeedicin.

8.2.4RadioButtons(type=radio)
Losradiobuttonssonloscaractersticosobjetosredondosparaelegirentrevarias
opciones alternativas pero con la restriccin de que slo puede seleccionarse
unodeellos,deformaquemarcarcualquieraimplicaqueseeliminalaseleccin
[Link],deberadehaberuna

Jos Mara Morales Vzquez Pgina 85

 HTML & CSS

eleccinobligatoria.
<input type="radio" name="sexo" value="hombre"
checked="checked" /> Hombre<br/>
<input type="radio" name="sexo" value="mujer" /> Mujer
Puesto que en un mismo formulario podemos tener diferentes grupos de radio
buttons,[Link]
argumentocheckedsirveparaseleccionarlaopcinpordefectoqueaparecer
[Link],podemosusarelargumento disabled si
queremosquealgunodeellosnoseaseleccionable.

ATENCIN. Cuidadoconlaspropiedadesqueaparentementefuncionanpero
[Link](oenuncheckbox
que veremos a continuacin), este cambia de aspecto pero puede seguir
[Link].

El valor del argumento value es lo que se transmitir en las respuesta del

formulariosieseelementoseencuentraseleccionado.
8.2.5Checkboxes(type=checkbox)
[Link]
en dos aspectos: visualmenteson cuadrados y desde el punto de vistalgico
deberandepermitir,siaslodeseamos,laeleccindemsdeunaopcindentro
[Link],deberadepermitirnosnoelegirninguno
deellos.
<input type="checkbox" name="vehiculo" value="motocicleta"
disabled="disabled" /> Motocicleta<br/>
<input type="checkbox" name="vehiculo" value="moto"
checked="checked" /> Moto<br/>
<input type="checkbox" name="vehiculo" value="coche" />
Coche<br/>
<input type="checkbox" name="vehiculo" value="camin" />
Camin<br/>
<input type="checkbox" name="vehiculo" value="tractor" />
Tractor</p>
Todolodichoencuantoalosargumentosenlosradioesvlidotambinpara
estos.
[Link]
Podemosagruparvisualmentediferentesobjetosdenuestroformulariomediante
elelementofieldset:
<fieldset>
<legend>Informacin personal</legend>
...
</fieldset>

Jos Mara Morales Vzquez Pgina 86

 HTML & CSS

Esto,pordefecto,[Link]
elementolegendsirveparaponerttuloadichorecuadro.
8.2.7Cajadeedicindetextodemltipleslneas
Elelementotextareanoscreaunacajadeedicinqueadmitemsdeunalnea.
Lasdimensionesinicialesdelamismaseasignanmediantelosargumentosrowsy
cols.
<textarea name="comentarios" rows="8" cols="50" >Escribe tus
comentarios...</textarea>
No existe forma de limitar desde HTML el nmero de caracteres mximo que
admitelacaja(estosecontrolahabitualmentemediantejavascript).Elcontenido
delelemento,siexiste,serelvalorinicialquecontengalacajadeedicin.
Todoslosnavegadoresmodernospermitencambiareltamaodeestascajasde
texto visualmente mediante un control que aparece en su esquina inferior
[Link],siaslodeseamos,esenlosCSS.

8.2.8Cajadeseleccindeficheros
Nosabreunaventanadedilogo(cuyoaspectodependedelnavegadoryel
sistemaoperativo)quenospermiteseleccionarunficherodenuestrodiscoduro
<label>Fotografa:<br/><input type="file"
name="fichero"/></label>
[Link]
anosotrosposteriormentemediantejavascriptoenelservidorcuandoenviemos
losdatos.
8.2.9Cajasdeseleccin(ComboboxesyListboxes)
Existendoscajasdeseleccintpicasenentornosgrficos:loscomboboxesson
cajascondistintasopcionesenlasqueslopodemosseleccionarunadeellas.
Adems,aunquepodemosdesplegarlaenelmomentodelaseleccin,cuando
elegimos la lista se cierra y slo permanece visible nuestra eleccin. Adems,
debera de ser obligatorio hacer al menos una eleccin. Los listboxes, por el
contrario, nos suelen permitir elegir ms de una opcin simultaneamente (o
ninguna)ysiempresuelenestartotaloparcialmenteabiertos.
EnHTMLambosseimplementamedianteelelementoselectysonlosargumentos
que usemos los que hacen que se comporte de una u otra forma. Veamos
inicialmenteuncombobox:
<select name="oficina" >
<option>Madrid</option>
<option>Sevilla</option>
<option selected="selected" >Alcorcn</option>
<option>Lisboa</option>
<option>Burdeos</option>
</select>
Unlistboxseradeestaforma:

Jos Mara Morales Vzquez Pgina 87

 HTML & CSS

<select name="aficiones" multiple="multiple" size="4" >

<option>Toros</option>
<option>Cante</option>
<option>Ftbol</option>
<option>Juegos de Rol</option>
<option>Ponerse tibio de beber cocacola</option>
<option>Dormir en el sof</option>
</select>
Comovemos,ladiferencialamarcandosargumentos: size queindicacuantos
elementosdelalistasernvisiblessimultaneamente(pordefectoesslo1,quees
comodeberadecomportarseuncombobox)y multiple quees elargumento
[Link]
argumentodisabledyavistoenotroscontrolesanteriores.
En las opciones se usa el argumento selected para indicar si queremos que
algunadelasopcionesaparezcainicialmenteseleccionada.
Tantoenunocomoenotropodemosusarelelementooptgroupparaagruparlas
distintasopcionesencategoras:
<select name="oficina">
<optgroup label="En Espaa">
<option>Madrid</option>
<option>Sevilla</option>
<option selected="selected" >Alcorcn</option>
</optgroup>
<optgroup label="En el extranjero">
<option>Lisboa</option>
<option>Burdeos</option>
</optgroup>
</select>

8.2.10Botones
Todoformulariodeberadetener,almenos,unbotnquesirvaparaindicarque
yahemosterminadodecumplimentarloyquedapasoalprocesadoy/oenvo
[Link]
argumento type y el valor submit y el comportamiento normal al pulsarlo es
invocar el enlace que hemos puesto como valor del argumento action del
[Link],tenemosdosformasdeimplementarestebotn:
<input type="submit" value="Enviar" />
<button type="submit">Enviar</button>
[Link]
que el texto que aparece en el primero es el que aparece como valor del
argumento value (o un texto por defecto que pone el navegador si ese
argumentonoaparece)yque,portanto,nopodemosaplicarleestilosmientras
que en el segundo botn el texto es el contenido del elemento y podemos
aplicarestiloscontotallibertado,incluso,ponerunaimagen:

Jos Mara Morales Vzquez Pgina 88

 HTML & CSS

<button type="submit" ><img src="[Link]" alt="Ok" /></button>

Ambostiposdebotonesadmitenelargumentodisabled.
El segundo tipo de botones caractersticos de un formulario es uno que nos
permitelimpiarloydejartodoslosvaloresdelmismocomosilapginasehubiera
[Link]
aresetypodemos,igualmente,[Link]
antessirvetambinenestecaso:
<input type="reset" />
<button type="reset" ><img src="[Link]" alt="Limpiar"
/></button>
Tenemos, adems, la posibilidad de introducir en nuestro formulario botones
genricos sin una accin previamente definida que posteriormente nosotros le
asignaremosusandocdigojavascript:
<input type="image" src="[Link]" />
<input type="button" value="Botn" /><br/>
<button type="button">Botn</button>
Elprimeronoespropiamenteunbotn,sinounaimagenperoalaquetambin
se le asocia por defecto las mismas propiedades que a un botn con el
[Link]
accinasociadaalosqueposteriormenteselespuedeaplicaralgunausando
cdigojavascript.
8.2.11.NuevoselementosenHTML5
Los elementos aqu presentados son, por as decirlo, los clsicos que pueden
[Link]
HTML5sonlosformularios apareciendomuchos elementos tiles ymuyvistosos.
Puedesecharleunvistazoenelapartadoenelquesetrataestanuevaversin
dellenguajealfinaldeestedocumento.

[Link]
Con algunas limitaciones, es posible cambiar el estilo y las propiedades de
[Link],pero
como ejemplo debe de valer la diferencia de aspecto entre los siguientes
formulariosalosqueslolosseparaunahojadeestilosdeapenas30lneas(y
algnelementoadicionalqueusaremosposteriormenteparalasvalidaciones):

Jos Mara Morales Vzquez Pgina 89

 HTML & CSS

Jos Mara Morales Vzquez Pgina 90

 HTML & CSS

[Link]
Para entender correctamente la forma de manipular un formulario mediante
Javascript tenemos que entender previamente los principios bsicos de la
programacinvisualorientadaaeventos.
[Link],eventosypropiedades
Sinmeternosendemasiadaprofundidad,diremosqueloseventossonacciones
queocurrensobreloselementosdenuestroformulario,generalmentedebidoala
accindelusuario:rellenarunacajadeedicindetexto,pulsarconelratn,etc.
Los eventos vienen predeterminados segn el elemento del formulario y no
podemosaadirningunonuevo.
[Link]
algunosmtodospordefectoquevienenpredefinidosconlosformulariospero
nosotrossiempretendremoslaposibilidaddecrearotrosnuevosomodificarlosya
existentes.
Porltimo,laspropiedadesson,porreglageneral(aunquenosiempre),losvalores
delosargumentosconqueestnconstruidosloselementosdelformularioylos
valores de los mismos introducidos o elegidos por el usuario y que nosotros
podremosmanipulardesdenuestrosmtodos.
[Link]
ElelementoformrespondeadoseventosdenominadosonSubmityonResetyque
se corresponden con la pulsacin de los botones de submit y/o reset
respectivamente. Por defecto los mtodos que se invocan en cada uno de
ambos casos reciben los nombres de submit y reset, pero nosotros podemos
introducir nuestros propios mtodos. Esto lo hacemos introduciendo nuevos
[Link],porejemplo:
<form name="form2ASI" onSubmit="alert('Enviando el
formulario')" onReset="alert('Limpiando el formulario')"
method="post" action="[Link]">

</form>

IMPORTANTE: como ves, en el interior de las funciones alert se usan comillas

[Link]
usanparaelvalordelargumento.

Hemos introducido sendas llamadas a alert, pero tambin podramos haber

llamadofuncionesmselaboradasconstruidaspornosotros.
[Link]
Losbotones,yaseandeltipoquesean,tienenalmenostreseventos: onClick,
onFocus(cuandoobtienenel'foco'delaaplicacin)yonBlur(cuandolopierden)
peroporreglageneralelquenosinteresausarescasisiempre onClick,evento

Jos Mara Morales Vzquez Pgina 91

 HTML & CSS

quesegeneracuandolopulsamos.
<input type="submit" value="Enviar" onClick="enviar()"
name="btnenv" />
<input type="button" value="Enviar" name="btnenv"
onClick="enviar()" />
Estosdosbotonestienencomportamientosdiferentesyesmuyimportantequelos
distingamos. El primero, puesto que es del tipo submit, cuando sea pulsado
ejecutarlafuncinenviar() yluegotambininvocarelevento submit() (salvo
queloimpidamosdesdedentrodelafuncin). Elsegundoejecutarlafuncin
enviar() pero no ejecutar el evento submit() (salvo que nosotros lo hagamos
expresamente). La diferencia es importante cuando queremos hacer una
validacinpreviadelformulario.
[Link],Modelodeobjetosdeldocumento
ElllamadoDOMeslainterfazquenosvaapermitirinteractuarconlatercerapata
queannohemosmencionado:[Link],nimsnimenos,de
una nomenclatura especial (que a los programadores habituados a la
orientacin a objetos le resultar familiar) que nos va a permitir identificar los
elementosdelformularioysuspropiedadesypoderleerlasymodificarlas.
ElDOMnosvaapermitirdarlenombrealosobjetosdelformulariodeformamuy
[Link]:
<input type="submit" value="Enviar" onClick="enviar()"
name="botonenv" disabled="disabled" />
<input type="reset" value="Limpiar"
onClick="limpiar([Link])" />
Hemosvistoyaquealasfuncionesjavascriptselespuedenpasarparmetros.
[Link]
[Link]:
function limpiar(formulario){
alert('Haz pulsado el botn de limpiar...');
[Link]=true;
}
Siquisieramoshacerlareferenciaalformulariodesdeeleventoform,usaramos
simplementethis:
<form name="form2ASI" onSubmit=enviar(this)
action="[Link]">
...
</form>
Apartirdelparametroquelehemosenviadoalafuncinidentificamosalbotn
deenviaratravsdelvalordesuargumento name yalapropiedad disabled
mediante su nombre. De esta forma conseguimos variar su valor y hacer que
cuandoelformularioestlimpioelbotndeEnviaraparezcadeshabilitado.
[Link],

Jos Mara Morales Vzquez Pgina 92

 HTML & CSS

document hacereferenciaalapginawebensiy [Link] nos

dice el nmero de formularios que hay en la pgina. Cada uno de estos
formularios puede referenciarse mediante la estructura [Link][x],
siendo x [Link] x valdra0,
paraelsegundo1,etc.
El siguiente cdigo nos pintara dos botones. Al pulsar el primero nos dira el
nmerodeformulariosdelapginayalpulsarelsegundoelnombredeeste(el
valordelargumentoname):
<form name="form2ASI" action="[Link]">
<input type="button" value="Botn 1" onClick="alert('En
esta pgina hay ' + [Link] + '
formulario')" />
<input type="button" value="Botn 2" onClick="alert('El
nombre del formulario es ' + [Link][0].name)" />
</form>

[Link]
Laestrategiahabitualaseguiralahoradevalidadunformulariosigueunodelos
dospatronessiguientes:
Validamosunoaunoloselementosdelformulariomientrasqueserellenan
(respondiendoaloseventosonKeyDown,onKeyUp,onKeyPress,onChange
y/oonBlur)
Validamostodosloselementosdelformulariounavezquesehapulsadoel
botndeenviarrespondiendoaleventoonSubmit
Avecessepuedeusarunaestrategiacombinadadeambos.
[Link]
validacin consiste slo en comprobar que un campo no se ha quedado sin
[Link]:
<form name="form2ASI" onSubmit="return enviar(this)"
action="[Link]">
<p><label>Nombre: <input type="text" name="cajanombre"
/></label></p>
<p><input type="submit" value="Enviar" name="botonenv" />
<input type="reset" value="Limpiar" /></p>
</form>

Lafuncinjavascriptquerealizalavalidacinseraalgoas:
function enviar(formulario){
alert('Haz pulsado el botn de enviar...');
if([Link] == 0){
alert('No puedes dejar este campo en blanco');
validacionOK = false;

Jos Mara Morales Vzquez Pgina 93

 HTML & CSS

}
else{
alert('Haz escrito: '+ [Link]);
validacionOK = true;
}
return validacionOK;
}

Laotraestrategia,msdinmicaperotambinmscomplicada,consistiraen
validar uno a uno los campos a rellenar y no dejar que el formulario se enve
(deshabilitandoinclusoelbotndeEnviar)hastaquenoestntodoscorrectos.
[Link]:
<form name="form2ASI" action="[Link]">
<p><label>Nombre: <input type="text"
onBlur="validar([Link])" name="cajanombre"
/></label></p>
<p><input type="submit" value="Enviar" onClick="enviar()"
name="botonenv" disabled="disabled" /> <input
type="reset" value="Limpiar" onClick="limpiar([Link])"
/></p>
</form>
YluegoelcdigoJavascript:
function validar(formulario){
if([Link] == 0){
alert('No puedes dejar este campo en blanco');
[Link]=true;
[Link]="No puedes Enviarlo
as!";
}
else{
alert('Haz escrito: ' +
[Link]);
[Link]=false;
[Link]="Enviar";
}
}

function enviar(){
alert('Haz pulsado el botn de enviar...');
}

function limpiar(formulario){
alert('Haz pulsado el botn de limpiar...');
[Link]=true;
}

[Link]

Jos Mara Morales Vzquez Pgina 94

 HTML & CSS

[Link]:
<form name="form2ASI" onSubmit="return enviar(this)"
action="[Link]">
<p><label>Telfono: <input type="text" name="cajatlf"
/></label></p>
<p><input type="submit" value="Enviar" name="botonenv" />
<input type="reset" value="Limpiar" /></p>
</form>

Enelcdigojavascriptvalidaremosporunladoquelalongitudseaexactamente
de siete dgitos y por otro que sean todos numros y no letras o caracteres
[Link]:
parseInt que convierte una cadena de texto a su valor numrico entero (el
contenidodelosformulariossiempreseleecomotextoaunquesetratedecifras)
ylafuncinisNANquedevuelveun0sielargumentoquerecibenoesunnmero
correcto.
function enviar(formulario){
alert('Haz pulsado el botn de enviar...');
if([Link] != 9 ||
isNAN(parseInt([Link])) == false){
alert('No es un telfono correcto');
validacionOK = false;
}
else{
alert('Haz escrito: ' + [Link]);
validacionOK = true;
}
return validacionOK;
}
Lgicamente se puede complicar mucho ms y hacer una validacin ms
estricta: comprobar que empiece por 9, 6 o 7, permitir el uso de prefijos
internacionales,etc.
Enlosejemplosqueacompaanaestetextotienesalgnejemploms, como
porejemplocomovalidarquelacontrasearepetidadosvecescoincidaola
longitudmximadeuntextarea(ejemplo5)ocomocambiarelcontenidodeun
listbox en funcin de la seleccin hecha en un combobox y como pasar
elementosentredoslistboxes(ejemplo6).
[Link]
A continuacin tienes una tabla con los eventos que podemos usar en un
formulario,loselementosalosqueafectanyunabrevedescripcindelosmismos.

Jos Mara Morales Vzquez Pgina 95

 HTML & CSS

Evento Descripcin Elementos

button, checkbox,
Cuando un elemento pierde
onBlur password, radio, select,
el foco
text, textarea, file
Cuando un elemento pierde file, select, text,
onChange el foco y su valor se ha password, textarea, radio,
modificado checkbox
Cuando se pulsa sobre el
button, checkbox, radio,
onClick elemento con el botn
text, password, textarea
izquierdo del ratn
button, checkbox, file,
Cuando el elemento
onFocus password, radio, select,
adquiere el foco
text, textarea
Cuando el elemento tiene
onKeyDown el foco y se pulsa una text, password, textarea
tecla
Cuando el elemento tiene
onKeyPress el foco y se mantiene text, password, textarea
pulsada una tecla
Cuando el elemento tiene
onKeyUp el foco y se deja de text, password, textarea
pulsar una tecla
Cuando se mueve el ratn
onMouseOut fuera de un determinado text, password, textarea
objeto
Cuando el ratn entra en
onMouseOver text, password, textarea
un determinado objeto
Cuando se pulsa el botn
onReset form
de reset del formulario
Cuando se selecciona un
onSelect text, password,textarea
texto con el ratn
Cuando se pulsa el botn
onSubmit form
de submit del formulario

Laspropiedadesfundamentalesquepodemosalteraroconsultarmediante
cdigojavascriptdecadaunodeloselementosdeunformulariosonlas
siguientes:

Jos Mara Morales Vzquez Pgina 96

 HTML & CSS

Elemento Propiedades
form name, action, method
button name, value, disabled
text y
name, value, disabled, readonly, size, length, maxlength
password
name, value, disabled, readonly, size, length,
textarea
maxlength, cols, rows
radio y
name, value, disabled, checked, length
checkbox
select name, size, disabled, multiple, type
options value, text
file name, size, disabled

[Link]
AunqueyahemosdichoqueJavascript nacicomounaformadevalidarde
formarpidalosformularios,suusohoytransciendedeestoypodemoshaceruna
pgina que utilice javascript al margen de los formularios o no slo con ellos.
Veremosalgunosejemplossencillosdeusoenesteltimopunto
[Link]
Hemos usado durante todo el captulo la funcin alert que nos muestra una
[Link]
hastaqueelusuarionopulsaelnicobotnqueapareceenella.
PeroJavascriptdisponedeotrosdostiposdeventanasmstilessegnparaque
[Link].
Laventanaconfirmmuestradosbotones(OKyCancelar)ydevuelvelaeleccin
delusuarioparaqueactuemosenconsecuenciacomounavariablebooleana:
truesihemospulsadoOKyfalsesihemospulsadoCancel:
respuesta = confirm("Pulsa un botn");
if (respuesta == true){
alert("Haz pulsado el botn de OK");
}
else{
alert("Haz pulsado el botn de Cancel");
}
Laventanapromptnosmuestraunacajadetextoydevuelveelvalorquehemos
[Link],muestradosbotonesydevuelveelvalor null sihemos
salidopulsandoelbotndeCancelarenlugardeldeOK:
texto = prompt("Escribe tu nombre, por favor");
if(texto == null){
alert("Haz pulsado el botn de cancelar");

Jos Mara Morales Vzquez Pgina 97

 HTML & CSS

}
else{
if([Link]!=0){
alert("Hola " + texto + ", buenos das \n Cmo
ests?");
}
else{
alert("Buenos das aunque no quieras decirme tu
nombre... :-(");
}
}

[Link]
Loseventosquepodemoscapturarenunapginawebyasociarlosaunmtodo
javascriptyquenotienenrelacindirectaconloselementosdeunformularioson
estos:
Evento Descripcin
onAbort Cuando se aborta la carga de una imagen
Cuando se hace doble click con el botn izquierdo
onDblClick
del ratn
Cuando la pgina termina de cargarse
onLoad
completamente
onMouseDown Cuando se pulsa un botn cualquiera del ratn
onMosueMove Cuando se mueve el ratn
onMove Se mueve la ventana
onResize Se cambia el tamao de la ventana

Adems, alguno de los eventos que se usan en los formularios pueden tener
tambinaplicacinfueradeellos.
Veamosuntrozodecdigoconejemplossencillosdeaplicacin:
<body onLoad="alert('La pgina se ha cargado completamente');"
onResize="alert('Haz cambiado el tamao de la pgina');">
<h1 onMouseOver="alert('Haz pasado el ratn sobre el
titular');" >Titular de la pgina</h1>
<p onClick="alert('Haz hecho click en el primer
prrafo');" >Primer prrafo de texto de la pgina</p>
<p onDblClick="alert('Haz hecho doble click en el primer
prrafo');" >Segundo prrafo de texto de la pgina</p>
</body>

Enelejemplo8queacompaaaestetextotienesunejemplomscomplicado
dondesevecomocambiarelestiloCSSdeunelementodelapginaatravsde

Jos Mara Morales Vzquez Pgina 98

 HTML & CSS

unmtodoqueselanzaalcapturarelenventodehacerClickenunratn.
[Link]
ElmodeloDOMnosproporcionadosobjetosdenominados document y window
con una amplia coleccin de propiedades y atributos que nos permiten
interactuar de forma fcil con caractersticas interesantes del navegador y el
documentoHTML.
Porejemplo,elobjetowindownospermiteobtenerlasdimensionesenpxelesde
la superficie til del navegador. La siguiente funcin nos muestra estas
dimensionesenunaventanadealerta:
function muestraDimensiones(){
alert("Ancho: " + [Link] + " pxeles.\nAlto: "
+ [Link] + " pxeles.");
}
Tienesunabuenareferenciadelasposibilidadesqueteofreceelobjetowindow
aqu:
[Link]
La principal utilidad del objeto document es que nos permite obtener una
referencia acualquier elemento HTML de la pgina para interactuar con l a
travsdelvalordesuatributo id que,comoyasabes,[Link]
hacemosmediantelafuncingetElementById(). Lasiguientefuncinobtienela
referenciadeunobjetoHTMLcuyovalordelatributoides caja1 ymodificasu
estilo por uno llamado estilo2. Dicho estilo debera de existir en los CSS del
documentoyseraplicablealobjetoencuestin(puedesconsultarelejemplo8
queacompaaaestedocumentoparaverelcdigocompleto)
function cambiar_estilo(){
objeto = [Link]("caja1");
[Link]="estilo2";
}
Puedo,incluso,cambiarelcontenidodeunelementoatravsdelapropiedad
innerHTML:
function cambiaTitular1(titular){
[Link]="Nuevo Texto para el Titular";
}
Paravermspropiedadesdelobjetodocumentpuedesconsultarestapgina:
[Link]
Ysiquieresampliarconocimientosovermsejemplossobrecualquierotracosa
de javascript, aqu tienes una completa referencia de todas las funciones
disponibles:
[Link]

Jos Mara Morales Vzquez Pgina 99

 HTML & CSS

9.HTML5
[Link]
anenfasebetaexperimentaly,portanto,hayquetratarconmuchocuidadola
introduccin de sus nuevas caractersticas puesto que muchos navegadores,
sobretodosisonrelativamenteantiguos,nocontemplananestoscambiosono
[Link],porprimeravez,
ladefinicindeHTMLyXHTMLparaestanuevaversin(HTML5yXHTML5)sehan
desarrolladoenparalelo.XHTML5es,bsicamente,HTML5conlasrestriccionesde
sintaxisqueyaplanteamoscuandopresentamosXHTML1

9.1.ESTRUCTURADEUNDOCUMENTOHTML5OXHTML5
Laestructuradeundocumentoconhtml5oxhtml5esmuchomssencillaqueen
versionesanterioresy,adems,idnticaparaambos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="[Link]" media="all" />
<title>Html5</title>
</head>
<body>

</body>
</html>

Observaqueyanoesnecesariousarelargumentotypeenlasetiquetaslinkque
declaranelusodehojasdeestilo(tampocoenlasquedeclaranunficherocon
funcionesjavascript).TampocoexistendiferenciasenlosargumentosentreHTML5
y XHTML5. De hecho, podemos escribir documentos denominados polglotas
quepuedanserinterpretadoscomounoocomootroindistintamenteysinningn
problemaobservandolassiguientescondiciones:

ElDOCTYPEnoesobligatorioenXHTMLperosienHTML,asquedebemos
[Link],HTMLnoessensibleamaysculasominsculaspero
XHTMLsi,asquehayqueponerlotalycomoapareceenelejemplode
aquarriba.
DebemosdeusarlasintaxisdeHTML5,yobservartodaslasrestriccionesde
XHTML5queyahabamosvisto,asaber:
Loselementosdebendecerrarsesiempre
Loselementossincontenidodebendeusarlasintaxisdeautocerrado
siempre.
Laaperturaycierredeloselementosanidadosnodebedesolaparse.
Losvaloresdelosatributosdebendeirsiempreentrecomillassimples
odobles
Los nombres de etiquetas y atributos deben de ir siempre en
minsculas

Jos Mara Morales Vzquez Pgina 100

 HTML & CSS

Noestpermitidousarunatributosinvalor

[Link]
LoprimeroaresearenHTML5,unlenguajedemarcasbasadoenunconjuntode
etiquetas,[Link]
25nuevasetiquetas,hayligeroscambiosen7delasantiguasydesaparecen16.
Etiquetaseliminadas
Lasetiquetaseliminadas,delascualesnosotrosnodeberamosdepreocuparnos
demasiadoporqueunaslashemosevitadoexpresamentedesdeelprincipiode
estecursoyotrasnisiquieralashemospresentado,sonlassiguientes:
acronym,applet,basefont,big,center,dir,font,frame,frameset,
isindex,noframes,s,strike,tt,u,xmp
Nuevasetiquetasparalaorganizacindeldocumento.
Dentro de las nuevas etiquetas, el primer grupo que nos interesa ver es el de
aquellas que introducen una mayor informacin semntica a la estructura del
[Link] header,nav,footer,aside,section y [Link]
etiquetas que identifican las secciones ms habituales que existen en la gran
mayora de las pginas web y que hasta ahora identificbamos usando la
etiquetadivenfuncinconalgnidoclass,porejempo<divid=footer>o<div
class=article>.
Estasetiquetasnohacennadaespecialynointroducenningunainformacinde
estilo. Su nico propsito es proporcionar informacin semntica a nuestras
pginasdecara,sobretodo,afacilitarsulecturaylavaloracindelcontenido
[Link],porejemplo,enunapginawebquese
tituleCarnicerasdecalidadenSevillayotraencuyopidepginaaparezca
elnombredesuautor:[Link]
ambasalmismonivelcuandoalguienrealiceunabsquedadecarnicerasen
[Link],alyalrestodebuscadores,unaforma
claradevalorarelcontenidodeunawebsegndondesepresentecadatexto.
SolventandolosproblemasdeversionesantiguasdeInternetExplorer
CuandocontemplamoselusodeversionesantiguasdelMicrosoftInternetExplorer
podemostenerunproblemaconestas [Link] denavegadoresnos
permiteinventarnosetiquetasyaplicarlesestilos,peroExplorersinoreconoce
[Link]
nos permita aplicar estilos a la etiqueta header, aunque no la conozca, pero
Explorer no. Para solucionar esto usamos dos recursos: la posibilidad de incluir
comentarioscondicionalesenInternetExplorerylaslibrerashtml5shiv.
Loscomentarioscondicionalestienenestaforma:
<!--[if IE]>
<p>Esto slo se ver en un Internet Explorer</p>
<![endif]-->

Jos Mara Morales Vzquez Pgina 101

 HTML & CSS

Esfcilverque,segnlasintaxisHTMLqueconocemosesoesuncomentarioyno
se ver, pero Explorer lo reconoce como una secuencia especial y si nos lo
mostrar. Tenemos otras formas ms complejas para detectar una versin
concretadeExplorer,ounamayoromenorqueunadada:
<!--[if IE 6]>
<p>Slo en Explorer 6</p>
<![endif]-->
<!--[if lt IE 9]>
<p>Slo en versiones de Explorer menores a la 9</p>
<![endif]-->
<!--[if lte IE 7]>
<p>Slo en versiones de Explorer menores o iguales a la 7</p>
<![endif]-->
<!--[if gt IE 6]>
<p>Slo en versiones de Explorer mayores a la 6</p>
<![endif]-->
<!--[if gt IE 8]>
<p>Slo en versiones de Explorer mayores o iguales a la 8</p>
<![endif]-->

O,incluso,darleotravueltadetuercaalasintaxisymostrarcdigoqueslose
verennavegadoresquenoseanelInternetExplorer:
<!--[if !IE]> -->
<p>Esto slo se ver si no ests con un Explorer</p>
<!-- <![endif]-->
DeestaformayapodemosmostrarunasetiquetasenExploreryotrasenotros
navegadoresdeformarelativamentefcil,peroexisteunmtodomsrpidoy
limpio de solucionar el problema de las nuevas etiquetas de organizacin: la
librerahtml5shivnospermitenqueelExplorerapliqueestilosaetiquetasqueno
[Link]
weby,siqueremos,podemosincluirlasconuncomentariocondicionalcomolos
vistosparaqueslosecarguencuandorealmentelasnecesitamos:
<!--[if lt IE 9]>
<script src="[Link]
<![endif]-->

[Link]:NUEVOSTIPOSDEINPUT
TalvezunadelasmejorasmssignificativassealagranriquezaqueHTML5aade
alosformulariosconobjetodequepodamosconstruirconfacilidadaplicaciones
web. Son13losnuevostiposdisponiblesparalaetiquetainputademsdealgn
argumentoextraaadidoalosyaexistentes.
Elargumentorequired,vlidoparacasitodoslostiposdeobjetospermite,marcar
comoobligatoriouncampodeformaquenosepuedaejecutarlafuncinsubmit
si no est completo y dando, adems, un efecto visualque cada navegador
podrpersonalizar.
Elargumentoautofocus,quedeberadeusarsesloenunobjetoporformulario,
seleccionaelcampodelmismoquetomarelfocodeformaautomticauna

Jos Mara Morales Vzquez Pgina 102

 HTML & CSS

vezcargadalapgina.
El argumento autocomplete puede tomar dos valores (on o off) e indica al
navegadorsipuedehacersugerenciasalusuariodependiendodeloquehaya
escritoenanterioresocasionesenesemismocampo.
Elargumento placeholder,vlidoentodosloscamposdetexto,nosmuestraun
textoconinstruccionessobrequedebemosdecumplimentarenelmismo.
Elargumentowrap,existenteenversionesanterioresaHTML4perodesaparecido
enesta,[Link]
indicar si queremos que los saltos de lnea que el usuario escriba en ellos se
tranmsitan(wrap=hard)ono(wrap=soft)queeslaopcinpordefecto.
datalistesunanuevaetiquetaquepuedeasociarcealoscamposdetextoyque
nospermitemostraralusuariounalistadesugerenciasdeformamuysimilarala
que,porejemplo,[Link]
usa en conjunto con la etiqueta option de forma muy parecida a la que
utilizamosenuncamposelect:
<input type="text" name="provincia" list="provincias" />
<datalist id="provincias">
<option value="Sevilla"></option>
<option value="Madrid"></option>
<option value="Cuenca"></option>
<option value="Mlaga"></option>
</datalist>

Laidentificacinentreelinputyeldatalistsehaceatravsdelosargumentoslist
eidcuyosvaloresdebendeseriguales.
Porltimo,elargumento pattern permiteespecificarunaexpresinregularque
debe de cumplir lo que pongamos en el campo para que el formulario sea
[Link]:
<input type="text" name="codpostal" pattern="[0-9]{5}" />
<input type="text" name="nif" pattern="[0-9]{8}[A-Za-z]{1}" />

Enelprimeroelpatrnespecificaqueelcamposlovalidarsiconstadecinco
[Link],elcampo
debedeserrellenadoconochonmerosseguidosdeunaletra,yaseaestaen
[Link]
regularesmscomplejaspuedesconsultarelsiguienteenlace:
[Link]
Yunanotaadicionalacercadelospatrones:sielcamponoestmarcadocomo
requeridomedianteelargumentoantesvistoseraposibledejarloenblancoyeso
[Link]
tambinesteargumento.
Los tipos nuevos introducidos a los input son email, url, number, date, month,

Jos Mara Morales Vzquez Pgina 103

 HTML & CSS

week, time, datetime, datetimelocal, search, color, range y tel. Proporcionan

controles especializados de diferentes peticiones bastante cotidianas con
validacin automtica. Veamos algunos ejemplos con los argumentos ms
habituales de cada uno de ellos (aparte de los ya vistos: required, disabled,
readonly,[Link]).
<input type="email" name="email" />
<input type="url" name="web" />

<!funcionanenoperayenchrome>
<input type="number" name="edad" min="18" max="100" step="1" value="18" />
<input name="cursor" name="unidades" type="range" min="3" max="12"
value="6" step="3" />

<!funcionansloenopera>
<input type="date" name="nacimiento" />
<input type="month" name="alta" />
<input type="week" name="vacaciones" />
<input type="time" min="07:00" max="23:00" step="3600" value="09:00" />
<input type="datetime" name="fecha1" />
<input type="datetime-local" name="fecha2" />
<input type="color" name="color" value="#c0ffee" />

<!Noimplementadosanporningnnavegador>
<input type="search" name="busqueda" /> <input type="button"
value="Buscar" />
<input type="tel" name="telefono" />

Intimamenterelacionadoconlosformularios,aunquemuchomsuniversalysin
dependencia directa con estos, tenemos el nuevo agumento contenteditable
que convierte, cuando su valor es true, a casi cualquier elemento, ya sea de
bloqueodelinea,eneditabledeformadirectaporelusuario:

<h1 contenteditable="true">Titular editable</h1>

<p contenteditable="true">Este prrafo tambin es editable</p>
<div contenteditable="true">Y este bloque div lo mismo</div>
<p>Pero, incluso <strong contenteditable="true">estas negritas</strong> o
este <span contenteditable="true">texto con un span</span> que son
elementos de lnea pueden ser editables</p>

[Link]
Modernizr es una librera escrita en javascript y que nos sirve de ayuda en la
[Link]:nospermiteinterrogaral
navegador del usuario que est viendo nuestras pginas sobre si entiende
determinadascaractersticasdeHTML5oCSS3y,enesecaso,elegirloquevamos
[Link]

Jos Mara Morales Vzquez Pgina 104

 HTML & CSS

yhacerlasfuncionardeformabsica.
Loprimeroquedebemosdehaceresdescargarlaslibrerasdemodernizrdela
web [Link] ycopiarelficherojseneldirectoriodenuestro
proyecto. Tenemos dos opciones: o descargarnos las libreras completas de la
versin de desarrollo o generar una librera a medida que slo contenga las
[Link]
sermuchomsligerayacelerarlacargayejecucindenuestroproyecto.
Ensegundo lugartenemos queincluirunallamadaalalibreraenel head de
nuestrohtml:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<script src="[Link]"></script>
<link rel="stylesheet" href="[Link]" media="all" />
<title>Ejemplo de uso de Modernizr</title>
</head>
<body>
</body>
</html>

Dosindicacionesenestepaso:enprimerlugarelnombredelalibrerapuede
[Link]
tu proyecto. En segundo lugar, la carga de la librera de modernizr debe de
hacerse antes de la carga de las hojas de estilo si queremos hacer
comprobacionestambinenestas.

Ahora ya lo nico que tenemos que hacer es, desde nuestro documento,
interrogar a Modernizr si el navegador es capaz de interpretar determinadas
etiquetas y/o argumentos y actuar en consecuencia. Podemos ver una
demostracinsencillaintroduciendoestecdigoenelbodydenuestroejemplo
anterior:
<script>
if ([Link]) {
alert("Tu navegador soporta el atributo required");
}
else {
alert("Tu navegador no soporta el atributo required");
}

if ([Link]) {
alert("Tu navegador soporta el input type=range");
}
else {
alert("Tu navegador no soporta el input type=range");
}
</script>

Jos Mara Morales Vzquez Pgina 105

 HTML & CSS

Peroloquenosotrosrealmentequeremos,lamayoradelasveces,noesadvertir
denadaalusuariosinocrearunapgina'alternativa'deformaqueelnosede
cuenta de nada aunque, lgicamente, pierda algunas de las funcionalidades
[Link]
nos permite crear parte del documento HTML en el mismo momento de su
[Link]
unaalternativamstilalcdigoanteriorconestasindicaciones:

<script>
if ([Link]) {
[Link]("<label>Nombre: <input name='nombre'
type='text' required='required' /></label><br/>");
}
else {
[Link]("<label>Nombre: <input name='nombre'
type='text' /></label><br/>");
}
if ([Link]) {
[Link]("<label>Edad: <input name='edad' type='range'
min='1' max='120' value='18' step='1' /></label><br/>");
}
else {
[Link]("<label>Edad: <input name='edad' type='text'
size='3' maxlenght='3' value='18' /></label><br/>");
}
</script>

Otraposibilidadescargarunahojadeestilosdiferentedeformacondicionalalos
elementosquenuestronavegadorsoporteusandolafuncinloaddeModernizr.
Acontinuacinvemosunejemplosencillo:
<script>
[Link]({
test: [Link] && [Link],
yep : '[Link]',
nope: '[Link]'
});
</script>

EnelejemploanteriortesteamosdoselementosHTML5(eltipodeinputdateyel
argumentoplaceholder)yenfuncindequeestnsoportados,ono,cargamos
una hoja de estilos diferente. Lgicamente, se trata de una funcin que
encontraremosmstilalahoradeprobarelsoportedeelementosdeCSS3,
pero puesto que an no los hemos tocado lo vemos aqu y ms adelante
haremosalgnotroejemplo.

[Link]
versindedesarrollodelaliberay,portanto,parausarladebemosdegenerar
una librera desde la opcin de produccin incluyendo esta utilidad (est
marcada por defecto en el apartado de extras) y todas las comprobaciones

Jos Mara Morales Vzquez Pgina 106

 HTML & CSS

adicionalesdetipos,argumentosopropiedadesquevayamosahacer.

NOTAIMPORTANTE: Lovistoaqusetratadeunusomuybsicodeestaslibreras
quenoincluyetodaslasposibilidadesycomprobacionespreviasquedeberamos
[Link]
documentacin:

[Link]

[Link]
HTML5incluyedosetiquetas,audioyvideoparafacilitarlainterpretacindirecta
por parte del navegador de contenido multimedia y embed para incrustar
archivosenformatoflash.
Audio
La etiquetaaudio nos permiteinsertarun archivo deaudio en nuestrapgina
websinnecesidaddeusarflashniunplugindejavascriptcomohacamoshasta
[Link]
tantodequelaetiquetaestimplementadacomodeloscodecsdeaudioque
[Link]:
<audio src=archivo_audio>Su navegador no soporta la etiqueta
audio</audio>

El argumento src, que define dnde se encuentra el archivo de audio a

reproducir,[Link]
navegadornolasoporta,perosiloquenosoportaeselcodecdeaudio,noser
[Link],el
archivo no se reproducir ni se har visible de ninguna forma. Existen dos
argumentosadicionales,quepuedenusarsealavez,parapermitirqueelarchivo
sereporduzca: controls y [Link]
mandosconunbotndeplay/pausa,sonidoon/offyunabarradeprogresode
[Link]
pgina. Ambos son parmetros sin valor por lo que en XHTML tendremos que
usarlosdeestaforma:

<audio src=archivo_audio controls=controls autoplay=autoplay >Su

navegador no soporta la etiqueta audio</audio>

Elargumento loop (loop=loop)reproduciraenbucleunayotravezelsonido.

Porltimo,elparmetropreloadnospermitecargarelarchivodeaudioalmismo
tiempoquelapginaynocuandoelusuarioledaaplayparaevitardemoras.
Este ltimo tienetres valores posibles: none, metadata (paraprecargarslo los
metadatosdelarchivooauto).

Jos Mara Morales Vzquez Pgina 107

 HTML & CSS

Formatosdeaudio
Son cuatro los codecs de audio diferente a los que, en la actualidad, se da
soporte(deformairregular)enlosdiferentesnavegadoresqueimplementanesta
etiqueta:ogg,mp3,wavyacc(m4a).Ningnnavegadorlosimplementatodos
[Link]
[Link] source quenospermite
especificardiferentesarchivosdeformaqueelnavegadortengaeleccin:
<audio controls="controls" >
<source src="[Link]" />
<source src="finaldetrayecto.mp3" />
<source src="[Link]" />
Etiqueta no soportada
</audio>

Cuandoelnavegadorproceseestasetiquetassequedarconelprimerarchivo
que sea capaz de reproducir. Por tanto el orden en que aparezcan es
[Link]
el .ogg como el .mp3 se quede con el primero, este debera de aparecer
tambin por delante. La etiqueta source tiene un parametro opcional para
especificar el tipo de archivo y el codec que usa el mismo, por ejemplo
type="audio/mpeg"otype="audio/ogg;codecs=vorbis"

Vdeo
Laetiquetavideo,[Link]
sencillodeusoseraeste:
<video src="archivo_video"> Su navegador no soporta la etiqueta
video</video>

Enestecasoalusarlanuevaetiquetasinespecificarautoplaynicontrolssiquese
reserva espacio para el primer fotograma del mismo pero la nica forma de
reproducirloserapulsandoconelbotnderechoyusandoelmencontextual
[Link] src siguesiendo,pues,el nico
[Link] controls,autoplay, loop y preload tambinexisteny
su uso es idntico a los vistos para la etiqueta audio. Los nuevos parmetros
disponiblesparalaetiquetavideosonlossiguientes:

[Link]
nousamosningunodeestosparmetroselnavegadornosmostrarelvdeocon
[Link],peronoel
otro, se ajustar el no especificado para respetar la proporcionalidad de la
imagen.

Elatributoposternospermitedefinirunaimagenestticaqueaparecermientras
queelvdeosecargaohastaqueelusuariodecidecomenzarsureproduccin
[Link]
[Link]:

Jos Mara Morales Vzquez Pgina 108

 HTML & CSS

<body>
<video src="video_ogv.ogv" controls="controls" width="700"
poster="[Link]"> Su navegador no soporta la etiqueta
video</video>
</body>

Formatosdevdeo
Conlosformatosdevdeotenemoselmismoproblemaqueconlosdeaudio:
ningnnavegadorimplementatodoslosreconocidosniexisteningunodeellos
que sea soportado por todos los navegadores. Ogv, H.264, y WebM son las
[Link],equivalente
alformatooggdeaudio.H.264yWebMsondosformatospropietarios,elprimero
[Link]
puedeusartambinenestecasoparaproporcionaralternativasalnavegador:
<video controls="controls" >
<source src="video_ogv.ogv" />
<source src="video_mp4.mp4" />
<source src="video_webm.webm" />
Su navegador no soporta la etiqueta video.
</video>

ArchivosdeFlash
HTML5incorporatambinlaposibilidaddeincrustardirectamentearchivosde
animacinflashatravsdelaetiquetaembed:
<embed src="animacion_flash.swf" />

srces,aligualqueenaudioyvideo,[Link]
tambinsonvlidosyfuncionandeigualformaquehemosdescritoenlaetiqueta
vdeo.

[Link]
La etiqueta canvas define un objeto que actuar como un lienzo dibujable
mediante la llamada a funciones de javascript, proporcionando un potente
[Link]
siguienteejemplodibujaunrcuadradoverde:

<canvas id="myCanvas" height="300" width="500">

T navegador no soporta la etiqueta canvas.
</canvas>

<script>
var canvas=[Link]("myCanvas");
var ctx = [Link]("2d");
[Link] = "#00ff00";
[Link](0,0,100,100);
</script>

Jos Mara Morales Vzquez Pgina 109

 HTML & CSS

Elcontenidodelaetiquetacanvasslosevisualizarsinuestronavegadornola
soporta. canvas define un lienzo transparente susceptible de ser rellenado
mediantefuncionesdedibujodeunAPIdejavascriptincorporadoalnavegador.
Enlasdosprimeraslneasdelscriptdelejemploanteriorobtenemosprimerouna
referenciaalobjetoyenelsegundoelegimoselAPIqueusaremosparaeldibujo
enfuncindelargumentodelafuncin.Elcontexto2deselmsextendidopor
el momento aunque existe una especificacin muy avanzada que permite el
dibujoen3Dusandoelargumento webgl ylaslibrerasdedibujoOpenGL,la
competencialibredelasDirectX:

[Link]

Las dos lneas siguientes del ejemplo dibujan un rectngulo de 100 pxeles de
ancho por 100 de alto (un cuadrado, en realidad) que empieza en la
coordenada0,0(enlaesquinasuperiorderechadelcanvas)yqueserellenade
colorverde(#00ff00enhexadecimal).

Veamosalgunasdelasfuncionesbsicasdeldibujomediantecanvas:

fillStyleystrokeStylesonvariablesquenospermitenelegirelcolor,patrno
gradiente de color que usaremos para relleno o lnea de dibujo,
respectivamente. Para seleccionar un color podemos usar los mismos
mtodos que en CSS (por ejemplo, #c0ffee, #fff, orange o
rgb(255,160,23))perosiempreentrecomillascomosifueseunacadena.
Paraseleccionarungradienteounpatrnasignamoselobjetodondeest
definidoelmismo(veremoscomohacerlomasadelante).
fillRect y strokeRect sonfuncionesquenospermitendibujarunrectngulo
especificandocuatroparmetros:elpuntodesuvrticesuperiorderechoy
lasdimensionesdesuslados(x,y,ancho,alto).
clearRect(x,y,ancho,alto)limpiaelcontenidodelrectnguloespecificado.
Para reiniciar el canvas completo podemos hacer un clearRect con las
dimensionestotalesdelmismooreasignarelvalordeanchoodealtodel
mismo,comoporejemploas:
[Link] = [Link];

moveTo (x,y) mueve el pincel de dibujo al punto de coordenadas

especificadas.
lineTo(x,y) dibujaunalneadesdeelpuntoactualdoneseencuentrael
pincel hasta el punto especificado en las coordenadas. En realidad las
lneasnosedibujansobreellienzodelcanvassinoquesealmacenanen
unaespeciedebuffertemporalqueslosevolcarrealmenteenlapgina
web cuando llamemos alafuncin stroke(). El colorusado ser elque
hayamosdefinidoenstrokeStyle.
lineWidth esunapropiedadquedefine,enpixeles,elanchodelaslneas

Jos Mara Morales Vzquez Pgina 110

 HTML & CSS

trazadas.
font [Link]
cadena con las caractersticas de este, de forma similar a la de la
[Link]"bolditalic30pxmonospace"
fillText(texto,x,y) esunafuncinqueescribeeltextoquerecibecomo
primerparmetroapartirdelpuntodefinidomediantesusegundoytercer
parmetro. El color que escoger ser el ltimo que hayamos definido
mediantefillStyle.
strokeText(texto, x, y) hace lo mismo pero slo dibujando la lnea de
contornodeltextosinrellenarlo.

[Link]
vemoscomodefinirungradienteyrellenarunrectanguloconl:
gradiente = [Link](250, 50, 350, 250);
[Link](0, "#0f0");
[Link](1, "#f00");
[Link] = gradiente;
[Link] (250, 50, 100, 200);

[Link]
desdeelpunto250,50hastael350,[Link]
[Link]
[Link],usamoselobjetogradienteparadefinirlavariablefillStyley
[Link]
coincideexactamenteconlasuperficiedelgradienteperonotendraporqueser
as. El gradiente lineal puede crearse mediante una diagonal (como en el
ejemplo) pero tambin mediante una lnea vertical u horizontal. Tambin
podemoscrearunradiantecnicomediantelasiguientefuncin:
createRadialGradient(x0, y0, r0, x1, y1, r1)

[Link]
secreardibujandounasuperficiecnicaentreamboscrculos.

Eldibujodearcosserealizamediantelafuncinarcquerecibeseisparmetros:
lascoordenadas delcentro,elradio,elpuntodeinicioydefinaldelarcoen
radianes y una variable booleana quedefine si elarco se trazar en sentido
horario(false)oantihorario(true).El0delosgradosestarasituadoenelpuntode
[Link]
[Link]
llenarlo o dibujar slo su lnea mediante las funciones fill o stroke,
[Link]:
[Link]();
[Link](150, 300, 70, 0, 2 * [Link], true);
[Link] = "#9cf";
[Link]();

Jos Mara Morales Vzquez Pgina 111

 HTML & CSS

[Link]();
[Link](100, 150, 200, 0, [Link], false);
[Link] = 10;
[Link] = "black";
[Link]();

La funcin beginPath sirve para indicar a canvas que comenzamos un nuevo

trazadoindependientedeloquehayamoshechoanteriormenteyesvlidatanto
altrazararcoscomolneasrectas.

Los efectos de sombreado se consiguen mediante las propiedades

shadowOffsetX, shadowOffsetY, shadowBlur y shadowColor que definen,
respectivamente,eldesplazamientohorizontalyverticaldelasombraenpxeles,
[Link]
[Link]:
[Link] = 10;
[Link] = 10;
[Link] = 5;
[Link] = "black"
[Link](400,250,75,75);

Tenemosdisponiblestresfuncionesquenosvanapermitirhacertransformaciones
sobre los elementos dibujados: translate(x,y), rotate (angulo) y scale(x,y). La
primear desplaza un elemento al punto indicado por las coordenadas que
[Link]
grados(enradianes)[Link] ltimolatercera
permite cambiar la escala de un objeto indicando el factor de escalado
[Link]
sobretodosloselementosquesevayanadibujardesdeelmomentoenquese
[Link]:
for(j=0; j<6; j++){
[Link](400,50,75,75);
[Link](50, 50);
[Link]([Link]/16);
[Link](0.7, 0.7);
}

Canvasnosvaapermirtambininteractuarconlascoordenadasdelratnpara
realizargrficosinteractivos.Enelsiguienteejemplodellibrodiveintohtml5puedes
ver un ejemplo y pulsando sobre el enlace etiquetado como Rules of play te
explicanlofundamentaldesufuncionamiento:

[Link]

En los siguientes enlaces tienes todas las funciones, su descripcin y algunos

ejemplosdeloquepuedesusarcomocontenidodelaetiquetacanvasusandoel

Jos Mara Morales Vzquez Pgina 112

 HTML & CSS

API2d:

[Link]
[Link]
[Link]

[Link]
La geolocalizacin consiste en situar exactamente mediante coordendas
geogrficas(longitudylatitud)alusuarioqueestviendonuestrapginaweben
unplano.HTML5introduceestaposibilidaddeformanativamediantesupropio
[Link]
proporcionardichascoordenadaspuedentomarsedetresformasdiferentes,que
puedensercomplementariasyque,enescalademenoramayorprecisinson
lassiguientes:

AtravsdeladireccinIPpblicadeaccesoaInternetproporcionadapor
nuestroproveedor.
Portriangularizacinatravsdelalocalizacindelospuntosdeaccesowifi
alosqueestemosconectados.
AtravsdeunGPSintegradoennuestroequipo.

El navegador, si soporta esta funcin, tomar las coordenadas de

geolocalizacindelusuariodelaformamsprecisaposibleyenbaseaestos
mtodos (segn los que tenga disponibles) y siempre despus de pedir
[Link]:
<ul>
<li>Latitud: <span id="latitud">Favor de esperar...</span></li>
<li>Longitud: <span id="longitud">Favor de esperar...</span></li>
<li>Precisin: <span id="precision">Favor de esperar...</span></li>
<li>Altura: <span id="altura">Favor de esperar...</span></li>
<li>Precisin en la altura: <span id="precisionAltura">Favor de
esperar...</span></li>
</ul>

<script>
if ([Link]) {
[Link](function(position) {
var latitud = [Link];
var longitud = [Link];
var altura = [Link];
var precision = [Link];
var precisionAltura = [Link];

[Link]("latitud").innerHTML = latitud;
[Link]("longitud").innerHTML =
longitud;
[Link]("altura").innerHTML = altura;
[Link]("precision").innerHTML =
precision;

Jos Mara Morales Vzquez Pgina 113

 HTML & CSS

[Link]("precisionAltura").innerHTML =
precisionAltura;
} );
}
else {
alert("Su navegador no soporta la geolocalizacin");
}
</script>

Elscript,queesdondeusamoslasfunciones,tienetrespartesbiendiferenciadas.
En primer lugar comprobamos si nuestro navegador soporta la funcin de
geolocalizacininterrogandoalavariable [Link]. Sielresultado
esnegativomostramosunaalertay,encasocontrario,llamamosaunafuncin
([Link])atravsdelacualobtenemoslalatitud
ylalongitud([Link]),laprecisinen
estasmedidassegnelmtodoempleadoparaobtenerlasdelostresvistosen
metros ([Link]), la altura ([Link]) y la
precisinenlamedidadeesta([Link]).Laalturayla
precisinenellasloestardisponiblesicontamosconGPSyserceroenotro
[Link]
HTML usando la funcin Javascript [Link] que nos permite
sustituirelcontenidodecualquieretiqueta(innerHTML)simplementeindicandoel
IDdelamisma.

Existen otros dos parmetros ms adems de los vistos en este ejemplo:

[Link] que te proporciona la posicin en grados respecto al
[Link],tomandocomoreferencialaltimaposiciny
eltiempotranscurridoentreunayotra,nosproporcionalavelocidadalaquenos
movemosenmetrosporsegundo.

TienesotroejemplomscompletoqueenlazaconelAPIdegooglemapspara
mostrarlascoordenadasenunplanoaqu:

[Link]

[Link]
ExistenmuchasotrasnovedadesenHTML5:funcionalidaddearrastrarsoltar(drag
drop) nativa en el navegador, un sistema mejorado de comunicaciones
bidireccionales con el servidor, cookies que permitiran almacenar ms
informacin,[Link],aligualqueocurre
conlasantesvistasdegeolocalizacinodecanvas,todasellasseproporcionan
mediante el uso de un API externo realizado en javascript. Para seguir
aprendiendo y ampliando conocimientos, as como novedades y cambios de
ltimahora,lamejorreferenciaeslaqueproporcionaelcomitdelW3C:

[Link]

Jos Mara Morales Vzquez Pgina 114

 HTML & CSS

Ysiquieresalgomsdidcticopuedesconsultarellibrogratuitodiveintohtml5:

[Link]

Jos Mara Morales Vzquez Pgina 115

 HTML & CSS

10.CSS3
LoscambiosenCSS3hansidoampliosysignificativosparaconseguirpginasweb
[Link]
algunas de las ms importantes pero no olvidemos que ni el estndar est
cerrado ni lo quehay es compatibleconmuchos delos navegadores quese
siguenusandoampliamente.

10.1.LOSNUEVOSSELECTORESDECSS3
Pseudoelementos
LospseudoelementosexistentesenCSS2.1semantieneninvariablesenCSS3salvo
unpequeodetalle:ahorasedistinguenmsclaramentedelaspseudoclases
usando::delanteenlugarde:[Link],porejemplo,usaremos
p::firstletterenlugardep:[Link], seaadeun
nuevo pseudoelemento llamado ::selection que permite aplicar estilos
diferenciados al texto que el usuario ha seleccionado mediante el ratn o el
teclado.

Pseudoclases
ElprincipalcambioenlosselectoresdeCSS3seencuentraaqu,dondesehan
aadido14selectoresnuevos.

Elselector:rootrepresentaalelementorazdeldocumentoHTMLquesiempreha
[Link]
esteolaetiquetabody,salvoque:roottendraunamayorespecificidad.

:emptyesunselectorquedemarcaatodosloselementosvacosdecontenidoy
[Link],tengamoselsiguienteHTML:
<p>A paragraph.</p>
<p></p>
<p>Another paragraph.</p>

Elprrafocentral,vacoysinhijos,seraelnicoqueresponderaaesteselector:
p:empty{ width:200px; height: 40px; background: red; }

Elselector:target sirveparaseleccionarelelementoactivo,osea,aqulenlace
internorealizadomediantelaetiqueta a [Link]
cdigo:
<p><a href="#enlace1">Ir al punto 1</a></p>
<p><a href="#enlace2">Ir al punto 2</a></p>
<p><a name="enlace1"></a>La, la, la...</p>
<p><a name="enlace2"></a>Bra, bra, bra...</p>

Yusemosestareglacombinadaconelselector:before

Jos Mara Morales Vzquez Pgina 116

 HTML & CSS

:target:before{
content: "Ests aqu -> ";
}

:lastchild viene a acompaar al selector :firstchild que ya conocamos y

seleccionaaundeterminadoelementosiempreycuandoseaelltimohijodeun
[Link],supongamoselsiguientecdigo:
<body>
<p>Primer prrafo del body</p>
<h1>Titular</h1>
<div>
<p>Primer prrafo del div</p>
<p>Segundo prrafo del div</p>
<p>Tercer prrafo del div</p>
</div>
</body>

Elselectorp:firstchildseleccionaraalosprrafosmarcadosenazul(elprimerhijo
delbodyyelprimerhijodeldiv),mientrasqueelselectorp:lastchildseleccionara
alprrafomarcadoenrojo(elltimohijodeldiv).

Siguiendoenestalnea, :onlychild seleccionariaaunelementoquefuesehijo

nicodesupadre.:nthchild(n)seleccionaraalelementoqueestenlaposicin
ndentrodeladescendenciadesupadre.Elprimerelementoserael1y,porlo
tanto, p:nthchild(1) sera equivalete a p:firstchild. Por ltimo, :nthlastchild(n)
seleccionaraalelementoqueestenlaposicinnperoempezandoacontar
porelltimoynoporelprimero.

:nthchild(n) permite un uso avanzado configurando adecuadamente su

[Link]
y, en ese caso, seleccionaramos a todos los elementos impares o pares,
respectivamente. Tambin podemos usar expresiones como 3n (los elementos
mltiplosde3)ousartresreglasdiferentes(3n+1,3n+2y3n+3)paraalternarentre
tresestilosdiferentesenunalistadeelementosiguales.

Similaresaestos,tenemosunconjuntodeselectoresquesecomportandeigual
[Link]:firstoftype,:lastof
type,onlyoftype,:nthoftype(n)y:nthlastoftype(n).

Nuevosselectoresparausoconformularios
Existen, adems, tres pseudoclases nuevas especificamente pensadas para su
uso conformulariosqueson :enabled,:disabled y :[Link] sunombre
indica,aplicanaloselementosdetipoinputquecumplenconloespecificadoen
elnombredelselector.
Elselector:not()
Existe una ltima pseudoclase que trataremos aparte por su especial

Jos Mara Morales Vzquez Pgina 117

 HTML & CSS

[Link]:not()quesirveparaaplicarestilosaaquellos
elementos que no cumplen lo especificado ente parntesis. Veamoslo con
[Link]
nofuesedelaclasecomun
div:not(.comun){color: red; }

Lasiguientereglaaplicaraatodosloselementosstrongqueestndentrodeun
divperoquenoestndentrodeunp
div *:not(p) strong{color: red; }

Enlasiguiente,locombinamosconunselectordeatributoparaseleccionartodos
losinputsalvoaquellosdetipopassword.
input:not([type="password"]){color: red; }

[Link]
a todos los titulares de nivel h2 salvo a aquellos que pertenecen a las clases
politicayeconomia:
h2:not(.politica, .economia){color: red; }

Y,porsupuesto,sepuedecombinarconcualquierotroselectorquehemosvisto
antes:descendientes,etc.

Nuevosselectoresdeatributos
CSS3aade,adems,tres nuevos selectoresdeatributosquenos permitenun
controlmsfino. Elprimerselectorqueveremos,queusaelsmbolodistintivo ^
sirveparaseleccionaraetiquetasconunatributoscuyovalorempiezaporuna
[Link],aaquellasetiquetas a conunatributo href cuyovalor
empiezepormailto:
a[href^="[Link] color: blue; }

El segundo selector de atributo, que usa el smbolo distintivo $ selecciona a

aquellasetiquetasconunatributoconcretocuyovalorterminaendeterminada
[Link],lasetiquetasacuyoatributohrefterminanenhtml:

a[href$=".html"] { color: yellow; }

Porltimo,seincluyeunselectorqueusaelsmbolo*queseleccionaaaquellas
etiquetasconunatribuyocuyovalorcontengaencualquierposicinlacadena
especificada. En el siguiente ejemplo, seleccionara a cualquier imagen cuyo
ttulocontengalapalabraimportante.

img[title*="importante"] {border: 3px red dashed; }

Todoslosselectoresdeatributopuedencombinarseentresiy,porsupuesto,con
[Link],elsiguienteselectorcuadraraconlas

Jos Mara Morales Vzquez Pgina 118

 HTML & CSS

imgenescuyotituloempiezeporEstadsticasycontengalapalabraimportante:
img[title^="Estadsticas"][title*="importante"] {border: 3px red dashed; }

Selectorgeneraldeelementoshermanos
ElltimodelosnuevosselectoresdeCSS3amplalasposibilidadesdelselectorde
hermanos existente en la versin anterior. Recordemos que el selector de
hermanos(queusabaelsmbolo+)sloseactivabacuandolosdoselementos
de la regla eran hermanos e iban uno a continuacin de otro de forma
inmediata. El nuevo selector usa el smbolo ~ y se activa cuando ambos
elementossonhermanosyelsegundovadespusdelprimeroperosinimportar
[Link]:
<h1>Titular 1</h1>
<h2>Titular 2</h2>
<p>Prrafo 1</p>
<div>
<h2>Titular 3</h2>
</div>
<h2>Titular 4</h2>

Unareglaqueuseelselectordehermanosclsico(porej.h1+h2{color:red;})
slo seleccionarael Titular 2, mientras queusando elselectorgeneralh1 ~ h2
{color:red;}seleccionaraelTitular2yelTitular4.
9.2.LASNUEVASPROPIEDADESDECSS3
SonmuchaslaspropiedadesaadidasenCSS3ymuyirregularlaimplantacinen
losdiferentesnavegadoreshastaelpuntodequecadaunodeellosenmuchos
casoshadesarrolladoporsucuentaalgunasdelasimplementacionesaadiendo
un prefijo distintivo que es o para pera moz para firefox, webkit para
chrome,safariyotrosqueusenelWebkity ms [Link]
ejemplosdeestoenvariosdelosapartadossiguientes.
Gradientesyunanuevapaletadecolores
CSS3 adopta (con ligeros cambios) la paleta de colores stndard de X11 que
constade147elementosquepodemosusarmedianteunnombrecaracterstico.
LalistadecoloresX11puedesconsultarlaaqu:
[Link]
En CSS3 los usaremos siempre en minsculas y eliminando los espacios. Por
ejemplo,elcolorBlanchedAlmondpasaraaserblanchedalmond.
Adems,seincorporalaposibilidadderealizardegradadosdeformaqueyano
necesitamos usar imgenes estticas para estos fines. Existen dos tipos de
gradientes:[Link]:
background-image: linear-gradient(bottom, rgb(107,168,104) 13%,
rgb(204,137,180) 57%, rgb(164,219,245) 83%);

background: radial-gradient(center, circle, white, #7DA5CD);

Jos Mara Morales Vzquez Pgina 119

 HTML & CSS

[Link],cualquierade
[Link],el
valordelapropiedaddeberadeempezarpor lineargradient o radialgradient
[Link],ambasdebendellevarun
nmerodeparmetrosseparadosporcomasquesernunmnimodetresenel
[Link].
En el caso del lineal, el primer parmetro define la direccin del degradado
definiendosuinicioypudiendousarparaellounaodosdelaspalabrasclavetop,
bottom,[Link](dos,
al menos pero pudiendo ser ms). Cada color se define de cualquiera de las
formasadmitidashabitualmenteenCSS(conunvalorhexadecimal,unapalabra
distintivaounafuncinrgb)ypudiendoiracompaadodeunporcentajeque
definelasuavidaddelatrancisinentreunoyotrocolor.
En el caso del radial, el primer parmetro tambin define la direccin pero
ademsdelaspalabrasclavesanteriorestenemosotra,center,queencasode
[Link]
puedeser circle o [Link] colores deldegradado que
siguenelmismoformatoexplicadoanteriormenteydeberandeseralmenosdos.
Setrataestadeunadelaspropiedadesdequehablbamoscuyoestndardno
seencuentrageneralizado,asquesiqueremosquelosprincipalesnavegadores
lo entiendad debemos repetir laregla con los diferentes prefijos distintivos. Por
ejemploas:
[Link]{
background: radial-gradient(center, circle, white, #7DA5CD);
background: -o-radial-gradient(center, circle, white, #7DA5CD);
background: -moz-radial-gradient(center, circle, white, #7DA5CD);
background: -webkit-radial-gradient(center, circle, white, #7DA5CD);
background: -ms-radial-gradient(center, circle, white, #7DA5CD);
}

Enelcasodelosgradienteslineales,tenemosunaherramientawebmuytilque
nospermitegenerarlasreglasdeformaautomticaaqu:

[Link]

Fondosmltiples
CSS3incorporalaposibilidaddeincluirfondosmltiplesenunamismacajasin
[Link],y
caractersticas de cada imagen (repeticin, etc.) se define tambin de forma
[Link]
imgenes independientes para personalizar las esquinas de una caja es tan
sencillocomoesto:
p.caja2{
padding: 60px;
border: 1px solid black;

Jos Mara Morales Vzquez Pgina 120

 HTML & CSS

background: url([Link]) top left no-repeat,

url([Link]) top right no-repeat,
url([Link]) bottom right no-repeat,
url([Link]) bottom left no-repeat;
background-color: white;
}

Ysiqueremossolapardosimgenesdefondotransparenteenlamismacajanos
bastaconhacerlosiguiente:
p.caja3{
width: 300px;
height: 400px;
background: url([Link]) bottom no-repeat,
url([Link]) bottom no-repeat;
}

Esquinasredondeadasybordesdecoradas
CSS3 incluye, por fin, la posibilidad de redondear bordes sin necesidad de
complicadas maniobras como hemos tenido [Link]
[Link]:

border-radius: 10px;

[Link]
usarcualquierunidaddemedidavlidaenCSS(pulgadas,em,etc.)ydefinirde
formaindependientecadaunadelascuatroesquinasdelacajaconlasiguiente
sintaxis:

border-top-right-radius: 5px;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 3em;
border-top-left-radius: 10px;

Conelformatoabreviadopodemosponerdosvaloresdiferentes(elprimeropara
las esquinasuperiorizquierda einferiorderecha y elotro paralas otras dos)o
cuatrovalores(unoparacadaesquinaempezandoporlasuperiorizquierday
continuandoenelsentidodelasagujasdelreloj):
border-radius: 10px 5px;
border-radius: 10px 5px 20px 25px;

Podemosusartambinesquinasirregularesespecificandodosradiosdiferentes:
[Link]
igualeseseste:
border-radius: 10px / 50px;

Cuandoespecificamoslasesquinasunaaunanonecesitamoslabarra:
border-top-right-radius: 5px 10px;

Jos Mara Morales Vzquez Pgina 121

 HTML & CSS

Ycuandolasesquinassondiferentesperolasespecificamosengrupo:
border-radius: 10px 10px / 20px 30px;
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;

Elredondeadodeesquinasmedianteestapropiedadsepuedeaplicar,adems
deaunacaja,tambindirectamenteaunatablaoaunaimagen:
table {
width: 200px;
background-color: rgb(185,205,225);
text-align: center;
margin: 30px;
border: 1px solid gray;
border-radius: 20px;
}

#imgredondo {
width: 600px;
height: 150px;
margin: 0 auto;
border-radius: 1em;
border: 1px solid gray;
background-image: url([Link]);
}

Sombras
CSS3incorporadospropiedadesquesirvenpardarsombrasatextosycajasque
se llaman, respectivamente, textshadow y boxshadow. El formato bsico de
[Link]:
text-shadow: 15px 5px 10px orange;
box-shadow: -5px -10px 5em #000;

Los dos primeros parmetros son el desplazamiento vertical y horizontal de la

sombra. Valores positivos desplazan esta haca abajo y la derecha. Valores
[Link]/o
difuminacin de la sombra (valores ms pequeos definen una sombra ms
intensa y marcada, mientras que valores grandes crean una sombra muy
difuminadaypocodefinida).Nosepuedeusarunporcentajecomoningunode
estos tres parmetros. El cuarto parmetro es el color de la sombra y puede
expresarsedecualquieradelasformasvlidavistasenCSS.

boxsahdow permite, adems, dos parmetros opcionales: uno de ellos ira

delantedelcolorydefine,medianteunamedida,ladistanciaalobjetodelfoco
que provoca la sombra, de forma que valores positivos acercan el foco
provocandounasombramayoryvaloresnegativosalejanelfocoprovocando
[Link]
iraalfinaldeladeclaracinyprovocaraunasombrainterioralacaja.

Jos Mara Morales Vzquez Pgina 122

 HTML & CSS

box-shadow: -5px -10px 5em 15px #000 inset;

Opacidad
La propiedad opacity permite definir elementos parcial o totalmente
transparentes.Elvalordeestapropiedadesunnmerodecimalentre0y1,de
formaque1definelatotalopacidad(cuerposlidoynotranslucido)yel0la
totaltranspariencia.
opacity: .3;

Mscontroldelatipografa
EnCSS3senormalizaelusodetipografasexternas(comolasdeGoogleFonts
quevimoshaceyatiempo)deformaquepodamosusarcualquiertipodefuente
[Link]
sehacemediantelainstruccin@fontfacequetieneelsiguienteformato:

@font-face {
font-family: "fantasia";
url("[Link]");
}

Siquisiramosimportarmsdeunafuenteennuestroproyectonecesitamosuna
instruccin@fontfaceporcadaunadeellas:
@font-face { font-family: vera; src: url("[Link]"); }
@font-face { font-family: fantasia; src: url("[Link]"); }

Inexplicablemente, aunque las fuentes ttf se han popularizado gracias a

Microsoft, estas no son soportadas por ninguan versin de explorer. Microsoft
[Link]
necesitamos convertirlas ttfaesteformato yusar esta sintaxis que contempla
ambostipos:

@font-face {
font-family: fantasia;
src: url("[Link]");
src: url("[Link]");
}

Existen diferentes programas capaces de convertir entre diferentes formatos.

Tambinpuedesusaresterecursoweb:

[Link]

Lanuevapropiedadfontsizeadjustpermiteajustarlaalturadefuentesdiferentes
[Link]:
font-size-adjust: .448;

Jos Mara Morales Vzquez Pgina 123

 HTML & CSS

Aunquepuedeaproximarseaojoporelmtododepruebaydeerror,existeun
recursowebquenoslistalasfuentesdisponiblesennuestrosistemaynoscalcula
loscoeficientesdeajuste:

[Link]

La propiedad textoverflow decide lo que se har con un texto que no cabe

completamente dentro de la caja en la que se encuentra. Tiene dos posibles
valores: clip (lo corta sin ms) o (lo corta pero antes coloca tres puntos
suspensivos).

Lapropiedadfontstretchpermitirajustarelanchodeloscaracteres,peroporel
momento ningn navegador la implementa. Sus valores posibles son, de ms
ancha a ms estrecha, wider, narrower, ultracondensed, extracondensed,
condensed, semicondensed, normal, semiexpanded, expanded, extra
expandedyultraexpanded.

Lapropiedadtextwrapdefinecomocortarlaslneasdeuntextoytampocoest
[Link] normal,pordefecto,indicaqueslose
[Link],
unrestricted quepuedenromperseentredoscaracterescualesquieray suppress
indicaquenoslonopuedenrompersesinoquesesuprimeninclusolossaltosde
lneamanualesquehayamoscolocado.

Columnasmsfciles
CSS3 dispone de siete propiedades que nos van a permitir mostrar el texto
[Link] columns, columngap,columnfill,
[Link]
con los gradientes, esta coleccin de propiedades precisa llevar el prefijo del
navegador(moz,webkit)parafuncionarenfirefoxychromeperonoasen
[Link]
lasintaxisnecesariaparamozillasalvoqueseindiquelocontrario.
columnsdefineelnmerodecolumnasyelanchomnimoesperadoparacada
una de ellas. Puede separarse en dos propiedades independientes: column
[Link]
relacionadoperolainterpretacinquehacendeelloslosdiferentesnavegadores
no es unnime. Mozilla, por ejemplo, da preferencia al nmero de columnas
mientrasqueOperalohaceconelanchodeestas.
/* -moz-columns: 200px 3; */
-moz-column-width: 200px;
-moz-column-count: 3;

La propiedad columnrule define un separador entre las columnas y tambin

Jos Mara Morales Vzquez Pgina 124

 HTML & CSS

puededividirseentrespropiedadesdistintas:columnrulewidth,columnrulestyle
[Link].

/* -moz-column-rule: 1px solid gray; */

-moz-column-rule-width: 1px;
-moz-column-rule-style: solid;
-moz-column-rule-color: gray;

columngapdefineelespaciodeseparacinentrecolumnas:

-moz-column-gap: 50px;

columnspannospermitemarcaralgnelementoparaquenosepropagueentre
diferentes columnas sino queestcompleto enuna [Link],por
ejemplo, un texto de entradilla o un titular. Tiene dos valores vlidos: 1 y auto
segnquedebalimitarsealaprimeracolumnaoexpandirseporlasqueprecise.
SloloimplementanOperayChrome:
column-span: 1;
-webkit-column-span: 1

columnfill define como se llenaran las columnas. Por defecto su valor es

balance,quehacequeelnavegadordividaelcontenidodelacajaentantas
partesigualescomocolumnasparaqueestasseanlomauniformesyparejas
[Link],elnavegadorllenarprimerolaprimeracolumnayno
[Link]
propiedadannoestimplementadaenningnnavegador.

Transformacionesytrancisiones
Lapropiedad transform permiterealizardiferentestransformacionesen2Do3D
sobrecualquierelemento(textos,cajas...)[Link]
propiedadessobrelasqueanseesttrabajando(sobretodoenelterrenode
3D),implementadaentodoslosnavegadoresexceptoelexplorer,quehayque
usarconlosprefijospropiosdecadanavegador(moz,webkityo)yparala
quesloveremosalgunosejemplosbsicos.
Las transformaciones disponibles son rotacin cambio de escala, deformacin
oblicuaydesplazamiento.
Larotacinsepuedeexpresarengrados(deg),radianes(rad),aplicarsealosejes
XeYporseparado(rotateXyrotateY),aambosporigual(rotate),yespecificarun
nmero de grados positivo (en el sentido de las agujas del reloj) o negativo
(sentidocontrario).Unejemplo:
transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);

Loscambiosdeescalaseespecificanmedianteunnmeroenteroodecimalque

Jos Mara Morales Vzquez Pgina 125

 HTML & CSS

puede ser mayor que cero (ampliacin). Menor (reduccin) o negativo

(reflexin).TambinpodemosaplicarunfactordeescaladiferentealejeXyalY
(scaleXyscaleY).Otroejemplo:

-moz-transform: scale(2.5);
-webkit-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5);

La deformacin oblicua usa el parmetro shew y nos permite especificar un

ngulo en grados, radianes o gradientes (grad), positivos, negativos (para el
sentido, igual que en la rotacin) y especificar una deformacin comn o
separadaparacadaeje:
-moz-transform: skew(-30deg);
-webkit-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);

Porltimo,translatenospermitedefinirundesplazamientoindicandoesteenuna
medidaconcretaoentantoporciento,convalorespositivos(abajoyhaciala
derecha)onegativos(arribayhacialaizquierda).Enestecasoelvalordela
propiedadpuedellevarunoodosvaloresaplicandoenelprimercasoaambos
ejesyenelsegundodistinguiendoentreambos:
-moz-transform: translate(100px, -50px);
-webkit-transform: translate(100px, -50px);
-o-transform: translate(100px, -50px);
transform: translate(100px, -50px);

Otras transformaciones en diferentes estados de normalizacin son: matrix,

matrix3d,translate3d,translateZ,scale3d,scaleZ,rotate3d,rotateZyperspective.

Lapropiedadtransition,porltimo,nosvaapermitirrealizarpequeosefectosde
animacin sin necesidad de recurrir a javascript. Usamos para ello cuatro
propiedades: transitionproperty, transitionduration, transitiontimingfunction y
transitiondelay (o transition, sin ms). Tampoco est disponible para Explorer.
Veamosprimerounejemployluegoexplicaremoslosdiferentesparmetros:
[Link] {
margin: 10px auto;
padding: 10px;
text-align: center;
width: 200px;
height: 100px;
background-color: pink;
border: 5px solid blue;

-webkit-transition: border 5s ease-out ;

-moz-transition: border 5s ease-out;
-o-transition: all 5s ease-out;

Jos Mara Morales Vzquez Pgina 126

 HTML & CSS

transition: border 5s ease-out;

}

[Link]:hover{
border-right: 200px solid #9cf;
}

Enlaprimerareglaespecificamosquelatrancisinafectaralborde(trancision
property),quedurar5segundos(trancisiontimingfunction)yqueserrpidaal
principioymslentaalfinal(easeout).Enlasegundaregla,queseactivaral
colocarelratnencima,hacemosuncambioenelbordedelelemento(tantode
tamaocomodecolor)ylatrancisinrealizarlatransformacinentreelestado
[Link]
invertir.

Lapropiedadpuedeserelancho(width),elalto(height),el color,unalistade
propiedades diferentes separadas por coma o all (todas las propiedades que
cambien entre uno y otro estado). Los tiempos y retrasos se especifican en
segundos (s) o milisengudos (ms). Por ltimo, el timingfunction puede ser
constante(linear),delentoarpido(easein),derpidoalento(ease o ease
out)olentoalprincipioyalfinalymsrpidoenelcentro(easeinout).

Se pueden especificar tambin diferentes parmetros para diferentes

propiedades:
transition: width 2s ease, height 3s linear;

Jos Mara Morales Vzquez Pgina 127

 HTML & CSS

[Link],BIBLIOGRAFAYREFERENCIAS
Esabsolutamenteimposiblereseartodaslasayudasyreferenciasquealolargo
delaoenqueheredactadoestosapuntesydurantemuchotiempoanteshe
tomado de la web, libros de consulta, ejemplos de pginas encontradas en
Internet,[Link]
cabecera,serajustomencionaralmenosalassiguientes.
[Link] es una coleccin de libros web escritos en
castellanoqueabarcantodaslasdisciplinasquehemostocadoaqu.
[Link] es,sinduda,lamejorreferenciaqueexisteen
la web cuando quieres consultar los argumentos de una etiqueta, los
valoresquepuedetomaro,simplemente,veralgunosejemplossimplesde
cualquierelementoHTMLy/oCSS
[Link] [Link],unverdadero
monstruo de esta disciplina y artfice de la gran mayora de trucos y
tcnicasquehemosvistoenelcaptulo7
Y,paralosfanticosdelpapel,sitengoquemencionardoslibrosdemibiblioteca
personalsobreestetemamequedoconestos:
[Link],[Link].2011
CSS,[Link],[Link]
AnayaMultimedia.2011

Jos Mara Morales Vzquez Pgina 128