07 HTML6

Escuela Complutense Latinoamericana
Escola Complutense Latinoamericana
Programación para Internet
HTML
Hojas de estilo
Universidade Federal de Santa Catarina

Florianópolis, Brasil
21 de mayo a 1 de junio de 2007
El diseño gráfico de las páginas web
HTML 4 recomienda no usar elementos y atributos

relativos a la presentación de la información (formatos).
Recomienda que las instrucciones de formato se pongan
en un archivo aparte que se conoce como hoja de estilo.
HTML se creó como un lenguaje para la descripción de
documentos, sin que la presentación de la información o
el diseño gráfico fuera un aspecto relevante.
Al expandirse de forma espectacular la World Wide Web
y convertirse en un medio de comunicación de masas el
aspecto de los documentos (páginas web) pasó a ser un
aspecto importante.
Sin embargo, HTML ofrecía pocos recursos a los autores
para crear presentaciones espectaculares, lo que
propició que los fabricantes de navegadores incluyeran
sus propias extensiones.
El lenguaje HTML: Hojas de estilo HTML: 6 - 1

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
Hojas de estilo
Las hojas de estilo permiten un control absoluto sobre

la presentación de la información: interlineado, sangrías,
colores, tamaños, estilos, posicionamiento, ...
Permiten separar de forma efectiva la descripción del
contenido (documento HTML) y su forma de
presentación (hoja de estilo).
Formas de asociar información de estilo en HTML 4:
9 En un archivo externo vinculado al documento.
9 En la cabecera del propio documento
(elemento STYLE).
9 Directamente en los elementos del cuerpo del
documento (atributo STYLE).
Se pueden utilizar los tres métodos al mismo tiempo.
Métodos de definición de estilos
Cada método tiene sus implicaciones:

9 Con el atributo STYLE se define el estilo de un elemento
particular del documento.
9 Con el elemento STYLE y las hojas de estilo se definen
estilos para todos los elementos del documento de cada
tipo concreto de elemento (H1, P, etcétera).
9 El elemento STYLE es parte del documento, mientras
que la hoja de estilo externa se referencia en el
documento: se puede disponer de varias hojas de estilo
diferentes y cambiar el aspecto del documento
vinculando otra hoja de estilo diferente.
Aunque los tres métodos son válidos, la hoja de estilo
externa es el método que más independencia
proporciona al contenido del documento de las
características de estilo a aplicar; el uso del atributo
STYLE entremezcla el contenido y su estilo.

Interpretación del estilo
Dado que se pueden utilizar conjuntamente los tres

métodos de definición de estilos debemos saber cuál
se aplica en cada caso.
A un determinado elemento del documento se le aplicará
en principio el estilo que esté definido para ese tipo de
elemento en la hoja de estilo externa vinculada.
Si en la cabecera del documento hay características de
estilo para ese tipo de elemento, el estilo que se aplicará
será el indicado en la hoja de estilo externa modificado
con la información de estilo del elemento STYLE.
Si para un elemento individual de ese tipo se hace uso
del atributo STYLE, el estilo que se aplicará será el
indicado en la hoja de estilo externa modificado con la
información de estilo del elemento STYLE y modificado
con la información de estilo del atributo STYLE.
Lenguajes de estilo
HTML 4 establece los mecanismos de aplicación de

características de formato (estilos), pero, al igual que
no determina un lenguaje de guiones a usar para
la programación (VBScript, JavaScript), tampoco
determina un lenguaje de estilo concreto a usar.
El lenguaje de estilo más comúnmente utilizado es CSS
(Cascading Style Sheets – Hojas de estilo en cascada),
pero existen otros lenguajes de estilo que los
navegadores pueden interpretar.
Aquí nos centraremos en la versión 2 del lenguaje CSS,
que es el lenguaje de estilo predeterminado.

