| |
Veamos una pequeña introducción
a lo que son las capas, la etiqueta HTML <DIV>
utilizada para construirla y los atributos CSS con
los que podemos aplicar estilos.
Como ya hemos visto, <SPAN> sirve para aplicarle
estilo a una pequeña parte de una página
HTML. Por ejemplo, con ella podríamos hacer
que una parte de un párrafo se coloree en
rojo. Con <SPAN> no es habitual englobar un
trozo muy grande de texto, por ejemplo el que comprenda
a varios párrafos.
Con <DIV> también podemos aplicar
estilo a partes de la página HTML.
La diferencia entre <SPAN> y <DIV>
es que con esta última si que podemos aplicar
estilo a una parte más amplia de la página,
por ejemplo a tres párrafos. Además
que la etiqueta <DIV> tiene un uso adicional
que es el de crear divisiones en la página
a las que podremos aplicar una cantidad adicional
de atributos para modificar sus comportamientos.
Por ejemplo, con el atributo align de HTML podemos
alinear la división al centro, izquierda,
derecha o justificado. Pero su uso más
destacado es el de convertir esa división
en una capa.
Una capa es una división,
una parte de la página, que tiene
un comportamiento muy independiente dentro
de la ventana del navegador, ya que la podemos colocar
en cualquier parte de la misma y la podremos mover
por ella independientemente, por poner dos ejemplos.
En el uso de capas se basan muchos de los efectos
más comunes del DHTML.
Las etiquetas <LAYER> e <ILAYER> tienen
como objetivo construir capas, pero estas no son
compatibles más que con Netscape, por lo
que es recomendable utilizar la etiqueta <DIV>
para hacer capas preferentemente a las otras dos.
Los atributos que podemos aplicar a estas etiquetas,
pero en concreto a las dos recomendadas <SPAN>
y <DIV>, son principalmente de estilos CSS.
Estos atributos nos permiten modificar de una manera
muy exhaustiva la presentación de los contenidos
en la página. Para aplicar estilos a estas
etiquetas se utiliza el atributo de HTML style,
de esta manera:
<SPAN style="text-decoration:underline;font-weight:bold">...</SPAN>
<DIV style="color:red;font-size:10px">...</DIV>
Como ya pudimos ver en muchos ejemplos nos referimos
a él para ampliar esta información.
Pero no habíamos visto todavía una
serie de atributos que nos sirven para posicionar
la división en la página como una
capa. Estos atributos se pueden aplicar a la etiqueta
<DIV> que es la que servía para crear
capas compatibles con todos los navegadores.
Los atributos para que la división
sea una capa son varios y se pueden ver a continuación.
<div id="c1" style="position:absolute;
left: 200px; top: 100px;">
Hola!
</div>
El primero, position, indica que
se posicione de manera absoluta en la página
y los segundos, left y top,
son la distancia desde el borde izquierdo de la
página y el borde superior.
Hay otros atributos especiales para capas como
width y height para indicar
la anchura y altura de la capa, Z-index
que sirve para indicar qué capas se ven encima
de qué otras, clip que sirve
para recortar una capa y hacer que partes de ella
no sean visibles, o visibility
para definir si la capa es visible o no. Estos y
otros atributos los veremos en el siguiente capítulo,
donde hablaremos del posicionamiento de capas.
|
