From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/list-style/index.html | 155 +++++++++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 files/fr/web/css/list-style/index.html (limited to 'files/fr/web/css/list-style') diff --git a/files/fr/web/css/list-style/index.html b/files/fr/web/css/list-style/index.html new file mode 100644 index 0000000000..19fcbef3f3 --- /dev/null +++ b/files/fr/web/css/list-style/index.html @@ -0,0 +1,155 @@ +--- +title: list-style +slug: Web/CSS/list-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/list-style +--- +
{{CSSRef}}
+ +

La propriété list-style est une propriété raccourcie qui permet de définir {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} et {{cssxref("list-style-position")}}.

+ +
{{EmbedInteractiveExample("pages/css/list-style.html")}}
+ + + +
+

Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}: list-item;}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).

+
+ +

Syntaxe

+ +
/* Type */
+list-style: square;
+
+/* Image */
+list-style: url('../img/etoile.png');
+
+/* Position */
+list-style: inside;
+
+/* type | position */
+list-style: georgian inside;
+
+/* type | image | position */
+list-style: lower-roman url('../img/etoile.png') outside;
+
+list-style: none;
+
+/* Valeurs globales */
+list-style: inherit;
+list-style: initial;
+list-style: unset;
+
+ +

Valeurs

+ +

Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si {{cssxref("list-style-type")}} et {{cssxref("list-style-image")}} sont tous les deux définis, list-style-type sera utilisé si l'image est indisponible.

+ +
+
<'list-style-type'>
+
Voir {{cssxref("list-style-type")}}
+
<'list-style-image'>
+
Voir {{cssxref("list-style-image")}}
+
<'list-style-position'>
+
Voir {{cssxref("list-style-position")}}
+
none
+
Aucun style n'est utilisé.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.un {
+  list-style: circle;
+}
+
+.deux {
+  list-style: square inside;
+}
+ +

HTML

+ +
Liste 1
+<ul class="un">
+  <li>Élément 1</li>
+  <li>Élément 2</li>
+  <li>Élément 3</li>
+</ul>
+Liste 2
+<ul class="deux">
+  <li>Élément A</li>
+  <li>Élément B</li>
+  <li>Élément C</li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','auto', 220)}}

+ +

Accessibilité

+ +

Safari ne reconnait pas (incorrectement) les listes non ordonnées lorsque list-style:none leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans). Pour pallier ce problème, on peut ajouter un espace sans chasse comme pseudo-contenu avant chaque élément de liste afin que la liste soit correctement annoncée.

+ +
ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+
+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}{{Spec2('CSS3 Lists')}}Aucun changement.
{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.list-style")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf