Proprietà Wap CSS delle liste

I WCSS contengono una serie di proprietà che possono essere utili affinchè si abbia un maggior controllo sugli elenchi, in fase di presentazion a video.

Cambiare il simbolo di default di un elenco (proprietà list-style-type)

Una lista non ordinata è creata per mezzo del tag <ul>. La coppia di tag <ul> e </ul> racchiude al suo interno un numero di item (le singole voci di un elenco). Se volessimo realizzare un elenco non ordinato, basta scrivere il seguente codice XHTML MP:

Ogni elemento in un elenco non ordinato è preceduto da un simbolo di default (bullet). L'impostazione predefinita bullet è disc. Per cambiare il simbolo disc con un'altra forma, si deve ricorrere alle proprietà dei WCSS. Sono disponibili 4 simboli che possono precedere una voce di una lista; essi sono:

• disc;
• circle;
• square;
• none

La proprietà WCSS list-style-type può essere applicata sia all'elemento <ul> che all'elemento <li>. Se viene applicata all'elemento <ul>, tutte le voci di quella lista assumeranno quella caratteristica; se, invece, è applicata solo ad una singola voce, verrà interessata solo quella.

Il seguente esempio di codice XHTML MP - WAP CSS mostra la proprietà list-style-type in azione. Facciamo prima l'esempio con la proprietà circle applicata all'intera lista e poi proveremo a formattare ogni voce dell'elenco con un simbolo diverso.

Come più volte scritto in questo tutorial, potrebbero esserci delle visualizzazzioni differenti a seconda del dispositivo mobile utilizzato. A proposito di ciò, si richiami la pagina di esempio nella quale è stato inserito un elenco con la proprietà: ul{list-style-type:circle;}. Ci si aspetta, quindi, he ogni voce debba presentarsi con un cerchietto vuoto invece, il simulatore di Opera presenta a video dei bullet vuoti di forma quadrata. Non ci si si deve meravigliare se su un altro device potrebbe esserci una risposta diversa.

Visualizziamo, adesso, ogni singola voce di un elenco in maniera differente rispetto all'altra; possiamo ottenere questo risultato con una formattazione dei WCSS in linea e la proprietà style. Se si punta il proprio dispositivo, o il simulatore di Opera alla pagina di esempio, possiamo vedere quanto ottenuto.

Elenchi ordinati

Un elenco ordinato è un elenco che presenta, invece che dei sinbli prima di ogni voce di lista, dei numeri in sequenza. Il tag che permette di ottenere ciò è il tag <ol> che contiene al suo interno le stesse voci racchiuse tra i tag <li> e </li>. Un esempio potrebbe essere come il codice seguente:

Si può vedere la pagina con elenchi ordinati. Ogni voce di lista, nell'elenco, comincia con una un valore in sequenza. Per default il valore è decimal. E' possibile cambiare il valore adottando la proprietà WCSS list-style-type Vediamo tutti i valori possibili messi a disposizione dall'XHTML MP:

• decimal (1, 2, 3, ...)
• upper-alpha (A, B, C, ...)
• lower-alpha (a, b, c, ...)
• upper-roman (I, II, III, ...)
• lower-roman (i, ii, iii, ...)
• none

Se volessimo cambiare il valore di default con le lettere, possiamo vedere una pagina di esempio appositamente preparata.

Specificando un tipo di numerazione diversa da quella predefinita, potrebbe essere utile costruire un elenco nidificato. Vediamo cosa è possibile ottenere realizzando un elenco del genere, mescolando numeri e lettere. Se si richiama dal browser la pagina di esempio, possiamo vedere un elenco annidato.

Usare le immagini come marcatori di lista (proprietà list-style-image)

I WCSS permettono, mediante la proprietà list-style-image, di aere una immagine come marcatore di lista. Se tutte le voci devono avere il file grafico, si annulla il marcatore di default nel tag <ul>, nel seguente modo:

e si dichiara per la voce <li> il percorso all'immagine:

Se tutto il codice è stato scritto in maniera corretta, dovemmo avere un risultato simile alla pagina di esempio, richiamandola dal browser.