La propriété list-style-position spécifie si la puce doit être positionnée à l'intérieur ou à l'extérieur des éléments de la liste. Cette propriété peut prendre deux valeurs :

• à l'extérieur - le marqueur est situé à gauche du contenu (c'est la valeur par défaut)
• à l'intérieur - le marqueur est situé à l'intérieur de l'élément de liste avec le contenu

Vous pouvez maintenant réécrire l'exemple précédent afin que l'indentation sur le côté gauche soit supprimée, mais que les marqueurs ne sortent pas du bord du navigateur :

• Café
• Thé

• Café
• Thé

• Café
• Thé

Dans l'exemple, une bordure a été ajoutée à chaque élément de la liste pour afficher visuellement les limites des éléments de la liste.

Pour distinguer d'une manière ou d'une autre les lignes d'une liste à puces du texte principal, vous pouvez rendre la couleur des puces de la liste différente de la couleur du texte.

La valeur par défaut est un point noir. Si vous définissez simplement la couleur sur l'élément li, alors rien ne fonctionnera - la couleur sera définie sur toute la ligne et il vous suffira de changer la couleur du marqueur (couleur ul li des points).

Comment changer la couleur des puces à l'aide de CSS

1. Masquer les marqueurs de liste d'origine à l'aide de la propriété type de style de liste
2. Ajouter vos propres marqueurs à l'aide d'un pseudo-élément :avant et propriétés contenu. Cela vous permettra d'insérer n'importe quel texte ou symbole avant l'élément li.
3. L'apparence du marqueur peut être contrôlée via des styles CSS, en modifiant la couleur, la police, l'arrière-plan, etc. J'ai utilisé la police Montserrat en gras.

Si vous rencontrez une situation dans laquelle des marqueurs apparaissent à des endroits inutiles, par exemple dans le menu principal ou dans un menu en double dans le pied de page, cela peut être facilement corrigé. Ajoutez simplement un élément parent qui contient des listes dont nous devons modifier les couleurs des marqueurs. J'ai ajouté le mot article et désormais, ces changements s'appliquent uniquement à la zone de contenu du site.

Si vous avez déjà essayé de modifier les styles CSS des numéros de ligne (chiffres) dans les listes ordonnées

, alors vous avez probablement rencontré des problèmes. Il est impossible d'accéder aux styles de ces éléments à l'aide des sélecteurs CSS. Mais bien souvent, la conception de l’interface implique de changer sa couleur, son arrière-plan, sa taille, etc.

Voici l’exemple le plus simple d’une liste sans style :

HTML

1. Planter un arbre
2. Construire une maison
3. Élever un fils

Examinons plusieurs façons de résoudre le problème ci-dessus.

Traditionnellement, une manière maladroite.

La manière traditionnelle de résoudre ce problème consiste à masquer les numéros de ligne automatiquement attribués par le navigateur. Dans ce cas, la propriété list-style: none; est utilisée. .

css

li( style de liste : aucun ; ) .num( couleur : blanc ; arrière-plan : #2980B9 ; affichage : bloc en ligne ; alignement du texte : centre ; marge : 5 px 10 px ; hauteur de ligne : 40 px ; largeur : 40 px ; hauteur : 40px ; )

HTML

1. 1 Planter un arbre
2. 2 Construire une maison
3. 3Élever un fils

D'accord, cela semble redondant et rigide. Nous masquons les numéros de séquence placés automatiquement et les remplaçons par des valeurs spécifiées manuellement, encombrons la mise en page, etc.

Voyons comment nous pouvons obtenir le même résultat sans encombrer la mise en page et en utilisant le pseudo-element::before et les propriétés CSS content , counter-increment , counter-reset .

Une manière belle et correcte.

Nous fournirons d’abord le code et la démo, puis nous découvrirons de quoi il s’agit.

css

ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); couleur: blanc; arrière-plan: #2980B9; display: inline-block; alignement du texte : centre ; marge : 5px 10px ; hauteur de la ligne : 40px ; largeur : 40px ; hauteur : 40px ; )

HTML

1. Planter un arbre
2. Construire une maison
3. Élever un fils

Comme vous pouvez le constater, le code HTML reste propre et beau. Dans ce cas, tout le style des éléments de la liste est transféré en CSS.

Regardons point par point :

