Lez.21 - Corso Intermedio Css

LISTE o ELENCHI

Un elenco, detto anche lista, è una serie di voci caratterizzate da un rientro e da un simbolo che può essere un simbolo grafico come un pallino dell'elenco puntato, oppure un simbolo che indica un certo ordine, tipo i numeri decimali o romani, oppure lettere dell'alfabeto.

Per le Liste o gli Elenchi non Ordinati

Tali simboli e spaziature si possono modificare con delle specifiche proprietà:
list-style-type: disc; disc (disco) valore predefinito, e a video si evidenzia come un dischetto, come un pallino.

list-style-type: circle; circle (cerchio) a video si evidenzia come un cerchetto.

list-style-type: square; square (quadratino, piazza) sul video si evidenzia come un quadratino

list-style-type: none; none (nessuna) con none non appare nessun simbolino.

list-style-position: outside; outside (al di fuori) il simbolo si sposta e si colloca al di fuori della voce

list-style-position: inside; inside (dentro) il simbolo si sposta e si colloca dentro la voce

Per le Liste o gli Elenchi Ordinati

list-style-type: decimal; decimal (decimale) la lista viene ordinata con numeri decimali

list-style-type: lower-roman; lower (minuscolo, inferiore) roman (romano) la lista viene ordinata con numeri romani minuscoli

list-style-type: upper-roman; upper (maiuscolo, superiore) la lista viene ordinata con numeri romani maiuscoli

list-style-type: lower-alpha; lower (minuscolo, inferiore) alphabet (alfabeto) la lista viene ordinata con lettere dell'alfabeto minuscole

list-style-type: upper-alpha; upper (maiuscolo, superiore) alphabet (alfabeto) la lista viene ordinata con lettere dell'alfabeto maiuscole

list-style-type: none; none (nessuna) con none non appare nessuna lettera o numero

list-style-position: outside; outside (al di fuori) la lettera o il numero appare al di fuori della voce

list-style-position: inside; inside (dentro) la lettera o il numero appare dentro la voce

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Le Liste o Elenchi</title>
  <meta charset="utf-8">
  <style type="text/css">
	ul {
	   list-style-type: disc;
	   list-style-position: inside;
	}
	ol {
	   list-style-type: decimal; 
	   list-style-position: outside;
	}
  </style>
 </head>
 <body>			    
	<h1>Liste o Elenchi</h1>
	<h2>Elenco non ordinato puntato</h2>
	<ul>
		<li>Primo</li>
		<li>Secondo</li>
		<li>Terzo</li>
		<li>Quarto</li>
		<li>Quinto</li>
	</ul>
	<h2>Elenco ordinato numerato</h2>
	<ol>
		<li>Primo</li>
		<li>Secondo</li>
		<li>Terzo</li>
		<li>Quarto</li>
		<li>Quinto</li>
	</ol>
 </body>               
</html>