3

kurs

css

Lekcja 15: Lista

css

W kursie html przygotowaliśmy listę, teraz czas by w nadać jej styl w css.

Rodzaj listy

Nieuporządkowana

  • Jeden
  • Dwa
  • Trzy

Uporządkowana

  • Jeden
  • Dwa
  • Trzy

Typ wypunktowania

W zależności od potrzeb możemy nadać liście różny typ wypunktowania. Styl listy ustalamy za pomocą list-style-type.

selektor { list-style-type: wartość; }

Dla listy nieuporządkowanej:

  • disc
ul { list-style-type: disc; }
Przykład
  • Jeden
  • Dwa
  • Trzy
  • circle
ul { list-style-type: circle; }
Przykład
  • Jeden
  • Dwa
  • Trzy
  • square
ul { list-style-type: square; }
Przykład
  • Jeden
  • Dwa
  • Trzy

Dla listy uporządkowanej:

  • decimal
ul { list-style-type: decimal; }
Przykład
  • Jeden
  • Dwa
  • Trzy
  • lower-alpha
ul { list-style-type: lower-alpha; }
Przykład
  • Jeden
  • Dwa
  • Trzy
  • upper-alpha
ul { list-style-type: upper-alpha; }
Przykład
  • Jeden
  • Dwa
  • Trzy
  • lower-roman
ul { list-style-type: lower-roman; }
Przykład
  • Jeden
  • Dwa
  • Trzy
  • upper-roman
ul { list-style-type: upper-roman; }
Przykład
  • Jeden
  • Dwa
  • Trzy

Obrazek jako wypunktowanie

Obrazek do listy dodajemy za pomocą list-style-type.

selektor { list-style-image: wartość; }
ul { list-style-image: url(../images/wyslane.png); }
Przykład
  • Jeden
  • Dwa
  • Trzy

Wygląd listy

Znacznik listy li możemy formatować również przy pomocy właściwości określających kolor czcionki, typ, grubość, styl, itd.

ul li { color: leaf; font-size: 2.0em; font-weight: bold; font-style: italic; }

Przykład
  • Jeden
  • Dwa
  • Trzy
comments powered by Disqus

Do góry