Ostatnio edytowany:

list-style-image

Autor: Virtual Patriot

Opis właściwości list-style-image

Za pomocą właściwości list-style-image możemy określić, który obrazek powinien tworzyć wyróżnik obrazkowy interesującej nas listy HTML.

Dodatkowe techniczne informacje o właściwości list-style-image

przeznaczenie

element HTML typu list-item

dziedziczenie

tak

wartość initial

none

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości list-style-image

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości list-style-image

none

Opis

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.

Przykład

  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".

Kod źródłowy przykładu

<!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:#CBFFFF;
      }
    </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>

url()

Opis

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.

Przykład

  list-style-image:url(http://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 "http://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ść "http://webkod.pl/files/css/obrazek-03.png".

Kod źródłowy przykładu

<!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(http://webkod.pl/files/css/obrazek-03.png);
      }

      ul > li {
        margin-bottom:1px;
        padding:0.5em;
        background-color:#CBFFFF;
      }
    </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>