Bienvenue à ce nouveau cour  .Nous avons vu ensemble dans le tuto précédant la mise en page du texte. Dans ce tuto , nous allons voir  La liste à puces avec CSS qui peut être réalisée en utilisant diverses propriétés et techniques.

• Liste à puces simple
• Liste à puces avec des carrés vides
• Liste à puces avec des cercles vides
• Liste à puces avec des images personnalisées
• Liste ordonnée avec des chiffres
• Liste ordonnée avec des lettres minuscules
• Liste ordonnée avec des lettres majuscules

Liste à puces simple

Si vous souhaitez créer une liste à puces simple en CSS, voici un exemple de code que vous pouvez utiliser :

<ul class="liste-a-puces-simple">
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>

.liste-a-puces-simple {
    list-style-type: disc; /* Style de puce par défaut - disque plein */
    padding-left: 20px; /* Espacement à gauche pour les puces */
}

Dans cet exemple, la classe liste-a-puces-simple est appliquée à la liste à puces (<ul>), et la propriété list-style-type est utilisée pour définir le style de la puce sur un disque plein. De plus, padding-left est utilisé pour ajouter un espacement à gauche pour les puces, améliorant ainsi la mise en page visuelle.

Liste à puces avec des carrés vides

Si vous souhaitez créer une liste à puces avec des carrés vides en CSS, vous pouvez utiliser la propriété list-style-type et définir sa valeur sur « square ». Voici un exemple de code :

<ul class="liste-a-puces-carrés-vides">
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>

.liste-a-puces-carrés-vides {
    list-style-type: square; /* Utilisation de carrés vides comme style de puce */
    padding-left: 20px; /* Espacement à gauche pour les puces */
}

Dans cet exemple, la classe liste-a-puces-carrés-vides est appliquée à la liste à puces (<ul>), et la propriété list-style-type est définie sur « square », ce qui utilise des carrés vides comme style de puce. De plus, padding-left est utilisé pour ajouter un espacement à gauche pour les puces, améliorant ainsi la mise en page visuelle.

Liste à puces avec des cercles vides

Si vous souhaitez créer une liste à puces avec des cercles vides en CSS, vous pouvez utiliser la propriété list-style-type et définir sa valeur sur « circle ». Voici un exemple de code :

 <ul class="liste-a-puces-cercles-vides">
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>

.liste-a-puces-cercles-vides {
    list-style-type: circle; /* Utilisation de cercles vides comme style de puce */
    padding-left: 20px; /* Espacement à gauche pour les puces */
}

Dans cet exemple, la classe liste-a-puces-cercles-vides est appliquée à la liste à puces (<ul>), et la propriété list-style-type est définie sur « circle », ce qui utilise des cercles vides comme style de puce. De plus, padding-left est utilisé pour ajouter un espacement à gauche pour les puces, améliorant ainsi la mise en page visuelle.

Liste à puces avec des images personnalisées

Si vous souhaitez créer une liste à puces avec des images personnalisées en CSS, vous pouvez utiliser la propriété list-style-image et spécifier l’URL de l’image que vous souhaitez utiliser comme puce. Voici un exemple de code :

<ul class="liste-a-puces-images-personnalisees">
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>

.liste-a-puces-images-personnalisees {
    list-style-image: url('ico_liensexterne.png'); /* URL de l'image à utiliser comme puce */
    padding-left: 20px; /* Espacement à gauche pour les puces */
}

Dans cet exemple, la classe liste-a-puces-images-personnalisees est appliquée à la liste à puces (<ul>), et la propriété list-style-image est définie sur l’URL de l’image que vous souhaitez utiliser comme puce. De plus, padding-left est utilisé pour ajouter un espacement à gauche pour les puces, améliorant ainsi la mise en page visuelle.