Ostatnio edytowany:

list-style

Autor: Virtual Patriot

Opis właściwości list-style

Za pomocą właściwości list-style możemy określić kilka różnych cech wyróżnika interesującej nas listy HTML.

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

przeznaczenie

element HTML typu list-item

dziedziczenie

tak

wartość initial

disc outside none

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości list-style

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

grupa wartości

Opis

Za pomocą właściwości list-style oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech wyróżnika interesującej nas listy HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  list-style:upper-latin inside url(obrazek-1.png);
}

/* REGUŁA - 2 */
div {
  list-style-type:upper-latin;
  list-style-position:inside;
  list-style-image:url(obrazek-1.png);
}

Składniki grupy wartości właściwości list-style

Ważne

podana przez nas grupa wartości właściwości list-style nie może zawierać wartości globalnych

Przykładowe zapisy

square

square inside

square inside url(obrazek-1.png)

inside url(obrazek-1.png)

square url(obrazek-1.png)

type

Składnik type nie jest wymaganym składnikiem grupy wartości właściwości list-style. Składnik type określa wartość właściwości list-style-type, czyli typ wyróżnika interesującej nas listy HTML.

Wartość domyślna

disc

position

Składnik position nie jest wymaganym składnikiem grupy wartości właściwości list-style. Składnik position określa wartość właściwości list-style-position, czyli pozycję wyróżnika interesującej nas listy HTML.

Wartość domyślna

outside

image

Składnik image nie jest wymaganym składnikiem grupy wartości właściwości list-style. Składnik image określa wartość właściwości list-style-image, czyli to, który obrazek powinien tworzyć wyróżnik obrazkowy interesującej nas listy HTML.

Wartość domyślna

none

Przykład

  list-style:square inside none;
  • pierwszy przedmiot listy HTML
  • drugi przedmiot listy HTML
  • trzeci przedmiot listy HTML
  • czwarty przedmiot listy HTML
  • piąty przedmiot listy HTML

Wyróżnik każdego przykładowego elementu "li" jest typu "square", znajduje się wewnątrz obszaru zawartości każdego przykładowego elementu "li" oraz nie jest wyróżnikiem obrazkowym, ponieważ do przykładowego elementu "ul" została dodana właściwość "list-style" wraz z następującą grupą wartości: "square inside none".

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:square inside none;
      }

      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>