A Lista em CSS determina como os conteúdos ou itens são listados de uma determinada maneira, ou seja, podem ser organizados de forma organizada ou aleatória, o que auxilia na criação de uma página limpa. Por serem adaptáveis ​​e simples de manusear, podem ser utilizados para organizar grandes quantidades de material. O estilo padrão da lista é sem borda. A lista pode ser dividida em duas categorias:

Lista não ordenada:Por padrão, os elementos da lista em listas não ordenadas são indicados com marcadores, que são pequenos círculos pretos.Lista ordenada:Os elementos da lista em listas ordenadas são identificados por números e letras.

As seguintes propriedades de lista CSS estão disponíveis para uso no controle de listas CSS:

Tipo de estilo de lista:Esta propriedade é usada para determinar a aparência do marcador de item da lista, como um disco, caractere ou estilo de contador personalizado.Imagem em estilo de lista:As imagens que servirão como marcadores de itens da lista podem ser especificadas através deste parâmetro.Posição no estilo de lista:Ele descreve onde a caixa do marcador deve estar em relação à caixa do bloco principal.Estilo de lista:O estilo da lista é configurado com este atributo.

Aprenderemos agora mais sobre essas características por meio de exemplos.

Propriedade do tipo estilo de lista

O tipo de marcador de lista padrão pode ser alterado para uma variedade de outros tipos, incluindo quadrado, círculo, algarismos romanos, letras latinas e muitos mais. As entradas em uma lista não ordenada são indicadas por marcadores redondos (•), enquanto os itens em uma lista ordenada são numerados por padrão usando algarismos arábicos (1, 2, 3, etc.).

As marcações ou marcadores serão removidos se definirmos seu valor como nenhum.

Sintaxe:

tipo de estilo de lista: valor;

parâmetro verilog

Podemos usar o valor da seguinte forma:

1. círculo
2. decimal, por exemplo: 1,2,3, etc.
3. zeros à esquerda decimais, por exemplo: 01,02,03,04, etc.
4. romano inferior
5. romano superior
6. alfa inferior, por exemplo, a, b, c, etc.
7. alfa superior, por exemplo, A, B, C, etc.
8. quadrado

Nota: O preenchimento e a margem padrão também estão incluídos na lista. É necessário adicionar padding:0 e margin:0 ao

e
tags para eliminar isso.

Exemplo

Este exemplo mostra uma lista CSS com vários tipos de estilo de lista e valores definidos como quadrado e alfa superior e muitos.

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul> 

Saída