HTML Manual Dinámico (DHTML) 2

User Manual:

Open the PDF directly: View PDF .
Page Count: 30

Download
Open PDF In Browser	View PDF

Curso de DHTML: CSS y Layers
Lola Cardenas Luque

http://rinconprog.metropoli2000.com
lornacl@iname.com

U ltima actualizacion: 3 de febrero de 2001

Lola Cardenas Luque

Curso de DHTML

Copyright c 2.001, por Lola Cardenas Luque
Con este curso se pretende completar los conocimientos de HTML, aprendiendo cosas sobre hojas de estilo y capas, las dos grandes categoras que constituyen el HTML
Dinamico. Es altamente recomendable saber desenvolverse con el lenguaje HTML, puesto
que estos temas son una ampliacion a lo que ya se conoce de este lenguaje.
Este manual es para libre uso personal. No puede distribuirse, completo o en parte, sin el
consentimiento escrito de la autora.

http://rinconprog.metropoli2000.com

iii

Curso de DHTML

Lola Cardenas Luque

Indice General
1
2
3
4
5

Introduccion
De nicion de los estilos
Herencia de estilos
Jerarqua de de nicion de estilos. Clases. Pseudoclases
Propiedades de las hojas de estilo

5.1
5.2
5.3
5.4
5.5

Propiedades de formato de bloque .
Propiedades de las fuentes . . . . .
Propiedades de texto . . . . . . . .
Propiedades de color y fondo . . . .
Propiedades de clasi cacion (listas)

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

1
2
6
8
11
12
13
14
14
15

6 Layers: Creacion

16

7 Propiedades de las capas
8 La etiqueta  de Netscape

19
22

6.1 Diferencias entre ambos tipos de posicionamiento . . . . . . . . . . . . . . 17
6.1.1 Posicionamiento absoluto . . . . . . . . . . . . . . . . . . . . . . . . 17
6.1.2 Posicionamiento relativo . . . . . . . . . . . . . . . . . . . . . . . . 17

http://rinconprog.metropoli2000.com

v

Lola Cardenas Luque

Curso de DHTML

1 Introduccion
DHTML son las siglas de Dynamic HyperText Markup Language (conocido como HTML
Dinamico); se trata de una nueva especi cacion que viene a dar respuesta a la demanda
de interactividad en las paginas web.
El mundo de la red hasta ahora haba estado lleno de paginas con un contenido mas o
menos interesante, pero estatico: una vez la pagina haba cargado, ya no haba modi cacion
posible que la dotara de la interactividad que el gran publico peda. Y llego DHTML
La especi cacion DHTML se podra dividir en tres grandes categoras: las hojas de
estilo, las capas (layers) y las fuentes de letra cargables. Ademas, el uso de algun lenguaje
de script, como JavaScript, contribuye en buena medida a la interactividad de las paginas,
pues estos lenguajes son los que nos permiten cambiar las propiedades de forma dinamica.
Si quieres saber algo de JavaScript, puedes consultar este curso.
Las hojas de estilo vienen a intentar volver a separar en un documento el estilo logico
del estilo fsico, dejando este ultimo en bloques de de nicion de estilos separados de la
estructura del documento.
El estilo logico se re ere a la logica del documento: cabeceras, parrafos, ... no se preocupa
de la apariencia nal, sino de la estructura del documento. Por el contrario, el estilo fsico
no se preocupa de la estructura del documento, sino por la apariencia nal: parrafos con
un cierto tipo de letra, tablas con un determinado color de fondo, ...
La nalidad de las hojas de estilo es crear unos estilos fsicos, separados de las etiquetas
HTML (en lugar de como parametros de las etiquetas), y aplicarlos en los bloques de texto
en los que se quieran aplicar. Estos estilos podran ser modi cados en algunas ocasiones
desde JavaScript, y esto empieza a darnos un poco mas de interactividad.
Por otra parte, tenemos las capas, que vienen a darnos la solucion al problema de poner
elementos justo en la posicion que queramos, evitandonos tener que hacer arti cios para
obtener el resultado buscado. Una capa sera una parte mas del documento que puede ser
situada en cualquier posicion del mismo, consiguiendo que se solape sobre algunos elementos
si es lo que necesitamos, adecuando sus margenes y otras propiedades a lo que queramos
hacer...
Por ultimo, las fuentes cargables intentan solucionar el problema de que quien este
viendo nuestro documento no tenga en su ordenador la fuente que nosotros consideramos
mas apropiada para nuestra pagina, incrustando de alguna manera la fuente en la propia
pagina.
Estas tres grandes categoras seran las que se iran viendo poco a poco, con ejemplos
claros, a lo largo de este curso.

http://rinconprog.metropoli2000.com

1

Curso de DHTML

Lola Cardenas Luque

2 De nicion de los estilos
CSS son las siglas de "Cascade StyleSheet". Se trata de una especi cacion sobre los estilos
fsicos aplicables a un documento HTML, y trata de dar la separacion de nitiva de la logica
(estructura) y el fsico (presentacion) del documento.
Ademas, se pretende dar solucion a los problemas que da HTML para formatear el
texto, y que tratan de arreglarse usando tablas sin borde, imagenes transparentes de 1
pixel a las que se les da el tama~no deseado para hacer espacios en blanco, ...
Tenemos varias posibilidades para de nir un estilo: especi carlo directamente en la etiqueta en la que queremos usarlo, de nirlo aparte y aplicarlo en las etiquetas que queramos,
o de nir estilos globales para las etiquetas (que podran ser cambiados en las que no se
desee aplicarlos).
Para aplicar un estilo a una etiqueta concreta, usaremos la sintaxis:



...



Etiqueta es la etiqueta de HTML en la que queremos dar una apariencia concreta (
,
, , ...). STYLE es el parametro que indica que vamos a aplicar el estilo de nido
a continuacion a la etiqueta en la que se encuentra. La de nicion del estilo son pares
propiedad:valor separados por punto y coma. Propiedad ser
a la caracterstica de la
etiqueta que queramos modi car (el color, el tama~no de la fuente, el tipo de letra, ...) y
valor es el valor que queremos darle (color negro, 8 puntos de tama~no de letra, ...).
Por ejemplo, si tenemos un texto en negrita y queremos que salga en color rojo, haremos:
La negrita que vemos es
mas grande y esta en rojo

Sin embargo, lo que suele ocurrir es que queremos de nir estilos que se apliquen a todas
las etiquetas del documento, es decir, queremos que todo el documento tenga un cierto tipo
de letra, que las tablas tengan otro, que las cabeceras tengan un color determinado, ...,
para ello, de niremos estilos globales por medio de la etiqueta 

2

http://rinconprog.metropoli2000.com

Lola Cardenas Luque

Curso de DHTML

Podemos aplicar el mismo estilo a varias etiquetas, escribiendolas separadas por comas y, a continuacion, la especi cacion del estilo segun pares propiedad:valor separados
por punto y coma y encerrados entre llaves fg. En un bloque de estilo global podremos
de nir cuantos estilos queramos. Aparece un Otros; se re ere a las llamadas clases, que
nos permitiran que una etiqueta concreta tenga una apariencia distinta a la de nida como
global.
Es recomendable que de namos estos estilos globales dentro de la cabecera del documento (entre  ... ) para asegurarnos de que se aplicaran a todas las
etiquetas para las que se haya de nido un estilo. Veamos un ejemplo:







Prueba de definicion de estilos en un bloque aparte

Como puede verse, la apariencia de esta pagina queda completamente
definida por los estilos que hemos especificado en el bloque STYLE
en la cabecera del documento. Los margenes son mas amplios de lo
habitual, la negrita tiene un tamano y un color fijos,
los trozos de texto en teletipo como este fragmento
tambien tienen definida su fuente, tamano y color, y vamos a ver como
quedan las tablas, para finalizar el ejemplo: 



http://rinconprog.metropoli2000.com

3

Curso de DHTML

Lola Cardenas Luque


 
Cabecera 1
 
Cabecera 2
 
 
Celda (1,1)
 
Celda (1,2)
 





Como sabemos de nir estilos globales, sera interesante tenerlos de nidos en un archivo
aparte, pues si queremos dotar a todas las paginas de los mismos estilos, no es tarea grata
copiar y pegar la de nicion de los estilos en cada una de las paginas.
Afortunadamente, s podemos de nir los estilos en un chero distinto al documento
HTML, y despues referenciarlo desde el propio documento HTML. Esto lo haremos con la
siguiente etiqueta, dentro de la cabecera del documento (entre  ... ):



REL=''stylesheet'' TYPE=''text/css'' HREF=''URL Hoja.css''

Veamos un ejemplo:







Prueba de definicion de estilos en una hoja de
estilo externa
Esto es igual que el ejemplo de definicion de un bloque en
el documento, pero ahora con las definiciones en una hoja
externa. 

Como puede verse, la apariencia de esta pagina queda completamente
definida por los estilos que hemos especificado en el bloque STYLE
en la cabecera del documento. Los margenes son mas amplios de lo
habitual, la negrita tiene un tamano y un color fijos, los
trozos de texto en teletipo como  tambien
tienen definida su fuente, tamano y color, y vamos a ver como quedan
las tablas, para finalizar el ejemplo: 


4

http://rinconprog.metropoli2000.com

Lola Cardenas Luque

Curso de DHTML



 
Cabecera 1
 
Cabecera 2
 
 
Celda (1,1)
 
Celda (1,2)
 


Si quisieramos que otros documentos tuvieran el mismo estilo, solo
tendriamos que usar la etiqueta LINK para aplicarlos. Esa es la
ventaja de las hojas de estilo externas.



