Listy są bez wątpienia ważnym elementem HTML. W tej lekcji dowiesz się jak modyfikować ich wygląd przy pomocy kodu CSS.

list-style-type

Jak wiesz, listy dzielą się na dwa rodzaje - numerowane (ol) i nienumerowane (ul). Wygląd obu możemy zmodyfikować przy pomocy właściwościlist-style-type. Każda lista jest wypunktowana kółkami lub np. liczbami,list-style-typezmienia właśnie styl wypunktowania listy. Na przykład kółka możemy zmienić na kwadraty, a cyfry arabskie na rzymskie.

Poniżej znajduje się lista z najpopularniejszymi dozwolonymi wartościami dla tej właściwości.

• circle- pusty okrąg;

• disc- wypełniony okrąg, domyślna wartość dla listy nienumerowanej;

• square- wypełniony kwadrat;

• decimal- liczby dziesiętne, zaczynając od 1;

• decimal-leading-zero- liczby dziesiętne, jeśli numer jest mniejszy od 10 to jest dodawane zero na początku;

• lower-alpha- małe litery ASCII;

• lower-latin- działa tak samo jaklower-alpha;

• lower-roman- małe cyfry rzymskie;

• lower-greek- małe litery z klasycznej greki (α, β, γ, …);

• upper-alpha- wielkie litery ASCII;

• upper-latin- działa tak samo jakupper-alpha;

• upper-roman- wielkie cyfry rzymskie;

• none- brak znacznika;

Uruchom poniższy przykład, aby zobaczyć efekt zastosowanialist-style-type. Oczywiście możesz również sam zmienić właściwość na jedną z powyższej listy.

<ol style="list-style-type: circle;">

<li>Elemenet 1</li>

<li>Elemenet 2</li>

<li>Elemenet 3</li>

</ol>

<ol style="list-style-type: decimal-leading-zero;">

<li>Elemenet 1</li>

<li>Elemenet 2</li>

<li>Elemenet 3</li>

</ol>

<ol style="list-style-type: lower-roman;">

<li>Elemenet 1</li>

<li>Elemenet 2</li>

<li>Elemenet 3</li>

</ol>

<ol style="list-style-type: upper-alpha;">

<li>Elemenet 1</li>

<li>Elemenet 2</li>

<li>Elemenet 3</li>

</ol>

Elemenet 1

1. Elemenet 2

2. Elemenet 3

3. Elemenet 1

4. Elemenet 2

5. Elemenet 3

6. Elemenet 1

7. Elemenet 2

8. Elemenet 3

9. Elemenet 1

10. Elemenet 2
11. Elemenet 3

list-style-image

Jeśli nie zadowalają Cię sposoby wypunktowania wymienione wyżej, to możesz dodać swoją własną grafikę, która będzie wyświetlana przed każdym elementem listy. Wystarczy, że do właściwościlist-style-imageprzekażesz wartośćurl('znacznik.gif')gdzie wurl()wpisujesz nazwę własnego pliku z grafiką. Oczywiście może to również być plik pochodzący z internetu.

Uruchom przykład

list-style-position

Domyślnie listy mają ustawiony margines wewnętrzny lewy, w moim przypadku ma on40pikseli. Właściwośćlist-style-positionustala gdzie mają znajdować się znaczniki list. Są dwie możliwości, albo znajdują się na marginesie, czyli poza właściwą zawartością:outside, albo znajdują się wewnątrz zawartości elementu:inside.

Uruchomienie poniższego przykładu na pewno rozjaśni Ci to zagadnienie. Aby lepiej zobrazować Ci działanie tej właściwości, elementom listy zostało przypisane szare tło.

Uruchom przykład

list-style

Właściwośćlist-stylejest skrótem ustawiania wartościlist-style-type,list-style-position,list-style-image. Nie musisz podawać wszystkich wartości, dla tych pominiętych zostaną użyte wartości domyślne.

Uruchom przykład

Zadanie 1

W tym zadaniu Twoim celem jest ustawienie stylu listy na wypunktowanie kwadratami oraz pozycji wypunktowania nainsidedla uporządkowanej listy.

Rozwiąż zadanie

Podsumowanie

W tej lekcji miałeś okazję dowiedzieć się jak zmodyfikować wygląd list przy pomocy CSS. Rozpoczęliśmy od określenia elementu znajdującego się przed każdą pozycją listy, następnie zobaczyłeś w jaki sposób użyć w tym miejscu własnego obrazka, a potem zajęliśmy się pozycją tego elementu. Na koniec poznałeś właściwośćlist-style, która pozwala w jednej linii określić właściwości poznane w tej lekcji.