CSS: PERSONALIZZARE GLI ELENCHI

Come già visto nel nostro tutorial Html sulle liste , esistono le liste ordinate e quelle non ordinate.

Le liste ordinate di elementi (<ol>) , vengono contraddistinte da numeri o lettere , quelle non ordinate (<ul>) da punti elenco.




LIST-STYLE

La proprietà list-style , serve a definire il marcatore della nostra lista sia essa ordinata oppure no.

  • circle
  • square
  • upper-roman
  • lower-alpha
  • elenco con immagine 
  • elenco senza marcatore
  • con bordo sinistro colorato
  • lista colorata



Iniziamo creando la nostra pagina html

<!doctype html>
<html lang=”it”>
<head>
<link rel = “stylesheet” type = “text/css” href = “style.css”/>
</head>
<body>
<ul>
<li>patate</li>
<li>olive</li>
<li>prezzemolo</li>
</ul>
</body>
</html>

CIRCLE:

STYLE.CSS

ul {
 list-style-type: circle;
}

SQUARE:

STYLE.CSS

ul {
 list-style-type: square;
}

UPPER-ROMAN:

STYLE.CSS

ul {
 list-style-type: upper-roman;
}




LOWER-ALPHA:

STYLE.CSS:

ol {
 list-style-type: lower-alpha;
}

LIST-STYLE-IMAGE

Questa proprietà permette di inserire come marcatore un immagine (salvata nella stessa directory della pagina e del foglio di stile).

STYLE.CSS:

ul {
 list-style-image: url(‘cuore.png’);
}
{loadmoduleid 264}

SENZA MARCATORE

STYLE.CSS:

ul {
 list-style-type: none;
 }




BORDO COLORATO

STYLE.CSS:

ul {
 border-left: 5px solid black;
 background-color: pink;
 list-style-type: none;
 padding: 10px 20px;
}

LISTA COLORATA:

STYLE.CSS:

ul {
 background: aquamarine;
 padding: 20px;
}

STYLE.CSS:

ul {
 background: #3399ff;
 padding: 20px;
}

ul li {
 background: pink;
 padding: 5px;
 margin-left: 35px;
}