list-style-image
La propriété CSS list-style-image
définit l'image utilisée comme puce devant les éléments de listes.
On peut également utiliser la propriété raccourcie list-style
.
Exemple interactif
Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels display
vaut list-item
). Par défaut, cela inclut les éléments <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 à <ol>
ou à <ul>
).
Syntaxe
/* Valeurs avec un mot-clé*/
list-style-image: none;
/* Valeurs pointant vers une image */
list-style-image: url('starsolid.gif');
/* Valeurs avec une image */
list-style-image: linear-gradient(to left bottom, red, blue);
/* Valeurs globales */
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: unset;
Valeurs
<image>
-
Une valeur représentant une image valide, qui sera utilisée comme puce.
none
-
Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec
list-style-type
sera utilisé à la place.
Définition formelle
Valeur initiale | none |
---|---|
Applicabilité | éléments de liste |
Héritée | oui |
Valeur calculée | |
Type d'animation | discrète |
Syntaxe formelle
list-style-image =
<image> |
none
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<gradient> =
<linear-gradient()> |
<repeating-linear-gradient()> |
<radial-gradient()> |
<repeating-radial-gradient()>
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]
<cf-image> =
<percentage>? &&
[ <image> | <color> ]
<id-selector> =
<hash-token>
<linear-gradient()> =
linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> =
radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )
<side-or-corner> =
[ left | right ] ||
[ top | bottom ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<position> =
[ left | center | right | top | bottom | start | end | <length-percentage> ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ] |
[ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]
<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<cmyk-component> =
<number> |
<percentage>
<alpha-value> =
<number> |
<percentage>
<linear-color-stop> =
<color> &&
<length-percentage>?
<linear-color-hint> =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
<hue> =
<number> |
<angle> |
none
<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz-space> [ <number> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
Exemples
Utiliser une URL
HTML
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
CSS
ul {
list-style-image: url("starsolid.gif");
}
Résultat
Utiliser un dégradé
HTML
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
CSS
ul {
font-size: 200%;
list-style-image: linear-gradient(to left bottom, red, blue);
}
Résultat
Spécifications
Specification |
---|
CSS Lists and Counters Module Level 3 # image-markers |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
list-style
list-style-type
list-style-position
- La fonction
url()