Unidad 11. Hojas de estilos (I)

Vamos a ver qué son las hojas de estilos y cómo usarlas para dotar a los documentos que creemos de una apariencia personalizada. Es importante que sepamos que para poder sacarles todo el partido posible a las hojas de estilos, tenemos que tener ciertos conocimientos del lenguaje HTML. Así que no está de más tener a mano nuestro manual básico de HTML .

¿Qué es una hoja de estilos?

Una hoja de estilos o CSS ("Cascade Style Sheet"), es un conjunto de reglas y características que, aplicadas a una página web o a un conjunto de ellas, pueden modificar su apariencia. De esta forma, podemos separar en cierta forma el diseño de la página de su contenido.

Gracias a las hojas de estilos podemos de alguna manera homogeneizar y automatizar el trabajo que supone el diseño de una Web. Podemos definir un estilo para los títulos y otro para el texto, de forma que no tengamos que modificar cada vez el texto y los títulos para que tengan la apariencia que queramos.

Una hoja de estilos puede estar contenida en la misma página donde se utiliza o puede estar definida en un archivo aparte. Si lo que vamos a crear es un sitio Web con varias páginas es recomendable crear una hoja de estilos aparte de esta forma, podemos definir estilos para todo el sitio Web, mientras que de la primera tendremos que escribir el mismo código en cada página cada vez que lo necesitemos. Por eso la primera se utiliza cuando se quiere aplicar algún efecto en particular y la segunda cuando ese efecto es el mismo para todas las páginas. Existe una tercera posibilidad, y es especificar el estilo en la propia etiqueta HTML dónde queramos usarlo, con lo que el efecto sólo se producirá en ese lugar.

Esto implica conocer código HTML y las propiedades que queramos cambiar. Esto tendríamos que repetirlo para cada elemento del texto cuyo estilo deseamos cambiar. Por ello, al ser poco eficiente, se usa la primera forma o la segunda, antes mencionadas.

Estas formas también requieren conocer HTML. Por ello FrontPage nos facilita el uso de estilos por medio de las plantillas, que nos permite usar hojas de estilo con pocos conocimientos de HTML.

Crear una hoja de estilos.

Para crear una hoja de estilos, hacemos clic en Archivo - Nuevo

Se abre el panel de tareas en la sección Nuevo, hacemos clic en Más plantillas de páginas... y elegimos la pestaña Hojas de Estilo. Nos aparece la siguiente ventana:

En esta ventana nos aparecen las distintas hojas de estilo predefinidas en FrontPage, con una pequeña descripción de las características del estilo. Vamos a elegir un estilo y a aplicarlo a una página Web para ver cómo trabajar con él.

Elegimos el estilo Arcos. Hacemos clic en Aceptar y FrontPage nos abre una nueva hoja de estilos.

Arcos es una hoja de estilos que se caracteriza por hacer el texto de color marrón, con el tipo de letra Verdana, encabezados con el tipo de letra Times New Roman y con fondo de color amarillo pálido.

Podemos ver como la hoja tiene un nombre de estilo, que se caracteriza por acabar en .css. Si examinamos la hoja veremos el código del estilo

etiqueta_HTML
{
                características
}

Es decir, modificamos varias etiquetas HTML para darles ciertas características. Esta es sólo una plantilla, que modificaremos para adaptarla a nuestro gusto.

Podemos hacerlo a mano, directamente en la página, o bien con la ayuda de FrontPage.

Para ello hacemos clic en el botón Estilo que aparece en mitad de la pantalla. Aparece la siguiente ventana, que nos muestra los estilos que están modificados, que en este momento serán los modificados por defecto de la plantilla de FrontPage.

Veámosla:

Pág. 11.1