NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo

Capitolo 5: Le liste.

 

Tramite i CSS possiamo modificare l'aspetto dei tag LI (list item) delle liste html.

 

Possiamo impostare le seguenti proprietà:

  • list-style-image: url('/[path file immagine]')

Permette di utilizzare, come marker (marcatore, simbolo) di un elemento della lista un'immagine, reperibile all'url specificato come argomento di url([path]).

 

  • list-style-position: inside | outside

Consente di definire la posizione del marker dell'elemento della lista in relazione al testo di tale elemento.

I valori possono essere:

  • inside --- il marker fa parte del testo, appartiene al suo "box", verrà visualizzato all'interno del testo in caso di visualizzazione dello stesso su più righe.
  • outside --- il marker si trova al di fuori del "box" del testo (più precisamente, alla sua sinistra). E' il comportamento di default.

 

 

  • list-style-type: [varie opzioni, vd. elenco nella descrizione]

Definisce l'aspetto del marker di un elemento della lista.

Possibili valori:

disc Un cerchio pieno. Il colore di riempimento può essere impostato mediante una regola color per il contenitore della lista.
circle Un cerchio vuoto.
square Un quadrato.
decimal Numeri interi: 1, 2, 3, 4...
decimal-leading-zero Numeri interi con uno 0 posto davanti a ciascun numero: 01, 02, 03, ...
lower-roman Numeri romani in minuscolo: i, ii, iii, iv, v, ...
upper-roman Numeri romani in maiuscolo: I, II, III, IV, V, ...
lower-alpha Lettere dell'alfabeto in minuscolo: a, b, c, d, ...
upper-alpha Lettere dell'alfabeto in maiuscolo: A, B, C, D, ...
lower-latin Come lower-alpha.
upper-latin Come upper-alpha.
lower-greek Lettere dell'alfabeto greco in minuscolo.

 

 

 
Vai all'inizio della pagina