Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

come stilare e personalizzare gli elenchi puntati

2 agosto 2011, Scritto da , category css

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.

  • Diana

    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!

  • alessandro

    Dispensatore di conoscenza!
    🙂

  • alessandro

    In pratica sei un… dispencer!
    ahahahahahah