7. Hojas de estilos
Los objetivos de la séptima lección
son:
7.1. Funcionamiento de las hojas de
estilo
Las hojas
de estilos constituyen un lenguaje sencillo que complementa el de HTML
cuando se trata de modificar algunas etiquetas de las páginas web. Las
hojas de estilos en cascada (CCS: Cascading Style Sheets)
suponen un apoyo fundamental a la hora de diseñar las páginas
web, porque permiten una mayor precisión en el ajuste de los elementos
del diseño. Esta técnica consiste en separar el diseño
del contenido, de manera que las indicaciones para conformar el diseño
se agrupan en una hoja de estilo o archivo que está fuera del contenido
del documento de la página HTML. Lo que hace fundamentalmente el código
de las hojas de estilos es transformar las etiquetas del lenguaje HTML
y conformarlas a las características que queramos darle; pero también,
y esto es lo importante, con este código podemos crear etiquetas
nuevas, que introducimos dentro del documento. Una de las ventajas
de las hojas de estilos es que se puede modificar algunas características
de todos los documentos de un sitio web desde un archivo, sin tener que modificarlas
en cada uno de los documentos.
Hasta ahora el uso de las hojas de estilos ha sido un tanto limitado, debido
a que los navegadores de Internet no estaban lo suficientemente preparados para
este código. Pero desde que han aparecido los navegadores de versión
6 (Internet Explorer y Mozilla-Nescape), ya se pueden utilizar las hojas de
estilos con mayor libertad, aunque hay que tener en cuenta que todavía
existen usuarios que continúan utilizando navegadores antiguos, por lo
cual se debe que tener especial cuidado en crear unas hojas de estilos que sean
totalmente operativas en los nuevos navegadores y que a la vez no impidan o
entorpezcan la visión de una página web con los antiguos.
Esta página
web incluye en su carpeta principal un archivo de hojas de estilos en cascada:
estilos.css. Este archivo contiene el código sobre las
modificaciones que se realizan en todos los documentos de este sitio.
Para conectar un archivo de hojas de estilos con el resto de archivos HTML
que conforman un sitio web hay que colocar una llamada en la
cabecera (<head>) de cada documento, en cuya redacción se
introduce el nombre del archivo CSS con el atributo href:
<link rel="stylesheet" type="text/css" href="estilos.css">
También se puede incluir el código de los estilos en la
cabecera (<head>) del documento, como veremos en la actividad 7.
En este caso, hay que utilizar la etiqueta de HTML <style>, indicando
que es código de hojas de estilos (CSS):
<style type="text/css">
BODY {
background-color: #FEEFCB;
color: #000000;
}
</style>
Y también se puede incluir como atributo de una etiqueta dentro
del cuerpo (<body>)del documento HTML. Este caso lo podemos ver
en el siguiente ejemplo: supongamos que el color del texto de un documento es
el negro, y queremos que un párrafo en concreto tenga el texto de color
azul; tendríamos que escribir lo siguiente:
<p>Párrafo de color negro</p>
<p style="color: 0000FF">Párrafo de color azul</p>
Párrafo de color azul
Con el atributo style hemos incluido el código del color de texto
(color) dentro de la etiqueta de párrafo (<p>).
7.2. Algunos ejemplos de estilos
En este curso
no vamos a estudiar a fondo las hojas de estilos. Quien quiera aprender más
al respecto puede acudir a la página web HTML en castellano,
que comentamos en el capítulo de Enlaces de interés.
Aquí vamos a estudiar algunos ejemplos de los efectos que producen las
hojas de estilos analizando el código que guarda el archivo estilos.css
de esta página del curso.
Lo primero que queremos conseguir es que el tipo de letra
y el tamaño del texto normal sean los mismos en todos
los documentos, y no queremos que sea el usuario el que tenga predeterminado
en su navegador, que suele ser el Times New Roman de 12 puntos. También
vamos a establecer los márgenes del documento y los
colores del fondo y del texto. Para ello, vamos a modificar
la etiqueta <body>, porque es el cuerpo del documento
y por tanto todas las demás etiquetas heredan sus atributos:
BODY {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 1% 3% 1% 3%;
background-color: #FEEFCB;
color: #000000;
}
En nuestro caso deseamos que sea el tipo de letra (font-family)
Verdana y, si no está instalado en el ordenador del
usuario, entonces queremos que sean los tipos Arial y Helvetica,
y si tampoco éstos se encuentran instalados, tendrá que ser un
tipo de letra sans-serif, es decir, de las llamadas de palo
seco. En cuanto a los colores de fondo (background-color) y
al color del texto (color), los valores los hemos expresado
en las dos últimas líneas.
Para los títulos y subtítulos del curso hemos utilizado
los cuatro primeros encabezados (h1, h2, h3 y h4)
del lenguaje HTML, que hemos modificado a nuestro gusto. Quizá lo más
destacado sea que el encabezado 3 lo hemos diseñado con una franja
de fondo y una línea en los bordes superior e inferior; además
sus márgenes izquierdo y derecho son de cero píxeles, es decir,
ocupan toda la anchura de la pantalla.
Respecto a los hipervínculos, hemos querido que (etiqueta <A>)
no estén subrayados:
a { text-decoration: none; }
Pero sí deseamos que cuando el usuario coloque el puntero del ratón
encima de los textos (hover) que llevan los enlaces, estos
textos adquieran el color rojo hasta que el puntero del ratón abandone
el texto.
a:hover { color: Red; }
Por último, nos hemos inventado algunos estilos, para los que no hemos
utilizado una etiqueta HTML ya existente, como en los casos anteriores, porque
las hojas en cascada (CSS) nos dan la posiblidad de crear clases
nuevas, que tienen que llevar un punto al principio de la palabra que hemos
ideado para denominarlas. Dos de estos estilos son: .box, que
crea un cuadro alrededor de un texto, y .boton, que crea los
botones que aparecen de vez en cuando en estos documentos.
Hemos querido
incluir en este curso una cuarta página del Monstruo cuyo diseño
está realizado en su totalidad mediante las hojas de estilos. Para ver
cómo funciona realmente esta técnica de diseño, hemos escrito
dos archivos con hojas de estilos distintas para el mismo documento de HTML.
Estos archivos se llaman estilos1.css y estilos2.css, y el archivo
del contenido se llama index4.htm; los tres se encuentra en la carpeta
ejemplos de este curso. Si abrimos este último archivo en el navegador,
lo veremos con los estilos del archivo estilos1.css; pero si cambiamos el nombre
del archivo en la llamada que ese encuentra en su cabecera por el de estilos2.css,
su diseño cambia totalmente. Esto demuestra la potencia que tienen las
hojas de estilos, que en pocos años se han impuesto en Internet, de forma
que el futuro de la Red no se entenderá sin este excelente lenguaje.
La página del Monstruo con estilos puede verse pulsando este botón:
Página con estilos
7.3. Actividad 7: Estilos
en la página del Monstruo
La primera parte de esta actividad
consiste en cambiar la visualización de los
hipervínculos del marco izquierdo. Queremos que el texto
de esos hipervínculos aparezca en color azul claro
cuando el usuario pone encima de ellos el puntero del
ratón. Para ello tenemos que introducir código de
hojas de estilo en cascada (CSS) en la cabecera del
archivo sumario.html, es decir, entre la etiqueta
<head> y su etiqueta de cierre. Ahora, por tanto, no
vamos a incluir código en un archivo aparte, como hemos
hecho más arriba. En este caso, el código lo vamos
a incluir dentro de la expresión utilizada para insertar
hojas de estilo en un documento:
<style type="text/css">
<!--
a {text-decoration: none}
a:hover {color: #99FFFF}
//-->
</style>
La etiqueta <style> indica al navegador que se trata
de hojas de estilo. Las expresiones "<!--" y su cierre "//-->"
se utilizan para que no haya errores en los navegadores que no admitan hojas
de estilo, aunque ya prácticamente todas las versiones actuales de los
navegadores las admiten. Y sólo queda el código, cuya primera
línea indica que todos los hipervínculos de esta página
no llevan ningún tipo de adorno (text-decoration: none),
es decir, no están subrayados, y cuya segunda línea se refiere
a que el texto adquiere un color azul claro (color: #99FFFF)
cuando el usuario coloca el puntero del ratón encima del texto de un
hipervínculo (a:hover).
También vamos a incluir código de
CSS en el archivo principal de la página del Monstruo, en
el archivo de la colección de imágenes y en el del
sumario o índice, con el fin de cambiar el tipo de letra y
el tamaño. Queremos utilizar el tipo Verdana, el
mismo utilizado en esta página del curso, y
añadiremos otros tipos de letra por si algún
usuario no lo tiene instalado en su ordenador. El tamaño
de la letra lo damos en porcentaje, por si alguien quiere
aumentar el tamaño de letra desde el navegador. El
código reza así:
<style type="text/css">
<!--
body, td {font-family: Verdana, Arial, sans-serif; font-size: 80%}
//-->
</style>
Como en el archivo del índice ya hemos introducido un
script de estilos, sólo tendremos que insertar en
él el estilo correspondiente al body.
Si queremos ver cómo queda todo esto reflejado en la
página web del Monstruo, pulsemos este botón:
Página con marcos
