Gli elenchi puntati, anche se può non sembrare, sono tra gli elementi più utilizzati nella recente costruzione di layout di pagine web. Come già visto nel corso HTML, la sintassi per utilizzarli è molto semplice:
<ul><!-- inizializzo un elenco puntato--> <li>prima voce</li><!-- inserisco un item --> <li>...</li> </ul>
La sintassi degli elenchi numerati è identica alla precedente con l’unica eccezione del tag <ul> (unordered list) che viene sostituito dal tag <ol> (ordered list), ma ci interessa meno.
Perché gli elenchi puntati sono importanti
Fino all’avvento dei CSS 2.0, pre creare voci di menu orizzontali o verticali, si ricorreva all’utilizzo delle tabelle html e si creavano tante celle quante erano le voci di menu. In alternativa, si usava la normale scrittura HTML con l’aggiunta di qualche separatore grafico (o testuale, tipo la pipe “|” o il trattino “-”) oppure semplicemente mandando a capo le voci di menu con qualche <br>. In alternativa si ricorreva a soluzioni grafiche in flash (soluzione piuttosto frequente) o con immagini gif/png.
La possibilità di gestire il layout grazie agli attributi position, display, e di personalizzare l’aspetto del box model grazie all’utilizzo delle proprietà margin, padding, border, ha spalancato le porte ad un nuovo tipo di sviluppo che ha portato ad un alleggerimento del codice, ad una semplificazione della scrittura e di aggiornamento dello stesso oltre ad una velocità di sviluppo e rendering tale da rendere obsoleta qualsiasi forma di progettazione di menu precedente.
Torneremo a parlare degli elenchi puntati utilizzati come menu dopo aver affrontato il problema della visibilità e del posizionamento.
Come personalizzare l’aspetto degli elenchi puntati
Con i css è possibile modificare tutti gli aspetti e le proprietà che compongono gli elenchi puntati e numerati. Vediamo come.
- list-style-image: questa proprietà, in aggiunta con la specifica url, inserisce un’immagine da usare come segnaposto. E’ ereditabile e si applica a tutti gli elementi <li>. Poiché è una proprietà ereditaria si può fare l’override (la sovrascrittura) della proprietà ereditata utilizzando il valore none se non si desidera alcuna immagine come segnaposto.
Es:ul li {list-style-image: url(sun.gif)} /*utilizzo l'immagine sun.gif come segnaposto del mio elemento puntato*/ - list-style-position: con questa proprietà si specifica la posizione del marcatore rispetto all’item. E’ ereditabile e si applica agli elementi <li>.
Il marcatore può assumere i valori outside (valore di default) ed inside (in questo caso diventa parte integrante del testo)
Es:ul li {list-style-position: inside} ... - list-style-type: questa regola definisce l’aspetto del marker. E’ ereditaria e si applica a tutti i list item <li>.
I valori possono essere: disc, circle, square, decimal, lower-roman, lower-alpha, lower-latin, lower-greek …
Es:ul li {list-style-tipe: square} /* utilizzo un quadratino come marker dell'item*/
Tutte le proprietà sopra riportate possono essere scritte con la sintassi abbreviata list-type.
Es:
ul li {list-style: circle inside}
ul li {list-style: inside url(‘img/sun.gif’);
Avrete notato che questa volta ho messo gli apici prima e dopo il nome dell’immagine contenuta nel valore url: non è un errore, gli apici sono opzionali quindi possiamo metterli o meno.
Questo articolo è stato letto 334 volte! Se ti è piaciuto, spargi la voce!
Ciao Giacomo!
Grazie perchè vedo che pazientemente continui ad aggiornare gli appunti del corso…
[...]
A presto e buon ferragosto!
Diana
ok, Diana, ci sentiamo dopo le ferie.
A presto,
ciao!
Dispensatore di conoscenza!
In pratica sei un… dispencer!
ahahahahahah