2.- CONTROLAR CSS CON DHTML.

2.1.- ACCESO CON JavaScript A TODAS LAS PROPIEDADES C.S.S.: D.O.M. EN Netscape e IE

2.1.1.- Definición de Hojas de Estilo en Cascada (CSS)

Las Hojas de Estilo en Cascada o CSS (Cascade Style Sheets) nos permiten considerar las etiquetas (o tags) de HTML como definidoras de estilos lógicos cuya representación puede ser cambiada. Por ejemplo, se podrá asignar un color determinado (azul) a todas las cabeceras de nivel 3 de la página (etiquetas <h3> y </h3>). Las hojas de estilo se pueden definir de dos formas:

Siguiendo el estándar CSS del W3 Consortium. Ejemplo:

        <style tupe="text/css">
                H3 { color:#0000FF; }
        </STYLE>

Mediante JavaScript. Ejemplo:

        <style tupe="text/javascript">
                tags.H3.color=#0000FF;
        </STYLE>

Las hojas de estilo (CSS) se han visto en profundidad en la parte de Hojas de estilo en cascada

En teoría, los lenguajes de script como JS o VBScript tienen acceso a todas las propiedades CSS a través del modelo de objeto documento (DOM). Esto significa que un estilo aplicado a un elemento (p.e. un link) puede cambiar cuando el ratón pase sobre él, o un elemento posicionado de forma absoluta puede moverse por la página.

Para cambiar los atributos de las etiquetas o tags, es imprescindible acceder a ellas para ellos, disponemos del atributo ID y NAME que identifican cada elemento con un único nombre:

        <p id="ejemplo"> Soy un ejemplo </p>

2.1.2.- Definición de Layer (Capa)

Con las hojas de estilo se tiene control sobre los elementos individuales, pero no se tiene control sobre el documento como un todo, para ello se utilizan los layers o capas. Nosotros vamos a entender por LAYER una zona rectangular de la página que estamos diseņando, normalmente creados mediante el tag <DIV> o también utilizando un nuevo tag introducido por Netscape, llamado <LAYER>

Esto es un ejemplito "on line" de layer o bloque posicionable.

Tiene el fondo verde y las letras azules, un bonito borde de 10 pixels de ancho y una distancia entre el borde y el contenido de 20 pixels.

El codigo HTML que genera ese layer es:

<div id="ejemplito" STYLE="background-color:#009900;
     color:#0000FF; position:relative; padding:20;
     border-width:10px; border-style:ridge; border-color:#FFFFFF">
  Esto es un ejemplito "on line" de layer o bloque posicionable.
  <p> 
  Tiene el fondo verde y las letras azules, un bonito borde de 10 pixels 
  de ancho y una distancia entre el borde y el contenido de 20 pixels.
</div>

Habitualmente son transparentes y usan como color y tipo de letra la establecida hasta ese momento en el documento HTML en el que se define.

2.1.3.- Acceso a propiedades con JavaScript (JS)

A continuacion vamos a describir el modo de acceder a los layers desde el lenguaje JS. De esta forma podremos escribir scripts que los manejen, accediendo a sus propiedades.

El modelo de objeto documento (DOM) es un mecanismo para acceder a traves de JS a los layers, como objetos del lenguaje. Cada layer, como objeto, es uno de los objetos contenidos en el objeto document.

Asi, para acceder a uno de los objetos layer, deberemos haberles dado un identificador al definirlos (en el tag HTML), y una vez hecho esto, accederemos al objeto layer llamado ejemplito mediante:

document.ejemplito

Los navegadores de Netscape y Microsoft son muy diferentes e incompatibles a la hora de procesar el mismo codigo (HTML, JavaScript, etc), y en el DOM utilizado no iban a coincidir... asi pues, pasaremos a explicar cómo acceder en ambos navegadores a los objetos layer y a las propiedades de estos:

DOM en Navigator:
Para acceder a las propiedades CSS del elemento elemento con JS, la sintaxis a seguir es:
```
document.elemento.propiedadCSS
```
donde document es el objeto que representa el documento; elemento es el identificador HTML para el elemento mi_elemento; y propiedadCSS es un nombre de propiedad CSS aplicable a ese elemento.
Todos los elementos identificados (layers o areas posicionadas con CSS) de la página son accesibles a través del array layers de diversos modos: mediante índice, nombre o ID. ( Esto se verá en profundidad cuando veamos el objeto Layer y el uso de JS con bloques).
Escribir en una página los nombres de todos los tags que contiene:
```
for(i=0; i<document.layers.length; i++) {
    document.write(document.layers[i].name + "\n");
}
```
Acceder a un tag por su nombre (ID):
```
alert("El color del elemento es: " 
+ document.layers['elemento'].color);
```
Cambios en la posición, visibilidad y "clipping" aparecen instantáneamente en la página.
DOM en Internet Explorer:
Para acceder a las propiedades CSS del elemento "elemento" con JScript (version del JS de Microsoft), la sintaxis a seguir es:
```
document.all.elemento.style.propiedadCSS
```
donde document es el objeto que representa el documento; el objeto all se refiere a una especie de contenedor de todos los elementos de la página HTML; elemento es el identificador HTML para el elemento mi_elemento; style se utiliza (quizás) para distinguir las propiedades CSS del elemento de otras que pueda tener o que podamos añadirle...; y propiedadCSS es un nombre de propiedad CSS aplicable a ese elemento.
Todos los elementos identificados (areas posicionadas con CSS) de la página son accesibles a través del array document.all de diversos modos: mediante índice, nombre o ID.
En el caso de E4 veremos cómo acceder a los elementos del array document.all por índice y nombre, ya que durante el curso nos centraremos en el navegador de Netscape.
Escribir en una página los nombres de todos los tags que contiene:
```
for(i=0; i<document.all.length; i++) {
    document.write(document.all[i].name + "\n");
}
```
Acceder a un tag por su nombre (ID):
```
alert("El color del elemento es: " 
+ document.all['elemento'].style.color);
```
Cualquier cambio en cualquier propiedad aparecen instantáneamente en la página.

2.2.- NOMBRES DE LAS PROPIEDADES CSS EN JavaScript.

Para acceder a cualquier propiedad desde JS, debemos utilizar un nombre, que por lo general difiere del utilizado en la sintáxis utilizada para definir los estilos en el tag <STYLES>

Hay que tener en cuenta que los identificadores en JS son sensitivos a mayúsculas.

En general, los nombres de propiedades CSS que estén formadas por una sola palabra, se podrán utilizar en JS para referenciar a esa misma propiedad:

color
clear
display

en otras ocasiones, el nombre apenas cambiará, aunque por referirse a varios valores, desde JS se utilizará otra palabra:

margin ---> margins
padding ---> paddings
float ---> align

sin embargo hay otras muchos nombres de propiedades que estan formadas por dos o más palabras, y no se podrán utilizar desde JS para referenciar a dichas propiedades:

font-size ---> fontSize
font-family ---> fontFamily
margin-right ---> marginRight
list-style-type ---> listStyleType

Por lo que a nosotros respecta, nos bastará con conocer las más utilizadas, que por otro lado serán (normalmente) las soportadas por ambos navegadores.

2.3.- LISTA DE PROPIEDADES SOPORTADAS POR CADA NAVEGADOR.

La siguiente lista no es completa, pero nos dará una idea de qué soporta cada uno de los navegadores más utilizados hoy día.

No es completa, ni se ha pretendido hacer así, ya que, entre otras cosas, la documentación que se puede encontrar acerca de cada navegador suele estar equivocada en cuanto a qué propiedades soportan y en cuanto a los resultados que se pueden esperar del uso de cierta propiedad en su navegador.
Incluso entre distintas versiones del mismo navegador, la cosa cambia...

Como vemos, decidir qué propiedades son soportadas por cada uno es más "artesanal" que otra cosa, ya que en muchos casos deberemos ser nosotros quienes, al utilizar cierta propiedad que el desarrollador del navegador nos dice que debe hacer cierta cosa, decidamos si realmente hace dicha cosa, otra distinta a la esperada o nada en absoluto... tras lo cual diríamos si un navegador en concreto soporta o no dicha propiedad.

Uso de CLASS N4 E4 E3

Uso de ID N4 E4 E3

first-line

first-letter

font-family N4 E4

font-style N4 E4

font-variant E4

font-weight N4 E4

font-size N4 E4 E3

font N4 E4 E3

color N4 E4 E3

background-color N4

backround-image N4 E4

background-repeat N4 E4

background-attachment E4

background-position E4

word-spacing

letter-spacing E4

text-decoration N4

vertical-align

text-transform N4 E4

text-align N4 E4 E3

text-indent N4 E4 E3

line-height N4 E4 E3

margin-top N4 E4 E3

margin-right N4 E4

margin-bottom N4 E4

margin-left N4 E4 E3

margin N4 E4 E3

padding N4 E4

border-top-width N4

border-right-width N4

border-bottom-width N4

border-left-width N4

border-width N4

border-color N4 E4

border-style N4 E4

border-top E4

border-right E4

border-bottom E4

border-left E4

border N4 E4

width N4 E4

heigth N4 E4

float N4 E4

clear N4 E4

list-style-type N4 E4

list-style-image E4

Distintas unidades de medida N4 E4 E3

Unidades en percentajes N4 E4 E3

distintas formas de indicar un color N4 E4 E3

2.4.- Ejercicios.

Para hacer los ejercicios de este tema pulsa aquí


Pedro Angel Castillo Valdivieso: pedro@geneura.ugr.es Fco. Javier García Castellano: fjgc@decsai.ugr.es Equipo GeNeura Departamento de Arquitectura y Tecnología de los Computadores Universidad de Granada tlf: +34-58-243163 fax: +34-58-243230