Sono Andrea Tonin di Rovigo, mi occupo per professione di programmazione CSS e HTML. Spero che questo corso pratico di CSS vi possa essere utile :)

In CSS è possibile programmare una gestione avanzata degli elenchi html presenti nella pagina web.
L’istruzione – list-style-position – ci permette di definire la posizione del marcatore di elenco.

Vediamo un esempio pratico nel seguente codice:

<!DOCTYPE html>
<html>
 
<head>
<title>Titolo del documento</title>
 
<style type="text/css"> 
ul.a {list-style-position:outside;}
ul.b {list-style-position:inside;}
ul.c {list-style-position:outside;}
</style> 

</head>
 
<body>
<p>Esempio di elenchi generati dinamicamente con il CSS:</p>

OUTSIDE:<br>
<ul class="a">
  <li>Prima voce</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</li>
  <li>Terza voce</li>
</ul>

INSIDE:<br>
<ul class="b">
  <li>Prima voce</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</li>
  <li>Terza voce</li>
</ul>

OUTSIDE:<br>
<ul class="c">
  <li>Prima voce</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</li>
  <li>Terza voce</li>
</ul>
</body>
 
</html>

Vediamo il risultato finale qui sotto:

Qui sotto il risultato finale:

Esempio di elenchi generati dinamicamente con il CSS:

OUTSIDE:

  • Prima voce
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
  • Terza voce

INSIDE:

  • Prima voce
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
  • Terza voce

OUTSIDE:

  • Prima voce
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
  • Terza voce

Il mio sito ufficiale>