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 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 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
- <ol> – numerowana lista
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
Jeśli chcesz dowiedzieć się czegoś więcej koniecznie zajrzyj do poniższych wpisów!
