Cómo crear una lista numerada estilizada en CSS

Las listas son los componentes comunes utilizados en documentos para grupos de datos. Más específicamente, las listas ordenadas a menudo se llaman listas numeradas. Agruparon los datos con una secuencia de números, alfabetos, romanos o más. Una lista descriptiva, una lista desordenada y una lista ordenada son los tres tipos diferentes de listas que se pueden usar en HTML.

Este artículo guiará específicamente sobre el método para crear y estilizar listas numeradas en CSS.

Cómo crear una lista numerada en HTML?

Con el fin de crear una lista numerada en HTML:

• • Agregue un DIV con el nombre de la clase "o_list".
  • Especificar

    Elemento para encabezar.

  • Después de eso, agregue
    elemento para crear una lista ordenada.
    1. Agregar múltiples
    2. elementos dentro del
       Etiquetas que contienen los elementos de la lista:

lista ordenada

1. Html


2. CSS


3. Javascript

Aquí está la salida del código HTML anterior:

Cómo estilizar la lista numerada en CSS?

CSS "tipo de listaLa propiedad se utiliza para la configuración de los marcadores de elementos de la lista. Estos marcadores son alfabeto, romano, griego o más.

Analice las instrucciones dadas para diseñar la lista numerada en CSS.

Paso 1: Especifique cada clase Div

La lista de números se puede aplicar a los estilos descritos a continuación. Cada

El elemento se especifica con el nombre de la clase "romano","L_ROMAN","c_alphabets", y "l_alphabets". Estas clases están diseñadas con diferentes estilos de números en 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




Paso 2: Aplicar la propiedad de "tipo de estilo de lista" a las clases Div

Aplicemos el "tipo de lista"Propiedad a todas las clases.

Estilo "Romano" Div

olio.romano
Tipo de estilo de lista: Superior-Roman;



La clase "romano"Del elemento div se aplica al"tipo de lista"Propiedad con el valor"de alto rango".

Estilo "l_roman" div

olio.l_roman
Tipo de estilo de lista: Baja-Roman;



La clase "L_romano"Del elemento div se aplica al"tipo de lista"Propiedad con el valor"inferior".

Estilo "C_Alphabets" Div

olio.c_alphabets
Tipo de estilo List: Alpha superior;



El valor "alfa superior"Está configurado para el"tipo de lista" del "c_alphabets"Div.

Estilo "l_alphabet" div "

olio.l_alphabets
Tipo de estilo list: Alpha inferior;



Del mismo modo, el "alfa inferior"Se especifica el valor para la clase"l_alphabets".

Aquí está el resultado del código mencionado anteriormente:


Paso 3: estilizar el div "o_list"

Ahora, aplique propiedades de estilo CSS al Div O_List.

Estilo "O_List" Div

.o_list
Color de fondo: #3C4048;
Color: Ghostwhite;
relleno: 10px;
ROLDE-LEFUNDA: 40px;
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;



El ".o_list"Se refiere al o_list Div. El "."Se conoce como el selector de clases.

Las siguientes propiedades se aplican al DIV:

• • "color de fondo"La propiedad establece el color de fondo del elemento.
  • "colorLa propiedad se utiliza para configurar/aplicar el color de fuente.
  • "relleno"El atributo se usa para agregar espacios alrededor del contenido del elemento o dentro del borde.
  • "pesadillaLa propiedad se utiliza para configurar el espacio como el lado izquierdo del contenido del elemento.
  • "Familia tipográfica"Está configurado con el"Verdana, Ginebra, Tahoma, Sans-Serif" valores. Esta lista de valores garantiza que si el primer estilo de fuente no es compatible con el navegador, se aplicará el otro.


Paso 4: Estilice el elemento "OL"

.o_list ol
de color negro;
Color de fondo: #eaeaea;



Las siguientes propiedades de CSS se aplican al "olio" elemento:

• • "colorLa propiedad se utiliza para la configuración del color del elemento.
  • "color de fondo"La propiedad/atributo se usa para establecer/aplicar el color de fondo del elemento.

Entonces, aquí está la mirada final a nuestra lista estilizada numerada:


Hemos compilado las propiedades para estilizar una lista numerada en CSS.

Conclusión

Las listas son los componentes comunes que se utilizan en cualquier documento, ya que ayudan a agrupar elementos. Las listas son de tres tipos: listas ordenadas, listas descriptivas y listas desordenadas. Las listas ordenadas a menudo se llaman listas numeradas. Estos marcadores de elementos de la lista se pueden diseñar como romano, alfabeto, griego o más utilizando la propiedad de tipo CSS Lista de estilo. En este artículo, demostramos el procedimiento para crear una lista numerada estilizada en CSS con un ejemplo práctico.