Unidad 11. Hojas de estilos (III)


Naturalmente, modificaremos sólo los que necesitemos. Vamos a guardar la hoja de estilos y vamos a usarla.

Pulsamos en guardar y guardamos la hoja como hojaestilos.css.

Vamos a aplicar la hoja de estilos a una página web. Creamos la siguiente página:

Ejemplo

Es importante que marquemos el título como encabezado H4.

Para ello lo seleccionamos y en la barra de formato hacemos clic en Estilo y clic en H4 (o encabezado4).

Si no lo hacemos, el título será considerado como texto normal y se le aplicará el estilo del texto.

barra de formato

Formato - Vinculos

Ahora vamos a indicarle a FrontPage que asocie la página web a la hoja de estilos.

Hacemos clic en el menú Formato - Vínculos de hoja de estilos.

Nos aparece la siguiente pantalla, en la que tenemos que pulsar en Agregar y buscar el fichero de hoja de estilos que antes hemos guardado. Hacemos clic en Aceptar.

 

 

Veamos un par de imágenes de la ventana antes y después de agregar la hoja de estilos:

Vincular estilos 1
          Vincular estilos 2

Al aplicarse la hoja de estilos, la página web tiene ahora el siguiente aspecto:

Ejemplo

Como podemos comprobar, se han aplicado las características que hemos visto antes.

Vamos a cambiarlas.

Abrimos la hoja de estilos y pulsamos en el botón Estilo que queda en medio de la página.

Pinchamos en body y pulsamos en Modificar. En Formato elegimos Fuente.... En la ventana de Fuente elegimos Times New Roman y el color negro.

Le damos a Aceptar hasta que volvamos a la hoja de estilos.

 

Ejemplo final

Ahora el texto tiene otro tipo de letra y otro color.

Grabamos los cambios pulsando en .

Para practicar los distintos aspectos explicados en el tema puedes realizar el ejercicio paso a paso Hojas de estilos.

Aquí puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.

  Ejercicios del Tema 11.

  Prueba evaluativa del Tema 11.








   

Pág. 11.3



Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.