Listy w CSS3

Właściwości list

Typ listy
list-style-type:
counter-style *	string ^CSS3	none;
upper-roman; upper-roman; upper-roman;	np. ' — '; np. ' — '; np. ' — ';	none; none; none;

*) counter-style (CSS 2.1) = {disc;, circle;, square;, decimal;, decimal-leading-zero;, lower-roman;, upper-roman;, lower-greek;, lower-latin;, upper-latin;, armenian;, georgian;, lower-alpha;, upper-alpha;}

Punktor graficzny
list-style-image:
none;	image
none; none;	url(punktor.gif); url(punktor.gif);

Pozycja punktora
list-style-position:
inside;	outside;
inside inside inside inside inside inside inside inside inside inside	outside outside outside outside outside outside outside outside outside outside

Formatowanie list

Skrócone właściwości
list-style:
[list-style-type:] \|\| [list-style-position:] \|\| [list-style-image:]
decimal-leading-zero inside; decimal-leading-zero inside; decimal-leading-zero inside;	inside url(punktor.gif); inside url(punktor.gif); inside url(punktor.gif);

Przekształcenia

Wyświetlanie
display:
list-item;
Lorem ipsum Lorem ipsum

Resetowanie licznika
content-reset:
none	identifier integer np. licznik

Przyrost licznika
counter-increment:
none	identifier integer np. licznik

Zastosowanie list - menu

Style liczników

Wyliczenia symboliczne
list-style-type: \| list-style:
disc;	circle;	square;	disclosure-open; ^CSS3	disclosure-closed; ^CSS3
disc; disc; disc;	circle; circle; circle;	square; square; square;	disclosure-open; disclosure-open; disclosure-open;	disclosure-closed; disclosure-closed; disclosure-closed;

Wyliczenia numeryczne
list-style-type: \| list-style:
decimal;	decimal-leading-zero;	cjk-decimal; ^CSS3	lower-roman;
decimal; decimal; decimal;	decimal-leading-zero; decimal-leading-zero; decimal-leading-zero;	cjk-decimal; cjk-decimal; cjk-decimal;	lower-roman; lower-roman; lower-roman;
upper-roman;	armenian;	georgian;	hebrew; ^CSS3
upper-roman; upper-roman; upper-roman;	armenian; armenian; armenian;	georgian; georgian; georgian;	hebrew; hebrew; hebrew;

Zastosowanie list - menu

Wyliczenia alfabetyczne
list-style-type: \| list-style:
lower-greek;	upper-alpha;	lower-latin;
lower-greek; lower-greek; lower-greek;	upper-alpha; upper-alpha; upper-alpha;	lower-latin; lower-latin; lower-latin;
upper-latin;	lower-alpha;	hiragana; ^CSS3
upper-latin; upper-latin; upper-latin;	lower-alpha; lower-alpha; lower-alpha;	hiragana; hiragana; hiragana;
hiragana-iroha; ^CSS3	katakana; ^CSS3	katakana-iroha; ^CSS3
hiragana-iroha; hiragana-iroha; hiragana-iroha;	katakana; katakana; katakana;	katakana-iroha; katakana-iroha; katakana-iroha;

[CSS-COUNTER-STYLES-3]: Tab Atkins Jr.. CSS Counter Styles Level 3. 21 February 2013. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2013/WD-css-counter-styles-3-20130221/

Zastosowanie list - menu poziome