MODELO DE CAJAS. Modelo de Cajas ● Todo elemento incluido en una página, es (desde el punto de vista de CSS) una caja. ● Una caja es una sección rectangulares.

Presentación del tema: "MODELO DE CAJAS. Modelo de Cajas ● Todo elemento incluido en una página, es (desde el punto de vista de CSS) una caja. ● Una caja es una sección rectangulares."— Transcripción de la presentación:

1 MODELO DE CAJAS

2 Modelo de Cajas ● Todo elemento incluido en una página, es (desde el punto de vista de CSS) una caja. ● Una caja es una sección rectangulares de parámetros ajustrables. ● CSS permite controlar el aspecto de todas las cajas. ● Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta o elemento en la página.

3

4 Modelo de caja de CSS ● Partes de una caja (de dentro hacia afuera): Contenido – Padding (relleno) – Borde – Imagen de fondo – Color de fondo – Margen

5 Modelo de caja de CSS ● Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.) ● Relleno (padding): espacio libre opcional entre el contenido y el borde que lo encierra. ● Borde (border): línea que encierra completamente el contenido y su relleno. ● Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno. ● Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno. ● Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.

6 Transparencia ● El relleno y el margen son transparentes ● En el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos). ● En el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). ● Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos). ● Si una caja define tanto un color como una imagen de fondo: ● La imagen tiene más prioridad y es la que se visualiza. ● Si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo.

7 Anchura y altura Auto: el navegador asigna las dimensiones. Inherit: hereda las dimensiones del elemento padre.

8 Anchura y altura #lateral { width: 200px; }... #cabecera { height: 60px; }...

9 Margen Medidas utilizadas: 1. px (píxeles) 2. em (tamaño igual al de la letra utilizada). 3. %

10 Margen.destacado { margin-left: 2em; } (...) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit. Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum, laoreet non, tincidunt a, viverra sed, tortor. Vestibulum lectus diam, luctus vel, venenatis ultrices, cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio non nisl tincidunt faucibus. Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros egestas massa vehicula nonummy. Morbi posuere, nibh ultricies consectetuer tincidunt, risus turpis laoreet elit, ut tincidunt risus sem et nunc. CSS significa abstraerse del aspecto y centrarse en el contenido. Utilizar blockquote es siempre peor que utilizar “margin-left”.

11 INCISO: Elementos de bloque y de línea ● Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Ej. h1, p, table. ● Los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos. Ej. a, b, img. ● Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var. ● Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

12 Margen ● Los márgenes verticales (margin-top y margin- bottom) sólo se pueden aplicar a los elementos de bloque y las imágenes ● Los márgenes laterales (margin-left y margin- right) se pueden aplicar a cualquier elemento

13 Margen Empleando esta imagen, copia el siguiente código fuente: CSS Margen div img { margin-top:.5em; margin-bottom:.5em; margin-left: 1em; margin-right:.5em; } Imágenes sin borde. Imágenes con borde.

14 Margen La propiedad que permite definir de forma simultanea los cuatro márgenes se denomina margin. ▪ Si solo se indica un valor, todos los márgenes tienen ese valor. ▪ Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los márgenes izquierdo y derecho. ▪ Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna los márgenes izquierdo y derecho. ▪ Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo.

15 Margen div img { margin-top:.5em; margin-bottom:.5em; margin-left: 1em; margin-right:.5em; } div img { margin:.5em.5em.5m 1em; } div img { margin:.5em; margin-left: 1em; } ● Definiciones equivalentes.

16 Margen ● Cuando se juntan dos o más márgenes verticales, se fusionan de forma automática y la altura del nuevo margen será igual a la altura del margen más alto de los que se han fusionado.

17 Evitar fusión en el margen ● En el caso de un elemento que se encuentra en el interior de otro y sus márgenes se fusionan de forma automática, se puede evitar este comportamiento añadiendo un pequeño relleno (padding: 1px) o un borde (border: 1px solid transparent) al elemento contenedor.

18 Relleno

19 Relleno vs Margen CSS Margen.margen { margin-top: 2em; margin-right: 2em; margin-bottom: 2em; margin-left: 2em; }.relleno { padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi. ¿Es lo mismo?

20 Relleno vs Margen. Prueba con esto CSS Margen.margen { margin-top: 2em; margin-right: 2em; margin-bottom: 2em; margin-left: 2em; background-color: #bbb }.relleno { padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em; background-color: #bbb } Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi.

21 Relleno (atajo o shorthand) La propiedad padding permite utilizar una sola propiedad para definir todos los bordes. Su notación es similar a la de margin. body {padding: 2em} /* Todos los rellenos valen 2em */ body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y derecho = 2em */ body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 2em */ body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho = 2em, inferior =3em, izquierdo = 4em */

22 Bordes: ancho WIDT H COLOR STYLE

23 Bordes ● ¿Cómo lo definimos? border: ● Ejemplos: border: 1px solid red; border: thick dashed yellow; border-top: 10px dotted #aabbcc; border-bottom: thin double grey;

24 Bordes ● Prueba todas las combinaciones que se te ocurran de bordes. Parte de este código fuente: (…) div#thicksolid { border: thick solid red; } (…) Ancho thick y estilo sólido

25 Sobre el modelo de cajas

26 Fondo url("imagenes/fondo.png")

27 Fondo (atajo o shorthand)