logo

Stili di elenco CSS

L'Elenco nei CSS determina come i contenuti o gli elementi sono elencati in un certo modo, ovvero possono essere organizzati in modo ordinato o casuale, il che aiuta a creare una pagina web pulita. Poiché sono adattabili e semplici da maneggiare, possono essere utilizzati per organizzare grandi quantità di materiale. Lo stile predefinito dell'elenco è senza bordi. L’elenco può essere suddiviso in due categorie:

    Lista non ordinata:Per impostazione predefinita, gli elementi degli elenchi non ordinati sono contrassegnati da punti elenco, ovvero piccoli cerchi neri.Lista ordinata:Gli elementi dell'elenco negli elenchi ordinati sono identificati da numeri e lettere.

Le seguenti proprietà degli elenchi CSS sono disponibili per l'utilizzo nel controllo degli elenchi CSS:

    Tipo di stile elenco:Questa proprietà viene utilizzata per determinare l'aspetto del contrassegno dell'elemento dell'elenco, ad esempio un disco, un carattere o uno stile contatore personalizzato.Immagine in stile elenco:Le immagini che fungeranno da contrassegni di voci di elenco possono essere specificate utilizzando questo parametro.Posizione in stile elenco:Descrive dove dovrebbe trovarsi il riquadro del segnalino rispetto al riquadro del blocco principale.Stile elenco:Lo stile dell'elenco è configurato con questo attributo.

Approfondiremo ora queste caratteristiche attraverso degli esempi.

Proprietà di tipo stile elenco

Il tipo di indicatore predefinito dell'elenco può essere modificato in una varietà di altri tipi, inclusi quadrato, cerchio, numeri romani, lettere latine e molti altri. Le voci in un elenco non ordinato sono indicate da punti rotondi (•), mentre le voci in un elenco ordinato sono numerate per impostazione predefinita utilizzando numeri arabi (1, 2, 3, ecc.).

I contrassegni o i punti elenco verranno rimossi se impostiamo il loro valore su nessuno.

Sintassi:

tipo-stile-elenco:valore;

come convertire una stringa in un numero intero Java

Possiamo utilizzare il valore come segue:

  1. cerchio
  2. decimale, ad esempio:1,2,3, ecc
  3. zeri decimali iniziali, ad esempio: 01,02,03,04, ecc
  4. inferiore-romano
  5. alto-romano
  6. alfa inferiore, ad esempio a, b, c, ecc
  7. alfa superiore, ad esempio A, B, C, ecc
  8. piazza

Nota: nell'elenco sono inclusi anche il riempimento e il margine predefiniti. È necessario aggiungere il riempimento:0 e il margine:0 al file
    E
      tag per eliminarlo.

Esempio

Questo esempio mostra un elenco CSS con diversi tipi e valori di stile elenco impostati su quadrato, alfa superiore e molti.

 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> 

Produzione

Stili di elenco CSS