oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS

Curso HTML - Lección 12: Capas <div>

¿Qué son las capas?

A las capas las podemos definir como recuadros que pueden colocarse en cualquier parte de la página, en las que podemos insertar todo lo que queramos: imágenes, texto, enlaces, etc... . Nos ofrecen una gran ventaja y es que pueden ocultarse o solaparse entre si, ofreciendonos grandes posibilidades para diseñar nuestra página web.

Las capas se insertan mediante las etiquetas <div> y su cierre </div>.

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.

Ejemplo 1:

<p>Esto es un ejemplo de capa con fondo rojo.</p>

</div>

y de este modo lo visualizaremos en el navegador:

Esto es un ejemplo de capa con fondo rojo.
Como ves todo el texto, imágenes y todo lo que se te ocurra insertar en esta capa tendrá como color de fondo el rojo.

Con las propiedades left (izquierda) y top (superior) podríamos establecer la posición de la capa respecto a los márgenes izquierdo y superior de la página.

Pero para que la capa apareciese en la posición deseada también tendriamos que poner la propiedad position con el valor absolute.

A través de las propiedades width (anchura) y height (altura) estableceremos el tamaño de la capa de nuestra capa.

Estas propiedades se especifican a través del atributo style, y aparecerán entre comillas, con un punto y coma (;) detrás de cada una. Para asignar los valores a las propiedades utilizaremos el símbolo dos puntos (:).

Ejemplo 2:

<p>Este texto estaría dentro de una capa.</p>

</div>

Con el atributo background-image insertaríamos una imagen de fondo en la capa y como ya hemos visto anteriormente con background-color lo que insertamos es un color de fondo para la capa.

Ahora te pongo un pequeño resumen de las propiedades vistas y otras que no hemos visto de las capas y como hemos visto en las lecciones anteriores lo hare usando "tablas".

PROPIEDAD	DESCRIPCION	POSIBLES VALORES
left y top	Sitúan la esquina superior izquierda de la capa respecto a la esquina superior izquierda de la página o de la capa donde esté metida.	Distancia en píxeles, por defecto cero.
width y height	Determinan la anchura y altura de la capa.	Un tamaño en píxeles.
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.	Dirección donde se encuentre el gráfico o la imágen.
background-color y layer-background-color	Color de fondo de la capa.	Un color.

Hasta aquí todo sobre las capas, preguntanos en el Foro OTW si te surge alguna duda. Si no es así pasa a la siguiente lección.

Quiero aprender más!!!

Avanzar a Lección 13: Iniciación CSS
Retroceder a Lección 11: Tablas II

Menú

Indice del Curso

Design By: JTole®