Les propriétés CSS présentées dans ce tutoriel permettent de personnaliser les listes. Les indications se rapportent aux éléments HTML ul et ol. Vous pouvez donc adapter les listes ordonnées et non ordonnées selon vos souhaits.
Informations générales sur la liste
Avec list-style, il s'agit d'un résumé des trois propriétés suivantes :
• list-style-type
• list-style-position
• list-style-image
Avec list-style, il est possible d'influencer le style graphique des puces devant les listes et leur indentation. Les indications mentionnées sont notées séparément par une virgule. L'ordre est indifférent. De plus, il n'est pas nécessaire de spécifier une valeur pour chaque propriété.
Un exemple :
<!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>Dans le navigateur, cela ressemble à ceci :
Puces graphiques
Vous pouvez spécifier une image personnalisée comme puce. Pour ce faire, utilisez la propriété list-style-image. Les valeurs suivantes sont possibles :
• url - le nom du fichier et éventuellement le chemin de l'image
• none - aucune image n'est affichée.
Un exemple :
ul {
list-style-image: url(bullet.gif);
}
Assurez-vous que le chemin de l'image spécifié dans l'URL est correct.
En cas de chemin incorrect, les navigateurs devraient revenir à une puce standard.
Position des puces
La propriété list-style-position définit comment les numéros ou les puces doivent se comporter en termes d'indentation.
• inside - la première ligne est indentée de sorte que les puces et les entrées de liste se terminent justifiées à gauche.
• outside - la puce se trouve à gauche de l'entrée de la liste.
Dans l'exemple suivant, les deux valeurs inside et outside sont utilisées.
<!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>Une liste en inside :</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Une liste en outside :</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Vous pouvez ainsi observer directement les différentes façons dont ces deux valeurs ont un réel impact.
Personnaliser l'apparence des puces
Vous pouvez définir explicitement l'apparence des puces ou des listes numérotées. Pour cela, utilisez la propriété list-style-type. Les valeurs autorisées pour cette propriété sont les suivantes :
• decimal - pour les listes ol : Numérotation 1, 2, 3 etc.
• lower-roman - pour les listes ol : Numérotation i., ii., iii. etc.
• upper-roman - pour les listes ol : Numérotation I., II., III., IV. etc.
• lower-alpha ou lower-latin - pour les listes ol : Numérotation I., II., III., IV. etc.
• upper-alpha ou upper-latin - pour les listes ol : Numérotation A., B., C., D. etc.
• disc - pour les listes ul : cercle rempli comme puce
• circle - pour les listes ul : cercle vide comme puce
• square - pour les listes ul : rectangle comme puce
• none - ni puce ni numérotation
• lower-greek - pour les listes ol : Numérotation avec des lettres grecques
• hebrew - pour les listes ol : Numérotation avec des lettres hébraïques
• decimal-leading-zero - pour les listes ol : Numérotation avec un zéro en tête 0 : 01., 02., 03., 04. etc.
• cjk-ideographic - pour les listes ol : Numérotation avec des caractères idéographiques
• hiragana - pour les listes ol : numérotation japonaise (avec des minuscules)
• katakana - pour les listes ol : numérotation japonaise (avec des majuscules)
• hiragana-iroha - pour les listes ol : numérotation japonaise (avec des minuscules)
• katakana-iroha - pour les listes ol : numérotation japonaise (avec des majuscules)
Dans l'exemple suivant, certaines des variantes répertoriées sont utilisées.
<!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>Dans le navigateur, cela donne l'image suivante:
Compteurs
Les listes ol permettent de numéroter le contenu. Cependant, dans des applications plus complexes, cette forme de numérotation n'est pas vraiment pratique. Pour cela, le CSS propose une alternative avec les compteurs.
Je vais vous montrer comment utiliser les compteurs.
Tout d'abord, je vais créer un nouveau compteur pour l'élément body.
body {
counter-reset: chapitre;
}Grâce à cette définition, le compteur chapitre existe dans le document. Ce compteur peut maintenant être utilisé.
h1 {
counter-increment: chapitre;
}
Avec la syntaxe montrée, le compteur est automatiquement incrémenté de 1 à chaque apparition d'un nouvel élément h1. Le problème est que pour le moment, rien n'apparaît dans la numérotation. Cela peut être facilement corrigé en utilisant des pseudo-éléments.
h1::before {
content: counter(chapitre) ". ";
}
Une application complète pourrait ressembler à ceci:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: chapitre;
}
h1 {
counter-increment: chapitre;
}
h1::before {
content: counter(chapitre) ". ";
}
</style>
</head>
<body>
<h1>Chapitre</h1>
<h1>Chapitre</h1>
</body>
</html>Et voici le résultat dans le navigateur:
Dans l'exemple montré, le numéro est affiché au début de l'élément h1 à l'aide de ::before. Afin d'éviter que le chiffre ne soit directement collé au texte du titre, un point suivi d'un espace sont ajoutés après le chiffre.
content: counter(chapitre) ". "
Des comptages imbriqués sont également possibles. Pour cela, le compteur est défini à l'endroit où il doit recommencer depuis le début.
h1 {
counter-increment: chapitre;
counter-reset: sous-chapitre;
}Ainsi, dans cet exemple, le compteur est réinitialisé chaque fois qu'un nouvel élément h1 apparaît. L'exemple suivant montre une application typique pour des compteurs imbriqués.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: chapitre;
}
h1 {
counter-reset: sous-chapitre;
}
h1:before {
counter-increment: chapitre;
content: counter(chapitre) ". ";
}
h2:before {
counter-increment: sous-chapitre;
content: counter(chapitre) "." counter(sous-chapitre) " ";
}
</style>
</head>
<body>
<h1>Chapitre</h1>
<h2>Sous-chapitre</h2>
<h2>Sous-chapitre</h2>
<h2>Sous-chapitre</h2>
<h1>Chapitre</h1>
<h2>Sous-chapitre</h2>
<h2>Sous-chapitre</h2>
<h2>Sous-chapitre</h2>
</body>
</html>Dans le navigateur, voici ce que cela donne:
Ces exemples ont montré à quel point les compteurs sont puissants.
