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. De la segunda 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 --> Página o Web.

Después hacemos clic en Plantillas de Página 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:

Aparece el cuadro de diálogo Estilo, que nos muestra los estilos que están modificados, que en este momento serán los modificados por defecto en la plantilla de FrontPage.  

Veámosla:

Aquí podemos cambiar las características de las etiquetas HTML y tener una vista previa de estos.

Para crear un estilo nuevo, pulsaremos en Nuevo. Para eliminarlo, lo seleccionamos haciendo clic en él y pulsaremos en Eliminar. Para modificar un estilo, lo seleccionamos haciendo clic en él y pulsaremos en Modificar.

Algunas etiquetas HTML que debemos conocer son:

a: se refiere a los hipervínculos.

table: se refiere a las tablas.

body: se refiere al cuerpo del documento (texto en general).

h1..h6: se refiere a los encabezados (para los títulos).

Pág. 11.1