Właściwości punktowanych list z CSS

kursy tutoriale

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


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

Reading Time: 2 minutes

O tym jak w HTML stworzyć wypunktowaną listę pisałam już w jednym z wcześniejszych wpisów. Były to oczywiście proste punktowane lub numerowane listy tym razem chcę pójść o krok dalej i okazać jakie właściwości CSS mogą mogą być użyte do ich formatowania.

Położenie znacznika wypunktowania

Używając określenia znacznik wypunktowania mam na myśli np. kropkę dzięki której lista wyróżnia się na tle całej strony. Z pomocą list-style-position możemy manipulować jej położeniem.

list-style-position posiada kilka ustawień przeważnie jednak korzysta się z:

  • inside – w środku
  • outside – na zewnątrz

np.

inside – lista list-style-position: inside;

  • lista z inside
  • lista z inside
  • lista z inside
  • lista z inside
outside – lista list-style-position: outside;

  • punkt z outside
  • lista z outside
  • punkt z outside
  • lista z outside

Dużo lepiej różnica między listami będzie widoczna po dodaniu obramowania
np.

inside – lista

  • lista z inside
  • lista z inside
  • lista z inside
  • lista z inside
outside – lista

  • lista z outside
  • lista z outside
  • lista z outside
  • lista z outside

 

Jak usunąć widoczne wypunktowanie?

Usuwanie wypunktowania jest dość proste:

  • lista z bez punktu
  • lista z bez punktu
  • lista z bez punktu
  • lista z bez punktu

W HTML:

Zapytacie do czego nam wypunktowana lista bez punktu? Taka lista świetnie nada się np. do zbudowania prostego rozwijanego menu.

Kolorowanie tła pod listą

Wypunktowana lista może mieć również bardzo ciekawe tło. Kolorować możemy nie tylko całą listę, ale również pojedyncze elementy czyli li

  • lista z bez punktu
  • lista z bez punktu
  • lista z bez punktu
  • lista z bez punktu

Kod CSS:

To oczywiście nie wszystko co możemy zrobić z wypunktowanymi listami, jednak omówienie np. jak zmienić kolor punku zostawię sobie na kolejny wpis.
 

Przeczytaj również

Dodaj komentarz

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