Le liste

Stile del marker

Per definire il tipo di marker degli elementi della lista, sia ordinata <ol> che non ordinata <ul> dobbiamo usare la proprietà list-style-type che può avere questi valori: disc (cerchio pieno), circle (cerchio vuoto), square (quadratino), decimal (numeri), upper-alpha (lettere maiuscole), lower-alpha (lettere minuscole), upper-roman (numeri romani maiuscoli), lower-roman (numeri romani minuscoli). Più spesso però si usa il valore none per eliminare del tutto il marker.

ol {
	list-style-type: none;
}

Immagine come marker

Per definire un'immagine che sostituisca i marker predefiniti dobbiamo usare la proprietà list-style-image con valore l'URL dell'immagine da usare. Se l'immagine non venisse caricata verrebbe usato il marker definito dalla proprietà list-style-type.

ul {
	list-style-image: url(https://placecats.com/50/50);
}

Posizione del marker

Per definire la posizione dei marker in relazione agli elementi della lista dobbiamo usare la proprietà list-style-position che può avere valore inside (i marker vengono posizionati come se facessero parte del testo della voce elenco) o outside (i marker vengono posizionati a sinistra dell'elenco, valore di default).

.inside {
  list-style-position: inside;
}

E' anche possibile scrivere tutte le proprietà in una sola specificando il tipo l'immagine e la posizione (shorthand property).

.shorthand {
	list-style: none url(https://placecats.com/50/50) inside;
}

La proprietà list-style-image ha la precedenza sulla proprietà list-style-type ma vengono settate tutte e due in modo che list-style-type sia usata nel caso in cui l'immagine non sia caricata.

<ol>
  <li>primo li</li>
  <li>secondo li</li>
  <li>terzo li</li>
</ol>

<ul>
  <li>primo li</li>
  <li>secondo li</li>
  <li>terzo li</li>
</ul>

<ul class="inside">
  <li>primo li</li>
  <li>secondo li</li>
  <li>terzo li</li>
</ul>

<ul class="shorthand">
  <li>primo li</li>
  <li>secondo li</li>
  <li>terzo li</li>
</ul>

ol {
	list-style-type: none;
}

ul {
	list-style-image: url(https://placecats.com/50/50);
}

.inside {
  list-style-position: inside;
}

.shorthand {
	list-style: none url(https://placecats.com/50/50) inside;
}

// no js