Unidad 17. Ejercicio paso a paso: Utilizando pseudo-elementos y clases

Objetivo

Practicar el uso de pseudo-elementos y pseudo-clases.

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 los enlaces dentro del bloque con id menu no muestren subrayado y sean de color negro.

Para el evento hover (cuando el ratón se encuentra sobre él) haremos que vuelva a aparecer el subrayado:

#menu a {

    text-decoration: none;

    color: black;

}



#menu a:hover {

    text-decoration: underline;

    color: black;

}

5 Añade el siguiente estilo para que la primera letra del los enlaces dentro del bloque con id menu se muestre en negrita:

#menu a:firstletter {

    font-weight: bold;

}

6 Tenemos un caso especial. Los no queremos que los enlaces del submenú (una lista dentro de un elemento de lista) aparezca subrayado al poner el cursor encima. Añade el siguiente estilo:

#menu li ul a:hover {

    text-decoration: none;

}

7 Guarda los cambios.

   Inicio