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