u2 Lenguaje de Marcas Css
* The preview only display some random pages of manuals. You can download full content via the form below.
- Submitted by: Alimiz
- File size: 1.5 MB
- File type: application/pdf
- Words: 8,263
- Pages: 28
Description
Esquema de la separación de los contenidos y su presentación
Una ventaja añadida de la separación de los contenidos y su presentación es que los documentos XHTML creados son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos móviles, impresoras y dispositivos utilizados por personas discapacitadas. De esta forma, utilizando exclusivamente XHTML se crean páginas web "feas" pero correctas. Aplicando CSS, se pueden crear páginas "bonitas" a partir de las páginas XHTML correctas. Propiedades de estilo Los atributos de presentación que HTML ha adquirido en sus primeros tiempos son sustituidos por los estilos, que no pertenecen al estándar HTML. Los estilos son definidos a través de las propiedades y sus valores son definidos utilizando una sintaxis simple de CSS (hojas de estilo en cascada). Esta es la sintaxis elemental:
Los elementos de formato se definen a continuación: ▪ Regla: cada uno de los elementos del estilo que componen una hoja CSS. Cada regla 1
está compuesta de un conjunto de “selectores”, un símbolo de “llave de apertura” ({ ), para albergar la “declaración” de propiedades y por último, la “llave de cierre” (}). ▪ Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. ▪ Declaración: la declaración especifica los estilos que se aplicarán a los elementos. Está compuesta por una o más propiedades CSS. ▪ Propiedad: permite modificar el aspecto de una característica del elemento. ▪ Valor: indica el nuevo valor de la característica modificada en el elemento. Podemos definir múltiples valores para múltiples propiedades en un mismo bloque separándolas de la siguiente por el punto y coma. Un grupo de propiedades y valores puede ser aplicado a un elemento, el cual establecerá el estilo visual de dicho elemento en todo el documento. En este ejemplo definimos un conjunto de propiedades visuales para la etiqueta “p” que se aplicará a todos los párrafos referenciados. Usaremos declaraciones de propiedades que se encuentran encerradas entre llaves ("{" y "}") precedidos de la etiqueta como se muestra a continuación: p{ color: white; background-color: #9FD6DC; padding: 8px; border-color: red; border-width: 3px; border-style: solid; font-family: arial,courier; font-size: 10px; font-weight: bold; } si usamos este código en el documento HTML todos los párrafos tendrán esas propiedades (letra en color blanco, fondo en color #9FD6DC, etc). Puede ocurrir que nos interese aplicar las propiedades sólo para algunos párrafos en lugar de para todos. A continuación, vemos cómo y dónde hay que ubicar la definición de los estilos para que se apliquen a los elementos que nos interesen. Como veremos tendremos que usar el atributo "style" o hacer uso de clases. Definiciones de estilos Podemos definir las propiedades de estilo de tres formas: 1º) Dentro de una etiqueta particular del documento usando el atributo “style”. 2º) En el encabezado, dentro el bloque …. usando la etiqueta debe ubicarse en algún lugar del encabezado del documento ……. y definirá estilos para todos los elementos comunes del documento, como vemos en el siguiente ejemplo. Las clases (como vemos un poco más adelante) se usarán para un subconjunto de esos elementos comunes del documento. Ejemplo en el que definimos las propiedades de todos los párrafos y todos los enlaces del documento: 3º) Usando archivos externos Los archivos externos también pueden ser utilizados para definir propiedades de estilo y serán válidos para uno o más documentos. El archivo, usualmente lleva una extensión "css" (por ejemplo, estilo1.css) y un conjunto de propiedades definidas del mismo modo que en el bloque de un documento. Este sistema separa 3
completamente el contenido de la presentación del documento, lo que permite compartir y aplicar definiciones de estilo entre todas las páginas. Para referirse a este archivo CSS desde un documento HTML, debemos usar la etiqueta . Esto permite saber al navegador, dónde se encuentra el archivo con las definiciones de las propiedades de estilo que queremos aplicar al documento. Como vemos en el siguiente ejemplo, la etiqueta se ha de ubicar dentro del bloque …. de la cabecera, con la siguiente sintaxis básica: El mecanismo es válido para usar el mismo archivo CSS desde múltiples documentos HTML. Con lo que es posible definir atributos comunes en todo el espacio web, agilizando el trabajo de cambiar y actualizar las definiciones de estilo de cada página. Inserción de comentarios Una de las primeras cuestiones que debemos saber es que para insertar un comentario en CSS no usamos la misma nomenclatura que en HTML. Para insertar un comentario usamos /* al inicio del comentario y */ al final del mismo, pudiendo abarcar el número de líneas que sea necesario. /* Este comentario es de CSS */ /* Este comentario es de CSS y ocupa dos líneas*/ Nomenclatura Para entender las propiedades CSS y sus posibles valores que a partir de ahora analizaremos, tenemos que saber cuál es la sintaxis que usaremos. Para poder entender ese formato es necesario saber las siguientes especificaciones: - Si el valor permitido se indica como una sucesión de palabras sin ningún carácter que las separe (paréntesis, comas, barras, etc.) el valor de la propiedad se debe indicar tal y como se muestra y con esas palabras en el mismo orden. - Si el valor permitido se indica como una sucesión de valores separados por una barra vertical simple (carácter |) el valor de la propiedad debe tomar uno y sólo uno de los valores indicados. Por ejemplo, la notación:
-
Por último, en cada valor o agrupación de valores se puede indicar el tipo de valor: opcional, obligatorio, múltiple o restringido. El carácter * indica que el valor ocurre cero o más veces; el carácter + indica que el valor ocurre una o más veces; el carácter ? indica que el valor es opcional y por último, el carácter {número_1, número_2} indica que el valor ocurre al menos tantas veces como el valor indicado en número_1 y como máximo tantas veces como el valor indicado en número_2. Por ejemplo, el valor [
6.1 Selectores Cómo ya dijimos, en las reglas CSS, la declaración se utiliza para decir “qué hay que hacer” y el selector es lo que dice “a quién hay que aplicárselo”. Aunque CSS 2.1 define una docena de tipos de selectores, la mayoría de las páginas web se pueden definir utilizando solamente los cinco selectores básicos. Internet Explorer 6, uno de los navegadores más extendidos, no soporta los selectores avanzados, por lo que es muy recomendable utilizar selectores básicos.
6.1.1 Selectores básicos 1) Selector universal Permite seleccionar todos los elementos de la página. El selector universal se indica mediante un asterisco (*).No se usa habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos y cada uno de los elementos de una página. Aunque, sí que se suele combinar con otros selectores. El siguiente ejemplo elimina el margen de todos los elementos HTML: *{ margin: 0; } 2) Selector de tipo o etiqueta Permite seleccionar todos los elementos de la página cuya etiqueta coincida con el valor del selector. El siguiente ejemplo seleccionamos todos los enlaces de la página: a{ ... } Como vemos, para usar este selector, solamente es necesario indicar el nombre de la etiqueta HTML correspondiente a los elementos que se quieren seleccionar. El siguiente ejemplo aplica un estilo al titular de sección 1 de una página HTML: 5
h1 { margin: 0 0 1.5em; font-size: 1.8em; } Los selectores se pueden encadenar para aplicar una misma regla a varios elementos diferentes. Ejemplo, en el que los títulos de sección h1 y h2 comparten los mismos estilos: h1 { color: #7A6C15; font-family: Courier, Arial; } h2 { color: #7A6C15; font-family: Courier, Arial; } Esto anterior podemos simplificarlo en CSS, ya que se permite aplicar directamente los mismos estilos a varios selectores diferentes de forma simultánea, separándolos por una coma. Por lo tanto, el ejemplo anterior quedaría así: h1, h2 { color: #7A6C15; font-family: Courier, Arial; } Cuando existen muchas propiedades comunes a muchos elementos, las hojas de estilo empiezan a ser complejas por la gran cantidad de selectores y propiedades, es entonces habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos por separado. Siguiendo con el ejemplo anterior, veamos cómo quedaría si para cada sección necesitásemos tamaños diferentes: h1, h2 { color: #7A6C15; font-family: Courier, Arial; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } 3) Selector descendente Permite aplicar estilos a los elementos que se encuentran dentro de otros elementos. El siguiente ejemplo se emplea para visualizar en negrita el texto de cualquier elemento contenido dentro de un elemento párrafo
: p span { font-weight: bold; } Si el código HTML es el siguiente:
... cita ... 6
...autor1 ...
texto1
- texto2 ……..
texto1
- texto2 ……..
, no se cumple la condición del selector. En el segundo caso sí, porque el elemento se sitúa dentro de una lista, la cual a su vez se sitúa dentro de un párrafo. 4) Selector de clase El selector de clase, en CSS permite agrupar propiedades para ser aplicadas de forma selectiva a uno o más elementos específicos usando su atributo "class". Para definir una clase escribimos el elemento para el cual es declarada (párrafo, tabla, enlace, etc.), 7 Principal Pequeña Grande Principal y Mayor Ejemplos erróneos Ejemplos correctos que tenga un atributo id igual al indicado: p#inicial { padding: 0.5em; background: #f6feda; } Esta regla CSS sería redundante en el caso de un único documento, pero si esa regla forma parte de un estilo que se aplica a varias páginas sí tiene sentido al poder existir el identificador único en muchas páginas y dentro de elementos diferentes. Volvemos a recordar que no se ha de confundir este selector con los anteriores: /* Todos los elementos de tipo "p" con atributo id="inicial" */ p#inicial { ... } /* Todos los elementos con atributo id=" inicial " que estén dentro de cualquier elemento de tipo "p" */ p #inicial { ... } /* Todos los elementos "p" de la página y todos los elementos con atributo id=" inicial " de la página */ p, #inicial { ... } Notemos que es esencial un espacio en blanco o una coma para diferenciarlos. 9 variarán su color respecto del color que habrían heredado. Por otro lado, en las hojas de estilos complejas, es habitual que varias reglas CSS se solapen y apliquen a un mismo elemento HTML, pudiéndose producir colisiones como la del siguiente ejemplo: h1 { color: green; } h1 { color: red; } en estos casos, la norma que se puede seguir es la de la “especificidad” del selector: 1. Cuanto más específico sea un selector, más importancia tiene. 2. A igual especificidad, se considera el último selector indicado. El selector universal será el menos específico, el selector de etiqueta será menos específico que el de clase, etc. no lo hace, por lo que debe heredar el valor de su elemento padre. Pero el valor calculado por el Nivel 1 Nivel 2 Nivel 3 Este párrafo tiene el texto en color rosado sobre un fondo de color amarillo. Este párrafo tiene color de letra rosado y una imagen de fonfo. Ejemplo del uso de font-family Ejemplo del uso de font-style Ejemplo del uso de font-variant Ejemplo del uso de font-weight Ejemplo del uso de font-size A la izquierda Centrado A la derecha Justificado Sangría: 1 cm Sangría: 5 em Sangría: 15 px Márgenes (el margen es transparente) Uso de padding (el padding tiene color) Ancho del borde Color del borde En este ejemplo colocamos una imagen de la tierra en ambos lados de la página para que floten sobre el texto. Además todos los elementos: "body", "párrafos" e "imágenes tienen un margen de 2em. El texto que escribimos en este apartado pertenece a la imagen situada a la izquierda correspondiente al cielo azul estrellado. Este texto flotará sobre la imagen cuando redimensionemos la ventana del navegador. Las otras dos imágenes de la tierra y la galaxia permanecerán estáticas siempre en la misma posición, la primera por encima del este texto por ubicarse en una capa superior y la segunda por debajo.
seguido de un punto y del nombre de la clase (elegido por nosotros). El bloque de propiedades se encierra entre llaves como en las definiciones de los ejemplos anteriores. Vamos a definir tres clases: la primera llamada "principal" para el elemento "p", la segunda llamada "menor" para todos los elementos y la tercera llamada "mayor" para todos los elementos también. p.principal { color: green; } *.menor { font-size: 5px; } .gmayor { font-size: 15px; } El uso del asterisco como elemento indica que esta clase puede ser aplicada a cualquier tipo de elemento (es igual a no usar nada). La primera declaración no especifica que la clase debe ser automáticamente aplicada a todo elemento "p" (párrafos) en el documento, sólo a los que tengan el nombre de la clase como valor del atributo "class". El atributo "class" Siguiendo con el ejemplo anterior vamos a ver cómo aplicar las propiedades agrupadas en clases a cada elemento del documento HTML. En el ejemplo siguiente, aplicaremos las tres clases a tres párrafos respectivamente.
Este párrafo no solo tendrá un color verde (aplicado a través de la clase "iprincipal") sino que además el tamaño de la letra será de 15 pixels (aplicado a través de la clase "grande"). Los selectores de clase son los selectores más utilizados junto con los selectores de ID (que se verán a continuación). Utilizando este selector, podemos seleccionar todos los elementos de la página cuyo atributo class coincida con el selector definido. 5) Selector de ID Permite seleccionar elementos HTML en función del valor de su atributo id. Funciona exactamente igual que el selector de clase. La sintaxis utilizada es la misma, salvo que en este caso se utiliza el símbolo de la almohadilla (#) en vez del símbolo del punto (.). #error { color: red; }
6.1.2. Combinación de selectores básicos Los selectores CSS pueden combinarse para restringir el alcance de las reglas CSS. Veamos a modo de ejemplo algunas combinaciones habituales. .inicial .principal { ... } En este ejemplo el selector selecciona sólo aquellos elementos con un class=”principal” que se encuentren dentro de cualquier elemento con un class=”inicial”. Si lo modificamos y lo dejamos como sigue: p.inicial span.principal { ... } el selector solamente selecciona aquellos elementos de tipo con un atributo class=”principal” que estén dentro de cualquier elemento de tipo párrafo que tenga un atributo class=”inicial”. La combinación puede ser todo lo compleja que necesitemos: p#singular div.zona a#directo { ... } El anterior selector hace referencia al enlace con un atributo id igual a “directo” que se encuentra dentro de un elemento de tipo se mostrarán con otra tipografía diferente a la heredada. La tercera regla indica que los elementos
10
6.2
Diferentes tipos de elementos. Atributos.
En este apartado pasamos a analizar las distintas propiedades y sus atributos, que podemos usar en cada uno de los elementos de cada regla CSS. De nada sirve entender el funcionamiento de los distintos selectores si desconocemos como debemos especificar: el tamaño, color, formato, etc. de cada uno de los elementos a los que afecta el selector.
6.2.1 Medidas En primer lugar debemos analizar las distintas formas de expresar las medidas aplicadas a los elementos. Podemos distinguir medidas relativas y las absolutas. Ambas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin espacio en blanco entre el número y la unidad de medida).
Medidas relativas Son las más usadas y podemos distinguir: - em, es relativa al tamaño de letra empleado y 1 em se puede aproximar por la anchura de la letra M (“eme mayúscula”) del tipo de letra que estemos usando. - ex, es relativa a la altura de la letra x (“equis minúscula”) del tipo de letra que usemos. Y 1 ex se puede aproximar por 0.5 em. - px, es relativa a la pantalla del usuario (píxel). - porcentaje %, también podemos usar el porcentaje respecto al valor por defecto que normalmente viene determinado por el elemento padre. Por ejemplo, si en una página el tamaño de fuente para el
body { font-size: 10px; text-indent: 2.5em; } p { font-size: 14px } 11
La propiedad text-indent, tabula la primera línea de un texto. Pero como la tabulación depende del tamaño de la letra, ¿cómo se calcula?, ¿a partir del tamaño del párrafo o del body? El elemento define el valor para esta propiedad, pero el elemento párrafo
Medidas absolutas Usamos medidas absolutas para indicar valores de forma directa, que no se calculan a partir de otro valor de referencia. La lista de unidades absolutas definidas en CSS es esta: - mm, milímetros - cm, centímetros - in, (inches), pulgadas (1 pulgada = 2.54 cm) - pt, puntos (1 punto = 1 pulgada/72 = 0.35 mm) - pc, picas (1 pica = 12 puntos = 4.23 mm) Por ejemplo: body { margin:1cm; } div { font-size: 1pc; } p { font-size: 4mm; } a { word-spacing: 12pt; } En general debemos usar medidas relativas, pero su uso a veces causa un efecto no deseado. Cuando anidamos un mismo elemento, la propiedad se va aplicando de forma recursiva de forma que, por ejemplo, el texto se va viendo cada vez más grande o más pequeño en cada elemento anidado. Veámoslo aquí: span { font-size: 0.75em; }
Colores Podemos usar varios mecanismos diferentes para indicar un color: - palabras clave, la lista básica es esta con 17 valores, aunque los navegadores adminten algunas más: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. Si anteponemos el prefijo light tenemos el color más claro, por ejemplo lightblue (azul claro), etc. h1 { color: red; } 12
- RGB decimal, en el modelo RGB un color se define indicando sus tres componentes en valores del sistema decimal (0 a 255) que son R (rojo), G (verde) y B (azul), por ejemplo: h1 { color: rgb(60, 80, 100); } - RGB hexadecimal, aunque es el más complejo es el más usado y es el mismo que el RGB decimal convirtiendo los valores decimales en valores hexadecimales y formando con ellos una cadena precedida del símbolo #. Siguiendo el mismo ejemplo anterior tendríamos: h1 { color: #3C5064; } La ventaja de este método es que cuando los pares de cada color tienen los dos dígitos hexadecimales iguales podemos simplificar a la mitad el valor. Por ejemplo: #BBBBBB se podría expresar como #BBB, #FFFFFF como #FFF, #BB77AA como #B7A, etc. - RGB porcentual, también podemos expresar la cantidad de cada color en porcentaje (valores entre 0 y 100) de la siguiente forma: h1 { color: rgb(24%, 32%, 40%); }
6.2.2 El color e imágenes como fondo de los elementos Color de fondo y de primer plano Mediante hojas de estilo se puede especificar el color de fondo y el color de primer plano (el color del texto) usando la propiedad “background-color” y “color”, pero no sólo para el cuerpo, , sino para cualquier etiqueta. Veamos un ejemplo: Este título de nivel 1, tiene fondo rojo y su texto color blanco
13
Imágenes de fondo Mediante el uso de “background” también podemos colocar una imagen de fondo de un elemento. Veamos cómo hacerlo con un ejemplo: Título con una imagen de fondo
La imagen de fondo se superpone a la imagen del cuerpo del documento
Este recurso nos permite conseguir lo que en HTML hubiese sido inaccesible.
6.2.3 Tipos de fuente para el texto En CSS podemos usar estas propiedades para una fuente: • font-family: puede equipararse, con el atributo FACE de la etiqueta . • font-style: permite elegir el estilo que se aplicará a la fuente: normal, italic u oblique. Los dos últimos son estilos en cursiva (puede existir compatibilidad puntual según el navegador). 14
• font-variant: propiedad que admite dos variantes normal o small-caps, la diferencia radica en que con la segunda variante el texto aparece todo en mayúsculas pero las letras que corresponderían a minúsculas se visualizan en un tamaño menor. • font-weight: con HTML existía la negrita, con hojas de estilo hay una gama de valores o pesos que van desde 100 a 900 (saltando de 100 en 100); hay cuatro valores predefinidos: normal (400), bold (700), bolder (+100 o 900 si el peso actual es 900) y lighter (-100 o 100 si el peso actual es 100). • font-size: equivalente al atributo SIZE de la etiqueta . Usemos estas propiedades en un ejemplo:
En puntos En pixels
En unidades relativas a la fuente actual (1em)
En este ejemplo hemos usado selectores de clase aplicados a la etiqueta
Nos queda el último aspecto a tratar que es el relativo a las propiedades de capitalización y decoración: • La primera, text-transform, permite manejar el uso de mayúsculas y minúsculas independientemente del texto escrito; así, el valor capitalize convierte a mayúscula la 19
primera letra de cada palabra, uppercase escribe todas las letras en mayúsculas, lowercase en minúsculas y none no causa ningún efecto. • La segunda propiedad, text-decoration, admite los siguientes valores: underline (subrayado), overline (“superrayado”), line-through (tachado) y blink (parpadeo). El ejemplo que vemos a continuación hace uso de estas propiedades.
capitalize
uppercase
lowercase
underline
overline
line-through
20
6.2.4 Box model (modelo de caja) El lenguaje CSS se caracteriza por el uso del modelo de caja o box model que probablemente es la característica más importante del leguaje. Según esto, todos los elementos: cuerpo, párrafos, imágenes, etc. son considerados como cajas con los siguientes elementos:
▪ Contenido (content): código HTML del elemento (el texto de un párrafo, una imagen, el texto de una lista de elementos, etc.) ▪ Relleno (padding): espacio perimetral libre entre el contenido y el borde que lo encierra. ▪ Borde (border): franja que delimita y encierra el contenido junto con su relleno. ▪ Imagen de fondo (background image): imagen que aparece por debajo del contenido. Si se define un color de fondo y una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. ▪ Color de fondo (background color): color que rellena el espacio ocupado por el contenido y su posible relleno. Si se define un color y una imagen de fondo, el color tiene menos prioridad y por tanto se visualiza la imagen. ▪ Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes. Como el relleno y el margen son transparentes, el espacio ocupado por el relleno y el margen tienen el color o imagen de fondo de su elemento padre. En su defecto, aparecerá el color o imagen de fondo de la propia página si están definidos. Los márgenes Se comienza estudiando los márgenes porque son muy sencillos, al ser transparentes solo pueden indicarse sus dimensiones; para controlar los márgenes se dispone de las siguientes propiedades: margin-top, margin-right, margin-bottom y margin-left: controlan el margen superior, derecho, inferior e izquierdo, respectivamente; toman como valor una distancia en cualquiera de las unidades que ya conocemos. 21
margin: puede recibir de 1 a 4 valores; si recibe sólo uno se aplica el mismo margen en todos los lados de la caja; si recibe dos valores el primero se aplica a los lados superior e inferior y el segundo a los lados izquierdo y derecho; no es aconsejable especificar tres valores puesto que la forma de asignarlos no es excesivamente lógica y, por tanto, es difícil de recordar; si recibe cuatro valores se asignan en el orden de aplicación siguiente: superior, derecha, inferior e izquierda. El padding Se comporta de forma totalmente análoga a las propiedades para márgenes; teniendo las siguientes propiedades relativas a distancias: padding-top, padding-right, padding-bottom, padding-left y padding. Los bordes Los bordes de las cajas son los que más propiedades tienen, se puede controlar la anchura, –width, el color, –color y el estilo, –style, de forma análoga a como se controlan las dimensiones de márgenes y padding. Así, propiedades de la forma border-top? (donde ? puede ser –width, –color o -style) controlarán una característica dada para el borde superior; lo mismo es aplicable al resto de bordes (border-right?, border-bottom? y border-left?) y al conjunto de todos los bordes (border?). La anchura puede tomar como valor una dimensión o un valor predefinido de los tres siguientes: thin (fino), medium (medio) y thick (grueso); el color se especifica como se viene haciendo hasta ahora en todas las propiedades relativas al color y el estilo puede tomar uno de los siguientes valores: none (invisible), hidden (también invisible), dotted (punteado), dashed (rayado), solid (trazo continuo), double (doble trazo continuo), groove (grabado), ridge (resaltado), inset (caja hundida) y outset (caja elevada). El siguiente ejemplo muestra las propiedades anteriores:
22
margen 0px margen 10px margen 20px Borde thin Borde medium Borde thick Borde rojo Borde verde Borde azul
23
6.2.2 Posicionamiento Con las propiedades anteriores podemos controlar gran cantidad de los aspectos de las cajas pero ahora vamos a ver cómo colocarlas dentro del documento. El posicionamiento de las cajas puede ser flotante (float), absoluto (absolute) o relativo (relative), este último no lo vemos, puesto que es muy similar al absoluto, se recomienda a quien quiera profundizar en el tema que consulte las referencias si lo cree necesario.
Posicionamiento flotante El posicionamiento flotante se comporta de forma similar a como HTML coloca los elementos en la página, un objeto flotante es colocado por el navegador y el texto (u otros objetos) fluyen a su alrededor; pueden especificarse aspectos tales como los márgenes pero la visualización siempre depende en última instancia de la configuración de la plataforma donde se vaya a ver el documento. La propiedad float admite tres valores: left (flota a la izquierda del documento), right (flota a la derecha del documento), none (no flota, está incrustado dentro del flujo del documento). Veamos un ejemplo que muestra la forma en que se comportan las cajas flotantes. En este caso las cajas contienen imágenes, pero podría tratarse de cualquier oro elemento HTML. 
ASTRONOMIA
24
Posicionamiento absoluto El posicionamiento absoluto lo usamos empleando, en primer lugar, la propiedad position con el valor absolute; en segundo lugar hay que colocar la caja mediante las propiedades top (distancia respecto al borde superior del documento), bottom (respecto al borde inferior), left (respecto al borde izquierdo) y right (respecto al borde derecho). Tenemos que saber, que al usar el posicionamiento absoluto, la caja estará siempre colocada la posición establecida, independientemente del flujo del resto de elementos. Veamos un ejemplo con dos cajas: una con posicionamiento absoluto (de nuevo se tratará de una imagen que además tendrá un marco) y otra segunda caja con posicionamiento flotante. 
soy todo corazon y eso me hace mal ... [TEXTO ELIMINADO] no renuncies por favor al amor equivocado no te olvides tan pronto de mi - estribillo
Vemos como la imagen con marco, la que posee posicionamiento absoluto, permanece inmóvil respecto al documento (a 150 pixels del borde superior y 150 pixels del izquierdo), mientras que la otra imagen y el texto, “fluyen”, además la imagen con posicionamiento absoluto está superpuesta por encima del resto del documento.
25
6.2.3 Uso de capas Hemos visto como los elementos de un documento HTML pueden, mediante el uso de CSS, montarse unos por encima de otros; esto es lo que se suele denominar manejo de capas, cada elemento puede estar en una capa distinta y las capas flotan unas sobre otras. Para controlar la “profundidad” de cada capa se tiene una nueva propiedad que se denomina z-index; cuanto mayor sea este valor, más próxima al usuario estará la capa (por encima del resto), y cuanto menor, más alejada (por debajo); el valor más pequeño posible es 0. Aunque cualquier elemento de HTML puede emplearse como capa, lo más habitual es utilizar la etiqueta 
Existen otros conceptos que debemos podemos manejar: se trata de las propiedades de overflow, clip, visibility, etc. Estas propiedades son muy simples y están relacionadas con las dimensiones de las cajas, pero pueden existir incompatibilidades en uso según el navegador que usemos. Propiedad overflow Hasta ahora, las cajas (o capas) simplemente se han colocado en el documento sin preocuparnos por sus dimensiones de tal forma que se expandían lo necesario para admitir su contenido; sin embargo, es posible definir para cada capa unas dimensiones mediante los atributos width y height. La cuestión es la siguiente: Si colocamos una capa sin controlar su tamaño puede ocurrir que rebose, se quede pequeña, se visualice toda o sólo parte de ella, etc. Eso es lo que controla la propiedad overflow; ésta admite los valores visible (se visualiza), hidden (no se visualiza sino que se recorta), scroll (se establece, si es posible, un mecanismo de scroll para poder ver todo el contenido en la caja) y auto (en caso de desbordamiento generaría barras de desplazamiento). Este sería un ejemplo del uso de la propiedad:
Propiedad clip Permite indicar qué porción de una caja se visualiza, es decir puede recortarse de tal forma que sólo se muestre el contenido que se encuentra dentro de dicha zona. Admite dos valores: auto (el área visible coincide con todo el área de la caja) o una forma que, en la versión actual, sólo puede ser un rectángulo indicado de la forma: rect (alto, derecha, bajo, izquierda) donde cada uno de esos valores indica un desplazamiento desde el correspondiente lado de la caja. Propiedad visibility Hay aún otra propiedad relacionada con la visualización, se denomina visibility y permite indicar si una capa es visible o no; admite los valores visible (la capa se visualiza) y hidden (la capa permanece oculta).
28