Curso de diseo de Pginas

Web

Manual de Hojas de Estilo

INTRODUCCIN A LAS HOJAS DE ESTILO.

HTML adolece de los lmites propios de un sistema de marcado ideado para objetivos muy
diferentes de los que actualmente persigue el diseo web. Colocar una imagen, crear una
banda lateral, justificar el texto en HTML se convierten en problemas cuya solucin depende
exclusivamente de instrumentos nacidos con otro fin (las tablas, por ejemplo, en el 90% de los
casos se usan para colocar elementos en la pgina, en vez de servir para ordenar los datos).

El problema, en trminos tcnicos, est relacionado con la clsica separacin entre estilo,
contenidos y estructura. El HTML "tradicional" no satisface esta condicin, sino que, por el
contrario, aumenta esta confusin.

Pero qu significa separar el estilo de los contenidos? Tomemos un sitio web de media
complejidad, con un nmero de pginas HTML igual a 100. Pongamos que el tipo adoptado
para la exposicin de los temas sea un "arial" cursivo. Con los instrumentos clsicos de HTML
el cdigo para obtener este resultado es:

<FONT FACE="ARIAL"><I>Texto de la pgina</I></FONT>

repetido en todas y cada una de las 100 pginas del sitio, en el cierre y apertura del texto para
formatear. Pero qu sucede cuando queremos modificar el tipo de carcter en todas las
pginas? No hay ms solucin que abrir las 100 pginas y modificarlas sustituyendo el nombre
"arial" con el de la nueva fuente elegida. Un webmster de tipo medio podra emplear slo una
decena de minutos que se convertiran en horas si el sitio fuera de grandes dimensiones. Pues
bien, est prdida de tiempo es consecuencia directa de la confusin entre estilo y contenido,
all donde el primero (la marca FONT) no est separado del segundo (el texto de la pgina).
Se entiende que la solucin de este problema reside en la separacin de los dos elementos
citados, lo que en la prctica se traduce en la adopcin de las Cascading Style Sheets. De
ahora en adelante usaremos la abreviatura CSS para denominar estas "hojas de estilo en
cascada", que a pesar de haberse introducido hace tiempo en el web , slo en los ltimos
tiempos han conocido gran difusin.

Con la expresin "en cascada" (cascading) se hace referencia a una de las caractersticas
principales de esta tecnologa, por la que es posible incorporar en el documento distintas hojas
de estilo, cada una de las cuales, segn una serie de reglas jerrquicas, prevalece sobre las
otras.

Las CSS fueron introducidas por Microsoft a partir de la tercera versin de Internet Explorer, y
son soportadas parcialmente por Netscape slo desde la cuarta versin del homnimo
navegador. Quien accede con un navegador obsoleto a un documento formateado con CSS, se
encontrar ante una pgina gestionada por las opciones por defecto del navegador (el fondo,
por ejemplo, ser gris; el tipo de texto ser "times new romans", etc).
Las CSS han sido oficialmente reconocidas y normalizadas por el W3C (consorcio internacional
para el desarrollo del web) en las recomendaciones "CSS1" antes, y "CSS2" despus.

HOJAS DE ESTILO EN LNEA.

Las hojas de estilo en lnea estn muy cercanas, desde un punto de vista conceptual, a las
reglas del HTML clsico ya que actan sobre instancias individuales dentro de la pgina. Para
simplificar el concepto podemos decir que las hojas de estilo en lnea actan sobre partes
individuales del documento, sin influir en el resto de la pgina. Si, por ejemplo, queremos que
slo una parte de un documento tenga un determinado carcter o un determinado formato
usaremos campos estndar de HTML, tales como <SPAN> o <DIV>, para asignar ese estilo. A
continuacin tienes un ejemplo:
<DIV STYLE="font-size:18px; font-family:arial; color:red">
Este texto tiene color azul
</DIV>
As hemos modificado el estilo tan slo del texto comprendido entre <DIV> y no de todo el
documento. En particular, hemos indicado como dimensiones del carcter (font-size) 18 pxel;
como tipo de carcter (font-family) el clsico arial y como color (color) el rojo. El resultado que
se obtiene es el siguiente:

Este texto tiene color rojo

La marca usada para obtener este efecto es <DIV> o en alternativa <SPAN>. El uso de una u
otra queda a la eleccin del diseador, si bien la primera marca se aconseja para largos
bloques de texto, y <SPAN> para frases breves como la del ejemplo.
Un sistema de estilo as diseado funciona pero no responde a las peculiaridades tpicas de las
CSS. Asignar estilos a cada marcado individual no responde, de hecho, a los criterios de
separacin de estilo y contenidos que los CSS representan. Las hojas de estilo en lnea en un
cierto sentido niegan la naturaleza misma de estos instrumentos nacidos para asignar estilos a
pginas enteras o incluso a grupos de documentos. Nuestro consejo es utilizar las hojas de
estilo en lnea exclusivamente para pequeos y circunscritos retoques y no para la estructura
general de un Website.

HOJAS DE ESTILO INCORPORADAS.

Antes de pasar a ver las hojas de estilo incorporadas, es necesario subrayar que la sintaxis que
rige estos atributos (y las sucesivas "css externas") es diversa respecto del HTML clsico:
los atributos se introducen entre llaves { }
en lugar del signo = se usan los dos puntos :
los argumentos consecutivos se separan mediante el signo ; en lugar del signo ,
los atributos compuestos por ms de un trmino se separan mediante un guin cuando un atributo se considera propiedad de un objeto los guiones se eliminan y las
iniciales de los trminos se vuelven maysculas (por ejemplo: font-style se vuelve FontStyle)
Sentadas estas premisas, pasemos a tratar pormenorizadamente las hojas de estilo
incorporadas. En sntesis, se trata de estilos a caballo entre las ya examinadas CSS en lnea y
las sucesivas CSS externas. La peculiaridad fundamental de estos atributos de estilo es que se
asignan a todo el documento y no a partes individuales como en el HTML clsico. Se trata, por
tanto, de un conjunto de definiciones de estilo encerradas entre marcas <STYLE> y colocadas
entre las marcas <HEAD> del documento y el <BODY> del mismo.
Un ejemplo de hoja de estilo incorporada sera:
<HTML>
<HEAD>
<style type="text/css">
H1 { font-size:17px; font-family:verdana; color:green }
H2 { font-size:18px; font-family:arial; color:red }
</style>
</HEAD>
<BODY>
<H1>Este texto es de color verde, impostado en verdana de 17 pxel</H1>
<H2>Este texto es de color rosso, impostado en arial de 18 pxel</H2>
</BODY>
</HTML>
En este ejemplo hemos aplicado una hoja de estilo incorporada entre las marcas <HEAD> del
documento, estableciendo dos diversos tipos de carcter:
verdana verde de 17 pxel para el primer identificado por el marcador <H1>
arial rojo de 18 pxel para el segundo identificado por el marcador <H2>

