Vemos las diferencias entre varias etiquetas para aplicar estilos y crear capas y una pequeña introducción a las capas.
Veamos una pequeña introducción a lo que son las capas, la etiqueta HTML <DIV> utilizada para construirlas y los atributos CSS con los que podemos aplicar estilos.
Como ya hemos visto en nuestro manual de CSS,
<SPAN> sirve para aplicarle estilo a una pequeña parte
de una página HTML. Por ejemplo, con ella podríamos hacer que una
parte de un párrafo se coloree en rojo. Con <SPAN> no es habitual englobar
un trozo muy grande de texto, por ejemplo el que comprenda a varios
párrafos.
Con <DIV> también podemos aplicar estilo a partes de la
página HTML.
La diferencia entre <SPAN> y <DIV> es que con esta
última si que podemos aplicar estilo a una parte más amplia de la página, por
ejemplo a tres párrafos. Además que la etiqueta <DIV> tiene un uso
adicional que es el de crear divisiones en la página a las que podremos aplicar
una cantidad adicional de atributos para modificar sus comportamientos. Por
ejemplo, podemos alinear el texto de la división al centro con text-align: center;.
Una capa es una división, realmente es un concepto propio, que no forma parte específicamente del HTML o CSS. Entiende una capa como una parte de la página, un elemento que tiene un comportamiento muy independiente dentro de la página.
<DIV> a las que les podemos poner atributos de posicionamiento determinados, para que puedan tener ese comportamiento dinámico, y podamos moverlas y hacer cosas con ellas sin afectar al flujo del documento completo.
<LAYER> e <ILAYER>. Éstas tienen como
objetivo construir capas, pero no son compatibles más que con Netscape (un navegador que ya no existe actualmente),
por lo que es recomendable utilizar la etiqueta <DIV> para hacer capas preferentemente a las otras dos.
Los atributos que podemos aplicar a estas etiquetas, pero en
concreto a las dos recomendadas <SPAN> y <DIV>, son principalmente
de estilos CSS. Estos atributos nos permiten, como hemos podido ver en el manual
de hojas de estilo en cascada de desarrolloweb, modificar de una manera muy
exhaustiva la presentación de los contenidos en la página. Para aplicar estilos
a estas etiquetas se utiliza el atributo de HTML style, de esta
manera:
<SPAN style="text-decoration:underline;font-weight:bold">...</SPAN>
<DIV style="color:red;font-size:10px">...</DIV>
Como ya pudimos ver muchos ejemplos en el manual de CSS, nos
referimos a él para ampliar esta información. Pero no habíamos visto todavía una
serie de atributos que nos sirven para posicionar la división en la página como
una capa. Estos atributos se pueden aplicar a la etiqueta <DIV> que es la
que servía para crear capas compatibles con todos los navegadores.
Atributos CSS para que los elementos se comporten como capas
Los atributos para que la división sea una capa son varios y se pueden ver a continuación.
<div id="c1" style="position:absolute; left: 200px; top: 100px;">
Hola!
</div>El primero, position, indica que se posicione de manera absoluta en la página y los segundos, left y top, son la distancia desde el borde izquierdo de la página y el borde superior.
Hay otros atributos especiales para capas como width y height para indicar la anchura y altura de la capa, z-index que sirve para indicar qué capas se ven encima de qué otras o visibility para definir si la capa es visible o no. Estos y otros atributos los veremos en el siguiente capítulo, donde hablaremos del posicionamiento de capas.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...