Los Cascading Style Sheets (CSS) son la base del HTML Dinámico, tanto en el Netscape Navigator 4.0 como en el Internet Explorer 4.0. Los CSS ofrecen una forma de crear un conjunto de estilos que definen cómo se mostrarán los elementos de una página. Los Cascading Style Sheets Positioning (CSSP) son una extensión de los CSS, y permiten un control a nivel de pixel sobre la localización de cualquier elemento de la página. El objetivo del presente tutorial es aprender a hacer páginas utilizando DHTML, por tanto, aunque se utilizarán CSS y CSSP, no se explicará en este manual.

Uso del tag DIV

Cuando se utilizan CSSP, estas propiedades se aplican, normalmente, a un tag DIV (division). Cuando uno pone HTML/text en un tag DIV, a este tag se le llama de varias formas: "bloque DIV", "elemento DIV", "capa-CSS" o, como suele ser más habitual, simplemente "capa". Cuando te encuentres en una página o en otro manual una referencia a cualquiera de estos términos, debes saber que se están refiriendo a una misma cosa: a un "trozo" de HTML encerrado dentro de un tag DIV posicionado.

La sintaxis de un tag DIV no difiere con respecto a otros tags:

	<DIV>
	  Esto es un tag DIV
	</DIV>

Pero al aplicar CSS a un tag DIV, podemos definir exactamente en qué parte de la pantalla se mostrará este trozo de HTML. Para esto, antes debemos dar al DIV un identificador para poder referirnos a él:

	<DIV ID="ejemplo">
	  Esto es un ejemplo de tag DIV con identificador
	</DIV>

Las restricciones a la hora de poner identificadores a este tag, son las mismas que para casi todos los lenguajes de programación, es decir, se puede usar cualquier combinación de caracteres alfanuméricos, incluyendo además el underscore (_), debiendo empezar siempre con una letra.

Existen dos maneras de aplicar el CSS al tag:

1. CSS en el propio documento:

   Esta forma es la más usada:

      <DIV ID="ejemplo" STYLE="aquí van los estilos del tag">
        Esto es un ejemplo de tag DIV con identificador y estilos
      </DIV>
   

2. Tag de estilo externo:

   El uso de esta segunda forma evidentemente produce el mismo efecto, aunque existen ciertos aspectos que hay que tener en cuenta en este caso. Por tanto, será mejor esperar a que veamos el capítulo dedicado a Nesting Layers antes de probar esto. Por el momento, sólo muestro cómo se hace:

      <STYLE TYPE="text/css">
      <!--
      #ejemplo {aquí van los estilos}
      -->
      </STYLE>
   
      <DIV ID="ejemplo">
        Esto es un ejemplo de tag DIV
      </DIV>
   

   Nótese cómo se usa el ID en el tag STYLE para asignar los estilos CSS.

Propiedades Cross-Browser CSS

position

Define cómo se posicionará el tag DIV: "relative" indica que las coordenadas están especificadas con respecto a otro elemento, mientras que "absolute" significa que el tag DIV se colocará en las coordenadas señaladas.

left

Posición izquierda del tag (número de pixels desde el extremo izquierdo del navegador).

top

Posición superior del tag (número de pixels desde el extremo superior del navegador).

width

Ancho del tag DIV. Cualquier cosa que se coloque en el interior del tag, se ajustará según este valor. Si usas capas para crear animaciones, deberías definir siempre el ancho de la capa. La razón está en que en el Explorer el ancho por defecto es el ancho de la pantalla. Por tanto, si mueves la capa por la pantalla, aparecerá una barra de desplazamiento en la parte inferior, lo cual no es muy apropiado porque, además de incómodo, ralentiza la animación.

height

Altura del tag DIV. Esta propiedad no se suele usar demasiado a menos que quieras recortar la capa.

clip

Define el rectángulo de recorte de la capa. Los valores que se utilizan para definirlo son los de las cuatro esquinas: arriba,derecha,abajo,izquierda.

visibility

Determina si la capa será "visible", "hidden" (oculta) o "inherit" (hereda visibilidad, opción por defecto).

z-index

La profundidad del tag DIV.

background-color

Color de fondo del tag DIV. En el Netscape, esta propiedad sólo se aplica al color de fondo del texto. Si quieres dibujar cuadros con CSS, puedes ajustar la propiedad layer-background-color al mismo valor.

layer-background-color

Color de fondo del tag DIV. Sólo para el Netscape.

background-image

Imagen de fondo de la capa. Sólo para el Internet Explorer.

layer-background-image

Imagen de fondo de la capa. Sólo para el Netscape Navigator.

La sintaxis de los CSS difiere del HTML, se usan dos puntos para separar la propiedad y su valor, y se usa punto y coma para separar las distintas propiedades:

	position: absolute;
	left: 50px;
	top: 100px;
	width: 200px;
	height: 100px;
	clip: rect(0px 200px 100px 0px);
	visiblity: visible;
	z-index: 1;
	background-color:#FF0000;
	layer-background-color:#FF0000;
	background-image:URL(icono.gif);
	layer-background-image:URL(icono.gif);

Uno tiene cierta flexibilidad a la hora de asignar propiedades CSS. En primer lugar, no tenemos que definir todas ellas. Los espacios en blanco se ignoran, por lo que podemos tener todas ellas en la misma línea, en líneas separadas, usar tabulados, etc. Además, la unidad por defecto es el pixel, por lo que no es necesario poner "px" tras cada valor de posición, aunque sin embargo se recomienda hacerlo, por posibles incompatibilidades entre el Netscape y el Explorer.

Una asignación de propiedades podría ser la siguiente:

	position:absolute; 
	left:50px;
	top:100px;
	width:200px;
	height:100px;
	clip:rect(0px 200px 100px 0px);
	background-color:#FF0000;
	layer-background-color:#FF0000;

El ejemplo completo sería:

1. Ejemplo Interno (Con asignación de propiedades en el propio tag DIV ):

      <DIV ID="ejemplo" STYLE="position: absolute; left:50px; top:100px; width:200px;
              height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1" >
        Esto es un ejemplo de tag DIV con estilos
      </DIV>
   

2. Ejemplo Externo (Con asignación de propiedades fuera del tag DIV ):

      <STYLE TYPE="text/css">
      <!--
      #ejemplo {
      		position: absolute;
   		left:50px;
   		top:100px;
   		width:200px;
   		height:100px;
   		clip:rect(0px 200px 100px 0px);
   		visiblity:visible;
   		z-index:1;
   	}
      -->
      </STYLE>
   
      <DIV ID="ejemplo">
        Esto es un ejemplo de tag DIV con estilos
      </DIV>
   

- Versión imprimible de este documento
- Enviar por e-mail este documento