convert content to md

1 files changed, 248 insertions, 234 deletions

diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md
index e7fb1721ba..d21469eda6 100644
--- a/files/fr/learn/css/styling_text/styling_lists/index.md
+++ b/files/fr/learn/css/styling_text/styling_lists/index.md
@@ -12,178 +12,194 @@ tags:
   - Texte
 translation_of: Learn/CSS/Styling_text/Styling_lists
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>
-
-<p>Les <a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes">listes</a> se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.</p>
+Les [listes](/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes) se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Connaissances de base informatiques, bases HTML (étudiées dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>), bases CSS (étudiées dans <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>), <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">la mise en forme du texte</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif :</th>
-   <td>Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Connaissances de base informatiques, bases HTML (étudiées dans
+        <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML"
+          >Introduction à HTML</a
+        >), bases CSS (étudiées dans
+        <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS"
+          >Introduction à CSS</a
+        >),
+        <a
+          href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte"
+          >la mise en forme du texte</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>
+        Se familiariser avec les meilleures pratiques et propriétés liées aux
+        styles de liste.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Un_exemple_de_liste_simple">Un exemple de liste simple</h2>
+## Un exemple de liste simple
 
-<p>Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">disponible sur Github</a> (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">code source</a>).</p>
+Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est [disponible sur Github](http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html)).
 
-<p>Le code HTML pour nos exemples de liste ressemble à ceci :</p>
+Le code HTML pour nos exemples de liste ressemble à ceci :
 
-<pre class="brush: html">&lt;h2&gt;Liste de courses (non ordonnée)&lt;/h2&gt;
+```html
+<h2>Liste de courses (non ordonnée)</h2>
 
-&lt;p&gt;Paragraphe de référence, paragraphe de référence, paragraphe de référence,
-paragraphe de référence, paragraphe de référence, paragraphe de référence.&lt;/p&gt;
+<p>Paragraphe de référence, paragraphe de référence, paragraphe de référence,
+paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
 
-&lt;ul&gt;
-  &lt;li&gt;Houmous&lt;/li&gt;
-  &lt;li&gt;Pain blanc&lt;/li&gt;
-  &lt;li&gt;Salade verte&lt;/li&gt;
-  &lt;li&gt;Fromage halloumi&lt;/li&gt;
-&lt;/ul&gt;
+<ul>
+  <li>Houmous</li>
+  <li>Pain blanc</li>
+  <li>Salade verte</li>
+  <li>Fromage halloumi</li>
+</ul>
 
-&lt;h2&gt;Liste de recette (ordonnée)&lt;/h2&gt;
+<h2>Liste de recette (ordonnée)</h2>
 
-&lt;p&gt;paragraphe de référence, paragraphe de référence, paragraphe de référence,
-paragraphe de référence, paragraphe de référence, paragraphe de référence.&lt;/p&gt;
+<p>paragraphe de référence, paragraphe de référence, paragraphe de référence,
+paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
 
-&lt;ol&gt;
-  &lt;li&gt;Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.&lt;/li&gt;
-  &lt;li&gt;Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.&lt;/li&gt;
-  &lt;li&gt;Laver et hacher la salade.&lt;/li&gt;
-  &lt;li&gt;Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.&lt;/li&gt;
-&lt;/ol&gt;
+<ol>
+  <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
+  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
+  <li>Laver et hacher la salade.</li>
+  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
+</ol>
 
-&lt;h2&gt;Liste descriptive des ingrédients&lt;/h2&gt;
+<h2>Liste descriptive des ingrédients</h2>
 
-&lt;p&gt;paragraphe de référence, paragraphe de référence, paragraphe de référence,
-paragraphe de référence, paragraphe de référence, paragraphe de référence.&lt;/p&gt;
+<p>paragraphe de référence, paragraphe de référence, paragraphe de référence,
+paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
 
-&lt;dl&gt;
-  &lt;dt&gt;Houmous&lt;/dt&gt;
-  &lt;dd&gt;Une purée ou sauce épaisse généralement faite de pois chiches mélangés avec du tahini, du jus de citron, du sel, de l'ail et d'autres aromates.&lt;/dd&gt;
-  &lt;dt&gt;Pain pitta&lt;/dt&gt;
-  &lt;dd&gt;Un pain plat moelleux, légèrement levé.&lt;/dd&gt;
-  &lt;dt&gt;Halloumi&lt;/dt&gt;
-  &lt;dd&gt;Fromage à pâte mi-dure, non affiné, saumuré, à point de fusion plus élevé que d'habitude, généralement fabriqué à partir de lait de chèvre et de brebis.&lt;/dd&gt;
-  &lt;dt&gt;Salade verte&lt;/dt&gt;
-  &lt;dd&gt;Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.&lt;/dd&gt;
-&lt;/dl&gt;</pre>
+<dl>
+  <dt>Houmous</dt>
+  <dd>Une purée ou sauce épaisse généralement faite de pois chiches mélangés avec du tahini, du jus de citron, du sel, de l'ail et d'autres aromates.</dd>
+  <dt>Pain pitta</dt>
+  <dd>Un pain plat moelleux, légèrement levé.</dd>
+  <dt>Halloumi</dt>
+  <dd>Fromage à pâte mi-dure, non affiné, saumuré, à point de fusion plus élevé que d'habitude, généralement fabriqué à partir de lait de chèvre et de brebis.</dd>
+  <dt>Salade verte</dt>
+  <dd>Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.</dd>
+</dl>
+```
 
