Le liste in html sono distinte in liste ordinate ( <ol> ) e liste non ordinate ( <ul> ).

Esempi possono essere:

1. item 1
2. item 2
3. item 3

• item 1
• item 2
• item 3

che corrispondono rispettivamente al codice xhtm:

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>

e

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Con i css è possibile definire fondamentalmente il tipo di rappresentazione della lista con la proprietà list-style e le categorie specifiche

• list-style-position: [inside | outside]
• list-style-type: [none | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha]
• list-style-image: <url>

List-style-position ci da la possibilità di inserire il marcatore all’interno o all’esterno del blocco <li>.

List-style-type è probabilmente la proprietà più sfruttata nei css, nonché la più interessante che ci permette di stabilire se:

• non utilizzare nessuno stile (none);
• utilizzare un disco (disc), opzione di default;
• utilizzare un cerchio (circle);
• utilizzare un quadrato (square)

per le liste non ordinate e

• non utilizzare nessuno stile (none);
• utilizzare i numeri decimali (decimal), opzione di default;
• utilizzare i numeri decimali partendo da zero (decimal-leading-zero);
• utilizzare i numeri romani in minuscolo (lower-roman)
• o in maiuscolo (upper-roman);
• utilizzare le lettere dell’alfabeto in minuscolo (lower-alpha);
• o ovviamente in maiuscolo (upper-alpha);
• utilizzare le lettere latine, greche, ebree, armene, georgiane, cirilliche, gli ideogrammi giapponesi e così via.

List-style-image infine ci da l’occasione di utilizzare immagini al posto dei classici marcatori, opzione molto carina ma da sfruttare con attenzione per evitare pastrocchi grafici inguardabili.

Uno dei problemi più diffusi che si incontra quando si inizia a lavorare con i css sulle liste è la loro apparente difficoltà di mostrarle simili su vari browser a causa del diverso valore di default degli stessi riguardo i margini ed il padding delle liste e dei vari elementi della lista.
In seguito pubblicheremo un esempio pratico, per ora il consiglio è di impostare il padding ed il margin sia ad <ul> che <li> (ed ovviamente anche a <ol> nel caso si usi una lista ordinata) e ridefinirli di volta in volta in base alle necessità.

Esiste infine un tipo di lista usata pochissimo che è la cosiddetta "lista di definizione", definita dal tag <dl> con due tag caratteristici:

<dt> titolo della definizione
<dd> definizione vera e propria

Es.

<dl>
  <dt>Lista</dt>
  <dd>elenco di cose o di persone, cifre, dati e simboli</dd>
  <dt>Definizione</dt>
  <dd>specificazione esatta, determinazione</dd>
</dl>

a cui corrisponderà

Lista

elenco di cose o di persone, cifre, dati e simboli

Definizione

specificazione esatta, determinazione

Come si nota può esser utilmente impiegata per la creazione di glossari, per separare i partecipanti ad una conversazione e così via.

Senza css questi tag si comporteranno come elementi di blocco, come d’altronde succede per le liste ordinate e non-ordinate ed è pertanto possibile utilizzare le stesse proprietà che utilizzeremo per qualsiasi elemento blocco, cosa che le rende particolarmente interessanti.

A cosa servono le entità?

Penso sappiate tutti che ogni lingua ha una base di lettere comuni ad altre mentre altre sono proprie di alcune lingue, come ad esempio la ç le nostre accentate, la ã per non parlare dei vari ideogrammi delle lingue orientali. Per ovviare a tale problema sono nati anche per i computer i charset, cioè i set di caratteri cioè un gruppo di caratteri standard per una determinata lingua. Ovviamente ogni set ha caratteristiche proprie ed una base comune a tutte le altre.

Credo sia capitato a molti di scrivere in un documento una lettera accentata e vederla alcune volte rappresentata correttamente altre volte con al suo posto un carattere strano (tipicamente un ? ). Ciò avviene perché non si è definito il charset corretto per quel carattere o perché non si è fatto uso delle entità, cioè un codice, nella forma &xxxx; che definisce quel carattere leggibile da qualunque sistema.
La forma corretta delle entità è quella di inserire al posto delle varie xxxx un # seguito da numeri. Il carattere " viene rappresentato con il codice &#34;. Tale forma è ovviamente difficile da ricordare e per tal motivo spesso si usa una parola chiave, di facile memorizzazione al suo posto, come ad esempio &quot;.

Di seguito troverete molte delle entità che potrete utilizzare nelle vostre pagine web: la prima colonna indica la forma semplice da ricordare, la seconda la rappresentazione della stessa la terza la rappresentazione numerica.

Qui invece troverete una lista molto più estesa delle entità nella rappresentazione alfanumerica.