Capas
Las capas se pueden definir como páginas que se pueden incrustar
dentro de otras. Los atributos de una capa (posición, visibilidad, etc.),
como los de cualquier otro elemento HTML, pueden definirse dentro de una
hoja de estilo. Su contenido, en cambio, siempre deberá ser
especificado dentro de la parte principal de la página. Como se puede
ver, de nuevo estamos siguiendo la filosofía de separar el contenido
y la forma de representarlo.
En realidad, el nombre de capas no es nada oficial: es un invento de
Netscape. La denominación oficial podría traducirse como
"contenido HTML posicionable dinámicamente". Toma ya. Tampoco se las
puede considerar dentro de ningún estándar HTML sino de los
estándares CSS, pero son la base de lo que se ha dado en llamar
HTML dinámico.
Sin duda, lo más importante de las capas es la posibilidad que
presentan de ser movidas y modificadas desde un lenguaje de script.
Desgraciadamente, las implementaciones de Netscape y Explorer son
incompatibles entre sí, por lo que resulta complicado escribir
código que funcione en ambas plataformas.
Definición
La única manera común de definir capas en Explorer y
Netscape (versiones 4 y superiores cuandos las haya) es mediante hojas de
estilo en sintaxis CSS, por lo que será la que usemos de aquí
en adelante.
La definición de una capa sigue la misma estructura que la que
usabamos para decidir las características de una etiqueta con el
parámetro ID:
<STYLE TYPE="text/css">
#micapa {position:absolute; top:100px; left:20px;}
</STYLE>
Esto colocaría a la capa que hemos denominado micapa a
20 pixels de la izquierda de la página y a 100 del comienzo de la misma.
Muy bien, pero... ¿donde escribimos lo que queremos que contenga
la capa? Utilizaremos para ello la etiqueta <SPAN>:
<DIV ID="micapa">
<H1>El título de la capa</H1>
<P>Aquí es donde iría el texto.
...
</DIV>
Las capas que hemos definido hasta ahora se colocan en una posición
determinada de la página. Pero existe otro tipo de capas llamadas
flotantes cuya colocación depende, en cambio, de la posición
dentro del código fuente de la página donde las hayamos
colocado. Se definen así:
<STYLE TYPE="text/css">
#flotante {position: relative; left: 20px; top: 100px;}
</STYLE>
Puedes ver un ejemplo
que te mostrará las diferencias entre capas absolutas y relativas.
Propiedades
Existen varias propiedades de las capas que podemos modificar, como son
la posición, la visibilidad, el orden en que se ponen en pantalla,
etc... Son estos:
| Propiedad |
Descripción |
Posibles valores |
| left y top |
Sitúan la esquina superior izquierda de la capa
respecto a la esquina superior izquierda de la capa donde esté
metida. Hay que tener en cuenta que el documento completo también
se considera una capa. |
distancia en pixels, por defecto cero. |
| width y height |
Determinan la anchura y altura de la capa. |
un tamaño en pixels. |
| clip |
Nos permite definir el área que se podrá ver
dentro de la capa. Por ejemplo, clip:rect(20px 30px 40px 10px);
recortará la capa creando un cuadro visible cuya esquina superior
izquierda está a 10 pixels por la izquierda y 20 por arriba de la
de la capa y cuyo tamaño sería de 30-10 de ancho y
40-20 de alto. |
un área. |
| z-index |
Las capas con un mayor z-index se colocarán
más arriba (se dibujarán al final, encima de las otras).
Debe ser un valor positivo y único: dos capas no pueden tener el
mismo z-index. |
número positivo, por defecto las capas definidas en
el código HTML más tarde están más
arriba. |
| visibility |
Especifican si la capa debe verse o estar oculta. |
visible, hidden (oculta) o
inherit (hereda la visibilidad de la capa padre). En aquellas
capas que simplemente estén dentro de la página principal,
este valor es equivalente a visible. |
| background-image |
Gráfico de fondo de la capa. |
una dirección. |
| background-color<imagenenlinea direccion="graficos/explorer.gif" descripcion="explorer"/> y layer-background-color<imagenenlinea direccion="graficos/netscape.gif" descripcion="Netscape"/> |
Color de fondo de la capa. |
un color. |
Esto es todo.
Tutoriales
