Lista wypunktowana i numerowana – HTML/CSS

W HTML mamy praktycznie 2 rodzaje list -> listę wypunktowaną i listę numerowaną. Jednak to z tą pierwszą będziesz mieć najczęściej do czynienia. Lista wypunktowana (punktowana, punktory) jest bowiem jednym z najczęściej stosowanych elementów na stronach internetowych.

Występuje ona praktycznie na każdej stronie, choć nie koniecznie jest ona widoczna na pierwszy rzut oka. Spowodowane jest to faktem, że to z jej pomocą tworzone są menu nawigacyjne witryn internetowych. Oczywiście są one w tedy odpowiedni zmodyfikowane i nie przypominają zwykłej listy.

Lista wypunktowana <ul> i numerowana <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ę zwykle od kropki),
• <ol> – numerowana lista (zamiast kropki mamy cyfrę),
• <li> – element listy.

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!

• Jak zmienić kolor punktu wypunktowanej listy
• Nagłowki podział tekstu plikach stron www
• Rozwijane poziome menu w CSS i HTML
• Pseudo-elementy CSS before i after