Autor publikacji
Virtual Patriot - Administrator

list-style

Data publikacji
Ostatnio edytowano

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

Informacje dodatkowe

brak

Informacje techniczne o właściwości list-style

przeznaczenie

element HTML typu list-item

pozycja

dowolna

dziedziczenie

tak

wartość initial

disc outside none

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości list-style

Firefox

tak

Google Chrome

tak

Nie interpretuje wartości disclosure-open, disclosure-closed, cjk-decimal, tamil, japanese-informal, japanese-formal składnika type.

Safari

tak

Nie interpretuje wartości disclosure-open, disclosure-closed, cjk-decimal, tamil, japanese-informal, japanese-formal składnika type.

Opera

tak

Nie interpretuje wartości disclosure-open, disclosure-closed, cjk-decimal, tamil, japanese-informal, japanese-formal składnika type.

Internet Explorer

tak

Interpretuje wartość decimal-leading-zero, georgian, armenian, lower-latin, upper-latin, lower-greek składnika type, lecz od wersji "8".

Nie interpretuje wartości z oznaczeniem "LV3" składnika type.

Edge

tak

Nie interpretuje wartości disclosure-open, disclosure-closed, cjk-decimal, tamil, japanese-informal, japanese-formal składnika type.

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

grupa wartości

Wyjaśnienie

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 */
ul {
  list-style:upper-latin inside url(obrazek-1.png);
}

/* REGUŁA - 2 */
ul {
  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:#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>