Unidad 17. Ejercicio paso a paso: Controles de Fuente

Objetivo

Practicar el uso de controles de fuente y formato del texto.

Ejercicio

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

3 Abre el archivo estilolibreria.css.

4 Añade el siguiente estilo para que toda la página muestre una fuente de tipo Verdana (en caso de que no estuviese instalada se buscarían por este orden las siguientes fuentes: Arial, Helvetica y finalmente cualquiera que entre dentro de la categoría sans-serif).

También haremos que su tamaño sea de 12 píxeles:

body {

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 12px;

}       

5 Para el texto dentro del bloque con id menu aumentaremos el tamaño de la fuente a 13 píxeles y haremos que las letras estén un poco más separadas:

#menu {

    font-size: 13px;

    letter-spacing: 1px;

}       

6 Más tarde introduciremos un formulario en el menú. Queremos que el elemento input de cualquier formulario tenga un tamaño de fuente de 9 píxeles:

input {

    font-size: 9px;

}       

7 En el bloque con id contenido queremos que haya una clase llamada primera_palabra que sea de 16 píxeles de tamaño y en negrita:

#contenido .primera_palabra {

    font-size: 16px;

    font-weight: bold;        

}       

8 Crea un estilo para una clase llamada precio que tenga un tamaño de fuente de 16 píxeles, en negrita y de color rojo:

.precio {

    font-size: 16px;

    color: red;

    font-weight: bold;        

}              

9 Finalmente haremos que el bloque con id pie tenga un tamaño de fuente que sea el 70% del original.

#pie {   

    font-size: 70%;        

}       

10 Vamos a centrar verticalmente (vertical-align) las imágenes que aparecen en la lista del bloque #cabecera.

#cabecera li img {   

    vertical-align: middle;        

}       

11 Por último, crearemos una lista para mostrar los detalles del libro. Dentro de ella, distinguiremos dos elementos distintos: uno en negrita y mayúsculas para el título, y otro en cursiva para el autor.

ul.detallelibro .titulo {   

    font-weight: bold;

    text-transform: uppercase;        

}

ul.detallelibro .autor {   

    font-style: oblique;        

}       

12 Guarda los cambios.