Bloque III: Diseo de pginas Web con XHTML y CSS 3.

7 Modelo de cajas
1r SMX Aplicaciones Ofimticas IES Pere Maria Orts i Bosch

Crear una nueva pgina: lounge.html

Crea una nueva pgina web dentro de la carpeta de BAR (B3.14) llamado lounge.html, con imgenes nuevas A esta pgina le haremos una serie de cambios para probar todo lo explicado en este tema, dando estilos segn el modelo de cajas

Prctica B3.18: Modifica estilos

Partimos de la carpeta B3.14 (Pgina de BAR) Vamos a aadirle nuevos estilos a lounge.html Aadiremos reglas a una hoja de estilo nueva: El tamao de fuente base: small El tipo de fuente por prioridad: Verdana, Helvetica o Arial, o en su defecto la genrica Para h1 y h2: color #007e7e El tamao de h1 ser un 150% del tamao base Y el tamao de h2 ser un 130%
4

Prctica B3.18: Resultados

Ms estilos: propiedad line-height

Probamos con la propiedad line-height:

Esto permite mayor legilibilidad del texto, y adems, permite contrastar diferentes partes de la pgina.
6

Ms estilos: propiedad line-height

Ms estilos: propiedad line-height

Probamos diferentes valores en line-height: 200% 0.5em 20px Cul es el mejor? Cul es el peor? Cul es el ms legible? Despus, volveremos a cambiar a 1.6em

Modelo de cajas
Hasta ahora, hemos dado estilo a los elementos A partir de ahora, ajustaremos los elementos en la pgina Veremos el modelo de cajas (Box Model) CSS trata a cada elemento como una caja (BOX) Una caja tiene los siguientes elementos: rea de contenido padding (relleno) margin (margen) border (borde)
9

Modelo de cajas

10

Modelo de cajas
Todos los elementos son tratados como cajas: Prrafos Encabezados Blockquotes Listas Elementos de listas incluso los elementos inline: <em> enlaces
11

Modelo de cajas
Los elementos de las cajas:
rea de contenido padding (relleno) margin (margen) border (borde)

12

rea de contenido
Cada elemento comienza con algn contenido: Imagen o texto en una caja que lo contiene Por defecto, no existe espacio entre el contenido y el lmite de la caja:

13

Padding (relleno)
Cualquier caja puede tener una capa de relleno alrededor del rea de contenido Se utiliza para crear un espacio visual entre el contenido y el borde de la caja Es opcional Es transparente y no tiene color ni ningn tipo de decoracin

14

Border (borde)
Ofrece una separacin visual entre el contenido y otros elementos de la pgina Rodea el padding Es opcional, tiene un ancho, color y estilo

15

Margin (margen)
Es opcional y rodea al borde. Transparente sin color ni estilo. Nos permite aadir espacio entre el elemento y otros Si dos cajas estn juntas, los mrgenes actan de espacio

16

17

18

19

No hay preguntas tontas (18)

Todo esto me ayudar a realizar pginas web mejores? Cul es la diferencia entre el padding y el margen? Ya que son todos opcionales, es necesario ponerlos, el borde, el margen y el padding? Es fcil saber cmo realizar los cambios para obtener los resultados deseados? Cmo puedo dar estilos con los elementos padding y margin? :El tamao del rea de contenido est determinado nicamente por la medida del contenido que hay dentro?

20

Volvemos al BAR

21

Actividad P3.7: Identifica elementos

Identifica el margin, padding, border y dibjalos.

22

Creando un prrafo con estilo

Vamos a crear un prrafo con estilo definiendo una clase llamada garantia Aadiremos un borde de color Daremos algunos estilos ms

23

Primer paso: lounge.html

Crearemos una clase llamada garantia para ese prrafo:

24

Segundo paso: lounge.css

Definiremos una regla CSS para esa clase, dndole estilo:

25

Tercer paso: cargar la pgina

Lo analizamos un poco en detalle:

26

Modelo de cajas
Lo convertimos en modelo de cajas:

27

Posibles cambios

28

Aadiendo estilos: padding

La propiedad padding permite aadir relleno en todos los lados (top, right, bottom, left) Podemos usar: Porcentaje Pxeles (px) Aadiremos 25 pxeles

