Unidad 14. Capas (III)



14.3. Formato de una capa

Las propiedades de la capa se especifican a través de su inspector de propiedades.

Elemento CSS-P es el nombre o ID de la capa. Desde aquí podemos asignarle otro ID, pero si lo hacemos perderá las propiedades que hayamos indicado para este elemento. Si lo que queremos es cambiar el ID por otro más descriptivo, podemos hacer clic derecho sobre el borde de la capa y elegir ID... en el menú contextual. También puede ser cambiado a través del panel Elementos PA, haciendo doble clic sobre él.

El resto de campos se refieren a las propiedades CSS que definen la posición y tamaño de la capa.

Izq y Sup indican la distancia en píxeles (también podemos introducir un valor en porcentaje) que hay entre los límites izquierdo y superior del documento y los lados superior e izquierdo de la capa respectivamente.

Por defecto se toman los lados del documento, a no ser que creemos una Capa PA dentro de otra capa posicionada. En este caso, la distancia se referirá a los lados de la capa padre, independientemente de su posición en el documento.

Si queremos que la posición se tome con respecto al elemento padre, pero este no tiene posicionamiento absoluto, podemos darle un posicionamiento relativo empleando CSS (En las propiedades de Posición del editor CSS, estableciendo position como relative). Esto no afectará a la posición del elemento padre si no cambiamos las propiedades left, top, right o bottom.

Truco: Si queremos centrar una capa con respecto al elemento que la contiene podemos hacerlo empleando CSS. Para ello, en Izq. ponemos 50%. Para que el lado izquierdo cuente a partir del centro, le damos un margen izquierdo negativo que sea la mitad del ancho de la capa. En la imagen anterior, como el ancho es 200px, añadiríamos por CSS margin-left: -100px;.

An y Al indican la anchura y la altura

Índice Z es el número de orden de colocación de las capas. Este valor también puede cambiarse a través del panel Elementos PA. Una capa será solapada por aquellas capas cuyo índice Z sea mayor que el suyo.

Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:

La visibilidad también puede cambiarse a través del panel Elementos PA, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.

A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.

Desb. (Desbordamiento). Hasta ahora, los elementos que veíamos se ajustaban a su contenido. En el caso de las Capas PA podemos indicar un ancho y alto, por lo que puede que el contenido no quepa dentro de la capa. Con esta propiedad controlamos cómo aparecen las capas en un navegador cuando el contenido excede el tamaño especificado de la capa.

visible. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. Éste sí cabe.
scroll. Éste sí cabe.

 

• Para practicar puedes realizar el Ejercicio paso a paso Insertar una capa.

Todo lo que hemos definido de la capa, aparece como propiedades CSS en la cabecera de la página, utilizando como selector el ID o nombre de la capa. Por eso, si queremos emplear una capa en la misma posición en distintas páginas, podemos exportar ese estilo a una hoja de estilos, y en cada página crear una capa y darle el mismo ID. Recuerda que el ID ha de ser único en la página, pero puede repetirse en páginas distintas.

Podemos editar estas propiedades con el editor CSS en la categoría Posición. Ahí verás, por ejemplo, que podemos indicar la distancia con el lado derecho (right) en vez del izquierdo como hacíamos hasta ahora. O la distancia con el lado inferior (bottom). Aunque podemos hacerlo de varias formas, lo recomendable es indicar la distancia con uno de los lados y el ancho, y la distancia con el lado superior o inferior y el alto.

• Ejercicio propuesto de la Unidad 14 • Prueba evaluativa de la Unidad 14
Marzo-2012
Atrás Inicio Adelante


Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.