Estilos css
Páginas: 4 (980 palabras)
Publicado: 23 de marzo de 2011
Posicionamiento CSS
El posicionamiento CSS es la técnica utilizada para maquetar diseños usando únicamente XHTML y las propiedades CSS. Es el estándar hoy en día y todo sitio web bien diagramadodebería usar esta técnica. Las ventajas son muchas, pero entre ellas destaca una mejor separación entre la apariencia y la estructura de la página, un código más semántico y entendible por buscadores yun tamaño de página resultante inferior, por lo tanto mayor velocidad de carga de la página. Para todo el tutorial se va a utilizar siempre la misma estructura XHTML, que se muestra a continuación.
12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 id = div-before id = div-1 id = div-1a Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integerpretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. id = div-1b Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integersit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. id = div-1c id = div-after
POSITIONSTATIC
El posicionamiento normal de todos los elementos es static, que significa que cada elemento se posiciona donde le corresponde según el flujo normal de la página. Si no se indica nada, este esel valor que toman todos los elementos.
1 #div-1 { 2 position:static; 3}
El resultado que se muestra es el mismo que si no se hubiese aplicado ninguna regla CSS.
POSITION RELATIVE
Si seespecifica la posición relativa para un elemento, puedes posicionar este elemento usando las propiedades top, bottom, left y right, y el elemento se posicionará a la distancia indicada respecto de dondedebería estar según el flujo normal de la página.
1 #div-1 { 2 position:relative; 3 top:20px; 4 left:-40px; 5}
POSITION ABSOLUTE
Si se especifica position absolute, el elemento se muestra...
El posicionamiento CSS es la técnica utilizada para maquetar diseños usando únicamente XHTML y las propiedades CSS. Es el estándar hoy en día y todo sitio web bien diagramadodebería usar esta técnica. Las ventajas son muchas, pero entre ellas destaca una mejor separación entre la apariencia y la estructura de la página, un código más semántico y entendible por buscadores yun tamaño de página resultante inferior, por lo tanto mayor velocidad de carga de la página. Para todo el tutorial se va a utilizar siempre la misma estructura XHTML, que se muestra a continuación.
12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 id = div-before id = div-1 id = div-1a Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integerpretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. id = div-1b Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integersit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. id = div-1c id = div-after
POSITIONSTATIC
El posicionamiento normal de todos los elementos es static, que significa que cada elemento se posiciona donde le corresponde según el flujo normal de la página. Si no se indica nada, este esel valor que toman todos los elementos.
1 #div-1 { 2 position:static; 3}
El resultado que se muestra es el mismo que si no se hubiese aplicado ninguna regla CSS.
POSITION RELATIVE
Si seespecifica la posición relativa para un elemento, puedes posicionar este elemento usando las propiedades top, bottom, left y right, y el elemento se posicionará a la distancia indicada respecto de dondedebería estar según el flujo normal de la página.
1 #div-1 { 2 position:relative; 3 top:20px; 4 left:-40px; 5}
POSITION ABSOLUTE
Si se especifica position absolute, el elemento se muestra...
Leer documento completo
Regístrate para leer el documento completo.