Estilo de listas con atributos CSS

Introducción

En este laboratorio, los estudiantes explorarán el arte de dar estilo a las listas utilizando CSS, centrándose en transformar la apariencia predeterminada de las listas numeradas, no numeradas y de descripción. Los participantes aprenderán a personalizar los marcadores de lista a través de varias propiedades CSS como list-style-type, list-style-image y list-style-position, lo que les permitirá crear diseños de lista visualmente atractivos y únicos.

El laboratorio guía a los aprendices a través de un proceso paso a paso de creación de un proyecto HTML con diferentes tipos de lista y luego aplicar técnicas CSS para modificar los estilos de lista. Al final del laboratorio, los estudiantes tendrán experiencia práctica en cambiar los tipos de marcador de lista, reemplazar los marcadores predeterminados con imágenes personalizadas, ajustar la colocación del marcador y utilizar la propiedad abreviada list-style para dar estilo a las listas de manera eficiente.

Configurar el proyecto HTML y crear una lista básica

En este paso, configurarás un proyecto HTML básico y crearás tu primera lista para prepararte para explorar el estilo de listas con CSS. Empezaremos creando una estructura de proyecto simple y un archivo HTML con diferentes tipos de listas.

Primero, navega hasta el directorio del proyecto:

cd ~/proyecto

Crea un nuevo directorio para tu proyecto de estilo de listas con CSS:

mkdir css-list-styling
cd css-list-styling

Ahora, crea un archivo HTML llamado index.html usando el WebIDE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
  </head>
  <body>
    <h1>Mis lenguajes de programación favoritos</h1>

    <h2>Lista ordenada (Numerada)</h2>
    <ol>
      <li>Python</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>C++</li>
    </ol>

    <h2>Lista no ordenada (Con viñetas)</h2>
    <ul>
      <li>Desarrollo web</li>
      <li>Ciencias de datos</li>
      <li>Aprendizaje automático</li>
      <li>Aplicaciones móviles</li>
    </ul>

    <h2>Lista de descripción</h2>
    <dl>
      <dt>HTML</dt>
      <dd>Lenguaje de marcas de hipertexto para la estructura web</dd>
      <dt>CSS</dt>
      <dd>Hojas de estilo en cascada para el diseño web</dd>
    </dl>
  </body>
</html>

Este archivo HTML demuestra tres tipos de listas:

Lista ordenada (<ol>): Numerada automáticamente
Lista no ordenada (<ul>): Utiliza viñetas predeterminadas
Lista de descripción (<dl>): Utilizada para pares de término y descripción

Salida de ejemplo cuando se ve en un navegador:

La lista ordenada mostrará números (1, 2, 3, 4)
La lista no ordenada mostrará viñetas
La lista de descripción mostrará términos y descripciones

Aplicar list-style-type para cambiar el marcador de lista

En este paso, aprenderás a usar la propiedad CSS list-style-type para personalizar la apariencia de los marcadores de lista. La propiedad list-style-type te permite cambiar los puntos de viñeta o números predeterminados a varios estilos predefinidos.

Abre el archivo index.html en el WebIDE y agrega una sección <style> en el <head> para definir las reglas CSS:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
    <style>
      /* Estilos de lista no ordenada */
      .square-list {
        list-style-type: square;
      }

      .circle-list {
        list-style-type: circle;
      }

      .disc-list {
        list-style-type: disc;
      }

      /* Estilos de lista ordenada */
      .decimal-list {
        list-style-type: decimal;
      }

      .lower-alpha-list {
        list-style-type: lower-alpha;
      }

      .upper-roman-list {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <h1>Ejemplos de tipos de estilo de lista</h1>

    <h2>Estilos de lista no ordenada</h2>
    <ul class="square-list">
      <li>Marcadores cuadrados</li>
      <li>Desarrollo web</li>
      <li>Técnicas de diseño</li>
    </ul>

    <ul class="circle-list">
      <li>Marcadores circulares</li>
      <li>Programación</li>
      <li>Ingeniería de software</li>
    </ul>

    <h2>Estilos de lista ordenada</h2>
    <ol class="decimal-list">
      <li>Números decimales</li>
      <li>Numéricación estándar</li>
      <li>Estilo predeterminado</li>
    </ol>

    <ol class="lower-alpha-list">
      <li>Letras minúsculas</li>
      <li>Ordenamiento alfabético</li>
      <li>Estilo a, b, c</li>
    </ol>

    <ol class="upper-roman-list">
      <li>Números romanos mayúsculos</li>
      <li>Numéricación clásica</li>
      <li>Estilo I, II, III</li>
    </ol>
  </body>
</html>

Valores clave de list-style-type:

Listas no ordenadas: disc (predeterminado), circle, square
Listas ordenadas: decimal, lower-alpha, upper-roman, y más

Salida de ejemplo en un navegador:

Marcadores cuadrados para la primera lista no ordenada
Marcadores circulares para la segunda lista no ordenada
Números decimales para la primera lista ordenada
Letras minúsculas para la segunda lista ordenada
Números romanos mayúsculos para la tercera lista ordenada

Usar list-style-image para reemplazar los marcadores predeterminados

En este paso, aprenderás a usar list-style-image para reemplazar los marcadores de lista predeterminados con imágenes personalizadas. Primero, necesitarás descargar algunos iconos de muestra para usar como marcadores de lista.

Crea un directorio images en tu proyecto:

cd ~/proyecto/css-list-styling
mkdir images

Descarga iconos de muestra usando curl:

curl -o images/check-icon.png https://labex.io/cursos/iconos/check-icon.png
curl -o images/star-icon.png https://labex.io/cursos/iconos/star-icon.png

Ahora, actualiza tu archivo index.html para incluir imágenes de marcadores de lista personalizadas:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling with Images</title>
    <style>
      .check-list {
        list-style-image: url("images/check-icon.png");
      }

      .star-list {
        list-style-image: url("images/star-icon.png");
      }

      /* Ajusta el tamaño del icono si es necesario */
      .check-list li,
      .star-list li {
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Marcadores de lista personalizados con imágenes</h1>

    <h2>Lista de comprobación</h2>
    <ul class="check-list">
      <li>Completar el tutorial de CSS</li>
      <li>Practicar el estilo de lista</li>
      <li>Crear un proyecto web</li>
    </ul>

    <h2>Temas favoritos</h2>
    <ul class="star-list">
      <li>Desarrollo web</li>
      <li>Principios de diseño</li>
      <li>Experiencia del usuario</li>
    </ul>
  </body>
</html>

Puntos claves sobre list-style-image:

Utiliza url() para especificar la ruta de la imagen
Reemplaza los marcadores de lista predeterminados con imágenes personalizadas
Funciona con listas ordenadas y no ordenadas
El tamaño de la imagen se puede controlar con el relleno CSS

Salida de ejemplo en un navegador:

Lista de comprobación con marcadores de icono de verificación
Lista de temas favoritos con marcadores de icono de estrella

Ajustar list-style-position para la colocación del marcador

En este paso, explorarás la propiedad CSS list-style-position, que controla cómo se colocan los marcadores de lista en relación con el contenido de la lista. Esta propiedad tiene dos valores principales: outside (predeterminado) y inside.

Actualiza tu archivo index.html para demostrar diferentes posiciones de marcadores de lista:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>List Style Position</title>
    <style>
      .outside-list {
        list-style-position: outside;
        background-color: #f0f0f0;
        padding: 10px;
        width: 300px;
      }

      .inside-list {
        list-style-position: inside;
        background-color: #e0e0e0;
        padding: 10px;
        width: 300px;
      }

      /* Agrega algo de separación visual */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Demonstración de list-style-position</h1>

    <h2>Marcadores de lista fuera (predeterminado)</h2>
    <ul class="outside-list">
      <li>Los marcadores se colocan fuera del área de contenido</li>
      <li>Comportamiento predeterminado de CSS</li>
      <li>Los marcadores se alinean a la izquierda del texto</li>
    </ul>

    <h2>Marcadores de lista dentro</h2>
    <ul class="inside-list">
      <li>Los marcadores se colocan dentro del área de contenido</li>
      <li>Los marcadores son parte del texto del elemento de lista</li>
      <li>El contenido comienza inmediatamente después del marcador</li>
    </ul>
  </body>
</html>

Puntos claves sobre list-style-position:

outside: Los marcadores se colocan fuera de la caja de contenido (predeterminado)
inside: Los marcadores se colocan dentro de la caja de contenido
afecta a la disposición y alineación de los elementos de lista
útil para crear listas compactas o visualmente distintas

Salida de ejemplo en un navegador:

Lista fuera: Los marcadores están a la izquierda del texto
Lista dentro: Los marcadores están dentro del área de texto
Los colores de fondo ayudan a visualizar la diferencia

Combinar estilos de lista con la propiedad abreviada list-style

En este paso, aprenderás a usar la propiedad abreviada list-style para combinar múltiples atributos de estilo de lista en una sola declaración. Esta propiedad te permite establecer list-style-type, list-style-image y list-style-position en una sola línea.

Actualiza tu archivo index.html para demostrar la propiedad abreviada list-style:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Abreviaturas de estilo de lista</title>
    <style>
      /* Abreviatura con tipo y posición */
      .todo-list {
        list-style: square inside;
      }

      /* Abreviatura con imagen y posición */
      .project-list {
        list-style: inside url("images/star-icon.png");
      }

      /* Abreviatura completa con tipo, imagen y posición */
      .complete-list {
        list-style: lower-roman inside url("images/check-icon.png");
      }

      /* Restablece a predeterminado */
      .default-list {
        list-style: initial;
      }

      /* Elimina el estilo de lista */
      .no-style-list {
        list-style: none;
      }

      /* Agrega algo de espacio para mayor legibilidad */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Demonstración de la abreviatura de estilo de lista</h1>

    <h2>Lista de tareas (Marcadores cuadrados)</h2>
    <ul class="todo-list">
      <li>Aprender el estilo de lista CSS</li>
      <li>Practicar propiedades abreviadas</li>
      <li>Crear listas con estilo</li>
    </ul>

    <h2>Lista de proyectos (Iconos de estrella)</h2>
    <ul class="project-list">
      <li>Proyecto de desarrollo web</li>
      <li>Sistema de diseño</li>
      <li>Tutoriales interactivos</li>
    </ul>

    <h2>Proyectos completados (Iconos de verificación)</h2>
    <ol class="complete-list">
      <li>Fundamentos de CSS</li>
      <li>Diseño responsivo</li>
      <li>Técnicas de estilo avanzadas</li>
    </ol>

    <h2>Lista sin estilo</h2>
    <ul class="no-style-list">
      <li>Marcadores de lista eliminados</li>
      <li>Lista limpia sin estilo</li>
      <li>No hay indicadores visuales</li>
    </ul>
  </body>
</html>

Puntos claves sobre la abreviatura list-style:

Combina list-style-type, list-style-image y list-style-position
El orden no importa para la mayoría de los valores
none elimina todo el estilo de lista
initial restablece a los estilos predeterminados del navegador

Combinaciones abreviadas de ejemplo:

list-style: square inside;
list-style: inside url('image.png');
list-style: lower-roman inside url('icon.png');

Resumen

En este laboratorio, los participantes exploran técnicas de estilo de lista CSS al crear un proyecto HTML con varios tipos de lista, incluyendo listas ordenadas, no ordenadas y de descripción. El laboratorio guía a los aprendices en la personalización de la apariencia de las listas utilizando propiedades CSS como list-style-type, list-style-image y list-style-position.

El ejercicio práctico demuestra cómo modificar los marcadores de lista predeterminados, reemplazar los viñetas estándar con imágenes personalizadas y ajustar la colocación del marcador, proporcionando habilidades prácticas para mejorar el diseño de páginas web y la presentación visual de las listas utilizando atributos CSS.