Download - 4.Estructura (diseño con CSS)
![Page 1: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/1.jpg)
ESTRUCTURA
TEMA 4
www.laramarcos.com
![Page 2: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/2.jpg)
4.1 BOX-MODEL
1. width 2. height3. margin4. padding5. border
www.laramarcos.com
![Page 3: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/3.jpg)
Ancho del contenidoElementos de bloque Imágenes Filas de tabla y
grupos
ValoresMedidaauto (valor por
defecto) inherit
Alto del contenidoElementos de
bloque Imágenes Columnas de tabla
y grupos
ValoresMedidaauto (valor por
defecto) inherit
WIDTH HEIGHT
www.laramarcos.com
![Page 4: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/4.jpg)
Margen, respecto a las demás cajas
Relleno, dentro de la propia caja
MARGIN PADDING
Shorthand: entre 1 y 4 valores 1 = todos iguales 2 = el 1º para arriba y abajo, el 2º
para derecha e izquierda 3 = el 1º para arriba, el 2º para
abajo y el 3º para derecha e izquierda
4 = uno para cada uno (agujas del reloj)
www.laramarcos.com
![Page 5: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/5.jpg)
BORDER
shorthandMedida (grosor)Tipo: none (por defecto), hidden, solid, double,
dotted, dashed, groove, ridge, inset, outset.Color
Para los cuatro bordes (no admite {1, 4})
Si se necesita cambiar alguno en particular:border-topborder-bottomborder-rightborder-left
www.laramarcos.com
![Page 6: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/6.jpg)
TRATAMIENTO DEL BOX-MODEL
Tamaño final del elemento = width/height + padding+ border+ margin
www.laramarcos.com
![Page 7: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/7.jpg)
TRATAMIENTO DEL BOX-MODEL
Excepto:Si la página no lleva DOCTYPESi el DOCTYPE es anterior a HTML 4.0En IE
Las páginas codificadas con XHTML 1.0 Y que contienen la declaración de XML
www.laramarcos.com
![Page 8: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/8.jpg)
4.2 BACKGROUND
1. color 2. image3. position4. repeat
www.laramarcos.com
![Page 9: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/9.jpg)
BACKGROUND-COLOR
Color de fondo para toda la caja (excepto bordes)
Valores Color sólido transparent (por defecto) inherit
www.laramarcos.com
![Page 10: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/10.jpg)
BACKGROUND-IMAGE
Imagen de fondo url (“images/fondo1.png”)
Si es más pequeña que la caja:Si se repite, ocupa toda la caja (por defecto)Si no se repite, por debajo se ve el color de
fondo
Si es más grande:Se muestra la parte que cabe en dicha caja,
por defecto empezando por la esquina superior izquierda
www.laramarcos.com
![Page 11: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/11.jpg)
BACKGROUND-POSITION
Valores (se pueden combinar)Medidas
1 = deslazamiento horizontal (al vertical se le asigna el valor 50% o center)
2 = la 1ª desplazamiento horizontal, la 2ª vertical
Palabras clave: left, center, right / top, center, bottom 1 = deslazamiento al que haga referencia (el
otro toma el valor 50% o center) 2 = desplazamiento horizontal y vertical
(independientemente del orden)
www.laramarcos.com
![Page 12: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/12.jpg)
BACKGROUND-REPEAT
Valores repeat (por defecto) repeat-x repeat-yno-repeat inherit
www.laramarcos.com
![Page 13: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/13.jpg)
4.3 POSICIONAMIENTO Y VISUALIZACIÓN
1. POSICIONAMIENTOa) position
1. static (por defecto)2. relative3. absolute4. fixed
+ propiedades top, bottom, left y/o right
b) floatwww.laramarcos.com
![Page 14: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/14.jpg)
4.3 POSICIONAMIENTO Y VISUALIZACIÓN
2. VISUALIZACIÓN1. display2. visibility3. overflow4. z-index
www.laramarcos.com
![Page 15: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/15.jpg)
POSITION STATIC
Recursos:Tamaño (width y height)margin y paddingNaturaleza del elemento (de bloque o en
línea)
www.laramarcos.com
![Page 16: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/16.jpg)
POSITION RELATIVE
Se indica la posición exacta mediante: top / bottom right / left
La referencia es el punto 0,0 de la página
El resto de cajas no se inmutan, respetan su hueco
Solapamiento
www.laramarcos.com
![Page 17: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/17.jpg)
POSITION ABSOLUTE
Se indica la posición exacta mediante: top / bottom right / left
La referencia es el punto 0,0 del primer elemento contenedor
POSICIONADO
El resto de cajas se mueven, ocupan su hueco
Solapamiento www.laramarcos.com
![Page 18: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/18.jpg)
POSITION FIXED Se indica la posición exacta mediante:
top / bottom right / left
La referencia es el punto 0,0 del primer elemento contenedor
POSICIONADO
El resto de cajas se mueven, ocupan su hueco
La diferencia, al hacer scroll: la caja SIEMPRE en el mismo sitio de la ventanawww.laramarcos.com
![Page 19: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/19.jpg)
FLOAT
Se mueve lo más que pueda hacia laDerecha (right) Izquierda (left )
La referencia es la línea de su posición
El resto de cajas se mueven, ocupan su hueco
Solapamiento en cuanto a la caja, no a los contenidos
www.laramarcos.com
![Page 20: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/20.jpg)
CLEAR
Para que los contenidos dejen de fluir alrededor de las cajas posicionadas con float right / leftboth (lo más habitual)
Restaura el posicionamiento static
Suele ser necesaria para aplicar CSS a los elementos contenedores de elementos float
www.laramarcos.com
![Page 21: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/21.jpg)
CLEAR
www.laramarcos.com
![Page 22: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/22.jpg)
DISPLAY
Valores inline / block run-in list-item / table /table-row / table-column /
table-cell / table-caption, etc.none inherit
Desaparece el elemento y sus CONTENIDOS: los demás ocupan su lugar
www.laramarcos.com
![Page 23: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/23.jpg)
VISIBILITY
Valoresvisible (por defecto)hidden collapse inherit
Esconde el elemento y sus CONTENIDOS: los demás no se inmutan
www.laramarcos.com
![Page 24: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/24.jpg)
OVERFLOW
Comportamiento cuando los contenidos desbordan su caja
Valoresvisible (por defecto)hidden scrollauto inherit
www.laramarcos.com
![Page 25: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/25.jpg)
Z-INDEX
Posición en el eje z de elementos POSICIONADOS
ValoresNúmero entero (lo más habitual)
0 = la última capa El número mayor es el que se visualiza en
primer lugar
www.laramarcos.com
![Page 26: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/26.jpg)
4.4 LAYOUT
1. Estructuras habituales2. Framework: YUI3. Centrar la página
1. Horizontalmente2. Verticalmente
www.laramarcos.com
![Page 27: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/27.jpg)
ESTRUCTURAS
Global-local-contextual (standar) Índice Guía Mapa del sitio
TIPOS DE COMPOSICIÓN
Fija (px) Fluid/liquid (%) Elastic (em) Híbrida (la más habitual = px + %)
www.laramarcos.com
![Page 28: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/28.jpg)
YUI
Layout híbrido probado en los principales navegadores
Cambios necesariosDOCTYPE a XHTML 1.0<meta http-equiv=“Content-Type”>
Builder (en tools)
www.laramarcos.com
![Page 29: 4.Estructura (diseño con CSS)](https://reader033.vdocumento.com/reader033/viewer/2022061121/546d96b9af79595d298b547a/html5/thumbnails/29.jpg)
CENTRAR LA PÁGINA
HorizontalmenteAgrupar todo el contenido en un divmargin: 0 auto;
Verticalmente Agrupar todo el contenido en un divDarle width y heightposition: absolute; top: 50%; left: 50%; margin-top: - (height/2) margin-left: - (width/2)
www.laramarcos.com