HTML/CSS Miprimerapágina
QuéesHTML Esunlenguajedemarcasparaformateary estructurarundocumento,quepuedeleerseen cualquiernavegador. <html> </html> EstandarizadoenlanormaISOdeSGML StandardGeneralizedMarkupLenguage). ElW3Cdesarrollaespecificacionestécnicasy directrices,deformaquesepuedaaseguraruna altacalidadtécnicayeditorial.
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
EstructuraHTML <!doctypehtml>declaraundocumentohtml5paraquese visualicecorrectamente. DoctypecomienzaauKlizarseenHTML4.01yXHTML h\p://validator.w3.org/ <!doctypehtml>
EstructuraHTML <html>paraidenkficarqueestacodificadoenestelenguajey Limitar,elprincipioyelfindeldocumento. <html></html>
EstructuraHTML <HEAD>lacabecera,queconKeneinformaciónyrecursossobreel propiodocumentoyquenoapareceeneldocumento,destacando elktulo<title>.seráelnombrequeapareceenlacabeceradel visualizadoryenlosbuscadoresdeahílaimportanciadequesea significakvo. <head></head> <Ktle></Ktle>
EstructuraHTML LaeKquetametadefinevariosKposdemetadatos. Elatributocharsetespecificalacodificaciónusadaennuestra página. <metacharset="character_set"> <metacharset="ude8">
EstructuraHTML CharsetuFG8eslaUnicodeTransformaKonFormat8ebit representaelcódigodecaracteresunicode.escompakblecon ASCII. Permitevisualizarloscaracteresdetodoslosidioma.
EstructuraHTML Caracteresespeciales:paraincluireneltextocaracteresquesonpropiasdel lenguajehtmlesnecesariousarsuanotacióncodificada: h\p://dev.w3.org/html5/htmleauthor/charref Espacioenblancononebreakingspace) < Menorque < > Mayorque > & Ampersand & Comillas " apóstrofo '
EstructuraHTML <body>elcuerpoconkeneloselementosvisiblesenlapágina. Lasimágenes,losencabezados,lospárrafosdetexto,laslistas,las tablas,loshipervínculos <body></body>
EditoresHTML Antesdecomenzaratrabajarconuneditorespecífico,esrecomendableconocer elcódigo. Podemosusarprogramasquetrabajencontextoplano,sinañadirsuspropias marcasdeedición,enwindowselblocdenotasyenmacintosheltextedit. TextEditestápordefectoenRichTextesnecesarioconfigurarloparaqueguarde tutrabajocomoarchivosdetextoplano. LosdocumentosHTMLdebentenerlaextensiónhtmlohtm. UsaruneditorwysiwygcomoelAdobeDreamweaver)oelBlueGrifon h\p://www.bluegriffon.org/)ouneditorconayudasvisualescomoelsublime h\p://www.sublimetext.com/)nosfacilitarálascosas. VercomparaKva:h\p://en.wikipedia.org/wiki/Comparison_of_HTML_editors
EstructuraHTML Mi)primera)página)vistaenelprogramaBlocdeNotas
EstructuraHTML Mi)primera)página)vistaenelprogramaSublime.
EstructuraHTML Mi)primera)página)vistaenelprogramaDreamweaver.
LenguajeHTML UndocumentoHTMLinsertaeneltextoeTquetasquecontrolan losdiferentesaspectosdelapresentaciónylasemánkcadel contenido. Lostextoshabitualesestánformadosporencabezados<h1>, párrafos<p>,textoimportante<strong>enfakzado<em>listas <ul><li>...
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>.
CSS ElesKlopuedeestarenlacabeceradelapágina,debeexpresarse enunelemento<style>dentrodelacabecera<head>del documento. Selector{ycadadeclaración:propiedad:valor;}
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
HTML/CSS Findeltema
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.
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
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
HTML/CSS Marcasbásicas
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://www.w3.org/wiki/html/elements/b
CSS EllenguajedemarcasHTML,estáorientadoaladefinicióndela estructuraylasemándcadeldocumentoynoasurepresentación gráfica. CSScontrolaelaspectográficodeldocumentomediantehojasde esdlostylesheets),indicandoalnavegadorcomosedeben visualizarloselementosdeundocumentohtml.asíseconsigue separarelaspectodelcontenido. Proyectocss*Zen*Garden: hfp://www.mezzoblue.com/zengarden/alldesigns/
CSS CadaeDquetaHTMLDeneunosvaloresdeCSSpordefecto,que puedenvariarsegúnelnavegador,quetendremosquemodificar connuestrosesdlospersonales. Visualizaciónvalorespor defectocssenelnavegador
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;}
CSS Másinformaciónvalorespordefecto: W3C:* hfp://dev.w3.org/html5/markup/elements.html * Internet*Explorer:** hfp://www.iecss.com/ * 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://www.iecss.com/operaa10.51.css
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>
CSS LasegundaformaañadeelesDloCSSenunbloque<style>*en*la cabecera*<head>)yaplicaelesdloavarioselementosdelapág.. CadaelementoHTMLDeneunacaja*asociada,dondeaplicanlos comandosdeesdlocss.elcolordefondoaplicadoacada elementohtmldelejemplo,muestralacajaasociadaacadauno.
CSS Lomásaconsejableparamantenerlaseparaciónentrecontenidoy presentación,enunahojadeesdlocssseparadadelhtml,quese importaconunelemento<link>enlacabecera.
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://www.w3.org/tr/css3amediaqueries/
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}
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;}
TextoHTML Citas:*<blockquote></*blockquote*>*Acitastextualesdeuntexto externo. Elatributocite="url"AIndicaladireccióndelapáginaweboriginal delaqueseextraelacita. blockquote{ display:block; marginabefore:1em; marginaazer:1em; marginastart:40px; marginaend:40px;}
TextoHTML Texto*preformateado:* <pre></*pre*>*amandeneelaspectovisual,loselementoenblanco semandenenigualqueeneltextooriginal. pre{ display:block; fontafamily:monospace; whiteaspace:pre; margin:1em0;}
TextoHTML Abreviatura*y*acrónimo:* <abbr></abbr>*aparaindicarelsignificadodeunaabreviaturaoun acrónimo.
TextoHTML Salto*de*línea:* <br>*asaltodelíneaeneltexto,sinlosmárgenesdefinidosparael párrafo. Pocasveceshayqueusarunsaltodelínea:Unapoesía,unlistado delcódigo,cuandocadalíneanoesunpárrafoporsísola.
TextoHTML Superíndices*y*subíndices:* <sup></sup>** <sub></sub>*aparaedquetareltextocomosuperosubíndices. sub{ verdcalaalign:sub; fontasize:smaller;} sup{ verdcalaalign:super; fontasize:smaller;}
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>*
Tabla LastablassedefinenconlaseDquetas<table>,*<tr>*paracadafilay <td>*paracadacolumna<th>indicaqueunaceldaeslacabecera.
TablaCSS
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
HTML/CSS Findeltema
Ejercicio 1.AEnelarchivocreadoenelejercicioanterior"laprimerapáginaWeb",cambiar elcolordelfondo,delafuente,lafamiliadpográficayeltamaño.
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
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
HTML Estructura
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
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.
<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},,,,
EstructuraHTML SPAN, ElelementoHTML,<span>,esunelementoenlíneaqueseemplea comouncontenedordetexto. Elelemento<span>,noLeneningúnsignificadoespecial,es semánlcamenteneutro.. CuandoseuLlizajuntocon,CSS,elelemento<span>,sepuede ullizarparaestablecerlosatributosdeeslloparalaspartesdel textomedianteunidenlficadoridounaclaseclass.
CSS Loselementos<DIV>y<SPAN>seempleanparadefinirnormasde esllomásespecíficas. Elatributo,id,seempleaparaidenLficarunelementoúnico. ElatributoclasscuandohaymásdeunelementoquemanLenen unarelaciónsignificalva,puedesercomparlrelesllo.
EstructuraHTML EnHTML5,losbloques,sonsusLtuidosporbloquessemánLcosque muestransignificadoporsimismos. <header> <nav> <seclon> <arlcle> <aside> <footer>
EstructuraHTML UnapáginadeesteLporealizadacon<div>,quedaríadela siguientemanera. Eshabitualunacajacontenedorparaimpedirqueocupetodalapáginacuandolaventana delanavegadoresmuygrandeocontrolarladisposicióndeloselementoscuandoesmuy pequeña. +,CSS,
EstructuraHTML UnapáginadeesteLporealizadaconlosnuevosbloques semánlcosdelhtml5quedaría. +,CSS,
EstructuraHTML LaestructuraHTML,,deberealizarseenelsenLdológicodelectura deldocumento,cuandolapáginaseveasinaplicarlosesllosno pierdasusignificado.
HerenciaCSS ParaentendercomofuncionanlosselectoresylaherenciaCSSes necesarioentenderquéeselárboldeldocumento.
HerenciaCSS elárboldeldocumentodelejemploanterior: html head body Ltle div.caja header nav arlcle footer h1 ul li li li a a a
HerenciaCSS Ancestoresunelementoconectadoperomásarribaenla estructuradeldocumento html head body Ltle div.caja Ancestor header nav arlcle footer h1 ul descendientes li li li, a a a
HerenciaCSS Descendientessonloselementosconectadosperomásabajoenla estructuradeldocumento. html head body Ltle div.caja Ancestor header nav arlcle footer h1 ul descendientes li li li, a a a
HerenciaCSS Parenteselelementoconectadoydirectamentesobreun elementoenlaestructuradeldocumento. html head body Ltle div.caja header nav arlcle footer h1 ul Parent descendientes li li li, a a a
HerenciaCSS Childeselelementoconectadoydirectamentedebajodeun elementoenlaestructuradeldocumento. html head body Ltle div.caja Child header nav arlcle footer h1 ul li li li a a a
HerenciaCSS Siblings,sonloselementosquecompartenunmismopadreenla estructuradeldocumento. html head body Ltle div.caja header nav arlcle footer h1 ul Parent Siblings li li li,
HerenciaCSS SidefinimosunesLloenelbody,todosloselementossituados debajoenelárboldeldocumento,heredanesapropiedad.
HTML Findeltema
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>
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
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
CSS Prioridad
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.
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
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
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
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
PrioridadCSS Laganadoraes,caja.cabecerah1=0,1,1,1 Ganadora: A=0es9losenlínea B=1ID C=1clase D=1elemento Puntuación=0,1,1,1
PrioridadCSS Cuandodosdeclaraciones9enenelmismovalor: Serálaúl9maespecificada
SelectoresCSS Selectoruniversal * Afectaatodosloselementos.
ReglasCSS Modificacióndees9los,porelusuarioenelnavegador:9pograYas
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;}
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://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
RecursosHTML BruceLawson:HTML5ar9clesandsec9ons:what sthedifference? h\p://www.brucelawson.co.uk/2010/html5`ar9cles`and`sec9ons` 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://www.ondho.com/html5`discusiones`entre`ar9cle`y`sec9on/
CSS Findeltema
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>
Ejercicio QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9lopordefectodelnavegador`h2{color:black;}2.`Es9lofijadoporeldiseñador`h2{color:green;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9lopordefectodelnavegador`h2{color:black;}2.`Es9lofijadoporelusuario`h2{color:green;} 3.`Es9loenhojaCSSexternaoenelHead`h2{color:blue;}4.`Es9loenhojaCSSexternaoenelHead`h2 {color:lime!important;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`h2.news{color:green;}2.`Es9loenhojaCSSexternaoenelHead `h2{color:blue;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`h2{color:blue;}2.`EnlalíneasiguientedelCSS`h2{color: purple;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.`Es9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.`es9loenhojacssexternaoenelhead`h2{color:blue;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.`Es9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.`es9loenhojacssexternaoenelhead`h2{color:blue;}4.`es9loenhojacss externaoenelhead`h2{color:purple;}5.`es9loenhojacssexternaoenelhead`divcajah2{color: black;}
Ejercicio`Soluciones QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9lopordefectodelnavegador`h2{color:black;}2.`Es9lofijadoporeldiseñador`h2{color:green;}2 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9lopordefectodelnavegador`h2{color:black;}2.`Es9lofijadoporelusuario`h2{color:green;} 3.`Es9loenhojaCSSexternaoenelHead`h2{color:blue;}4.`Es9loenhojaCSSexternaoenelHead`h2 {color:lime!important;}4 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`h2.news{color:green;}2.`Es9loenhojaCSSexternaoenelHead `h2{color:blue;}1 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`h2{color:blue;}2.`EnlalíneasiguientedelCSS`h2{color: purple;}2 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.`Es9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.`es9loenhojacssexternaoenelhead`h2{color:blue;}1 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.`Es9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.`es9loenhojacssexternaoenelhead`h2{color:blue;}4.`es9loenhojacss externaoenelhead`h2{color:purple;}5.`es9loenhojacssexternaoenelhead`divcajah2{color: black;}5
HTML/CSS Navegación
NavegaciónHTML Unmenúesunalistadeenlaces.Serecomiendausarlasmarcasde lista<ul>)<li>)yelenlace<a>,queesloestablecidoporlasnormas deaccesibilidad.
NavegaciónHTML MenúverAcal)
NavegaciónCSS LosvaloresCSSpordefectodelalistaydelenlace,debenser ajustadosanuestrasnecesidades.) EjemplomenúverAcal myspace
NavegaciónHTML Menúhorizontal)
NavegaciónCSS CSSmenúhorizontal.) Ejemplomenúhorizontal BBC
MenúsFirefoxOS LosmenúsrecomendadosparalasaplicacionesenFirefoxOS FirefoxOSAppBuMons: hmp://www.mozilla.org/enpus/styleguide/products/firefoxpos/bumons/
IconosparaaplicacionesFirefoxOS UniconoparaunaaplicaciónFirefoxOSesunaimagendepíxeles 60x60píxelsenformatoPNGde24bits. Hayotrastamaños necesariosparaotros disposiavos: 16px,32px,48px, 60px,128px,256px. Guíasdediseñodemozilla,)paradescargarlasplanAllasdelosiconos hmp://www.mozilla.org/enpus/styleguide/products/firefoxpos/icons/
RecursosnavegaciónCSS Cristalab:)MenúsverAcales hmp://www.cristalab.com/cursophtml/menuspveracales/ CSS)Blog:)CrearunmenúhorizontalsimpleconCSS hmp://www.cssblog.es/crearpunpmenuphorizontalpsimplepconpcss/ w3schools:)menúhorizontal hmp://www.w3schools.com/css/tryit.asp?filename=trycss_float5
HTML/CSS Findeltema
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>
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.
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
HTML/CSS Texto
TextoCSS Lasmarcasquepermitendefinirlaspropiedadesyaspectos visualesdeunafuente. fontfamilyeslapropiedadquepermitedefinirlafuenteparaun elemento. P { font-family: "Times New Roman, Georgia, Serif; } h?p://www.w3.org/tr/css2/fonts.html
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://www.w3.org/tr/css2/fonts.htmlgenericofontofamilies
TextoCSS Familia+1pográfica.EsunaseriedeFposclasificables,porsupeso, inclinación,proporción,espaciado,ausenciaopresenciade serifas EnFpograWadigital,enlosformatosactuales,unaserie completaestaincluidaenunúnicoarchivo,queconfenelosfpos independientes.
TextoCSS Fontweight.Especificaelpesodelaletra,segúnlossiguientes valores. normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit
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
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
TextoCSS fontvariant+especificalavariantedelafuente. Valor:normal smallocaps eslaversiónversalitadeunafuente
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://www.w3schools.com/cssref/playit.asp? filename=playcss_lineoheight&preval=25px
@fontcss Formatos+@fontface "woff" String Font+Format Common+extensions WOFFWebOpen FontFormat).woff "truetype" TrueType.t "opentype" OpenType.t,.ou "embedded opentype" EmbeddedOpenType.eot "svg" SVGFont.svg,.svgz
@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
@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://www.fontsquirrel.com/tools/webfontogenerator
@fontcss @fontface++permitevincularfuentessinnecesidaddequeelclientelastengainstaladas ensuordenador. fontofamily Valor:<familyOname> Src++ [<uri>[format<string>[,<string>]*)] <fontofaceoname>][,<uri>[format<string>[, <string>]*)] <fontofaceoname>]* @font-face { font-family: FiraMono; src: urlfiramono-regular.woff) format"woff"), urlfiramono-regular.eot) format"embedded-opentype"); } p { font-family: FiraMono, serif; } h?p://www.w3.org/tr/css3ofonts/fontofaceorule h?ps://www.mozilla.org/enous/styleguide/products/firefoxoos/typeface/
Descargarlafuenteyconocerlasrecomendacionesdeusoen: h?p://www.mozilla.org/enous/styleguide/products/firefoxoos/typeface/ TipograWaFirefoxOS Fira+Sans+para+Firefox+OS+ FirefoxOSuFlizaFiraSans,unafuenteFpográficaespecíficaendiferentescuerposy pesos.diseñadaporerikspiekermannyralphdecaroisparafirefoxos.
@fontcss @fontface+embedding+ Esposibleelusodefuentesalojadasenservidoresexterno Google+Fonts+ Enlacabecera <link href='http://fonts.googleapis.com/ css?family=caesar+dressing' rel='stylesheet' type='text/ css'> EnelesFlo p { font-family: 'Caesar Dressing', cursive; } + h?p://webfonts.info/fontsoavailableofontofaceoembedding
RecursosCSS W3C:+CSSFontsModuleLevel3 h?p://www.w3.org/tr/2013/crocssofontso3o20131003/ MDN:+@fontOface h?ps://developer.mozilla.org/es/docs/css/@fontoface + FONT+SQUIREL+ h?p://www.fontsquirrel.com/fonuace/generator Google+FONT+ h?p://www.google.com/webfonts Typekit+ h?ps://typekit.com/ Red+Team+Design:+GoogleFontAPIandTypekitsoluFonsVS@fontOface h?p://www.redoteamodesign.com/googleofontoapioandotypekitosolufonsovsofontoface
HTML/CSS Findeltema
Ejercicio Realizaunapáginaquecontengaunpárrafoconfuentesvinculadas,conlafuentedelSOdefirefox FiraOpenType,quepuedesdescargaraquí: h?ps://www.mozilla.org/enous/styleguide/products/firefoxoos/typeface/ Yotropárrafoconfuentesvinculadasdegooglefonts
Ejercicio 1.O@fontOfacepermitevincularfuentes: a)peroelusuariodebetenerlasfuentesinstaladasensudisposifvob)elusuarionoes necesarioquetengalasfuentesinstaladasensudisposifvo 2.Ocualdelossiguientesformatosnoesunformatodefuente: a).woofb).svgc).swfd).otf 3.Ocualdelossiguientesformatosnoesunformatodefuente: a).woofb).ttfc).eotd).png 4.Omediante@fontOfaceesposibleelusodefuentesalojadasenservidoresdeterceroscomogoogle fonts: a)seenlazamedianteelusodeunaefqueta<link>enlacabeceradelapáginab)esnecesario bajarlafuenteyalojarlaentupropioservidor 5. CuáleslaFpograWacorporaFvadeFirefoxOS? a)firasansyfiramono.b)firasansparaelcorreoelectrónicoyitcofficinaparaelrestodelas aplicaciones.c)firasansenlostamañosgrandesyfiramonoenlostamañospordebajode11 px.d)ffmetayffthesans.
EjercicioOSoluciones 1.O@fontOfacepermitevincularfuentes: a)peroelusuariodebetenerlasfuentesinstaladasensudisposifvob)elusuarionoes necesarioquetengalasfuentesinstaladasensudisposifvob 2.Ocualdelossiguientesformatosnoesunformatodefuente: a).woofb).svgc).swfd).otfcswfesunformatodearchivodeadobeflash) 3.Ocualdelossiguientesformatosnoesunformatodefuente: a).woofb).ttfc).eotd).pngdpngesunformatodeimagen) 4.Omediante@fontOfaceesposibleelusodefuentesalojadasenservidoresdeterceroscomogoogle 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
CSS div
ImágenesHTML LasimágenessevinculanenunapáginaHTMLconlae8queta<img>conlos atributos src=url alt=textoalterna8vodelaimagen width=ancho height-=alto
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; }
EstructuraCSS lapropiedaddisplay,permiteestablecerel8podecajadeun elemento.losvaloresmásu8lizadosson:inline,blockynone.
EstructuraCSS Padding,marginyborder-
EstructuraCSS Background- back_mantel.pngdh.pngdh_2.png- dh_3.png- ac.jpg- hsp://www.css3files.com/background/
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; }
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://www.cssma8c.com/es/borderxradius
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;
RecursosCSS CSS3-GeneratorhSp://css3generator.com/ CSS3-Gradient-GeneratorhSp://gradients.glrzad.com/ {CSS}-Portal-C-on-line-generatorhSp://www.cssportal.com/css3XroundedXcorner/ CSS3-MAKER:- hsp://www.css3maker.com CSS3.comhSp://www.css3.com/
CSS Findeltema
Ejercicio Realizaunapáginaquecontengaun<div>conalmenos3imágenesdefondo,bordesredondeadosy sombra
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
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
CSS Estructura
EstructuraCSS CSS3permiteposicionarlosdivenlapágina,float <styletype="text/css"> div{ float:lea; padding:5px; margindright:5px; margindbogom:5px; border:1pxsolid666; } </style>
EstructuraCSS CSS3permiteposicionarlosdivenlapágina,floatyclear/ Confloateldiv flota aunaposiciónrelaova.
EstructuraCSS CSS3permiteposicionarlosdivenlapágina,floatyclear/ Conclearrompeelesquemadelfloat.
EstructuraCSS Usodefloatyundivclear/querompeelesquemadelfloat.
EstructuraCSS CSS3permiteposicionarlosdivenlapágina,medianteposiOon, absoluta,relaovaofija. Conposiciónabsolutaeldivsaledelflujodelcontenido.
EstructuraCSS Conposiciónfijaeldivnocambiadeposiciónenelescaladodel navegadoroelscrollenlapágina.
EstructuraCSS Lascajas/flexibles,seconsigueconunnuevovalordelapropiedad display,display:flex;)delacajapadre. LaorientaciónsedefineconflexDdirecOonypuedeserhorizontalo verocal,segúnseafilaocolumna. LoselementosflexiblesOenendiferentesformasdealinearsey distribuirsejusofydcontentyalignditems. Cadaunodeloselementos puedeordenarseolos diferentesmodoscrecero Reducirseparaocupar elespacio.
EstructuraCSS Lanuevapropiedaddecajas/flexibles,eslaformamássencillade controlarelaspectodelascajasdiv.
RecursosCSS MDN/UsandolascajasflexiblesCSS/ hgps://developer.mozilla.org/es/docs/web/guide/css/ Cajas_flexibles CSS7TRICKSACompleteGuidetoFlexbox hgp://cssdtricks.com/snippets/css/adguidedtodflexbox/
CSS Findeltema
Ejercicio Realizalaestructuradeunapáginaquecontengatodosloselementosqueseindicanenelsiguiente esquema: