|

Lista wypunktowana i numerowana
    – HTML/CSS

przezAurelia Sypniewska
Czas czytania: 2 minut

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.

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!