Proprietà CSS relative alle liste

Articles

Questo articolo spiega le proprietà CSS relative alle liste.

Puoi imparare come utilizzare e scrivere la proprietà list-style e la funzione counter().

YouTube Video

HTML per Anteprima

css-list.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

Relativo alle liste

Proprietà `list-style`

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

La proprietà list-style è una proprietà CSS utilizzata per specificare lo stile dei marcatori delle liste (punti elenco) o dei numeri per gli elementi di lista HTML come <ul> e <ol>. Questa proprietà ti permette di controllare lo stile generale della lista, rendendola utile per personalizzare l'aspetto delle liste.

In questo esempio vengono applicati i seguenti stili.

ul: I punti elenco a cerchio vuoto sono visualizzati all'interno.
ol: Numerazione con numeri romani maiuscoli e i numeri vengono visualizzati all'esterno.
Classe custom-list: L'immagine specificata viene visualizzata come punto elenco.

Struttura di `list-style`

list-style è una scorciatoia per le seguenti tre proprietà:

list-style-type: Specifica il tipo di marcatore (punto elenco o numero) per gli elementi della lista.
list-style-position: Specifica se il marcatore è posizionato all'interno (inside) o all'esterno (outside) dell'elemento della lista.
list-style-image: Specifica un'immagine da utilizzare come marcatore della lista.

Uso di base

1ul {
2    list-style: square inside url('path/to/image.png');
3}

Questo codice funziona come segue:

list-style-type: square: Imposta il tipo di marcatore a forma di quadrato.
list-style-position: inside: Il marcatore viene visualizzato all'interno dell'elemento della lista.
list-style-image: url('path/to/image.png'): Usa un'immagine come marcatore.

Spiegazione delle singole proprietà

`list-style-type`

list-style-type specifica il tipo di indicatore per l'elenco. Gli stili disponibili dipendono dal tipo di elenco.

Esempio di valore

 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}

none: Nessun indicatore viene visualizzato.
disc (predefinito): Un piccolo cerchio nero.
circle: Un piccolo cerchio vuoto (anello).
square: Un piccolo quadrato.
decimal: Un elenco numerato come 1, 2, 3, ....
lower-alpha: Alfabeto in minuscolo come a, b, c, ....
upper-alpha: Alfabeto in maiuscolo come A, B, C, ....
lower-roman: Numeri romani in minuscolo come i, ii, iii, ....
upper-roman: Numeri romani in maiuscolo come I, II, III, ....

`list-style-position`

1ul {
2    list-style-position: inside;
3}

La proprietà list-style-position specifica se l'indicatore (punto) è posizionato all'esterno o all'interno dell'elemento dell'elenco. list-style-position può avere i seguenti valori:.

outside: Gli indicatori sono posizionati all'esterno dell'elemento dell'elenco, e l'elemento inizia dopo l'indicatore. Questo è il valore predefinito.
inside: Gli indicatori sono posizionati all'interno dell'elemento dell'elenco e visualizzati come parte del testo.

`list-style-image`

1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

La proprietà list-style-image viene impostata quando si utilizza un'immagine come indicatore dell'elenco. L'immagine viene specificata utilizzando url(), e se l'immagine non può essere caricata, viene visualizzato l'indicatore specificato da list-style-type.

Proprietà abbreviata `list-style`

1ul {
2    list-style: square inside url('bullet.png');
3}

La proprietà list-style è una proprietà abbreviata che consente di impostare list-style-type, list-style-position e list-style-image contemporaneamente. L'ordine è flessibile, ma di solito viene scritto come in questo esempio. In questo caso, un punto elenco quadrato viene visualizzato all'interno dell'elemento dell'elenco e un'immagine viene utilizzata come indicatore.

Riepilogo

list-style è una proprietà abbreviata che consente di specificare l'aspetto dell'elenco (tipo di indicatore, posizione, immagine personalizzata) contemporaneamente.
È anche possibile impostare list-style-type, list-style-position, list-style-image individualmente.
Puoi personalizzare in modo flessibile i marcatori della lista in base al layout e al design.

Contatore CSS (`counter()`)

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

Puoi usare i contatori CSS per numerare automaticamente gli elementi delle liste o gli elementi specifici.

Creare e Inizializzare i Contatori

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

Puoi creare un contatore e resettarlo utilizzando la proprietà counter-reset.

Incrementare i Contatori

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

Puoi incrementare un contatore con la proprietà counter-increment e visualizzare il valore del contatore con la funzione counter.

`counters()`

La funzione counters in CSS è molto utile per gestire contatori personalizzati, come numerare gli elementi di una lista o ordinare i paragrafi. Questa funzione può concatenare più valori di contatori con una stringa e visualizzarli nel contenuto CSS. Qui, spiegheremo in dettaglio dall'utilizzo di base della funzione counters fino a esempi di applicazione pratica.

Differenze tra `counter` e `counters`

Sia la funzione counter che counters vengono utilizzate per visualizzare valori dei contatori, ma hanno le seguenti differenze.

counter: Recupera il valore di un singolo contatore.
counters: Concatena più valori di contatori con un separatore specificato e li visualizza.

Ad esempio, se vuoi usare i contatori con elementi di lista nidificati, puoi utilizzare la funzione counters per visualizzarli concatenando i contatori padre e figlio.

Sintassi della Funzione `counters`

counters(<counter-name>, <string>);

La funzione counters viene utilizzata con la seguente sintassi.

<counter-name>: Specifica il nome del contatore da utilizzare.
<string>: Specifica la stringa da inserire tra ogni contatore (di solito un separatore come . o -).

Esempio di utilizzo della funzione `counters`

Successivamente, vediamo un esempio utilizzando la funzione counters.

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}

In questo esempio, i contatori padre e figlio vengono concatenati per una lista nidificata a due livelli.
- Il contatore list-counter è in fase di definizione.
- La funzione counters viene utilizzata per concatenare e visualizzare il contatore dell'elenco principale e il contatore dell'elenco figlio.

Esempio avanzato di utilizzo dei contatori a più livelli

Utilizzando la funzione counters, puoi gestire in modo flessibile contatori a più livelli, come numerazioni personalizzate o numerazione di paragrafi. Ad esempio, è utile quando si creano documenti che includono capitoli e sezioni.

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

In questo codice, i contatori per i capitoli (h1), le sezioni (h2) e le sottosezioni (h3) vengono ciascuno ripristinati e la funzione counters viene utilizzata per concatenare ciascun livello.

Riepilogo

La funzione counters è molto utile quando si desidera personalizzare e visualizzare più contatori in modo gerarchico. Utilizzando i contatori CSS, puoi personalizzare liberamente la numerazione di elenchi e intestazioni, offrendo alle pagine web una struttura informativa avanzata.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative alla decorazione del modello di scatola Proprietà CSS relative alle tabelle

Proprietà CSS relative alle liste

YouTube Video

HTML per Anteprima

Relativo alle liste

Proprietà list-style

Struttura di list-style

Uso di base

Spiegazione delle singole proprietà

list-style-type

Esempio di valore

list-style-position

list-style-image

Proprietà abbreviata list-style

Riepilogo

Contatore CSS (counter())

Creare e Inizializzare i Contatori

Incrementare i Contatori

counters()

Differenze tra counter e counters

Sintassi della Funzione counters

Esempio di utilizzo della funzione counters

Esempio avanzato di utilizzo dei contatori a più livelli

Riepilogo

YouTube Video

Proprietà `list-style`

Struttura di `list-style`

`list-style-type`

`list-style-position`

`list-style-image`

Proprietà abbreviata `list-style`

Contatore CSS (`counter()`)

`counters()`

Differenze tra `counter` e `counters`

Sintassi della Funzione `counters`

Esempio di utilizzo della funzione `counters`