HTML & CSS

Listes de style CSS


Listes ordonnées :

  1. Café
  2. Thé
  3. Coca Cola
  1. Café
  2. Thé
  3. Coca Cola

Listes HTML et propriétés de liste CSS

En HTML, il existe deux principaux types de listes :

  • listes non ordonnées (
      ) – les éléments de la liste sont marqués par des puces
    • listes ordonnées (
        ) – les éléments de la liste sont marqués par des chiffres ou des lettres

    Les propriétés de la liste CSS vous permettent de :

    • Définir différents marqueurs d’élément de liste pour les listes ordonnées
    • Définir différents marqueurs d’élément de liste pour les listes non ordonnées
    • Définir une image comme marqueur d’élément de liste
    • Ajouter des couleurs d’arrière-plan aux listes et aux éléments de liste

    Différents marqueurs d’éléments de liste

    Le list-style-type La propriété spécifie le type de marqueur d’élément de liste.

    L’exemple suivant montre certains des marqueurs d’élément de liste disponibles :

    Exemple

    ul.a {
    type de style de liste : cercle ;
    }

    ul.b {
    type de style de liste : carré ;
    }

    ol.c {
    type de style de liste : supérieur-romain ;
    }

    vieux {
    type de style de liste : alpha inférieur ;
    }

    Essayez-le vous-même »

    Remarque : Certaines des valeurs sont pour des listes non ordonnées et d’autres pour des listes ordonnées.



    Une image comme marqueur d’élément de liste

    Le list-style-image propriété spécifie une image comme marqueur d’élément de liste :


    Positionner les marqueurs d’éléments de la liste

    Le list-style-position La propriété spécifie la position des marqueurs d’éléments de liste (puces).

    “position de style de liste : extérieur ;” signifie que les puces seront en dehors de l’élément de liste. Le début de chaque ligne d’un élément de liste sera aligné verticalement. C’est par défaut :

    • Café – Une boisson infusée préparée à partir de grains de café torréfiés…
    • Thé
    • Coca Cola

    “position de style de liste : à l’intérieur ;” signifie que les puces seront à l’intérieur de l’élément de liste. Comme il fait partie de l’élément de liste, il fera partie du texte et poussera le texte au début :

    • Café – Une boisson infusée préparée à partir de grains de café torréfiés…
    • Thé
    • Coca Cola

    Exemple

    ul.a {
    position de style de liste : extérieur ;
    }

    ul.b {
    position de style de liste : à l’intérieur ;
    }

    Essayez-le vous-même »


    Supprimer les paramètres par défaut

    Le list-style-type:none La propriété peut également être utilisée pour supprimer les marqueurs/puces. Notez que la liste a également une marge et un remplissage par défaut. Pour le supprimer, ajoutez margin:0 et padding:0 à

      ou

         :


        Liste – Propriété abrégée

        Le list-style propriété est une propriété abrégée. Il est utilisé pour définir toutes les propriétés de la liste dans une seule déclaration :

        Lors de l’utilisation de la propriété abrégée, l’ordre des valeurs de propriété est :

        • list-style-type (si une image de style de liste est spécifiée, la valeur de cette propriété sera affichée si l’image ne peut pas être affichée pour une raison quelconque)
        • list-style-position (spécifie si les marqueurs d’élément de liste doivent apparaître à l’intérieur ou à l’extérieur du flux de contenu)
        • list-style-image (spécifie une image comme marqueur d’élément de liste)

        Si l’une des valeurs de propriété ci-dessus est manquante, la valeur par défaut de la propriété manquante sera insérée, le cas échéant.


        Liste de style avec des couleurs

        Nous pouvons également styliser les listes avec des couleurs, pour les rendre un peu plus intéressantes.

        Tout ce qui est ajouté à la balise

          ou

            affecte la liste entière, tandis que les propriétés ajoutées à la balise

          • affecteront les éléments individuels de la liste :

            Exemple

            ol {
            arrière-plan : #ff9999 ;

            rembourrage : 20px ;
            }

            ul {
            arrière-plan : #3399ff ;

            rembourrage : 20px ;
            }

            ol li {
            arrière-plan : #ffe5e5 ;
            couleur : rouge foncé ;
            rembourrage : 5px ;

            marge gauche : 35px ;
            }

            ul li {
            arrière-plan : #cce5ff ;
            couleur : bleu foncé ;
            marge : 5px ;
            }

            Résultat:

            Essayez-le vous-même »


            Plus d’exemples

            Liste personnalisée avec une bordure gauche rouge
            Cet exemple montre comment créer une liste avec une bordure gauche rouge.

            Liste bordée pleine largeur
            Cet exemple montre comment créer une liste encadrée sans puces.

            Tous les différents marqueurs d’élément de liste pour les listes
            Cet exemple montre tous les différents marqueurs d’éléments de liste en CSS.



            Toutes les propriétés de la liste CSS

#Listes #style #CSS

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button