Un ejemplo de documento
<HTML>
<HEAD>
<TITLE>Estilos HTML</TITLE>
</HEAD>
<BODY>
<P>La referencia de HTML es un archivo HLP de Windows
que describe toda la sintaxis actual de HTML. Está
disponible en los siguientes formatos:</P>
<UL>
<LI>Windows 3.x</LI>
<LI>Windows 95/NT</LI>
</UL>
<P>Para más información sobre HTMLib, contacte con <A
HREF="mailto:htmlib@htmlib.demon.co.uk">htmlib@htmlib
.demon.co.uk</A></P>
</BODY>
</HTML>
Estilos predeterminados
Sin información de estilo en el documento, el texto se

presenta utilizando los estilos predeterminados que
están establecidos para cada tipo de elemento:
Los estilos predeterminados producen presentaciones

bastante pobres y definen características de formato
mínimas.

Información de estilo en el cuerpo del documento
Casi todos los elementos HTML contemplan el uso del

atributo STYLE.
Aunque luego hablaremos con más detalle de la sintaxis
de CSS, de momento basta saber que las características
de formato se expresan con pares propiedad-valor; el
nombre de la propiedad va seguido de dos puntos (:) y
del valor que se le asigna; los distintos pares propiedad-
valor se separan con punto y coma (;).
La secuencia de pares propiedad-valor se encierra entre
comillas y se asigna al atributo STYLE del documento:
<P STYLE="font-family: Arial; font-size: 12pt;
color: rgb(0,128,0)">La referencia de HTML es un
archivo HLP de Windows que describe toda la
sintaxis actual de HTML. Está disponible en los
siguientes formatos:</P>
Información de estilo en el cuerpo del documento
Las características de formato especificadas con el

atributo STYLE sólo afectan al elemento en el que están.
En nuestro ejemplo, se ha definido un estilo para el
primer elemento P del cuerpo del documento, afectando
sólo a ese elemento y a ninguno otro, de forma que el
otro elemento P se sigue viendo igual:

Información de estilo en la cabecera del documento
En la cabecera del documento se puede colocar un

elemento STYLE para definir el formato de todos
los elementos del cuerpo de determinados tipos:
<HEAD>
<STYLE>
P { font-family: Arial; font-size: 12pt;
color: rgb(0,128,0) }
</STYLE>
</HEAD>
Elementos P
Alcance global
Información de estilo en una hoja de estilo externa
El método más versátil de aplicación de características

de formato al contenido de un documento HTML se
encuentra en el uso de hojas de estilo externas que se
vinculan con el documento HTML.
El contenido del archivo de hoja de estilo sigue las
mismas reglas que los estilos que se definen en un
elemento STYLE.
Creamos una hoja de estilo en un archivo llamado
Prueba.css.
Su contenido será el mismo estilo que hemos definido
en los dos casos anteriores:
Prueba.css
P { font-family: Arial;
font-size: 12pt;
color: rgb(0,128,0) }

Información de estilo en una hoja de estilo externa
Una hoja de estilo se vincula con un documento HTML

por medio de un elemento LINK en la cabecera del
documento:
<HEAD>
<LINK HREF="Prueba.css" REL="stylesheet"
TYPE="text/css">
</HEAD>
Atributos del elemento LINK.-
9 HREF: nombre y ubicación del recurso vinculado.
9 REL: tipo de relación (hoja de estilo en este caso).
9 TYPE: formato del recurso que se vincula.
Mismo resultado: todos los elementos P adquieren
las características de formato dadas.
Reglas de estilo CSS
Una regla de estilo se compone de dos partes:

selector y declaración.
H1 { color: red }
H1 es el selector y color: red es la declaración,
que va encerrada entre llaves.
El selector puede ser cualquier tipo de elemento HTML;
actúa como enlace entre el documento HTML y la
información de la hoja de estilo.
La declaración tiene dos partes: propiedad (color) y
valor (red), separados por dos puntos (:).
Para simplificar se pueden agrupar los selectores y las
declaraciones: los selectores en listas separadas por
comas y las declaraciones separadas por punto y coma.
H1, H2, H3 { color: red; font-size: 12pt }

Reglas de estilo CSS
Las propiedades se heredan: cuando un elemento (hijo)

