Lista wypunktowana i numerowana – HTML/CSS
Jednym z najczęściej występujących na stronach internetowych elementów jest wypunktowana (punktowana, punktory) lista.
Występuje ona praktycznie na każdej stronie, choć nie koniecznie jest ona widoczna na pierwszy rzut oka. Bardzo często z jej pomocą tworzone są menu nawigacyjne. Oczywiście są one w tedy odpowiedni zmodyfikowane i nie przypominają zwykłej listy.
Co znajdziesz w tym wpisie
Przykładowe domyślne punktowane <ul> i numerowane <ol> listy
Najczęściej lista wypunktowana kojarzy nam się nam z:
See the Pen lista by Aura (@Julka85) on CodePen.dark
Jak widać mamy tu dwie listy jedną wypunktowaną (nieuporządkowaną) i drugą numerowaną (uporządkowaną). Struktura HTML obu list jest bardzo do siebie zbliżona. Pojedyncze elementy obu list umieszczone są pomiędzy znacznikami <li>. Każda z nich jednak używamy innego otwierającego znacznika konkretnie:
- <ul> – punktowana lista (zaczynająca się od kropki)
- <ol> – numerowana lista (zamiast kropki mamy cyfrę)
Przykładowa lista punktowana HTML
<ul> <li>Punkt</li> <li>Punkt</li> <li>Punkt</li> <li>Punkt</li> </ul>
Przykładowa lista numerowana HTML
<ol> <li>Punkt</li> <li>Punkt</li> <li>Punkt</li> <li>Punkt</li> </ol>
Listy zagnieżdżone
Struktura listy zagnieżdżonej czyli takiej, której elementy posiadają podpunkty uzyskujemy poprzez utworzenie kolejnej listy w podpunkcie (jedna lista w drugiej). Czyli praktycznie pomiędzy znacznikami <li></li> dodajemy kolejną listę np.:
<ul> <li>Punkt</li> <li>Punkt <ul> <li>podpunkt</li> <li>podpunkt</li> </ul> </li> <li>Punkt</li> <li>Punkt</li> </ul>
Jak zmienić wygląd wypunktowanej listy
Poprzednie dwa typy list, były ustawione domyślne. Oznacza to, że sposób w jaki zostały wyświetlone zależał w praktyce od ustawień przeglądarki internetowej. W praktyce oznacza to, że np. w przypadku punktowanej listy kropka przed każdym elementem może mieć nieco inny kształt w niektórych przeglądarkach (a czasem nie być nawet kropką).
My jednak mieliśmy w tym monecie zająć się modyfikacją wyglądu naszej listy a nie rozważać, jak w dziwny sposób może ona zostać zinterpretowana. W kwestii modyfikacji przyjdzie nam z pomocą CSS (w HTML możemy wybrać jedynie typ listy). Konkretnie chodzi o właściwości list-style-type lub list-style dzięki nim możemy manipulować wyglądem listy.
Poniższe przykłady pokazują jedynie najprostsze metody modyfikowania sposobu wyświetlania. Jeśli chcecie ustawić np. inny kolor lub obrazek zajrzyjcie tutaj.
See the Pen punkt by Aura (@Julka85) on CodePen.dark
rodzaje punktow listy wypunktowanej html
Jeśli chcesz dowiedzieć się czegoś więcej koniecznie zajrzyj do poniższych wpisów!