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;
}
