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

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

Lascia un commento