Los marcadores H1 e Hx en general se pueden sustituir con otros marcadores de prrafo tales
como <P>. Impostada la CSS dentro del documento, los mismos estilos se asignan
inscribiendo partes de texto entre los marcadores <H1></H1> y <H2></H2>.
De este modo, cambiando los valores de los atributos individuales impostados en la hoja
(aumentando el tamao o modificando el color, por ejemplo), el texto del documento marcado
por <H1> e <H2> se actualiza automticamente con el nuevo estilo.

El atributo TYPE de la marca <STYLE> define el formato en lenguaje MIME de la hoja de estilo.
Dicho de otro modo, este atributo indica el tipo de hoja de estilo soportada o, en otro caso,
ignorada. Ms Internet Explorer soporta las CSS slo en formato MIME, pero existen las CSS en
formato text/jass, es decir accesibles en javascript.

Si se omite el atributo TYPE el navegador lo identifica por defecto con text/css.

Tambin Netscape communicator soporta este atributo.

Respecto a las hojas de estilo en lnea, las CSS incorporadas permiten el control de todo
documento, aunque no bastan para proporcionar el soporte tcnico necesario a sitios
completos. Si, por ejemplo, en el texto del documento se ha usado un cierto tipo de fuente que,
de repente, se decide modificar, se deber intervenir en todos los documentos del sito para que
las modificaciones abarquen todo el sitio.

HOJAS DE ESTILO EXTERNAS.

Las hojas de estilo externas (o conectadas) son las que mejor responden a las exigencias de
los elaboradores y, sobre todo, las que interpretan mejor la filosofa de las hojas de estilo. Para
comprender plenamente las peculiaridades de las CSS externas, pnsemos en un sitio de
grandes dimensiones con 1000 pginas HTML y un cierto tipo de formatacin del texto. De
repente, exigencias estticas imponen el cambio del color de fondo, el tipo de carcter y la
alineacin del texto. Por lo que hemos visto ahora, tenemos tres casos:
el sitio est construido en HTML clsico, por lo que deberemos intervenir en cada uno de los
marcados de cada una de las 1000 pginas;
el sitio est construido adoptando hojas de estilo en lnea, por lo que tambin en este caso
deberemos intervenir en cada marcado de cada una de las 1000 pginas;
el sitio est construido con las hojas de estilo incorporadas, por lo que se deber siempre
modificar el encabezamiento de estilo de 1000 documentos, si bien no se deber intervenir
individualmente en los atributos de la pgina que permanecern, as, inalterados.
Aunque el ltimo procedimiento limita en gran medida la mole de trabajo de actualizacin
repecto a los dos primeros, se trata de intervenir, en cualquier caso, en un elevado nmero de
documentos.
La solucin de este problema consiste en hacer que los estilos de cada marcador se recojan en
un documento independiente de las restantes pginas, las cuales simplemente los invocarn
con una sencilla lnea de cdigo. De esta manera, las modificaciones del archivo "centralizado"
se extendern automticamente a todos los documentos que lo invocan. En este hecho obvio
se basan las hojas de estilo externas que aqu examinamos.

Crear una hoja de estilo externa e invocarla dentro de las pginas HTML es un procedimiento
sencillo que consta de 5 fases:
abre una pgina sin ningn tipo de encabezamiento HTML con el bloc de notas de Win95-98
o con tu editor HTML e incluye dentro de ella el siguiente cdigo:

H1 { font-size:17px; font-family:verdana; color:green }