• li::avant– crée un pseudo-élément à l'intérieur de la liste, qui prend la place du premier enfant.
• compteur-réinitialisation:myCounter;– réinitialise le compteur CSS myCounter à l’intérieur de chaque
  .
  1. contre-incrément : myCounter ;– incrémente le compteur css myCounter pour chaque pseudo-element::before .
  2. contenu:compteur(monCompteur);– imprime la valeur actuelle du compteur myCounter à l’intérieur du pseudo-élément ::before.

Plus de détails sur les compteurs CSS peuvent être trouvés dans





taille du marqueur de liste CSS (8)

Je me demandais s'il existait un moyen de changer la couleur des puces de la liste.

J'ai une liste :

• Maison
• Jardin

Il n'est pas possible d'insérer quoi que ce soit dans li, comme "span" et "p". Puis-je changer la couleur des puces mais pas le texte de manière intelligente ?

Pour moi, la meilleure option est d'utiliser des pseudo-éléments CSS, donc pour le disque, cela ressemblerait à ceci :

ul ( list-style-type: none; ) li ( position: relative; ) li:before ( content: ""; display: block; position: absolue; width: 5px; /* ajuster en fonction de vos besoins */ height: 5px; /* ajuster en fonction de vos besoins */ border-radius: 50%; gauche: -15px; /* ajuster en fonction de vos besoins */ haut: 0,5em; arrière-plan: #f00; /* ajuster en fonction de vos besoins * / )

• d'abord
• deuxième
• troisième
• la largeur et la hauteur doivent être des valeurs égales pour garder les pointeurs arrondis
• vous pouvez définir le rayon de bordure sur zéro si vous souhaitez avoir des puces carrées

Pour plus de styles de puces, vous pouvez utiliser d'autres formes CSS https://css-tricks.com/examples/ShapesOfCSS/ (choisissez celle-ci qui ne nécessite pas de pseudo-éléments comme les triangles)

Basé sur la réponse de @ddilsaver. Je voulais pouvoir utiliser un sprite de balle. Cela semble fonctionner :

Li ( style de liste : aucun ; position : relative ; ) li:avant ( contenu :"" ; affichage : bloc ; position : absolue ; largeur : 20 px ; hauteur : 20 px ; gauche : -30 px ; haut : 5 px ; image d'arrière-plan : url(i20.png); background-position: 0px -40px; /* ou le décalage souhaité */ )

Je sais que c'est une question vraiment très ancienne, mais je jouais avec ça et j'ai trouvé une solution que je n'avais pas vue. Donnez une couleur à la liste, puis remplacez la couleur du texte avec le ::first-line selector::first-line . Je ne suis pas un expert, donc il y a peut-être quelque chose qui ne va pas dans cette approche qui me manque, mais cela semble fonctionner.

li ( couleur : bleu ; ) li::première ligne ( couleur : noir ; )

• Maison
• Jardin

J'ai aussi beaucoup aimé la réponse de Mark : j'ai besoin d'un ensemble d'UL de couleurs différentes et il serait évidemment plus facile d'utiliser simplement une classe. Voici par exemple ce que j'ai utilisé pour l'orange :

Ul.orange ( style de liste : aucun ; remplissage : 0px ; ) ul.orange > li:before ( contenu : "\25CF " ; taille de police : 15px ; couleur : #F00 ; marge droite : 10px ; remplissage : 0px ; hauteur de ligne : 15 px ; )

De plus, j'ai découvert que le code hexadécimal que j'utilisais pour "content:" était différent de celui de Marc (ce cercle hexadécimal semblait trop grand). Celui que j'ai utilisé semble parfaitement placé au milieu. J'ai également trouvé plusieurs autres formes (carrés, triangles). , cercles, etc.)

S'appuyant sur les solutions de @Marc et @jessica, voici la solution que j'utilise :

Li ( position:relative; ) li:avant ( contenu:""; affichage: bloc; position: absolue; largeur: 6px; hauteur:6px; rayon-bordure:6px; gauche: -20px; haut: .5em; arrière-plan- couleur : #000 ; )

Je les utilise pour la taille des polices, donc si vous définissez top sur .5em, il sera toujours placé au milieu de votre première ligne de texte. J'ai utilisé left:-20px car c'est la position par défaut left:-20px dans les navigateurs : parent padding/2

Basé sur la solution de @Marc - puisque le symbole de la puce est rendu différemment selon les polices et les navigateurs, j'ai utilisé la technique CSS3 suivante avec un rayon de bordure pour créer la puce avec laquelle j'ai plus de contrôle :

Li:avant (contenu : " ; couleur d'arrière-plan : #898989 ; affichage : bloc en ligne ; position : relative ; hauteur : 12 px ; largeur : 12 px ; rayon-bordure : 6 px ; -webkit-border-radius : 6px ; - moz-border-radius : 6 px ; -moz-background-clip : rembourrage ; -webkit-background-clip : padding-box ; background-clip : padding-box ; marge droite : 4px ; haut : 2px ; )

Nous pouvons combiner list-style-image avec des svg s que nous pouvons intégrer en CSS! Cette méthode offre un contrôle incroyable sur les « balles » qui peuvent devenir n’importe quoi.

Pour obtenir un cercle rouge, utilisez simplement le CSS suivant :

"); }

Mais ce n'est que le début. Cela nous permet de faire toutes les choses folles que nous voulons avec ces balles. les cercles ou les rectangles sont faciles, mais tout ce que vous pouvez dessiner avec SVG, vous pouvez y aller ! Voir l'exemple de pomme ci-dessous :

ul (list-style-image: url("data:image/svg+xml, "); ) ul ul ( liste-style-image: url("data:image/svg+xml, "); ) ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul.bulls-eye ( list-style-image: url("data:image/svg+xml, "); ) ul.multi-color ( list-style-image: url("data:image/svg+xml, "); }

• De grands cercles !
  • De grands rectangles !
  • b
    • Des petits cercles !
    • c
      • Des petits rectangles !
• Taureaux
• yeux.
• Multi
• couleur

Largeur/hauteur de l'attribut

Certains navigateurs nécessitent que les attributs width et height soient définis sur

Encodages

J'ai réussi cela sans ajouter de balisage, mais j'ai utilisé li:before à la place. Cela présente évidemment toutes les limitations de:before (pas de prise en charge héritée d'IE), mais semble fonctionner avec IE8, Firefox et Chrome après des tests très limités. Le style de puce est également limité à ce qui est en Unicode.

li ( list-style: none; ) li:before ( /* Pour une puce ronde */ content: "\2022"; /* Pour une puce carrée */ /*content:"\25A0";*/ display: block ; position : relative ; largeur maximale : 0 ; hauteur maximale : 0 ; gauche : -10 px ; haut : 0 ; couleur : vert ; taille de police : 20 px ; )

Tâche

Définissez la couleur des marqueurs dans la liste sans modifier la couleur du texte.

Solution

Il existe deux façons de changer la couleur des marqueurs, appelons-les simples et délicates. Une méthode simple consiste à entrer

1. ajouter une balise , puis nous plaçons le texte à l'intérieur. En d'autres termes, au lieu du schéma traditionnel
2. texte
créer un dessin
3. texte
. Dans ce cas, la couleur des marqueurs est déterminée par la propriété de style de couleur du sélecteur LI, et la couleur du texte est déterminée par le sélecteur SPAN (exemple 1).

Exemple 1 : Utilisation de balises imbriquées

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Violon
• Guitare
• Cornemuse
• Orgue d'orgue
• Célesta




Le résultat de cet exemple est présenté ci-dessous (Figure 1).

Riz. 1. Marqueurs dont la couleur diffère du texte principal

Malgré sa simplicité, la méthode n'est pas pratique, surtout avec les grandes listes, car vous devrez désormais ajouter une balise à chaque élément de la liste. . Examinons donc une méthode intelligente entièrement basée sur CSS.

Internet Explorer	Chrome	Opéra	Safari	Firefox	Android	IOS
8.0+	1.0+	7.0+	3.1+	1.0+	1.0+	1.0+

Le point est le suivant : nous supprimons les marqueurs de liste d'origine via la propriété list-style-type et ajoutons nos propres marqueurs en utilisant le pseudo-élément :before et la propriété content. Ce lien vous permet d'insérer n'importe quel texte ou symbole avant un élément, dans ce cas LI . De plus, le type de texte (couleur, police, arrière-plan, etc.) peut également être contrôlé via des styles, comme le montre l'exemple 2. Ici, le symbole de paragraphe ¶ est utilisé comme marqueurs.

Exemple 2 : Utilisation du pseudo-élément :before

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Nord
• Sud
• Ouest
• Est




Le résultat de cet exemple est présenté sur la Fig. 2.



Riz. 2. Marqueurs créés à l'aide de styles