Homepage -> Guida CSS (Fogli di Stile)


ESEMPI DI ELENCHI CSS



Per 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:




Rimandiamo alla sezione dedicata all'html per tali esempi.


Immagine che precede le voci di un elenco

Al 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.
Ecco un esempio:


<style type = "text/css">
ol { list-style-image: url("freccia.gif") }
ul { list-style-image: url("puntino.gif") }
</style>



  1.   Prima voce
  2.   Seconda voce
  3.   Terza voce


Ecco altri esempi, in cui vengono usati le caratteristiche di stile dei margini e del riempimento:







Qui sotto è mostrato uno schema che può aiutare a capire l'ultimo esempio:




Il codice dell'ultimo esempio è:



UL { background: #CC9900; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; border-style: solid; border-color: black; border-width: 1px;}
.LI1 { color: white; background: #6666FF; margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; list-style: none; border-style: solid; border-width: 1px; border-color: black; }
.LI2 { color: white; background: #6666FF; margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; list-style: none ; border-style: dashed; border-width: 2px; border-color: #66FF00; }