|
|
|
Esistono pochi precisi elementi di stile per cambiare aspetto agli elenchi. Vediamoli in successione. Aspetto del simbolo che precede le voci di un elencoPer definire che aspetto debba avere il simbolo che precede le voci di un elenco si usa l'elemento di stile list-style-type. Premesso che il tag HTML che definisce l'elenco puntato è <ul> e quello che definisce l'elenco numerato è <ol>, i valori ammessi sono: none (nessuno) circle (cerchietto vuoto) square (quadratino pieno) decimal (numero) lower-roman (numero romano in minuscolo) upper-roman (numero romano in maiuscolo) lower-alpha (lettera dell'alfabeto minuscola) upper-alpha (lettera dell'alfabeto maiuscola)
Vediamo subito un esempio:<html> <head> <title>Titolo del documento</title> <style type="text/css"> BODY { background:#FFFFD1; color:#000000; text-align:left; margin-left : 250px; margin-right: 250px} ol {list-style-type: upper-roman} ul {list-style-type: circle} </style> </head> <body> <ol> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ol> <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ul> </body> </html>
Vediamone un altro sulla base dello stesso schema: Ecco l'esempio: <html> <head> <title>Titolo del documento</title> <style type="text/css"> BODY { background:#FFFFD1; color:#000000; text-align:left; margin-left : 250px; margin-right: 250px} ol {list-style-type: upper-alpha} ul {list-style-type: circle} </style> </head> <body> <ol> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ol> <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ul> </body> </html> Nota: negli elenchi numerati (tag <ol>) sono ammessi valori che danno come risultato un numero o una lettera dell'alfabeto, mentre negli elenchi puntati (tag <ul>) valori che danno come risultato un simbolo. Immagine che precede le voci di un elencoAl posto del simbolo, si può anche usare un'immagine da fare apparire prima delle voci dell'elenco usando l'elemento di stile list-style-image. Utilizzeremo queste due immagini che sono custodite nella sottocartella img: freccia.gif puntino.gif (animata) Il valore è espresso dalla stringa url ("percorso del file d'immagine") Applichiamo il nuovo elemento di stile all'esempio precedente: <html> <head> <title>Titolo del documento</title> <style type="text/css"> BODY { background:#FFFFD1; color:#000000; text-align:left; margin-left : 250px; margin-right: 250px} ol {list-style-image: url("img/freccia.gif")} ul {list-style-image: url("img/puntino.gif")} </style> </head> <body> <ol> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ol> <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ul> </body> </html>
Posizionamento delle voci di un elencoCon l'uso dell'elemento di stile list-style-position si può determinare il posizionamento delle voci dell'elenco. Valori ammessi sono: inside (verso il centro dello schermo) outside (verso il lato sinistro dello schermo) Vediamo l'esempio, utilizzando sempre lo stesso schema: <html> <head> <title>Titolo del documento</title> <style type="text/css"> BODY { background:#FFFFD1; color:#000000; text-align:left; margin-left : 250px; margin-right: 250px} ol {list-style-position : inside} ul {list-style-position : outside} </style> </head> <body> <ol> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ol> <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ul> </body> </html>
Come per tutti gli altri elementi di stile, anche quelli relativi agli elenchi si possono raggruppare in un unica stringa, con l'elemento più generico list-style, come nell'esempio qui sotto: <html> <head> <title>Titolo del documento</title> <style type="text/css"> BODY { background:#FFFFD1; color:#000000; text-align:left; margin-left : 250px; margin-right: 250px} ol {list-style : lower-alpha outside} ul {list-style: upper-roman inside} </style> </head> <body> <ol> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ol> <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ul> </body> </html> non dovrebbe essere difficile riportare questi esempi al nostro foglio di stile esterno |
segnala ad un amico |
|
|
