Capa <div> ...
Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.
Podemos insertar una capa a través de las etiquetas <div> y </div>, que como ya vimos, sirven para agrupar bloques de texto.
A través del atributo id se le da un nombre a la capa, y a través del atributo style se establecen el resto de propiedades de la capa.
A través de las propiedades left (izquierda) y top (superior) se establece la posición de la capa respecto a los márgenes izquierdo y superior de la página. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
Para que la capa aparezca en la posición establecida, es necesario incluir también la propiedad position con el valor absolute. Si no se estableciera este valor, la capa se mostraría pegada al margen izquierdo, en la posición en la que hubiera sido insertada dentro del código.
A través de las propiedades width (anchura) y height (altura) se establece el tamaño de la capa. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
A través de la propiedad z-index puede establecerse el índice de la capa dentro de la página. Una capa podrá ser solapada por aquellas capas cuyo índice sea mayor. Siempre es un valor numérico.
A través de la propiedad visibility puede establecerse la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta).
A través de las propiedades layer-background-image y background-image se puede establecer una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.
A través de las propiedades layer-background-color y background-color se puede establecer un color de fondo para la capa. Ha de ser un número hexadecimal.
A través de la propiedad overflow puede establecerse si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa sea más grande), hidden (no es posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario).
A través de la propiedad clip puede establecerse el área de la capa que podrá ser visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles. Ha de especificarse la distancia de los márgenes de la capa entre paréntesis, después de la palabra url.
El primer valor ha de ser la distancia (se asume que está en píxeles) del margen superior, hasta la que no se visualizará el contenido de la capa.
El segundo valor ha de ser la distancia del margen izquierdo, hasta la que no se visualizará el contenido de la capa.
El tercer valor ha de ser la distancia del margen superior, hasta la que se visualizará el contenido de la capa.
El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se visualizará el contenido de la capa.
También es posible incluir auto como valor de alguna de estas distancias, lo que indica que la distancia se corresponderá con los bordes de la capa.
Todas estas propiedades se especifican a través del atributo style, y deben aparecer entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos).
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:
<div id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibility: visible; background-color: #0099CC; layer-background-color: #0099CC; background-image:url(imagenes/fondocapa.gif); layer-background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);">
Este texto estádentro de una capa.
</div>
Otra forma de insertar capas es utilizando las etiquetas <span> y </span>, en lugar de las etiquetas <div> y </div>.
La etiqueta <span> se utiliza del mismo modo que la etiqueta <div>, y es compatible con un mayor número de navegadores.
También existen las etiquetas <layer> y </layer>, pero solamente son reconocidas por el navegador Netscape.
La principal diferencia de la etiqueta <layer>, en lo que se refiere a las otras dos, es que las propiedades de la capa se especifican como atributos independientes, y no como valores dentro del atributo style.
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:
<layer name="capa" width="200px" height="115px" z-index="3" visibility="show" bgcolor="#0099CC" background="imagenes/fondocapa.gif">
Este texto está dentro de una capa.
</layer>
Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.
Podemos insertar una capa a través de las etiquetas <div> y </div>, que como ya vimos, sirven para agrupar bloques de texto.
A través del atributo id se le da un nombre a la capa, y a través del atributo style se establecen el resto de propiedades de la capa.
A través de las propiedades left (izquierda) y top (superior) se establece la posición de la capa respecto a los márgenes izquierdo y superior de la página. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
Para que la capa aparezca en la posición establecida, es necesario incluir también la propiedad position con el valor absolute. Si no se estableciera este valor, la capa se mostraría pegada al margen izquierdo, en la posición en la que hubiera sido insertada dentro del código.
A través de las propiedades width (anchura) y height (altura) se establece el tamaño de la capa. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
A través de la propiedad z-index puede establecerse el índice de la capa dentro de la página. Una capa podrá ser solapada por aquellas capas cuyo índice sea mayor. Siempre es un valor numérico.
A través de la propiedad visibility puede establecerse la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta).
A través de las propiedades layer-background-image y background-image se puede establecer una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.
A través de las propiedades layer-background-color y background-color se puede establecer un color de fondo para la capa. Ha de ser un número hexadecimal.
A través de la propiedad overflow puede establecerse si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa sea más grande), hidden (no es posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario).
A través de la propiedad clip puede establecerse el área de la capa que podrá ser visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles. Ha de especificarse la distancia de los márgenes de la capa entre paréntesis, después de la palabra url.
El primer valor ha de ser la distancia (se asume que está en píxeles) del margen superior, hasta la que no se visualizará el contenido de la capa.
El segundo valor ha de ser la distancia del margen izquierdo, hasta la que no se visualizará el contenido de la capa.
El tercer valor ha de ser la distancia del margen superior, hasta la que se visualizará el contenido de la capa.
El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se visualizará el contenido de la capa.
También es posible incluir auto como valor de alguna de estas distancias, lo que indica que la distancia se corresponderá con los bordes de la capa.
Todas estas propiedades se especifican a través del atributo style, y deben aparecer entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos).
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:
<div id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibility: visible; background-color: #0099CC; layer-background-color: #0099CC; background-image:url(imagenes/fondocapa.gif); layer-background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);">
Este texto estádentro de una capa.
</div>
Otra forma de insertar capas es utilizando las etiquetas <span> y </span>, en lugar de las etiquetas <div> y </div>.
La etiqueta <span> se utiliza del mismo modo que la etiqueta <div>, y es compatible con un mayor número de navegadores.
También existen las etiquetas <layer> y </layer>, pero solamente son reconocidas por el navegador Netscape.
La principal diferencia de la etiqueta <layer>, en lo que se refiere a las otras dos, es que las propiedades de la capa se especifican como atributos independientes, y no como valores dentro del atributo style.
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:
<layer name="capa" width="200px" height="115px" z-index="3" visibility="show" bgcolor="#0099CC" background="imagenes/fondocapa.gif">
Este texto está dentro de una capa.
</layer>