22. Listy HTML

> Dodaj do ulubionych

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:

Lista uporz─ůdkowana (ol, li) bez styl├│w

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─ů:

Lista punktowana reprezentuj─ůca menu

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:

Przykład zagnieżdżania list

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
circlePusty okr─ůg
decimalLiczba dziesi─Ötna, zaczynaj─ůc od 1
decimal-leading-zeroLiczba dziesi─Ötna z wiod─ůcymi zerami
discKo┼éo wype┼énione kolorem (warto┼Ť─ç domy┼Ťlna)
lower-alpha, lower-latinMałe litery alfabetu łacińskiego
lower-greekMałe litery alfabetu greckiego
lower-romanLiczby rzymskie w postaci małych liter
squareKwadrat
upper-alpha, upper-latinWielkie litery alfabetu łacińskiego
upper-romanLiczby 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:

Lista numerowana liczbami rzymskimi

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:

Dwa rodzaje położenia punktorów listy

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:

Prosty gradient liniowy w CSS

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

Sum
  • 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.
Ilustracje ćwiczeń

─ćwiczenia

  1. Utw├│rz niewielki obraz w edytorze Paint.NET i ustaw go jako punktor element├│w listy.
  2. Utw├│rz tak─ů list─Ö, jak poni┼╝sza (nie u┼╝ywaj styl├│w ┼Ťr├│dliniowych, klas ani identyfikator├│w):

    Lista zagnie┼╝d┼╝ona do ─çwiczenia
  3. Zdefiniuj dowolny gradient jako punktor element├│w listy.