Personalizare e stilizzare le liste - elenchi coi CSS

Le liste o elenchi vengono creati con linguaggio HTML. In questa lezione vediamo come posiamo gestire e peronalizare le liste o elenchi. Uso delle liste è molto diffuso sulle pagine web. Per esempio qualsiasi menu che vediamo su un sito web non è altro che una lista. Elementi della lista sono elementi block quindi occupano una riga della pagina web per tutta la larghezza

 Utilizzando proprieta CSS standard si puo modificare l'aspetto dei marcatori della lista, sostituire un marcatore con una immagine o modificare la posizione del marcatore. L'altezza del blocco che contiene un marcatore, si può modificare tramite proprietà line-height.

Personalizare le liste html con proprieta CSS.

1. Cambiare tipo del marcatori  con la proprietà  list-style-type

La proprietà cambia il tipo del marcatore o rimuove esso nelle liste numerati o non numerati. 

list-style-type
Valore:  
disc Valore di default. Il disco solido viene usato come un marcatore per gli elementi della lista.
circle Come marcatore viene usato un cerchietto.
   
decimal 1, 2, 3, 4, 5, …
lower-alpha a, b, c, d, e, …
lower-greek Simboli in minuscolo del alfabeto greco
lower-latin a, b, c, d, e, …
lower-roman i, ii, iii, iv, v, …
none Assenza del marcatore
square Come marcatore viene usato un quadrato colorato o non.
upper-alpha A, B, C, D, E, …
upper-latin A, B, C, D, E, …
upper-roman I, II, III, IV, V, …
initial Imposta come valore il valore di default.
inherit Erredita il valore dal elemento genitore.

Sintassi

ul {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {type: lower-alpha;}

Esempio

  • lower-greek
  • square
  • upper-roman
  • lower-alpha

2. Uso di una immagini al posto del marcatore con la proprieta  list-style-image

Le immagini o gradienti  possono essere utilizzati come simboli per indicare le voci di un elenco al posto dei marcatori. La proprieta si eredita.

list-style-image
Valore :  
url(url) Percorso del immagine.
none è il valore di default è significa assenza di alcuna immagine.
initial Imposta come valore il valore di default.
inherit Erredita il valore dal elemento genitore.

Sintassi

ul {list-style-image: url("images/quadrato.png");}

Esempio

 

  • list-style-image: url('/images/css/figure.png')
  • Virtuemart

3. Posizionare  marcatore o immagine  attraverso la proprieta list-style-position

Questa proprieta  consente di posizionare  un  marcatore  fuori o all'interno del contenuto della voce di elenco. Si eredita.

list-style-position
Valore:  
outside Valore di default. Il marcatore si trova al di fuori del blocco con il testo..
inside Marcatori si troverano nello stesso blocco con il testo. Le righe successive del testo saranno poste sotto l'icona del marcatore, vale a dire, marcatore verrà aggirato dal testo .
initial Imposta come valore il valore di default.
inherit Erredita il valore dal elemento genitore.

Sintassi

ul {list-style-position: inside;}
ol {list-style-position: outside;}

Esempio

  • list-style-position: outside;
  • list-style-position: inside;
  • list-style-position: outside;
  • list-style-position: inside;

4. Sintassi abbreviata delle proprieta della lista

È possibile scrivere  tutte le tre  proprietà in una sola riga sotto una sola  proprietà list-style . I valori delle proprietà possono essere disposti in qualsiasi ordine e  alcuni valori possono essere omessi. Se qualche valore è assente, allora vera applicato un valore di default  del  browser in uso .

Sintassi

ul {list-style: url("images/romb.png") inside;}

5. Esempi di stilizzazione  di liste .

 

Esempio 1

  1. Elemento della lista
  2. Elemento della lista
  3. Elemento della lista
  4. Elemento della lista
  5. Elemento della lista

Cliccare per vedere il codice

<style>
.pills {
  margin-left: 0;
  list-style: none;
  counter-reset: li;
  font-family: calibri;
}
.pills li {
  padding: 10px 0;
  position: relative;
  left: 1.5em;
  margin-bottom: 0.75em;
  padding-left: 1em;
  background: #E3DEDC;
}
.pills li:before {
  padding: 10px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5em;
  width: 1.875em;
  text-align: center;
  color: white;
  font-weight: bold;
  background: #D66786;
  border-bottom-left-radius: 70em;
  border-top-left-radius: 70em;
  counter-increment: li;
  content: counter(li);
}
</style>
<ol class="pills">
  <li>Elemento della lista </li>
  <li>Elemento della lista</li>
  <li>Elemento della lista</li>
  <li>Elemento della lista</li>
  <li>Elemento della lista</li>
</ol>

 

 

Esempio 2

  1. Elemento della lista
  2. Elemento della lista
  3. Elemento della lista
  4. Elemento della lista
  5. Elemento della lista

 

Esempio 3

 

Esempio 4

 

  • Big Mak2 euro
  • Caffe1 euro
  • Caffe macchiato1,8 euro
  • Latte2 euro
  • Capucino2 euro

 

Esempio 5

  1. Caffe
  2. Latte
  3. Caffe macchiato
  4. Capucino
  5. Camomilla

Cliccare per vedere il codice

<style>
.bullet {
margin-left: 0;
list-style: none;
counter-reset: li;
}
.bullet li {
position: relative;
margin-bottom: 1.5em;
border: 3px solid #CADFCF;
padding: 0.6em;
border-radius: 4px;
background: #FEFEFE;
color: #231F20;
font-family: "Trebuchet MS", "Lucida Sans";
}
.bullet li:before {
position: absolute;
top: -0.7em;
padding-left: 0.4em;
padding-right: 0.4em;
font-size: 16px;
font-weight: bold;
color: #DCC24B;
background: #FEFEFE;
border-radius: 50%;
counter-increment: li;
content: counter(li);
}
</style>
<ol class="bullet">
  <li>Caffe</li>
  <li>Latte</li>
  <li>Caffe macchiato</li>
  <li>Capucino</li>
  <li>Camomilla </li>
</ol>
Letto 587 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso