W poprzednim rozdziale stworzyliśmy ramową strukturę naszej strony głównej na bazie semantycznych elementów HTML5, ale utknęliśmy na menu nawigacyjnym, które chcielibyśmy oprzeć na liście nieuporządkowanej. Niestety jeszcze nie umiemy tworzyć list, więc w tym rozdziale nadrobimy tę drobną zaległość.

Listy w HTML dzielą się na cztery rodzaje: listy uporządkowane lub listy numerowane HTML (ang. ordered list – element ol), listy nieuporządkowane lub listy punktowane HTML(ang. unordered list – element ul), listy definicji (ang. dscription list – element dl) oraz listy reprezentujące paski narzędzi (menu).

Do tworzenia menu nawigacyjnych używa się list nieuporządkowanych, ale skoro już jesteśmy przy temacie tych struktur, to przyjrzymy się im wszystkim.

Listy uporządkowane HTML (listy numerowane HTML)

Listy uporządkowane HTML (listy numerowane HTML) to takie, w których kolejność pozycji jest w jakiś sposób określona. Domyślnie przeglądarki stosują numerację liczbową, zaczynającą się od 1.

Do tworzenia list uporządkowanych służy element ol, który może zawierać dowolną liczbę pozycji oznaczonych elementem li (ang. list item), np.:

<ol>
    <li>Przejdź na dysk C</li>
    <li>Otwórz folder Windows</li>
    <li>Znajdź i zaznacz plik explorer.exe</li>
    <li>Naciśnij klawisz Del</li>
</ol>

Domyślnie w oknie przeglądarki internetowej ta lista wyglądałaby tak:

W tym przypadku została zastosowana domyślna numeracja pozycji listy, ale na końcu tego rozdziału dowiesz się, jak za pomocą CSS zmienić tę i różne inne właściwości tych elementów.

Drugi rodzaj list HTML to listy nieuporządkowane.

Listy nieuporządkowane (listy punktowane HTML)

Listy nieuporządkowane HTML (listy punktowane HTML) nie numerują elementów, tylko oznaczają je w inny sposób. Domyślnie przeglądarki stosują okrągłe czarne punktory.

Do tworzenia list nieuporządkowanych służy element ul, który może zawierać dowolną liczbę elementów li, np.:

<ul>
  <li>jabłka</li>
  <li>kapusta</li>
  <li>kalafior</li>
  <li>sałata</li>
</ul>

Domyślnie w oknie przeglądarki internetowej ta lista wyglądałaby tak:

Rodzaj punktora i parę innych ustawień list nieuporządkowanych można zmienić za pomocą CSS, o czym jest mowa na końcu tego rozdziału.

Listy definicji

Listy definicji HTML przedstawiają w sposób powiązany ze sobą pojęcia i ich definicje lub opisy.

Listę definicji reprezentuje element dl (ang. definition list). Definiowane pojęcia umieszczamy w elementach dt (ang. definition term), a definicje pojęć – w elementach dd (and. description details), np.:

<dl>
  <dt>Pies</dt>
  <dd>- zwierzę czworonożne</dd>
  <dt>Jabłko</dt>
  <dd>- smaczny owoc</dd>
  <dt>Ziemniak</dt>
  <dd>- smaczne warzywo</dd>
  <dt>Świnia</dt>
  <dd>- smaczne zwierzę</dd>
</dl>

Domyślnie przeglądarki stosują wcięcie elementów reprezentujących definicje, ale można to zmienić za pomocą odpowiednich reguł CSS. Powyższa lista w oknie przeglądarki internetowej wyglądałaby tak:

Pozostał nam do omówienia ostatni rodzaj list, służący do tworzenia pasków narzędzi.

Paski narzędzi

Ostatni rodzaj listy jest dość nietypowy, ponieważ staje się użyteczny tylko w połączeniu z JavaScriptem. Do jego oznaczania służy element menu, który może zawierać dowolną liczbę elementów li.

Technicznie rzecz biorąc, jest to lista nieuporządkowana reprezentująca elementy paska narzędzi (ang. toolbar). Jak wiadomo paski te zawierają polecenia, których kliknięcie powoduje wykonanie pewnych czynności. Te czynności muszą być zdefiniowane w języku programowania, najczęściej w JavaScripcie.

Poniżej znajduje się przykład definicji fragmentu paska narzędzi w HTML, któremu powinien towarzyszyć odpowiedni skrypt JavaScript:

<menu>
  <li>Kopiuj</li>
  <li>Wytnij</li>
  <li>Wklej</li>
</menu>

Bez odpowiednich arkuszy stylów przeglądarka przedstawi ten element tak, jak listę nieuporządkowaną:

Wszystkie powyższe przykłady list były bardzo proste, ale w razie potrzeby można tworzyć bardzo rozbudowane listy, a nawet można je zagnieżdżać.

Listy zagnieżdżone HTML

Listy zagnieżdżone HTML można tworzyć przez umieszczenie listy dowolnego typu w innej liście dowolnego typu, np.:

<ul>
  <li>Ssaki
    <ul>
      <li>Gryzonie</li>
      <li>Jamrajokształtne</li>
      <li>...</li>
    </ul>
  </li>
  <li>Gady</li>
  <li>Płazy</li>
</ul>

Powyższa lista w przeglądarce wyglądałaby tak:

Jak widać, przeglądarka automatycznie zastosowała inny typ punktora do oznaczania punktów listy zagnieżdżonej.

Nie musimy jednak polegać na domyślnych ustawieniach przeglądarek. Jeśli mamy taką potrzebę, za pomocą CSS możemy dowolnie zmienić praktycznie wszystkie ustawienia listy.

Praca z listami przy użyciu CSS

Listy są normalnymi elementami HTML, więc można je formatować za pomocą wszystkich własności CSS odnoszących się do tekstu, formatowania wizualnego itd., ale dodatkowo istnieją trzy własności CSS przeznaczone specjalnie dla list:

• list-style-type – określa typ markera elementów listy
• list-style-position – określa położenie markerów
• list-style-image – określa obraz służący za marker elementów listy

Określanie typu markera listy

Własność list-style-type umożliwia wybór innego markera niż standardowy. Do wyboru jest bardzo dużo ustawień. Poniższa tabela przedstawia kilka najczęściej używanych:

Dodatkowo dostępnych jest wiele „egzotycznych ustawień” z różnych alfabetów świata. Istnieje na przykład wartość hiragana włączająca oznaczanie literami alfabetu japońskiego albo wartość telugu oznaczająca alfabet języka telugu. Jeśli masz ochotę, możesz je wypróbować.

Poniżej znajduje się przykładowa lista numerowana liczbami rzymskimi w postaci wielkich liter:

<ul style="list-style-type: upper-roman">
  <li>jabłka</li>
  <li>kapusta</li>
  <li>kalafior</li>
  <li>sałata</li>
</ul>

Ta lista w przeglądarce wygląda tak:

Zwróć uwagę w powyższym kodzie, że za pomocą CSS można nawet „zmienić typ listy”. Mimo że użyliśmy elementu ul, oznaczającego listę nieuporządkowaną, to nadaliśmy jej numerowanie właściwe listom uporządkowanym.

Kiedy już zdefiniujemy rodzaj markera, możemy określić jego położenie za pomocą własności list-style-position.

Określanie położenia markera

Własność list-style-position pozwala określić, czy marker elementu listy ma znajdować się w obrębie tego elementu, czy na zewnątrz niego. Dostępne są dwie wartości: inside (wewnątrz) i outside (na zewnątrz). Poniższy rysunek przedstawia różnicę między tymi dwoma ustawieniami:

Jeśli żaden ze standardowych markerów nie spełnia Twoich oczekiwań, możesz użyć dowolnego obrazu graficznego i ustawić go jako marker za pomocą własności list-style-image.

Określanie obrazu jako markera

Własność list-style-image umożliwia ustawienie dowolnego obrazu jako markera elementu listy HTML. Jako wartość przyjmuje oczywiście ścieżkę do pliku graficznego albo funkcję CSS linear-gradient, za pomocą której można utworzyć gradient liniowy.

Ścieżki do plików graficznych nie są nam już obce, więc nie będziemy się nad nimi rozwodzić. Zatrzymamy się natomiast na bardzo krótką chwilę nad funkcją linear-gradient. Jest ona dość rozbudowana i ma wiele opcji, których na razie nie mamy potrzeby poznawać, dlatego poznamy ją tylko w najprostszym możliwym zakresie.

Aby zdefiniować prosty gradient (płynne przejście między kolorami) za pomocą funkcji CSS linear-gradient, wystarczy po prostu wpisać nazwy tych kolorów (albo wyrazić je w dowolnej jednostce obsługiwanej przez CSS) w nawiasie za nazwą tej funkcji, np.:

linear-gradient(blue, red, green, yellow);

Ta funkcja definiuje gradient, który płynnie przechodzi z niebieskiego w czerwony, następnie w zielony i w końcu w żółty kolor. Poniżej widać efekt jej działania:

Znasz już wszystkie własności CSS służące do pracy z listami HTML, więc postanawiasz zmienić kolor markerów elementów swojej listy. I okazuje się, że się nie da… Tak naprawdę się da, tylko trzeba znać pseudoelement CSS ::marker.

Pseudoelement ::marker

Pseudoelement CSS ::marker umożliwia odnoszenie się bezpośrednio do samego punktora lub numeru elementu listy. Ma on pewne ograniczenia, ale można do niego stosować m.in. wszystkie własności czcionki i własność color. Na przykład poniższa deklaracja zmienia kolor punktora lub numeracji wszystkich elementów li na zielony:

li::marker {color: green}

Po tym zwięzłym wprowadzeniu do list możemy przejść do stylizacji naszej strony głównej, na której chcemy umieścić menu nawigacyjne. Zbudujemy je w formie listy nieuporządkowanej, ale zajmiemy się tym już w następnym rozdziale.

Podsumowanie

• W HTML5 dostępne są cztery rodzaje list: nieuporządkowane (elementy ul i li), uporządkowane (elementy ol i li), definicji (elementy dl, dd i dt) oraz menu poleceń (elementy menu i li).
• Listy można dowolnie zagnieżdżać.
• Własność CSS list-style-type określa rodzaj markera elementów listy.
• Własność CSS list-style-position określa położenie markera elementów listy.
• Własność CSS list-style-image określa obraz używany jako marker elementów listy.
• Własność CSS list-style to własność zbiorcza umożliwiająca ustawienie wszystkich trzech powyższych własności w jednej deklaracji.
• Pseudoelement ::marker umożliwia odnoszenie się do samego markera elementów listy.

Ćwiczenia

1. Utwórz niewielki obraz w edytorze Paint.NET i ustaw go jako marker elementów listy.

2. Utwórz taką listę, jak poniższa (nie używaj stylów śródliniowych, klas ani identyfikatorów):

   
3. Zdefiniuj dowolny gradient jako marker elementów listy.