Páginas web con FrontPage Express

7. Hojas de estilos

Los objetivos de la séptima lección son:

7.1 Conocer el funcionamiento básico de las hojas de estilos
7.2 Algunos ejemplos de estilos
7.3 Actividad nº 7: Estilos en la página del Monstruo

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

Actividad7.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.htm, 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



Anterior Arriba Siguiente


Páginas dispersas de Alejandro Valero - http://fresno.cnice.mecd.es/avaler3