Kurs HTML i CSS - Listy HTML

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ść.

W języku HTML dostępne są cztery rodzaje list : listy uporządkowane (ang. ordered list – element ol), listy nieuporządkowane (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

Listy uporządkowane 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 nieuporządkowane 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:

Lista nieuporządkowana (ul, li) bez stylów

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:

Przykładowa lista definicji (dl, dt, dd) HTML bez stylów

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

Zagnieżdżanie list

Listy można zagnieżdżać, tzn. można umieszczać listy dowolnego typu w innych listach 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.

Stylizacja list

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 punktora elementów listy
list-style-position – określa położenie punktorów
list-style-image – określa obraz służący za punktor elementów listy

Własność list-style-type

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

Wartość	Opis
`circle`	Pusty okrąg
`decimal`	Liczba dziesiętna, zaczynając od 1
`decimal-leading-zero`	Liczba dziesiętna z wiodącymi zerami
`disc`	Koło wypełnione kolorem (wartość domyślna)
`lower-alpha`, `lower-latin`	Małe litery alfabetu łacińskiego
`lower-greek`	Małe litery alfabetu greckiego
`lower-roman`	Liczby rzymskie w postaci małych liter
`square`	Kwadrat
`upper-alpha`, `upper-latin`	Wielkie litery alfabetu łacińskiego
`upper-roman`	Liczby rzymskie w postaci wielkich liter

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 punktora, możemy określić jego położenie za pomocą własności list-style-position.

Własność list-style-position

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 punktorów nie spełnia Twoich oczekiwań, możesz użyć dowolnego obrazu graficznego i ustawić go jako punktor za pomocą własności list-style-image.

Własność list-style-image

Własność list-style-image umożliwia ustawienie dowolnego obrazu jako punktora 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 punktoró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 ::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 punktora elementów listy.
Własność CSS list-style-position określa położenie punktora elementów listy.
Własność CSS list-style-image określa obraz używany jako punktor 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 ::mark umożliwia odnoszenie się do samego punktora elementów listy.

Ćwiczenia

Utwórz niewielki obraz w edytorze Paint.NET i ustaw go jako punktor elementów listy.
Utwórz taką listę, jak poniższa (nie używaj stylów śródliniowych, klas ani identyfikatorów):
Zdefiniuj dowolny gradient jako punktor elementów listy.

Struktura strony HTML5 Kurs HTML i CSS Stylizacja strony głównej