Jak zmienić kolor punktu wypunktowanej listy na stronie internetowej!

Kategoria wpisu Kursy, PHP, HTML, CSS Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 2 minutes

Zmiana koloru wypunktowania listy stworzonej w HTML  jest bardzo prosta. Osobiście znam 3 sposoby na jej utworzenie. Przy czym nie koniecznie każda z tych metod jest tak naprawdę praktyczna w zastosowaniu na stronach internetowych. Na początek warto zapoznać się z kilkoma podstawowymi elementami takimi jak punktowane listy oraz pseudo elementy :before i :after.

Zmiana koloru wypunktowania z pseudo elementem

Powyżej zamieściłam już link do pseudo elementów warto się z nim zapoznać jeśli nie posiadamy na ten temat wiedzy.

  • pierwszy kolorowy punkt
  • drugi kolorowy punkt
  • trzeci kolorowy punkt

Style CSS opisujące jak uzyskać efekt znajdziecie poniżej:

Zmiana koloru punktu z pomocą obrazka

W tym wypadku rolę punku odegra grafika umieszczona w tle. Ważnym aspektem w tej metodzie jest użycie odpowiedniego obrazka. Nie może być on specjale ani za duży ani za mały.

  • pierwszy kolorowy punkt
  • drugi kolorowy punkt
  • trzeci kolorowy punkt

Style do listy:

Dokładniejsze szczegóły CSS ustala się z pomocą dobrze ustawionego padding. Jego wartość powinna być dostosowana do konkretnego obrazka oraz naszych potrzeb.

Zmiana koloru z pomocą span

Ta metoda w praktyce polega na zabawie kolorami.

  • pierwszy kolorowy punkt
  • drugi kolorowy punkt
  • trzeci kolorowy punkt

Kod HTML – jak pokazane zostało poniżej nasz tekst został umieszczony dodatkowo w <span> bez niego tekst miał by taki sam kolor jak punkt:

Style CSS

Metoda ta jest najmniej praktyczna. Korzystając z niej sami musimy pilnować wstawiania dodatkowego znacznika – co może okazać się bardzo irytujące. A w przypadku jego pominięcia cały tekst zabarwi się na czerwono.

Podsumowanie

Jak widać na powyższych przykładach istnieje kilka sposobów na stworzenie ciekawej wypunktowanej listy.

W praktyce to z jakiej metody będziecie korzystać zależy tylko od was. Z pewnością jednak dwie pierwsze są najbardziej wygodne w użytkowaniu. Po wprowadzeniu do styli strony odpowiedniej zmiennej wygląd wypunktowania będzie się ustawiał sam bez naszej interwencji.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *