4.Estructura (diseño con CSS)

1,256 views
1,172 views

Published on

Propiedades CSS relacionadas con el box model

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,256
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

4.Estructura (diseño con CSS)

  1. 1. estructura<br />TEMA 4<br />www.laramarcos.com<br />
  2. 2. 4.1 box-model<br />width<br />height<br />margin<br />padding<br />border<br />www.laramarcos.com<br />
  3. 3. width<br />height<br />Alto del contenido<br />Elementos de bloque<br />Imágenes <br />Columnas de tabla y grupos<br />Valores<br />Medida<br />auto (valor por defecto)<br />inherit<br />Ancho del contenido<br />Elementos de bloque<br />Imágenes <br />Filas de tabla y grupos<br />Valores<br />Medida<br />auto (valor por defecto)<br />inherit<br />www.laramarcos.com<br />
  4. 4. margin<br />padding<br />Relleno, dentro de la propia caja <br />Margen, respecto a las demás cajas<br /><ul><li>Shorthand: entre 1 y 4 valores
  5. 5. 1 = todos iguales
  6. 6. 2 = el 1º para arriba y abajo, el 2º para derecha e izquierda
  7. 7. 3 = el 1º para arriba, el 2º para abajo y el 3º para derecha e izquierda
  8. 8. 4 = uno para cada uno (agujas del reloj)</li></ul>www.laramarcos.com<br />
  9. 9. border<br />shorthand<br />Medida (grosor)<br />Tipo: none (por defecto), hidden, solid, double, dotted, dashed, groove, ridge, inset, outset.<br />Color<br />Para los cuatro bordes (no admite {1, 4})<br />Si se necesita cambiar alguno en particular:<br />border-top<br />border-bottom<br />border-right<br />border-left<br />www.laramarcos.com<br />
  10. 10. Tratamiento del box-model<br />Tamaño final del elemento = <br />width/height<br />+ padding<br />+ border<br />+ margin<br />www.laramarcos.com<br />
  11. 11. Tratamiento del box-model<br />Excepto:<br />Si la página no lleva DOCTYPE<br />Si el DOCTYPE es anterior a HTML 4.0<br />En IE<br />Las páginas codificadas con XHTML 1.0<br />Y que contienen la declaración de XML<br />www.laramarcos.com<br />
  12. 12. 4.2 background<br />color <br />image<br />position<br />repeat<br />www.laramarcos.com<br />
  13. 13. Background-color<br />Color de fondo para toda la caja (excepto bordes)<br />Valores <br />Color sólido<br />transparent (por defecto)<br />inherit<br />www.laramarcos.com<br />
  14. 14. Background-image<br />Imagen de fondo<br />url (“images/fondo1.png”)<br />Si es más pequeña que la caja:<br />Si se repite, ocupa toda la caja (por defecto)<br />Si no se repite, por debajo se ve el color de fondo<br />Si es más grande:<br />Se muestra la parte que cabe en dicha caja, por defecto empezando por la esquina superior izquierda<br />www.laramarcos.com<br />
  15. 15. Background-position<br />Valores (se pueden combinar)<br />Medidas<br />1 = deslazamiento horizontal (al vertical se le asigna el valor 50% o center)<br />2 = la 1ª desplazamiento horizontal, la 2ª vertical<br />Palabras clave: left, center, right / top, center, bottom<br />1 = deslazamiento al que haga referencia (el otro toma el valor 50% o center)<br />2 = desplazamiento horizontal y vertical (independientemente del orden)<br />www.laramarcos.com<br />
  16. 16. Background-repeat<br />Valores<br />repeat (por defecto)<br />repeat-x<br />repeat-y<br />no-repeat<br />inherit<br />www.laramarcos.com<br />
  17. 17. 4.3 posicionamiento y visualización<br />POSICIONAMIENTO<br />position<br />static (por defecto)<br />relative<br />absolute<br />fixed<br /> + propiedades top, bottom, left y/o right<br />float<br />www.laramarcos.com<br />
  18. 18. 4.3 posicionamiento y visualización<br />VISUALIZACIÓN<br />display<br />visibility<br />overflow<br />z-index<br />www.laramarcos.com<br />
  19. 19. Position static<br />Recursos:<br />Tamaño (width y height)<br />margin y padding<br />Naturaleza del elemento (de bloque o en línea)<br />www.laramarcos.com<br />
  20. 20. Position relative<br />Se indica la posición exacta mediante:<br />top / bottom<br />right / left<br />La referencia es el punto 0,0 de la página<br />El resto de cajas no se inmutan, respetan su hueco<br />Solapamiento <br />www.laramarcos.com<br />
  21. 21. Position absolute<br />Se indica la posición exacta mediante:<br />top / bottom<br />right / left<br />La referencia es el punto 0,0 del primer elemento contenedor POSICIONADO<br />El resto de cajas se mueven, ocupan su hueco<br />Solapamiento <br />www.laramarcos.com<br />
  22. 22. Position fixed<br />Se indica la posición exacta mediante:<br />top / bottom<br />right / left<br />La referencia es el punto 0,0 del primer elemento contenedor POSICIONADO<br />El resto de cajas se mueven, ocupan su hueco<br />La diferencia, al hacer scroll: la caja SIEMPRE en el mismo sitio de la ventana<br />www.laramarcos.com<br />
  23. 23. float<br />Se mueve lo más que pueda hacia la<br />Derecha (right)<br />Izquierda (left )<br />La referencia es la línea de su posición<br />El resto de cajas se mueven, ocupan su hueco<br />Solapamiento en cuanto a la caja, no a los contenidos<br />www.laramarcos.com<br />
  24. 24. clear<br />Para que los contenidos dejen de fluir alrededor de las cajas posicionadas con float<br />right / left<br />both (lo más habitual)<br />Restaura el posicionamiento static<br />Suele ser necesaria para aplicar CSS a los elementos contenedores de elementos float<br />www.laramarcos.com<br />
  25. 25. clear<br />www.laramarcos.com<br />
  26. 26. DISPLAY<br />Valores<br />inline / block<br />run-in<br />list-item / table /table-row / table-column / table-cell / table-caption, etc.<br />none<br />inherit<br />Desaparece el elemento y sus CONTENIDOS: los demás ocupan su lugar<br />www.laramarcos.com<br />
  27. 27. visibility<br />Valores<br />visible (por defecto)<br />hidden<br />collapse<br />inherit<br />Esconde el elemento y sus CONTENIDOS: los demás no se inmutan<br />www.laramarcos.com<br />
  28. 28. overflow<br />Comportamiento cuando los contenidos desbordan su caja<br />Valores<br />visible (por defecto)<br />hidden<br />scroll<br />auto<br />inherit<br />www.laramarcos.com<br />
  29. 29. Z-index<br />Posición en el eje z de elementos POSICIONADOS<br />Valores<br />Número entero (lo más habitual)<br />0 = la última capa<br />El número mayor es el que se visualiza en primer lugar<br />www.laramarcos.com<br />
  30. 30. 4.4 layout<br />Estructuras habituales<br />Framework: YUI<br />Centrar la página<br />Horizontalmente<br />Verticalmente <br />www.laramarcos.com<br />
  31. 31. estructuras<br />Global-local-contextual (standar)<br />Índice<br />Guía<br />Mapa del sitio<br />Tipos de composición<br /><ul><li>Fija (px)
  32. 32. Fluid/liquid (%)
  33. 33. Elastic (em)
  34. 34. Híbrida (la más habitual = px + %)</li></ul>www.laramarcos.com<br />
  35. 35. yui<br />Layout híbrido probado en los principales navegadores<br />Cambios necesarios<br />DOCTYPE a XHTML 1.0<br />&lt;meta http-equiv=“Content-Type”&gt;<br />Builder (en tools)<br />www.laramarcos.com<br />
  36. 36. Centrar la página<br />Horizontalmente<br />Agrupar todo el contenido en un div<br />margin: 0 auto; <br />Verticalmente <br />Agrupar todo el contenido en un div<br />Darle width y height<br />position: absolute; <br />top: 50%; left: 50%; <br />margin-top: - (height/2) <br />margin-left: - (width/2)<br />www.laramarcos.com<br />

×