-<p>Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">les outils de développement du navigateur</a>, vous noterez quelques valeurs de style par défaut :</p>
+Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant [les outils de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools), vous noterez quelques valeurs de style par défaut :
 
-<ul>
- <li>Les éléments {{htmlelement("ul")}} et {{htmlelement("ol")}} ont une propriété {{cssxref("margin")}} de <code>16 px</code> (<code>1 em</code>) en haut et en bas et une propriété {{cssxref("padding-left")}} de <code>40 px</code> (<code>2.5 em</code>.)</li>
- <li>Les éléments de la liste ({{htmlelement("li")}}) n'ont aucun paramètre d'espacement par défaut.</li>
- <li>L'élément {{htmlelement("dl")}} a des propriétés {{cssxref("margin")}} de<code>16 px</code> (<code>1 em</code>) en haut et en bas , mais pas de définition du remplissage.</li>
- <li>Les éléments {{htmlelement("dd")}} ont une propriété {{cssxref("margin-left")}} de <code>40 px</code> (<code>2.5 em</code>.)</li>
- <li>Les éléments {{htmlelement("p")}}, inclus pour référence, ont des propriétés {{cssxref("margin")}} de <code>16 px</code> (<code>1 em</code>) en haut et en bas, identiques à ceux des différents types de listes.</li>
-</ul>
+- Les éléments {{htmlelement("ul")}} et {{htmlelement("ol")}} ont une propriété {{cssxref("margin")}} de `16 px` (`1 em`) en haut et en bas et une propriété {{cssxref("padding-left")}} de `40 px` (`2.5 em`.)
+- Les éléments de la liste ({{htmlelement("li")}}) n'ont aucun paramètre d'espacement par défaut.
+- L'élément {{htmlelement("dl")}} a des propriétés {{cssxref("margin")}} de`16 px` (`1 em`) en haut et en bas , mais pas de définition du remplissage.
+- Les éléments {{htmlelement("dd")}} ont une propriété {{cssxref("margin-left")}} de `40 px` (`2.5 em`.)
+- Les éléments {{htmlelement("p")}}, inclus pour référence, ont des propriétés {{cssxref("margin")}} de `16 px` (`1 em`) en haut et en bas, identiques à ceux des différents types de listes.
 
-<h2 id="Gestion_d'espacement_des_listes">Gestion d'espacement des listes</h2>
+## Gestion d'espacement des listes
 
-<p>Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">exemple de style terminé</a> sur Github et trouver<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html"> le code source</a> aussi.)</p>
+Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'[exemple de style terminé](http://mdn.github.io/learning-area/css/styling-text/styling-lists/) sur Github et trouver[ le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html) aussi.)
 
-<p>Le CSS utilisé pour le style et l'espacement du texte est le suivant :</p>
+Le CSS utilisé pour le style et l'espacement du texte est le suivant :
 
-<pre>/* Style général */
+    /* Style général */
 
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
+    html {
+      font-family: Helvetica, Arial, sans-serif;
+      font-size: 10px;
+    }
 
