Lista wypunktowana i numerowana – HTML/CSS

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.

Lista numerowana <ul> i numerowane <ol> w html

Najczęściej lista wypunktowana kojarzy nam się nam z:

See the Pen lista by Aura (@Julka85) on CodePen.

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 (z podpunktami)

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?!

Wygląd list, które do tej pory omówiłam zależał od ustawień naszej 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.

rodzaje punktow listy wypunktowanej html


Jeśli chcesz dowiedzieć się czegoś więcej koniecznie zajrzyj do poniższych wpisów!