HTML/CSS( Mi(primera(página(

Transcripción

1 HTML/CSS Miprimerapágina

2 QuéesHTML Esunlenguajedemarcasparaformateary estructurarundocumento,quepuedeleerseen cualquiernavegador. <html> </html> EstandarizadoenlanormaISOdeSGML StandardGeneralizedMarkupLenguage). ElW3Cdesarrollaespecificacionestécnicasy directrices,deformaquesepuedaaseguraruna altacalidadtécnicayeditorial.

3 EstructuraHTML UndocumentoHTMLKenetreseKquetasquedescribenla estructurageneraldeundocumentoydanunainformaciónsencilla sobreél.<html>,<head>y<body> LaseKquetaspuedenescribirsetantoenmayúsculascomoen minúsculas,peroserecomiendaelusodeminúsculas:<html>o <HTML>,<body>o<BODY> Editor Visualizaciónenelnavegador

4 EstructuraHTML <!doctypehtml>declaraundocumentohtml5paraquese visualicecorrectamente. DoctypecomienzaauKlizarseenHTML4.01yXHTML h\p://validator.w3.org/ <!doctypehtml>

5 EstructuraHTML <html>paraidenkficarqueestacodificadoenestelenguajey Limitar,elprincipioyelfindeldocumento. <html></html>

6 EstructuraHTML <HEAD>lacabecera,queconKeneinformaciónyrecursossobreel propiodocumentoyquenoapareceeneldocumento,destacando elktulo<title>.seráelnombrequeapareceenlacabeceradel visualizadoryenlosbuscadoresdeahílaimportanciadequesea significakvo. <head></head> <Ktle></Ktle>

7 EstructuraHTML LaeKquetametadefinevariosKposdemetadatos. Elatributocharsetespecificalacodificaciónusadaennuestra página. <metacharset="character_set"> <metacharset="ude8">

8 EstructuraHTML CharsetuFG8eslaUnicodeTransformaKonFormat8ebit representaelcódigodecaracteresunicode.escompakblecon ASCII. Permitevisualizarloscaracteresdetodoslosidioma.

9 EstructuraHTML Caracteresespeciales:paraincluireneltextocaracteresquesonpropiasdel lenguajehtmlesnecesariousarsuanotacióncodificada: h\p://dev.w3.org/html5/htmleauthor/charref Espacioenblancononebreakingspace) < Menorque < > Mayorque > & Ampersand & Comillas " apóstrofo '

10 EstructuraHTML <body>elcuerpoconkeneloselementosvisiblesenlapágina. Lasimágenes,losencabezados,lospárrafosdetexto,laslistas,las tablas,loshipervínculos <body></body>

11 EditoresHTML Antesdecomenzaratrabajarconuneditorespecífico,esrecomendableconocer elcódigo. Podemosusarprogramasquetrabajencontextoplano,sinañadirsuspropias marcasdeedición,enwindowselblocdenotasyenmacintosheltextedit. TextEditestápordefectoenRichTextesnecesarioconfigurarloparaqueguarde tutrabajocomoarchivosdetextoplano. LosdocumentosHTMLdebentenerlaextensiónhtmlohtm. UsaruneditorwysiwygcomoelAdobeDreamweaver)oelBlueGrifon h\p:// h\p:// VercomparaKva:h\p://en.wikipedia.org/wiki/Comparison_of_HTML_editors

12 EstructuraHTML Mi)primera)página)vistaenelprogramaBlocdeNotas

13 EstructuraHTML Mi)primera)página)vistaenelprogramaSublime.

14 EstructuraHTML Mi)primera)página)vistaenelprogramaDreamweaver.

15 LenguajeHTML UndocumentoHTMLinsertaeneltextoeTquetasquecontrolan losdiferentesaspectosdelapresentaciónylasemánkcadel contenido. Lostextoshabitualesestánformadosporencabezados<h1>, párrafos<p>,textoimportante<strong>enfakzado<em>listas <ul><li>...

16 SelectoresCSS ParaaplicarunesKlodepresentación,elselectordeelemento puedeserunaekquetahtml: p,h1,ul,li ElesKloafectaatodoelcontenidoincluidodentrodeesaeKqueta <p></p>,<h1></h1>,<ul></ul>. ElselectorpuedeaplicarseamásdeunaeKquetaHTML: elemento,elemento h1,h2,h3 Afectaaloselementos<h1>,<h2>y<h3>.

17 CSS ElesKlopuedeestarenlacabeceradelapágina,debeexpresarse enunelemento<style>dentrodelacabecera<head>del documento. Selector{ycadadeclaración:propiedad:valor;}

18 RecursosHTML MDN:ListadeElementosHTML5 h\ps://developer.mozilla.org/es/docs/html/html5/html5_lista_elementos W3C:HTML5elements h\p://dev.w3.org/html5/markup/elements.html WoorkUp:HTML5tagreference h\p://woorkup.com/wpecontent/uploads/2009/12/html5evisualecheate Sheet1.pdf

19 HTML/CSS Findeltema

20 Ejercicio 1.eRealizarconeditordetextoplano,KpoBlocdeNotaslaprimerapáginaWeb: <!doctypehtml> <html> <head> <metacharset="ude8"> <Ktle>Miprimerapágina</Ktle> </head> <body> Miprimerapáginaweb </body> </html> 2.eGuárdaloconextensión.html 3.eCompruebaenelnavegadorelficheroqueacabasdecrear.

21 Ejercicio 1.eEsobligatorioespecificareljuegodecaracteres"charset"enHTML5 a)sib)no 2.eEscorrectoemplearmayúsculasenlaseKquetasHTML,<HEAD><BODY>... a)sib)no 3.eElKpodedocumentoseescribeantesodespuésdeliniciodelaeKqueta <html> a)antes<!doctypehtml><html>b)después<html><!doctypehtml> 4.elaeKqueta<Ktle>seescribe: a)antesdel<head>b)dentrodel<head>c)dentrodel<body> 5.eladeclaración:<!doctypehtml>define: a)cualquierversióndedocumentohtmlb)undocumentoenhtml5

