4.Estructura (diseño con CSS)
29
ESTRUCTURA TEMA 4 www.laramarcos.com
-
Upload
larasaregune -
Category
Design
-
view
1.686 -
download
6
description
Propiedades CSS relacionadas con el box model
Transcript of 4.Estructura (diseño con CSS)
ESTRUCTURA
TEMA 4
www.laramarcos.com
4.1 BOX-MODEL
1. width 2. height3. margin4. padding5. border
www.laramarcos.com
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
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
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
TRATAMIENTO DEL BOX-MODEL
Tamaño final del elemento = width/height + padding+ border+ margin
www.laramarcos.com
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
4.2 BACKGROUND
1. color 2. image3. position4. repeat
www.laramarcos.com
BACKGROUND-COLOR
Color de fondo para toda la caja (excepto bordes)
Valores Color sólido transparent (por defecto) inherit
www.laramarcos.com
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
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
BACKGROUND-REPEAT
Valores repeat (por defecto) repeat-x repeat-yno-repeat inherit
www.laramarcos.com
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
4.3 POSICIONAMIENTO Y VISUALIZACIÓN
2. VISUALIZACIÓN1. display2. visibility3. overflow4. z-index
www.laramarcos.com
POSITION STATIC
Recursos:Tamaño (width y height)margin y paddingNaturaleza del elemento (de bloque o en
línea)
www.laramarcos.com
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
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
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
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
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
CLEAR
www.laramarcos.com
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
VISIBILITY
Valoresvisible (por defecto)hidden collapse inherit
Esconde el elemento y sus CONTENIDOS: los demás no se inmutan
www.laramarcos.com
OVERFLOW
Comportamiento cuando los contenidos desbordan su caja
Valoresvisible (por defecto)hidden scrollauto inherit
www.laramarcos.com
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
4.4 LAYOUT
1. Estructuras habituales2. Framework: YUI3. Centrar la página
1. Horizontalmente2. Verticalmente
www.laramarcos.com
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
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
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
