Lista wypunktowana – HTML/CSS

Czas czytania: < 1 minut

Jednym z najczęściej występujących na stronach internetowych elementów jest wypunktowana 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 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ą i drugą numerowaną. Struktura obu list jest bardzo do siebie zbliżona. Obu list elementy umieszczone są pomiędzy znacznikami <li>. Jednak używamy innego znacznika do otwierania czyli:

  • <ul> – punktowana lista
  • <ol> – numerowana lista

Jak zmienić wygląd wypunktowanej listy

Poprzednie dwa typy były domyślne czyli w praktyce kształt punktu dobiera za nas przeglądarka internetowa. Oczywiście nie jesteśmy ograniczeni tylko do tego typu wypunktowania. Z pomocą CSS a konkretnie list-style-type lub list-style możemy manipulować wyglądem listy.

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


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