No HTML, os usuários podem inserir dados em várias formas, incluindo “listas","mesas","parágrafos", e assim por diante. Além disso, você também pode adicionar dados na forma de listas, como listas ordenadas e listas não ordenadas. Além disso, o HTML permite que seus usuários criem listas aninhadas para lidar com os dados corretamente. A lista ordenada exibe os dados em números, e a lista não ordenada mostra dados em forma de bala.

Este blog explicará:

• Como fazer uma lista de aninhados HTML?
• Como aplicar o estilo na lista aninhada no CSS?

Como fazer uma lista de aninhados HTML?

Para fazer uma lista aninhada de HTML, siga o procedimento passo a passo dado.

Etapa 1: Insira um título

Primeiro, insira um título utilizando qualquer tag de título de “

" para "

”. Nesse cenário, usamos o “

Etapa 2: Crie um contêiner "div"

Em seguida, crie um contêiner div com a ajuda do “”Elemento e insira um“eu ia”Atributo dentro da tag de abertura da div com um nome específico.

Etapa 3: Adicionar lista não ordenada

Agora, utilize o “

”Tag para adicionar uma lista não ordenada. Em seguida, adicione o teste com a ajuda do “
• " marcação. Em seguida, adicione uma lista não ordenada aninhada e adicione dados para a lista entre os “
  " marcação.

  Etapa 4: Crie uma lista ordenada

  Em seguida, dentro da primeira lista não ordenada, crie uma lista ordenada usando o “

  ”Tag e incorporar dados na forma de uma lista ordenada com o“
  1. " marcação:

     Lista aninhada adequada

     
     
     
     
     
     • Cursos de ciência da computação
     
     
     
     
     • Estrutura de dados
     
     
     • Sistema de gerenciamento de banco de dados
     
     
     • Sistema operacional
     
     
     • Programação orientada a objetos
     
     
     
     
     • Categorias de ciência da computação
     
     
     
     
     1. janelas
     
     
     2. Reaja js
     
     
     3. CSS
     
     
     4. Git
     
     
     5. Bootstrap
     
     
     6. JavaScript
     
     
     
     
     
     

     Pode -se observar que a lista aninhada HTML foi criada com sucesso:

     Se o usuário quiser aplicar o estilo na lista, mova -se em direção à próxima seção.

     Como aplicar o estilo na lista aninhada no CSS?

     Para aplicar o estilo em uma lista aninhada no CSS, confira as etapas fornecidas.

     Etapa 1: cabeçalho de estilo

     Acesse o cabeçalho usando o “H1”Nome da tag e aplique as propriedades fornecidas:

     H1
     centro de alinhamento de texto;
     cor azul;
     

     Aqui:

     • ““alinhamento de texto”É utilizado para definir o alinhamento central do texto.
     • O CSS “cor”Propriedade especifica a cor do texto definido.

     Etapa 2: estilo Div principal contêiner

     Acesse a div principal com a ajuda do nome de “eu ia" como "#lista aninhada”E aplique as seguintes propriedades mencionadas no bloco de código:

     #lista aninhada
     Background-Color: RGB (182, 250, 227);
     Margem: 20px 70px;
     preenchimento: 30px;
     Fronteira: azul pontilhado;
     

     Os detalhes das propriedades acima mencionadas são as seguintes:

     • ““cor de fundo”A propriedade é utilizada para definir a cor na parte traseira do elemento.
     • ““margem”Especifica o espaço fora do limite definido.
     • ““preenchimento”É usado para adicionar espaço dentro do elemento definido.
     • ““fronteira”Determina um limite ao redor do elemento.

     Saída

     Essa é a maneira de fazer a lista de aninhados HTML.

     Conclusão

     Para fazer uma lista aninhada, os usuários podem utilizar listas ordenadas e não ordenadas. Para fazer isso, insira a primeira lista com a ajuda do “

     " ou "
     ”Dados de tag e incorporação. Em seguida, defina outra lista na primeira lista. Este artigo examinou o procedimento para fazer a lista aninhada adequada em HTML.