« Le langage CSS/Listes » : différence entre les versions

Contenu supprimé Contenu ajouté
mAucun résumé des modifications
DannyS712 (discussion | contributions)
m <source> -> <syntaxhighlight> (phab:T237267)
Ligne 14 :
=== Listes ordonnées ===
Par défaut la numérotation HTML s'incrémente automatiquement en chiffres arabes :
<sourcesyntaxhighlight lang="html">
<ol>
<li>Premier</li>
Ligne 21 :
<li value=99>Énième</li>
</ol>
</syntaxhighlight>
</source>
donne :
<ol>
Ligne 38 :
 
Exemple, en définissant un style :
<sourcesyntaxhighlight lang="css">
.list-upper-roman li { list-style-type: upper-roman; }
</syntaxhighlight>
</source>
 
<sourcesyntaxhighlight lang="html">
En utilisant le style défini dans la feuille de style :
<div class="list-upper-roman">
Ligne 61 :
<li style="list-style-type: katakana-iroha">Cinquième
</ol>
</syntaxhighlight>
</source>
 
Cela donne :
Ligne 92 :
 
Exemple :
<sourcesyntaxhighlight lang="html">
<ul>
<li style="list-style-type: disc;">disc
Ligne 100 :
<li style="list-style-type: inherit;">inherit
</ul>
</syntaxhighlight>
</source>
 
Cela donne :
Ligne 114 :
 
Si l'on veut utiliser un autre caractère, typiquement un tiret cadratin ou demi-cadratin, il faut utiliser la propriété <code>:before</code>, par exemple
<sourcesyntaxhighlight lang="css">
ul {
list-style-type: none;
Ligne 124 :
margin-left: -1.5em;
}
</syntaxhighlight>
</source>
 
=== Utiliser une image comme puce ===
La propriété <code>list-style-image</code> peut être utilisée pour spécifier l'URL d'une image à utiliser comme puce pour les items de la liste.
 
<sourcesyntaxhighlight lang="html">
<li style="list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Wikipedia-logo.png/35px-Wikipedia-logo.png');">image
</syntaxhighlight>
</source>
 
<!-- Pas de rendu possible avec MediaWiki -->