H2 { font-size:18px; font-family:arial; color:red }
Si ests usando el bloc de notas de Win95-98 va a ARCHIVO / GUARDA COMO en la
primera voz de men arriba a la izquierda. Se abrir una ventana con dos campos para
rellenar: nombre archivo y guardar como. En el primer campo, introduce tu nombre style.css y
en el segundo imposta como "todos los documentos". Para acabar, pulsa el botn "guardar".
Una vez creado el archivo style.css (.css es la extensin asignada a las hojas de estilo
externas, mientras que el nombre "style" se puede cambiar por el que queramos, cpialo en la
carpeta principal de tu sitio web.
Abre los documentos HTML de tu sitio e introduce, entre las marcas <HEAD> el siguiente
cdigo:
<link rel=stylesheet href="style.css" type="text/css">

La marca link identifica un archivo externo al documento HTML con el que, en cualquier caso,
tiene una relacin directa. El atributo rel indica que el archivo conectado es una hoja de estilo
(stylesheet). href invoca el recorrido del archivo .css externo (en este caso el archivo

entendemos que est depositado en la misma carpeta en la que se halla el documento HTML.
De no ser as, debera insertarse el recorrido del archivo, p. ej.: href="css/style.css"). El atributo
type tiene la funcin antes vista para las hojas de estilo incorporadas.
Dentro del documento, identifica los estilos que deben asignarse usando las marcas <H1> y
<H2>. Por ejemplo, <H1> podra establecer los ttulos y <H2> el texto de las pginas de esta
manera:
<H1>Ttulo de la pgina</H1>

<H2>Texto de la pgina de prueba, Texto de la pgina de prueba, Texto de la pgina de

prueba, </H2>

El resultado de este ejemplo es el establecimiento en todas las pginas de tu sitio de un estilo

comn para las marcas <H1> e <H2>, de manera que con slo modificar el archivo externo
todos los documentos HTML enlazados se actualizarn como establecido. En el ejemplo del
sitio de 1000 pginas, si debiramos modificar tamao y estilo de los ttulos de pgina, bastara
tan slo con intervenir en la marca <H1> del archivo externo style.css.

Para acabar, creemos necesario subrayar la enorme utilidad de las hojas de estilo externas que
aconsejamos usar los ms posible. Una impostacin inicial ms compleja que los otros estilos
se ve ampliamente compensada, sobre todo a largo plazo y en los sitios de grandes
dimensiones, adems de consentir un indito control de pgina y estilo.

ATRIBUTOS DE ESTILO PARA EL TEXTO.

No es casualidad que en los ejemplos que acompaan este artculo hayamos utilizado el
atributo BODY. Las hojas de estilo, de hecho, reconocen este atributo como valor por defecto
de todo el documento. Es un poco lo que sucede con la marca <BODY> en HTML clsico:
cuanto
se
inserta
dentro
BODY
se
asignar
a
todo
el
documento.
En los ejemplos hemos usado hojas de estilo incorporadas, las cuales pueden recopilarse sin
problemas en un archivo externo segn lo visto en el captulo "hojas de estilo externas".

Atributo font-family
Elenca la familio de fuentes para el estilo de una pgina o partes de sta. Consideremos, por
ejemplo, que queremos aplicar una fuente tipo "arial" a todo el documento. Lo que sigue es el
modo correcto de impostar el estilo:

<STYLE>
BODY { font-family:arial }
</STYLE>

Es posible establecer distintos rdenes de preferencia de modo que ante la falta de una fuente
el navegador aplique la sucesiva. Para ello, las familias de fuentes deben estar separadas por
comas.
Por nombre de familia entendemos uno de los caracteres como Arial, courier new, times new
roman, impact y tanto otros (para las fuentes, ver FONT.it). Las fuentes cuyos nombres constan
de ms de un trmino van entre comillas:

<STYLE>
BODY { font-family:arial, "courier new", impact }
</STYLE>

Una ltima alternativa es la de servirse de un nombre genrico de fuente. Con este trmino
denominamos grupos de fuentes que, aun sin ser idnticas, poseen poseen caractersticas que
las unen. De esta manera, el navegador buscar la fuente disponible en el ordenador del
navegante, segn las indicaciones del nombre genrico:

<STYLE>
BODY { font-family:serif }
</STYLE>

Las hojas de estilo reconocen 5 categoras de fuentes genricas:

Serif El trmino se traduce por "gracias" y es aconsejable para largas secciones de

texto. Dos casos tpicos de fuente serif son times new roman o garamond
<STYLE>
BODY { font-family:serif }
</STYLE>

Sans Serif Sin gracias. Tpicos los tipos arial y helvetica

<STYLE>
BODY { font-family:"sans serif" }
</STYLE>

Cursivas Tipos en cursiva que imitan la caligrafa.

<STYLE>
BODY { font-family:cursive }
</STYLE>

Fantasy Caracteres decorativos como, por ejemplo, western

<STYLE>
BODY { font-family:fantasy}
</STYLE>

Monospace Estas fuentes tienen como caracterstica la de ocupar un espacio idntico.

Los otros caracteres, sin embargo, ocupan un espacio por letra proporcional a la
misma. Una clsica fuente es courier.
<STYLE>
BODY { font-family:monospace }
</STYLE>

Atributo font-size
Este atributo establece las dimensiones del texto. Mientras HTML estndar prev tan slo 7
niveles predefinidos para la dimensin del texto (de font size=1 a font size=7), las hojas de
estilo permiten un control mucho ms preciso y elstico, sin limitaciones.
Es posible impostar el estilo segn 5 unidades de medida:

Puntos: esta unidad de medida se abrevia pt. Cada punto representa 1/72 de pulgada.
Los puntos se refieren exclusivamente al espacio vertical ocupado en pantalla,
mientras que la anchura aumenta en proporcin al aumento de la altura.
<STYLE>
BODY { font-size:12pt }
</STYLE>

Pxel: se trata de puntos presentes en la pantalla, que varan segn la resolucin

consentida por el monitor e impostada por el usuario. Se hace referencia a los pxel en
muchos ejemplos Javascript y en todas las resoluciones vdeo aconsejadas
(generalmente 800x600)
<STYLE>
BODY { font-size:12px }
</STYLE>

Pulgadas: clsica unidad anglosajona de medida.

<STYLE>
BODY { font-size:1in }
</STYLE>

Centmetros: unidad de medida comn a muchos pases occidentales pero poco

usada en el campo de la grfica web.

<STYLE>
BODY { font-size:3cm }
</STYLE>

Porcentaje: unidad de medida variable sin valores predeterminados. El valor

porcentual se refiere al tamao por defecto impostado en el navegador. As, en un
navegador que visualiza por defecto fuentes de 14 pxel, un valor del 200%
corresponde a 28 pxel. Dicha medida puede variar de usuario a usuario.
<STYLE>
BODY { font-size:200% }
</STYLE>
La medicin porcentual forma parte de un sistema de proporciones relativas, es decir
depende de la medida actual del navegador. Existen otros valores que pueden sustituir
al de porcentaje antes citado.
<STYLE>
BODY { font-size:smaller }
</STYLE>
define la fuente de tamao inmediatamente inferior al establecido por defecto.
<STYLE>
BODY { font-size:larger }
</STYLE>
el opuesto del anterior: define la fuente de tamao inmediatamente superior al
establecido por defecto.
<STYLE>
BODY { font-size:2em }
</STYLE>
La medida de referencia es siempre la adoptada por defecto, es decir lo que cambia es
el valor de referencia establecido en proporcin 1:x.

Tambin podemos especificar valores absolutos (equivalentes a 1-7) mediante:

xx-small, x-small, small, medium, large, x-large, xx-large.

Atributo font-style
Este atributo indica el estilo para la fuente. Es posible impostar distintos valores:
<STYLE>
BODY { font-style:normal }
</STYLE>
Normalno visualiza ningn estilo particular y toma el establecido por defecto por el navegador.
Es posible usar "roman" en lugar de "normal"
<STYLE>
BODY { font-style:italic }
</STYLE>
El tpico texto en cursiva que tan bien conocemos por el HTML clsico y por todos los editores
de texto.
<STYLE>

10

BODY { font-size:oblique }
</STYLE>
Este atributo funciona aparentemente como "italic", pero se diferencia por inclinar hacia la
derecha la fuente normal y no precisa cargar otro carcter como en el caso de italic.

Atributo font-variant
Este atributo es similar a font-size, pero se diferencia por asignar un estilo todo en maysculas.
Si no est disponible en la mquina cliente la versin en maysculas grandes de las fuentes, el
estilo usar las maysculas adaptando las medidas. Los valores que hay que asignar son
"normal" y "small-caps"
<STYLE>
BODY { font-variant: small-caps }
</STYLE>

Atributo text-decoration
Este atributo permite adornar el texto con subrayados y otros efectos. Puede asumir distintos
valores (none, underline e italic):
<STYLE>
BODY { text-decoration: none }
</STYLE>
<STYLE>
BODY { text-decoration: underline }
</STYLE>
<STYLE>
BODY { text-decoration: overline }
</STYLE>
<STYLE>
BODY { text-decoration: italic }
</STYLE>
<STYLE>
BODY { text-decoration: line-height }
</STYLE>
Otro efecto en voga ltimamente (usado tambin en las pginas de HTMLpoint) es el que
elimina los subrayados de los enlaces. Para ello, es necesario impostar el siguiente cdigo
para las fuentes incorporadas:
<STYLE>
A { text-decoration: none }
</STYLE>
y el siguiente para las hojas de estilo en lnea:
<A HREF="http://www.htmlpoint.com" STYLE="text-decoration: none">HTMLpoint</A>
Siguiendo este ejemplo, se podrn impostar las hojas de estilo incorporadas de modo que el
subrayado aparezca slo cuando el ratn roza el enlace:
<STYLE>
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</STYLE>

11

De esta manera, cuando el enlace est inactivo no est subrayado, mientras que cuando el
ratn toca el enlace se activa el subrayado.
Este ejemplo funciona perfectamente con Internet Explorer, mientras que con Netscape quita el
subrayado al texto pero no reconoce A:hover.
Para ms ejemplos e informacin sobre el tema, os aconsejamos visitar la seccin efectos en
texto y enlaces

Atributos mrgenes y alineacin

Las hojas de estilo permiten justificar el texto sin usar tablas o similares. Las CSS crean
elementos que aparecen dentro de un box. Cada box posee propiedades que podemos dividir
en tres categoras:
las propiedades de los mrgenes, que asignan un borde externo al box;
las propiedades de relleno, que asignan un espacio interno dentro del box para separar el
contenido de los mrgenes;
las propiedades de los bordes, que definen las lneas grficas alrededor del box.
Los valores de estos atributos se expresan en pulgadas (in), centmetros (cm), pxel (px),
puntos (pt) y unidades (em).
Simplificando el concepto, las hojas de estilo estn impostadas como si fueran ventanas
independientes dentro de la pgina. Tienen, pues, sus propias dimensiones y valores de
impostacin. Entre stos, adems del de texto visto antes y el de fondo que veremos ms
adelante, figuran los valores correspondientes a los bordes de esta especie de ventanas.
Existen varios atributos para los bordes y la alineacin. stos son:

Atributos margin-left, margin-right, margin-top,

margin-bottom
Se trata de cuatro atributos que impostan la distancia entre el box que contiene las CSS y
elementos adyacentes y los cuatro mrgenes:
<STYLE>
BODY { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px }
</STYLE>

Atributo margin
Los cuatro valores antes vistos se pueden definir con el atributo margin. Cuando se imposta
este valor, el navegador asume como orden el primer margen superior (margin-top), el derecho
(margin-right), el inferior (margin-bottom) y el izquierdo (margin-left). Si se proporcionan slo
dos o tres, los que faltan se asignan automticamente segn el valor del lado impostado
regularmente:
<STYLE>
BODY { margin: 10px 10px 10px 10px }
</STYLE>
En este primer ejemplo, todos los elementos estn a la misma distancia de los elementos
cercanos y cada uno de ellos est correctamente indicado.
<STYLE>
BODY { margin: 10px 10px }
</STYLE>
En este segundo ejemplo, estn impostados slo dos valores (margin-top e margin-right). Los

12

mrgenes que faltan, el izquierdo y el inferior, se deducen del valor del margen derecho y del
superior, respecticamente.

Atributos padding-top, padding-bottom, padding-right,

padding-left
Dichos atributos indican la distancia entre los lados del box y los elementos que estn en su
interior. Dicho de otro modo, tienen una funcin opuesta a la vista anteriormente para el
atributo margin. Es posible usar las medidas estndar (pulgadas, centmetros, puntos, pxel,
etc.) o valores porcentuales:
<STYLE>
BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in }
</STYLE>

