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:
Le seguenti proprietà degli elenchi CSS sono disponibili per l'utilizzo nel controllo degli elenchi CSS:
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:
- cerchio
- decimale, ad esempio:1,2,3, ecc
- zeri decimali iniziali, ad esempio: 01,02,03,04, ecc
- inferiore-romano
- alto-romano
- alfa inferiore, ad esempio a, b, c, ecc
- alfa superiore, ad esempio A, B, C, ecc
- piazza
Nota: nell'elenco sono inclusi anche il riempimento e il margine predefiniti. È necessario aggiungere il riempimento:0 e il margine:0 al fileEtag per eliminarlo.
- 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