PDF de programación - Curso de DHTML: CSS y Layers

Curso de DHTML: CSS y Layers

Lola Cardenas Luque
http://rinconprog.metropoli.com
[email protected]
Ultima actualizacion:  de febrero de 


Lola Cardenas Luque

Curso de DHTML

Copyright c .
, por Lola Cardenas Luque

Con este curso se pretende completar los conocimientos de HTML, aprendiendo co-
sas 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.metropoli.com

iii

Lola Cardenas Luque

Curso de DHTML

Indice General




Introduccion

 Denicion de los estilos

 Herencia de estilos



Jerarqua de denicion de estilos. Clases. Pseudoclases

 Propiedades de las hojas de estilo

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

 Layers: Creacion

.
Diferencias entre ambos tipos de posicionamiento . . . . . . . . . . . . . .
.
.
Posicionamiento absoluto . . . . . . . . . . . . . . . . . . . . . . . .
.
. Posicionamiento relativo . . . . . . . . . . . . . . . . . . . . . . . .

 Propiedades de las capas

 La etiqueta <LAYER> de Netscape






































http://rinconprog.metropoli.com

v

Lola Cardenas Luque

Curso de DHTML




Introduccion

DHTML son las siglas de Dynamic HyperText Markup Language (conocido como HTML
Dinamico); se trata de una nueva especicacion 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 modicacion
posible que la dotara de la interactividad que el gran publico peda. Y llego DHTML

La especicacion 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 denicion de estilos separados de la
estructura del documento.

El estilo logico se reere 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 modicados 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 articios 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.metropoli.com




Curso de DHTML

Lola Cardenas Luque

 Denicion de los estilos

CSS son las siglas de "Cascade StyleSheet". Se trata de una especicacion sobre los estilos
fsicos aplicables a un documento HTML, y trata de dar la separacion denitiva 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

pixel a las que se les da el tamaño deseado para hacer espacios en blanco, ...

Tenemos varias posibilidades para denir un estilo: especicarlo directamente en la eti-
queta en la que queremos usarlo, denirlo aparte y aplicarlo en las etiquetas que queramos,
o denir 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 STYLE=’’propiedad
:valor;...;propiedadN:valor’’> ... </etiqueta>

Etiqueta es la etiqueta de HTML en la que queremos dar una apariencia concreta (<P>,
<B>, <I>, ...). STYLE es el parametro que indica que vamos a aplicar el estilo denido
a continuacion a la etiqueta en la que se encuentra. La denicion del estilo son pares
propiedad:valor separados por punto y coma. Propiedad sera la caracterstica de la
etiqueta que queramos modicar (el color, el tamaño de la fuente, el tipo de letra, ...) y
valor es el valor que queremos darle (color negro,  puntos de tamaño de letra, ...).

Por ejemplo, si tenemos un texto en negrita y queremos que salga en color rojo, haremos:

La negrita que vemos <B STYLE="font-size:
pt;color:red">es
mas grande y esta en rojo</B>

Sin embargo, lo que suele ocurrir es que queremos denir 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, deniremos estilos globales por medio de la etiqueta <STYLE> ... <STYLE>
como sigue:

<STYLE TYPE="text/css">
<!--

Etiqueta
,...,EtiquetaN : {propiedad
:valor;...;propiedadM:valor}
...
Etiquetas
,...,EtiquetasR : {propiedad
:valor;...;propiedadS:valor}
Otros: {propiedad
:valor;...;propiedadT:valor}

//-->
</STYLE>



http://rinconprog.metropoli.com

Lola Cardenas Luque

Curso de DHTML

Podemos aplicar el mismo estilo a varias etiquetas, escribiendolas separadas por co-
mas y, a continuacion, la especicacion del estilo segun pares propiedad:valor separados
por punto y coma y encerrados entre llaves fg. En un bloque de estilo global podremos
denir cuantos estilos queramos. Aparece un Otros; se reere a las llamadas clases, que
nos permitiran que una etiqueta concreta tenga una apariencia distinta a la denida como
global.

Es recomendable que denamos estos estilos globales dentro de la cabecera del docu-
mento (entre <HEAD> ... </HEAD>) para asegurarnos de que se aplicaran a todas las
etiquetas para las que se haya denido un estilo. Veamos un ejemplo:

<!DOCTYPE HTML PUBLIC "-//WC//DTD HTML .
Transitional//EN"

"http://www.w.org/TR/html/loose.dtd">

<HTML>
<HEAD>
<TITLE> Ejemplo con bloque de estilo </TITLE>
<STYLE TYPE="text/css">
<!--
BODY {font-family:Verdana,sans-serif;font-size:x-small;

margin-left:.in; margin-right:.in}

H {font-family:Verdana,sans-serif;font-size:
pt;color:red}

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:#C}

PRE, TT, CODE {font-family:Courier New,Courier;

font-size: pt;color:maroon}

//-->
</STYLE>
</HEAD>

<BODY BGCOLOR=white>

<H>Prueba de definicion de estilos en un bloque aparte</H>

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 <B>negrita</B> tiene un tamano y un color fijos,
los trozos de texto en teletipo como <TT>este fragmento</TT>
tambien tienen definida su fuente, tamano y color, y vamos a ver como
quedan las tablas, para finalizar el ejemplo: <P>

<CENTER>

http://rinconprog.metropoli.com



Curso de DHTML

Lola Cardenas Luque

<TABLE BORDER=
CELLSPACING= CELLPADDING=>

<TR> <TH>Cabecera
</TH> <TH>Cabecera </TH> </TR>
<TR> <TD>Celda (
,
)</TD> <TD>Celda (
,