22 EjercicioeSoluciones 1.eEsobligatorioespecificareljuegodecaracteres"charset"enHTML5 a)sib)nob 2.eEscorrectoemplearmayúsculasenlaseKquetasHTML,<HEAD><BODY>... a)sib)noa 3.eElKpodedocumentoseescribeantesodespuésdeliniciodelaeKqueta <html> a)antes<!doctypehtml><html>b)después<html><!doctypehtml>a 4.elaeKqueta<Ktle>seescribe: a)antesdel<head>b)dentrodel<head>c)dentrodel<body>b 5.eladeclaración:<!doctypehtml>define: a)cualquierversióndedocumentohtmlb)undocumentoenhtml5b

23 HTML/CSS Marcasbásicas

24 HTML Lasmarcasdetextoenhtml,seempleanparaelestructurado* semán.co*del*contenido. Lostextoshabitualesestánformadosporpárrafos,palabrasen negritaocursiva,anotacionesycorrecciones,citasaotros documentosexternos... * Marcado*básico:* <p></p>*apárrafo <em></em>*adaénfasisaltextoqueencierra <strong></strong>*amáximaimportanciaaltextoqueencierra LaseDquetas<b>*paralaboldonegritaylaeDqueta*<i>*paralaitálicaocursiva, sonsimilaresvisualmente,perosinsignificadosemándco. hfp://

25 CSS EllenguajedemarcasHTML,estáorientadoaladefinicióndela estructuraylasemándcadeldocumentoynoasurepresentación gráfica. CSScontrolaelaspectográficodeldocumentomediantehojasde esdlostylesheets),indicandoalnavegadorcomosedeben visualizarloselementosdeundocumentohtml.asíseconsigue separarelaspectodelcontenido. Proyectocss*Zen*Garden: hfp://

26 CSS CadaeDquetaHTMLDeneunosvaloresdeCSSpordefecto,que puedenvariarsegúnelnavegador,quetendremosquemodificar connuestrosesdlospersonales. Visualizaciónvalorespor defectocssenelnavegador

27 HTML EjemplovaloresCSSpordefectodelnavegador,de:h1,*p,*strong,* em.* h1{ display:block; fontasize:2em; marginabefore:0.67em; marginaazer:0.67em; marginastart:0; marginaend:0; fontaweight:bold;} p{ display:block; marginabefore:1em; marginaazer:1em; marginastart:0; marginaend:0;} strong{ fontaweight:bold;} em{ fontastyle:italic;}

28 CSS Másinformaciónvalorespordefecto: W3C:* hfp://dev.w3.org/html5/markup/elements.html * Internet*Explorer:** hfp:// * Firefox:* hfp://mxr.mozilla.org/mozillaacentral/source/layout/style/html.css * Chrome,*Safari:* hfp://trac.webkit.org/browser/trunk/source/webcore/css/html.css * Opera* hfp://

29 CSS LaprimeraformadeañadirelesDloCSSaundocumentoHTMLes conelementosen*línea,*eselmétodomássencillo,añadiendoun atributostyleenelelementoconcretodentrodelapágina.*nose puedenreudlizarparavarioselementosquecompartenlasmismas propiedades. SeescribenlaspropiedadesdelesDloenlasmarcasdelHTMLcomo "nombre:valor"separadasporpuntoycoma. <body style="color: red; "> <p style="font-size: 16px; color: blue; font-family: Arial, Helvetica, sans-serif;"> Mi primera página</p>

30 CSS LasegundaformaañadeelesDloCSSenunbloque<style>*en*la cabecera*<head>)yaplicaelesdloavarioselementosdelapág.. CadaelementoHTMLDeneunacaja*asociada,dondeaplicanlos comandosdeesdlocss.elcolordefondoaplicadoacada elementohtmldelejemplo,muestralacajaasociadaacadauno.

31 CSS Lomásaconsejableparamantenerlaseparaciónentrecontenidoy presentación,enunahojadeesdlocssseparadadelhtml,quese importaconunelemento<link>enlacabecera.

32 CSS Laprincipalventajaesquelashojas deesdlosonaplicablesaunaoa muchaspáginas.permiteademás adaptarlapresentaciónapcs, móviles,tabletasoimpresorascon elatributomediaqueacdvaráel esdloespecíficodecadadisposidvo. <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link href= estilo.css" rel="stylesheet" type="text/css" media="min-width:380px)"> hfp://

33 CSS Formato*de*las*normas*y*comandos*de*es.lo* * * ElesDlosedefineentrellaves"{"y"}";elselectordeterminasobre queelementoshtmlaplicaelesdlo,cadabloquededeclaración: {declaración;*declaración}*separadasporpuntoycoma";". Cadadeclaración:propiedad*:*valor,fijaunvalorparauna propiedaddeles:lo). H1 {color : green; text-align : center}

