Stylizowanie list punktowanych i numerowanych
Listy definiowane w HTML to bardzo ważny element struktury dokumentu – znajdziemy je wszędzie: w menu nawigacyjnym, w spisach treści, w formularzach, w regulaminach i warunkach korzystania z usług, w regularnym tekście. Jednak aby nasze listy wyglądały estetycznie i czytelnie, musimy nauczyć się je stylizować za pomocą CSS. W tej lekcji skupimy się obu rodzajach list:
<ul>– lista nieuporządkowana (ang. unordered list)<ol>– lista uporządkowana (ang. ordered list)
Pokażemy, jak zmieniać wygląd wypunktowań i numeracji (w tym jak się pozbyć markera litsy), jak kontrolować wcięcia i odstępy, ustawić opływanie tekstu w itemach oraz jak korzystać z własnych obrazków jako znaczników list.
Jeżeli natomiast potrzebujesz powtórki na temat podjęcia decyzji kiedy użyć której listy w HTML, bądź w ogóle jak definiujemy listy w HTML, to najpierw zapoznaj się z lekcją: Listy punktowane i numerowane dostępną w sekcji HTML tego kursu.
Style wypunktowania listy <ul>
Domyślnie lista <ul> wyświetla każdy element <li> z wypunktowaniem w formie czarnej (“zamalowanej”) kropki. Za pomocą CSS możemy zmienić ten punktor (marker, bullet), korzystając z właściwości list-style-type. Oto dostępne rodzaje wypunktowania:
list-style-type: disc; /* wypełniona kropka – domyślna */ list-style-type: circle; /* pusta kropka */ list-style-type: square; /* kwadrat */ list-style-type: none; /* usunięcie wypunktowania */
Zobaczmy zrzut ekranu ukazujący wykorzystanie każdego rodzaju stylu:
Dodatkowo, gdy ustawimy list-style-type: none; to możemy dodać własne ikony (np. ze zbioru ikon Font Awesome) albo wypunktowanie obrazkowe. Zobaczmy najpierw przykład listy z własną ikonką Font Awesome:
.wlasna-lista {
list-style: none;
padding-left: 0;
}
.wlasna-lista li::before {
content: "✔";
color: green;
margin-right: 8px;
}
<ul class="wlasna-lista">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Teraz w przeglądarce każdy element na liście będzie wyróżniony zielonym “ptaszkiem” (czyli wybraną przez nas ikonką), zamiast klasycznego wypunktowania:
Oczywiście na egzaminie zawodowym – jako, iż nie mamy dostępu do internetu – nie skorzystamy raczej z “ikonkowej” czcionki Font Awesome. Natomiast możemy jako wartość wstawić dowolny inny znak z klawiatury (zamiast ikonki) albo zastosować własny obrazek – załóżmy, że chcemy wykorzystać plik marker-1.png w formacie PNG (wymiary to 25px na 15px) który wygląda tak:
Użycie tego obrazu jako punktora listy zrealizujemy następująco:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Lista z obrazkowym punktorem</title>
<style>
ul.obrazkowa-lista {
list-style-image: url("marker-1.png");
padding-left: 30px; /* dodatkowe wcięcie z lewej na obrazek */
}
</style>
</head>
<body>
<p>Lista z punktorami z obrazka:</p>
<ul class="obrazkowa-lista">
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
</ul>
</body>
</html>
Zrzut ekranu rezultatu w przeglądarce:
Style numerowania listy <ol>
Jak wiemy, lista <ol> wyświetla kolejne pozycje z numeracją – domyślnie są to liczby z cyframi arabskimi: 1, 2, 3… Lecz i to możemy zmienić! Oto dostępne rodzaje numeracji:
list-style-type: decimal; /* Klasyczne liczby arabskie: 1, 2, 3... */ list-style-type: decimal-leading-zero; /* Liczby z zerami wiodącymi: 01, 02, 03... */ list-style-type: lower-alpha; /* Małe litery alfabetu: a, b, c... */ list-style-type: upper-alpha; /* Wielkie litery alfabetu: A, B, C... */ list-style-type: lower-latin; /* Alias dla lower-alpha: a, b, c... */ list-style-type: upper-latin; /* Alias dla upper-alpha: A, B, C... */ list-style-type: lower-roman; /* Małe cyfry rzymskie: i, ii, iii... */ list-style-type: upper-roman; /* Wielkie cyfry rzymskie: I, II, III... */ list-style-type: armenian; /* Numeracja ormiańska */ list-style-type: georgian; /* Numeracja gruzińska */ list-style-type: cjk-ideographic; /* Chińskie ideogramy (symboliczne liczby) */ list-style-type: hiragana; /* Hiragana (japońska sylabariusz): あ, い, う... */ list-style-type: katakana; /* Katakana (japońska sylabariusz): ア, イ, ウ... */ list-style-type: hiragana-iroha; /* Hiragana w tradycyjnym porządku Iroha */ list-style-type: katakana-iroha; /* Katakana w porządku Iroha */ list-style-type: none; /* Brak numeracji */
Zobaczmy i tym zrzut ekranu ukazujący wykorzystanie każdego rodzaju stylu:
Oczywiście istnieje tych opcji bardzo dużo, lecz pamiętajmy o tym, iż numeracje “narodowe” są raczej rzadko stosowane. A ponadto, w edytorze Visual Studio Code dysponujemy dodatkiem Emmet (podpowiadanie składni), który po wpisaniu właściwości list-style-type: w ciele selektora listy <ol> bez problemu pokaże nam listę dostępnych numeracji. Nie trzeba więc na szczęście uczyć się tej długiej listy na pamięć!
Jak sprawić, aby tekst pozostawał “obok” punktora
Przeglądarka może zawijać zawartość tekstu w elemencie <li> listy, jeśli jest ona kilkuliniowa – natomiast często (z powodów czysto estetycznych) wolelibyśmy, aby punktor znajdował się na zewnątrz takiego tekstu. Czyli innymi słowy, gdybyśmy chcieli dokonać takiej oto zmiany:
Tekst zawijany na liście po lewej stronie niejako “ignoruje” obecność punktora. Natomiast lista po prawej wyrównuje tekst uwzględniając obecność markera. W CSS odpowiada za to właściwość listy o nazwie list-style-position, która może przyjmować dwie wartości:
ul {
list-style-position: outside;
}
ul {
list-style-position: inside;
}
Jest to logiczne – punktor albo jest częścią wewnętrzną tekstów albo ma zostać wyjęty na zewnątrz. Jednak najlepszą realizacją tej filozofii “wyjęcia” punktora na zewnątrz elementu listy jest w praktyce także dodatkowe wyzerowanie marginesu lewego dla listy oraz dodanie zamiast niego lewego paddingu (czyli “marginesu wewnętrznego”):
ul.estetyczna-lista {
list-style-position: outside;
padding-left: 1.5em;
margin-left: 0;
}
Warto znać tę sztuczkę, aby poprawnie realizować listy z punktorem na pewno wyjętym poza zawijany tekst.
Resetowanie marginu i paddingu
Listy domyślnie posiadają w przeglądarkach przypisane marginesy i wcięcia, dlatego bardzo często stosujemy “resetowanie” tych właściwości – ma to największy sens zwłaszcza w przypadku realizowania menu głównego jako listy. Resetowanie wygląda oczywiście dość prosto:
ul, ol {
margin: 0;
padding: 0;
}
Dzięki tej sztuczce zyskujemy pełniejszą kontrolę nad wyglądem i rozmieszczeniem elementów listy – szczególnie w menu nawigacyjnym. No właśnie – a jak zrealizować takie menu główne w postaci listy? Załóżmy, że chcemy dodać do witryny poziomą belkę nawigacyjną i oczywiście z powodów SEO zdefiniować opcje menu jako semantycznie powiązane ze sobą itemy listy.
Stylizacja górnej belki nawigacyjnej – lista “pozioma”
Stosunkowo często w projektowaniu stron internetowych chcemy stworzyć górną belkę nawigacyjną – menu główne serwisu, które znajduje się na samej górze części strony. Najbardziej klasyczne podejście polega na wykorzystaniu listy <ul>, której elementy <li> zawierają w sobie linki <a>. Najpierw w HTML definiujemy poszczególne opcje – to oczywiście zadanie trywialne:
<ul class="menu">
<li><a href="#">Strona główna</a></li>
<li><a href="#">Oferta</a></li>
<li><a href="#">O firmie</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
Natomiast zobaczmy teraz (opatrzone komentarzami) niezbędne do zrealizowanie belki właściwości CSS:
.menu {
list-style-type: none; /* usuwamy wypunktowanie */
margin: 0; /* reset marginesu całej listy */
padding: 0; /* reset paddingu całej listy */
background-color: #333; /* ciemne tło belki */
display: flex; /* ustawiamy elementy w jednej linii */
justify-content: center; /* wyśrodkowanie menu */
}
.menu li {
margin: 0; /* reset marginesu itemu listy */
}
.menu a {
display: block;
padding: 15px 25px; /* przestrzeń wewnątrz linków */
color: white; /* biały tekst */
text-decoration: none; /* usuwamy podkreślenie */
transition: background 0.3s; /* płynna zmiana koloru */
}
.menu a:hover {
background-color: #555; /* jaśniejsze tło przy najechaniu */
}
Zrzut ekranu tej belki nawigacyjnej w przeglądarce – po najechaniu kursorem dzięki selektorowi .menu a:hover następuje rozjaśnienie tła aktywnej opcji:
Dodatkowo, jeśli chcemy aby nasze menu było zawsze widoczne na górze ekranu, niezależnie od stopnia przewinięcia strony to możemy dopisać do klasy .menu także właściwości:
position: sticky; top: 0; z-index: 1000;
Dzięki temu górna belka będzie “przyklejona” do górnej krawędzi ekranu, nawet jeśli użytkownik przewinie stronę w dół.
Podsumowanie
Stylizowanie list w CSS to coś więcej niż tylko podmiana punktora. To również kontrola nad marginesami, wcięciami, ewentualnym układem poziomym, ikonami, numeracją oraz możliwością zbudowania nawigacji głównej serwisu – trzeba umieć z tego arsenału zabiegów świadomie skorzystać. Teraz jesteśmy już lepiej przygotowani w tym kontekście do egzaminu.