El chero ejemplo.css tiene el siguiente contenido:
/* Definicion de estilos en un archivo aparte */
/* Estilo para el documento */
BODY {font-family:Verdana,sans-serif;font-size:x-small;
margin-left:0.25in; margin-right:0.25in}
/* Estilo para la cabecera de nivel 2 */
H2 {font-family:Verdana,sans-serif;font-size:14pt;color:red}
/* Estilos para otras etiquetas */
B, TD {font-family:Verdana,sans-serif;font-size:x-small;
color:olive}
TH {font-family:Verdana,sans-serif;font-size:x-small;
color:white;background-color:#0080C0}
PRE, TT, CODE {font-family:Courier New,Courier;
font-size:9pt;color:maroon}

Esto nos muestra, ademas, una caracterstica interesante: podemos usar comentarios al
estilo de C en las de niciones del estilo. Tal y como vemos, en el chero css no es necesario
especi car la etiqueta , basta con ir de niendo los estilos que
queramos aplicar.

http://rinconprog.metropoli2000.com

5

Curso de DHTML

Lola Cardenas Luque

3 Herencia de estilos
En el conjunto de las etiquetas HTML podemos establecer una jerarqua de etiquetas que
contienen a otras, para darnos una relacion de herencia. En primer lugar, tendramos la
etiqueta  ... , que hace referencia a todo el documento, y podemos
considerarla como la etiqueta "padre" de todas las demas etiquetas de formato, puesto que
todas ellas se encuentran contenidas en el cuerpo (body) del documento.
Despues, tenemos las etiquetas de parrafo (
...
, 
...
, cabeceras, ...) y etiquetas de elementos insertados en lnea (..., ...,
..., ...). Las etiquetas de parrafo seran contenedoras de las etiquetas de
elementos insertados en lnea (en el sentido que les estamos dando), estableciendose as
una nueva relacion "padre-hijo".
Esto es interesante porque la mayora de los estilos que se de nen se heredan, es decir,
si de nimos un cierto estilo para una etiqueta, este estilo sera heredado por las etiquetas
"hijas", con lo que no tendremos que volver a de nirlo para ellas. Por ejemplo, si de nimos
un tipo de letra y un color para la fuente para la etiqueta  ... , este
estilo sera heredado por todas las etiquetas del documento y no tendremos que de nirlo
para las otras etiquetas.
Sin embargo, si tenemos de nido un estilo para una etiqueta "padre", podremos de nir
un estilo distinto para una etiqueta "hija", es decir, un estilo heredable se hereda a no ser
que especi quemos lo contrario. Se heredaran aquellas caractersticas que no pongamos, y
se aplicaran aquellas que de namos para la etiqueta que no tenga la etiqueta "padre".
Veamos un ejemplo:







Todo el texto tiene definido el estilo Fuente:Verdana,
Tamano:x-small, Margen izquierdo:0.25in, Margen derecho:0.25in,
pero este trozo de linea es de un color
distinto, conservando el resto de propiedades, y eso hace
interesante la herencia y la posibilidad de cambiar en partes
concretas los estilos heredados.



6

http://rinconprog.metropoli2000.com

Lola Cardenas Luque

Curso de DHTML

Otro tema a comentar aqu es la posibilidad de de nir, en lugar de un estilo para una
etiqueta, sin mas, es de nir un estilo en funcion del contexto. Por ejemplo, es posible que
solamente queramos que el texto en negrita sea de color verde cuando se encuentre en una
celda de una tabla, o que sea de color purpura cuando forme parte de una lista. Esto lo
de niramos como sigue:








En este ejemplo, seguimos con los estilos de la hoja externa, pero
vamos a comprobar que se verifican los estilos definidos en
funcion del contexto: la negrita de una celda cualquiera de una
tabla debe ser de color verde, y la negrita de una lista debe
ser de color purpura. 


Un elemento cualquiera
Un elemento con una palabra en negrita
Otro elemento cualquiera



Cabecera 1
Cabecera 2
Celda (1,1)
Celda (1,2)
Celda (2,1) en negrita
Celda (2,2)





(Notar que las etiquetas no estan separadas por comas).
http://rinconprog.metropoli2000.com

7

Curso de DHTML

Lola Cardenas Luque

4 Jerarqua de de nicion de estilos. Clases. Pseudoclases
Ya hemos visto varias formas de de nir estilos (bien mediante una hoja externa, un bloque
de estilos o directamente en una etiqueta). Estas posibilidades de de nicion inducen una
jerarqua que decide que estilo se aplicara a una etiqueta en el caso de que haya varias
posibilidades a elegir para ella.
Supongamos, por ejemplo, que tenemos en un documento una hoja externa que de ne
un estilo para 
, en el mismo documento un bloque de estilo que de ne otro estilo para
, y luego, para una 
 concreta del documento, se de ne otro estilo.
>Cual de todos es el que se debe aplicar? Con todo lo que hemos visto, ya sabemos que
sera siempre el mas restrictivo, en el sentido del ambito en el que se de ne el estilo. As, un
bloque de estilo de nido en el documento es mas restrictivo que una hoja externa, y una
de nicion en una etiqueta concreta es mas restrictiva que un bloque de estilo. Por tanto, a
nuestra 
 concreta se le aplicara el estilo de nido localmente para ella, resolviendo as
el con icto de de nicion de varios estilos a la vez para una misma etiqueta.
Esta posibilidad no es en absoluto extra~na; es normal querer de nir unos estilos globales en hojas externas que homogeneicen el aspecto de nuestras paginas, y luego, en una
pagina concreta querer variar el estilo en alguna etiqueta concreta. Como ya sabemos, esto
podemos hacerlo de niendo el estilo localmente en esa etiqueta.
Pero tambien puede suceder que esta de nicion de un estilo concreto queramos aplicarla
a otra etiqueta. Lo primero que se nos ocurre es copiar esta de nicion del estilo a la
otra etiqueta en la que tambien queremos aplicarlo. Sin embargo, este estilo concreto que
queremos aplicar a algunas etiquetas concretas puede ser de nido en un bloque de estilo
global o, incluso, en la hoja externa, y aplicarlo, gracias a un identi cador, a las etiquetas
concretas en las que queramos que se aplique dicho estilo. Con este n se de nen las clases.
Una clase es una de nicion de un estilo que en principio no esta asociado a alguna
etiqueta HTML, pero que podemos asociar, en el documento, a etiquetas concretas.
Para ello, en primer lugar de nimos la clase (en el bloque de estilos o en la hoja externa)
como un estilo mas, de esta forma:
.Nombre de la Clase

fpropiedad1:valor;...;propiedadN:valorg

es decir, escribiendo un punto seguido del nombre que le queramos dar a la clase, y
de niendo el estilo como lo de nimos para cualquier otra etiqueta: pares propiedad:valor
separados por punto y coma y encerrados entre llaves. Ademas, podremos de nir cuantas
clases necesitemos.
Ahora, para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos el
parametro CLASS como sigue:

8

http://rinconprog.metropoli2000.com

Curso de DHTML

Lola Cardenas Luque



CLASS=''Nombre de la Clase''

...



donde Nombre de la Clase es el nombre que le hemos dado a la clase, sin el punto.
Por ejemplo:







En este ejemplo vamos a ver como se aplican las clases.
Por ejemplo, esta negrita utiliza el estilo definido
en el bloque, pero esta otra negrita
tiene un color distinto. Y no solo podemos usar la clase
para la negrita. Por ejemplo, este trozo
de linea tambien utiliza la clase para su estilo particular.



Vamos ahora a estudiar el atributo ID de una etiqueta HTML en relacion a la de nicion
de estilos. Cualquier etiqueta HTML puede tener como parametro la etiqueta ID seguida
de un nombre, por ejemplo:

 ... 

ID=''NombreReferencia''

Este "NombreReferencia" debe ser unico en el documento HTML (es decir, no debe haber dos etiquetas con el mismo ID), puesto que nos servira para tratarla (si lo necesitamos)
desde JavaScript, y por esto no debe haber confusion con el nombre como referencia.
Para de nir un estilo mediante un ID, usaremos la siguiente notacion (en un bloque de
estilo o en la hoja externa):
#Nombre del ID

fpropiedad1:valor;...;propiedadN:valorg

http://rinconprog.metropoli2000.com

9

Curso de DHTML

Lola Cardenas Luque

es decir, escribiendo # seguido del nombre que le queramos dar al ID, y de niendo el
estilo como ya sabemos: pares propiedad:valor separados por punto y coma y encerrados
entre llaves. Podremos de nir todos los ID que queramos, pero cada ID solo debe ser
asociado a una unica etiqueta concreta de la siguiente forma:



...



As identi caremos de forma unvoca a esa etiqueta concreta, asignandole la de nicion
del estilo hecha en el bloque o en la hoja para ese ID, y ademas nos permitira tratarlo (por
ejemplo, cambiando algunas caractersticas del estilo de nido) desde JavaScript, que usara
ese identi cador para saber sobre quien ha de actuar, suponiendo que quisieramos hacerlo.
Por ultimo, en este captulo vamos a hablar de pseudoclases.
Hay ocasiones en las que HTML da a algunas etiquetas un estilo propio: por ejemplo, los enlaces aparecen por defecto de otro color y subrayados. Estos elementos son las
pseudoclases. Por ahora, solo estan de nidas para la etiqueta .
La forma de de nir un estilo para una pseudoclase es la siguiente:
etiqueta:pseudoclase

fpropiedad1:valor;...;propiedadN:valorg

y las pseudoclases de que disponemos son:






. Nos dice el estilo de un enlace que no ha sido visitado.
visited. Nos dice el estilo de un enlace que ha sido visitado.
active. Nos dice el estilo de un enlace que est
a siendo pulsado.
hover. Nos dice el estilo de un enlace sobre el que est
a pasando el raton.
link

Por ejemplo, en esta web todos los enlaces aparecen sin subrayar, esto lo consigo de niendo
los estilos:
A:link,A:visited,A:active

ftext-decoration:noneg

Las pseudoclases pueden usarse de forma conjunta con las clases, para aplicar ese estilo
solo en casos concretos, siguiendo la notacion:
A.NombreClase:pseudoclase

y tambien se pueden usar en funcion del contexto.

10

http://rinconprog.metropoli2000.com

Lola Cardenas Luque

Curso de DHTML

5 Propiedades de las hojas de estilo
Ahora que ya hemos visto como se de nen estilos en un documento HTML, as como todas
las posibilidades en cuanto a jerarquas, clases, ..., nos vamos a centrar en que es lo que
podemos poner en cada una de esas parejas propiedad:valor que decamos que de nen
un estilo.
Para facilitar su identi cacion, los vamos a dividir en las siguientes categoras:
1. Propiedades de formato de bloque
2. Propiedades de las fuentes
3. Propiedades de texto
4. Propiedades de color y fondo
5. Propiedades de clasi cacion (listas)
Hay propiedades en las que necesitaremos especi car alguna longitud (por ejemplo, en los
margenes). Para ello, usaremos esta notacion:
[-]NNtipo
; es el signo, y es opcional (es lo que quieren decir los corchetes, que se trata de algo
opcional, los corchetes no hay que ponerlos). NN es la cantidad, y tipo es la magnitud.
Esta ultima puede ser relativa o absoluta. Las magnitudes relativas son em (el alto de la
M mayuscula), ex (la mitad de la altura de la M mayuscula, que viene a ser aproximadamente la altura de la x minuscula), px (pxel). Las magnitudes absolutas son pt (puntos),
pc(picas), in (inches, es decir, pulgadas), mm (milmetros), cm (centmetros).
Hay otras propiedades en las que tendremos que especi car un color; para ello hay tres
posibilidades: escribiendolo de la misma forma que en HTML, con la notacion #RRGGBB,
siendo RR, GG, BB los valores en hexadecimal de las componentes roja, verde y azul del
color, usando algun nombre prede nido, o usando la funcion rgb(R,G,B), donde R, G, B
son los valores en decimal de las componentes roja, verde y azul del color.
A continuacion mostramos algunos de los nombres prede nidos para los colores:
aqua, black, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white,
yellow, blue
Un ultimo detalle a comentar antes de pasar al estudio de las propiedades y sus posibles
valores, es el siguiente: desde el punto de vista de las hojas de estilo, existen tres tipos de
elementos HTML: de bloque (que son los que hacen empezar lnea nueva, como 
, las
cabeceras, ...), incrustados en lnea (que no alteran la lnea en la que se encuentran,
como , , ...) y de lista (que son los elementos de una lista delimitados por 
).
http://rinconprog.metropoli2000.com

11

Curso de DHTML

Lola Cardenas Luque

Todo elemento de bloque se considera rodeado por una caja, con propiedades de margenes,
borde, padding y fondo. Ademas, la caja que lo rodea tiene un cierto ancho, y una cierta
alineacion con respecto al documento.

5.1 Propiedades de formato de bloque
Nombre

margin-left,
margin-right,
margin-top,
margin-bottom,
margin

Valores posibles

longitud, por- longitud,
centaje, auto
centaje

Valor por defecto
Aplica a
Heredado
Valor porcentual

0

0

todos
No
Relativo al ancho del padre

todos
todos
No
No
Relativo al an- ;
cho del padre

todos
No

Nombre
Valores posibles

border-color
none, color

width
longitud, porcentaje, auto

oat

clear

none

none

elementos a nivel todos
de bloque
No
No
Relativo al an- ;
cho del padre

todos

Valor por defec- none
to
Aplica a
todos
Heredado
No
Valor porcentual ;

padding-left,
padding-right,
padding-top,
paddingbottom, padding

auto

borderborder-style
left-width,
borderright-width,
bordertop-width,
borderbottomwidth,
border-width
por- longitud
none, solid,

double,
inset,
outset,
groove, ridge

0

none

left,
right,
none

;

none, left,
right, both

No

;

Aclaraciones sobre algunos valores:
Longitud: Debe ser un numero seguido de una unidad de medida, tal y como se comentaba
unos parrafos mas arriba. Por ejemplo, un valor posible es 12pt, o 0.2in. Porcentaje: Fija
el tama~no en valor porcentual respecto al padre.

12

http://rinconprog.metropoli2000.com

Lola Cardenas Luque

Curso de DHTML

5.2 Propiedades de las fuentes
Nombre
Valores posibles

font-size
font-family
font-weight
absoluto, relati- familia
bolder,
vo, porcentaje,
lighter,
longitud
100-900
Valor por defec- medium
user preferences normal
to
Aplica a
todos
todos
todos
Heredado
S
S
S
Valor porcentual Relativo al pa- ;
;
dre

font-style

normal, bold,
italic

normal
todos
S

;

Aclaraciones sobre algunos valores:
En font-size hemos dicho que puede tomar un valor absoluto; los posibles valores absolutos son: xx-large, x-large, large, medium, small, x-small, xx-small.
En font-family hemos dicho que el valor sera family; esto hace referencia a una lista
de nombres de familias de fuentes, separadas por comas. El navegador buscara por orden
cada una de las fuentes especi cadas, y usara la primera que encuentre instalada en el
sistema. Por ejemplo, podemos poner font-family:Verdana,Arial; esto signi cara que
el navegador buscara la fuente Verdana, y si no esta instalada en el ordenador de quien
ve la pagina, buscara la fuente Arial, por ser la siguiente en la lista. As continuaramos
si hubiera mas fuentes en la lista. Si no encuentra ninguna, usara la fuente por defecto.
Es importante saber que existen unas familias de fuentes genericas que estan en todos
los ordenadores, a n de ponerlas como ultima alternativa en la lista. Estas familias son:
serif, sans-serif, monospace, cursive, fantasy.
En font-weight tenamos las posibilidades bolder, lighter y 100-900. Las dos primeras son relativas al valor actual. 100-900 quiere decir decir que podemos especi car un
valor numerico entre 100 y 900. 100 sera el mas ligero y 900 el mas pesado.

http://rinconprog.metropoli2000.com

13

Curso de DHTML

Lola Cardenas Luque

5.3 Propiedades de texto
Nombre

line-height texttexttext-align
decoration transform
Valores po- numero,
none,
capitalize,left,
sibles
longitud, underline, uppercase, right,
porcenta- line-through,
lowercase center,
je, normal blink
justify,

text-indent

Valor por normal
defecto
Aplica a
elementos
a nivel de
bloque
Heredado S
Valor por- Relativo al
centual
tama~no de
la fuente

left

0

elementos
a nivel de
bloque
S

elementos
a nivel de
bloque
S
Relativo al
ancho del
elemento
padre

none

none

todos

todos

No

S

;

;

none

;

longitud,
porcentaje

Aclaraciones sobre algunos valores:
solo se aplica a elementos a nivel de bloque. Si se indica un numero o
porcentaje, esta distancia sera el producto de este numero por el tama~no de la fuente
del elemento actual. La diferencia esta en que, al indicar un numero, los elementos hijos
heredan el factor, mientras que, en otro caso, heredan el tama~no de la separacion.
line-height

5.4 Propiedades de color y fondo
Nombre

color

Valores posibles

color

backgroundcolor
color

Valor por defecto
Aplica a
Heredado
Valor porcentual

black

ninguno

backgroundimage
URL
entre
parentesis
ninguno

todos
S

todos
No

todos
No

14

;

;

;

http://rinconprog.metropoli2000.com

Curso de DHTML

Lola Cardenas Luque

5.5 Propiedades de clasi cacion (listas)
Nombre
Valores posibles

display

block,
inline,
list-item,
none

Valor por defec- segun HTML
to
Aplica a
todos
Heredado
No
Valor porcentual ;

list-style-type

white-space

disc

segun HTML

disc, circle,
square,
decimal,
upper-roman,
lower-roman,
upper-alpha,
lower-alpha

normal, pre,
none

elementos cuya elementos a nivel
propiedad dis- de bloque
play es list-item
S
S

;
Aclaraciones sobre algunos valores:

;

En display se indica si un elemento es de nivel de bloque (block), incrustado (inline) o
de nivel de lista (list-item). Si se ajusta el valor a none, el elemento no sera mostrado, lo
que se extiende a sus "hijos" y la caja que lo rodea. Los elementos de bloque no responden
si se les ajusta como inline.
Son muchas las posibilidades que tenemos para variar propiedades, pero al nal terminaremos aprendiendonos las seis o siete que mas usemos. Es un interesante ejercicio
practicar aplicando los posibles estilos en trozos del documento para ir adquiriendo mas
practica. Aprendida la tecnica de las hojas de estilo, en el siguiente bloque de captulos
nos centraremos en los layers.

http://rinconprog.metropoli2000.com

15

Curso de DHTML

Lola Cardenas Luque

6 Layers: Creacion
Como ya se comento en la introduccion a DHTML, una de las motivaciones por las que
surgio esta nueva especi cacion fue para conseguir que los dise~nadores de webs tuvieran
el mayor control posible sobre su trabajo, evitando los "trucos" habituales de insertar
espacios, tablas con bordes invisibles o imagenes GIF de un pxel que se ajustan al tama~no
necesitado.
En la primera parte del curso se han estudiado las formas de de nir estilos que controlan
por completo la presentacion de los distintos elementos HTML, pero aun queda un problema
por resolver, que estudiamos en este bloque: >como ponemos la informacion exactamente
en el sitio que queremos?
Es para este n para lo que existen las capas.
Una capa es un bloque HTML (un parrafo, varias lneas, ...) sobre el que se de ne un
estilo especial que nos indica la posicion que va a tomar en el documento y al que se le
pueden dar unas caractersticas propias que nos diran si es o no visible, si esta superpuesto
a otros elementos, ...
Para crear una capa existen dos posibilidades, mediante un estilo CSSP (CSS Positioning; posicionamiento mediante hojas de estilo) o mediante la etiqueta  ...
. El inconveniente de este ultimo metodo es que se trata de una solucion propietaria que Netscape adopto a partir de la version 4 de su navegador, y por tanto no funciona
con Explorer, mientras que si usamos CSSP el resultado obtenido podra verse en cualquier
navegador con soporte para CSSP.
Para de nir un layer mediante CSSP usaremos la propiedad position del parametro
STYLE siguiendo la sintaxis vista en los captulos de CSS:



>

propiedadN:valor''

donde valor, para position, puede ser:




: Indica que su posicion sera absoluta respecto de un origen, la esquina
superior izquierda de la capa contenedora.
absolute

: Su posicionamiento sigue el ujo del HTML, aunque podremos darle unas
coordenadas para situarlo de forma relativa a este ujo.
relative

La propiedad position puede aplicarse a cualquier etiqueta HTML, aunque lo mas normal
es usarla en las siguientes: 
, , 
.

16

http://rinconprog.metropoli2000.com

Lola Cardenas Luque

Curso de DHTML

6.1 Diferencias entre ambos tipos de posicionamiento
6.1.1 Posicionamiento absoluto
Nos permite colocar un elemento de forma absoluta respecto a unas coordenadas jas (las
de la capa contenedora, que puede ser el navegador u otro elemento que lo contenga). Al
estar situado de forma absoluta, podra solaparse con otros elementos. Veamos un ejemplo:








Aqui tenemos un texto dentro de una capa, al que le ha
sucedido una pequena desgracia: otro texto, que
proviene de una capa desalmada, se le ha superpuesto,
con lo que no se le puede leer completamente.

Capa malvada





6.1.2 Posicionamiento relativo
Coloca un elemento siguiendo el ujo natural del HTML. Esto nos permite poner un elemento respecto de la posicion de elemento anterior en el ujo del HTML: las coordenadas
que le demos lo situaran tomando como origen las coordenadas del elemento anterior. Por
ejemplo:
http://rinconprog.metropoli2000.com

17

Curso de DHTML

Lola Cardenas Luque








Esta frase tiene una
palabra
mas baja que las demas.



Es especialmente importante asignar nombres a las capas mediante el parametro ID
de las etiquetas (cosa que yo no estoy haciendo en los ejemplos O:-) ), pues estas tienen
bastantes propiedades que pueden modi carse desde JavaScript y as conseguir efectos
interesantes. Para poder conseguir estos efectos, JavaScript debe saber a que capa nos
estamos re riendo, y para ello lo mas comodo es asignarles un nombre va ID. Ademas,
podemos hacer, al igual que vimos en el bloque de CSS, lo siguiente: de nir un estilo con
ID que incluya position, y luego asignarselo a alguna etiqueta concreta. Esto le asignara el
ID y el estilo que la convierte en capa.
Y eso es todo en cuanto a de nicion. En el siguiente captulo estudiamos que caractersticas
podemos a~nadir a nuestras capas.