se encuentra dentro de otro (padre), aquel (el hijo)
hereda las propiedades de formato de éste (el padre).
Como todos los elementos del cuerpo del documento se
encuentran dentro (descienden) del elemento BODY,
éste resulta ideal para establecer las características de
estilo predeterminadas.
Si la hoja de estilo Prueba.css caracteriza BODY:
BODY { font-family: Arial; font-size: 12pt;
color: rgb(0,128,0) }
todo el texto tendrá el aspecto indicado, ya que los
elementos P y el elemento UL son hijos de BODY,
los elementos LI son hijos de UL y el elemento A
es hijo del último elemento P.
Uso de los atributos CLASS e ID
Para distinguir en la hoja de estilo entre distintas

variedades de un tipo de elemento, usamos el atributo
CLASS para crear clases de elementos:
<P CLASS="Primero">La referencia de HTML es un
Ahora podemos en la hoja de estilo establecer
características de formato específicas para esa clase
concreta de elementos P:
color: rgb(0,128,0); text-indent: 15px }
P.Primero { text-indent: 0px }

Uso de los atributos CLASS e ID
El atributo ID permite identificar cada elemento y

establecer propiedades de formato particulares para
ese ejemplar concreto del tipo de elemento:
<P ID="Primero">La referencia de HTML es un
Ahora podemos en la hoja de estilo establecer
características de formato específicas para ese ejemplar
concreto de elemento P:
P#Primero { text-indent: 0px }
Dado que los identificadores son únicos, se puede
prescindir del tipo de elemento: #Primero { ... }
Elementos DIV y SPAN
HTML contempla dos elementos genéricos que no tienen

significado concreto que afecte a su presentación.
Sirven para establecer un contenido como de nivel de
bloque (DIV) o como de nivel de línea (SPAN).
Los elementos DIV y SPAN se usan mucho para
organizar la presentación de los documentos HTML,
normalmente con clases:
<DIV>Este es un elemento de <SPAN
CLASS="Cursiva">nivel de bloque</SPAN>.</DIV>
Y en la hoja de estilo:
DIV { font-family: Comic Sans MS; font-size:
14pt }
SPAN.Cursiva { font-style: oblique }

Referencias en las hojas de estilo
* hace referencia a todos los elementos del documento:

*.sangrado { font-family: Arial; text-indent: 100px }
Elementos que desciendan de otro: elemento antecesor
seguido del elemento descendiente:
P B { font-family: Comic Sans MS }
Todos los elementos B que se encuentren dentro de
un elemento P.
> dara descendiente inmediato de otro (hijo):
BODY > P { ... }
Elementos P que cuelguen directamente de BODY.
Referencia a características estructurales:

Elemento:first-child identifica al primer hijo.
BODY > P:first-child { font-weight: bold }
A:link y A:visited permiten dar formato a los
hipervínculos no visitados y visitados, respectivamente:
A:link { text-decoration: none; font-weight:
bold; color: red; background: black }
A:visited { text-decoration: none; font-weight:
bold; color: yellow; background: black }
Además:
A:hover se refiere al hipervínculo cuando se señala.
A:active se refiere al hipervínculo cuando se activa.

A:link { text-decoration: none; font-weight: bold;

color: blue; background: black }
A:hover { text-decoration: none; font-weight: bold;
color: red; background: blue }
A:active { text-decoration: none; font-weight:
bold; color: red; background: green }
A:visited { text-decoration: none; font-weight:
bold; color: yellow; background: green }
Click
Valores para las propiedades
A cada propiedad se le puede asignar un valor dentro de

