Właściwości punktowanych list z CSS

kursy tutoriale

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



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ż

Nagłówki i podział tekstu w plikach stron WWW Podczas umieszczania tekstu na stronie internetowej bardzo istotne jest by tekst był odpowiednio sformatowany. Zadajcie sobie pytanie jakie teksty czy...
Rodzaje kursora myszy Czasami w celu uatrakcyjnienia witryny internetowej chcemy zmienić kształty kursora myszy. Nie potrzebujemy do tego wszędzie obecnego JS wystarczy nam...
Mieszanie kolorów z selektorem mix-blend-mode Właściwość CSS mix-blend-mode określa sposób łączenia się ze sobą elementu nadrzędnego np. obrazka z tłem umieszczonym pod nim. Efekt końcowy jest pod...
Wyśrodkowanie zawartości kolumn względem siebie na... Dziś zajmiemy się w ostatnich czasach bardzo popularnym problemem czyli wyśrodkowaniem w pionie względem siebie zawartości dwóch lub większej ilości k...

Dodaj komentarz

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