3. width height Alto del contenido Elementos de bloque Imágenes Columnas de tabla y grupos Valores Medida auto (valor por defecto) inherit Ancho del contenido Elementos de bloque Imágenes Filas de tabla y grupos Valores Medida auto (valor por defecto) inherit www.laramarcos.com
6. 2 = el 1º para arriba y abajo, el 2º para derecha e izquierda
7. 3 = el 1º para arriba, el 2º para abajo y el 3º para derecha e izquierda
8. 4 = uno para cada uno (agujas del reloj)www.laramarcos.com
9. border shorthand Medida (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-top border-bottom border-right border-left www.laramarcos.com
10. Tratamiento del box-model Tamaño final del elemento = width/height + padding + border + margin www.laramarcos.com
11. Tratamiento del box-model Excepto: Si la página no lleva DOCTYPE Si el DOCTYPE es anterior a HTML 4.0 En IE Las páginas codificadas con XHTML 1.0 Y que contienen la declaración de XML www.laramarcos.com
13. Background-color Color de fondo para toda la caja (excepto bordes) Valores Color sólido transparent (por defecto) inherit www.laramarcos.com
14. 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
15. 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
19. Position static Recursos: Tamaño (width y height) margin y padding Naturaleza del elemento (de bloque o en línea) www.laramarcos.com
20. 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
21. 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
22. 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 ventana www.laramarcos.com
23. float Se mueve lo más que pueda hacia la Derecha (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
24. clear Para que los contenidos dejen de fluir alrededor de las cajas posicionadas con float right / left both (lo más habitual) Restaura el posicionamiento static Suele ser necesaria para aplicar CSS a los elementos contenedores de elementos float www.laramarcos.com
26. 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
27. visibility Valores visible (por defecto) hidden collapse inherit Esconde el elemento y sus CONTENIDOS: los demás no se inmutan www.laramarcos.com
28. overflow Comportamiento cuando los contenidos desbordan su caja Valores visible (por defecto) hidden scroll auto inherit www.laramarcos.com
29. Z-index Posición en el eje z de elementos POSICIONADOS Valores Nú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
35. yui Layout híbrido probado en los principales navegadores Cambios necesarios DOCTYPE a XHTML 1.0 <meta http-equiv=“Content-Type”> Builder (en tools) www.laramarcos.com
36. Centrar la página Horizontalmente Agrupar todo el contenido en un div margin: 0 auto; Verticalmente Agrupar todo el contenido en un div Darle width y height position: absolute; top: 50%; left: 50%; margin-top: - (height/2) margin-left: - (width/2) www.laramarcos.com