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.

Listy mają domyślny marginpadding nadawany przez przeglądarki. Jeśli chcesz zmienić którąś z tych właściwości, ustawiaj od razu obydwie (zarówno dla <ul>/<ol> jak i <li>!), aby domyślne ustawienia przeglądarki nie konfliktowały z Twoimi stylami.

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, circlesquare 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.


Zmodyfikowano: 07.11.2010, 08:06
submit