Les listes

On peut modifier le type, la forme et la position des listes

1
list-style-type
2
list-style-image
3
list-style-position

Définitionlist-style-type

Liste non ordonnée

disc : disque plein (la valeur par défaut)

circle : cercle vide

square : carré plein

chaîne : une chaîne de caractères

none : rien

1
ul {
2
  list-style-type: square;
3
}
1
<ul>
2
  <li>liste 1
3
  <li>liste 2
4
  <li>liste 3
5
</ul>
  • liste 1
  • liste 2
  • liste 3
Interprétation de CSS

Liste ordonnée

decimal : nombre

lower-roman : i, ii, iii, iv, v...

upper-roman : I, II, III, IV, V...

lower-greek : α, β, γ...

lower-alpha, lower-latin : a, b, c, ... z

upper-alpha, upper-latin : A, B, C, ... Z

mais aussi arabic-indic, armenian, bengali, devanagari, georgian...

1
ol {
2
  list-style-type: lower-greek;
3
}
1
<ol>
2
  <li>liste 1
3
  <li>liste 2
4
  <li>liste 3
5
</ol>
  1. liste 1
  2. liste 2
  3. liste 3
Interprétation de CSS

Définitionlist-style-image

Affiche une image comme puce de liste.

1
ul {
2
  list-style-image: url("../res/css3.png");
3
}
1
<ul>
2
  <li>liste 1
3
  <li>liste 2
4
  <li>liste 3
5
</ul>
  • liste 1
  • liste 2
  • liste 3
Interprétation de CSS

Définitionlist-style-position

Affiche la puce à l'intérieur ou à l'extérieur de la boite.

1
ul:first-child {
2
  list-style-type: circle;
3
  list-style-position: inside;
4
}
5
ul:last-child {
6
  list-style-type: circle;
7
  list-style-position: outside;
8
}
9
ul li {
10
  border: 1px solid black;
11
  margin: 2px;
12
}
1
<ul>
2
  <li>liste 1
3
  <li>liste 2
4
  <li>liste 3
5
</ul>
6
<ul>
7
  <li>liste 1
8
  <li>liste 2
9
  <li>liste 3
10
</ul>
  • liste 1
  • liste 2
  • liste 3
  • liste 1
  • liste 2
  • liste 3
Interprétation de CSS