Como criar uma lista numerada estilizada no CSS

As listas são os componentes comuns utilizados em documentos para os dados do grupo. Mais especificamente, as listas ordenadas são frequentemente chamadas de listas numeradas. Eles agruparam os dados com uma sequência de números, alfabetos, romano ou mais. Uma lista descritiva, uma lista não ordenada e uma lista ordenada são os três tipos diferentes de listas que podem ser usadas no HTML.

Este artigo guiará especificamente sobre o método para criar e estilizar listas numeradas no CSS.

Como criar uma lista numerada em html?

Com o objetivo de criar uma lista numerada no HTML:

• • Adicione uma div com o nome da classe “O_LIST”.
  • Especificamos

    elemento para o cabeçalho.

  • Depois disso, adicione
    elemento para criar uma lista ordenada.
    1. Adicione múltiplo
    2. elementos dentro do
       Tags que contêm os itens da lista:

Lista ordenada

1. Html


2. CSS


3. JavaScript

Aqui está a saída do código HTML acima:

Como estilizar a lista numerada no CSS?

CSS “Tipo no estilo de lista”A propriedade é utilizada para a configuração dos marcadores de itens da lista. Esses marcadores são alfabetos, romanos, gregos ou mais.

Analise as instruções fornecidas para modelar a lista numerada no CSS.

Etapa 1: especifique cada classe div

A lista de números pode ser aplicada aos estilos descritos abaixo. Cada

O elemento é especificado com o nome da classe “romano","l_Roman","c_alphabets", e "l_alphabets”. Essas aulas são estilizadas com estilos de números diferentes no CSS:



1. Html


2. CSS


3. JavaScript








1. Html


2. CSS


3. JavaScript








1. Html


2. CSS


3. JavaScript








1. Html


2. CSS


3. JavaScript




Etapa 2: Aplique a propriedade “estilo de lista” para as classes da div em divisão

Vamos aplicar o “Tipo no estilo de lista”Propriedade para todas as classes.

Estilo “romano” div

ol.Roman
Tipo no estilo de lista: alta-romana;



A classe "romano”Do elemento div é aplicado ao“Tipo no estilo de lista”Propriedade com o valor“alta-romana”.

Estilo “l_Roman” div

ol.l_Roman
Tipo no estilo de lista: baixo-romano;



A classe “L_romano”Do elemento div é aplicado ao“Tipo no estilo de lista”Propriedade com o valor“baixo romano”.

Estilo “c_alphabets” div

ol.c_alphabets
Tipo de estilo de lista: Upper-Alpha;



O valor que "Alfa superior”Está definido para o“Tipo no estilo de lista" do "c_alphabets”Div.

Estilo “l_alphabet” div

ol.l_alphabets
Tipo de estilo de lista: Lower-Alfa;



Da mesma forma, o “Lower-Alfa”O valor é especificado para a classe“l_alphabets”.

Aqui está a saída do código acima mencionado:


Etapa 3: estilizar a divisão “O_list”

Agora, aplique propriedades de estilo CSS na divisão O_LIST.

Estilo “o_list” div

.O_LIST
Background-Color: #3C4048;
Cor: Ghostwhite;
preenchimento: 10px;
preenchimento-esquerda: 40px;
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;



O ".O_LIST”Refere -se à divisão O_list. O ".”É conhecido como seletor de classe.

As seguintes propriedades são aplicadas à div:

• • ““cor de fundo”Propriedade define a cor de fundo do elemento.
  • ““cor”A propriedade é usada para a configuração/aplicação da cor da fonte.
  • ““preenchimento”O atributo é usado para adicionar espaços ao redor do conteúdo do elemento ou dentro da borda.
  • ““preenchimento-esquerda”A propriedade é usada para definir o espaço como o lado esquerdo do conteúdo do elemento.
  • ““família de fontes”Está definido com o“Verdana, Genebra, Tahoma, Sans-Serif”Valores. Esta lista de valores garante que, se o primeiro estilo de fonte não for suportado pelo navegador, o outro será aplicado.


Etapa 4: estilize o elemento "OL"

.O_LIST OL
cor preta;
Background-Color: #eeaea;



As seguintes propriedades CSS são aplicadas ao “ol" elemento:

• • ““cor”A propriedade é utilizada para o cenário da cor do elemento.
  • ““cor de fundo”Propriedade/atributo é usado para definir/aplicar a cor de fundo do elemento.

Então, aqui está a análise final da nossa lista estilizada:


Nós compilamos as propriedades para estilizar uma lista numerada no CSS.

Conclusão

As listas são os componentes comuns que são utilizados em qualquer documento, pois auxiliam no agrupamento de itens. As listas são de três tipos: listas ordenadas, listas descritivas e listas não ordenadas. As listas ordenadas são frequentemente chamadas de listas numeradas. Esses marcadores de itens de lista podem ser estilizados como romano, alfabeto, grego ou mais, utilizando a propriedade do tipo CSS no estilo de lista. Neste artigo, demonstramos o procedimento para criar uma lista numerada estilizada no CSS com um exemplo prático.