22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

Seminario

HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

MODELO DE CAJAS

Facilitadora:

María Zeballos

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

MODELO DE CAJAS

Antes de estudiar las propiedades CSS quecontrolan el aspecto de la página web, debesaber que todos los elementos HTML serepresentan por cajas rectangulares, cuyaspropiedades y representación visual se puedencontrolar con CSS, mediante la definición de laaltura, anchura, margen y relleno interior decada caja; así como también de la forma cómo sevisualizan las cajas.

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

MODELO DE CAJAS

Cada una de las cajas está formada por las siguientes partes:

Margen superior

Margen inferior

Borde superior

Borde inferior

Relleno superior

Relleno inferior

Contenido

Margen

derech

o

Bo

rde d

erecho

Rellen

o d

erecho

Mar

gen

izq

uie

rdo

Bo

rde

izq

uie

rdo

Rel

len

o

izq

.

• Margen (margin).

• Borde (border).

• Color de fondo (background-color).

• Imagen de fondo (background-image

• Relleno (padding).

• Contenido.

La ilustración puede ayudarle a comprender los componentes de una caja.

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

MODELO DE CAJAS

Cada una de las cajas está formada por las siguientes partes:

Margen superior

Margen inferior

Borde superior

Borde inferior

Relleno superior

Relleno inferior

Contenido

Margen

derech

o

Bo

rde d

erecho

Rellen

o d

erecho

Mar

gen

izq

uie

rdo

Bo

rde

izq

uie

rdo

Rel

len

o

izq

.

• Margen (margin).

Es el espacio libre entre la caja y las posibles cajasadyacentes. Es transparente, dejando visualizar elcolor o imagen de fondo que tenga definido elelemento padre.

La ilustración puede ayudarle a comprender los componentes de una caja.

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

MODELO DE CAJAS

Cada una de las cajas está formada por las siguientes partes:

Margen superior

Margen inferior

Borde superior

Borde inferior

Relleno superior

Relleno inferior

Contenido

Margen

derech

o

Bo

rde d

erecho

Rellen

o d

erecho

Mar

gen

izq

uie

rdo

Bo

rde

izq

uie

rdo

Rel

len

o

izq

.

• Borde (border.

Es la línea que encierra completamente el contenido ysu relleno; casi siempre se mantiene transparente alusuario.

La ilustración puede ayudarle a comprender los componentes de una caja.

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

MODELO DE CAJAS

Cada una de las cajas está formada por las siguientes partes:

Margen superior

Margen inferior

Borde superior

Borde inferior

Relleno superior

Relleno inferior

Contenido

Margen

derech

o

Bo

rde d

erecho

Rellen

o d

erecho

Mar

gen

izq

uie

rdo

Bo

rde

izq

uie

rdo

Rel

len

o

izq

.

• Color de fondo (background-color).

Es el color que rellena el espacio ocupado por elcontenido y su posible relleno.

La ilustración puede ayudarle a comprender los componentes de una caja.

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

MODELO DE CAJAS

Cada una de las cajas está formada por las siguientes partes:

Margen superior

Margen inferior

Borde superior

Borde inferior

Relleno superior

Relleno inferior

Contenido

Margen

derech

o

Bo

rde d

erecho

Rellen

o d

erecho

Mar

gen

izq

uie

rdo

Bo

rde

izq

uie

rdo

Rel

len

o

izq

.

• Imagen de fondo

(background-image

Es la imagen que se muestra por debajo del contenido, teniendo prioridad con respecto al color de fondo.

La ilustración puede ayudarle a comprender los componentes de una caja.

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

MODELO DE CAJAS

Cada una de las cajas está formada por las siguientes partes:

Margen superior

Margen inferior

Borde superior

Borde inferior

Relleno superior

Relleno inferior

Contenido

Margen

derech

o

Bo

rde d

erecho

Rellen

o d

erecho

Mar

gen

izq

uie

rdo

Bo

rde

izq

uie

rdo

Rel

len

o

izq

.

• Relleno (padding).

Está formado por el espacio libre entre el contenido yel borde que lo encierra. Es transparente, por lo quese ve el color o imagen de fondo que esté definido.

La ilustración puede ayudarle a comprender los componentes de una caja.

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

MODELO DE CAJAS

Cada una de las cajas está formada por las siguientes partes:

Margen superior

Margen inferior

Borde superior

Borde inferior

Relleno superior

Relleno inferior

Contenido

Margen

derech

o

Bo

rde d

erecho

Rellen

o d

erecho

Mar

gen

izq

uie

rdo

Bo

rde

izq

uie

rdo

Rel

len

o

izq

.

• Contenido. Es el contenido del elemento: una palabra de un <strong>, una frase de un <h1>, las palabras de un párrafo, una imagen, etc.

La ilustración puede ayudarle a comprender los componentes de una caja.