-h2 {
-  font-size: 2rem;
-}
+    h2 {
+      font-size: 2rem;
+    }
 
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
+    ul,ol,dl,p {
+      font-size: 1.5rem;
+    }
 
-li, p {
-  line-height: 1.5;
-}
+    li, p {
+      line-height: 1.5;
+    }
 
-/* Styles des listes descriptives */
+    /* Styles des listes descriptives */
 
 
-dd, dt {
-  line-height: 1.5;
-}
+    dd, dt {
+      line-height: 1.5;
+    }
 
-dt {
-  font-weight: bold;
-}
+    dt {
+      font-weight: bold;
+    }
 
-dd {
-  margin-bottom: 1.5rem;
-}</pre>
+    dd {
+      margin-bottom: 1.5rem;
+    }
 
-<ul>
- <li>La première règle définit une police de caractères pour l'ensemble du site avec une taille de base de 10 px. Elles sont héritées par tous les éléments de la page.</li>
- <li>Les règles 2 et 3 définissent des tailles relatives de la police pour les titres, les différents types de liste (les enfants des éléments de liste en héritent) et les paragraphes. Cela signifie que les paragraphes et listes auront la même taille de police et les mêmes espacements entre le haut et le bas, ce qui aidera à garder un rythme vertical cohérent.</li>
- <li>La règle 4 définit la même propriété {{cssxref("line-height")}} pour les paragraphes et éléments de listes — ainsi les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent.</li>
- <li>Les règles 5 et 6 s'appliquent à la liste descriptive — nous définissons la même valeur pour la propriété <code>line-height</code> pour les termes à décrire et les descriptions, valeur utilisée pour les paragraphes et les éléments de liste. Encore une fois, la cohérence est bonne ! Nous écrivons aussi les termes à décrire avec une police en gras, pour les distinguer visuellement plus facilement.</li>
-</ul>
+- La première règle définit une police de caractères pour l'ensemble du site avec une taille de base de 10 px. Elles sont héritées par tous les éléments de la page.
+- Les règles 2 et 3 définissent des tailles relatives de la police pour les titres, les différents types de liste (les enfants des éléments de liste en héritent) et les paragraphes. Cela signifie que les paragraphes et listes auront la même taille de police et les mêmes espacements entre le haut et le bas, ce qui aidera à garder un rythme vertical cohérent.
+- La règle 4 définit la même propriété {{cssxref("line-height")}} pour les paragraphes et éléments de listes — ainsi les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent.
+- Les règles 5 et 6 s'appliquent à la liste descriptive — nous définissons la même valeur pour la propriété `line-height` pour les termes à décrire et les descriptions, valeur utilisée pour les paragraphes et les éléments de liste. Encore une fois, la cohérence est bonne ! Nous écrivons aussi les termes à décrire avec une police en gras, pour les distinguer visuellement plus facilement.
 
-<h2 id="Style_propre_à_une_liste">Style propre à une liste</h2>
+## Style propre à une liste
 
-<p>Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} :</p>
+Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} :
 
-<ul>
- <li>{{cssxref("list-style-type")}} : définit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée ou bien des nombres, des lettres ou des chiffres romains pour une liste ordonnée.</li>
- <li>{{cssxref("list-style-position")}} : définit si les puces seront disposées à l'intérieur ou à l'extérieur du début de l'élément liste.</li>
- <li>{{cssxref("list-style-image")}} : permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond.</li>
-</ul>
+- {{cssxref("list-style-type")}} : définit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée ou bien des nombres, des lettres ou des chiffres romains pour une liste ordonnée.
+- {{cssxref("list-style-position")}} : définit si les puces seront disposées à l'intérieur ou à l'extérieur du début de l'élément liste.
+- {{cssxref("list-style-image")}} : permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond.
 
-<h3 id="Styles_de_puces">Styles de puces</h3>
+### Styles de puces
 
-<p>Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec :</p>
+Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec :
 
-<pre class="brush: css">ol {
+```css
+ol {
   list-style-type: upper-roman;
-}</pre>
+}
+```
 
-<p>Cela donne l'apparence suivante :</p>
+Cela donne l'apparence suivante :
 
-<p><img alt="une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste." src="ex_1.png"></p>
+![une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste.](ex_1.png)
 
-<p>Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}.</p>
+Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}.
 
-<h3 id="Position_des_puces">Position des puces</h3>
+### Position des puces
 