34 HTML Listas:* <ul></*ul*>*adefinelistas,noordenadas. <ol></*ol*>*adefinelistas,ordenadas. <li></li>*adefineloselementosdelaslistas ul{ display:block; listastyleatype:disc; marginabefore:1em; marginaazer:1em; marginastart:0; marginaend:0; paddingastart:40px;} ol{ display:block; listastyleatype:decimal; marginabefore:1em; marginaazer:1em; marginastart:0; marginaend:0; paddingastart:40px;}

35 TextoHTML Citas:*<blockquote></*blockquote*>*Acitastextualesdeuntexto externo. Elatributocite="url"AIndicaladireccióndelapáginaweboriginal delaqueseextraelacita. blockquote{ display:block; marginabefore:1em; marginaazer:1em; marginastart:40px; marginaend:40px;}

36 TextoHTML Texto*preformateado:* <pre></*pre*>*amandeneelaspectovisual,loselementoenblanco semandenenigualqueeneltextooriginal. pre{ display:block; fontafamily:monospace; whiteaspace:pre; margin:1em0;}

37 TextoHTML Abreviatura*y*acrónimo:* <abbr></abbr>*aparaindicarelsignificadodeunaabreviaturaoun acrónimo.

38 TextoHTML Salto*de*línea:* <br>*asaltodelíneaeneltexto,sinlosmárgenesdefinidosparael párrafo. Pocasveceshayqueusarunsaltodelínea:Unapoesía,unlistado delcódigo,cuandocadalíneanoesunpárrafoporsísola.

39 TextoHTML Superíndices*y*subíndices:* <sup></sup>** <sub></sub>*aparaedquetareltextocomosuperosubíndices. sub{ verdcalaalign:sub; fontasize:smaller;} sup{ verdcalaalign:super; fontasize:smaller;}

40 TextoHTML code:* <code></code>*apararepresentarfragmentosdecódigo informádco. Valorespordefecto: code{ fontafamily:monospace;} Otras*marcas*de*texto:* Textoborrado<del>*einsertado<ins>*enundocumento. Listasdedefiniciones<dl>,*<dt>*y<dd>*

41 Tabla LastablassedefinenconlaseDquetas<table>,*<tr>*paracadafilay <td>*paracadacolumna<th>indicaqueunaceldaeslacabecera.

42 TablaCSS

43 TextoHTML LIBROS*WEB:*Marcadobásicodetexto hfp://librosweb.es/xhtml/capitulo_3/ marcado_basico_de_texto.html Con*Clase:**Texto hfp://html.conclase.net/w3c/html401aes/struct/text.html MDN:*CSS hfps://developer.mozilla.org/enaus/docs/web/css

45 Ejercicio 1.AEnelarchivocreadoenelejercicioanterior"laprimerapáginaWeb",cambiar elcolordelfondo,delafuente,lafamiliadpográficayeltamaño.

46 Ejercicio 1.ALosvaloresdeesDlosCSSpordefectodelnavegador,sonigualesentodoslosnavegadores a)sib)no 2.AQueesmásaconsejable,queelesDloesteenlalíneaoenlacabeceradeldocumento. a)enlalíneab)enlacabecera 3.AQueesmásaconsejable,queelesDloesteenlacabeceradeldocumentooenarchivoCSSaparte. a)enlacabecerab)enhojadeesdlocssaparte 4.ElusodelosesDlosCSSenlalíneadelHTML, estádesaconsejado? a)sib)no 5.A PuedehaberesDlosdiferentesdependiendodeldisposiDvo?. a)sib)noc)si,sielesdlocssseaplicaenlalíneadelhtml 6.AlaeDqueta<th>representa: a)unaceldaimportantedelatablab)unaceldadelatablac)unaceldaqueescabeceradelatabla 7.ALaeDqueta<em>daénfasisaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoredondad)comonegrita 8.ALaeDqueta<strong>damáximaimportanciaaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoversalitad)comonegrita 9.ALaslistasdeinformaciónnoordenadasseidenDficanconlaeDqueta: a)<ul>b)<ol>c)<dl> 10.ALaeDqueta<blockquote>seempleaparatratar: a)parabloquesdetextob)enpárrafossangradosc)pararepresentarcitasd)pararepresentar fragmentosdecódigoinformádco

47 EjercicioASoluciones 1.ALosvaloresdeesDlosCSSpordefectodelnavegador,sonigualesentodoslosnavegadores a)sib)nob 2.AQueesmásaconsejable,queelesDloesteenlalíneaoenlacabeceradeldocumento. a)enlalíneab)enlacabecerab 3.AQueesmásaconsejable,queelesDloesteenlacabeceradeldocumentooenarchivoCSSaparte. a)enlacabecerab)enhojadeesdlocssaparteb 4.ElusodelosesDlosCSSenlalíneadelHTML, estádesaconsejado? a)sib)noa 5.A PuedehaberesDlosdiferentesdependiendodeldisposiDvo?. a)sib)noc)si,sielesdlocssseaplicaenlalíneadelhtmla 6.AlaeDqueta<th>representa: a)unaceldaimportantedelatablab)unaceldadelatablac)unaceldaqueescabeceradelatablac 7.ALaeDqueta<em>daénfasisaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoredondad)comonegritab 8.ALaeDqueta<strong>damáximaimportanciaaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoversalitad)comonegritad 9.ALaslistasdeinformaciónnoordenadasseidenDficanconlaeDqueta: a)<ul>b)<ol>c)<dl>a 10.ALaeDqueta<blockquote>seempleaparatratar: a)parabloquesdetextob)enpárrafossangradosc)pararepresentarcitasd)pararepresentar fragmentosdecódigoinformádcoc

48 HTML Estructura

49 EstructuraHTML Loselementoshtmlpuedenvisualizarsecomobloqueocomoenlínea. Loselementosbloquesblockocupantodoelanchodelapáginayfuerzanauna nuevalíneaantesydespués. <article> <aside> <canvas> <div> <footer> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <header> <p> <pre> <section> <ul> hbps://developer.mozilla.org/eneus/docs/html/blockelevel_elements Loselementosenlíneainlinesóloocupanelanchonecesarioynofuerzan nuevaslíneas. <em> <a> <br> <img> <span> <button> <input> <select> <textarea> hbps://developer.mozilla.org/eneus/docs/html/inline_elements

50 EstructuraHTML DIV, Elelemento<div>esunelementodebloquequeseemplea contenerensuinteriorotroselementoshtml. Elelemento<div>,noLeneningúnsignificado,essemánLcamente neutro. EmpleandoCSS,elelemento<div>,sepuedeuLlizarpara estructurareldocumentoengrandesbloquesdecontenido. EldiveslapropuestaparasusLtuiraloselementos<table>,parael diseño.elpropósitodelelemento<table>,esparamostrardatos tabulados.

51 <div> <div>definebloqueungenéricoempleadoparaformatearconcss. <div,id="caja" class="cabecera">,.,</div> AtributoID:idenLficaunívocamenteunelementoHTMLenuna página.unelementohtmlsolodebetenerunatributoidyeste debeserúnicoenlapágina.elselectorcsscaja,serefiereal elementoconatributoid="caja,comoencaja,{color:blue},, AtributoCLASS:defineunaclasedeelementosHTML.Unelemento puedetenervariosatributosclass.,elselectorcss.cabecera,se refiereatodosloselementodelaclasecabeceraquellevanel atributoclass="cabecera"),comoen.cabecera,{color:red},,,,

52 EstructuraHTML SPAN, ElelementoHTML,<span>,esunelementoenlíneaqueseemplea comouncontenedordetexto. Elelemento<span>,noLeneningúnsignificadoespecial,es semánlcamenteneutro.. CuandoseuLlizajuntocon,CSS,elelemento<span>,sepuede ullizarparaestablecerlosatributosdeeslloparalaspartesdel textomedianteunidenlficadoridounaclaseclass.

53 CSS Loselementos<DIV>y<SPAN>seempleanparadefinirnormasde esllomásespecíficas. Elatributo,id,seempleaparaidenLficarunelementoúnico. ElatributoclasscuandohaymásdeunelementoquemanLenen unarelaciónsignificalva,puedesercomparlrelesllo.

54 EstructuraHTML EnHTML5,losbloques,sonsusLtuidosporbloquessemánLcosque muestransignificadoporsimismos. <header> <nav> <seclon> <arlcle> <aside> <footer>

55 EstructuraHTML UnapáginadeesteLporealizadacon<div>,quedaríadela siguientemanera. Eshabitualunacajacontenedorparaimpedirqueocupetodalapáginacuandolaventana delanavegadoresmuygrandeocontrolarladisposicióndeloselementoscuandoesmuy pequeña. +,CSS,

56 EstructuraHTML UnapáginadeesteLporealizadaconlosnuevosbloques semánlcosdelhtml5quedaría. +,CSS,

57 EstructuraHTML LaestructuraHTML,,deberealizarseenelsenLdológicodelectura deldocumento,cuandolapáginaseveasinaplicarlosesllosno pierdasusignificado.

58 HerenciaCSS ParaentendercomofuncionanlosselectoresylaherenciaCSSes necesarioentenderquéeselárboldeldocumento.

59 HerenciaCSS elárboldeldocumentodelejemploanterior: html head body Ltle div.caja header nav arlcle footer h1 ul li li li a a a

60 HerenciaCSS Ancestoresunelementoconectadoperomásarribaenla estructuradeldocumento html head body Ltle div.caja Ancestor header nav arlcle footer h1 ul descendientes li li li, a a a

61 HerenciaCSS Descendientessonloselementosconectadosperomásabajoenla estructuradeldocumento. html head body Ltle div.caja Ancestor header nav arlcle footer h1 ul descendientes li li li, a a a

62 HerenciaCSS Parenteselelementoconectadoydirectamentesobreun elementoenlaestructuradeldocumento. html head body Ltle div.caja header nav arlcle footer h1 ul Parent descendientes li li li, a a a

63 HerenciaCSS Childeselelementoconectadoydirectamentedebajodeun elementoenlaestructuradeldocumento. html head body Ltle div.caja Child header nav arlcle footer h1 ul li li li a a a

64 HerenciaCSS Siblings,sonloselementosquecompartenunmismopadreenla estructuradeldocumento. html head body Ltle div.caja header nav arlcle footer h1 ul Parent Siblings li li li,

65 HerenciaCSS SidefinimosunesLloenelbody,todosloselementossituados debajoenelárboldeldocumento,heredanesapropiedad.

66 HTML Findeltema

67 Ejercicio RealizaunesquemasencillodeestedocumentoHTMLasuestructuraLpoárbol,queresumabrevementelas relacionesdirectasentreelementosdelapágina,clarificandolajerarquíadelárbol. <!doctypehtml> <html> <head> <metacharset="u_e8"> <Ltle>Ejercicioopcionalárbol</Ltle> </head> <body> <header> <imgsrc="logolpo.jpg"alt="firefoxlogo"width="100"height="100"> </header> <nav> <ul> <li>menú1</li> <li>menú2</li> <li>menú3</li> </ul> </nav> <arlcle> <h1>titulardenivel1</h1> <p>contenidodelapágina</p> </arlcle> <footer>piedepágina</footer> </body> </html>

68 Ejercicio 1.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<h1>b)<hr>c)<span>d)<p> 2.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<p>b)<hr>c)<ul>d)<strong> 3.ECuáldelassiguienteseLquetasNOesenlíneainline: a)<em>b)<span>c)<pre>d)<a> 5.ECuáldelassiguienteeLquetadeestructuranoessemánLcaHTML5 a)<header>b)<seclon>c)<pie>d)<aside> AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul></body></html> 6.ElaeLquetaulseriael"parent"de: a)bodyb)elpropioulc)loslid)html 7.Ebodyes"ancestor"deLtle: a)sib)no AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul> <p>estoesunpárrafo</p></body></html> 8.ElaeLqueta,pseriaelhijo"child"de: a)bodyb)ulc)elúllmolid)detodoslosanteriores 9.ElaeLquetas,serianhermanos"siblings": a)lostreslib)lostresliyelpc)uld)lasrespuestasaybsoncorrectas 10.ECuáldelassiguientesafirmacionesesincorrecta a)uleshijo"child"debodyb)peshijo"child"debodyc)peshijo"child"deuld)lieshijo"child"deul

69 EjercicioESoluciones 1.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<h1>b)<hr>c)<span>d)<p>c 2.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<p>b)<hr>c)<ul>d)<strong>d 3.ECuáldelassiguienteseLquetasNOesenlíneainline: a)<em>b)<span>c)<pre>d)<a>c 5.ECuáldelassiguienteeLquetadeestructuranoessemánLcaHTML5 a)<header>b)<seclon>c)<pie>d)<aside>c AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul></body></html> 6.ElaeLquetaulseriael"parent"de: a)bodyb)elpropioulc)loslid)htmlc 7.Ebodyes"ancestor"deLtle: a)sib)nob AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul> <p>estoesunpárrafo</p></body></html> 8.ElaeLqueta,pseriaelhijo"child"de: a)bodyb)ulc)elúllmolid)detodoslosanterioresa 9.ElaeLquetas,serianhermanos"siblings": a)lostreslib)lostresliyelpc)uld)lasrespuestasaybsoncorrectasa 10.ECuáldelassiguientesafirmacionesesincorrecta a)uleshijo"child"debodyb)peshijo"child"debodyc)peshijo"child"deuld)lieshijo"child"deulc

70 CSS Prioridad

71 SelectoresCSS ElselectoraplicaatodosloselementosHTMLdelapáginaconesa e9quetap). Elselectormúl+pledeCSS,incluyevariosselectoresseparadospor coma,),aplicandoeles9loacualquierelementoconalgunadelas marcasincluidas:h1,h2,h3. Elselectorpuedeincluire9quetasseparadassoloporespacios.El selectoraplicarásoloaelementosconlaúl9mamarcaul),conlos anteriorescomoancestros,esdecir.cajadeberáserancestrode navynavdeberáserancestrodeul.

72 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=0ID C=0clases D=1elemento Puntuación=0,0,0,1 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

73 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=0ID C=0clases D=2marcas Puntuación=0,0,0,2 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

74 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=1ID C=1clase D=1elemento Puntuación=0,1,1,1 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

75 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=1ID C=0clases D=2marcas Puntuación=0,1,0,2 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

76 PrioridadCSS Laganadoraes,caja.cabecerah1=0,1,1,1 Ganadora: A=0es9losenlínea B=1ID C=1clase D=1elemento Puntuación=0,1,1,1

77 PrioridadCSS Cuandodosdeclaraciones9enenelmismovalor: Serálaúl9maespecificada

78 SelectoresCSS Selectoruniversal * Afectaatodosloselementos.

79 ReglasCSS Modificacióndees9los,porelusuarioenelnavegador:9pograYas

80 PrioridadCSS ReglasadicionalesdeprioridaddelasdeclaracionesCSSordenadas demenoramayor: CSSpordefectodelNavegadornavegador) CSSenpreferenciasdeusuariodelnavegadorusuario) CSSenpáginaHTMLoscriptCSSdiseñador) CSSenpáginaHTMLoscriptCSScon!importantdiseñador),p.e. body{color:blue!important;} CSSenpreferenciasdeusuariodelnavegadorcon!important usuario),p.e.body{color:blue!important;}

81 RecursosCSS KsesoCSS:CSSbásico:Cascada,especificidadyherencia h\p://ksesocss.blogspot.com/2012/05/css`basico`cascada`especificidad`y.html Dev.Opera:RecorriendoelárbolDOM h\p://dev.opera.com/ar9cles/view/traversing`the`dom`es/ LIBROSWEB:Árboldenodo h\p://librosweb.es/javascript/capitulo_5/arbol_de_nodos.html UOC:Herenciaycascada h\p://mosaic.uoc.edu/ac/le/es/m6/ud2/ LIBROSWEB:Colisionesdees9los h\p://librosweb.es/css/capitulo_2/colisiones_de_es9los.html CSS:SpecifityWars h\p://

82 RecursosHTML BruceLawson:HTML5ar9clesandsec9ons:what sthedifference? h\p:// whats`the`difference/ html5doctor:thear9cleelement h\p://html5doctor.com/the`ar9cle`element/ HTM5pasoapaso:div,sec9onyar9cle h\p://html5pasoapaso.blogspot.com.es/2011/08/div`sec9on`y` ar9cle.html ondho:html5discusionesentrear9cleysec9on) h\p://

83 CSS Findeltema

84 Ejercicio RealizarenelsiguienteHTML5declaracionesdees9loCSSqueafectenalmismoelemento,el9tularh1,con diferentespuntuacionesdeprioridad,eindicarsupuntuacióncomouncomentarioenelpropiohtml: <!doctype html> <html> <head> <meta charset="utf-8"> <title>herencia</title> </head> <body> <div id="caja"> <header class="cabecera"> <h1>cabecera: header</h1> </header> </div> </body> </html>

85 Ejercicio QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9lopordefectodelnavegador`h2{color:black;}2.Ès9lofijadoporeldiseñador`h2{color:green;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9lopordefectodelnavegador`h2{color:black;}2.Ès9lofijadoporelusuario`h2{color:green;} 3.Ès9loenhojaCSSexternaoenelHead`h2{color:blue;}4.Ès9loenhojaCSSexternaoenelHead`h2 {color:lime!important;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`h2.news{color:green;}2.Ès9loenhojaCSSexternaoenelHead `h2{color:blue;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`h2{color:blue;}2.ÈnlalíneasiguientedelCSS`h2{color: purple;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.Ès9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.ès9loenhojacssexternaoenelhead`h2{color:blue;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.Ès9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.ès9loenhojacssexternaoenelhead`h2{color:blue;}4.ès9loenhojacss externaoenelhead`h2{color:purple;}5.ès9loenhojacssexternaoenelhead`divcajah2{color: black;}

86 Ejercicio`Soluciones QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9lopordefectodelnavegador`h2{color:black;}2.Ès9lofijadoporeldiseñador`h2{color:green;}2 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9lopordefectodelnavegador`h2{color:black;}2.Ès9lofijadoporelusuario`h2{color:green;} 3.Ès9loenhojaCSSexternaoenelHead`h2{color:blue;}4.Ès9loenhojaCSSexternaoenelHead`h2 {color:lime!important;}4 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`h2.news{color:green;}2.Ès9loenhojaCSSexternaoenelHead `h2{color:blue;}1 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`h2{color:blue;}2.ÈnlalíneasiguientedelCSS`h2{color: purple;}2 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.Ès9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.ès9loenhojacssexternaoenelhead`h2{color:blue;}1 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.Ès9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.ès9loenhojacssexternaoenelhead`h2{color:blue;}4.ès9loenhojacss externaoenelhead`h2{color:purple;}5.ès9loenhojacssexternaoenelhead`divcajah2{color: black;}5

87 HTML/CSS Navegación

88 NavegaciónHTML Unmenúesunalistadeenlaces.Serecomiendausarlasmarcasde lista<ul>)<li>)yelenlace<a>,queesloestablecidoporlasnormas deaccesibilidad.

89 NavegaciónHTML MenúverAcal)

90 NavegaciónCSS LosvaloresCSSpordefectodelalistaydelenlace,debenser ajustadosanuestrasnecesidades.) EjemplomenúverAcal myspace

91 NavegaciónHTML Menúhorizontal)

92 NavegaciónCSS CSSmenúhorizontal.) Ejemplomenúhorizontal BBC

93 MenúsFirefoxOS LosmenúsrecomendadosparalasaplicacionesenFirefoxOS FirefoxOSAppBuMons: hmp://

94 IconosparaaplicacionesFirefoxOS UniconoparaunaaplicaciónFirefoxOSesunaimagendepíxeles 60x60píxelsenformatoPNGde24bits. Hayotrastamaños necesariosparaotros disposiavos: 16px,32px,48px, 60px,128px,256px. Guíasdediseñodemozilla,)paradescargarlasplanAllasdelosiconos hmp://

95 RecursosnavegaciónCSS Cristalab:)MenúsverAcales hmp:// CSS)Blog:)CrearunmenúhorizontalsimpleconCSS hmp:// w3schools:)menúhorizontal hmp://

97 Ejercicio 1.PRealizarelCSSdeunmenúverAcaldeestehtml: <!doctypehtml><html><head><metacharset="uhp8 ><Atle>Menú</Atle></head> <body> <nav><h1>discover</h1><ul><li><ahref=""class="welcome">welcome</a></li><li><ahref="" class="featured">featured</a></li><li><ahref=""class="people">people</a></li><li><ahref="" class="music">music</a></li><li><ahref=""class="mixes">mixes</a></li><li><ahref="" class="videos">videos</a></li><li><ahref=""class="radio">radio</a></li></ul></nav> </body></html> 2.PRealizarelCSSdeunmenúhorizontaldeestehtml: <!doctypehtml><html><head><metacharset="uhp8 ><Atle>Menú</Atle></head> <body> <nav><h1>bbc</h1><ul><liclass="news"><ahref="">news</a></li><liclass="sport"><ahref="">sport</a></ li><liclass="weather"><ahref="">weather</a></li><liclass="capital"><ahref="">capital</a></li> <liclass="culture"><ahref="">culture</a></li><liclass="autos"><ahref="">autos</a></li> <liclass="tv"><ahref="">tv</a></li><liclass="radio"><ahref="">radio</a></li><liclass="more"><a href="">more </a></li></ul><divclass="clear"></div></nav> </body></html>

98 Ejercicio 1.PunmenúserealizaaparArdeunalistadeelementos,queseconvierteenunalistadeenlaces,sus eaquetasson: a)ul>li>ab)p>li>ac)p>ad)todaslasanteriores 2.PElselectora:hover,seempleaparadefinirelesAlode: a)elenlaceacavob)elenlacevisitadoc)cuandoelratónpasasobreelenlaced)todaslas anteriores 3.PEnelmenúhorizontal,hayquemodificarlosvalorespordefectodelalistaparaqueestén horizontal,serealizamodificandoelesalodelselectorypropiedad: a)ul{display:inline;}b)il{display:inline;}c)a{display:inline;}d)cualquieradelasanteriores 4.PLadiferenciaentreunelementoconenlaceyeltextosinenlace,seaconsejaporusabilidadquesea visiblementediferente a)sib)no 5. QuécondicionesdebecumpliruniconoparaFirefoxOS? a.debeserunaimagendeformatopng.b.debeserunaimagendeformatojpg.c.debemedir 3REM.d.Debemedir3REMpíxelesencolorblanco.

99 EjercicioPSoluciones 1.PunmenúserealizaaparArdeunalistadeelementos,queseconvierteenunalistadeenlaces,sus eaquetasson: a)ul>li>ab)p>li>ac)p>ad)todaslasanterioresa 2.PElselectora:hover,seempleaparadefinirelesAlode: a)elenlaceacavob)elenlacevisitadoc)cuandoelratónpasasobreelenlaced)todaslas anterioresc 3.PEnelmenúhorizontal,hayquemodificarlosvalorespordefectodelalistaparaqueestén horizontal,serealizamodificandoelesalodelselectorypropiedad: a)ul{display:inline;}b)il{display:inline;}c)a{display:inline;}d)cualquieradelasanterioresb 4.PLadiferenciaentreunelementoconenlaceyeltextosinenlace,seaconsejaporusabilidadquesea visiblementediferente a)sib)noa 5. QuécondicionesdebecumpliruniconoparaFirefoxOS? a.debeserunaimagendeformatopng.b.debeserunaimagendeformatojpg.c.debemedir 3REM.d.Debemedir3REMpíxelesencolorblanco.A

100 HTML/CSS Texto

101 TextoCSS Lasmarcasquepermitendefinirlaspropiedadesyaspectos visualesdeunafuente. fontfamilyeslapropiedadquepermitedefinirlafuenteparaun elemento. P { font-family: "Times New Roman, Georgia, Serif; } h?p://

102 TextoCSS LaspropuestasdefamiliaFpográficaterminanconunafamilia+ genérica+alterna1va. P { font-family:"times New Roman",Georgia,Serif; } Valoresdelasfamiliasgenéricasson: 'serif'ej.:times) 'sansoserif'ej.:helvefca) 'cursive'ej.:zapfochancery) 'fantasy'ej.:western) 'monospace'ej.:courier) h?p://

103 TextoCSS Familia+1pográfica.EsunaseriedeFposclasificables,porsupeso, inclinación,proporción,espaciado,ausenciaopresenciade serifas EnFpograWadigital,enlosformatosactuales,unaserie completaestaincluidaenunúnicoarchivo,queconfenelosfpos independientes.

104 TextoCSS Fontweight.Especificaelpesodelaletra,segúnlossiguientes valores. normal bold bolder lighter inherit

105 TextoCSS fontstrech++especificaelanchodelafuente,lamayoríadelos navegadoresnosoportanestapropiedad normal ultraocondensed extraocondensed condensed semiocondensed semioexpanded expanded extraoexpanded ultraoexpanded inherit Fontstyle.EspecificaelesFlodelafuente.Normal,condensada... normal italic oblique inherit h?ps://developer.mozilla.org/enous/docs/web/css/fontostretch

106 TextoCSS fontsize++especificaeltamañodelafuente <absoluteosize> <relafveosize> <length> <percentage> inherit Tamañopredeterminadoparaeltextoesde16px16px=1em). <absolutesize>+losvaloresposiblesson: [xxosmall xosmall small medium large xolarge xxolarge] <rela1vesize>++unvalorrelafvoalheredado,mayoromenor: [larger smaller] <length>+esunvalorabsolutodeltamañogeneralmenteenpx <percentage>+representaunvalorenfunciónalvalorheredado. scaling+ factor XHTML+ headings xxsmall xsmall small medium large xlarge xxlarge + 3/5 3/4 8/9 1 6/5 3/2 2/1 3/1 h6 h5 h4 h3 h2 h1 h?ps://developer.mozilla.org/enous/docs/web/css/fontosize

107 TextoCSS fontvariant+especificalavariantedelafuente. Valor:normal smallocaps eslaversiónversalitadeunafuente

108 TextoCSS lineheight+ defineelinterlineadodeltexto normal <número> <medida> <porcentaje> inherit ElnúmeroquemulFplicadoeltamañodelafuenteestableceel altodelalínea Medida,eslaalturadelalíneacomounvalorfijoenpx,pt Elporcentajedelaltodelalíneaenfuncióndeltamañodela fuente h?p:// filename=playcss_lineoheight&preval=25px

109 @fontcss "woff" String Font+Format Common+extensions WOFFWebOpen FontFormat).woff "truetype" TrueType.t "opentype" OpenType.t,.ou "embedded opentype" EmbeddedOpenType.eot "svg" SVGFont.svg,.svgz

110 @fontcss Compa1bilidad+ DependedelnavegadorydelsistemaoperaFvo, LamayoríadenavegadoresySO. WOFFWebOpenFontFormat ElWebOpenFontFormatWOFF)esunformatodeFpodeletra parausarseenpáginasweb.fuedesarrolladoporlafundación Mozilla,OperaSoxwareyMicrosox,yestáenelprocesode normalizaciónporelw3cyconverfrseenunestándar. EOTEmbeddedOpenType EmbeddedOpenTypeEOT)estasfuentessonunaforma compactadeopentypeparasuusocomofuentesincrustadasen laspáginaswebyasuvezprotegenlosderechosdeautor. h?p://caniuse.com/fonuace

111 @fontcss SVGScalableVectorGraphics SVGesunaespecificaciónparadescribirgráficosvectoriales bidimensionales,estáfcooanimadoyfuecreadocomoalternafva deformatoabiertoaflash.seempleacomoformatofpográficoen lawebparadisposifvosiosipad,iphoneyipod) TrueType++ TrueTypeesunformatoestándardeFposdeletraescalables desarrolladoinicialmenteporappleafinalesdeladécadadelos ochenta.escompafbleconfirefox3.5+,safari3.1+,chrome4+y Opera10+. ConverFrfuentes h?p://

112 ensuordenador. fontofamily Valor:<familyOname> Src++ [<uri>[format<string>[,<string>]*)] <fontofaceoname>][,<uri>[format<string>[, <string>]*)] { font-family: FiraMono; src: urlfiramono-regular.woff) format"woff"), urlfiramono-regular.eot) format"embedded-opentype"); } p { font-family: FiraMono, serif; } h?p:// h?ps://

113 Descargarlafuenteyconocerlasrecomendacionesdeusoen: h?p:// TipograWaFirefoxOS Fira+Sans+para+Firefox+OS+ FirefoxOSuFlizaFiraSans,unafuenteFpográficaespecíficaendiferentescuerposy pesos.diseñadaporerikspiekermannyralphdecaroisparafirefoxos.

114 Esposibleelusodefuentesalojadasenservidoresexterno Google+Fonts+ Enlacabecera <link href=' css?family=caesar+dressing' rel='stylesheet' type='text/ css'> EnelesFlo p { font-family: 'Caesar Dressing', cursive; } + h?p://webfonts.info/fontsoavailableofontofaceoembedding

115 RecursosCSS W3C:+CSSFontsModuleLevel3 h?p:// + FONT+SQUIREL+ h?p:// Google+FONT+ h?p:// Typekit+ h?ps://typekit.com/ Red+Team+Design:+GoogleFontAPIandTypekitsoluFonsVS@fontOface h?p://

117 Ejercicio Realizaunapáginaquecontengaunpárrafoconfuentesvinculadas,conlafuentedelSOdefirefox FiraOpenType,quepuedesdescargaraquí: h?ps:// Yotropárrafoconfuentesvinculadasdegooglefonts

118 Ejercicio a)peroelusuariodebetenerlasfuentesinstaladasensudisposifvob)elusuarionoes necesarioquetengalasfuentesinstaladasensudisposifvo 2.Ocualdelossiguientesformatosnoesunformatodefuente: a).woofb).svgc).swfd).otf 3.Ocualdelossiguientesformatosnoesunformatodefuente: a).woofb).ttfc).eotd).png fonts: a)seenlazamedianteelusodeunaefqueta<link>enlacabeceradelapáginab)esnecesario bajarlafuenteyalojarlaentupropioservidor 5. CuáleslaFpograWacorporaFvadeFirefoxOS? a)firasansyfiramono.b)firasansparaelcorreoelectrónicoyitcofficinaparaelrestodelas aplicaciones.c)firasansenlostamañosgrandesyfiramonoenlostamañospordebajode11 px.d)ffmetayffthesans.

119 EjercicioOSoluciones a)peroelusuariodebetenerlasfuentesinstaladasensudisposifvob)elusuarionoes necesarioquetengalasfuentesinstaladasensudisposifvob 2.Ocualdelossiguientesformatosnoesunformatodefuente: a).woofb).svgc).swfd).otfcswfesunformatodearchivodeadobeflash) 3.Ocualdelossiguientesformatosnoesunformatodefuente: a).woofb).ttfc).eotd).pngdpngesunformatodeimagen) fonts: a)seenlazamedianteelusodeunaefqueta<link>enlacabeceradelapáginab)esnecesario bajarlafuenteyalojarlaentupropioservidora 5. CuáleslaFpograWacorporaFvadeFirefoxOS? a)firasansyfiramono.b)firasansparaelcorreoelectrónicoyitcofficinaparaelrestodelas aplicaciones.c)firasansenlostamañosgrandesyfiramonoenlostamañospordebajode11 px.d)ffmetayffthesans.a

120 CSS div

121 ImágenesHTML LasimágenessevinculanenunapáginaHTMLconlae8queta<img>conlos atributos src=url alt=textoalterna8vodelaimagen width=ancho height-=alto

122 EstructuraCSS lae8queta<div>ofrecealosdiseñadoreslaflexibilidadyelcontrol sobrelaposicióncuandosecombinaconlaspropiedadescss. Unae8quetadivpuedetener,instruccionesdeformatodela familiadefuente,color,bordes,etc),atributosdealturayanchura, posicionamiento Tamaño- Hayquetenercuidadoalempleareltamaño,elcontenidosegúnel navegadorpuededesbordareltamañodeundiv.evitardefinir altossinosonnecesarios. div{ width: 400px; }

123 EstructuraCSS lapropiedaddisplay,permiteestablecerel8podecajadeun elemento.losvaloresmásu8lizadosson:inline,blockynone.

124 EstructuraCSS Padding,marginyborder-

125 EstructuraCSS Background- back_mantel.pngdh.pngdh_2.png- dh_3.png- ac.jpg- hsp://

126 EstructuraCSS Background-ejemplo3imágenes f03.png- f02.png- f01.png- div { background: urltexto/f01.png) left bottom repeat-x, urltexto/f02.png) left bottom no-repeat, urltexto/f03.png) left top repeat-x; background-color: a4d3ff; }

127 EstructuraCSS CSS3permiteañadirbordes-y-bordes-redondeados- borderxradius:24px; borderxtopxle\xradius:24px; borderxradius:24px0; borderxradius:36px12px; borderxtopxrightxradius:50px30px; borderxbosomxrightxradius:50px30px; borderxradius:50; borderxradius:505000; borderxradius:020px20px0; borderxradius:20px0020px; borderxradius:050050; borderxtopxle\xradius:5020; borderxtopxrightxradius:5020; borderxbosomxle\xradius:5020; borderxbosomxrightxradius:5020; hsp://

128 EstructuraCSS CSS3permiteañadirsombras- boxxshadow:x5pxx5px888; boxxshadow:x5pxx5px5px888; boxxshadow:x5pxx5px05px888; boxxshadow:x5pxx5px5px5px888; boxxshadow:005px888; boxxshadow:005px5px888; boxxshadow:insetx5pxx5px888; boxxshadow:insetx5pxx5px5px888; boxxshadow: insetx5pxx5px05px888; boxxshadow: insetx5pxx5px5px5px888; hsp://dev.w3.org/csswg/cssxbackgrounds/ boxxshadow:inner005px888; boxxshadow:inset005px5px888;

129 RecursosCSS CSS3-GeneratorhSp://css3generator.com/ CSS3-Gradient-GeneratorhSp://gradients.glrzad.com/ {CSS}-Portal-C-on-line-generatorhSp:// CSS3-MAKER:- hsp:// CSS3.comhSp://

130 CSS Findeltema

131 Ejercicio Realizaunapáginaquecontengaun<div>conalmenos3imágenesdefondo,bordesredondeadosy sombra

132 Ejercicio 1.XLascaracterís8casdeunacaja<div>sonelcontenido,elmargeninteriorpadding,elbordebordery elmargenmargin,sielanchodeundivesde400px,elpading20pxyelborde5px, cuantomideel anchototaldelacaja?: a)400pxb)425pxc)450pxd)440px 2.XEsposiblecolocarmásdeunaimagendefondoenunacaja<div> a)sib)no 3.XLosvaloresdesombraparaunacaja<div>:boxXshadow:10px10px5px2pxrgba100,100,100, 0.5); elcolordelasombraes: a)rojob)verdec)azuld)gris 4.XLosvaloresdesombraparaunacaja<div>:boxXshadow:inset5px5px20px5pxCCCCCC; Lasombraes: a)decolorrojob)interiorc)de30pxdedesplazamientohorizontald)exterior 5.XLosvaloresdebordesredondeadosparaunacaja<div>:borderXradius:10px0px10px0px; elbordedelacaja: a)esigualenlos4esquinasb)esigualenlatople\ybosomle\c)esigualentople\ytopright d)esigualentople\ybosomright

133 EjercicioXSoluciones 1.XLascaracterís8casdeunacaja<div>sonelcontenido,elmargeninteriorpadding,elbordebordery elmargenmargin,sielanchodeundivesde400px,elpading20pxyelborde5px, cuantomideel anchototaldelacaja?: a)400pxb)425pxc)450pxd)440pxc 2.XEsposiblecolocarmásdeunaimagendefondoenunacaja<div> a)sib)noa 3.XLosvaloresdesombraparaunacaja<div>:boxXshadow:10px10px5px2pxrgba100,100,100, 0.5); elcolordelasombraes: a)rojob)verdec)azuld)grisd 4.XLosvaloresdesombraparaunacaja<div>:boxXshadow:inset5px5px20px5pxCCCCCC; Lasombraes: a)decolorrojob)interiorc)de30pxdedesplazamientohorizontald)exteriorb 5.XLosvaloresdebordesredondeadosparaunacaja<div>:borderXradius:10px0px10px0px; elbordedelacaja: a)esigualenlos4esquinasb)esigualenlatople\ybosomle\c)esigualentople\ytopright d)esigualentople\ybosomrightd

134 CSS Estructura

135 EstructuraCSS CSS3permiteposicionarlosdivenlapágina,float <styletype="text/css"> div{ float:lea; padding:5px; margindright:5px; margindbogom:5px; border:1pxsolid666; } </style>

136 EstructuraCSS CSS3permiteposicionarlosdivenlapágina,floatyclear/ Confloateldiv flota aunaposiciónrelaova.

137 EstructuraCSS CSS3permiteposicionarlosdivenlapágina,floatyclear/ Conclearrompeelesquemadelfloat.

138 EstructuraCSS Usodefloatyundivclear/querompeelesquemadelfloat.

139 EstructuraCSS CSS3permiteposicionarlosdivenlapágina,medianteposiOon, absoluta,relaovaofija. Conposiciónabsolutaeldivsaledelflujodelcontenido.

140 EstructuraCSS Conposiciónfijaeldivnocambiadeposiciónenelescaladodel navegadoroelscrollenlapágina.

141 EstructuraCSS Lascajas/flexibles,seconsigueconunnuevovalordelapropiedad display,display:flex;)delacajapadre. LaorientaciónsedefineconflexDdirecOonypuedeserhorizontalo verocal,segúnseafilaocolumna. LoselementosflexiblesOenendiferentesformasdealinearsey distribuirsejusofydcontentyalignditems. Cadaunodeloselementos puedeordenarseolos diferentesmodoscrecero Reducirseparaocupar elespacio.

142 EstructuraCSS Lanuevapropiedaddecajas/flexibles,eslaformamássencillade controlarelaspectodelascajasdiv.

143 RecursosCSS MDN/UsandolascajasflexiblesCSS/ hgps://developer.mozilla.org/es/docs/web/guide/css/ Cajas_flexibles CSS7TRICKSACompleteGuidetoFlexbox hgp://cssdtricks.com/snippets/css/adguidedtodflexbox/

144 CSS Findeltema

145 Ejercicio Realizalaestructuradeunapáginaquecontengatodosloselementosqueseindicanenelsiguiente esquema: