Style list
Style list przeznaczone są dla elementów mających display:list-item
. Teoretycznie może to być dowolny element, ale w praktyce wykorzystuje się je tylko do elementów list XHTML, czyli <li>
.
Dzięki dziedziczeniu jeśli zaaplikuje się te właściwości elementom <ul>
lub <ol>
, to automatycznie zadziałają na wszystkie <li>
w nich.
Skrócony zapis: list-style
Najlepiej jest używać skróconego zapisu do nadawania poniższych właściwości. list-style
przyjmuje wartości wszystkich (nie koniecznie na raz) poniższych właściwości w dowolnej
kolejności.
Rodzaj wypunktowania: list-style-type
Najczęściej używaną wartością jest none
usuwające wypunktowanie z listy (zobacz tworzenie menu).
Inne właściwości to disc
, circle
i square
nadające wypunktowaniu kształt odpowiednio dysku, koła lub kwadratu.
Wypunktowania list numerowanych mogą być dziesiętne (decimal
), rzymskie (upper-roman
) literami alfabetu łacińskiego (lower-alpha
) lub greckiego
(lower-greek
).
Zamiast używać list-style
możesz tworzyć własne wypunktowania za pomocą pseudo-elementów i właściwości
content
Jeśli chcesz użyć bardziej skomplikowanej numeracji, zobacz generowane liczniki?.
Graficzne wypunktowanie: list-style-image
Ta właściwość pozwala w prosty sposób użyć grafiki do wypunktowania listy. Można ją używać wraz z list-style-type
, które będzie widoczne tylko gdy przeglądarka nie może wyświetlić
grafiki.
li {list-style: disc url(kropka.png);}
Sposób umieszczenia wypunktowania: list-style-position
-
outside
- jest domyślną wartością — wypunktowanie będzie wystawało z boku poza listę, a tekst wszystkich punktów będzie miał takie samo wcięcie.
-
inside
- przeniesie wypunktowanie do wnętrza listy, odsuwając tekst w pierwszej linii każdego elementu listy.
Ta właściwość nie daje kontroli nad pozycją grafiki względem listy. W praktyce lepiej użyć pozycjonowanej grafiki tła oraz padding
.
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 10.12.2006, 17:11