-<p>La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est <code>outside</code> et les puces apparaîssent comme ci-dessus.</p>
+La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est `outside` et les puces apparaîssent comme ci-dessus.
 
-<p>Si vous choisissez la valeur <code>inside</code>, les puces seront disposées dans la ligne :</p>
+Si vous choisissez la valeur `inside`, les puces seront disposées dans la ligne :
 
-<pre class="brush: css">ol {
+```css
+ol {
   list-style-type: upper-roman;
   list-style-position: inside;
-}</pre>
+}
+```
 
-<p><img alt="une liste ordonnée avec les puces intégrées au texte des éléments de la liste." src="ex_2.png"></p>
+![une liste ordonnée avec les puces intégrées au texte des éléments de la liste.](ex_2.png)
 
-<h3 id="Utilisation_d'une_puce_image_personnalisée">Utilisation d'une puce image personnalisée</h3>
+### Utilisation d'une puce image personnalisée
 
-<p>La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple :</p>
+La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple :
 
-<pre class="brush: css">ul {
+```css
+ul {
   list-style-image: url(star.svg);
-}</pre>
+}
+```
 
-<p>Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module <a href="/fr/Apprendre/CSS/styliser_boites"> Styliser les boîtes</a>. Pour l'instant, voici un avant-goût !</p>
+Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module [Styliser les boîtes](/fr/Apprendre/CSS/styliser_boites). Pour l'instant, voici un avant-goût !
 
-<p>Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :</p>
+Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :
 
-<pre class="brush: css">ul {
+```css
+ul {
   padding-left: 2rem;
   list-style-type: none;
 }
@@ -194,140 +210,143 @@ ul li {
   background-position: 0 0;
   background-size: 1.6rem 1.6rem;
   background-repeat: no-repeat;
-}</pre>
+}
+```
 
-<p>Voici ce que nous avons fait :</p>
+Voici ce que nous avons fait :
 
-<ul>
- <li>abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de <code>40px</code> par défaut à <code>20px</code>, puis défini la même valeur pour les éléments de la liste. Ainsi,  l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon.</li>
- <li>défini la propriété {{cssxref("list-style-type")}} à <code>none</code>, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de {{cssxref("background")}} pour gérer les puces.</li>
- <li>inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes :
-  <ul>
-   <li>{{cssxref("background-image")}} : référence du chemin d'accès au fichier image utilisé comme puce.</li>
-   <li>{{cssxref("background-position")}} : emplacement de l'image dans l'arrière-plan de l'élément sélectionné — dans ce cas, nous disons <code>0 0</code> : la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste.</li>
-   <li>{{cssxref("background-size")}} : taille de l'image d'arrière-plan. L'idéal est que les puces soient de même taille que les éléments de la liste (ou légèrement plus petites ou plus grandes). Nous utilisons une taille de <code>1.6rem</code> (<code>16px</code>), qui correspond bien au remplissage de <code>20px</code> dans lequel la puce est placée — 16 px plus 4 px d'espace entre la puce et le texte de l'élément de liste fonctionne bien.</li>
-   <li>{{cssxref("background-repeat")}} : par défaut, les images d'arrière-plan se répètent jusqu'à avoir rempli l'espace d'arrière-plan disponible. Nous voulons l'insertion d'une seule copie de l'image sans répétition, donc nous choisissons la valeur <code>no-repeat</code>.</li>
-  </ul>
- </li>
-</ul>
+- abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de `40px` par défaut à `20px`, puis défini la même valeur pour les éléments de la liste. Ainsi,  l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon.
+- défini la propriété {{cssxref("list-style-type")}} à `none`, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de {{cssxref("background")}} pour gérer les puces.
+- inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes :
 
-<p>Ceci nous donne le résultat suivant :</p>
+  - {{cssxref("background-image")}} : référence du chemin d'accès au fichier image utilisé comme puce.
+  - {{cssxref("background-position")}} : emplacement de l'image dans l'arrière-plan de l'élément sélectionné — dans ce cas, nous disons `0 0` : la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste.
+  - {{cssxref("background-size")}} : taille de l'image d'arrière-plan. L'idéal est que les puces soient de même taille que les éléments de la liste (ou légèrement plus petites ou plus grandes). Nous utilisons une taille de `1.6rem` (`16px`), qui correspond bien au remplissage de `20px` dans lequel la puce est placée — 16 px plus 4 px d'espace entre la puce et le texte de l'élément de liste fonctionne bien.
+  - {{cssxref("background-repeat")}} : par défaut, les images d'arrière-plan se répètent jusqu'à avoir rempli l'espace d'arrière-plan disponible. Nous voulons l'insertion d'une seule copie de l'image sans répétition, donc nous choisissons la valeur `no-repeat`.
 
-<p><img alt="une liste non ordonnée avec les puces définies comme de petites images d'étoiles." src="ex_3.png"></p>
+Ceci nous donne le résultat suivant :
 
-<h3 id="Raccourci_de_style_de_liste">Raccourci de style de liste</h3>
+![une liste non ordonnée avec les puces définies comme de petites images d'étoiles.](ex_3.png)
 
-<p>Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant :</p>
+### Raccourci de style de liste
 
-<pre class="brush: css">ul {
+Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant :
+
+```css
+ul {
   list-style-type: square;
   list-style-image: url(example.png);
   list-style-position: inside;
-}</pre>
+}
+```
 
-<p>peut être remplacé par cela :</p>
+peut être remplacé par cela :
 
-<pre>ul {
-  list-style: square url(example.png) inside;
-}</pre>
+    ul {
+      list-style: square url(example.png) inside;
+    }
 
-<p>Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont <code>disc</code>, <code>none</code> et <code>outside</code>. Si un <code>type</code> et une <code>image</code> sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque.</p>
+Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont `disc`, `none` et `outside`. Si un `type` et une `image` sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque.
 
-<h2 id="Contrôle_du_numérotage_des_listes">Contrôle du numérotage des listes</h2>
+## Contrôle du numérotage des listes
 
-<p>Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre.</p>
+Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre.
 
-<h3 id="Numéro_de_départ">Numéro de départ</h3>
+### Numéro de départ
 
-<p>L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant :</p>
+L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant :
 
-<pre class="brush: html">&lt;ol start="4"&gt;
-  &lt;li&gt;Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.&lt;/li&gt;
-  &lt;li&gt;Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.&lt;/li&gt;
-  &lt;li&gt;Laver et hacher la salade.&lt;/li&gt;
-  &lt;li&gt;Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol start="4">
+  <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
+  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
+  <li>Laver et hacher la salade.</li>
+  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
+</ol>
+```
 
-<p>vous donne cette sortie :</p>
+vous donne cette sortie :
 
-<p>{{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }}</p>
+{{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }}
 
-<h3 id="Numérotation_inversée">Numérotation inversée</h3>
+### Numérotation inversée
 
-<p>L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant :</p>
+L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant :
 
-<pre class="brush: html">&lt;ol start="4" reversed&gt;
-  &lt;li&gt;Faire griller le pain pitta, le laisser refroidir, puis le trancher sur le côté.&lt;/li&gt;
-  &lt;li&gt;Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.&lt;/li&gt;
-  &lt;li&gt;Laver et hacher la salade.&lt;/li&gt;
-  &lt;li&gt;Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol start="4" reversed>
+  <li>Faire griller le pain pitta, le laisser refroidir, puis le trancher sur le côté.</li>
+  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
+  <li>Laver et hacher la salade.</li>
+  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
+</ol>
+```
 
-<p>donne cette sortie :</p>
+donne cette sortie :
 
-<p>{{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }}</p>
+{{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }}
 
-<h3 id="Valeurs_individualisées">Valeurs individualisées</h3>
+### Valeurs individualisées
 
-<p>L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :</p>
+L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :
 
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li value="2"&gt;Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.&lt;/li&gt;
-  &lt;li value="4"&gt;Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.&lt;/li&gt;
-  &lt;li value="6"&gt;Laver et hacher la salade.&lt;/li&gt;
-  &lt;li value="8"&gt;Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol>
+  <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
+  <li value="4">Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
+  <li value="6">Laver et hacher la salade.</li>
+  <li value="8">Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
+</ol>
+```
 
-<p>vous donne cette sortie :</p>
+vous donne cette sortie :
 
-<p>{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}</p>
+{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}
 
-<div class="note">
-<p><strong>Note :</strong> Même si vous utilisez une propriété {{cssxref ("type-style-list")}}  avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut <code>value</code>.</p>
-</div>
+> **Note :** Même si vous utilisez une propriété {{cssxref ("type-style-list")}}  avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut `value`.
 
-<h2 id="Apprentissage_actif_définir_le_style_d'une_liste_imbriquée">Apprentissage actif : définir le style d'une liste imbriquée</h2>
+## Apprentissage actif : définir le style d'une liste imbriquée
 
-<p>Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de :</p>
+Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de :
 
-<ol>
- <li>mettre une puce carrée devant les éléments de la liste non ordonnée,</li>
- <li>donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères.</li>
- <li>donner à la liste ordonnée une puce alphabétique en minuscules.</li>
- <li>ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver.</li>
-</ol>
+1.  mettre une puce carrée devant les éléments de la liste non ordonnée,
+2.  donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères.
+3.  donner à la liste ordonnée une puce alphabétique en minuscules.
+4.  ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver.
 
-<p>Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, pressez le bouton <em>Voir la solution</em> pour voir une réponse possible.</p>
+Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton _Réinitialiser_. Si vous êtes vraiment bloqué, pressez le bouton _Voir la solution_ pour voir une réponse possible.
 
-<pre class="brush: html hidden">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
-  &lt;h2&gt;Zone de saisie du HTML&lt;/h2&gt;
-  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;ul&gt;
-  &lt;li&gt;D'abord, allumez la chandelle.&lt;/li&gt;
-  &lt;li&gt;Ensuite, ouvrez la boîte.&lt;/li&gt;
-  &lt;li&gt;Puis, mettez les trois objets magiques dans la
+```html hidden
+<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
+  <h2>Zone de saisie du HTML</h2>
+  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul>
+  <li>D'abord, allumez la chandelle.</li>
+  <li>Ensuite, ouvrez la boîte.</li>
+  <li>Puis, mettez les trois objets magiques dans la
       boîte, dans cet ordre exactement, pour terminer
       le charme :
-    &lt;ol&gt;
-      &lt;li&gt;le livre de sorts,&lt;/li&gt;
-      &lt;li&gt;la baguette brillante,&lt;/li&gt;
-      &lt;li&gt;la statue du lutin.&lt;/li&gt;
-    &lt;/ol&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;&lt;/textarea&gt;
-
-  &lt;h2&gt;Zone de saisie de la CSS&lt;/h2&gt;
-  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/textarea&gt;
-
-  &lt;h2&gt;Zone de rendu&lt;/h2&gt;
-  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
-  &lt;div class="controls"&gt;
-    &lt;input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"&gt;
-    &lt;input id="solution" type="button" value="Voir la solution" style="margin: 10px 0 0 10px;"&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input");
+    <ol>
+      <li>le livre de sorts,</li>
+      <li>la baguette brillante,</li>
+      <li>la statue du lutin.</li>
+    </ol>
+  </li>
+</ul></textarea>
+
+  <h2>Zone de saisie de la CSS</h2>
+  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>
+
+  <h2>Zone de rendu</h2>
+  <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
+  <div class="controls">
+    <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;">
+    <input id="solution" type="button" value="Voir la solution" style="margin: 10px 0 0 10px;">
+  </div>
+</div>
+```
+
+```js hidden
+var htmlInput = document.querySelector(".html-input");
 var cssInput = document.querySelector(".css-input");
 var reset = document.getElementById("reset");
 var htmlCode = htmlInput.value;
@@ -359,35 +378,30 @@ solution.addEventListener("click", function() {
 htmlInput.addEventListener("input", drawOutput);
 cssInput.addEventListener("input", drawOutput);
 window.addEventListener("load", drawOutput);
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}</p>
+{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir :</p>
+Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir :
 
-<ul>
- <li>{{cssxref("@counter-style")}}</li>
- <li>{{cssxref("counter-increment")}}</li>
- <li>{{cssxref("counter-reset")}}</li>
-</ul>
+- {{cssxref("@counter-style")}}
+- {{cssxref("counter-increment")}}
+- {{cssxref("counter-reset")}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style des liens.</p>
+Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style des liens.
 
-<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>
+{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
+## Dans ce module
 
-<p> </p>
 
-<ul>
- <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li>
- <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li>
- <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li>
- <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li>
- <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li>
-</ul>
+
+- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte)
+- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists)
+- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens)
+- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts)
+- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)