su conjunto de valores válidos.
Los valores pueden venir dados por identificadores
específicos (blue, auto, Arial, center, ...):
A:link { text-decoration: none; font-weight:
bold; color: red; background: black }
Los valores válidos también pueden ser cantidades
numéricas absolutas (número entero o número real).
Los valores válidos también pueden ser URLs:
BODY { background:
url(http://www.bg.com/pin.gif) }

Valores para las longitudes
Distancias horizontales y verticales que se expresan de

forma relativa o de forma absoluta.
Número seguido de una unidad de medida.
Unidades de medida para longitudes relativas:
em: relativo al tamaño de fuente (H1 { margin: 0.5em })
ex: relativo a la altura de la letra x minúscula
(H1 { margin: 1ex })
px: relativo al tamaño de pixel (P { font-size: 12px })
Las unidades relativas se heredan como valores
calculados (una sangría de 3em en un BODY de 12pt se
hereda como 36pt en su hijo H1 incluso aunque para él
se especifique 15pt como tamaño).
Unidades de medida para longitudes absolutas: in
(pulgadas), cm, mm, pt (puntos: 1/72 de pulgada) y pc
(picas: 12 puntos)
Porcentajes y colores
Los porcentajes se expresan como se puede esperar: un

signo opcional, un número y un signo de porcentaje (%)
Los porcentajes siempre son valores relativos a otro
valor, como por ejemplo una longitud.
Cada propiedad establece el valor al que se refiere el
porcentaje (a menudo el tamaño de fuente).
P { line-height: 120% }
(Un 20% más que el tamaño normal de fuente.)
Los colores se pueden expresar de dos formas distintas:
9 Identificador de color concreto (aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, yellow)
9 Especificación de valores RGB:
cantidad de rojo, verde y azul de la mezcla.

Colores RGB
Cuatro formas distintas de indicarlos:

9 Tres valores hexadecimales de dos dígitos precedidos
de un signo de almohadilla (#): P { color: #FA0080}
Cada número hexadecimal de dos dígitos es la cantidad
de rojo, verde y azul, respectivamente (han de estar
entre 00 y FF).
9 Tres dígitos hexadecimales precedidos de un signo de
almohadilla (#): P { color: #F00}
Los valores se interpretan como dígitos duplicados,
por lo que lo anterior es equivalente a P { color:
#FF0000}.
9 rgb seguido una lista de tres enteros (de 0 a 255)
separados por comas y entre paréntesis:
P { color: rgb(255,0,0) }.
9 rgb seguido una lista de tres porcentajes (de 0% a
100%) separados por comas y entre paréntesis:
P { color: rgb(100%,0%,0%) }.
Algunas propiedades del texto
word-spacing: espaciado entre palabras.

H1 { word-spacing: 0.4em }
letter-spacing: espaciado entre letras.
H1 { letter-spacing: 0.1em }
text-decoration: ornamentos para el texto.
9 none (ninguno)
9 underline (subrayado)
9 overline (sobrerayado)
9 line-through (tachado)
9 blink (parpadeante)
Se pueden especificar varios.
H1 { text-decoration: line-through }

Algunas propiedades del texto
vertical-align: alineación vertical del elemento.

baseline (línea base; por defecto), top (superior),
bottom (inferior), sup (como superíndice), sub (como
subíndice), text-top (alto del texto), text-bottom
(bajo del texto); o porcentajes del alto de línea.
text-align: alineación horizontal del elemento.
left (izquierda; por defecto), right (derecha),
center (centrada), justify (ambos márgenes).
text-indent: sangría de la primera línea;
puede ser negativa (sangría francesa).
line-height: espacio entre líneas.
Algunas propiedades de fuente
font-size: tamaño de fuente.

font-family: tipo (nombre) de fuente.
font-weight: grueso de las letras (normal, lighter,
bold, bolder o entero entre 100 y 900).
font-style: estilo de fuente (normal, italic).
font-variant: variación de fuente (small-caps).

Colores y fondos
color: el color del elemento.

background-color: el color de fondo.
Puede tomar el valor transparent.
background-image: imagen de fondo (URL).
background-repeat: repetición de la imagen de fondo.
Los valores que admite son repeat (por defecto, la
imagen se repite horizontal y verticalmente),
repeat-x, repeat-y y no-repeat.
background-attachment: la imagen de fondo se
desplaza con el contenido (scroll) o se queda fija
(fixed, marca de agua)
background-position: posición de la imagen de
fondo; dos coordenadas o posiciones relativas en
horizontal (left, center o right) y en vertical
(top, middle o bottom).
El modelo de caja
CSS contempla un modelo de caja con el que cada

elemento se visualiza en una caja rectangular.
Cada caja tiene un área de contenido (la información a
visualizar) y alrededor de ésta, de dentro hacia fuera,
unas áreas de relleno (padding), borde (border) y margen
(margin); el tamaño de cada área se definen con
propiedades relativas a las cuatro direcciones: arriba (top),
abajo (bottom), izquierda (left) y derecha (right).
Margen (margin)
Arriba
Borde (border)
(top)
Relleno (padding) Izquierda
(left)
Contenido
(right)
Abajo Derecha
(bottom)

El modelo de caja
Cada espacio del modelo de caja se ajusta con una

propiedad (padding o margin) seguida de un guión y el
lado que se quiere ajustar (top, bottom, left o right).
Se puede poner tan sólo el nombre de la propiedad (por
ejemplo, margin) y asignarle cuatro medidas separadas por
espacios (arriba, derecha, abajo e izquierda); si sólo se
proporciona una medida, se aplica a los cuatro lados, y si se
omite algún lado, se aplica el mismo valor que el opuesto.
P { margin: 1em 2em 3em; padding-left: 5em;
padding-right: 5em }
Tres propiedades para el borde: anchura, color y estilo.
top
width
bottom
border ― ― color
left
style
right
El borde
Anchura de cada borde: thin (fino), medium (medio),

thick (gordo) o longitud concreta.
P { border-left-width: thick }
H1 { border-width: thin thick thin 10px }
Se puede especificar un color para cada borde.
Estilo de línea de cada borde: none (sin borde), dotted
(de puntos), dashed (de guiones), solid (sólida),
double (doble), groove (surcos 3D), ridge (resalte 3D),
inset (hundido 3D) y outset (saliente 3D).

El modelo de ubicación
Para cada elemento se genera una caja; dentro de la

caja de un elemento se encuentran las cajas de los
elementos que contiene (es el bloque contenedor).
Cada caja se ubica dentro de su bloque contenedor.
El elemento raíz del documento genera una caja que
sirve como bloque contendor inicial para el resto de los
elementos; suele ocupar toda la anchura de la ventana
del navegador (o marco) y adaptar su longitud al
tamaño de las cajas que contenga (habilitándose
barras de desplazamiento si es necesario).
La ubicación de una caja respecto de su bloque
contenedor se puede realizar básicamente de tres
formas: flujo normal, ubicación relativa y ubicación
absoluta.
Flujo normal de ubicación
Método de ubicación que se aplica por defecto.

Se colocan las cajas una tras otra comenzando en la
parte superior del bloque contendor y siguiendo el orden
en el que aparecen los elementos en el documento:
Bloque
contendor
Caja del
primer
elemento P
Caja del
elemento UL
Caja del segundo elemento P

Ubicación relativa
La ubicación relativa consiste en colocar primero la caja

en la posición que le corresponde de acuerdo con el
flujo normal y luego desplazarla de acuerdo con los
valores que se proporcionen.
Para que una caja se ubique de forma relativa, el
elemento correspondiente debe asignar relative a la
propiedad position y especificar el desplazamiento con
las propiedades left y top.
La caja se desplaza hacia la derecha la distancia que
indique la propiedad left y hacia abajo la distancia que
indique la propiedad top.
Ubicación relativa
UL { position: relative; top: 20px; left: 100px }
20px
100px
Caja del elemento UL desplazada

Ubicación absoluta
La ubicación absoluta no tiene en cuenta el flujo normal
de ubicación, colocando la caja en la posición concreta
que se indique respecto de la esquina superior izquierda
del bloque contenedor.
Para que una caja se ubique de forma absoluta, el
elemento correspondiente debe asignar absolute a la
propiedad position y especificar el desplazamiento con
las propiedades left y top.
Una variación de la ubicación absoluta es la ubicación
fija: permite establecer una posición fija para la caja
respecto de la esquina superior izquierda de la ventana
del navegador (área visible).
La ubicación fija se indica con el valor fixed para la
propiedad position y permite que una caja esté
presente siempre en una posición dada aunque se
desplace el resto del contenido.
Ubicación absoluta
UL { position: absolute; top: 40px; left: 100px }
40px
100px
Caja del elemento UL desplazada

Tipo de cursor
Para terminar con esta introducción a las hojas de estilo,

una propiedad interesante, cursor, que permite indicar
el tipo de puntero de ratón a utilizar; a continuación se
indican los valores posibles y el cursor que corresponde
(auto es el valor por defecto):

07 HTML6

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

07 HTML6

Caricato da

Copyright:

Formati disponibili

Escuela Complutense Latinoamericana

Escola Complutense Latinoamericana

Programación para Internet

Universidade Federal de Santa Catarina

El diseño gráfico de las páginas web

HTML 4 recomienda no usar elementos y atributos

El lenguaje HTML: Hojas de estilo HTML: 6 - 1

Las hojas de estilo permiten un control absoluto sobre

El lenguaje HTML: Hojas de estilo HTML: 6 - 2

Métodos de definición de estilos

Cada método tiene sus implicaciones:

El lenguaje HTML: Hojas de estilo HTML: 6 - 3

Dado que se pueden utilizar conjuntamente los tres

El lenguaje HTML: Hojas de estilo HTML: 6 - 4

HTML 4 establece los mecanismos de aplicación de

El lenguaje HTML: Hojas de estilo HTML: 6 - 5

El lenguaje HTML: Hojas de estilo HTML: 6 - 6

Sin información de estilo en el documento, el texto se

Los estilos predeterminados producen presentaciones

El lenguaje HTML: Hojas de estilo HTML: 6 - 7

Casi todos los elementos HTML contemplan el uso del

El lenguaje HTML: Hojas de estilo HTML: 6 - 8

Información de estilo en el cuerpo del documento

Las características de formato especificadas con el

El lenguaje HTML: Hojas de estilo HTML: 6 - 9

En la cabecera del documento se puede colocar un

El lenguaje HTML: Hojas de estilo HTML: 6 - 10

Información de estilo en una hoja de estilo externa

El método más versátil de aplicación de características

El lenguaje HTML: Hojas de estilo HTML: 6 - 11

Una hoja de estilo se vincula con un documento HTML

El lenguaje HTML: Hojas de estilo HTML: 6 - 12

Reglas de estilo CSS

Una regla de estilo se compone de dos partes:

El lenguaje HTML: Hojas de estilo HTML: 6 - 13

Las propiedades se heredan: cuando un elemento (hijo)

El lenguaje HTML: Hojas de estilo HTML: 6 - 14

Uso de los atributos CLASS e ID

Para distinguir en la hoja de estilo entre distintas

El lenguaje HTML: Hojas de estilo HTML: 6 - 15

El atributo ID permite identificar cada elemento y

El lenguaje HTML: Hojas de estilo HTML: 6 - 16

Elementos DIV y SPAN

HTML contempla dos elementos genéricos que no tienen

El lenguaje HTML: Hojas de estilo HTML: 6 - 17

* hace referencia a todos los elementos del documento:

El lenguaje HTML: Hojas de estilo HTML: 6 - 18

Referencias en las hojas de estilo

Referencia a características estructurales:

El lenguaje HTML: Hojas de estilo HTML: 6 - 19

A:link { text-decoration: none; font-weight: bold;

El lenguaje HTML: Hojas de estilo HTML: 6 - 20

Valores para las propiedades

A cada propiedad se le puede asignar un valor dentro de

El lenguaje HTML: Hojas de estilo HTML: 6 - 21

Distancias horizontales y verticales que se expresan de

Los porcentajes se expresan como se puede esperar: un

El lenguaje HTML: Hojas de estilo HTML: 6 - 23

Cuatro formas distintas de indicarlos:

El lenguaje HTML: Hojas de estilo HTML: 6 - 24

Algunas propiedades del texto

word-spacing: espaciado entre palabras.

El lenguaje HTML: Hojas de estilo HTML: 6 - 25