Atributo padding
Como por lo que se refiere al atributo margin, tambin aqu los cuatro valores vistos en
precedencia pueden definirse con un solo atributo: en este caso, padding. Cuando se imposta
este valor, el navegador asume como orden el el primer valor de relleno superior (padding-top),
el derecho (padding-right), el inferior (padding-bottom) y el izquierdo (padding-left). Si se
proporcionan slo dos o tres, los que faltan se asignan automticamente segn el valor del lado
impostado:
<STYLE>
BODY { padding: 10pt 10px 110% 2in }
</STYLE>
En este primer ejemplo, todos los elementos estn a la misma distancia de los elementos
cercanos y cada uno de ellos est correctamente indicado.
<STYLE>
BODY { padding: 10pt 10px }
</STYLE>

Atributos border-top, border-bottom, border-right,

border-left
Estos atributos definen el estilo y el color de cada elemento y se impostan con algunas
palabras clave: none, dotted (punteado), dashed (rayado), solid, double, groove (surco), ridge,
inset y outset:
<STYLE>
BODY { border-top: dotten green; border-left: dashed black; border-right: solid blue; borderbottom: groove yellow }
</STYLE>

Atributos border-top-width, border-bottom-width,

border-right-width, border-left-width
La funcin de estos atributos es generar un efecto similar a los bordes de las tablas HTML. Es
posible establecer medidas porcentuales o de referencia (em), adems de otras palabras clave
como thin, medium y thick:
<STYLE>
BODY { border-top-width: 5px; border-left-width: 4pt; border-right-width: thick; border-bottomwidth: 2em }
</STYLE>

Atributo border-width
Como por lo que respecta a los atributos margin y padding, tambin aqu los cuatro valores

13

vistos en precedencia pueden definirse con un solo atributo: en este caso, border-width:
<STYLE>
BODY { border-width: 10pt 10px 1em 2in }
</STYLE>

Atributo border-color
Define los colores de los cuatro bordes de la CSS en su conjunto, es decir, sin posibilidad de
establecer colores diversos para cada una de ellas:
<STYLE>
BODY { border-color: green }
</STYLE>

Atributo border-style
Este atributo define el estilo de los cuatro bordes de la CSS en su conjunto, es decir, sin
posibilidad de establecer colores diversos para cada una de ellas. Los valores se especifican
mediante algunas palabras clave: none, dotted, dashed, solid, double, groove, ridge, inset,
outset. Los ltimos cuatro valores son tridimensionales, siempre que el navegador los soporte:
<STYLE>
BODY { border-style: groove }
</STYLE>

Atributo border
Se trata de una especie de atributo omnicomprensivo de los ltimos vistos en esta pgina.
Recoge todas las variantes correspondientes a los bordes, los estilos, el color y la anchura.
Asigna los mismos valores a todos los lados, anulando el efecto de otros atributos similares
insertados precedentemente:
<STYLE>
BODY { border: 12px groove green }
</STYLE>

Atributo width
Si riferisce alla larghezza per orizzontale del box. Puo' essere espresso nelle unita' di misura
finora analizzate. Il valore "auto" permette al box di adattarsi al contenuto degli elementi:
<STYLE>
BODY { width: 300px }
</STYLE>

Atributo float
Questo attributo ha una funzione simile ad ALIGN in HTML classico. I valori a disposizione sono
left, right e none:
<STYLE>
BODY { float: right }
</STYLE>

