Junio 22, 2018, 05:17:52 am

Autor Tema: Las Capas en HTML  (Leído 1502 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado shevchenko

  • "Desde el punto de vista de un programador, el usuario no es más que un periférico que teclea cuando se le envía una petición de lectura"
  • Yo vivo en CPH
  • ***
  • Mensajes: 1353
  • Sexo: Masculino
  • Eres más falso que Windows 95 a prueba de fallos
    • Ver Perfil
    • Ycnexperu SAC
Las Capas en HTML
« en: Mayo 22, 2009, 04:57:10 pm »
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 podra traducirse como "contenido HTML posicionable dinámicamente". 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) 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 ttulo 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>

 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ónPosibles 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 heightDeterminan la anchura y altura de la capa. un tamaño en pixeles.
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.
visibilityEspecifican 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.

Autor: Universidad de Murcia
You are not allowed to view links. Register or Login


You are not allowed to view links. Register or Login   You are not allowed to view links. Register or Login  You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login   You are not allowed to view links. Register or Login


xx
jQuery Masonry: encaja capas HTML

Iniciado por shevchenko

0 Respuestas
1363 Vistas
Último mensaje Junio 12, 2009, 06:37:14 pm
por shevchenko
xx
Capas y tablas

Iniciado por Heent

1 Respuestas
1278 Vistas
Último mensaje ſeptiembre 16, 2011, 12:18:53 am
por .xAk.
question
Desarollo en Capas

Iniciado por angel_neo

1 Respuestas
6950 Vistas
Último mensaje Enero 11, 2018, 11:11:28 am
por peluya
xx
Ayuda con capas

Iniciado por maximilion360

1 Respuestas
1120 Vistas
Último mensaje Diciembre 07, 2012, 04:26:12 pm
por seth
xx
duda de capas en dreamweaver

Iniciado por hari

3 Respuestas
1619 Vistas
Último mensaje Julio 23, 2007, 01:26:35 pm
por vart001
question
Programacion por capas (dudas)

Iniciado por propio007

9 Respuestas
8597 Vistas
Último mensaje Enero 11, 2018, 11:15:12 am
por peluya
xx
Duda capas en pyqt

Iniciado por Anonimo_7

5 Respuestas
2225 Vistas
Último mensaje Febrero 13, 2012, 12:55:25 pm
por JaAViEr
exclamation
La luna tiene finas capas de agua

Iniciado por ~Gean

0 Respuestas
1434 Vistas
Último mensaje ſeptiembre 28, 2009, 09:44:36 am
por ~Gean
xx
Flash-004 Linea de Tiempo, Animaciones y Capas

Iniciado por lucasmoyano

1 Respuestas
1235 Vistas
Último mensaje Mayo 22, 2010, 06:22:55 am
por myguestp
question
Combinar las capas manteniendo los modos de fusión (Photoshop)

Iniciado por Apocalixsa

15 Respuestas
9336 Vistas
Último mensaje Febrero 20, 2011, 12:15:15 pm
por Apocalixsa