18

http://rinconprog.metropoli2000.com

Lola Cardenas Luque

Curso de DHTML

7 Propiedades de las capas
Las capas a~naden unas propiedades adicionales que se deben especi car en el parametro
STYLE de las etiquetas. Las primeras propiedades que vemos especi can la posicion y el
tama~no de las capas:






: Separacion izquierda de la capa con respecto a su origen.
top: Separaci
on superior de la capa con respecto a su origen.
width: Especi camos el ancho de la capa.
height: Especi camos la altura de la capa.
left

Como valor podemos poner medidas absolutas o porcentajes.
Las propiedades que vamos a estudiar ahora tienen que ver con la siguiente cuestion:
>que sucede si el tama~no del contenido de la capa excede el tama~no del contenedor? Para
dar una respuesta a este problema, CSSP nos da la propiedad 'clip'.
Por defecto, si no la ponemos, a pesar de haber dado unos lmites a la capa en cuanto
a ancho y alto (con width y height), se mostrara el contenido completo del layer, como
podemos ver en este ejemplo:








Aqui tenemos una capa suficientemente estrecha como
para observar que sucede si no ponemos nada al
respecto de 'clip' o no 'clip'. En el siguiente
ejemplo pondremos casi el mismo texto pero con 'clip'
y veremos la diferencia.