Atributo clear
Si se especifican los valores right o left, los elementos se disponen con float por el lado
especificado. Usando none se impostan en ambos lados:
<STYLE>
BODY { clear: left right }
</STYLE>

14

Background y colores de fondo

En HTML clsico el fondo se imposta dentro de la marca <BODY> mediante los atributos
bgcolor (para el color uniforme del fondo pgina) y background (para asignar al fondo una
imagen gif o jpg). Los lmites de estos instrumentos son evidentes sobre todo cuando es
necesario insertar una imagen de fondo compleja. Existe un atributo de HTML que permite,
slo con MS Internet Explorer, fijar la imagen de fondo invocada como background:
<BODY background="sfondo.gif" bgproperties="fixed">
Como hemos dicho, es una solucin que funciona slo con el navegador Microsoft. Los
usuarios Netscape no encontrarn ningn mensaje de error, sino tan slo una pgina con el
clsico fondo que se desliza junto con el resto del documento (existen algunos recursos para
fijar los elementos de la pgina a pesar del scroller).
Las especificaciones de las CSS introducen, tambin por lo que se refiere a los colores de
fondo, importantes novedades dirigidas sobre todo a liberar a los elaboradores de los vnculos
operativos.

Atributo color
El atributo color define el color del texto del documento (no se debe confundir con el color de
background) tanto mediante los nombres de los colores en ingls (black, silver, gray, white,
maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal y aqua) como con tros
hexadecimales.
El formato RGB usa para definir los colores tres nmeros enteros comprendidos entre 0 y 255,
mediante una escala de valores lineal. El rojo es as, por tanto, 255,0,0 y los matices
cromticos se realizan a travs de las combinaciones de colores.
En HTML los valores nmericos de los colores se definen segn el denominado "tro
hexadecimal", o sea un conjunto de tres nmeros y dos cifras hexadecimales.
<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; color:blue">
</DIV>

Atributo background-color
Este atributo determina el color de fondo de un determinado estilo. Su funcin es similar a la
del clsico BODY de HTML, pero puede acercarse al color de fondo de las tablas. Se usa sobre
todo para resaltar ciertas partes del documento.
<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; backgroundcolor:blue">
</DIV>

Atributo background-image
Tiene una funcin similar al background="image.gif" de HTML classico, invocando una imagen
en formato GIF o JPG cargada en el fondo de la css
<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; background-image:
url(sfondo.jpg)">
</DIV>

15

Atributo background-attachment
Permite que la imagen de fondo quede fija y no se desplace cuando nos movemos
verticalmente por la pgina. Admite dos posibilidades: scroll y fixed

Atributo background-repeat
Este atributo permite repetir la imagen de fondo tal y como sucede con la marca BODY de
HTML. Puede asumir distintos valores: repeat (la imagen se reduplica en vertical y horizontal),
repeat-x (reduplica la imagen slo en horizontal), repeat-y (reduplica la imagen slo en vertical),
no-repeat (la imagen no se repite):
<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px;
background-image: url(sfondo.jpg); background-repeat: repeat-y">
</DIV>

<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px;

background-image: url(sfondo.jpg); background-repeat: repeat-x">
</DIV>

Atributo background-position
Las hojas de estilo permiten elegir un punto de inicio para la imagen de fondo distinto del
clsico ngulo superior izquierdo. HTML clsico, de hecho, est impostado para que el fondo
se visualice desde el punto extremo superior izquierdo. Con las CSS es posible usar algunas
palabras clave para la colocacin vertical (top, center y bottom) y horizontal (left, center y right).
Si se expresan dos coordenadas,la primera es la horizontal y la segunda la vertical:
<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px;
background-image: url(sfondo.jpg); background-position: right top">
</DIV>

Atributo background
Es un atributo que permite definir unvocamente los distintos atributos del fondo hasta ahora
examinados. El orden que hay que seguir es el siguiente:
<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:300px;
background: yellow url(sfondo.jpg) repeat-y fixed right bottom">
</DIV>

16

Agrupar estilos
La reagrupacin es una tcnica suplementaria para hacer ms funcionales las hojas de estilo y
permitir efectos en otro caso imposibles. La agrupacin de estilos reduce los atributos y los
argumentos creando grupos lgicos. En particular, dicha funcin se lleva a cabo de dos
maneras:
Agrupar TAG
Para entender mejor esta cuestin, imaginemos una pgina web impostada con
diversos estilos, cada uno de los cuales estar identificado por las siguientes marcas:
<STYLE>
H1 { font-family:arial; font-size:14px; color:blue; }
H2 { font-family:arial; font-size:14px; color:blue; }
H3 { font-family:arial; font-size:14px; color:blue; }
</STYLE>
Para agrupar los estilos es suficiente sintetizar el cdigo de esta manera:
<STYLE>
H1, H2, H3 { font-family:arial; font-size:14px; color:blue; }
</STYLE>
Otro ejemplo en su forma no agrupada sera:
<STYLE>
A:link { text-decoration: none } A:visited { text-decoration: none }
</STYLE>
el cual, sin embargo, siguiendo las reglas de agrupacin de estilos, se convierte en :
<STYLE>
A:link, A:visited { text-decoration: none }
</STYLE>
Agrupar los atributos
Es posible dividir los estilos segn datos especficos sobre las familias. Con este tipo
de agrupacin el siguiente estilo de texto:
<STYLE>
BODY { font-family:verdana; font-size:15px; font-weight:bold; font-style:normal;
color:red}
</STYLE>
se convierte en:
<STYLE>
BODY { font: bold normal 15px verdana red}
</STYLE>
Se ha enunciado el atributo font y, sucesivamente, los argumentos que lo componen. El
orden de enunciacin no se debe dejar nunca al azar sin oque se debe impostar segn
precisas reglas jerrquicas. En el ejemplo, el peso, el tipo de carcter y el tamao se
colocan antes de la dimensin. Los atributos no se separan mediante comas sino
mediante simples espacios.
Las mismas reglas son vlidas para los mrgenes.

17

Dependencia del contexto

Con TABLE P seleccionamos aquellos prrafos que estn dentro de una tabla

18

