EDYCJA LISTY
Listę w HTML tworzy się za pomocą tagów ul lub ol. Wewnątrz nich znajdują się li. Te znaczniki mają swoje domyślne style, np. kropkę po lewej stronie, padding, margin czy pozycję. Cechy przypisane do listy można łatwo zamienić na takie, które pasują do wyglądu strony.
PUNKTORY
Cechą, która odpowiada za edycję punktora jest list-style-type.
Podstawowe wartości:
- none – nie ma żadnego punktora,
- disc – jest to wartość domyślna czyli czarne kółko,
- circle – okrąg bez wypełnienia,
- square – czarny kwadrat.
Pozostałe wartości list-style-type:
- decimal – lista jest numerowana,
- decimal-leading-zero – lista numerowana: 01, 02, 03, 04…,
- lower-alpha – małe litery: a, b, c, d…,
- upper-alpha – duże litery: A, B, C, D…,
- upper-roman – duże rzymskie cyfry: I, II, III itd.
POZYCJA PUNKTORA
Pozycję określa cecha list-style-position. Możliwe wartości:
- outside – jest to wartość domyślna, punktor jest poza znacznikiem
<li>, - inside – punktor jest w środku znacznika
<li>.
PUNKTOR JAKO ZDJĘCIE
Punktor można także wstawić z zewnątrz. Może to być dowolne zdjęcie lub grafika. Możliwe wartości:
- none – jest to wartość domyślna,
- url – określa ścieżkę do pliku, który zamieszczamy w miejscu punktora.
list-style-image: url(smile.gif);
LIST-STYLE
Wszystkie wartości, które omówiłam wyżej można zamieścić w list-style. Optymalizujemy w ten sposób kod css. Poniżej przedstawiam kolejność:
list-style: list-style-type list-style-position list-style-image;
np.
list-style: circle inside url("smile.gif");.