list-style-image
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since иÑÐ»Ñ 2015 г..
CSS-ÑвойÑÑво list-style-image ÑÑÑÐ°Ð½Ð°Ð²Ð»Ð¸Ð²Ð°ÐµÑ Ð¸Ð·Ð¾Ð±Ñажение, иÑполÑзÑемое в каÑеÑÑве маÑкеÑа ÑпиÑка.
ЧаÑе, Ñдобнее иÑполÑзоваÑÑ Ð¾Ð±Ñее ÑвойÑÑво list-style.
ÐнÑеÑакÑивнÑй пÑимеÑ
list-style-image: url("/shared-assets/images/examples/rocket.svg");
list-style-image: none;
<section class="default-example" id="default-example">
<div>
<p>NASA Notable Missions</p>
<ul class="transition-all unhighlighted" id="example-element">
<li>Apollo</li>
<li>Hubble</li>
<li>Chandra</li>
<li>Cassini-Huygens</li>
<li>Spitzer</li>
</ul>
</div>
</section>
.default-example {
font-size: 1.2rem;
}
#example-element {
width: 100%;
background: #be094b;
color: white;
}
section {
text-align: left;
flex-direction: column;
}
hr {
width: 50%;
color: lightgray;
margin: 0.5em;
}
.note {
font-size: 0.8rem;
}
.note a {
color: #009e5f;
}
@counter-style space-counter {
symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
suffix: " ";
}
ÐÑимеÑание:
ÐÑо ÑвойÑÑво пÑименÑеÑÑÑ Ðº ÑлеменÑам ÑпиÑка, Ñ.е. к ÑлеменÑам Ñ display: list-item;<li>. Т.к. ÑÑо ÑвойÑÑво наÑледÑеÑÑÑ, его можно задаÑÑ Ð´Ð»Ñ ÑодиÑелÑÑкого ÑлеменÑа (обÑÑно <ol> или <ul>), ÑÑо Ð¿Ð¾Ð·Ð²Ð¾Ð»Ð¸Ñ Ð¿ÑимениÑÑ ÐµÐ³Ð¾ ко вÑем ÑлеменÑам ÑпиÑка.
СинÑакÑиÑ
/* ÐлÑÑевÑе Ñлова */
list-style-image: none;
/* <url> знаÑÐµÐ½Ð¸Ñ */
list-style-image: url("star-solid.gif");
/* ÐлобалÑнÑе знаÑÐµÐ½Ð¸Ñ */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
ÐнаÑениÑ
<url>-
РаÑположение ÑлеменÑа Ð´Ð»Ñ Ð¸ÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ Ð² каÑеÑÑве маÑкеÑа.
none-
УказÑваеÑ, ÑÑо изобÑажение не иÑполÑзÑеÑÑÑ Ð² каÑеÑÑве маÑкеÑа ÑпиÑка. ÐÑли ÑÑÑановлено ÑÑо знаÑение, вмеÑÑо него бÑÐ´ÐµÑ Ð¸ÑполÑзоваÑÑÑÑ Ð¼Ð°ÑкеÑ, опÑеделÑннÑй в
list-style-type.
ФоÑмалÑнÑй ÑинÑакÑиÑ
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> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
ÐÑимеÑ
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
CSS
ul {
list-style-image: url("star-solid.gif");
}
РезÑлÑÑаÑ
СпеÑиÑикаÑии
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # image-markers |
| ÐаÑалÑное знаÑение | none |
|---|---|
| ÐÑименÑеÑÑÑ Ðº | ÑпиÑок ÑлеменÑов |
| ÐаÑледÑеÑÑÑ | да |
| ÐбÑабоÑка знаÑÐµÐ½Ð¸Ñ | The keyword none or the computed <image> |
| Animation type | discrete |