Asignar clases
La asignacin de clases permite definir un alto nivel de variacin de cada marca HTML. Esto se
realiza aadiendo una extensin class a las tradicionales marcas del HTML tras haber
impostado las clases dentro de las hojas de estilo. ste es el cdigo para impostar en las CSS:
<STYLE>
H2.top {font-family:verdana; font-size:15px; font-weight:bold; font-style:normal}
H4.bottom {font-family:arial; font-size:10px; font-weight:bold; font-style:italic}
</STYLE>
Sucesivamente, dentro del documento, se incluir la referencia a la clase:
<H4 class=bottom> Texto de la pgina </H4>
Otro concepto relacionado es el de las pseudoclases: elementos de un solo tipo que
satisfacen un cierto criterio contextual. Un ejemplo muy claro de pseudoclases es el de los
elementos de anclaje (anchor) que, cuando se visitan, constituyen una pseudoclase visited,
cuando estn activos active y cuando no son visitados link .
Una pseudoclase se especifica dentro del estilo seguida de dos puntos:
<STYLE>
A:link { text-decoration: none } visited { text-decoration: none }
</STYLE>
La pseudoclase visited no necesita el elemento A porque slo los anclajes pueden tener una
pseudoclase link.

19

Colocacin dinmica
Debido a las consecuencias negativas de la "guerra de los navegadores", muchos de los
ejemplos de este tutorial son compatibles exclusivamente con Internet Explorer. La carrera por
la "tecnologa propietaria" ha llevado a Netscape y Microsoft a adoptar soluciones
incompatibles y, a menudo, contrapuestas, sobre todo en el caso del HTML dinmico no es
raro que demo para Explorer creen errores en los script de Netscape y viceversa). Las hojas de
estilo son tambin vctimas de este duelo, aunque no faltan puntos y tecnologas sobre los que
se ha alcanzado un acuerdo. Las especificaciones de la colocacin dinmica, por ejemplo, ven
de acuerdo a Microsoft y Netscape, las cuales, a travs de sus representantes en el W3C, han
colaborado en la redaccin de un borrador de trabajo llamado CSS-P (CSS positioning).
Gracias a esta colaboracin, tanto Netscape 4 como Explorer 4 y 5 reconocen e interpretan
correctamente la colocacin dinmica dentro de la pgina. Pero qu entendemos por
colocacin dinmica?.
Los documentos HTML se colocan dentro de la pgina segn un esquema de flujo de datos.
Esto significa que se parte del margen superior izquierdo del documento y cada elemento se
coloca en base al anterior, sin posibilidad de superponer objetos. Las especificaciones de las
CSS-P permiten, sin embargo, tres tipos distintos de colocacin:
esttica: se trata de la colocacin predefinida por el navegador, es decir la tradicional de
HTML, por la que cada elemento se coloca segn el flujo de datos del documento;
absoluta: este tipo de colocacin permite abstraer la CSS del flujo de datos, permitiendo su
colocacin en cualquier punto de la pgina de manera completamente independiente de los
dems elementos, los cuales pueden adems superponerse por encima o por debajo.
relativa: dicha colocacin no sale del flujo de datos ni produce ninguna modificacin
respecto a los elementos colocados de manera esttica. Asume caractersticas propias de la
colocacin dinmica cuando se impostan las propiedades left y right, que mueven el elemento
a la izquierda y arriba del que lo precede.
La colocacin absoluta y relativa permiten a los elaboradores sistemar con precisin elementos
en el documento, superponerlos y, mediante los script, moverlos. De esta manera, los
diseadores web tiene un control sobre el documento similar al que poseen los grficos
tradicionales sobre los documentos tradicionales.
El borrador de trabajo de CSS-P define las propiedades de las hojas de estilo relativas a la
colocacin dinmica. Muchas de estas propiedades son ya conocidas por HTML clsico (las
propiedades width y height, por ejemplo), mientras que otras son, sin embargo, inditas. Para
comprender mejor de qu estamos hablando, conviene poner que veamos algn ejemplo
prctico con su correspondiente cdigo.
Digamos antes de nada que aqu haremos uso de hojas de estilo en lnea,ya que es ms fcil
definir la colocacin para cada elemento. Nada impide que se usen las CSS incorporadas o
externas para crear estructuras de pgina complejas.
He aqu un ejemplo de colocacin absoluta con uso de las propiedades top y left:
<DIV STYLE="position:absolute; top:100px; left:100px">
<IMG SRC="elemento01.gif" border=0>
</DIV>
Las medidas se expresan en pxel (px), pero se pueden expresar tambin con otros valores:
puntos (pt), centmetros (cm), pulgadas (in), etc. Todas hacen referencia al margen superior
izquierdo.
El ejemplo que consideramos crea una hoja de estilo con colocacin absoluta
(position:absolute) distanciada del margen superior e izquierdo de 100 pxel. Todo lo que se
encuentra dentro de la CSS (la imagen elemento01.gif) se colocar de esta manera.

20

Para comprender la diferencia prctica entre colocacin absoluta y relativa, pngamos otro
ejemplo. Se trata de un sencillo te sin ningn tipo de formatacin, que el documetno interpreta
como flujo de elementos. Dentro de este texto, impostamos una hoja de estilo con colocacin
relativa de las palabras "sitio italiano", con una distancia del elemento a la izquierda ms
cercano de 10 pxel:
HTMLpoint es el <SPAN STYLE="position:relative; top:10px; left:10px"><B>sitio
italiano></B></SPAN> de web publishing ms visitado y con mayor autoridad. Decenas de
tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
Hemos usado la marca SPAN en lugar de DIV ya que esta ltima es ms apropiada para
secciones de texto de una cierta envergadura, mientras que la primera se adapta mejor a
frases breves como sta. Otra consideracin se refiere al salto de lnea que DIV impone a los
elementos.
En el ejemplo prctico que sigue hemos usado ambas con resultados distintos.

Otros parmetros que pueden impostarse son width y height que establecen,
respectivamente, la anchura en horizontal y la altura en vertical de la hoja de estilo. Tambin en
este caso pueden usarse indiferentemente las medidas permitidas por las hojas de estilo:
<DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px">
HTMLpoint es el sitio italiano de web publishing ms visitado y con mayor autoridad. Decenas
de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
</DIV>
El texto se recoge en una hoja de estilo de dimensiones equivalentes a 100px de alto e igual de
ancho. La distancia del margen superior izquierdo es la expresada precedentemente.

La propiedad visibility determina la visibilidad de un elemento. Puede estar impostado en

hidden o visible
<DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px;
visibility:hidden">
<IMG SRC="elemento01.gif" border=0>
</DIV>
hidden hace invisibles los elementos, mientras visibile los hace visibles:
<DIV STYLE="position:absolute; top:100px; left:150px; width:200px; height:150px;
visibility:visible">
<IMG SRC="elemento02.gif" border=0>
</DIV>

Se ha dicho al inicio que las CSS-P permiten superponer imgenes, texto y elementos de unos
y otros. La jerarqu con la cual se superponen dichos elementos depende, si no se establece de
otra forma, de la colocacin en el cdigo HTML. Un elemento colocado detrs de otro se
superpondr a ste, como en el ejemplo que sigue
<DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px;
visibility:visible">
<IMG SRC="elemento01.gif" border=0>
</DIV>

21

<DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px;

visibility:visible">
<IMG SRC="elemento02.gif" border=0>
</DIV>

Es posible modificar la impostacin por defecto por la que un elemento escrito sucesivamente
en el cdigo se superpone a los elementos precedentes, mediante la propiedad z-index. Esta
propiedad define el orden grfico de los elementos mediante valores numricos. El elemento
principal se imposta como valor positivo "1", mientras los otros, que estn en posicin inferior,
lo hacen con valor negativo "-1". Retomando el ejemplo precedente y dejando inalterado el
orden jerrquico, es posible superponer el segundo elemento al primero gracias a la propiedad
z-index:
<DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px;
visibility:visible z-index:1">
<IMG SRC="elemento01.gif" border=0>
</DIV>
<DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px;
visibility:visible z-index:2">
<IMG SRC="elemento02.gif" border=0>
</DIV>

La propiedad overflow permite gestionar, mediante el uso de scroller, los contenidos de los
documentos que sobrepasan el rea impostada con height y width. Para ello, es necesario que
la propiedad overflow se imposte en "scroll" y no en "hidden". En este segundo caso, de hecho,
los elementos se visualizan con los lmites del tamao del rea de recorte pero sin el scroller
lateral:
<DIV STYLE="position:absolute; overflow:scroll; float:left; top:10px; left:10px;
width:150px; height:100px">
</DIV>
<DIV STYLE="position:absolute; overflow:hidden; float:left; top:150px; left:10px;
width:150px; height:100px">
</DIV>

Todos los elementos soportan la colocacin esttica y relativa; la colocacin absoluta slo los
siguientes:

Applet
Button
Div
Fieldset

IFrame
IMG
Input
Object

Select
Span
Table
Textarea

Para aprovechar lo visto hasta ahora de colocacin dinmica, podemos pasar a exponer la
utilizacin prctica de dicha tecnologa. Crear ttulos con efecto sombreado se poda hacer en
HTML clsico exclusivamente recurriendo a imgenes (creadas con los correspondientes
programas de grfica web y retoque de fotos. Nada que decir sobre esta eleccin, pero es
obvio que la presencia de imgenes hace que la pgina sea pesada en trminos Kb. Con las
CSS-P podemos obtener el mismo resultado usando simple texto en lugar de imgenes. No se
trata de un procedimiento complejo, sino sencillo y, en algunos aspectos, podramos decir que
incluso banal. Se crea un texto asignndole un estilo, un tamao y una cierta colocacin

22

absoluta en la pgina:
<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:10px; left:10px;
color:black; z-index:1">
HTMLpoint
</DIV>
Para el texto se ha usado la fuente impact de tamao igual a 100 pxel y color negro,
distanciado 10 pxel del margen izquierdo y superior . La propiedad z-index est impostada en
el valor positivo 1. Hasta aqu nada de particular, visto que se trata de un texto negro sin
sombreado. Para insertar la sombra, tenemos que aadir este cdigo:
<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:15px; left:15px;
color:gray; z-index:-1">
HTMLpoint
</DIV>
El texto queda del mismo tamao y con el mismo estilo pero cambia el color (del black
precedente al gray actual). La distancia del estilo del margen superior e izquierdo aumenta
respectivamente 5 pxel y la propiedad z-index est impostada en el valor negativo -1. Todo
esto crea el primer texto superpuesto al segundo, el cual al estar distanciado 5 pxel pero ser
de igual dimensin, crea un efecto sombreado.

23

Controles del cursor

Ms Internet Explorer implementa desde la versin 4 la propiedad CSS cursor para controlar el
cursor del ratn cuando el usuario coloca el mismo en un determinado elemento. Desde hace
aos existen cursores de las ms diversas e imaginativas formas para Windows, pero no se
trata de esto. La propiedad CSS cursor, de hecho, no permite obtener cursores de formas
distintas a las impostadas por defecto en el sistema, pero permite, sin embargo, su intercambio
y control.
La costumbre nos lleva a considerar obvio el hecho de que el cursor, cuando el ratn pasa por
encima de un enlace, deje de ser una flecha y se convierta en una manita. As como cuando
una pgina web est cargndose es normal que el cursor se transforme en reloj de arena. Pues
bien, esta hoja de estilo permite controlar estos procesos asignando un cursor a voluntad a
todos los elementos de la pgina.
A continuacin figura un elenco de los efectos que pueden obtenerse con la propiedad CSS
cursor en MsIe.

Auto
El cursor se define segn las impostaciones automticas por defecto del navegador

Crosshair
El navegador visualiza el cursor con la clsica cruz (que podra ser tambin una mira)

Default
El navegador visualiza el cursor siempre en su forma estndar (generalmente una flecha
dirigida hacia arriba y hacia la izquierda)

Hand
El cursor asume para todo el documento la forma de mano.

Move
El cursor asume la forma tpica de los elementos arrastrados

e-resize
El cursor asume la forma de una flecha dirigida hacia la izquierda (tpicamente activada cuando
se redimensionan ventanas u objetos)

ne-resize
Flecha por defecto dirigida hacia arriba y hacia la derecha

nw-resize
Flecha dirigida hacia lo alto y hacia la izquierda (este estilo se diferencia del estilo por defecto
visto antes en que este ltimo asigna el cursor segn las impostaciones del navegador,
mientras que el primero establece el cursor con flecha dirigida hacia arriba y hacia la izquierda
aun si las impostaciones del navegador son diferentes)

n-resize

24

Flecha no estndar dirigida hacia arriba.

se-resize
Flecha estndar dirigida hacia abajo y hacia la derecha

sw-resize
Flecha estndar dirigida hacia abajo y hacia la izquierda.

s-resize
Flecha no estndar dirigida hacia abajo.

w-resize
Flecha no estndar dirigida hacia la izquierda

text
Al cursor se le asigna la tpica forma de la barra vertical que los navegadores impostan cuando
encuentran texto sin enlaces o sin imgenes.

wait
El clsico cursor con forma de reloj de pulsera o de arena.

help
El cursor con forma de signo de interrogacin o de bocadillo de los tebeos que, generalmente
indica la posibilidad de obtener mayor informacin sobre el objeto.

25

Efectos de transicin
Las transiciones de pgina permiten visualizar efectos similares a algunos cambios de
imgenes televisivas. Dicho de otro modo, la pgina invocada no aparece directamente sino
que va precedida de efectos de distinto tipo, tales como disoluciones y otras presentaciones.
Las transiciones se activan exclusivamente cuando se accede a la pgina de otro documento o,
en alternativa, cuando se sale de la pgina para ver otra. Por tanto, pulsando el botn
"actualiza" del navegador, no se producir ningn efecto sino que ser necesario volver a la
pgina anterior y hacer clic de nuevo en el enlace.
Los efectos de transicin pueden darse a la entrada (page-enter) o a la salida (page-exit) de
pgina.
El cdigo se inserta entre las marcas <HEAD> y permite 23 efectos diferentes. En los ejemplos
que figuran a continuacin se ha impostado el valor "Page enter" por lo que los efectos se
producen al entrar en la pgina. stos son los efectos a disposicin:
Box in
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=0)">
Box out
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)">
Circle in
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=2)">
Circle out
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=3)">
Wipe up
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=4)">
Wipe down
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=5)">
Wipe right
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=6)">
Wipe left
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=7)">
Vertical blinds
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=8)">
Horizontal blinds
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=9)">
Checkerboard across
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=10)">
Checkerboard down
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=11)">
Random dissolve
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=12)">
Split vertical in
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=13)">
Split vertical out
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=14)">

