Selecciona el Idioma

domingo, 9 de junio de 2013

CSS 2




ALINEACIÓN:
Hay cuatro tipos de alineación en textos: alineación a la izquierda, a la derecha, centrada y justificada. Para ello hemos de emplear la siguiente sintaxis en el STYLE ( puede crearse con clases o de modo simple):
h1 { text-align: center } p { font-size: 20px } p { text-align: justify } blockquote { font-size: 20px } blockquote { text-align: right}
ALINEACIÓN VERTICAL DE UN TEXTO:
Se realiza normalmente mediante tablas y lo hemos de insertar dentro de las cledas (td) por ello se puede crear en clases como en en el ejemplo de a continuación:
td.t {vertical-align: top} td.b {vertical-align: bottom}
IMAGEN ENVUELTA EN TEXTO:
Para ello hemos de usar los terminos float (right | left).Las especificaciones las haremos dentro del STYLE:
p {text-align: justify} img {float: left} img {margin: 20px} p.q {float: right; width: 250px; margin: 8px; padding: 8px; border: blue solid thin} <#body>
OvidiCum subit illius tristissima noctis imago, quod mihi supremum tempus in urbe fuit, cum repeto noctem,

CAPAS:
La posición y medida de las capas <#div>, las especificamos como todo CSS en el STYLE del mismo documento o creamos otro documento anexado al propio llamado nombre.css; Los tipos que hay son tres: ABSOLUTE | RELATIVE| STATIC. Aunque en la mayoría de caos, solo usaremos dos (ABSOLUTE | RELATIVE).
• absolute: Se situa en una posición referida al angulo superior izquierdo del documento; usaremos top y left. • static:Se situa en la izquierda y a una distáncia del margen superior equivalente a la suma de las alturas de elementos que le preceden, independientemente de la posición real de estos. Es la opción por defecto. • relative:Se situa en una posición que también se ha de especificar con top y left, relativa al final del elemento DIV anterior.

div {border-collapse: collapse; padding: 0}
div.a {position: static; width: 300px; height: 180px; border: thin solid red}
div.b {position: relative; left: 80px; top: 40px; width: 200px; height: 180px;
border: thin solid green}
div.c {position: static; width: 350px; height: 150px; border: thin solid teal}
div.d {position: relative; left: 380px; top: -120px; width: 200px; height: 200px;
border: thin solid blue}
div.e {position: absolute; left: 350px; top: 200px; width: 200px; height: 150px;
border: solid thin black}

Además con el atributo visible podemos ocultar o no una capa, con la sintaxis siguiente:
• div { visibility : hidden | visible } (solo una de las dos opciones)

No hay comentarios:

Publicar un comentario