Wartość none jest domyślną wartością właściwości list-style-image.
Domyślnie żaden obrazek nie tworzy wyróżnika obrazkowego listy HTML.
list-style-image:none;
- pierwszy przedmiot listy HTML
- drugi przedmiot listy HTML
- trzeci przedmiot listy HTML
- czwarty przedmiot listy HTML
- piąty przedmiot listy HTML
Żaden obrazek nie tworzy wyróżnika obrazkowego każdego przykładowego elementu "li".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
ul > li {
margin-bottom:1px;
padding:0.5em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<ul>
<li>pierwszy przedmiot listy HTML</li>
<li>drugi przedmiot listy HTML</li>
<li>trzeci przedmiot listy HTML</li>
<li>czwarty przedmiot listy HTML</li>
<li>piąty przedmiot listy HTML</li>
</ul>
</body>
</html>
Za pomocą właściwości list-style-image oraz funkcji url() możemy określić, który obrazek powinien tworzyć wyróżnik obrazkowy interesującej nas listy HTML.
list-style-image:url(https://webkod.pl/files/css/obrazek-03.png);
- pierwszy przedmiot listy HTML
- drugi przedmiot listy HTML
- trzeci przedmiot listy HTML
- czwarty przedmiot listy HTML
- piąty przedmiot listy HTML
Obrazkiem tworzącym wyróżnik obrazkowy każdego przykładowego elementu "li" jest obrazek znajdujący się pod adresem "https://webkod.pl/files/css/obrazek-03.png", ponieważ do przykładowego elementu "ul" została dodana właściwość "list-style-image" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "https://webkod.pl/files/css/obrazek-03.png".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
ul {
list-style-image:url(https://webkod.pl/files/css/obrazek-03.png);
}
ul > li {
margin-bottom:1px;
padding:0.5em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<ul>
<li>pierwszy przedmiot listy HTML</li>
<li>drugi przedmiot listy HTML</li>
<li>trzeci przedmiot listy HTML</li>
<li>czwarty przedmiot listy HTML</li>
<li>piąty przedmiot listy HTML</li>
</ul>
</body>
</html>