http://rinconprog.metropoli2000.com

19

Curso de DHTML

Lola Cardenas Luque





Ahora veamos que podemos hacer con clip: esta propiedad nos permite jar los lmites
del area de visibilidad del contenido de la capa. Todo lo que quede fuera de esta area
se vera cortado. Esta area de visibilidad se ja dando valores separados por comas que
especi caran, en este orden, el lmite superior, el lmite derecho, el lmite inferior y el
lmite izquierdo, de la siguiente forma:
clip:rect(superior,derecho,inferior,izquierdo)

Por ejemplo:








Aqui tenemos una capa suficientemente estrecha como
para observar que sucede si ponemos algo al
respecto de 'clip'. Es la continuacion
del ejemplo anterior, casi el mismo texto pero
ahora con 'clip'.




Vamos a nalizar el captulo con dos propiedades que nos van a permitir, por una parte,
apilar las capas en un orden determinado, de forma que sea A la que este sobre B si eso es

20

http://rinconprog.metropoli2000.com

Lola Cardenas Luque

Curso de DHTML

lo que nos interesa, y por otra parte la propiedad que nos va a dar la posibilidad de hacer
invisible o visible una cierta capa segun nos convenga.
En un documento, podemos poner tantas capas como necesitemos. Estas capas se iran
apilando de acuerdo a un cierto orden, que es recogido en la propiedad 'z-index'. Esta
propiedad toma como valor un entero que puede ser 0,1,2,..., y que nos indica que capa
esta sobre que otra capa, de acuerdo a lo siguiente: la capa 0 es la que esta mas abajo de
todas, estando todas las demas sobre ella. La capa que va a continuacion sera la 1, que
tiene sobre ella a las capas con z-index de 2 en adelante, luego esta la capa con z-index 2,
que tiene sobre ella a las capas con z-index de 3 en adelante... y as sucesivamente.
Podemos asignar este valor a la hora de crear la capa, o podemos no poner nada. Si
no ponemos nada para z-index, es el propio navegador quien va asignando este orden,
empezando con el 0, despues el 1, el 2, etc.
Por otro lado, tenemos la propiedad 'visible', que nos va a decir si la capa es visible o no.
Puede tomar los siguientes valores:




: La capa es visible.
hidden: La capa es invisible.
visible

Finalizaremos en el siguiente captulo el tema de las capas, tratando la etiqueta 
que incorporo Netscape, a pesar de tratarse de una solucion propietaria que solo funciona
en estos navegadores a partir de su version 4.

http://rinconprog.metropoli2000.com

21

Curso de DHTML

Lola Cardenas Luque

8 La etiqueta  de Netscape
Netscape propuso, con la aparicion de la version 4 de su navegador, el uso de la etiqueta
pareada  ...  para implementar el concepto de capa, en lugar de
de nir un estilo que tuviera la propiedad position para que ese elemento fuese una capa.
Todo lo que este encerrado entre esa etiqueta sera la capa, y tambien proveyo de una
 ... , con lo que este navegador ignorara todo lo que hubiera
encerrado entre esas etiquetas, pensadas para ofrecer una alternativa a los navegadores que
no soporten la etiqueta .
La forma de de nir las propiedades de la capa (propiedades que ya estudiamos en el
captulo anterior) es la forma usual de a~nadir parametros dentro de una etiqueta HTML:
PARAMETRO 1=VALOR ... PARAMETRO N=VALOR, por ejemplo:

Aqui dentro va lo que quiera que lleve la capa


Tambien podemos, como con cualquier otra etiqueta HTML, asignarle un estilo mediante CLASS. Por ejemplo, si tenemos de nido en alguna parte un estilo (una hoja externa,
un bloque de estilos) cuyo nombre es 'EstiloNumberOne', podremos aplicarlo a la capa
de nida con LAYER simplemente a~nadiendo el parametro 'CLASS="EstiloNumberOne"',
es decir:

Aqui dentro va (de nuevo) lo que quiera que lleve la capa


Sin embargo, las capas de nidas con esta etiqueta son equivalentes a las que de namos
con CSSP usando 'position:absolute', >como de nimos una capa con posicionamiento relativo? La solucion que ha adoptado Netscape al respecto es otra etiqueta pareada: 
... . Todo lo que pongamos dentro de esa etiqueta ser
a una capa, pero cuyo
posicionamiento es relativo.
>Como especi camos el area de visibilidad que de namos con 'clip', usando CSSP?
Con el parametro CLIP, dentro de la etiqueta, y dandole los valores, entre comillas y
separados por comas, del lmite superior, lmite izquierdo, lmite inferior y lmite derecho.
Por ejemplo:

Aqui dentro va lo que quiera que lleve la capa


22

http://rinconprog.metropoli2000.com

Curso de DHTML

Lola Cardenas Luque

Equivaldra a 'clip:rect(0,150,0,100)' del CSSP.
Para especi car el valor de z-index, tenemos un parametro Z-INDEX. Ademas, con esta
etiqueta podemos decirle, gracias a otros dos parametros extra, que capa tiene por encima
y que capa tiene por debajo. Esto lo hacemos con ABOVE (sobre) y BELOW (bajo), por
ejemplo:



LEFT="50" ABOVE="OtraCapa">
que lleve la capa
LEFT="50">
la anterior

Las capas que proporciona Netscape tienen un parametro adicional que hace su uso muy
interesante y que, por desgracia, no se ha adoptado mas que en este navegador; se trata del
parametro SRC, en el que podemos especi car el nombre de un chero con el contenido.
Esto sera muy util en paginas escritas en varios idiomas, en paginas con noticias renovables
con una misma estructura... porque as, unicamente habra que cambiar el chero a incluir
en SRC, y una vez dise~nada la estructura no habra que meterse en el documento a buscar
donde hacer los cambios, unicamente en esos peque~nos cheros externos que podramos
incluir posteriormente.
Finalizamos el captulo con un ejemplo que muestra como de nir capas con Netscape, y
como esta de nicion hace luego posible interactuar facilmente con JavaScript para cambiar
las propiedades de la capa. En este ejemplo, desplazamos la capa. Solo podran verlo los
que usen Netscape 4.*. Lo siento por los demas usuarios :-(









Aqui tenemos una capa definida segun Netscape. Pulsa los
botones para moverla.









24

http://rinconprog.metropoli2000.com



File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.2
Linearized                      : Yes
Create Date                     : 2001:02:14 23:54:54
Producer                        : Acrobat Distiller 4.0 for Windows
Modify Date                     : 2001:02:14 23:55:03+01:00
Page Count                      : 30