Unidad 17. Ejercicio: 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.


Marzo-2015
Volver






Página inicial  Cursos Informática Gratuitos

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


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