Właściwości listy

KURS CSS                   KURS HTML

Właściwości listy deklarujemy poleceniem selektor {list-style-type: typ}. Właściwość ta może być ustawiona dla ul, ol, li.
Dla list punktowanych przewidziane są typy: disc, circle, square dla list uporządkowanych:decimal, lower-alpha, upper-alpha, lower-roman, upper-roman. Styl wyłącza typ none.
Dla list uporządkowanych przewidziane są poza tym liczne typy oparte na alfabetach wschodnich lub historycznych np.:

Style CSS pozwalają na wstawianie włąsnej gafiki jako punktora:
list-style-image:url;
Wformie skróconej podajemy wartości w kolejności: typ, position, image.

przykład

Automatyczna numeracja

Jeżeli zaznajomiłeś się już czytelniku bardziej szczegółowo z zagadnieniem wykazów w języku HTML, to zapewne wiesz już, że nie oferują one żadnych bardziej skomplikowanych sposobów numeracji poszczególnych punktów i podpunktów. To znaczy możliwe jest określenie np. następującego sposobu numeracji:

Co jednak zrobić, jeżeli nie odpowiada nam taki sposób numeracji punktów albo nie możemy z góry określić ile będziemy mieli poziomów zagnieżdżenia? CSS daje na to prostą receptę - automatyczną numerację, czyli możliwość dowolnego określania sposobu numerowania elementów, np.: Automatyczna numeracja w CSS korzysta z tzw. liczników, które są podobne do zmiennych w językach programowania. Każdy licznik posiada swój unikalny identyfikator (nazwę), za pomocą którego można się do niego odnosić w arkuszu CSS. Dodatkowo każdy licznik przechowuje wartość, która jest liczbą określającą wartość licznika dla aktualnego punktu wykazu (1, 2, 3,...).
Zasada tworzenia automatycznej numeracji jest prosta:
  1. Najpierw określany nazwę licznika dla danego wykazu, od razu zerując go:
    ol { counter-reset: nazwa_licznika }
  2. Usuwamy domyślne numerowanie wykazu, aby nie kolidowało z automatycznym:
    ol li { list-style-type: none }
  3. Następnie dla kolejnych punktów i podpunktów wykazu wyświetlamy aktualną wartość licznika na początku treści, a następnie zwiększamy tą wartość o jeden - dla następnego punktu lub podpunktu:
    ol li:before { content: counters(nazwa_licznika, ".") ". "; counter-increment: nazwa_licznika }

    efekt

  4. Punkt pierwszy (1.)
    1. Podpunkt pierwszy (1.1.)
      1. Podpunkt drugiego rzędu (1.1.1.)
      2. Podpunkt drugiego rzędu (1.1.2.)
    2. Podpunkt drugi (1.2.)
      1. Podpunkt drugiego rzędu (1.2.1.)
      2. Podpunkt drugiego rzędu (1.2.2.)
  5. Punkt drugi (2.)
    1. Podpunkt pierwszy (2.1.)
      1. Podpunkt drugiego rzędu (2.1.1.)
      2. Podpunkt drugiego rzędu (2.1.2.)
    2. Podpunkt drugi (2.2.)
      1. Podpunkt drugiego rzędu (2.2.1.)
      2. Podpunkt drugiego rzędu (2.2.2.)
    6. Ponieważ przedstawiony powyżej wykaz jest wielokrotnie zagnieżdżony, więc znajduje się w nim kilka znaczników ol umieszczonych jeden wewnątrz drugiego. Dlatego właśnie polecenie ol { counter-reset: nazwa_licznika } tak naprawdę przy każdym znaczniku ol tworzy nowy egzemplarz tego licznika. Egzemplarze można oznaczać dla potrzeb analizy kolejnymi numerami (przyjmijmy numerację od zera): nazwa_licznika[0], nazwa_licznika[1], nazwa_licznika[2] itd. Każdy z egzemplarzy przechowuje osobną numerację (działają niezależnie od siebie), ale jednocześnie dla każdego z egzemplarzy tego samego licznika (czyli egzemplarzy z tą samą nazwą) można uzyskać aktualny stan wszystkich liczników nadrzędnych innych egzemplarzy. Realizuje się to za pomocą funkcji counters(), która przyjmuje dwa argumenty rozdzielone przecinkiem:
    • identyfikator licznika (wspólna nazwa egzemplarzy),
    • łańcuch znakowy separatora, który ma rozdzielać kolejne wartości egzemplarzy licznika.
    Wartość odczytaną przez tę funkcję możemy następnie podstawić w deklaracji stylu do własności content, co spowoduje wyświetlenie jej w treści elementu: ol li:before { content: counters(nazwa_licznika, ".") } W świetle tego przebieg generowania automatycznej numeracji dla przedstawionego wcześniej wykazu odbywa się następująco:
    1. 1 (nazwa_licznika[0] + 1 = 1)
      1. 1.1 (nazwa_licznika[1] + 1 = 1)
        1. 1.1.1 (nazwa_licznika[2] + 1 = 1)
        2. 1.1.2 (nazwa_licznika[2] + 1 = 2)
      2. 1.2 (nazwa_licznika[1] + 1 = 2)
        1. 1.2.1 (nazwa_licznika[3] + 1 = 1)
        2. 1.2.2 (nazwa_licznika[3] + 1 = 2)
    2. 2 (nazwa_licznika[0] + 1 = 2)
      1. 2.1 (nazwa_licznika[4] + 1 = 1)
        1. 2.1.1 (nazwa_licznika[5] + 1 = 1)
        2. 2.1.2 (nazwa_licznika[5] + 1 = 2)
      2. 2.2 (nazwa_licznika[4] + 1 = 2)
        1. 2.2.1 (nazwa_licznika[6] + 1 = 1)
        2. 2.2.2 (nazwa_licznika[6] + 1 = 2)
    Oprócz funkcji counters() istnieje również funkcja counter(), która działa bardzo podobnie, jednak przyjmuje jako argument jedynie nazwę identyfikatora licznika, a odczytuje tylko wartość aktualnego egzemplarza licznika, czyli pojedynczą liczbę. Użycie w powyższym przykładzie funkcji counter() zamiast counters(), spowodowałoby wyświetlenie wykazu numerowanego tradycyjnie:
  6. Punkt pierwszy (1.)
    1. Podpunkt pierwszy (1.)
      1. Podpunkt drugiego rzędu (1.)
      2. Podpunkt drugiego rzędu (2.)
    2. Podpunkt drugi (2.)
      1. Podpunkt drugiego rzędu (1.)
      2. Podpunkt drugiego rzędu (2.)
  7. Punkt drugi (2.)
    1. Podpunkt pierwszy (1.)
      1. Podpunkt drugiego rzędu (1.)
      2. Podpunkt drugiego rzędu (2.)
    2. Podpunkt drugi (2.)
      1. Podpunkt drugiego rzędu (1.)
      2. Podpunkt drugiego rzędu (2.)

Jakub B.