Come creare un elenco numerato stilizzato in CSS

Gli elenchi sono i componenti comuni utilizzati nei documenti per raggruppare i dati. Più specificamente, gli elenchi ordinati sono spesso chiamati elenchi numerati. Hanno raggruppato i dati con una sequenza di numeri, alfabeti, romani o più. Un elenco descrittivo, un elenco non ordinato e un elenco ordinato sono i tre diversi tipi di elenchi che possono essere utilizzati in HTML.

Questo articolo guiderà specificamente sul metodo per creare e stilizzare elenchi numerati in CSS.

Come creare un elenco numerato in HTML?

Ai fini della creazione di un elenco numerato in HTML:

• • Aggiungi un div con il nome di classe "o_list".
  • Specificare

    elemento per l'intestazione.

  • Dopodiché, aggiungi
    elemento per creare un elenco ordinato.
    1. Aggiungi più
    2. elementi all'interno del
       Tag che contengono gli elementi dell'elenco:

lista ordinata

1. Html


2. CSS


3. JavaScript

Ecco l'output del codice HTML sopra:

Come stilizzare l'elenco numerato in CSS?

CSS "tipo elenco"La proprietà è utilizzata per l'impostazione dei marcatori dell'elenco elementi. Questi marcatori sono alfabeti, romani, greci o più.

Analizza le istruzioni fornite per lo styling dell'elenco numerato in CSS.

Passaggio 1: specificare ogni classe Div

L'elenco dei numeri può essere applicato agli stili descritti di seguito. Ogni

L'elemento è specificato con il nome della classe "romano","l_roman","c_alphabets", E "l_alphabets". Queste classi sono disegnate con diversi stili di numeri in 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




Passaggio 2: applicare la proprietà "Elenco stile" alle classi DIV

Applichiamo il "tipo elenco"Proprietà a tutte le classi.

Stile "romano" div

ol.romano
Tipo di stile elenco: Upper-Roman;



La classe "romano"Dell'elemento Div viene applicato al"tipo elenco"Proprietà con il valore"superiore-romano".

Stile "l_roman" div

ol.l_roman
Tipo di stile elenco: inferiore-romano;



La classe “l_romano"Dell'elemento Div viene applicato al"tipo elenco"Proprietà con il valore"inferiore".

Stile "c_alphabets" div

ol.c_alphabets
Tipo di stile elenco: alfa superiore;



Il valore "alfa superiore"È impostato per il"tipo elenco"Del"c_alphabets"Div.

Stile "l_alphabet" div

ol.l_alphabets
Tipo di stile elenco: alfa inferiore;



Allo stesso modo, il "alfa inferiore"Il valore è specificato per la classe"l_alphabets".

Ecco l'output del codice sopra menzionato:


Passaggio 3: stilizzare il div "o_list"

Ora, applica le proprietà di stile CSS al div o_list.

Stile "o_list" div

.o_list
Background-color: #3C4048;
Colore: Ghostwhite;
imbottitura: 10px;
imbottitura-sinistra: 40px;
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;



IL ".o_list"Si riferisce a O_list Div. IL "."È noto come selettore di classe.

Le seguenti proprietà sono applicate al div:

• • "colore di sfondo"La proprietà imposta il colore di sfondo dell'elemento.
  • "colore"La proprietà viene utilizzata per l'impostazione/applicazione del colore del carattere.
  • "imbottitura"L'attributo viene utilizzato per aggiungere spazi attorno al contenuto dell'elemento o all'interno del bordo.
  • "imbottitura-sinistra"La proprietà viene utilizzata per impostare lo spazio come lato sinistro del contenuto dell'elemento.
  • "famiglia di font"È impostato con il"Verdana, Ginevra, Tahoma, Sans-Serif" valori. Questo elenco di valori garantisce che se il primo stile di carattere non è supportato dal browser, l'altro verrà applicato.


Passaggio 4: stilizzare l'elemento "ol"

.o_list ol
colore nero;
Background-color: #eaeaea;



Le seguenti proprietà CSS sono applicate al "ol"Elemento:

• • "colore"La proprietà viene utilizzata per l'impostazione del colore dell'elemento.
  • "colore di sfondo"Proprietà/attributo viene utilizzato per impostare/applicare il colore di sfondo dell'elemento.

Quindi, ecco lo sguardo finale al nostro elenco numerato stilizzato:


Abbiamo compilato le proprietà per stilizzare un elenco numerato in CSS.

Conclusione

Gli elenchi sono i componenti comuni che vengono utilizzati in qualsiasi documento in quanto aiutano a raggruppare gli elementi. Gli elenchi sono di tre tipi: elenchi ordinati, elenchi descrittivi e liste non ordinate. Gli elenchi ordinati sono spesso chiamati elenchi numerati. Questi marcatori di elementi elenca possono essere disegnati come romani, alfabeti, greci o più utilizzando la proprietà di tipo CSS in stile elenco. In questo articolo, dimostriamo la procedura per creare un elenco numerato stilizzato in CSS con un esempio pratico.