26

Split horizontal in
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=15)">
Split horizontal out
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=16)">
Strips left down
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=17)">
Strips left up
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=18)">
Strips right down
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=19)">
Strips right up
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=20)">
Random bars horizontal
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=21)">
Random bars vertical
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=22)">
Random
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=23)">
Para obtener efectos similares al salir de la pgina basta sustituir "page-enter" con "page-exit".
Una ltima advertencia es la que se refiere a la imposibilidad de usar las transiciones en
pginas divididas en marcos, o, mejor dicho, dentro de cada uno de los frameset. As si la
marca se introduce en el archivo principal del marco (el que construye e imposta los diversos
frameset), los efectos se producen mientras esto no sucede en cada frameset considerado
individualmente. La explicacin de esto, que a primera vista podra parecer un bug, esta en la
constatacin de que los efectos de trasnsicin se producen en toda la pantalla del navegador y
no en una parte de sta. Para acabar, hay que subrayar que estos efectos se obtienen
exclusivamente en Microsoft Internet Explorer.

27

Efectos en texto y enlaces

Las propiedades relativas a las fuentes no se refieren al tipo de carcter (que ya analizamos en
la seccin "Atributos de estilo para el texto") sino a su aspecto y a algunos puntos relacionados
con la colocacin.

Atributo letter-spacing
Letter-spacing establece la distancia entre las letras dentro de un documento. Los valores se
expresan en em. Se trata de una unidad de medida equivalente al tamao de la letra m. Se usa
tambin con animales
<DIV STYLE="font-family:arial; letter-spacing:1em">
HTMLpoint es el sitio italiano de web publishing ms visitado y con mayor autoridad. Decenas
de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
</DIV>

Atributo word-spacing
Establece el espaciado entre palabras.

Atributo text-transform
QuEste atributo permite manipular las minsculas y maysculas del texto gracias a tres
palabras clave:
uppercase : aplica las maysculas a todas las letras del elemento:
<DIV STYLE="font-family:arial; text-transform:uppercase">
</DIV>
capitalize: aplica la mayscula slo a la primera letra de cada palabra:
<DIV STYLE="font-family:arial; text-transform:capitalize">
</DIV>
lowercase : aplica las minsculas a todas las letras del elemento:
<DIV STYLE="font-family:arial; text-transform:lowercase">
</DIV>

Atributo text-align
La funcin de este atributo es visualizar el texto en cuatro posiciones: left (izquierda), center
(centrado), right (derecha) e justify (justificado).
<DIV STYLE="font-family:arial; text-align: right">
</DIV>

Atributo text-indent
Este atributo define la cantidad de espacio (expresada en valores absolutos em o en pulgadas)
que se deja inmediatamente antes de la primera palabra.

28

<DIV STYLE="font-family:arial; text-indent: 5em">

</DIV>

Atributo line-height
El atributo line-height define la distancia vertical entre las varias lneas de texto. Los valores se
expresan en porcentajes o en unidades absolutas em. Dichos valores son directamente
proporcionales al tamao del texto (font-size). Por ello, en el ejemplo que sigue, estando el
valor absoluto line-height impostado en 2 y el texto en 14px, la distancia ser 28px (14px *
2em).
<DIV STYLE="font-family:arial; font-size:14px; width:400px; line-height: 2em">
</DIV>

Atributo list-style
La propiedad list-style permite sustituir los puntos lista estndar de HTML con imgenes en
formato GIF. Es posible aplicar tales puntos o toda la lista o slo a una parte de la lista.
<style type="text/css">
UL { list-style-image:URL(punto.gif) }
</style>

Enlace sin subrayado

Desde siempre los navegadores muestran los enlaces textuales con un subrayado (underline)
que seala su funcin. Internet Explorer ofrece la posibilidad de eliminar dicho subrayado
actuando en las propiedades del navegador. Con las hojas de estilo los elaboradores pueden
eliminar totalmente el subrayado mediante un simple cdigo que se insertar entre las marcas
BODY del documento:
<style type="text/css">
A:link, A:visited { text-decoration: none }
</style>

Enlace subrayado slo cuando pasa el ratn

El ejemplo que hemos visto antes puede elaborarse de nuevo para hacer ms atractiva la
pgina. En los enlaces que no llevan subrayado ste aparecer slo cuando el ratn pasa por
encima gracias a la propiedad A:hover.
<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>

Con referencia al ltimo ejemplo es posible impostar la CSS para obtener el efecto contrario:
los enlaces estn subrayados por defecto pero el subrayado desaparece cuando el ratn pasa
por encima:
<style type="text/css">
A:link, A:visited { text-decoration: underline }

29

A:hover { text-decoration: none }

</style>

Enlace que cambia de color cuando pasa el ratn

Explotando todava ms la propiedad A:hover, es posible crear un efecto mediante el cual los
enlaces tengan un color por defecto que cambiar cuando el ratn pase por encima. El color se
puede impostar como palabra clave (red, green, blue, etc.) o como tro hexadecimal.
<style type="text/css">
A:hover { color: red }
</style>

Enlace que cambia color de fondo cuando pasa el ratn

Otra vez la propiedad A:hover que, de acuerdo con la propiedad de definicin del background
genera un efecto muy interesante: cuando el cursor del ratn pasa por encima del enlace, ste
se activa con un color de texto y de fondo impostados.
<style type="text/css">
A:hover { color: white; background:blue }
</style>

Enlace que cambia el tamao del texto cuando el ratn

lo activa
ltimo ejemplo de A:hover. Esta vez el texto se agranda cuando el ratn pasa por encima.
<style type="text/css">
A:link { font-size: 15px }
A:visited { font-size: 15px }
A:hover { font-size: 16px }
</style>

30