Bienvenida a el diplomado

HT ML5 Y CS S 3 Aplicaciones y optimización par a web

INT RODUCCIÓN •

El lenguaje HT ML es tá limitado a la hor a de aplicar le forma a un documento. E s to es as í porque fué concebido par a otros us os (científicos s obretodo), dis tinto a los actuales , mucho más amplios .

•

Par a s olucionar es tos problemas los dis eñadores han utiliz ado técnicas tales como la utilización de tablas imagenes tr ans parentes par a ajus tar las , utilizaci ón de etiquetas que no s on es tádares del HT ML y otr as . Es tas " tr ampas " han caus ado a menudo problemas en las páginas a la hor a de s u vis ualiz ación en dis tintas plataformas .

Dis eños antiguos

Dis eños Nuevos

Ejemplo 1

Ejemplo2

S intax is CS S •

Par a definir un es tilo s e utilizan atr ibutos como font­ s ize,tex t­decor ation... s eguidos de dos puntos y el valor que le des eemos as ignar. Podemos definir un es tilo a bas e de definir muchos atr ibutos s epar ados por punto y coma

Ejemplo: font­s ize: 10pt; tex t­decor ation: under line; color: black

Como es cr ibir un S tyle •

Par a definir el es tilo de una etiqueta s e es cr ibe la etiqueta s eguida de la lis ta de atr ibutos encer r ados entre llaves .

Ejemplo: H1{ tex t­align: center ; color:black}

Ejemplos body {

margin:0;

padding:0;

tex t­align:center ;

font­family:Verdana, Geneva, s ans ­s er if;

background­image:ur l(../images /bg_main.jpg);

background­repeat:repeat­x ;

}

div# wr apper {

width:960px ;

margin:0 auto;

tex t­align:left;

}

div# header{

margin:0;

padding:0;

}

div# header div# gener al{

height:25px ;

margin:0;

padding:10px 0;

}

Lis tado de propiedades

http://www.bloober r y.com/index dot/cs s /propindex /all .htm

Pr imeros acercamientos

Para ver esta pel’cula, debe disponer de QuickTimeª y de un descompresor .

Ejercicios •

Realice los s iguientes figur as con 3 imágenes de s u car peta de imágenes y cs s

Proyecto per s onal