HTML ofrece una forma flexible de crear listas anidadas a través de sus elementos de lista ordenados y desordenados. Estos se pueden anidar entre sí un número ilimitado de veces para ayudar a organizar los datos jerárquicos, como los encabezados de los capítulos y subcapítulos de un documento en línea. Con la ayuda de algunos códigos CSS, las listas anidadas se pueden diseñar para adaptarse a las necesidades personalizadas, ya sea proporcionando atributos globales a la lista o utilizando un estilo diferente para cada capa del nido.

Tipos de lista

Hay dos tipos de listas que puede usar en HTML, y hay un elemento de elemento de lista que define los elementos para ambos. El primer tipo de lista es una lista desordenada, que es llamada por el

etiquetas Esto proporciona una lista con viñetas, aunque puede eliminar las viñetas dentro del CSS configurando el tipo de estilo de lista como "ninguno". El segundo es una lista ordenada, llamada con

, que devuelve una lista numerada. Entre las etiquetas de apertura y cierre, se define cada elemento de la lista. Por ejemplo:

• Artículo de la lista 1
• Artículo de la lista 2

Lista anidada

Para crear una lista anidada, debe llamar a un segundo

o
antes de un dado
1. La etiqueta ha sido cerrada. Asegúrese de cerrar la lista anidada correctamente. Por ejemplo, para crear una lista ordenada anidada dentro de una lista desordenada, use el siguiente código:
   • Artículo de la lista 1
     1. Elemento de la sub lista 1
     2. Elemento de la sub lista 2
     3. Elemento de la sub lista 3
   • Artículo de la lista 2

   Asegúrese de cerrar cada elemento de la lista y cada lista con el código de cierre, como

,

y .

Declarando CSS

Si desea personalizar la apariencia de la lista anidada, debe usar CSS, que significa "Hoja de estilo en cascada". La estética y el posicionamiento del CSS generalmente están contenidos en una hoja de estilo separada, que se llama desde las etiquetas de la cabeza con un código similar al siguiente:

CSS también se puede declarar "Inline", lo que significa en el propio atributo HTML real, como esto:

El CSS en línea tiene prioridad sobre el código en la hoja de estilo.

En la hoja de estilo

El código CSS debe estar escrito en un formato específico para que funcione correctamente. En la hoja de estilo, declare el código para cada atributo en el siguiente formato:

ul {

valor de atributo;

}

Esto daría estilo a la lista desordenada. Para darle estilo a un anidado.

• , usa el siguiente código:

  li li {

  valor de atributo;

  }

  Esto define el código para el elemento de la lista con dos capas de profundidad. Asegúrese de que todas las líneas de "atributo: valor" terminen con un punto y coma, y ​​asegúrese de que las llaves rodean el elemento que está definiendo.