Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété list-style-type

Description de la propriété list-style-type.

Définit le type de puces ou de numérotation à utiliser pour les listes ( balises li ). Cette propriété est inopérante si une image est définie par list-style-image.

Syntaxes pour list-style-type.

  • list-style-type: disc;
    1. Un
    2. Deux
    3. Trois

    Valeur par défaut. Puce circulaire noire.

  • list-style-type: circle;
    1. Un
    2. Deux
    3. Trois

    Puce circulaire blanche.

  • list-style-type: square;
    1. Un
    2. Deux
    3. Trois

    Puce carrée noire.

  • list-style-type: '> ';
    1. Un
    2. Deux
    3. Trois

    La chaîne de caractères spécifiée est utilisée comme puce.

  • list-style-type: none;
    1. Un
    2. Deux
    3. Trois

    Aucune puce, ni aucun numéro.

  • list-style-type: decimal; list-style-type: decimal-leading-zero;
    1. Un
    2. Deux
    3. Trois
    1. Un
    2. Deux
    3. Trois

    Numérotation décimale (classique), en chiffres.

    La valeur decimal-leading-zero affiche toujours deux digits, les nombres de 1 à 9 étant précédés d'un zéro. Elle n'est pas bien reconnue par les navigateurs.

    La numérotation décimale commence avec le deuxième symbole (sachant que le premier symbole est le zéro), et se poursuit jusqu'au dernier symbole (le 9). Puis on recommence avec deux chiffres, en incluant cette fois-ci le premier symbole : le zéro.

  • list-style-type: lower-roman; list-style-type: upper-roman;
    1. Un
    2. Deux
    3. Trois
    1. Un
    2. Deux
    3. Trois

    Numérotation en chiffres romains minuscules ou majuscules.

  • list-style-type: lower-alpha; list-style-type: lower-latin; list-style-type: upper-alpha; list-style-type: upper-latin;
    1. Un
    2. Deux
    3. Trois
    1. Un
    2. Deux
    3. Trois

    Les numérotations alpha et latin sont synonymes. Ce sont des numérotations alphabétiques en caractères latin, minuscules ou majuscules.

    Les numérotations alphabétiques commencent avec le premier symbole (le a), se continue jusqu'au dernier symbole (le z), puis reprend avec deux lettres, en recommençant au premier symbole.

  • list-style-type: armenian;
    1. Un
    2. Deux
    3. Trois
    1. Un
    2. Deux
    3. Trois

    Numérotation en caractères nationaux. De très nombreuses valeurs existent :
    armenian   cjk-ideographic   georgian, etc. Reportez-vous au simulateur, en bas de cette page pour une liste plus complète et tester le compatibilité de votre navigateur.

  • list-style-type: symbols(...);
    1. Un
    2. Deux
    3. Trois
    1. Un
    2. Deux
    3. Trois

    La fonction symbols() permet de définir les caractères à utiliser pour la numérotation. Reportez-vous à la description de la fonction symbols().

  • list-style-type: initial;

    La valeur initiale est disc.

  • list-style-type: unset; list-style-type: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Sélectionnez un type de puce ou de numérotation dans la liste. Les valeurs non supportées par votre navigateur actuel s'affichent en rouge.

list-style-type :

A titre d'échantillon, voici une liste de quelques uns des noms de couleur standardisés en CSS. Sélectionnez une valeur pour list-style-type et constatez le changement de puces ou de numérotation.

  • AliceBlue
  • AntiqueWhite
  • Aqua
  • AquaMarine
  • Azure
  • Beige
  • Bisque
  • Black
  • BlanchedAlmond
  • Blue
  • BlueViolet
  • Brown
  • BurlyWood
  • CadetBlue
  • Chartreuse
  • Chocolate
  • Coral
  • CornflowerBlue
  • Cornsilk
  • Crimson
  • Cyan
  • DarkBlue
  • DarkCyan
  • DarkGoldenRod
  • DarkGray
  • DarkGreen
  • DarkKhaki
  • DarkMagenta
  • DarkOliveGreen
  • DarkOrange
  • DarkOrchid
  • DarkRed
  • DarkSalmon
  • DarkSeaGreen
  • DarkSlateBlue
  • DarkSlateGray
  • DarkTurquoise
  • DarkViolet
  • DeepPink
  • DeepSkyBLue
  • DimGray
  • DodgerBlue
  • Feldspar
  • FireBrick
  • FloralWhite
  • ForestGreen
  • Fuchsia
  • Gainsboro
  • GhostWhite
  • Gold
  • GoldenRod
  • Gray
  • Green
  • GreenYellow
  • HoneyDew
  • HotPink
  • IndianRed
  • Indigo
  • Ivory
  • Khaki

Voir aussi...

Listes à puces ou à numéros - Propriétés.

  • list-style : Résumé des caractéristiques de listes à puces ou numérotées.
  • list-style-image : Définit une image à utiliser à la place des puces.
  • list-style-position : Définit l'emplacement des marqueurs de listes (puces ou numéros).

Listes à puces ou à numéros - Directives.

Listes à puces ou à numéros - Fonctions.

  • counter() : Renvoie la valeur actuelle d'un compteur.
  • counters() : Renvoie la valeur d'un compteur hiérarchique.
  • symbols() : Définit tous les paramètres d'une numérotation