1 Introducción a las hojas de
estilo:
En los entornos
estudiados en que la Web fue creada, la gente estaba más preocupada
por el
cabidad de sus páginas
que por su presentación. A medida que la Web era descubierta por un
espectro mayor de
personas de distintas procedencias, las obstaculización del HTML se
transformaron en fuente de continua de fracaso, y los autores se
vieron forzados a adelantar las limitaciones estilísticas del HTML.
Las hojas de estilo resuelven estos problemas al mismo tiempo que
reemplazan al limitado rango de mecanismos de presentación del HTML.
Con las hojas de estilo
es más fácil definir la cantidad de espacio entre líneas, el
sangrado
de las líneas, los
colores a utilizar para el texto y el fondo, el tamaño y estilo de
las fuentes, y muchos más detalles.
Las hojas de estilo
representan, por tanto, un avance importante para los diseñadores de
páginas web, al darles
un mayor rango de posibilidades para mejorar la apariencia de sus
páginas. Además, si
queremos generar documentos con un aspecto idéntico para dar un
aspecto
más robusto y claro a
nuestros documentos nos vemos obligados a señalar, para cada
elemento
de nuestras páginas, el
formato que queremos. Con las hojas de estilo definimos las
características comunes
a todas nuestras páginas una sola vez, lo que facilita mucho nuestro
trabajo cuando tenemos
muchas páginas en el servidor.
Las Hojas de Estilo o CSS
(Cascading Style Sheets - Hojas de Estilo en Cascada) son un
mecanismo que permite
aplicar formato a los documentos escritos en HTML (y en otros
lenguajes estructurados,
como XML) separando el contenido de las páginas de su apariencia:
- la información estará
contenida en la página HTML, pero este archivo no debe definir
cómo será visualizada
esa información
- las indicaciones acerca
de la composición visual del documento estarán especificadas en
el archivo de la CSS.
Veamos un ejemplo de
código CSS que indica que los encabezados H1 deben mostrarse con
tipografía Arial, de 19
puntos, en color azul y alineación central:
H1 {
font-family: Arial,
Sans-serif;
font-size: 19pt;
color: #0000FF;
text-align: center;
}
El archivo css contiene
reglas que constan de un selector (en este ejemplo, H1) y una o más
declaraciones (en el
ejemplo tenemos cuatro declaraciones). Cada declaración tiene dos
partes: una propiedad
(por ejemplo, FONT SIZE) y un valor (en este caso, 19pt). Estas
reglas
son las que determinan
cómo deberá mostrarse la página.
Selector { declaraciones
}
declaración = propiedad:
valor
Como se ve en el ejemplo
anterior, puede haber varias declaraciones, debiendo separar cada
una de la siguiente con
el carácter punto y coma (;). Se puede dejar el ; después de la
última
declaración, pero no es
obligatorio.
Hay tres formas de
trabajar con css:
- Hojas de estilo en un
archivo externo
- Hojas de estilo
incrustadas
- Hojas de estilo en
línea
2 Hojas de estilo en un
archivo externo
Salvamos el fichero
anterior, por ejemplo como “estilos1.css”. Luego, en cada página
html de
nuestro sitio agregamos
la etiqueta link indicando el fichero que contiene nuestra hoja de
estilo
(el archivo con extensión
.css):
estilos1.css
H1 {
font-family: Arial,
Sans-serif;
font-size: 19pt;
color: #0000FF;
text-align: center;
}
indice.html
<html>
<head>
<title>Título</title>
<LINK
REL="stylesheet" HREF="estilos1.css"
TYPE="text/css">
</head>
<body>
…
<p>Este párrafo es
normal</p>
<h1> Este texto
aparecerá con fuente arial de 19 puntos, en color azul y
alineación central.</h1>
…
</body>
</html>
El elemento LINK aparece
siempre en la sección HEAD del documento y especifica:
• el tipo de vínculo:
a una hoja de estilo ("stylesheet")
• la ubicación de la
hoja de estilo a través del atributo "href"
• el tipo de hoja de
estilo que se vincula: "text/css"
Ahora, todos los
encabezados H1 de las páginas que contienen la referencia al archivo
de la CSS
tendrán el aspecto que
hemos definido.
El documento que contiene
todas las definiciones de estilo tendrá extensión .css, y no podrá
contener ninguna etiqueta
HTML; sólo podrá contener los estilos.
Se pueden importar tantos
documentos de estilos como se deseen, siempre teniendo en
cuenta que si existen
definiciones que entran en conflicto entre los diferentes documentos,
el
navegador tendrá en
cuenta únicamente la última opción leída.
3 Hojas de estilo
incrustadas
Hemos visto cómo se
especifican las reglas de estilo en un archivo externo. Este método
es el
más recomendable y el
que permite mayor flexibilidad ya que los estilos pueden cambiarse
sin tocar el código HTML
y la CSS puede ser compartida por varias páginas, pero también
existe la posibilidad de
poner la hoja de estilo dentro de una página HTML usando el elemento
STYLE en el interior del
documento al que se le quiere dar estilo, en la sección <head>.
De esta
forma los estilos serán
reconocidos antes de que la página se cargue por completo.
<HTML>
<HEAD>
<TITLE>CSS
incrustada</TITLE>
<STYLE
type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Título color
azul</H1>
<P>Un párrafo
cualquiera...</P>
</BODY>
</HTML>
Como se ve en el ejemplo,
el elemento STYLE se usa dentro del encabezado (<HEAD></HEAD>)
de la página,
especificando el tipo de hoja de estilo:
<STYLE
type="text/css">
H1 { color: blue }
P { color: red }
... (aquí se agregan
todas las reglas de estilo) ...
</STYLE>
Este método permite
aplicar la hoja de estilo sólo a la página que la contiene. Si bien
no es
tan práctico como usar
una CSS externa, resulta útil cuando en nuestro sitio tenemos
algunas
pocas páginas que usan
un formato distinto al resto.
En muchos casos convendrá
usar ambos métodos simultáneamente: poner un elemento link a
una hoja externa para
aplicar un estilo general y luego crear una hoja incrustada en la que
solamente deberemos
definir las reglas específicas para esa página. Por las leyes de
cascada de
las CSS, en caso de
existir una misma regla (una en la hoja externa, otra en la hoja
incrustada)
con distintos valores,
tiene preponderancia la definida en la hoja incrustada.
4 Hojas de estilo en
línea
Por último, también es
posible aplicar el estilo directamente en la etiqueta o elemento HTML
utilizando el siguiente
formato:
<elemento
style="propiedad1: valor1; propiedad2: valor2; ...">
...
</elemento>
Nótese que las
declaraciones van entrecomilladas.
Por ejemplo:
<p style="text-align:
left; color: blue"> Texto alineado a la izquierda y
de color azul </p>
<p
style="color:red">Párrafo de texto en color rojo</p>
Por supuesto, la
definición del estilo dentro de la propia etiqueta no es la manera
más eficaz de
utilizar las hojas de
estilo, pero pueden existir casos que lo justifiquen. La existencia
de una
regla como la del último
ejemplo constituye por sí misma una hoja de estilo por lo que
debemos
declarar en el encabezado
de la página el tipo de CSS que estamos usando.
<STYLE
type="text/css"></STYLE>
Esta declaración no será
necesaria si en la misma página estamos usando una hoja de estilo
incrustada o si existe
una referencia a una hoja externa.
Esta forma de aplicar la
hoja de estilo directamente en la etiqueta es similar al modo usado
en
el código HTML, pero con
dos importantes diferencias:
- El conjunto de
propiedades que se pueden aplicar es mucho mayor y
- Los estilos
especificados en una hoja de estilo (cualquiera sea su origen) tienen
preferencia
sobre los formatos
aplicados con HTML.
Esto significa que si en
nuestra hoja de estilo hemos definido:
P {text-align: left}
Todos los párrafos
quedarán alineados por la izquierda y, si en un párrafo
determinado, usamos:
<P align="center">
El párrafo seguirá
estando alineado por la izquierda porque las reglas de las CSS tienen
más
fuerza que el formato
aplicado con HTML.
5 Modelo de caja:
*En esta sección se han
reproducido contenidos de [2] con permiso del autor.
Todos los elementos HTML
que aparecen en un documento se emplazan dentro de una caja
rectangular que los
incluye, es decir, los rodea. Esta característica se estudia por
medio del
denominado “Modelo de
Caja”. En este modelo se especifican determinadas áreas de la caja
de cada elemento HTML que
podrán ser dotadas de estilo según las necesidades de
presentación que
tengamos. El comportamiento de la caja va a depender del tipo de
elemento
que vayamos a tratar.
El modelo de caja de CSS
describe las cajas rectangulares que son generadas por los elementos.
El elemento raíz del
documento (<HTML> o, mejor aún, <BODY> en HTML) genera
una caja que
actúa como bloque de
contención de las cajas generadas subsecuentemente. A su vez, cada
caja
puede actuar como bloque
de contención de otras cajas generadas por sus elementos
descendientes.
Cada una de las cajas
puede separarse en cuatro áreas distintas que definen su aspecto.
− Contenido: es el área
que contiene la información representable del elemento (textos,
imágenes, objetos... ).
− Relleno (padding):
esta área es el espacio existente entre el rectángulo del contenido
y
el borde definible para
cada una de las cajas.
− Borde (border): línea
que encierra completamente el contenido y su relleno; el
elemento puede presentar
un borde con un grosor, una forma y un color que delimitan las
áreas anteriores.
− Imagen de fondo
(background-image): imagen que se muestra por detrás del contenido
y el espacio de relleno.
− Color de fondo
(background-color): color que se muestra por detrás del contenido y
el
espacio de relleno.
− Margen (margin): la
parte más externa de cada caja de elemento es el margen. Este
proporciona el espacio
que separa una caja de las generadas por los elementos anterior y
siguiente.
El relleno y el margen
son transparentes, por lo que en el espacio ocupado por el relleno se
muestra el color o imagen
de fondo (si están definidos) y en el espacio ocupado por el margen
se
muestra el color o imagen
de fondo de su elemento padre (si están definidos). Si ningún
elemento padre tiene
definido un color o imagen de fondo, se muestra el color o imagen de
fondo de la propia página
(si están definidos).
Si una caja define tanto
un color como una imagen de fondo, la imagen tiene más prioridad y
es
la que se visualiza. No
obstante, si la imagen de fondo no cubre totalmente la caja del
elemento
o si la imagen tiene
zonas transparentes, también se visualiza el color de fondo.
Combinando
imagenes transparentes y
colores de fondo se pueden lograr efectos gráficos muy interesantes
Las áreas de padding,
border y margin se dividen en cuatro segmentos: top (superior),bottom
(inferior), left (izquierdo) y right (derecho). De este modo podemos
distinguir border-right, border-top y border-bottom (lo mismo para
padding y margin).Veamos un ejemplo donde se manipula la caja de un
párrafo: en la figura de la izquierda
podemos apreciar tres
cajas iguales, correspondientes a los tres párrafos que se incluyen
en el
documento. En la figura
de la derecha observamos que el párrafo central ha definido un
estilo
para su caja, añadiendo
un grosor al margen transparente, un borde punteado de color rojo y
un
espacio de relleno en
color azul.Todo esto es muy técnico, pero ¿para qué sirve?:
fundamentalmente para tener el control no
sólo de las propiedades
del elemento en sí (su color, la fuente usada para el texto, etc.),
sino
también de las
propiedades de esa caja generada por el elemento (sus márgenes, sus
bordes, la
posición dentro del
documento) que será lo que nos permita componer visualmente la
página
de un modo mucho más
rico y flexible que con HTML.
Este modelo de caja es el
que permite, por ejemplo, que cualquier elemento de la página pueda
recibir todas de las
propiedades definidas en CSS. Por eso, a diferencia de lo que sucede
con
HTML, todos los elementos
pueden tener una imagen de fondo o un borde (sin necesidad de usar
una tabla para eso);
también es posible darle una ubicación precisa a cualquier elemento
dentro
de la página, ya sea con
respecto a la pantalla o a otros elementos. Mejor aún, nos da la
posibilidad de usar un
lenguaje como, por ejemplo JavaScript para conseguir efectos muy
interesantes modificando
las propiedades de las cajas (moverlas de su posición, mostrarlas o
esconderlas, cambiar su
tamaño, etc.).
Cada etiqueta HTML va a
generar una caja según el tipo al que pertenezca, pero la
descripción
anterior se aplica a
todas ellas. La clasificación del tipo de etiquetas es la siguiente:
- Etiquetas de bloque:
este tipo de etiquetas son aquellas que fuerzan un salto de línea
antes y después del
elemento. Por ejemplo, las etiquetas <div> y <p> son de
este tipo.
− Etiquetas en línea:
son las etiquetas que se incluyen dentro de otro elemento, y que no
generarán saltos de
línea, de modo que su anchura será la necesaria para mostrar su
contenido. Por ejemplo,
las etiquetas <b> y <u> pertenecen a este tipo.
− Etiquetas de
sustitución: se trata de las etiquetas referidas a elementos que
solicitan
recursos al servidor, de
forma que su caja será generada en función del objeto que se
incluye en sustitución a
la etiqueta. Por ejemplo, las imágenes mediante etiquetas
<img>.
6 Cascada:
Se llama así a la
capacidad de que las informaciones de estilo provenientes de varias
fuentes
puedan combinarse.
Pensemos, por ejemplo, en el caso del site de una organización con
varios
departamentos y otros
tantos diseñadores encargados del mantenimiento de las páginas. El
modo
de asegurar la
uniformidad gráfica del sitio completo es utilizar una hoja de
estilo común donde
estén definidos los
aspectos básicos del diseño (fuentes, colores, etc.). Luego cada
departamento puede tener,
además, su propia hoja de estilo donde se definirán los aspectos
específicos de ese
departamento. Estas hojas de estilo particulares no necesitan
reproducir
aquella hoja común, sino
que basta con importarla haciendo que los estilos definidos en una y
otras actúen
conjuntamente. Cualquier cambio en la hoja de estilo común (una
modificación en
los colores
institucionales, por ejemplo) se vería reflejado inmediatamente en
todas las páginas
vinculadas.
La cascada define una
secuencia ordenada de hojas de estilo en la que las reglas de las
últimas
hojas tienen una
prioridad mayor que las de las primeras. No todos los lenguajes de
hojas de
estilo soportan la
cascada.
7 Propiedades
Existen una serie de
convenciones en la sintaxis de las definiciones formales de
propiedades, en
cuanto a los valores que
pueden tomar:
| separa dos o más
alternativas; exactamente una de ellas debe aparecer
|| separa dos o más
opciones; una o más de ellas debe aparecer, en cualquier orden
[] agrupamiento de
elementos
+ repetición 1 ó más
veces
* repetición 0 ó más
veces
? repetición 0 ó 1 vez
{A,B} repetición como
mínimo A veces y como máximo B veces
Ejemplos:
* reproducidos de [2] con
permiso del autor
[<family-name> , ]*
indica que el valor de tipo <family_name> seguido por una coma
se
puede incluir cero o más
veces.
El valor <url>?
<color> significa que la URL es opcional y el color obligatorio
y en el orden
indicado.
Por último, el valor
[<medida> | thick | thin] {1,4} indica que se pueden escribir
entre
1 y 4 veces un valor que
sea o una medida o la palabra thick o la palabra thin.
Las propiedades que
podemos usar dentro de una hoja de estilo son:
Propiedades de tipo de
letra:
font-size tamaño de la
letra
<porcentaje> |
<medida> | xx-small | x-small | small | medium| large |
x-large | xx-large |
smaller | larger (respecto del anterior definido)
font-weight Peso de la
letra
En entero (Normal=400,
Bold=700)
Normal | bold | bolder |
lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700
| 800 | 900
font-style Estilo de
letra
normal | italic | oblique
font-family Familia de
tipos de letra genérica (serif, …)
[[<nombre-de-la-familia>
| <familia-genérica>],]*
[<nombre-de-la-familia>
| <familia-genérica>]
font-variant con el valor
small-caps las mayúsculas ocupan lo mismo que las minúsculas
normal | small-caps
font genérico para
definir los anteriores en una sola propiedad
[font-style ||
font-variant || font-weight]? font-size
[/line-height]?
font-family]
Ejemplo: STYLE=”font:
18pt bold italic; …”
Ejemplo 1:
<style
type="text/css">
h1 {font-family:
"Verdana"; font-style: italic; font-weight: 600 }
<!-- las cabeceras h1
aparecerán con una fuente de la familia Verdana, pero si no
se encuentra esa familia,
el navegador utilizará la que haya por defecto. -->
p {font-family: "Arial",
sans-serif; font-size: xx-large }
<!-- los párrafos
utilizarán la familia Arial, pero si no se encuentra esa
familia, el navegador
recurrirá a la fuente sans-serif. -->
h2 {font-family: "Times
New Roman", Garamond, "Courier New"; font-size: 75% }
<!-- las cabeceras h2
aparecerán con una fuente de la familia Times New Roman, si
no se encuentra la
familia, recurrimos a Garamond, pero si aún así no la
encontramos, se intentará
con Courier New. -->
</style>
...
<body>
<h1>Este es un
texto de cabecera H1 con fuente verdana</h1>
<h2>Este otro
texto, de cabecera H2, utiliza times new roman</h2>
<p>Este párrafo
aparece con fuente arial </p>
</body>
Propiedades de color y
fondo:
color: color del elemento
html
<color>
background-color: color
de fondo de un elemento HTML
<color> |
transparent
background-image: imagen
de fondo de un elemento HTML
none | <URL del
recurso>
background-repeat: forma
en que se repite una imagen en el fondo
repeat | repeat-x |
repeat-y | no-repeat
background-position:
indica la posición dentro del contenedor donde se sitúa la imagen
de background
[top | center | bottom]
|| [left | center | right]
background-attachment:
indica si la imagen se mantiene fija cuando se realice un scroll
(fixed) o no (scroll)
scroll | fixed
background: genérico
para definir los anteriores en una sola propiedad
[background-color ||
background-image || background-repeat ||
background-attachment ||
background-position]
Ejemplo 2:
<style
type="text/css">
body { background-image:
url("imagenes/buzon_cerrado.jpg");
background-repeat:
repeat-y;
background-position: top
left; }
p { font: 14pt Verdana; }
</style>
...
<body>
<p>En este
documento hemos incluido una imagen de fondo de un archivo .jpg,
hemos
indicado que se repita
verticalmente, y cuya primera aparición estará alineada con
la esquina superior
izquierda.</p>
</body>
Propiedades de texto:
text-decoration: estilo
especial para el texto
none | [underline ||
overline || line-through]
text-transform: efectos
sobre un grupo de texto (conversión a mayúsculas, …)
capitalize | uppercase |
lowercase | none
text-align: alineación
horizontal de elementos de texto
left | right | center |
justify
text-indent: sangrado del
texto
<medida> |
<porcentaje>
letter-spacing: permite
definir el espaciado entre las letras
normal | <medida>
word-spacing: separación
entre palabras
normal | <medida>
line-height: distancia
entre líneas de un párrafo
normal | <medida> |
<porcentaje>
Ejemplo 3:
<style
type="text/css">
h1 { text-transform:
uppercase; }
h2 { text-decoration:
underline; text-align: right}
</style>
...
<body>
<h1>este es un
texto cabecera h1 en mayúsculas</h1>
<h2> texto
subrayado y alineado a la derecha</h2>
</body>
Ejemplo 3:
<style
type="text/css">
h1 { text-transform:
uppercase; }
h2 { text-decoration:
underline; text-align: right}
</style>
...
<body>
<h1>este es un
texto cabecera h1 en mayúsculas</h1>
<h2> texto
subrayado y alineado a la derecha</h2>
</body>
Propiedades de las cajas
de los elementos:
1) Propiedades del
margen:
margin: <medida> |
<porcentaje> | <auto>
Especifica el grosor del
margen de los cuatro lados de la caja de un elemento.
Podremos indicar entre 1
y 4 valores que se referirán a los cuatro márgenes de la caja y
que podrán ser medidas
(un ancho fijo), valores en porcentaje (calculado con respecto al
ancho del bloque de
contención) o el valor auto (determinado por el navegador),
pudiendo combinarse unos
con otros en la misma lista:
• Si hay sólo un
valor: se aplica a todos los lados.
• Si hay dos valores:
los márgenes superior e inferior son determinados por el
primer valor y los
márgenes derecho e izquierdo son determinados por el segundo.
• Si hay tres valores:
el superior es definido por el primer valor, el izquierdo y el
derecho son definidos por
el segundo, y el inferior es definido por el tercero.
• Si hay cuatro
valores: se aplican al margen superior, derecho, inferior e
izquierdo,
respectivamente.
Mediante las propiedades
margin-top, margin-right, margin-bottom y margin-left
podremos aplicar de forma
individual los márgenes superior, derecho, inferior e izquierdo
respectivamente. Los
valores posibles para estas propiedades son los mismos que para la
propiedad margin.
margin-left: <medida>
| <porcentaje> | <auto>
margin-right: <medida>
| <porcentaje> | <auto>
margin-top: <medida>
| <porcentaje> | <auto>
margin-bottom: <medida>
| <porcentaje> | <auto>
2) Propiedades del borde:
Las propiedades del borde especifican el ancho, color y estilo del
borde de una caja. Estas
propiedades se aplican a todos los elementos. Vamos a ver sólo las
resumidas, pero igual que
en los casos anteriores, se puede aplicar un estilo diferente a cada
uno de los cuatro bordes
de la caja.
border-style: estilo del
borde del elemento
[hidden | solid | dotted
| dashed double | groove | ridge | inset |
outset]
El valor inicial del
estilo de borde es 'none', ningún borde será
visible a menos que se
establezca otro estilo de borde.
None: Ningún borde
Hidden: Igual a 'none'
Dotted: El borde es una
serie de puntos
Dashed: El borde es una
serie de pequeños segmentos de línea
Solid: El borde es un
único segmento de línea
Double: El borde son dos
líneas sólidas
Groove: El borde luce
como si estuviese tallado en la página
Ridge: Lo opuesto a
'grove': el borde parece que estuviera sobresaliendo de la
página
Inset: El borde hace que
toda la caja luzca como si estuviera empotrada en la
página
Outset: Lo opuesto a
'inset': el borde hace que toda la caja parezca sobresalir de
la página
border-width: anchura del
borde
[<medida> |
<porcentaje> | thin | medium | thick]
border-color: color del
borde
<color> |
transparent
border: genérico para
definir los bordes anteriores
[border-width ||
border-style || <color>]
Ejemplo 4:
<style
type="text/css">
h1 { border-width: thick;
border-color: red; border-style: dotted; }
h2 { border-style: solid;
margin: 10px;}
<!-- margen de 10
píxeles en todas las direcciones. -->
h3 { border-style: solid;
margin: 0.1cm auto auto 0.75in;}
<!-- 0.1 cm para el
margen superior y 0.75 pulgadas para el izquierdo,
mientras que para los
márgenes derecho e inferior se ajustará
automáticamente. -->
h4 { border-bottom: thick
solid red }
<!-- La regla anterior
define un borde inferior para las cabeceras de tipo
h4 (una línea gruesa
entera de color rojo). -->
</style>
...
3) Propiedades del
relleno:
padding-left: <medida>
| <porcentaje>
padding-right: <medida>
| <porcentaje>
padding-top: <medida>
| <porcentaje>
padding-bottom: <medida>
| <porcentaje>
Estas propiedades
determinan el relleno superior, derecho, inferior e izquierdo de una
caja. Se puede
especificar un ancho fijo o indicar un porcentaje que se calcula con
respecto al ancho del
bloque de contención (aún para 'padding-top' y 'padding-bottom')
A diferencia de las
propiedades del margen, los valores para el relleno no pueden ser
negativos.
Padding
La propiedad 'padding' es
una propiedad resumida que se utiliza para definir los cuatro
rellenos a la vez. Pueden
especificarse de 1 a 4 valores para el ancho del relleno:
• Si hay sólo un
valor: se aplica a todos los lados.
• Si hay dos valores:
los rellenos superior e inferior son determinados por el primer
valor y los rellenos
derecho e izquierdo son determinados por el segundo.
• Si hay tres valores:
el superior es definido por el primer valor, el izquierdo y el
derecho son definidos por
el segundo, y el inferior es definido por el tercero.
• Si hay cuatro
valores: se aplican al relleno superior, derecho, inferior e
izquierdo,
respectivamente.
El color de la superficie
o la imagen del área de relleno es especificado a través de la
propiedad 'background'
del elemento.
Ejemplo 5:
<html>
<head>
<title>Ejemplo
estilos</title>
<style
type="text/css">
.Parrafo1 {
padding-left: 50%;
padding-right: 20px;
padding-top: 1em;
padding-bottom: 6pt;
background-color:
yellow;
border: 1px solid;
}
.Parrafo2 {
margin: 1.5cm;
border: solid red thin;
padding-left: 25%;
padding-right: 25%;
padding-top: 0.5cm;
padding-bottom: 1cm;
background-color: blue;
}
b { margin: 2cm;
border: solid red thin;
background-color: green;
}
</style>
</head>
<body>
<p> Este párrafo
no tiene estilo </p>
<p class="Parrafo1">A
este párrafo le hemos aplicado las cuatro propiedades
individuales para el
relleno y para cada lado hemos usado una unidad de medida
distinta. Cuando se usa
un porcentaje (como en <code>padding-left</code>)
éste
se refiere al ancho del
bloque de contención, es decir, a la caja del
elemento padre (en este
ejemplo, es <code><BODY></code>). Como el
color
de fondo del relleno es
igual a la propiedad "<code>background</code>"
del elemento, hemos
usado esta propiedad para definir un color amarillo de fondo.</p>
<p> Este párrafo
no tiene estilo </p>
<p
class="Parrafo2">Este párrafo tiene un estilo
diferente</p>
<p> Este párrafo
no tiene estilo pero <b>este texto en negrita</b> sí
<b>y este
también</b> ¿lo
ves?.</p>
</body>
</html>
El resultado es el
siguiente:
Propiedades de
posicionamiento y visualización:
Los navegadores crean y
posicionan de forma automática todas las cajas que forman cada
página
HTML. No obstante, CSS
permite al diseñador modificar la posición en la que se muestra
cada
caja. Así, CSS define
cuatro propiedades llamadas top, right, bottom y left para controlar
el
desplazamiento de las
cajas posicionadas desde su posición original:
top: desplazamiento
superior
bottom: desplazamiento
inferior
right: desplazamiento
lateral derecho
left: desplazamiento
lateral izquierdo
Los valores que pueden
tomar estas propiedades son:
[<medida> |
<porcentaje> | auto |inherit ]
Además de las
propiedades que controlan el posicionamiento de los elementos, CSS
define otras
propiedades para
controlar su visualización. Entre ellas se encuentra la propiedad
visibility:
visibility: determina la
visibilidad de un elemento
[hidden | visible]
Inicialmente todas las
cajas que componen la página son visibles. Empleando el valor hidden
es
posible convertir una
caja en invisible para que no muestre sus contenidos. El resto de
elementos de la página
se muestran como si la caja todavía fuera visible, por lo que en el
lugar
donde originalmente se
mostraba la caja invisible, ahora se muestra un hueco vacío.
Unidades de medida:
Hay dos tipos de unidades
de medida: relativas y absolutas.
Las unidades de medidas
relativas especifican una medida en relación a otra propiedad de
medida. Las hojas de
estilo que utilizan unidades relativas modificarán su escala de un
medio a
otro más fácilmente
(ej., de un monitor de ordenador a una impresora láser). Las
unidades
relativas son:
• em: relativa respecto
del tamaño de fuente empleado. Aunque no es una definición
exacta, el valor de 1em
se puede aproximar por la anchura de la letra M ("eme
mayúscula") del
tipo y tamaño de letra que se esté utilizando.
• ex: relativa respecto
de la altura de la letra x ("equis minúscula") del tipo y
tamaño de
letra que se esté
utilizando.
• px: píxeles,
relativa respecto de la resolución de la pantalla del usuario.
La unidades de medida
absoluta son útiles solamente cuando las propiedades físicas del
medio
de salida son conocidas.
Las unidades absolutas son:
• in: inches — 1
pulgada (inch) es igual a 2.54 centímetros.
• cm: centímetros.
• mm: milímetros.
• pt: puntos — los
puntos usados por CSS2.1 equivalen a 1/72 pulgadas. Es la unidad
absoluta más utilizada.
• pc: picas — 1 pica
es igual a 12 puntos.
8 La regla @import:
La regla @import permite
importar hojas de estilo desde otras hojas de estilo. Se puede usar
de las siguientes formas:
@import
"hoja_de_estilo.css";
@import
url("hoja_de_estilo.css");
Esta declaración debe ir
antes que cualquier otra regla en la hoja de estilo.
Puede usarse en un
archivo CSS o dentro del elemento STYLE.
9 Agrupamiento
Cuando tenemos varios
selectores que comparten las mismas declaraciones, pueden agruparse
en una lista separada por
comas (,). No se trata de un tipo de selector especial sino de una
fórmula abreviada para
aplicar las mismas propiedades a distintos selectores en un solo
paso.
Por ejemplo, si tenemos:
H1 {font-family: Arial,
Sans-serif}
P {font-family: Arial,
Sans-serif}
TABLE {font-family:
Arial, Sans-serif}
#inclinada {font-family:
Arial, Sans-serif}
Podemos simplificarlo de
este modo:
H1, P, TABLE, #inclinada
{font-family: Arial, Sans-serif}
Por otra parte, las
propiedades que se desean modificar en una CSS para un mismo selector
pueden agruparse, pero
será necesario separar cada una de ellas con un punto y coma:
p {text-align:center;
color:red}
Normalmente se describe
una propiedad por línea, de la siguiente manera:
h1 {
padding-left: 11em;
font-family: Georgia,
"Times New Roman", Times, serif;
color: red;
background-color:
#d8da3d;
}
El valor, representado a
la derecha de los dos puntos (:), establece el valor de la propiedad.
Es
importante recordar que
si el valor está formado por más de una palabra, hay que ponerlo
entre
comillas.
p {font-family: "sans
serif";}
10 Comentarios
En cualquier lugar de la
página de estilos pueden incluirse comentarios. Estos no influyen en
el
procesamiento de la Hoja
de Estilo y deben comenzar con una barra y un asterisco (/*) y
terminar con un asterisco
y una barra (*/). Pueden ocupar varias líneas de texto pero no
pueden
anidarse (incluir un
comentario dentro de otro comentario).
/* Esto es un comentario
*/
11 Selectores
Los selectores
identifican a un elemento dentro de la página Web para luego poder
definir
sus propiedades. Los
distintos tipos de selectores abarcan desde el simple nombre de las
etiquetas usadas en HTML
(BODY, P, TABLE, UL, etc.) hasta complejas combinaciones que
permiten un juego muy
amplio de selecciones dentro de la página.
El conocimiento en
profundidad de los distintos selectores es uno de los aspectos más
complejos
del lenguaje de las Hojas
de Estilo y también el que nos permite sacar el máximo provecho de
las CSS.
Existen muchos editores
de páginas Web que facilitan la labor de crear y aplicar Hojas de
Estilo,
pero los selectores que
se pueden definir con estos programas son sólo los más elementales.
La
complejidad que pueden
alcanzar los selectores contextuales escapa a las posibilidades de
cualquier herramienta y
es ahí donde los diseñadores deberán apelar a sus propios
recursos.
En esta sección se
explican los llamados selectores simples.
10.1. Selectores de tipo
o etiqueta
Son los que identifican a
un tipo de elemento dentro de los que conforman el código HTML.
Es decir, usan la misma
palabra que la etiqueta (tag) sin los signos < y >. Por
ejemplo, TABLE
selecciona todos los
elementos <TABLE> de la página. La siguiente regla identifica
a los
elementos <H1> de
la página y los alinea centralmente:
H1 {text-align: center}
Los selectores de tipo
tienen la ventaja de que, con un simple cambio en la Hoja de Estilo,
podemos modificar el
aspecto de todos los elementos de ese tipo en todas las páginas de
nuestro sitio. Esa es
también su limitación: su utilidad se limita al caso en que todos
los
elementos de un tipo
tengan la misma apariencia en cada una de nuestras páginas. ¿Qué
sucede
si en ciertos casos
queremos usar un párrafo con características diferenciadas?.
10.2. Selectores de
clases
Solucionemos la cuestión
anteriormente planteada: se puede conseguir que haya más de un
estilo para cada etiqueta
HTML utilizando las clases. El selector de clases consta de un punto
(.) seguido por el nombre
de la clase que hayamos creado. Supongamos que para publicar un
reportaje queremos contar
con un párrafo especial que denominaremos "pregunta"; en
nuestra
hoja de estilo añadimos:
P.pregunta {font-weight:
bold; font-style: italic}
Ahora, a los párrafos
que corresponden a las preguntas del entrevistador en el supuesto
reportaje les agregamos
el atributo CLASS dentro de la etiqueta de la página HTML:
<P
CLASS="pregunta">Esta es una pregunta del reportero</P>
Todos los párrafos de la
clase "pregunta" aparecerán con texto en itálicas
negritas para
diferenciarlos de los
párrafos normales.
También se pueden
especificar clases genéricas. En este caso se pone el nombre de una
clase
tras el punto, pero no se
indica por delante el nombre de ninguna etiqueta. Cualquier etiqueta
que utilice esa clase
quedará afectada por su código CSS. Veamos un ejemplo: en nuestra
hoja
de estilo añadimos:
.contraste {color:
#FFFF00; background-color: #000000}
En este caso, la clase
"contraste" equivale a cualquier elemento con el atributo
CLASS="contraste".
Para usarlo, en el documento html podríamos incluir, por ejemplo:
<H1
CLASS="contraste">Un título con contraste</H1>
<P
CLASS="contraste">Un párrafo con contraste</P>
<OL
CLASS="contraste">Una lista con contraste</B>
Ejemplo 6:
Supongamos el archivo
misestilos.css cuyo contenido es:
h1 {color: red}
p {color: blue}
p.invertido {color:
white; background-color: black}
.colorido {color: green;
background-color: yellow}
Ahora supongamos el
siguiente documento html:
<html>
<head>
<title>Ejemplo de
estilos</title>
<link rel="stylesheet"
href="misestilos.css" TYPE="text/css">
</head>
<body>
<h1>Título rojo
(selector de tipos)</h1>
<p>Los párrafos
son azules. Se usa un selector de tipos
para
individualizarlos.</p>
<p
class="invertido">Una clase de párrafo especial. La
clase se llama "invertido"
y el selector es un
selector de clases. El texto es blanco sobre fondo negro.</p>
<p
class="colorido">Este párrafo usa otra clase llamada
"colorido".
El fondo es amarillo y
el texto es verde. Esta es una clase genérica
que se puede aplicar a
cualquier elemento, no solamente a los párrafos. </p>
<p>Por ejemplo, una
palabra en negrita (elemento B de HTML) se verá así:
<b>con negritas y
texto azul,</b> pero un elemento B con el
atributo
CLASS="colorido" se verá así: <b
class="colorido">texto
en negrita, letras
verdes y fondo amarillo</b>.</p>
<p>Otro ejemplo.
Esta es una lista de la clase "colorido" que tiene</p>
<ul class="colorido">
<li>Texto en
verde</li>
<li>Fondo
amarillo</li>
</ul>
<p>Pero en el caso
en que apliquemos la clase "invertido"
a una lista:</p>
<ul class="invertido">
<li>Esta no tendrá
ningún efecto porque la clase "invertido"
se puede aplicar sólo a
los párrafos.</li>
</ul>
</body>
</html>
10.3. Selectores de ID
Los selectores de ID se
parecen a los selectores de clases, pero sólo pueden aplicarse a un
elemento de la página.
Esto se hace con el atributo id: no pueden existir dos elementos
dentro
del mismo documento con
el mismo id. Cada id tiene que ser único. En cualquier otro caso, se
debería usar el atributo
class en su lugar.
Sintaxis: en vez de usar
un punto se utiliza el carácter # y en lugar de class se pone id.
<html>
<head>
<style
type="text/css">
#elemento1 { declaración
de estilo }
...
</style>
</head>
<body>
<p id="elemento1">
Párrafo que aplica el estilo. </p>
...
</body>
</html>
Por ejemplo:
<html>
<head>
<style
type="text/css">
h1#titulo1 {text-align:
center}
#inclinada {font-style:
italic}
</style>
</head>
<body>
<h1
id="titulo1">Título centrado</h1>
<p
id="inclinada">Párrafo en cursiva</p>
</body>
</html>
En el primer caso, aquel
elemento H1 con ID="titulo1" de la página será centrado.
En el segundo,
cualquier elemento que
tenga asignado el atributo ID="inclinada" irá en itálica.
Los selectores de ID no
tienen el grado de flexibilidad de los selectores de clases, pero son
una
opción para aquellos
casos en que se necesite identificar de modo exclusivo un determinado
elemento de la página.
Veamos un ejemplo:
<h1>Capítulo
1</h1>
...
<h2>Capítulo
1.1</h2>
...
<h2>Capítulo
1.2</h2>
...
<h1>Capítulo
2</h1>
...
<h2>Capítulo
2.1</h2>
...
<h3>Capítulo
2.1.2</h3>
...
El código anterior
podría hacer referencia a encabezados de cualquier documento
dividido en
capítulos y párrafos.
Sería normal asignar un id a cada capítulo de la siguiente manera:
<html>
<head>
<style
type="text/css">
h1#capitulo1 {color:red;
font-size: 150%; text-align: center}
h2#capitulo1-1
{color:blue; font-size: 120%; font-style: italic}
h2#capitulo1-2
{color:green; font-size: 115%; font-style: italic}
h1#capitulo2
{color:yellow; font-size: 125%; text-align: center}
h2#capitulo2-1
{color:orange; font-size: 90%; font-style: italic}
h3#capitulo2-1-2
{font-size: 80%; font-style: italic}
</style>
</head>
<body>
<h1
id="capitulo1">Capítulo 1</h1>
...
<h2
id="capitulo1-1">Capítulo 1.1</h2>
...
<h2
id="capitulo1-2">Capítulo 1.2</h2>
...
<h1
id="capitulo2">Capítulo 2</h1>
...
<h2
id="capitulo2-1">Capítulo 2.1</h2>
...
<h3
id="capitulo2-1-2">Capítulo 2.1.2</h3>
...
</body>
</html>
Ejemplo 7:
Veamos ahora un ejemplo
genérico que combina los distintos selectores vistos hasta ahora:
<html>
<head>
<title>Ejemplo
estilos</title>
<style
type="text/css">
p.clase1 { color:
#0000FF; text-align: center }
<!-- declaración de
estilo para los párrafos de clase1 -->
h2.clase2 { color:
#FF0000; text-align: right }
<!-- declaración de
estilos para las cabeceras de tipo 2 y de clase2 -->
h1#indent1 { color:
#00FF00; text-align: center }
<!-- declaración de
estilos para la cabecera de tipo 1
que presente el
identificador indent1 -->
</style>
</head>
<body>
<h1>Cabecera de
tipo 1 sin estilo </h1>
<h1
id="indent1">Cabecera de tipo 1 con el estilo único
para este elemento (verde y
centrado)</h1>
<h2
class="clase2">Cabecera de tipo 2 con el estilo de
clase2 (rojo y a la dcha)</h2>
<p>Párrafo sin
ningún estilo</p>
<p
class="clase1">Párrafo con el estilo de la clase1 (azul
y al centro)</p>
</body>
</html>
10.4. Selector universal
El selector universal se
escribe con un asterisco (*) y representa a cualquier elemento de la
página. Por ejemplo,
con:
* {color: red} /* Se
aplica a cualquier etiqueta HTML */
Todos los elementos de la
página tendrán como color de primer plano el rojo.
Resulta de utilidad
cuando queremos inicializar todos los elementos de nuestra página
con
determinadas propiedades
generales.
10.5. Selectores
descendientes
*reproducido de [2] con
permiso del autor
Un selector descendiente
selecciona los elementos que se encuentran dentro de otros
elementos. Un elemento es
descendiente de otro cuando se encuentra entre las etiquetas de
apertura y de cierre del
otro elemento.
El selector del siguiente
ejemplo selecciona todos los elementos <span> de la página que
se
encuentren dentro de un
elemento <p>:
p span { color: red; }
Si el código HTML de la
página es el siguiente:
<p>
...
<span>texto1</span>
...
<a
href="">...<span>texto2</span></a>
...
</p>
El selector p span
selecciona tanto texto1 como texto2. El motivo es que en el selector
descendiente, un elemento
no tiene que ser "hijo directo" de otro. La única
condición es que un
elemento debe estar
dentro de otro elemento, sin importar lo profundo que se encuentre.
Al resto de elementos
<span> de la página que no están dentro de un elemento <p>,
no se les
aplica la regla CSS
anterior.
Los selectores
descendientes permiten aumentar la precisión del selector de tipo o
etiqueta. Así,
utilizando el selector
descendiente es posible aplicar diferentes estilos a los elementos
del
mismo tipo. El siguiente
ejemplo amplía el anterior y muestra de color azul todo el texto de
los
<span> contenidos
dentro de un <h1>:
p span { color: red; }
h1 span { color: blue; }
Con las reglas CSS
anteriores:
• Los elementos <span>
que se encuentran dentro de un elemento <p> se muestran de
color rojo.
• Los elementos <span>
que se encuentran dentro de un elemento <h1> se muestran de
color azul.
• El resto de elementos
<span> de la página, se muestran con el color por defecto
aplicado
por el navegador.
La sintaxis formal del
selector descendiente se muestra a continuación:
selector1 selector2
selector3 ... selectorN
Los selectores
descendientes siempre están formados por dos o más selectores
separados entre
sí por espacios en
blanco. El último selector indica el elemento sobre el que se
aplican los estilos
y todos los selectores
anteriores indican el lugar en el que se debe encontrar ese elemento.
En el siguiente ejemplo,
el selector descendiente se compone de cuatro selectores:
p a span em {
text-decoration: underline; }
Los estilos de la regla
anterior se aplican a los elementos de tipo <em> que se
encuentren dentro
de elementos de tipo
<span>, que a su vez se encuentren dentro de elementos de tipo
<a> que
se encuentren dentro de
elementos de tipo <p>.
No debe confundirse el
selector descendiente con la combinación de selectores:
/* El estilo se aplica a
todos los elementos "p", "a", "span" y
"em" */
p, a, span, em {
text-decoration: underline; }
/* El estilo se aplica
solo a los elementos "em" que se encuentran dentro
de "p a span"
*/
p a span em {
text-decoration: underline; }
Se puede restringir el
alcance del selector descendiente combinándolo con el selector
universal.
El siguiente ejemplo,
muestra los dos enlaces de color rojo:
p a { color: red; }
<p><a
href="#">Enlace</a></p>
<p><span><a
href="#">Enlace</a></span></p>
Sin embargo, en el
siguiente ejemplo solamente el segundo enlace se muestra de color
rojo:
p * a { color: red; }
<p><a
href="#">Enlace</a></p>
<p><span><a
href="#">Enlace</a></span></p>
La razón es que el
selector p * a se interpreta como todos los elementos de tipo <a>
que se
encuentren dentro de
cualquier elemento que, a su vez, se encuentre dentro de un elemento
de
tipo <p>. Como el
primer elemento <a> se encuentra directamente bajo un elemento
<p>, no se
cumple la condición del
selector p * a.
12 El orden de la
cascada:
Las hojas de estilo
pueden tener tres orígenes:
- El autor: como hemos
visto hasta ahora, puede hacerlo a través de una hoja externa o
incrustada, incluso
definiendo el estilo en línea.
- El usuario: también
puede especificar su propia hoja de estilo. Esta posibilidad puede
resultar
de gran ayuda para
aquellas personas con discapacidades visuales o, simplemente, para
quienes
deseen adaptar las
páginas a sus preferencias. Cada navegador tiene su forma particular
de
proveer al usuario la
posibilidad de especificar una hoja de estilo propia. Por ejemplo, en
Microsoft Internet
Explorer puede indicarse en el menú Herramientas / Opciones de
Internet
pestaña
[General][Accesibilidad]
- La aplicación del
usuario: el navegador también aplica una hoja de estilo
predeterminada que
presenta los elementos de
la página de modo que satisfagan las expectativas generales de
presentación del
documento.
Las hojas de estilo con
estos tres orígenes actúan conjuntamente y el orden de la cascada
determina, en el caso en
que existan reglas incompatibles, cuál de ellas tiene
preponderancia.
Las siguientes son las
normas que determinan la fuerza de las reglas de estilo:
1) La primera disposición
se hace por el origen: las reglas de la hoja de estilo del autor
tienen
más fuerza que las del
usuario y éstas, a su vez, prevalecen por sobre las del navegador.
2) La segunda disposición
es por especificidad: los selectores más específicos tienen mayor
fuerza que los selectores
generales. Por ejemplo: UL {} es menos específico que UL LI {}. En
la
Recomendación CSS2 puede
encontrar la explicación acerca de cómo se calcula la especificidad
de un selector.
3) Finalmente, se dispone
por el orden especificado: si dos reglas tienen la misma fuerza,
origen
y especificidad, la
última en ser especificada es la que vence. Las reglas en las hojas
de estilo
importadas se considera
que están antes que cualquier regla en la propia hoja de estilo.
13 La regla !important
La regla !important está
pensada para permitir una mejor accesibilidad a los documentos,
otorgándoles a los
usuarios con requerimiento especiales (fuentes grandes, combinaciones
de
colores, etc.) el control
sobre la presentación. Ejemplo:
P { font-size: 14px
!important }
Las declaraciones
!important tienen más fuerza que las declaraciones normales y las
hojas de
estilo del autor y del
usuario pueden contener la declaración !important, en cuyo caso la
regla
del usuario tiene mayor
fuerza que la del autor.
Aquí es importante
destacar que, aunque las hojas de estilo del autor tienen
preponderancia por
sobre las del usuario,
con la regla !important esto se revierte y se le da mayor poder a las
preferencias del usuario.
14 La etiqueta span:
A veces se quiere dar
estilo a un trozo de texto que no está comprendido en ninguna
etiqueta. Para poder
hacerlo se usa span.
SPAN puede usarse como un
selector en una hoja de estilo, y también acepta los atributos
STYLE, CLASS e ID.
Ejemplo:
<style
type=”text/css”>
.clase1 { color:red; }
</style>
...
<p>En un lugar de
<span class=”clase1”>La Mancha</span> de cuyo nombre
no
quiero acordarme, no ha
mucho que vivía...</p>
Sólo el texto “La
Mancha” saldrá de color rojo.
15 DIV
Un div (abreviatura de
"división") es básicamente un contenedor. En él, podemos
meter
cualquier clase de
contenido, con la gran ventaja de que lo podemos manipular a nuestro
antojo
con CSS, colocarlo en
cualquier parte de la página, de cualquier tamaño, de cualquier
color, con
bordes o sin ellos, con
imágenes de fondo o sin ellas, etc. A diferencia de las tablas, los
divs no
se dividen por dentro,
pero podemos anidarlos y organizarlos casi como las tablas (en caso
de ser
necesario).
Un DIV puede contener
párrafos, encabezados, tablas, y aun otras divisiones (otros div).
Esto lo
hace ideal para hacer
diferentes clases de contenedores.
Veamos un ejemplo: se
trata de conseguir el siguiente aspecto:
Vamos a realizarlo paso a
paso:
Paso 1: sin utilizar
estilos.
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de
DIV sin estilos y sin DIV</title>
</head>
<body>
<h1>Título de la
Página</h1>
<ul>
<li><a
href="pepe">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
</ul>
<h2>Subtítulo 1
</h2>
<p>En un lugar de
la Mancha, de cuyo nombre no quiero acordarme, no ha mucho
tiempo que vivía un
hidalgo de los de lanza en astillero, adarga antigua, rocín
flaco y galgo corredor.
Una olla de algo más vaca que carnero, salpicón las más
noches, duelos y
quebrantos los sábados, lentejas los viernes, algún palomino de
añadidura los domingos,
consumían las tres partes de su hacienda. El resto della
concluían sayo de
velarte, calzas de velludo para las fiestas con sus pantuflos de
lo mismo, los días de
entre semana se honraba con su vellori de lo más fino. </p>
<p>Tenía en su
casa una ama que pasaba de los cuarenta, y una sobrina que no
llegaba a los veinte, y
un mozo de campo y plaza, que así ensillaba el rocín como
tomaba la podadera.
Frisaba la edad de nuestro hidalgo con los cincuenta años, era
de complexión recia,
seco de carnes, enjuto de rostro; gran madrugador y amigo de
la caza.</p>
<h3>Sub-subtítulo</h3>
<p>Quieren decir
que tenía el sobrenombre de Quijada o Quesada (que en esto hay
alguna diferencia en los
autores que deste caso escriben), aunque por conjeturas
verosímiles se deja
entender que se llama Quijana; pero esto importa poco a
nuestro cuento; basta que
en la narración dél no se salga un punto de la verdad.
</p>
El Quijote - Miguel de
Cervantes
</body>
</html>
La salida, en el
navegador, es:
Paso 2: creamos nuestra
hoja de estilos ejemplo_div2.css y la vamos a ir aplicando paso a
paso
para que veáis cómo
funciona.
/* Para evitar resultados
extraños en distintos navegadores, damos algo de estilo al
texto del body*/
body {
font-family:Georgia,
"Times New Roman", Times, serif;
font-size:12px;
color:#666666;
text-align:center;
/*aquí mandamos a centrar todo el contenido*/
}
#contenedor {
width:600px; /*ancho
total de la página*/
border:1px solid
#333333;
/*encadeno los 3
atributos claves del borde en una sola línea, ahorrando código
*/
background-color:#FFF8F0;
margin:10px auto; /*10px
arriba y abajo, y auto a los lados */
/*para los navegadores
nuevos es suficiente para centrar la página*/
text-align:left;
/*aquí alineamos todo de
nuevo a la izquierda, pero dentro del contenedor*/
}
#encabezado {
margin:10px; /*para que
no se pegue al borde*/
padding:10px; /*algo de
relleno*/
width:224px; /*este
ancho es para que cuadre con el texto*/
height:50px; /*idem*/
border:1px solid
#333333; /*decoración*/
background-color:#CC6600; /*decoración*/
float:left; /*para que
el elemento flote a la izquierda*/
display:inline; /*(*)*/
}
#encabezado h1 {
/*encadenamos el identificador del div, con la etiqueta para
referirnos sólo al h1
dentro del div encabezado, así no afectará a otros h1 en el resto
del documento.*/
font-size:18px;
font-weight:bold;
width:224px;
border-bottom:16px solid
#FFFFFF;
color:#FFFFFF;
margin:0; /*los h1
vienen con margen, con esto se lo quito*/
text-transform:uppercase; /*convierte todas en mayúsculas*/
padding-bottom:10px;
}
#menu {
float:left;
margin:10px 10px auto 0;
border:1px solid
#333333;
width:320px;
height:24px;
}
#contenido {
width:580px; /*el ancho
más el padding da 600px de ancho que es lo que mide la
pág.*/
clear:both; /*con esto
nos aseguramos de que no se ponga nada a los lados*/
padding:10px;
}
#contenido h2 {
font-size:16px;
color:#CC3300;
width:246px;
text-transform:uppercase;
border-bottom:1px dotted
#CC3300;
}
#contenido h3 {
width:246px;
font-size:14px;
color:#999900;
border-bottom:1px dotted
#999900;
}
#pie {
width:560px; /*menos
porque debemos sumar el padding del div contenido*/
text-align:right;
padding:10px;
font-size:80%; /*más
pequeño el texto*/
font-style:italic;
color:#999999;
}
En este segundo paso sólo
aplicaremos el estilo del body. Para ello, simplemente añadimos
entre
</title> y </head>
lo siguiente:
<link
href="ejemplo_div2.css" rel="stylesheet"
type="text/css" />
Simplemente con hacer
este cambio, la salida del navegador es así:
C.F.G.S. Administración
de Sistemas Informáticos en Red Página 32/44
IES Luis Braille –
Coslada
Profesora: Victoria
Montón
Autora: Mª de los
Ángeles Bravo, con anotaciones de Victoria MontónLenguajes de
Marcas. Unidad 3.
Paso 3: aplicamos el
estilo “contenedor”.
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de
DIV - paso 3</title>
<link
href="ejemplo_div2.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="contenedor">
<h1>Título de la
Página</h1>
<ul>
<li><a
href="pepe">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
</ul>
<h2>Subtítulo 1
</h2>
<p>En un lugar de
la Mancha, de cuyo nombre no quiero acordarme, no ha mucho
tiempo que vivía un
hidalgo de los de lanza en astillero, adarga antigua, rocín
flaco y galgo corredor.
Una olla de algo más vaca que carnero, salpicón las más
noches, duelos y
quebrantos los sábados, lentejas los viernes, algún palomino de
añadidura los domingos,
consumían las tres partes de su hacienda. El resto della
concluían sayo de
velarte, calzas de velludo para las fiestas con sus pantuflos de
lo mismo, los días de
entre semana se honraba con su vellori de lo más fino. </p>
<p>Tenía en su
casa una ama que pasaba de los cuarenta, y una sobrina que no
llegaba a los veinte, y
un mozo de campo y plaza, que así ensillaba el rocín como
tomaba la podadera.
Frisaba la edad de nuestro hidalgo con los cincuenta años, era
de complexión recia,
seco de carnes, enjuto de rostro; gran madrugador y amigo de
la caza.</p>
<h3>Sub-subtítulo</h3>
<p>Quieren decir
que tenía el sobrenombre de Quijada o Quesada (que en esto hay
alguna diferencia en los
autores que deste caso escriben), aunque por conjeturas
verosímiles se deja
entender que se llama Quijana; pero esto importa poco a
nuestro cuento; basta que
en la narración dél no se salga un punto de la verdad.
</p>
El Quijote - Miguel de
Cervantes
</div>
</body>
</html>
Simplemente con hacer
este cambio, la salida del navegador cambia sustancialmente:
Paso 4: aplicamos el
estilo “encabezado”.
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de
DIV - paso 4</title>
<link
href="ejemplo_div2.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="encabezado">
<h1>Título de la
Página</h1>
</div>
<ul>
<li><a
href="pepe">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
</ul>
<h2>Subtítulo 1
</h2>
<p>En un lugar de
la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que
vivía un hidalgo de los
de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
Una olla de algo más
vaca que carnero, salpicón las más noches, duelos y quebrantos los
sábados, lentejas los
viernes, algún palomino de añadidura los domingos, consumían las
tres
partes de su hacienda. El
resto della concluían sayo de velarte, calzas de velludo para las
fiestas con sus pantuflos
de lo mismo, los días de entre semana se honraba con su vellori de
lo más fino. </p>
<p>Tenía en su
casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba
a los
veinte, y un mozo de
campo y plaza, que así ensillaba el rocín como tomaba la podadera.
Frisaba la edad de
nuestro hidalgo con los cincuenta años, era de complexión recia,
seco de
carnes, enjuto de rostro;
gran madrugador y amigo de la caza.</p>
<h3>Sub-subtítulo</h3>
<p>Quieren decir
que tenía el sobrenombre de Quijada o Quesada (que en esto hay
alguna
diferencia en los autores
que deste caso escriben), aunque por conjeturas verosímiles se
deja entender que se
llama Quijana; pero esto importa.
El Quijote - Miguel de
Cervantes
</div>
</body>
</html>
Paso 5: aplicamos el
estilo “contenido”.
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de
DIV - paso 5</title>
<link
href="ejemplo_div2.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="encabezado">
<h1>Título de la
Página</h1>
</div>
<ul>
<li><a
href="pepe">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
</ul>
<div id="contenido">
<h2>Subtítulo 1
</h2>
<p>En un lugar de
la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que
vivía un hidalgo de los
de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
Una olla de algo más
vaca que carnero, salpicón las más noches, duelos y quebrantos los
sábados, lentejas los
viernes, algún palomino de añadidura los domingos, consumían las
tres
partes de su hacienda. El
resto della concluían sayo de velarte, calzas de velludo para las
fiestas con sus pantuflos
de lo mismo, los días de entre semana se honraba con su vellori de
lo más fino. </p>
<p>Tenía en su
casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba
a los
veinte, y un mozo de
campo y plaza, que así ensillaba el rocín como tomaba la podadera.
Frisaba la edad de
nuestro hidalgo con los cincuenta años, era de complexión recia,
seco de
carnes, enjuto de rostro;
gran madrugador y amigo de la caza.</p>
<h3>Sub-subtítulo</h3>
<p>Quieren decir
que tenía el sobrenombre de Quijada o Quesada (que en esto hay
alguna
diferencia en los autores
que deste caso escriben), aunque por conjeturas verosímiles se
deja entender que se
llama Quijana; pero esto importa poco a nuestro cuento; basta que en
la
narración dél no se
salga un punto de la verdad. </p>
El Quijote - Miguel de
Cervantes
</div>
</div>
</body>
</html>
Simplemente con hacer
este cambio, la salida del navegador cambiaría así:
Paso 6: aplicamos el
estilo “pie”. Se trata únicamente de cambiar la línea
correspondiente así:
<div id="pie">El
Quijote - Miguel de Cervantes</div>
La salida del navegador
sería:
¿Qué nos queda por
hacer?. Recordemos nuestro objetivo:
Como se puede ver, ya
sólo nos queda dar formato a los hipervínculos, para ello primero
vamos a
definir el área donde
van a estar ubicados, y después añadiremos algunos estilos a
nuestra
hoja de estilos.
Paso 7: vamos a definir
el área donde van a estar ubicados los hipervínculos, para ello
tenemos
el estilo “menu”:
...
<div id="encabezado">
<h1>Título de la
Página</h1>
</div>
<div id="menu">
<ul>
<li><a href="
">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
</ul>
</div>
...
La salida del navegador
quedaría así:
Vamos a ampliar nuestra
hoja de estilos con el siguiente código, ahora será
ejemplo_div.css:
ul {
list-style-type:none;
/*con esto quitamos las viñetas*/
margin:0; /*le quitamos
el margen a la lista*/
padding:0; /*y el
relleno*/
}
li {
margin:0; /*le quito el
margen al elemento de la lista*/
float:left; /*hago que
el elemento flote a la izda para eliminar el salto de
línea*/
}
li a {
display:block; /*con
esto el vínculo tendrá un área rectangular, así no será sólo
el texto*/
background-color:#CC3300; /*algo de color*/
color:#FFFFFF; /*más*/
width:58px; /*defino el
ancho del rectángulo del vínculo*/
padding:4px 0 5px 22px;
/*sumamos el relleno al ancho y alto del rectángulo para
obtener el div #menu
completamente ocupado con los ítems del menú*/
text-decoration:none;
/*elimino el subrayado del vínculo*/
font-weight:bold;
/*decoración*/
text-transform:uppercase; /*vínculos en mayúsculas*/
}
Nuestro código html
quedaría así:
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de
DIV - paso 7 (completo)</title>
<link
href="ejemplo_div.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="encabezado">
<h1>Título de la
Página</h1>
</div>
<div id="menu">
<ul>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
<li><a
href="#">Enlace</a></li>
</ul>
</div>
<div id="contenido">
<h2>Subtítulo 1
</h2>
<p>En un lugar de
la Mancha, de cuyo nombre no quiero acordarme, no ha mucho
tiempo que vivía un
hidalgo de los de lanza en astillero, adarga antigua, rocín
flaco y galgo corredor.
Una olla de algo más vaca que carnero, salpicón las más
noches, duelos y
quebrantos los sábados, lentejas los viernes, algún palomino de
añadidura los domingos,
consumían las tres partes de su hacienda. El resto de Ella
concluían sayo de
velarte, calzas de velludo para las fiestas con sus pantuflos de
lo mismo, los días de
entre semana se honraba con su vellori de lo más fino. </p>
<p>Tenía en su
casa una ama que pasaba de los cuarenta, y una sobrina que no
llegaba a los veinte, y
un mozo de campo y plaza, que así ensillaba el rocín como
tomaba la podadera.
Frisaba la edad de nuestro hidalgo con los cincuenta años, era
de complexión recia,
seco de carnes, enjuto de rostro; gran madrugador y amigo de
la caza.</p>
<h3>Sub-subtítulo</h3>
<p>Quieren decir
que tenía el sobrenombre de Quijada o Quesada (que en esto hay
alguna diferencia en los
autores que deste caso escriben), aunque por conjeturas
verosímiles se deja
entender que se llama Quijana; pero esto importa poco a
nuestro cuento; basta que
en la narración dél no se salga un punto de la verdad.
</p>
<div id="pie">El
Quijote - Miguel de Cervantes</div>
</div>
</div>
</body>
</html
También puedo trabajar
con eventos, por ejemplo si quisiésemos conseguir un efecto cuando
el
ratón pase por encima,
sólo tendríamos que añadir a nuestra hoja de estilos el siguiente
código:
li a:hover {
background-color:#999900; /*decoración para el evento hover (mouse
encima)*/
}
Por tanto, la utilidad
más importante de DIV es la creación de capas, entendiendo como
tales el
hecho de que, varios de
los objetos que pueden ser visibles en un determinado momento,
puedan superponerse unos
a otros, siendo absolutamente independientes.
Otra forma de definir una
capa es usando las propiedades de posicionamiento dentro del
atributo de estilo STYLE
de la etiqueta <DIV> correspondiente: para indicar dónde se
sitúa
la capa se utilizan las
propiedades left y top, que sitúan el elemento respecto a la parte
superior izquierda de la
ventana activa. También podemos situar una mediante las
coordenadas de la esquina
inferior derecha a través de las propiedades bottom y right. Por
ejemplo, la siguiente
capa muestra una imagen:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejemplo de
capas</title>
</head>
<body>
<font size=5> Esta
es una capa centrada en la ventana</font>
<div id="capa"
style="position:absolute; left:450px; top:225px;
visibility:visible">
<img
src="imagenes\ciclista.gif">
</div>
</body>
</html>
En este ejemplo se puede
comprobar que el color de fondo por defecto de una capa es
transparente. Para que
deje de serlo hay que añadir la propiedad background-color en la
etiqueta <div>.
El tamaño de una capa,
si no se dice lo contrario, será el de los elementos que contenga.
Si
queremos modificar este
tamaño debemos usar las propiedades width y height:
<div id="capa"
style="position:absolute; left:450px; top:225px;
visibility:visible;
background-color:blue; padding:30px; width:400px">
<img
src="imagenes\ciclista.gif">
</div>
Recordemos que la
propiedad padding indica el tamaño desde los bordes de la capa al
elemento.
También podemos
superponer capas a texto ya existente en el documento o a otras
capas, ya
que son elementos
independientes:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejemplo de 2
capas</title>
<style>
#capa1 {width:150px;
height:200px border:1px; border:solid green;
background-color:yellow;
padding:10px;}
#capa2 {width:150px;
height:200px; color:white; border:1px;
border:solid red;
background-color:blue; padding:10px;}
</style>
</head>
<body>
<font size=6
color="red">Este es un ejemplo de dos capas
superpuestas </font>
<div id="capa1"
style="position:absolute; left:400px; top:175px;
z-index:2;" >
<font size=4> Esta
capa está situada por encima </font>
</div>
<div id="capa2"
style="position:absolute; left:350px; top:100px;
z-index:1;" >
<font size=6> Esta
capa está situado debajo </font>
</div>
</body>
</html>
16 Ventajas y desventajas
de las Hojas de Estilo
Si consideramos los
ejemplos anteriores, resultan evidentes algunas ventajas:
1. Con una Hoja de Estilo
podemos alterar la presentación de cada elemento sin tocar el código
HTML, ahorrando esfuerzo
y tiempo de edición.
