Le proprietà CSS mostrate in questo tutorial consentono di personalizzare le liste. Le specifiche riguardano gli elementi HTML ul e ol. Potete quindi adattare le liste ordinate e non ordinate secondo i vostri desideri.
Informazioni generali sulle liste
Con list-style si raggruppano le seguenti tre proprietà:
• list-style-type
• list-style-position
• list-style-image
Attraverso list-style è possibile influenzare il tipo di presentazione grafica dei punti elenco prima delle enumerazioni e i loro margini. Le specifiche menzionate sono elencate separatamente da una virgola. L'ordine non ha importanza. Inoltre, non è necessario specificare un valore per ogni proprietà.
Un esempio:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Nel browser appare così:
Simboli di elencazione grafica
È possibile specificare una propria immagine come simbolo di elencazione. Per farlo si utilizza la proprietà list-style-image. I valori seguenti sono ammessi:
• url – il nome del file e opzionalmente il percorso dell'immagine
• none – nessuna immagine viene visualizzata.
Un esempio:
ul {
list-style-image: url(bullet.gif);
}
Fate attenzione che il percorso dell'immagine specificato con URL sia corretto.
Se viene specificato un percorso errato, i browser dovrebbero ricorrere a un simbolo di elencazione predefinito.
La posizione dei simboli di elencazione
Con list-style-position si stabilisce come devono comportarsi le numerazioni o i simboli di elencazione rispetto alla rientranza.
• inside – la prima riga viene rientrata tanto da far combaciare simboli di elencazione e voce di elenco a sinistra.
• outside – il simbolo di elencazione si trova a sinistra della voce di elenco.
Nell'esempio seguente vengono utilizzati i due valori inside e outside.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style>
</head>
<body>
<p>Una lista con inside:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Una lista con outside:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>In questo modo è possibile vedere direttamente le diverse conseguenze che questi due valori hanno effettivamente.
Personalizzare l'aspetto dei simboli di elencazione
Per i simboli di elencazione è possibile specificare esplicitamente l'aspetto. È inoltre possibile influenzare la visualizzazione delle liste numerate. Si utilizza la proprietà list-style-type. Tra i valori ammessi per questa proprietà ci sono i seguenti:
• decimal – per le liste ol: numerazione 1, 2, 3 ecc.
• lower-roman – per le liste ol: numerazione i., ii., iii. ecc.
• upper-roman – per le liste ol: numerazione I., II., III., IV ecc.
• lower-alpha o lower-latin – per le liste ol-: numerazione I., II., III., IV. ecc.
• upper-alpha o upper-latin – per le liste ol: numerazione A., B., C., D. ecc.
• disc – per le liste ul: cerchio pieno come simbolo di elencazione
• circle – per le liste ul: cerchio vuoto come simbolo di elencazione
• square – per le liste ul: rettangolo come simbolo di elencazione
• none – né simboli di elencazione né numerazione
• lower-greek – per le liste ol: numerazione con lettere greche
• hebrew – per le liste ol: numerazione con lettere ebraiche
• decimal-leading-zero – per le liste ol: numerazione con zero iniziale 0: 01., 02., 03., 04. ecc.
• cjk-ideographic – per le liste ol: numerazione con caratteri ideografici
• hiragana – per le liste ol: numerazione giapponese (con lettere minuscole)
• katakana – per le liste ol: numerazione giapponese (con lettere maiuscole)
• hiragana-iroha – per le liste ol: numerazione giapponese (con lettere minuscole)
• katakana-iroha – per le liste ol: numerazione giapponese (con lettere maiuscole)
Nell'esempio seguente vengono utilizzate alcune delle varianti elencate.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Nel browser si ottiene l'immagine seguente:
Contatori
Attraverso le liste ol è possibile numerare i contenuti. Tuttavia, in applicazioni più complesse, questa forma di numerazione non è realmente praticabile. Per questo, CSS offre un'alternativa con i contatori.
Di seguito vi mostro come utilizzare i contatori.
Innanzitutto, creo un nuovo contatore per l'elemento body.
body {
counter-reset: capitolo;
}Grazie a questa definizione, il contatore capitolo esiste nel documento. Questo contatore può quindi essere utilizzato.
h1 {
counter-increment: capitolo;
}
Attraverso la sintassi mostrata, il contatore viene automaticamente incrementato di 1 ogni volta che appare un nuovo elemento h1. Tuttavia, al momento non si vede ancora nulla della numerazione. Questo problema viene risolto facilmente utilizzando i pseudo-elementi.
h1::before {
content: counter(capitolo) ". ";
}
Un'applicazione completa potrebbe apparire così:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: capitolo;
}
h1 {
counter-increment: capitolo;
}
h1::before {
content: counter(capitolo) ". ";
}
</style>
</head>
<body>
<h1>Capitolo</h1>
<h1>Capitolo</h1>
</body>
</html>Ecco come appare il risultato nel browser:
Negli esempi è mostrato come i contatori siano potenti.