29

Aadiendo estilos: padding

Probamos cmo queda:

30

Aadiendo estilos: margin

La propiedad margin permite aadir un margen en todos los lados (top, right, bottom, left) Podemos usar: Porcentaje Pxeles (px) Aadiremos 30 pxeles

31

Aadiendo estilos: margin

Probamos cmo queda:

32

Actividad B3.18: Modifica estilos en el prrafo

Aadiremos las siguientes reglas:

El tamao entre lneas: 1.9em Estilo de fuente: italic Color de fuente: #444444 Tipo de fuente: Georgia, Times New Roman, Times, (familia genrica)

33

Aadiendo una imagen de fondo

Aadiremos una imagen de fondo, que se encuentra en la carpeta images: background.gif fondo.gif

34

Aadiendo una imagen de fondo

Cmo lo haremos? Con el elemento <img>? Con la propiedad background. CSS: propiedad background-image

35

<img> y background-image
Background-image: Para aadir atractivo <img> Para mostrar una imagen

36

Background-image ms a fondo
Coloca una imagen en el fondo del elemento:

Otras dos propiedades le afectan: Background-position Background-repeat

37

Fijando la imagen de fondo

Por defecto, las imgenes de fondo, se repiten Por suerte, lo podemos modificar Por defecto, se coloca arriba a la izquierda (top left)

38

Nuevas propiedades
Background-position Puede especificarse como: Porcentaje Pxeles Palabras reservadas (top,bottom, left, right, center) Background-repeat

39

Observamos resultados

Lo haremos modificando el padding y dndole ms espacio a la izquierda.

40

Ms padding a la izquierda
Para los padding, margins y borders, tenemos una propiedad para cada lado (top, right, bottom, left)

41

Lo probamos
El resultado es mucho mejor:

42

Incrementar el margen derecho

Siempre detrs de la propiedad general:

43

Lo probamos
Queda un estilo mejorado:

44

45

Ms propiedades del borde

46

Ms propiedades del borde

47

Ms propiedades del borde

48

Acabamos el estilo con el borde

49

El atributo id

50

Cmo usamos id en los CSS?

Hay diferentes formas de usar una clase. En este caso se llama especial: Podemos seleccionar slo ciertos elementos de la clase

51

Cmo usamos id en los CSS?

Cuando es un id:

52

Mezclando estilos

53

Mezclando estilos

54

Otros dispositivos

55

Puntos importantes (VII)

CSS utiliza un modelo de cajas para controlar cmo sern visualizados los elementos. Las cajas constan del rea de contenido y los elementos opcionales padding, border y margin. El padding se usa para crear un espacio visual alrededor del rea de contenido. El borde rodea el padding y el contenido y proporciona una manera de separar visualmente el contenido. El margen rodea al borde, al padding y al contenido y permite aadir espacio entre el elemento y otros elementos. Padding, border y margin son todos opcionales. Un elemento de fondo (imagen o color) se mostrar debajo del contenido y el padding pero no debajo del margen.
56

Puntos importantes (VII)

La cantidad de padding y margen puede ser indicada en pxeles o porcentajes. El borde puede ser asignado en pxeles on con palabras reservadas (thin, mdium, thick). Existen 8 estilos diferentes de borde incluyendo solid, dashed, dotted y ridge. Cuando establecemos mrgenes, padding y bordes, CSS proporciona propiedades para asignar valor a todos los lados (top, left, bottom, right) todos a la vez, y tambin permite uno a uno. Usamos la propiedad line-height para aadir espacio entre las lneas del texto. Podemos colocar una imagen en el fondo de un elemento, con la propiedad background-image.
57

Puntos importantes (VII)

Usamos las propiedades background-position y backgroundrepeat para establecer la posicin de la imagen de fondo. Usamos el atributo class para dar estilos a elementos a los que queremos dar estilo juntos, como un grupo. Usamos el atributo id para dar a un elemento un nico nombre. Tambin podemos usarlo para dar un nico estilo a un elemento. Podemos usar ms de una hoja de estilo para nuestro XHTML. Si dos hojas de estilo tienen en conflicto algn estilo, la hoja de estilo que est la ltima ser la que tenga preferencia.

58