En HTML, los usuarios pueden insertar datos en muchas formas, incluyendo "liza","mesas","párrafos", etcétera. Además, también puede agregar datos en forma de listas, como listas ordenadas y listas desordenadas. Además, HTML permite a sus usuarios crear listas anidadas para manejar los datos correctamente. La lista ordenada muestra los datos en los números, y la lista no ordenada muestra datos en forma de bala.

Este blog explicará:

• Cómo hacer una lista anidada HTML?
• Cómo aplicar el estilo en la lista anidada en CSS?

Cómo hacer una lista anidada HTML?

Para hacer una lista anidada HTML, siga el procedimiento paso a paso dado.

Paso 1: inserte un encabezado

Primero, inserte un encabezado utilizando cualquier etiqueta de encabezado de "

" a "

". En este escenario, hemos usado el "

Paso 2: Crear contenedor "Div"

A continuación, cree un contenedor Div con la ayuda del "Elemento "e inserte un"identificación"Atributo dentro de la etiqueta de apertura del div con un nombre particular.

Paso 3: Agregar lista desordenada

Ahora, utiliza el "

"Etiqueta para agregar una lista desordenada. Luego, agregue la prueba con la ayuda del "
• " etiqueta. A continuación, agregue una lista desordenada anidada y agregue datos para la lista entre el "
  " etiqueta.

  Paso 4: crear una lista ordenada

  A continuación, dentro de la primera lista desordenada, cree una lista ordenada utilizando el "

  "Etiqueta e incrusta los datos en forma de una lista ordenada con el"
  1. " etiqueta:

     Lista anidada adecuada

     
     
     
     
     
     • Cursos de informática
     
     
     
     
     • Estructura de datos
     
     
     • Sistema de administración de base de datos
     
     
     • Sistema operativo
     
     
     • Programación orientada a objetos
     
     
     
     
     • Categorías de informática
     
     
     
     
     1. Windows
     
     
     2. Reaccionar js
     
     
     3. CSS
     
     
     4. Git
     
     
     5. Oreja
     
     
     6. Javascript
     
     
     
     
     
     

     Se puede observar que la lista anidada HTML se ha creado con éxito:

     Si el usuario desea aplicar el estilo en la lista, avance hacia la siguiente sección.

     Cómo aplicar el estilo en la lista anidada en CSS?

     Para aplicar el estilo en una lista anidada en CSS, consulte los pasos dados.

     Paso 1: encabezado de estilo

     Acceda al encabezado usando el "H1"Nombre de la etiqueta y aplique las propiedades dadas:

     H1
     Centro de alineación de texto;
     color azul;
     

     Aquí:

     • "texto alineado"Se utiliza para establecer la alineación central del texto.
     • El CSS "color"La propiedad especifica el color del texto definido.

     Paso 2: Estilado de contenedor Div principal

     Acceda al Div principal con la ayuda del nombre de "identificación" como "#Lista anidada”Y aplique las siguientes propiedades mencionadas en el bloque de código:

     #Lista anidada
     Color de fondo: RGB (182, 250, 227);
     margen: 20px 70px;
     relleno: 30px;
     borde: azul punteado;
     

     Los detalles de las propiedades indicadas son los siguientes:

     • "color de fondoLa propiedad se utiliza para configurar el color en la parte posterior del elemento.
     • "margen"Especifica el espacio fuera del límite definido.
     • "relleno"Se usa para agregar espacio dentro del elemento definido.
     • "borde"Determina un límite alrededor del elemento.

     Producción

     Esa es la forma de la propiedad para hacer una lista anidada HTML.

     Conclusión

     Para hacer una lista anidada, los usuarios pueden utilizar listas ordenadas y desordenadas. Para hacerlo, inserte la primera lista con la ayuda del "

     " o "
     "Etiqueta e incrusta datos. Luego, defina otra lista dentro de la primera lista. Este artículo ha examinado el procedimiento para hacer la lista anidada adecuada en HTML.