Ejercicio 20 — Estilos de Listas en CSS

Este ejercicio consiste en aplicar estilos personalizados a diferentes tipos de listas, utilizando propiedades como list-style-type, list-style-position, list-style-image y colores específicos. El objetivo es aprender a modificar la apariencia de listas ordenadas, no ordenadas y listas con iconos personalizados.

Enunciado

Aplicar estilo decimal-leading-zero a la lista ol.tareas.
Personalizar una lista no ordenada usando square.
Crear una lista con icono personalizado usando list-style-image.
Modificar colores, posición de marca y estilos de texto.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Estilos de Lista</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h2>Lista de Tareas (ol.tareas)</h2>
    <ol class="tareas">
        <li>Revisar el capítulo 1.</li>
        <li>Hacer los ejercicios de la página 20.</li>
        <li>Preparar el resumen semanal.</li>
    </ol>

    <h2>Materiales Necesarios (ul.materiales)</h2>
    <ul class="materiales">
        <li>Cuaderno de apuntes.</li>
        <li>Bolígrafo azul y rojo.</li>
        <li>Libro de texto.</li>
    </ul>

    <h2>Recursos de Estudio (ul.recursos)</h2>
    <ul class="recursos">
        <li>Sitio web oficial del curso.</li>
        <li>Videos explicativos en YouTube.</li>
        <li>Foro de preguntas y respuestas.</li>
    </ul>

</body>
</html>

Código CSS

/* 1. Lista ordenada de tareas (ol.tareas) */
ol.tareas {
    list-style-type: decimal-leading-zero;
    list-style-position: inside;
}
ol.tareas li {
    color: #003366;
}

/* 2. Lista no ordenada de materiales (ul.materiales) */
ul.materiales {
    list-style-type: square;
    list-style-position: outside;
}
ul.materiales li {
    color: #2a7a1f;
}

/* 3. Lista personalizada de recursos (ul.recursos) */
ul.recursos {
    list-style-image: url('https://lh5.googleusercontent.com/LM0t4lybG4VsUyKDbDizCDZEA6y2ZeRBIqRw4RMFM8-ggC5cFhphukFT-h24CWqwycbNcvVutbJeGlueYS4zwVmBzJVyiaz-QHbRCufuJJKe8_5SEVROgxGAKk9YlzyGlxBFX-Uyl0CIxObBSXxvow');
    list-style-position: inside;
    list-style-type: disc;
}
ul.recursos li {
    color: #444444;
}

🚀 Ver resultado del ejercicio