HTML

LISTY HTML

W HTML istnieją dwa główne typy list:

• listy nieuporządkowane (<ul>) - pozycje listy są oznaczone punktorami
• listy uporządkowane (<ol>) - pozycje listy oznaczane są cyframi lub literami

CSS

WŁAŚCIWOŚCI LISTY CSS

Właściwości listy CSS umożliwiają:

• Ustawianie różnych znaczników pozycji listy dla uporządkowanych list
• Ustawianie różnych znaczników elementów listy dla nieuporządkowanych list
• Ustawianie obrazów jako znacznika elementu listy
• Dodawanie kolorów tła do list i elementów list

RÓŻNE ZNACZNIKI POZYCJI LISTY

Definicja: Właściwość list-style-type określa typ znacznika elementu listy.

Przykład:

• Kawa
• Herbata
• Coca Cola

Kod: ul.ul1 {list-style-type: square;}

OBRAZ JAKO ZNACZNIK ELEMENTU LISTY

Definicja: Właściwość list-style-image określa obraz jako znacznik elementu listy.

Przykład:

• Kawa
• Herbata
• Coca Cola

Kod: ul.ul2 {list-style-image: url('sqpurple.gif');}

UMIEŚĆ ZNACZNIKI POZYCJI LISTY

Definicja: Właściwość list-style-position określa położenie znaczników elementów listy (punktów).

"list-style-position: outside;" oznacza, że ​​punktory będą znajdować się poza elementem listy. Początek każdego wiersza elementu listy zostanie wyrównany w pionie. To jest ustawione domyślnie.

Przykład:

• Kawa
• Herbata
• Coca Cola

Kod: ul.ul3 {list-style-position: inside;}

"list-style-position: inside;" oznacza, że ​​punktory będą znajdować się wewnątrz elementu listy. Ponieważ jest częścią elementu listy, będzie częścią tekstu i popchnie tekst na początku.

• Kawa
• Herbata
• Coca Cola

Kod: ul.ul4 {list-style-position: outside;}

LISTA - WŁASNOŚĆ SKRÓCONA

Definicja: Właściwość list-style jest własnością skróconą. Służy do ustawienia wszystkich właściwości listy w jednej deklaracji.

W przypadku korzystania z właściwości skróconej kolejność wartości właściwości jest następująca:

• list-style-type (jeśli określony jest obraz w stylu listy, wartość tej właściwości zostanie wyświetlona, ​​jeśli obraz z jakiegoś powodu nie może zostać wyświetlony)
• list-style-position (określa, czy znaczniki elementów listy powinny pojawiać się wewnątrz lub na zewnątrz przepływu zawartości)
• list-style-image (określa obraz jako znacznik elementu listy)

Przykład:

• Kawa
• Herbata
• Coca Cola

Kod: ul.ul5 {list-style: square inside url("sqpurple.gif");}