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/nazwa-pliku.jpg); }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 { color: leaf; font-size: 2.0em; font-weight: bold; font-style: italic; }
Przykład
- Jeden
- Dwa
- Trzy