Le liste

Per definire il tipo di lista basta definire la classe nel tag “ul” o “ol” oppure “li” (quest’ultima soluzione è sconsigliata, perchè bisognerebbe aggiungere la classe a tutti gli elementi della lista). Le classi a disposizione sono le seguenti:

NOTA IMPORTANTE: i nomi delle classi CSS devono essere sempre inserite con tutti i caratteri in minuscolo

ESEMPIO 1 (classe decimal)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 1:
<ul class="decimal">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

ESEMPIO 2 (classe disc)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 2:
<ol class="disc">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 3 (classe decimal a square)

  • Item 1
  • Item 2
CODICE ESEMPIO 3 (sconsigliato anche se possibile):
<ol">
  <li class="decimal">Item 1</li>
  <li class="square">Item 2</li>
</ol>

ESEMPIO 4 (classe circle)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 4:
<ol class="circle">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 5 (classe square)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 5:
<ol class="square">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 6 (classe lower-alpha)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 6:
<ol class="lower-alpha">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 7 (classe lower-greek)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 7:
<ol class="lower-greek">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 8 (classe lower-latin)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 8:
<ol class="lower-latin">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 9 (classe lower-roman)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 9:
<ol class="lower-roman">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 10 (classe upper-alpha)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 10:
<ol class="upper-alpha">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 11 (classe upper-latin)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 11:
<ol class="upper-latin">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 12 (classe upper-roman)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 12:
<ol class="upper-roman">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 13 (classe bullet)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 13:
<ol class="bullet">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 14 (classe triangle)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 14:
<ol class="triangle">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 15 (classe checked)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 15:
<ol class="checked">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 16 (classe marked)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 16:
<ol class="marked">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 17 (classe star)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 17:
<ol class="star">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

ESEMPIO 18 (classe trattino)

  1. Item 1
  2. Item 2
CODICE ESEMPIO 18:
<ol class="star">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>