Boletndeactividades2.Tema2CSS.

EjerciciosderepasodeconceptosdeCSSyCSSavanzado.
1 HTMLyCSSbsico.Usodeselectores. Escribir el cdigo HTML y CSS de una pgina web donde se modifiquen las siguientes propiedadesmedianteunahojadeestilo. Elcuerpodelapginatendruncolordefondogris. ElttulodetamaoH1ser: o Fuentesdetipo:BookAntiqua,CenturyGothicyGaramondytamao24px. o Letradecolorazuloscuroynegrita. o Espaciadoentreletras:0.5em. o Centrado. o Unmarcodecolorazulclaroenelqueslosevernlaslneassuperioreinferior. Unaclaseparalosprrafosllamadamiparrafocon: o Fuentetipo:GeorgiaoTimesNewRomanytamao15px. o Letradecolorazul. o Separacinentrelneasequivalenteal150%delaseparacinnormal. Hipervnculosnovisitados: o Fuentetipo:CourierNew,tamao16px. o Colordeletraazulynegrita. o Fondogrisoscuro. o Espaciadoentreletras:0,2em o Nosubrayado Hipervnculosconelratnencima: o Fuente:CourierNew,tamao16px. o Colordeletrablancoynegrita. o Fondoazul.

ProgramacinMultimedia.IngenieraMultimedia.UniversitatdeValncia.

Boletndeactividades2.Tema2CSS.
2 HTMLyCSSbsico:capas,fuentesdetexto,hipervnculos. Escribir el cdigo HTML Y CSS de una pgina Web con las siguientes caractersticas. La pgina contendr dos capas, una para el men situado a la izquierda y otra para el contenido de la pgina. El men situado en la parte de la izquierda estar dentro de una capaconlassiguientespropiedades: Dimensiones:ancho=100px,alto=150px. Posicinabsolutarespectoalapgina:Izquierda:20px,Arriba:50px Estilodelosvnculosdelmen: o Vnculo sin pulsar: Color del texto= verde; Tipo de letra=cursiva y negrita; color de fondo:naranja; bordes= superior e inferior de 1 px de tamao y colornaranjamsoscuroqueelfondo;nosubrayado. o Vnculo cuando el ratn est sobre l: color del texto= verde; Tipo de letra=cursiva y negrita; color de fondo= naranja oscuro; bordes = superior e inferiorde1pxdetamaoycolornaranjaoscuro;nosubrayado. Enlapartedeladerechatenemosotracapaconlassiguientespropiedades: Dimensiones:ancho=600px,alto=300px. Posicinabsolutarespectoalapgina:Izquierda:130px,Arriba:50px Aspectodelacapa:bordede1pxdecolornaranjaclaro Aspectodeltexto: o Cabecera H1: fuente= verdana; tamao= 18 px; estilo= cursiva; color = verde; bordeinferiorde2px,colornaranja,yestiloslido. o Textodeprrafonormal:fuente=verdana;tamao=14px;color=grisoscuro

ProgramacinMultimedia.IngenieraMultimedia.UniversitatdeValncia. 2

Boletndeactividades2.Tema2CSS.
3 Usodeselectoresavanzados. Utilizar los selectores CSS para crear una pgina con una plantilla con las siguientes propiedades. Lapginatienedescapas,lasuperiordondeexisteunmenylainferiorconcontenidos.El CSS modificar el color de fondo de toda la pgina y el tipo de fuente ponindolos a: #E1E5EFyfuenteverdana,arial,helvetica,sansserif; Lacapasuperiorquecontieneunmentendr: Redefinidos los vnculos para que tengan la apariencia de la imagen: sin subrayado, colornegroytamaodefuentelarge. Losvnculossituadosenposicinimpartendrncambiadoelcolordefondoyesteser blanco. Lacapainferiorquecontieneeltextotendrelfondodecolorblanco.Ademstendremos: Elaspectodelprimerprrafoserdistinto,tamaodeletramsgrandeycursiva. La primera letra de cada prrafo tendr un tamao mayor, negrita y color distinto al restodeltexto.

Todos estos cambios de aspecto deben hacer haciendo uso de los selectores por posicin de CSS.

ProgramacinMultimedia.IngenieraMultimedia.UniversitatdeValncia. 3

Boletndeactividades2.Tema2CSS.
4 Boxmodel.Dimensionesyposicin. Crea una pgina con 3 capas situadas como en la imagen. Cada una tiene 300px de ancho, diferentescoloresdefondoyunbordenegrode5px.Laseparacinentrecapasde10pxy estnalineadasunaalladodeotra.Dentrodecadacapahayuntextoquetieneunmargen deseparacindelbordedelacapa20px.

Modificarelejercicioanteriorparaquetengaesteaspecto

ProgramacinMultimedia.IngenieraMultimedia.UniversitatdeValncia. 4

Boletndeactividades2.Tema2CSS.
5 Visibilidaddecapas. Crea una pgina web que contenga dos capas, una que permanece fija y otra que aparece ydesaparececuandosesitaelratnsobrelaprimeracapaocuandosaleelratndeella. Utilizar para ello los eventos de javascript onmouseover / onmouseout sobre la primera capa.

ProgramacinMultimedia.IngenieraMultimedia.UniversitatdeValncia.