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ą pseudoelementó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.02.2008, 13:08