Download   Report
  1. Educación

HTML/CSS(

HTML/CSS(
Mi(primera(página(
Qué(es(HTML(
• (Es(un(lenguaje(de(marcas(para(formatear(y(
estructurar(un(documento,(que(puede(leerse(en(
cualquier(navegador.(
<html>(…(…(</html>(
• (Estandarizado(en(la(norma(ISO(de(SGML(
(Standard(Generalized(Markup(Lenguage).(
• (El(W3C(desarrolla(especificaciones(técnicas(y(
directrices,(de(forma(que(se(pueda(asegurar(una(
alta(calidad(técnica(y(editorial.(
Estructura(HTML(
Un(documento(HTML(Kene(tres(eKquetas(que(describen(la(
estructura(general(de(un(documento(y(dan(una(información(sencilla(
sobre(él.((<html>,(<head>(y(<body>(
Las(eKquetas(pueden(escribirse(tanto(en(mayúsculas(como(en(
minúsculas,(pero(se(recomienda(el(uso(de(minúsculas:(<html>(o(
<HTML>,(<body>(o(<BODY>((
(
Visualización(en(el(navegador(
(( Editor(
((
((
(
Estructura(HTML(
<!doctype(html>(declara(un(documento(HTML5(para(que(se(
visualice(correctamente.((
Doctype(comienza(a(uKlizarse(en(HTML4.01(y(XHTML(
h\p://validator.w3.org/(
(
((
((
<!doctype(html>(
((
((
(
Estructura(HTML(
<html>(para(idenKficar(que(esta(codificado(en(este(lenguaje(y(
Limitar,(el(principio(y(el(fin(del(documento.(
((
(
(
(<html>(((</html(>((
((
((
(
Estructura(HTML(
<HEAD>(la(cabecera,(que(conKene(información(y(recursos(sobre(el(
propio(documento(y(que(no(aparece(en(el(documento,(destacando(
el(Ktulo(<TITLE>.(Será(el(nombre(que(aparece(en(la(cabecera(del(
visualizador(y(en(los(buscadores(de(ahí(la(importancia(de(que(sea((
significaKvo.(
<head>(((</head>((
(((
((
(
((<Ktle>(((</Ktle>((
Estructura(HTML(
La(eKqueta(meta(define(varios(Kpos(de(metadatos.(
El(atributo(charset(especifica(la(codificación(usada(en(nuestra(
página.((
<meta(charset="character_set">(
(((
<meta(charset="ude8">(
((
(
Estructura(HTML(
Charset(uFG8(es(la(Unicode(TransformaKon(Format(8ebit(
representa(el(código(de(caracteres(UNICODE.(Es(compaKble(con(
ASCII.(
Permite(visualizar(los(caracteres(de(todos(los(idioma.(
(((
((
(
Estructura(HTML(
Caracteres(especiales:(para(incluir(en(el(texto(caracteres(que(son(propias(del(
lenguaje(HTML(es(necesario(usar(su(anotación(codificada:(
h\p://dev.w3.org/html5/htmleauthor/charref(
(
Espacio(en(blanco((nonebreaking(space)( &nbsp;(
( <(
Menor(que(
&lt;(
( >(
Mayor(que(
&gt;(
( &(
Ampersand(
&amp;(
( “(
Comillas ((
&quot;(
( ‘(
apóstrofo(
&apos;(
(
(
(((
((
(
Estructura(HTML(
<body>(El(cuerpo(conKene(los(elementos(visibles(en(la(página.(
Las(imágenes,(los(encabezados,(los(párrafos(de(texto,(las(listas,(las(
tablas,(los(hipervínculos…(((
((
<body>(</body>(
(
Editores(HTML(
Antes(de(comenzar(a(trabajar(con(un(editor(específico,(es(recomendable(conocer(
el(código.((
(
Podemos(usar(programas(que(trabajen(con(texto(plano,(sin(añadir(sus(propias(
marcas(de(edición,(en(Windows(el(Bloc(de(Notas(y(en(Macintosh(el(TextEdit.((
TextEdit(está(por(defecto(en(Rich(Text(es(necesario(configurarlo(para(que(guarde(
tu(trabajo(como(archivos(de(texto(plano.((
(
Los(documentos(HTML(deben(tener(la(extensión(html(o(htm.(
((
Usar(un(editor(wysiwyg(como(el(Adobe(Dreamweaver)o(el(BlueGrifon((
h\p://www.bluegriffon.org/)(o(un(editor(con(ayudas(visuales(como(el(sublime(
(h\p://www.sublimetext.com/)(nos(facilitará(las(cosas.(
(
Ver(comparaKva:(h\p://en.wikipedia.org/wiki/Comparison_of_HTML_editors(
(
(
(
Estructura(HTML(
Mi)primera)página)vista(en(el(programa(Bloc(de(Notas(
((((((
((
((
(
(
Estructura(HTML(
Mi)primera)página)vista(en(el(programa(Sublime.(
((((((
((
((
(
(
Estructura(HTML(
Mi)primera)página)vista(en(el(programa(Dreamweaver.(
((((((
((
((
(
(
Lenguaje(HTML(
Un(documento(HTML(inserta(en(el(texto((eTquetas(que(controlan(
los(diferentes(aspectos(de(la(presentación(y(la(semánKca(del(
contenido.(
Los(textos(habituales(están(formados(por(encabezados(<h1>,(
párrafos(<p>,(texto(importante(<strong>(enfaKzado(<em>(listas(
<ul>(<li>...(
(
Selectores(CSS(
Para(aplicar(un(esKlo(de(presentación,(el(selector(de(elemento(
puede(ser(una(eKqueta(HTML:(
p,(h1,(ul,(li(
El(esKlo(afecta(a(todo(el(contenido(incluido(dentro(de(esa(eKqueta(
<p>(</p>,(<h1></h1>,(<ul></ul>.(
(
El(selector(puede(aplicarse(a(más(de(una(eKqueta(HTML:(
elemento,(elemento(
h1,h2,(h3(
Afecta(a(los(elementos(<h1>,(<h2>(y(<h3>.(
(
(
(
(
CSS(
El(esKlo(puede(estar(en(la(cabecera(de(la(página,(debe(expresarse(
en(un(elemento(<style>(dentro(de(la(cabecera(<head>(del(
documento.(
Selector({(y(cada(declaración:(propiedad(:(valor;}(
(
(
(
(
Recursos(HTML(
MDN:(Lista(de(Elementos(HTML5(
(((
h\ps://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos(
( ((
(
W3C:(HTML5(elements(
h\p://dev.w3.org/html5/markup/elements.html(
(
Woork(Up:(HTML5(tag(reference(
h\p://woorkup.com/wpecontent/uploads/2009/12/HTML5eVisualeCheate
Sheet1.pdf(
(
(
(
((
((
(
HTML/CSS(
Fin(del(tema(
Ejercicio(
1.e(Realizar(con(editor(de(texto(plano,(Kpo(Bloc(de(Notas(la(primera(página(Web:(
(((
<!doctype(html>(
((
<html>(
(
<head>(
<meta(charset="ude8">(
<Ktle>Mi(primera(página</Ktle>(
</head>(
<body>(
Mi(primera(página(web(
</body>(
</html>(
((
2.e(Guárdalo(con(extensión(.html(
3.e(Comprueba(en(el(navegador(el(fichero(que(acabas(de(crear.(
(
(
(
((
((
Ejercicio(
1.e(Es(obligatorio(especificar(el(juego(de(caracteres("charset"(en(HTML5(
(((
(a)(Si(b)(No(
((((
(
2.e(Es(correcto(emplear(mayúsculas(en(las(eKquetas(HTML,(<HEAD>((<BODY>...(
(a)(Si(b)(No(
(
3.e(El(Kpo(de(documento(se(escribe(antes(o(después(del(inicio(de(la(eKqueta(
<html>(
(a)(Antes(<!doctype(html>(<html>(b)(Después(<html>(<!doctype(html>(
(
4.e(la(eKqueta(<Ktle>(se(escribe:(
(a)(antes(del(<head>(b)(dentro(del(<head>(c)(dentro(del(<body>(
(
5.e(la(declaración:(<!doctype(html>(define:(
(a)(Cualquier(versión(de(documento(HTML(b)(Un(documento(en(HTML5(
((
(
(
(
Ejercicio(e(Soluciones(
1.e(Es(obligatorio(especificar(el(juego(de(caracteres("charset"(en(HTML5(
(((
(a)(Si(b)(No(B(
((((
(
2.e(Es(correcto(emplear(mayúsculas(en(las(eKquetas(HTML,(<HEAD>((<BODY>...(
(a)(Si(b)(No(A(
(
3.e(El(Kpo(de(documento(se(escribe(antes(o(después(del(inicio(de(la(eKqueta(
<html>(
(a)(Antes(<!doctype(html>(<html>(b)(Después(<html>(<!doctype(html>(A(
(
4.e(la(eKqueta(<Ktle>(se(escribe:(
(a)(antes(del(<head>(b)(dentro(del(<head>(c)(dentro(del(<body>((B(
(
5.e(la(declaración:(<!doctype(html>(define:(
(a)(Cualquier(versión(de(documento(HTML(b)(Un(documento(en(HTML5(B(
((
(
(
(
HTML/CSS(
Marcas(básicas(
HTML(
Las(marcas(de(texto(en(html,(se(emplean(para(el(estructurado*
(((
semán.co*del*contenido.(
((
((
Los(textos(habituales(están(formados(por(párrafos,(palabras(en(
negrita(o(cursiva,(anotaciones(y(correcciones,(citas(a(otros(
documentos(externos...(
*
Marcado*básico:*
<p></p>*A(párrafo(
<em></em>*A(da(énfasis(al(texto(que(encierra(
<strong></strong>*A(Máxima(importancia(al(texto(que(encierra(
Las(eDquetas(<b>*para(la(bold(o(negrita((y(la(eDqueta*<i>*para(la(itálica(o(cursiva,(
son(similares(visualmente,(pero(sin(significado(semánDco.((
hFp://www.w3.org/wiki/HTML/Elements/b(
(
(
CSS(
El(lenguaje(de(marcas(HTML,(está(orientado(a(la(definición(de(la(
(((
estructura(y(la(semánDca(del(documento(y(no(a(su(representación(
((
(
gráfica.((
(
CSS(controla(el(aspecto(gráfico(del(documento(mediante(hojas(de(
esDlo%(style%sheets),(indicando(al(navegador(como(se(deben(
visualizar(los(elementos(de(un(documento(HTML.(Así(se(consigue(
separar(el(aspecto(del((contenido.(
(
(
(
Proyecto(css*Zen*Garden:(
hFp://www.mezzoblue.com/zengarden/alldesigns/(
(
(
(
CSS(
Cada(eDqueta(HTML(Dene(unos(valores(de(CSS(por(defecto,(que(
(((
pueden(variar(según(el(navegador,(que(tendremos(que(modificar(
((
(
con(nuestros(esDlos(personales.((
(
( Visualización(valores(por(
(
defecto(CSS(en(el(navegador(
HTML(
Ejemplo(valores(CSS(por(defecto(del(navegador,(de:(h1,*p,*strong,*
(((
em.*
((
h1({(
display:(block;(
((
p({(
fontAsize:(2em;(
display:(block;(
(
marginAbefore:(0.67em;(
(
marginAaZer:(0.67em;(
marginAstart:(0;(
marginAend:(0;(
fontAweight:(bold;(}(
strong({(
fontAweight:(bold;(}(
marginAbefore:(1em;(
marginAaZer:(1em;(
marginAstart:(0;(
marginAend:(0;(}(
em({(
fontAstyle:(italic;(}(
CSS(
Más(información(valores(por(defecto:(
(((
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(
La(primera(forma(de(añadir(el(esDlo(CSS(a(un(documento(HTML(es(
(((
con(elementos(en*línea,*es(el(método(más(sencillo,(añadiendo(un(
((
(
atributo(style(en(el(elemento(concreto(dentro(de(la(página.*No(se(
pueden(reuDlizar(para(varios(elementos(que(comparten(las(mismas(
propiedades.(
Se(escriben(las(propiedades(del(esDlo(en(las(marcas(del(HTML(como(
"nombre:(valor"(separadas(por(punto(y(coma.(
((
<body style="color: red; ">
<p style="font-size: 16px; color: blue; font-family: Arial,
Helvetica, sans-serif;">
Mi primera página</p>
(
(
(
CSS(
La(segunda(forma(añade(el(esDlo(CSS(en(un(bloque(<style>*en*la(
(((
cabecera*(<head>)(y(aplica(el(esDlo(a(varios(elementos(de(la(pág..(
((
Cada(elemento(HTML(Dene(una(caja*asociada,(donde(aplican(los(
(
comandos(de(esDlo(CSS.(El(color(de(fondo(aplicado(a(cada(
elemento(HTML(del(ejemplo,(muestra(la(caja(asociada(a(cada(uno.(
(
(
(
(
CSS(
Lo(más(aconsejable(para(mantener(la(separación(entre(contenido(y(
(((
presentación,(en(una(hoja(de(esDlo(CSS(separada(del(HTML,(que(se(
((
importa(con(un(elemento(<link>(en(la(cabecera.(
(
((
(
(
(
(
CSS(
La(principal(ventaja(es(que(las(hojas(
(((
de(esDlo(son(aplicables(a(una(o(a(
((
muchas(páginas.(Permite(además((
(
adaptar(la(presentación(a(PCs,(
móviles,(tabletas(o(impresoras((con(
el(atributo(media(que(acDvará(el(
esDlo(específico(de(cada(disposiDvo.(
(
<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*
(((
*((
*(
(
((
El(esDlo(se(define(entre(llaves("{"(y("}";(el(selector(determina(sobre(
que(elementos(HTML(aplica(el(esDlo,(cada(bloque%de%declaración:(
{declaración;*declaración}*separadas(por(punto(y(coma(";".((
Cada(declaración:(propiedad*:*valor,((fija(un(valor(para(una(
propiedad%del%es:lo).(((
(
H1 {color : green; text-align : center}
(
(
(
(
HTML(
Listas:*
(((
<ul></*ul*>*A(define(listas,(no(ordenadas.(
((
<ol></*ol*>*A(define(listas,(ordenadas.(
(
<li></li>*A(define(los(elementos(de(las(listas(
(
(
(
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;(}(
Texto(HTML(
Citas:*<blockquote></*blockquote*>*A(citas(textuales(de(un(texto(
(((
externo.((
((
(
El(atributo(cite(=("url"(A(Indica(la(dirección(de(la(página(web(original(
de(la(que(se(extrae(la(cita.(
(
(
blockquote({(
display:(block;(
marginAbefore:(1em;(
marginAaZer:(1em;(
marginAstart:(40px;(
marginAend:(40px;(}(
Texto(HTML(
Texto*preformateado:*
(((
<pre></*pre*>*A(manDene(el(aspecto(visual,(los(elemento(en(blanco(
((
(
se(manDenen(igual(que(en(el(texto(original.(
(
pre({(
display:(block;(
fontAfamily:(monospace;(
whiteAspace:(pre;(
margin:(1em(0;(}(
Texto(HTML(
Abreviatura*y*acrónimo:*
(((
<abbr></abbr>*A(para(indicar(el(significado(de(una(abreviatura(o(un(
((
(
acrónimo.(
(
(
(
(
(
Texto(HTML(
Salto*de*línea:*
(((
<br>*A(Salto(de(línea(en(el(texto,(sin(los(márgenes(definidos(para(el(
((
párrafo.((
(
Pocas(veces(hay(que(usar(un(salto(de(línea:(Una(poesía,(un(listado(
del(código,(cuando(cada(línea(no(es(un(párrafo(por(sí(sola.((
(
(
(
(
(
(
Texto(HTML(
Superíndices*y*subíndices:*
(((
<sup></sup>**
((
(
<sub></sub>*A(para(eDquetar(el(texto(como(super(o(subíndices.(
sub({(
verDcalAalign:(sub;(
fontAsize:(smaller;(}(
sup({(
verDcalAalign:(super;(
fontAsize:(smaller;(}(
Texto(HTML(
code:*
(((
<code></code>*A(para(representar(fragmentos(de(código(
((
(
informáDco.(
Valores(por(defecto:(
code({(
fontAfamily:(monospace;}(
(
Otras*marcas*de*texto:*
Texto(borrado(<del>*e(insertado(<ins>*en(un(documento.(
Listas(de(definiciones(<dl>,*<dt>*y(<dd>*
(
(
(
(
(
(
Tabla(
Las(tablas(se(definen(con(las(eDquetas(<table>,*<tr>*para(cada(fila(y(
(((
<td>*para(cada(columna(<th>(indica(que(una(celda(es(la(cabecera.(
((
((
(
(
(
(
(
(
(
(
(
(
(
(
(
Tabla(CSS(
(
((((
((
((
(
(
(
(
(
(
(
(
(
(
(
(
(
Texto(HTML(
LIBROS*WEB:*Marcado(básico(de(texto(
(((
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(
Fin(del(tema(
Ejercicio(
1.A(En(el(archivo(creado(en(el(ejercicio(anterior("la(primera(página(Web",(cambiar(
(((
el(color(del(fondo,(de(la(fuente,(la(familia(Dpográfica(y(el(tamaño.(
( ((
((
(
((
((
(
Ejercicio(
1.A(Los(valores(de(esDlos(CSS(por(defecto(del(navegador,(son(iguales(en(todos(los(navegadores(
(a)((Si((b)(No(((
((
2.A(Que(es(más(aconsejable,(que(el(esDlo(este(en(la(línea(o(en(la(cabecera(del(documento.(
(a)((En(la(línea(b)(En(la(cabecera(((
((
3.A(Que(es(más(aconsejable,(que(el(esDlo(este(en(la(cabecera(del(documento(o(en(archivo(CSS(aparte.(
(
(a)((En(la(cabecera((b)(En(hoja(de(esDlo(CSS(aparte(((
4.(El(uso(de(los(esDlos(CSS(en(la(línea(del(HTML,(¿está((desaconsejado?(
(a)(Si((B)(No(((
5.A(¿Puede(haber(esDlos(diferentes(dependiendo(del(disposiDvo?.(
(a)(Si((B)(No((C)(Si,(si(el(esDlo(CSS(se(aplica(en(la(línea(del(HTML(((
6.A(la(eDqueta(<th>(representa:(
(a)(Una(celda(importante(de(la(tabla((b)(una(celda(de(la(tabla((c)(Una(celda(que(es(cabecera(de(la(tabla((((
7.A((La(eDqueta(<em>(da(énfasis(al(texto(que(encierra,(por(defecto(se(representa:(
(a)(de(color(rojo("red“(((b)como((cursiva(((c)(como(redonda((d)(como(negrita(((
8.A((La(eDqueta(<strong>(da(máxima(importancia(al(texto(que(encierra,(por(defecto(se(representa:(
(a)(de(color(rojo("red“((b)como((cursiva(((c)(como(versalita((d)(como(negrita((((
9.A(Las(listas(de(información(no(ordenadas(se(idenDfican(con(la(eDqueta:(
(a)(<ul>((b)(<ol>((c)((<dl>((((
10.A(La(eDqueta(<blockquote>(se(emplea(para(tratar:(
a)((para(bloques(de(texto((b)(en(párrafos((sangrados((c)(para(representar(citas((d)((para(representar(
fragmentos(de(código(informáDco(((
((
((
(
(
(
((
((
(
Ejercicio(A(Soluciones(
1.A(Los(valores(de(esDlos(CSS(por(defecto(del(navegador,(son(iguales(en(todos(los(navegadores(
(a)((Si((b)(No((B(
((
2.A(Que(es(más(aconsejable,(que(el(esDlo(este(en(la(línea(o(en(la(cabecera(del(documento.(
(a)((En(la(línea(b)(En(la(cabecera((B(
((
3.A(Que(es(más(aconsejable,(que(el(esDlo(este(en(la(cabecera(del(documento(o(en(archivo(CSS(aparte.(
(
(a)((En(la(cabecera((b)(En(hoja(de(esDlo(CSS(aparte((B(
4.(El(uso(de(los(esDlos(CSS(en(la(línea(del(HTML,(¿está((desaconsejado?(
(a)(Si((B)(No((A(
5.A(¿Puede(haber(esDlos(diferentes(dependiendo(del(disposiDvo?.(
(a)(Si((B)(No((C)(Si,(si(el(esDlo(CSS(se(aplica(en(la(línea(del(HTML((A(
6.A(la(eDqueta(<th>(representa:(
(a)(Una(celda(importante(de(la(tabla(b)(una(celda(de(la(tabla(c)(Una(celda(que(es(cabecera(de(la(tabla((C(
7.A((La(eDqueta(<em>(da(énfasis(al(texto(que(encierra,(por(defecto(se(representa:(
(a)(de(color(rojo("red“(((b)como((cursiva(((c)(como(redonda((d)(como(negrita((B(
8.A((La(eDqueta(<strong>(da(máxima(importancia(al(texto(que(encierra,(por(defecto(se(representa:(
(a)(de(color(rojo("red“((b)como((cursiva(((c)(como(versalita((d)(como(negrita(((D(
9.A(Las(listas(de(información(no(ordenadas(se(idenDfican(con(la(eDqueta:(
(a)(<ul>((b)(<ol>((c)((<dl>(((A(
10.A(La(eDqueta(<blockquote>(se(emplea(para(tratar:(
a)((para(bloques(de(texto((b)(en(párrafos((sangrados((c)(para(representar(citas((d)((para(representar(
fragmentos(de(código(informáDco((C(
((
((
(
(
(
((
((
(
HTML%
Estructura%
Estructura%HTML%
Los%elementos%html%pueden%visualizarse%como%bloque%o%como%en%línea.%
%%%
Los%elementos%bloques%block%ocupan%todo%el%ancho%de%la%página%y%fuerzan%a%una%
%%
nueva%línea%antes%y%despué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%
Los%elementos%en%línea%inline%sólo%ocupan%el%ancho%necesario%y%no%fuerzan%
nuevas%líneas.%%%
%
<em> <a> <br> <img> <span> <button> <input> <select>
<textarea>…
%
%
% hBps://developer.mozilla.org/enEUS/docs/HTML/Inline_elements%
%
Estructura%HTML%
%%%
DIV,
%%
El%elemento%<div>%es%un%elemento%de%bloque%que%se%emplea%
%
contener%en%su%interior%otros%elementos%HTML.%
%
%El%elemento%<div>,no%Lene%ningún%significado,%es%semánLcamente%
neutro.%%
%
Empleando%CSS,%el%elemento%<div>,se%puede%uLlizar%para%
estructurar%el%documento%en%grandes%bloques%de%contenido.%
%
El%div%es%la%propuesta%para%susLtuir%a%los%elementos%<table>,para%el%
diseño.%El%propósito%del%elemento%<table>,es%para%mostrar%datos%
tabulados.%
%
%
<div>%
<div>%define%bloque%un%genérico%empleado%para%formatear%con%CSS.%
%%%
%%%%%%%%%%%%%<div,id="caja"
class="cabecera">,…………….,</div>%
%%
%%
Atributo%ID:%idenLfica%unívocamente%un%elemento%HTML%en%una%
página.%Un%elemento%HTML%solo%debe%tener%un%atributo%ID%y%este%
debe%ser%único%en%la%página.%El%selector%CSS%%#caja,se%refiere%al%
elemento%con%atributo%id="caja”,%como%en%#caja,{color:blue},,
%
Atributo%CLASS:%define%una%clase%de%elementos%HTML.%Un%elemento%
puede%tener%varios%atributos%CLASS.,El%selector%CSS%.cabecera,se%
refiere%a%todos%los%elemento%de%la%clase%cabecera%(que%llevan%el%
atributo%class="cabecera"),%como%en%.cabecera,{color:red},,
,
,
%
%
Estructura%HTML%
%%%
SPAN,
%%
El%elemento%HTML,<span>,es%un%elemento%en%línea%que%se%emplea%
%
como%un%contenedor%de%texto.%
%
El%elemento%<span>,no%Lene%ningún%significado%especial,%es%
semánLcamente%neutro.%.%
%
Cuando%se%uLliza%junto%con,CSS,%el%elemento%<span>,se%puede%
uLlizar%para%establecer%los%atributos%de%esLlo%para%las%partes%del%
texto%mediante%un%idenLficador%ID%o%una%clase%class.%
%
%
%
%
%
CSS%
Los%elementos%<DIV>%y%<SPAN>%se%emplean%para%definir%normas%de%
%%%
esLlo%más%específicas.%%
%%
El%atributo,id,se%emplea%para%idenLficar%un%elemento%único.%
%
El%atributo%class%cuando%hay%más%de%un%elemento%que%manLenen%
una%relación%significaLva,%puede%ser%comparLr%el%esLlo.%
%
%
%
%
%
Estructura%HTML%
En%HTML5,%los%bloques%,son%susLtuidos%por%bloques%semánLcos%que%
%%%
muestran%significado%por%si%mismos.%
%%
%%
<header>%
% <nav>%
%
<secLon>%
<aside>%
%
<arLcle>%
%
%
%
<footer>%
Estructura%HTML%
Una%página%de%este%Lpo%realizada%con%<div>,quedaría%de%la%
%%%
siguiente%manera.
%
%%
Es%habitual%una%caja%contenedor%para%impedir%que%ocupe%toda%la%página%cuando%la%ventana%
%
de%la%navegador%es%muy%grande%o%controlar%la%disposición%de%los%elementos%cuando%es%muy%
pequeña.%
%
%
%
%
%
%
+,CSS,
Estructura%HTML%
Una%página%de%este%Lpo%realizada%con%los%nuevos%bloques%
%%%
semánLcos%del%HTML5%quedaría.%
%%
%%
%
%
%
+,CSS,
Estructura%HTML%
La%estructura%HTML,,debe%realizarse%en%el%senLdo%lógico%de%lectura%
%%%
del%documento,%cuando%la%página%se%vea%sin%aplicar%los%esLlos%no%
%%
%
pierda%su%significado.%
%
%
%
%
%
%
%
%
Herencia%CSS%
Para%entender%como%funcionan%los%selectores%y%la%herencia%CSS%es%
%%%
necesario%entender%qué%es%el%árbol%del%documento.%
%%
%%
%
%
%
Herencia%CSS%
el%árbol%del%documento%del%ejemplo%anterior:%
%%%
%%%
%%
html%
%
%
%
head%
body%
Ltle%
div%.caja%
header%
nav%
h1%
ul%
arLcle%
li%
li%
li%
a%
a%
a%
footer%
Herencia%CSS%
Ancestor%es%un%elemento%conectado%pero%más%arriba%en%la%
%%%
estructura%del%documento%
%%
%%
html%
%
%
%
%
head%
body%
Ltle%
div%.caja%
Ancestor%
header%
nav%
arLcle%
h1%
ul%
descendientes%
li%
li%
li,
a%
a%
a%
footer%
Herencia%CSS%
Descendientes%son%los%elementos%conectados%pero%más%abajo%en%la%
%%%
estructura%del%documento.%
%%
%%
html%
%
%
%
%
head%
body%
Ltle%
div%.caja%
Ancestor%
header%
nav%
arLcle%
h1%
ul%
descendientes%
li%
li%
li,
a%
a%
a%
footer%
Herencia%CSS%
Parent%es%el%elemento%conectado%y%directamente%sobre%un%
%%%
elemento%en%la%estructura%del%documento.%
%%
%%
html%
%
%
%
%
head%
body%
Ltle%
div%.caja%
header%
nav%
h1%
ul%
descendientes%
arLcle%
Parent%
li%
li%
li,
a%
a%
a%
footer%
Herencia%CSS%
Child%es%el%elemento%conectado%y%directamente%debajo%de%un%
%%%
elemento%en%la%estructura%del%documento.%
%%
%%
html%
%
%
%
%
head%
body%
Ltle%
div%.caja%
Child%
header%
nav%
arLcle%
h1%
ul%
li%
li%
li%
a%
a%
a%
footer%
Herencia%CSS%
Siblings,son%los%elementos%que%comparten%un%mismo%padre%en%la%
%%%
estructura%del%documento.%
%%
%%
html%
%
%
%
%
head%
body%
Ltle%
div%.caja%
header%
nav%
h1%
ul%
Siblings%
li%
li%
arLcle%
Parent%
li,
footer%
Herencia%CSS%
Si%definimos%un%esLlo%en%el%body,%todos%los%elementos%situados%
%%%
debajo%en%el%árbol%del%documento,%heredan%esa%propiedad.%
%%
%%
%
%
%
%
%
%
%
%
%
HTML%
Fin%del%tema%
Ejercicio%
Realiza%un%esquema%sencillo%de%este%documento%HTML%a%su%estructura%Lpo%árbol,%que%resuma%brevemente%las%
relaciones%directas%entre%elementos%de%la%página,%clarificando%la%jerarquía%del%árbol.%
%%
<!doctype%html>%
<html>%
%%
<head>%
%
<meta%charset="u_E8">%
<Ltle>Ejercicio%opcional%árbol</Ltle>%
</head>%
<body>%
<header>%
%%%%<img%src="logoLpo.jpg"%alt="Firefox%Logo"%width="100"%height="100">%
</header>%
<nav>%
%%%%<ul>%
%%%%%%<li>Menú%1</li>%
%%%%%%<li>Menú%2</li>%
%%%%%%<li>Menú%3</li>%
%%%%</ul>%
</nav>%
<arLcle>%
%%<h1>Titular%de%nivel%1</h1>%
%%<p>Contenido%de%la%página</p>%%
</arLcle>%
<footer>Pie%de%página</footer>%
</body>%
</html>%
%
%
%
Ejercicio%
1.E%Cuál%de%las%siguientes%eLquetas%NO%es%de%bloque%block:%
%a)%<h1>%b)%<hr>%c)%<span>%d)%<p>%%%
%%
%2.E%Cuál%de%las%siguientes%eLquetas%NO%es%de%bloque%block:%
%a)%<p>%%b)%<hr>%%c)%<ul>%%d)%<strong>%%%%%
%%
3.E%Cuál%de%las%siguientes%eLquetas%NO%es%en%línea%inline:%
%
%a)%<em>%%b)%<span>%%c)%<pre>%%d)%<a>%%%
5.E%Cuál%de%las%siguiente%eLqueta%de%estructura%no%es%semánLca%HTML5%
%a)%<header>%%b)%<secLon>%%c)%<pie>%%d)%<aside>%%%
%
Analizar%el%árbol%del%siguiente%documento%HTML%%
<!doctype%html><html><head><meta%charset="u_E8“><Ltle>Herencia%CSS</Ltle></head>%
<body><ul><li>Elemento%de%lista%1</li><li>Elemento%de%lista%2</li><li>Elemento%de%lista%3</li></ul></body></html>%%
6.E%la%eLqueta%ul%seria%el%"parent%"%de:%
%a)%Body%b)%el%propio%ul%c)%los%li%d)%html%%%%
7.E%body%es%"ancestor"%de%Ltle:%
%a)%SI%%b)%NO%%%%
%
Analizar%el%árbol%del%siguiente%documento%HTML%%
<!doctype%html><html><head><meta%charset="u_E8“><Ltle>Herencia%CSS</Ltle></head>%
<body><ul><li>Elemento%de%lista%1</li><li>Elemento%de%lista%2</li><li>Elemento%de%lista%3</li></ul>%
<p>Esto%es%un%párrafo</p></body></html>%
8.E%la%eLqueta,p%seria%el%hijo%"child"%de:%
%a)%Body%b)%ul%c)%el%úlLmo%li%d)%de%todos%los%anteriores%%%%
9.E%la%eLquetas,serian%hermanos%"siblings":%
%a)%los%tres%li%%b)%los%tres%li%y%el%p%%c)%ul%%d)%las%respuestas%a%y%b%son%correctas%%%
10.E%Cuál%de%las%siguientes%afirmaciones%es%incorrecta%
a)%ul%es%hijo%"child"%de%body%%b)%p%es%hijo%"child"%de%body%%%c)%p%es%hijo%"child"%de%ul%%d)%li%es%hijo%"child"%de%ul%%%
%%
%%
%
%
Ejercicio%E%Soluciones%
1.E%Cuál%de%las%siguientes%eLquetas%NO%es%de%bloque%block:%
%a)%<h1>%b)%<hr>%c)%<span>%d)%<p>%%C%
%%
%2.E%Cuál%de%las%siguientes%eLquetas%NO%es%de%bloque%block:%
%a)%<p>%%b)%<hr>%%c)%<ul>%%d)%<strong>%%%%D%
%%
3.E%Cuál%de%las%siguientes%eLquetas%NO%es%en%línea%inline:%
%
%a)%<em>%%b)%<span>%%c)%<pre>%%d)%<a>%%C%
5.E%Cuál%de%las%siguiente%eLqueta%de%estructura%no%es%semánLca%HTML5%
%a)%<header>%%b)%<secLon>%%c)%<pie>%%d)%<aside>%%C%
%
Analizar%el%árbol%del%siguiente%documento%HTML%%
<!doctype%html><html><head><meta%charset="u_E8“><Ltle>Herencia%CSS</Ltle></head>%
<body><ul><li>Elemento%de%lista%1</li><li>Elemento%de%lista%2</li><li>Elemento%de%lista%3</li></ul></body></html>%%
6.E%la%eLqueta%ul%seria%el%"parent%"%de:%
%a)%Body%b)%el%propio%ul%c)%los%li%d)%html%%%C%
7.E%body%es%"ancestor"%de%Ltle:%
%a)%SI%%b)%NO%%%B%
%
Analizar%el%árbol%del%siguiente%documento%HTML%%
<!doctype%html><html><head><meta%charset="u_E8“><Ltle>Herencia%CSS</Ltle></head>%
<body><ul><li>Elemento%de%lista%1</li><li>Elemento%de%lista%2</li><li>Elemento%de%lista%3</li></ul>%
<p>Esto%es%un%párrafo</p></body></html>%
8.E%la%eLqueta,p%seria%el%hijo%"child"%de:%
%a)%Body%b)%ul%c)%el%úlLmo%li%d)%de%todos%los%anteriores%%%A%
9.E%la%eLquetas,serian%hermanos%"siblings":%
%a)%los%tres%li%%b)%los%tres%li%y%el%p%%c)%ul%%d)%las%respuestas%a%y%b%son%correctas%%A%
10.E%Cuál%de%las%siguientes%afirmaciones%es%incorrecta%
a)%ul%es%hijo%"child"%de%body%%b)%p%es%hijo%"child"%de%body%%%c)%p%es%hijo%"child"%de%ul%%d)%li%es%hijo%"child"%de%ul%%C%
%%
%%
%
%
CSS#
Prioridad#
Selectores#CSS#
El#selector#aplica#a#todos#los#elementos#HTML#de#la#página#con#esa#
###
e9queta#(p).#
##
##
#
El#selector(múl+ple#de#CSS,#incluye#varios#selectores#separados#por#
coma#(,),#aplicando#el#es9lo#a#cualquier#elemento#con#alguna#de#las#
marcas#incluidas:#h1,(h2,(h3.#
#
#
El#selector#puede#incluir#e9quetas#separadas(solo(por(espacios.#El#
selector#aplicará#solo#a#elementos#con#la#úl9ma#marca#(ul),#con#los#
anteriores#como#ancestros,#es#decir#.caja#deberá#ser#ancestro#de#
nav#y#nav#deberá#ser#ancestro#de#ul.#
((
#
#
Prioridad#CSS#
Cuando#dos#declaraciones#afectan#a#un#mismo#elemento.#¿cual#de#
###
ellas#se#interpreta#en#el#navegador#como#más#importante?#
##
##
#
A#=#0#es9los#en#línea#
#
B#=#0#ID#
#
C#=#0#clases#
D#=#1#elemento#
#
#
#
#
Puntuación#=#0,0,0,1#
#
Hay#que#calcular#la#tupla#(A,#B,#C,#D)#ganadora#de#
todas#las#reglas#CSS#que#compiten.#A#9ene#
máximo#peso#y#D#mínimo.#Si#hay#empate#en#A,#se#
mira#B#y#así#sucesivamente.#
#
A#=#es9lo#en#línea#
B#=#número#de#IDs#
C#=#número#de#clases#
D#=#número#de#marcas#HTML#
#
Prioridad#CSS#
Cuando#dos#declaraciones#afectan#a#un#mismo#elemento.#¿cual#de#
###
ellas#se#interpreta#en#el#navegador#como#más#importante?#
##
##
#
A#=#0#es9los#en#línea#
#
B#=#0#ID#
#
C#=#0#clases#
D#=#2#marcas#
#
#
#
#
Puntuación#=#0,0,0,2#
#
Hay#que#calcular#la#tupla#(A,#B,#C,#D)#ganadora#de#
todas#las#reglas#CSS#que#compiten.#A#9ene#
máximo#peso#y#D#mínimo.#Si#hay#empate#en#A,#se#
mira#B#y#así#sucesivamente.#
#
A#=#es9lo#en#línea#
B#=#número#de#IDs#
C#=#número#de#clases#
D#=#número#de#marcas#HTML#
Prioridad#CSS#
Cuando#dos#declaraciones#afectan#a#un#mismo#elemento.#¿cual#de#
###
ellas#se#interpreta#en#el#navegador#como#más#importante?#
##
##
#
A#=#0#es9los#en#línea#
#
B#=#1#ID#
#
C#=#1#clase#
D#=#1#elemento#
#
#
#
#
Puntuación#=#0,1,1,1#
#
Hay#que#calcular#la#tupla#(A,#B,#C,#D)#ganadora#de#
todas#las#reglas#CSS#que#compiten.#A#9ene#
máximo#peso#y#D#mínimo.#Si#hay#empate#en#A,#se#
mira#B#y#así#sucesivamente.#
#
A#=#es9lo#en#línea#
B#=#número#de#IDs#
C#=#número#de#clases#
D#=#número#de#marcas#HTML#
#
Prioridad#CSS#
Cuando#dos#declaraciones#afectan#a#un#mismo#elemento.#¿cual#de#
###
ellas#se#interpreta#en#el#navegador#como#más#importante?#
##
##
#
A#=#0#es9los#en#línea#
#
B#=#1#ID#
#
C#=#0#clases#
D#=#2#marcas#
#
#
#
#
Puntuación#=#0,1,0,2#
#
Hay#que#calcular#la#tupla#(A,#B,#C,#D)#ganadora#de#
todas#las#reglas#CSS#que#compiten.#A#9ene#
máximo#peso#y#D#mínimo.#Si#hay#empate#en#A,#se#
mira#B#y#así#sucesivamente.#
#
A#=#es9lo#en#línea#
B#=#número#de#IDs#
C#=#número#de#clases#
D#=#número#de#marcas#HTML#
Prioridad#CSS#
La#ganadora#es,##caja#.cabecera#h1#=#0,1,1,1
#
###
# ##
##
Ganadora:#
#
A#=#0#es9los#en#línea#
B#=#1#ID#
C#=#1#clase#
D#=#1#elemento#
Puntuación#=#0,1,1,1#
Prioridad#CSS#
Cuando#dos#declaraciones#9enen#el#mismo#valor:#
###
Será#la#úl9ma#especificada#
##
##
#
#
#
#
Selectores#CSS#
Selector#universal(
###
*(##
#
Afecta#a#todos#los#elementos.#
#
#
#
#
#
#
Reglas#CSS#
Modificación#de#es9los,#por#el#usuario#en#el#navegador:#9pograYas#
###
###
##
#
#
Prioridad#CSS#
Reglas#adicionales#de#prioridad#de#las#declaraciones#CSS#ordenadas#
###
de#menor#a#mayor:#
##
##
• (CSS#por(defecto(del(Navegador#(navegador)#
• #CSS#en#preferencias(de(usuario(del(navegador#(usuario)(
• #CSS#en#página(HTML(o(script(CSS#(diseñador)(
• (CSS#en#página(HTML(o(script(CSS#con#!important#(diseñador),#p.#e.#
body({color:blue(!important;}(#
• #CSS#en#preferencias(de(usuario(del(navegador#con#!important#
(usuario),#p.#e.#body({color:blue(!important;}(#
#
#
#
#
Recursos#CSS#
Kseso(CSS:(CSS#básico:#Cascada,#especificidad#y#herencia#
###
h\p://ksesocss.blogspot.com/2012/05/css`basico`cascada`especificidad`y.html#
##
##
Dev.Opera:(Recorriendo#el#árbol#DOM#
h\p://dev.opera.com/ar9cles/view/traversing`the`dom`es/#
#
LIBROS(WEB:(Árbol#de#nodo#
h\p://librosweb.es/javascript/capitulo_5/arbol_de_nodos.html#
#
UOC:(Herencia#y#cascada#
h\p://mosaic.uoc.edu/ac/le/es/m6/ud2/#
#
LIBROSWEB:(Colisiones#de#es9los#
h\p://librosweb.es/css/capitulo_2/colisiones_de_es9los.html#
#
CSS:(Specifity#Wars#
h\p://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html#
#
#
Recursos#HTML#
Bruce(Lawson:(HTML5#ar9cles#and#sec9ons:#what’s#the#difference?#
###
h\p://www.brucelawson.co.uk/2010/html5`ar9cles`and`sec9ons`
##
#
whats`the`difference/#
#
html5(Doctor:(The#ar9cle#element#
h\p://html5doctor.com/the`ar9cle`element/#
#
HTM5(paso(a(paso:(div,#sec9on#y#ar9cle#
h\p://html5pasoapaso.blogspot.com.es/2011/08/div`sec9on`y`
ar9cle.html#
#
ondho:(HTML5#(discusiones#entre#ar9cle#y#sec9on)#
h\p://www.ondho.com/html5`discusiones`entre`ar9cle`y`sec9on/#
#
#
#
CSS#
Fin#del#tema#
Ejercicio#
Realizar#en#el#siguiente#HTML#5#declaraciones#de#es9lo#CSS#que#afecten#al#mismo#elemento,#el#9tular#h1,#con#
diferentes#puntuaciones#de#prioridad,#e#indicar#su#puntuación#como#un#comentario#en#el#propio#HTML:#
# ##
## <!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é#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
1.`#Es9lo#por#defecto#del#navegador#`#h2#{#color:#black;#}##2.`#Es9lo#fijado#por#el#diseñador#`#h2#{#color:#green;#}####
##
¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
## 1.`#Es9lo#por#defecto#del#navegador#`#h2#{#color:#black;#}##2.`#Es9lo#fijado#por#el#usuario#`#h2#{#color:#green;#}#
# 3.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2#{#color:#blue;#}##4.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2#
{#color:#lime#!important;#}###
¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
1.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2.news#{#color:#green;#}##2.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#
`#h2#{#color:#blue;#}###
¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
1.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2#{#color:#blue;#}##2.`#En#la#línea#siguiente#del#CSS#`#h2#{#color:#
purple;#}##
#¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
1.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`##caja#h2#{#color:#lime;#}##2.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#
h2.news#{#color:#green;#}##3.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2#{#color:#blue;#}###
#¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
1.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`##caja#h2#{#color:#lime;#}##2.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#
h2.news#{#color:#green;#}##3.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2#{#color:#blue;#}##4.`#Es9lo#en#hoja#CSS#
externa#o#en#el#Head#`#h2#{#color:#purple;#}##5.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#div#caja#h2#{#color:#
black;#}##
##
#
Ejercicio#`#Soluciones#
¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
1.`#Es9lo#por#defecto#del#navegador#`#h2#{#color:#black;#}##2.`#Es9lo#fijado#por#el#diseñador#`#h2#{#color:#green;#}##2##
##
¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
## 1.`#Es9lo#por#defecto#del#navegador#`#h2#{#color:#black;#}##2.`#Es9lo#fijado#por#el#usuario#`#h2#{#color:#green;#}#
# 3.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2#{#color:#blue;#}##4.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2#
{#color:#lime#!important;#}##4#
¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
1.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2.news#{#color:#green;#}##2.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#
`#h2#{#color:#blue;#}##1#
¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
1.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2#{#color:#blue;#}##2.`#En#la#línea#siguiente#del#CSS#`#h2#{#color:#
purple;#}#2#
#¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
1.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`##caja#h2#{#color:#lime;#}##2.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#
h2.news#{#color:#green;#}##3.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2#{#color:#blue;#}##1#
#¿Qué#regla#CSS#ganaría#en#la#presentación#en#el#navegador?#
1.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`##caja#h2#{#color:#lime;#}##2.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#
h2.news#{#color:#green;#}##3.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#h2#{#color:#blue;#}##4.`#Es9lo#en#hoja#CSS#
externa#o#en#el#Head#`#h2#{#color:#purple;#}##5.`#Es9lo#en#hoja#CSS#externa#o#en#el#Head#`#div#caja#h2#{#color:#
black;#}#5#
##
#
HTML/CSS(
Navegación(
Navegación(HTML(
Un(menú(es(una(lista(de(enlaces.(Se(recomienda(usar(las(marcas(de(
(((
lista((<ul>)<li>)y(el(enlace(<a>,(que(es(lo(establecido(por(las(normas(
((
de(accesibilidad.((
(
(
(
(
(
(
(
(
(
(
(
(
(
Navegación(HTML(
Menú(verAcal)
(((
((
((
(
(
(
(
(
(
(
(
(
(
(
Navegación(CSS(
Los(valores(CSS(por(defecto(de(la(lista(y(del(enlace,(deben(ser(
(((
ajustados(a(nuestras(necesidades.)
((
(
(
(
(
(
(
(
(
(
(
(
(
(
Ejemplo(menú(verAcal(
myspace(
Navegación(HTML(
Menú(horizontal)
(((
((
((
(
(
(
(
(
(
(
(
(
(
(
Navegación(CSS(
CSS(menú(horizontal.)
(((
((
((
(
(
(
(
(
(
(
(
(
(
( Ejemplo(menú(horizontal(
BBC(
Menús(Firefox(OS(
Los(menús(recomendados(para(las(aplicaciones(en(Firefox(OS((
(((
((
((
(
(
(
(
(
(
(
(
(
(
(
Firefox(OS(App(BuMons:(
hMp://www.mozilla.org/enPUS/styleguide/products/firefoxPos/buMons/(
(
Iconos(para(aplicaciones(Firefox(OS(
Un(icono(para(una(aplicación(Firefox(OS(es(una(imagen(de(píxeles(
(((
60x60(píxels(en(formato(PNG(de(24(bits.(
((
(
(
(
(
(
(
(
(
(
(
(
(
(
Hay(otras(tamaños((
necesarios(para(otros(
disposiAvos:(
16px,(32px,(48px,(
60px,(128px,(256px.(
Guías(de(diseño(de(mozilla,)para(descargar(las(planAllas(de(los(iconos(
hMp://www.mozilla.org/enPUS/styleguide/products/firefoxPos/icons/(
Recursos(navegación(CSS(
Cristalab:)Menús(verAcales(
(((
hMp://www.cristalab.com/cursoPhtml/menusPverAcales/(
((
((
CSS)Blog:)Crear(un(menú(horizontal(simple(con(CSS(
hMp://www.cssblog.es/crearPunPmenuPhorizontalPsimplePconPcss/(
(
w3schools:)menú(horizontal(
hMp://www.w3schools.com/css/tryit.asp?filename=trycss_float5(
(
(
(
(
(
(
(
HTML/CSS(
Fin(del(tema(
Ejercicio(
1.P(Realizar(el(CSS(de(un(menú(verAcal(de(este(html:(
<!doctype(html><html><head><meta(charset="uhP8“><Atle>Menú</Atle></head>(
((
<body>(
<nav><h1>Discover(</h1><ul><li><a(href="#"(class="welcome">Welcome</a></li><li><a(href="#"(
((
class="featured">Featured</a></li><li><a(href="#"(class="people">People</a></li><li><a(href="#"(
(
class="music">Music</a></li><li><a(href="#"(class="mixes">Mixes(</a></li><li><a(href="#"(
class="videos">Videos</a></li><li><a(href="#"(class="radio">Radio</a></li></ul></nav>(
</body></html>(
((
2.P(Realizar(el(CSS(de(un(menú(horizontal(de(este(html:(
<!doctype(html><html><head><meta(charset="uhP8“><Atle>Menú</Atle></head>(
<body>(
<nav><h1>BBC</h1><ul><li(class="news">(<a(href="#">News</a>(</li><li(class="sport">(<a(href="#">Sport</a>(</
li><li(class="weather">(<a(href="#">Weather</a>(</li><li(class="capital">(<a(href="#">Capital</a>(</li>(
<li(class="culture">(<a(href="#">Culture</a>(</li><li(class="autos">(<a(href="#">Autos</a>(</li>(
<li(class="tv">(<a(href="#">TV</a>(</li><li(class="radio">(<a(href="#">Radio</a>(</li><li(class="more">(<a(
href="#">More…</a>(</li></ul><div(class="clear">(</div></nav>(
</body></html>(
(
(
(
((
((
(
(
Ejercicio(
1.P((un(menú(se(realiza(a(parAr(de(una(lista(de(elementos,(que(se(convierte(en(una(lista(de(enlaces,(sus(
eAquetas(son:(
(((
a)(ul>li>a((b)(p>li>a((c)(p>a((d)(todas(las(anteriores(
((
((
(
2.P(El(selector((a:hover,(se(emplea(para(definir(el(esAlo(de:(
a)(el(enlace(acAvo((b)(el(enlace(visitado((c)(cuando(el(ratón(pasa(sobre(el(enlace((d)(todas(las(
anteriores(
((
3.P(En(el(menú(horizontal,(hay(que(modificar(los(valores(por(defecto(de(la(lista(para(que(estén(
horizontal,(se(realiza(modificando(el(esAlo(del(selector(y(propiedad:(
a)(ul{display:(inline;}((b)(il{display:(inline;}((c)(a{display:(inline;}((d)(cualquiera(de(las(anteriores(
((
4.P(La(diferencia(entre(un(elemento(con(enlace(y(el(texto(sin(enlace,(se(aconseja(por(usabilidad(que(sea(
visiblemente(diferente(
a)(Si((b)(No(
((
5.(¿Qué(condiciones(debe(cumplir(un(icono(para(Firefox(OS?(
a.(Debe(ser(una(imagen(de(formato(PNG.(((b.(Debe(ser(una(imagen(de(formato(JPG.((c.(Debe(medir(
3(REM.((d.(Debe(medir(3(REM(píxeles(en(color(blanco.(((
((
((
Ejercicio(P(Soluciones(
1.P((un(menú(se(realiza(a(parAr(de(una(lista(de(elementos,(que(se(convierte(en(una(lista(de(enlaces,(sus(
eAquetas(son:(
(((
a)(ul>li>a((b)(p>li>a((c)(p>a((d)(todas(las(anteriores(((A(
((
((
(
2.P(El(selector((a:hover,(se(emplea(para(definir(el(esAlo(de:(
a)(el(enlace(acAvo((b)(el(enlace(visitado((c)(cuando(el(ratón(pasa(sobre(el(enlace((d)(todas(las(
anteriores(((C(
((
3.P(En(el(menú(horizontal,(hay(que(modificar(los(valores(por(defecto(de(la(lista(para(que(estén(
horizontal,(se(realiza(modificando(el(esAlo(del(selector(y(propiedad:(
a)(ul{display:(inline;}((b)(il{display:(inline;}((c)(a{display:(inline;}((d)(cualquiera(de(las(anteriores((B(
((
4.P(La(diferencia(entre(un(elemento(con(enlace(y(el(texto(sin(enlace,(se(aconseja(por(usabilidad(que(sea(
visiblemente(diferente(
a)(Si((b)(No((A(
((
5.(¿Qué(condiciones(debe(cumplir(un(icono(para(Firefox(OS?(
a.(Debe(ser(una(imagen(de(formato(PNG.(((b.(Debe(ser(una(imagen(de(formato(JPG.((c.(Debe(medir(
3(REM.((d.(Debe(medir(3(REM(píxeles(en(color(blanco.((A(
((
((
HTML/CSS(
Texto(
Texto(CSS(
Las(marcas(que(permiten(definir(las(propiedades(y(aspectos(
(((
visuales(de(una(fuente.(
((
(
font%family(es(la(propiedad(que(permite(definir(la(fuente(para(un(
elemento.(
P {
font-family: "Times New Roman”, Georgia,
Serif; }
(
(
(
(
(
(
h?p://www.w3.org/TR/CSS2/fonts.html((
Texto(CSS(
Las(propuestas(de(familia(Fpográfica(terminan(con(una(familia+
(((
genérica+alterna1va.(
((
( P {
font-family:"Times New
Roman",Georgia,Serif; }
(
Valores(de(las(familias(genéricas(son:((
• 'serif'((Ej.:(Times)(
• 'sansOserif'((Ej.:(HelveFca)(
• 'cursive'((Ej.:((ZapfOChancery)(
• 'fantasy'((Ej.:((Western)(
• 'monospace'((Ej.:(Courier)(
(
(
(h?p://www.w3.org/TR/CSS2/fonts.html#genericOfontOfamilies(
(
Texto(CSS(
Familia+1pográfica.(Es(una(serie(de(Fpos(clasificables,(por(su(peso,(
(((
inclinación,(proporción,(espaciado,(ausencia(o(presencia(de(
((
(
serifas…(En(FpograWa(digital,(en(los(formatos(actuales,(una(serie(
completa(esta(incluida(en(un(único(archivo,(que(conFene(los(Fpos(
independientes.(
(
(
(
(
(
(
(
(
(
Texto(CSS(
Font%weight.(Especifica(el(peso(de(la(letra,(según(los(siguientes(
(((
valores.(
((
normal(|(bold(|(bolder(|(lighter(|(100(|(200(|(300(|(400(|(500(|(600(|(700(|(800(|(900(|(inherit(
(
(
(
(
(
(
(
(
(
(
(
(
Texto(CSS(
font%strech++Especifica(el(ancho(de(la(fuente,(la(mayoría(de(los(
(((
navegadores(no(soportan(esta(propiedad(
((
(
normal(|(ultraOcondensed(|(extraOcondensed(|(condensed(|(semiOcondensed(|(semiOexpanded(|(
expanded(|(extraOexpanded(|(ultraOexpanded(|(inherit(
(
(
(
(
Font%style.(Especifica(el(esFlo(de(la(fuente.(Normal,(condensada...(
normal(|(italic(|(oblique(|(inherit(
(
(
(
(
(
(h?ps://developer.mozilla.org/enOUS/docs/Web/CSS/fontOstretch(
Texto(CSS(
font%size++Especifica(el(tamaño(de(la(fuente(
(((
<absoluteOsize>(|(<relaFveOsize>(|(<length>(|(<percentage>(|(
inherit(
((
(
Tamaño(predeterminado(para(el(texto(es(de(
16px((16px(=(1em).(
<absolute%size>+Los(valores(posibles(son:((
[(xxOsmall(|(xOsmall(|(small(|(medium(|(large(|(xOlarge(|(xxOlarge(](
<rela1ve%size>++Un(valor(relaFvo(al(heredado,(mayor(o(menor:(
([(larger(|(smaller(](
<length>+es(un(valor(absoluto(del(tamaño(generalmente(en(px(
<percentage>+representa(un(valor(en(función(al(valor(heredado.(
(
xx%small( x%small(
small(
medium(
large(
x%large(
xx%large(
+(
(
( scaling+
3/5(
3/4(
8/9(
1(
6/5(
3/2(
2/1(
3/1(
factor(
(
h6(
(
h5(
h4(
h3(
h2(
h1(
(
( XHTML+
headings(
(
( h?ps://developer.mozilla.org/enOUS/docs/Web/CSS/fontOsize(
Texto(CSS(
font%variant+Especifica(la(variante(de(la(fuente.((
(((
Valor:((normal(|(smallOcaps(
((
(
es(la(versión(versalita(de(una(fuente(
(
(
(
(
(
(
(
(
(
Texto(CSS(
line%height+–(define(el(interlineado(del(texto(
(((
normal(|(<número>(|(<medida>(|(<porcentaje>(|(inherit(
((
(
El(número(que(mulFplicado(el(tamaño(de(la(fuente(establece(el(
alto(de(la(línea(
Medida,(es(la(altura(de(la(línea(como(un(valor(fijo(en(px,(pt…(
El(porcentaje(del(alto(de(la(línea(en(función(del(tamaño(de(la(
fuente(
h?p://www.w3schools.com/cssref/playit.asp?
filename=playcss_lineOheight&preval=25px(
(
(
(
(
(
(
(
@font(CSS(
Formatos+@font%face
(
(((
(((
(( String(
( "woff"(
( "truetype"(
( "opentype"(
Font+Format(
Common+extensions(
WOFF((Web(Open(
Font(Format)(
.woff(
TrueType(
OpenType(
.t(
.t,(.ou(
opentype"(
Embedded(OpenType(
.eot(
"svg"(
SVG(Font(
.svg,(.svgz(
( "embedded%
@font(CSS(
Compa1bilidad+–(Depende(del(navegador(y(del(sistema(operaFvo,(
(((
La(mayoría(de(navegadores(y(SO.(
((
((
WOFF((Web(Open(Font(Format(
El(Web(Open(Font(Format((WOFF)(es(un(formato(de(Fpo(de(letra(
para(usarse(en(páginas(web.(Fue(desarrollado(por(la(Fundación(
Mozilla,(Opera(Soxware(y(Microsox,(y(está(en(el(proceso(de(
normalización(por(el(W3C(y(converFrse(en(un(estándar.((
(
EOT(Embedded(OpenType(
Embedded(OpenType(((EOT()(estas(fuentes(son(una(forma(
compacta(de(OpenType(para(su(uso(como(fuentes(incrustadas(en(
las(páginas(web(y(a(su(vez(protegen(los(derechos(de(autor.((
h?p://caniuse.com/fonuace(
@font(CSS(
SVG(Scalable(Vector(Graphics((
(((
SVG(es(una(especificación(para(describir(gráficos(vectoriales(
((
(
bidimensionales,(estáFco(o(animado(y(fue(creado(como(alternaFva(
de(formato(abierto(a(Flash.(se(emplea(como(formato(Fpográfico(en(
la(web(para(disposiFvos(iOS((iPad,(iPhone(y(iPod)(
(
TrueType++
TrueType(es(un(formato(estándar(de(Fpos(de(letra(escalables(
desarrollado(inicialmente(por(Apple(a(finales(de(la(década(de(los(
ochenta.(Es(compaFble(con(Firefox(3.5+(,(Safari(3.1+,(Chrome(4+(y(
Opera(10+.(
(
(ConverFr(fuentes(
(h?p://www.fontsquirrel.com/tools/webfontOgenerator(
(
(
@font(CSS(
@font%face+%+Permite(vincular(fuentes(sin(necesidad(de(que(el(cliente(las(tenga(instaladas(
(((
en(su(ordenador.((
((
fontOfamily((
(
Valor:(<familyOname>((
Src++
[(<uri>([format(<string>([,(<string>]*)](|(<fontOfaceOname>(]([,(<uri>([format(<string>([,(
<string>]*)](|(<fontOfaceOname>(]*((
(
@font-face {
font-family: FiraMono;
src: url(FiraMono-Regular.woff) format("woff"),
url(FiraMono-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/(
TipograWa(Firefox(OS(
Fira+Sans+para+Firefox+OS+
Firefox(OS(uFliza(Fira(Sans,(una(fuente(Fpográfica(específica(en(diferentes(cuerpos(y(
(((
pesos.(Diseñada(por(Erik(Spiekermann(y(Ralph(de(Carois(para(Firefox(OS.((
((
((
Descargar(la(fuente(y(conocer(las(recomendaciones(de(uso(en:(
h?p://www.mozilla.org/enOUS/styleguide/products/firefoxOos/typeface/(
(
@font(CSS(
@font%face+embedding+
(((
Es(posible(el(uso(de(fuentes(alojadas(en(servidores(externo(
((
((
Google+Fonts+
En(la(cabecera((
<link href='http://fonts.googleapis.com/
css?family=Caesar+Dressing' rel='stylesheet' type='text/
css'>
En(el(esFlo(
(
p {
font-family: 'Caesar Dressing', cursive;
}
+
(
(h?p://webfonts.info/fontsOavailableOfontOfaceOembedding(
(
Recursos(CSS(
((((W3C:+CSS(Fonts(Module(Level(3(
(((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:+Google(Font(API(and(Typekit(soluFons(VS(@fontOface(
h?p://www.redOteamOdesign.com/googleOfontOapiOandOtypekitOsoluFonsOvsOfontOface(
(
(
(
(
HTML/CSS(
Fin(del(tema(
Ejercicio(
Realiza(una(página(que(contenga(un(párrafo(con(fuentes(vinculadas,(con(la(fuente(del(SO(de(firefox(
FiraOpenType,(que(puedes(descargar(aquí:((
(((
(
((
h?ps://www.mozilla.org/enOUS/styleguide/products/firefoxOos/typeface/(
((
Y(otro(párrafo(con(fuentes(vinculadas(de(google(fonts(
(
(
(
((
((
(
Ejercicio(
1.O((@fontOface(permite(vincular(fuentes:(
((( a)(pero(el(usuario(debe(tener(las(fuentes(instaladas(en(su(disposiFvo((b)(el((usuario(no(es(
necesario(que(tenga(las(fuentes(instaladas(en(su(disposiFvo(
((
((
(
2.O((cual(de(los(siguientes(formatos(no(es(un(formato(de(fuente:(
a)(.WOOF((b)(.SVG(((c)(.SWF((d)(.OTF(
((
3.O((cual(de(los(siguientes(formatos(no(es(un(formato(de(fuente:(
a)(.WOOF((b)(.TTF(c)(.EOT((d)(.PNG(
((
4.O((mediante(@fontOface(es(posible(el(uso(de(fuentes(alojadas(en(servidores(de(terceros(como(google(
fonts:(
a)(Se(enlaza(mediante(el(uso(de(una(eFqueta(<link(>(en(la(cabecera(de(la(página((b)(Es(necesario(
bajar(la(fuente(y(alojarla(en(tu(propio(servidor(
((
5.(¿Cuál(es(la(FpograWa(corporaFva(de(Firefox(OS?(
a)(Fira(Sans(y(Fira(Mono.((b)(Fira(Sans(para(el(correo(electrónico(y(ITC(Officina(para(el(resto(de(las(
aplicaciones.((c)(Fira(Sans(en(los(tamaños(grandes(y(Fira(Mono(en(los(tamaños(por(debajo(de(11(
px.((d)(FF(Meta(y(FF(The(Sans.(((
((
((
((
((
Ejercicio(O(Soluciones(
1.O((@fontOface(permite(vincular(fuentes:(
((( a)(pero(el(usuario(debe(tener(las(fuentes(instaladas(en(su(disposiFvo((b)(el((usuario(no(es(
necesario(que(tenga(las(fuentes(instaladas(en(su(disposiFvo((B(
((
((
(
2.O((cual(de(los(siguientes(formatos(no(es(un(formato(de(fuente:(
a)(.WOOF((b)(.SVG(((c)(.SWF((d)(.OTF((C((SWF(es(un(formato(de(archivo(de(Adobe(Flash)(
((
3.O((cual(de(los(siguientes(formatos(no(es(un(formato(de(fuente:(
a)(.WOOF((b)(.TTF(c)(.EOT((d)(.PNG((D((PNG(es(un(formato(de(imagen)(
((
4.O((mediante(@fontOface(es(posible(el(uso(de(fuentes(alojadas(en(servidores(de(terceros(como(google(
fonts:(
a)(Se(enlaza(mediante(el(uso(de(una(eFqueta(<link(>(en(la(cabecera(de(la(página((b)(Es(necesario(
bajar(la(fuente(y(alojarla(en(tu(propio(servidor((A(
((
5.(¿Cuál(es(la(FpograWa(corporaFva(de(Firefox(OS?(
a)(Fira(Sans(y(Fira(Mono.((b)(Fira(Sans(para(el(correo(electrónico(y(ITC(Officina(para(el(resto(de(las(
aplicaciones.((c)(Fira(Sans(en(los(tamaños(grandes(y(Fira(Mono(en(los(tamaños(por(debajo(de(11(
px.((d)(FF(Meta(y(FF(The(Sans.((A(
((
((
((
((
CSS#
div#
Imágenes#HTML#
Las#imágenes#se#vinculan#en#una#página#HTML#con#la#e8queta#<img>#con#los#
###
atributos#
##
src#=#URL###
#
alt#=#texto#alterna8vo#de#la#imagen#
width#=#ancho#
height-=#alto#
#
#
#
#
#
Estructura#CSS#
la#e8queta#<div>#ofrece#a#los#diseñadores#la#flexibilidad#y#el#control#
###
sobre#la#posición#cuando#se#combina#con#las#propiedades#CSS.#
##
##
Una#e8queta#div#puede#tener,#instrucciones#de#formato#(de#la#
familia#de#fuente,#color,#bordes,#etc),#atributos#de#altura#y#anchura,#
posicionamiento#
#
TamañoHay#que#tener#cuidado#al#emplear#el#tamaño,#el#contenido#según#el#
navegador#puede#desbordar#el#tamaño#de#un#div.#Evitar#definir#
altos#si#no#son#necesarios.#
#
#
div{
width: 400px;
}
Estructura#CSS#
la#propiedad#display,#permite#establecer#el#8po#de#caja#de#un#
###
elemento.#Los#valores#más#u8lizados#son:#inline,#block#y#none.##
####
#
#
#
#
#
#
#
#
#
#
#
Estructura#CSS#
Padding,#margin#y#border###
###
##
#
#
#
#
#
#
#
#
#
Estructura#CSS#
Background###
###
##
#
#
#
#
#
#
#
#
back_mantel.pngdh.png-
dh_2.png-
dh_3.png-
#
ac.jpg-
hSp://www.css3files.com/background/#
#
Estructura#CSS#
Background-ejemplo#3#imágenes#
###
###
##
#
#
#
#
#
#
div
#
#
#
}
f03.png-
f02.png-
f01.png-
{
background: url(texto/f01.png) left bottom
repeat-x,
url(texto/f02.png) left bottom no-repeat,
url(texto/f03.png) left top repeat-x;
background-color: #a4d3ff;
Estructura#CSS#
CSS3#permite#añadir#bordes-y-bordes-redondeados####
##
##
#
#
borderXradius:#24px;#
borderXtopXle\Xradius:#24px;#
borderXradius:#24px#0;#
borderXradius:#36px#12px;#
#
#
#
#
borderXtopXrightXradius:#50px#30px;# borderXboSomXrightXradius:#50px#30px;# borderXradius:#50%;#
borderXradius:#50%#50%#0#0;#
#
#
#
#
borderXradius:#0#20px#20px#0;#
borderXradius:#20px#0#0#20px;#
borderXradius:##0#50%#0#50%;# borderXtopXle\Xradius:#50%#20%;#
borderXtopXrightXradius:#50%#20%;#
borderXboSomXle\Xradius:#50%#20%;#
borderXboSomXrightXradius:#50%#20%;#
hSp://www.cssma8c.com/es/borderXradius#
Estructura#CSS#
CSS3#permite#añadir#sombras####
##
##
#
#
boxXshadow:#X5px#X5px##888;#
boxXshadow:#X5px#X5px#5px##888;#
#
#
#
#boxXshadow:#0#0#5px##888;#
boxXshadow:#0#0#5px#5px##888;#
#
#
#
#
boxXshadow:##
inset#X5px#X5px#0#5px##888;#
boxXshadow:#X5px#X5px#0#5px##888;#
boxXshadow:#X5px#X5px#5px#5px##888;#
boxXshadow:#inset#X5px#X5px##888;#
boxXshadow:#inset#X5px#X5px#5px##888;#
boxXshadow:##
inset#X5px#X5px#5px#5px##888;#
hSp://dev.w3.org/csswg/cssXbackgrounds/#
boxXshadow:#inner#0#0#5px##888;# boxXshadow:#inset#0#0#5px#5px##888;#
Recursos#CSS#
CSS3-Generator###
hSp://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#
Fin#del#tema#
Ejercicio#
Realiza#una#página#que#contenga#un#<div>##con#al#menos#3#imágenes#de#fondo,#bordes#redondeados#y#
sombra#
###
#
# ##
##
##
##
#
Ejercicio#
1.X##Las#caracterís8cas#de#una#caja#<div>#son#el#contenido,#el#margen#interior#padding,#el#borde#border#y#
el#margen#margin,#si#el#ancho#de#un#div#es#de#400px,#el#pading#20px#y#el#borde#5px,¿cuanto#mide#el#
###
ancho#total#de#la#caja?:#
## a)#400px##b)#425px##c)#450px##d)#440px#
##
2.X#Es#posible#colocar#más#de#una#imagen#de#fondo#en#una#caja#<div>#
a)#SI##b)#NO#
#
3.X#Los#valores#de#sombra#para#una#caja#<div>:#boxXshadow:#10px#10px#5px#2px#rgba(100,#100,#100,#
0.5);#
el#color#de#la#sombra#es:#
a)#Rojo##b)#verde##c)#azul##d)#gris#
#
4.X#Los#valores#de#sombra#para#una#caja#<div>:#boxXshadow:#inset#5px#5px#20px#5px##CCCCCC;#
La#sombra#es:#
a)#de#color#rojo#b)#interior#c)#de#30px#de#desplazamiento#horizontal#d)#exterior#
#
5.X#Los#valores#de#bordes#redondeados#para#una#caja#<div>:#borderXradius:#10px#0px#10px#0px;#
el#borde#de#la#caja:#
a)#es#igual#en#los#4#esquinas##b)#es#igual#en#la#top#le\#y#boSom#le\##c)#es#igual#en#top#le\#y#top#right###
d)#es#igual#en#top#le\#y#boSom#right#
##
##
##
Ejercicio#X#Soluciones#
1.X##Las#caracterís8cas#de#una#caja#<div>#son#el#contenido,#el#margen#interior#padding,#el#borde#border#y#
el#margen#margin,#si#el#ancho#de#un#div#es#de#400px,#el#pading#20px#y#el#borde#5px,¿cuanto#mide#el#
###
ancho#total#de#la#caja?:#
## a)#400px##b)#425px##c)#450px##d)#440px###C#
##
2.X#Es#posible#colocar#más#de#una#imagen#de#fondo#en#una#caja#<div>#
a)#SI##b)#NO##A#
#
3.X#Los#valores#de#sombra#para#una#caja#<div>:#boxXshadow:#10px#10px#5px#2px#rgba(100,#100,#100,#
0.5);#
el#color#de#la#sombra#es:#
a)#Rojo##b)#verde##c)#azul##d)#gris##D#
#
4.X#Los#valores#de#sombra#para#una#caja#<div>:#boxXshadow:#inset#5px#5px#20px#5px##CCCCCC;#
La#sombra#es:#
a)#de#color#rojo#b)#interior#c)#de#30px#de#desplazamiento#horizontal#d)#exterior##B#
#
5.X#Los#valores#de#bordes#redondeados#para#una#caja#<div>:#borderXradius:#10px#0px#10px#0px;#
el#borde#de#la#caja:#
a)#es#igual#en#los#4#esquinas##b)#es#igual#en#la#top#le\#y#boSom#le\##c)#es#igual#en#top#le\#y#top#right###
d)#es#igual#en#top#le\#y#boSom#right##D#
##
##
##
CSS#
Estructura#
Estructura#CSS#
CSS3#permite#posicionar#los#div#en#la#página,#float#
###
###
<style#type="text/css">#
##
div#{#
###float:#leA;#
#
###padding:#5px;#
###marginDright:#5px;#
#
###marginDboGom:#5px;#
#
###border:#1px#solid##666;#
}#
#
</style>#
#
#
#
#
#
#
#
Estructura#CSS#
CSS3#permite#posicionar#los#div#en#la#página,#float#y#clear/
###
Con#float#el#div#“flota”#a#una#posición#relaOva.#
##
##
#
#
#
#
#
#
#
#
#
#
#
#
#
Estructura#CSS#
CSS3#permite#posicionar#los#div#en#la#página,#float#y#clear/
###
Con#clear##rompe#el#esquema##del#float.#
##
##
#
#
#
#
#
#
#
#
#
#
#
#
#
Estructura#CSS#
Uso#de#float#y#un#div#clear/que#rompe#el#esquema##del#float.#
####
##
##
#
#
#
#
#
#
#
#
#
#
#
#
Estructura#CSS#
CSS3#permite#posicionar#los#div#en#la#página,#mediante#posiOon,#
###
absoluta,#relaOva#o#fija.#
##
#
Con#posición#absoluta#el#div#sale#del#flujo#del#contenido.#
#
#
#
#
#
#
#
#
#
#
#
#
#
Estructura#CSS#
Con#posición#fija#el#div#no#cambia#de#posición#en#el#escalado#del#
###
navegador#o#el#scroll#en#la#página.#
##
##
#
#
#
#
#
#
#
#
#
#
#
#
#
Estructura#CSS#
Las#cajas/flexibles,#se#consigue#con#un#nuevo#valor#de#la#propiedad#
###
display,#(display:#flex;)#de#la#caja#padre.##
##
La#orientación#se#define#con#flexDdirecOon#y#puede#ser#horizontal#o#
#
verOcal,#según#sea#fila#o#columna.#
Los#elementos#flexibles#Oenen#diferentes#formas#de#alinearse#y#
distribuirse#jusOfyDcontent#y#alignDitems.#
#
Cada#uno#de#los#elementos##
puede#ordenarse#o#los##
diferentes#modos#crecer#o##
Reducirse#para#ocupar##
el#espacio.#
#
#
#
#
Estructura#CSS#
La#nueva#propiedad#de#cajas/flexibles,#es#la#forma#más#sencilla#de#
###
controlar#el#aspecto#de#las#cajas#div.#
####
#
#
#
#
#
#
#
#
#
#
#
#
#
Recursos#CSS#
MDN/Usando#las#cajas#flexibles#CSS/
###
hGps://developer.mozilla.org/es/docs/Web/Guide/CSS/
##
#
Cajas_flexibles#
#
CSS7TRICKS#A#Complete#Guide#to#Flexbox#
hGp://cssDtricks.com/snippets/css/aDguideDtoDflexbox/#
#
#
#
#
#
#
#
#
#
#
CSS#
Fin#del#tema#
Ejercicio#
Realiza#la#estructura#de#una#página#que#contenga#todos#los#elementos#que#se#indican#en#el#siguiente#
esquema:#
###
##
####
###
#
#
#
##
##
#

EsDocs.com

© Copyright 2024