22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Seminario
HTML...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJA...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJA...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJA...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJA...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJA...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJA...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJA...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJA...
Upcoming SlideShare
Loading in …5
×

Modelo de caja

760 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
760
On SlideShare
0
From Embeds
0
Number of Embeds
294
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Modelo de caja

  1. 1. 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
  2. 2. 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 que controlan el aspecto de la página web, debe saber que todos los elementos HTML se representan por cajas rectangulares, cuyas propiedades y representación visual se pueden controlar con CSS, mediante la definición de la altura, anchura, margen y relleno interior de cada caja; así como también de la forma cómo se visualizan las cajas.
  3. 3. 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 Margenderecho Bordederecho Rellenoderecho Margenizquierdo Bordeizquierdo Rellenoizq. • 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.
  4. 4. 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 Margenderecho Bordederecho Rellenoderecho Margenizquierdo Bordeizquierdo Rellenoizq. • Margen (margin). Es el espacio libre entre la caja y las posibles cajas adyacentes. Es transparente, dejando visualizar el color o imagen de fondo que tenga definido el elemento padre. La ilustración puede ayudarle a comprender los componentes de una caja.
  5. 5. 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 Margenderecho Bordederecho Rellenoderecho Margenizquierdo Bordeizquierdo Rellenoizq. • Borde (border. Es la línea que encierra completamente el contenido y su relleno; casi siempre se mantiene transparente al usuario. La ilustración puede ayudarle a comprender los componentes de una caja.
  6. 6. 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 Margenderecho Bordederecho Rellenoderecho Margenizquierdo Bordeizquierdo Rellenoizq. • Color de fondo (background-color). Es el color que rellena el espacio ocupado por el contenido y su posible relleno. La ilustración puede ayudarle a comprender los componentes de una caja.
  7. 7. 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 Margenderecho Bordederecho Rellenoderecho Margenizquierdo Bordeizquierdo Rellenoizq. • 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.
  8. 8. 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 Margenderecho Bordederecho Rellenoderecho Margenizquierdo Bordeizquierdo Rellenoizq. • Relleno (padding). Está formado por el espacio libre entre el contenido y el borde que lo encierra. Es transparente, por lo que se ve el color o imagen de fondo que esté definido. La ilustración puede ayudarle a comprender los componentes de una caja.
  9. 9. 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 Margenderecho Bordederecho Rellenoderecho Margenizquierdo Bordeizquierdo Rellenoizq. • 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.

×