Wykazy
list-style
| Wartość | [list-style-type || list-style-position || list-style-image] | inherit |
| Używany z | punkty wykazu |
| Dziedziczenie | tak |
| Przykład | UL { list-style: decimal inside } |
Pozwala ustawić jednocześnie wartości 'list-style-type', 'list-style-image' i 'list-style-position'.
list-style-type
| Wartość | countingsystem | disc | circle | square | none | inherit |
| Wartość początkowa | disc |
| Używany z | display-item elements |
| Dziedziczenie | tak |
Własność określa wygląd markera wyświetlanego z punktami wykazu. Zauważ, że nierozpoznany system liczenia będzie wyświetlany jako dziesiętny, a systemy alfabetyczne są nieokreślone poza punktem końcowym (tj. Z lub ekwiwalentem).
countingsystem jest jednym z
decimal1, 2, 3, ...
decimal-leading-zero wstawia dodatkowe zera : 01, 02, 03, ..., 98, 99.
lower-roman, upper-roman : liczebniki rzymskie.
hebrew, georgian, armenian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha
lower-latin lub lower-alpha :
a, b, c, ...
upper-latin lub upper-alpha :
A, B, C, ...
lower-greek
Określa, jaki typ markera jest używany w wykazie.
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha } /* a b c d e etc. */
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
list-style-image
| Wartość | address none | inherit |
| Wartość początkowa | none |
| Używany z | punkty wykazu |
| Dziedziczenie | tak |
Określa grafikę użytą w charakterze markera w wykazie.
list-style-position
| Wartość | inside | outside | inherit |
| Wartość początkowa | outside |
| Używany z | punkty wykazu |
| Dziedziczenie | tak |
Własność określa, czy markery wykazu są wyświetlane poza blokiem tekstu, czy też wewnątrz, z następującym zaraz po nim tekstem.
marker-offset
| Wartość | length [auto] | inherit |
| Wartość początkowa | auto |
| Używany z | wszystkie elementy |
| Dziedziczenie | nie |
| Przykład | UL { counter-increment: listitem 1 } |
Własność określa odległość między markerem wykazu i tekstem w ramach wykazu. Długości mogą być ujemne, jeśli mogą być wyświetlone.
Liczniki
counter-reset
| Wartość | [countername [integer]] | none| inherit |
| Używany z | wszystkie elementy |
| Dziedziczenie | nie |
| Przykład | UL { counter-reset: listitem 1 } |
Własność wylicza nazwy liczników, które sam przydzielasz, razem z opcjonalną wartością całkowitą. Licznik jest resetowany to tej wartości za każdym razem, gdy pojawia się element, któremu przydzielono tę własność. Wartość domyślna to 0.
counter-i
ncrement
| Wartość | [countername [integer]] | none| inherit |
| Używany z | wszystkie elementy |
| Dziedziczenie | no |
| Przykład | UL { counter-increment: listitem 1 } |
Wylicza liczniki, razem z opcjonalną wartością całkowitą, która określa, o ile następują przyrosty licznika, gdy pojawia się element z przypisaną mu konkretną własnością. Domyślny przyrost to 1, dozwolone są przyrosty zerowe i ujemne. Licznik jest zwiększany po każdej operacji resetowania, która w nim zaszła.
Aby wyspecyfikować wiele liczników dla elementu, musisz wyliczyć je wszystkie; w przeciwnym wypadku ostatnia definicja wymusi pierwszeństwo nad wcześniejszymi.
Zagnieżdżanie
Liczniki są zagnieżdżane, jeśli dokonujemy redefinicji w ramach bloku, który ich używa. Na przykład, jeśli użyjemy licznika w ramach wykazu <UL> i utworzymy kolejny wykaz w ramach pierwszego wykazu, drugi wykaz automatycznie zyska swój własny licznik, niezależny od pierwszego. Odwołania do licznika będą automatycznie dokonywane w stosunku do właściwej instancji licznika.
Wygląd liczników
Domyślny licznik jest dziesiętny, ale możesz użyć counter(countername, list-style-type) do określenia rozwiązań alternatywnych, które są zdefiniowane w opisie własności list-style-type.
Dowolny element mający element display ustawiony na none nie może używać licznika.
Wyświetlanie liczników
Liczniki są wyświetlane z własnością content pseudoelementów :before i :after.
-
counter(countername, [style]). Opcjonalny atrybut stylu jest normalnie dziesiętny, ale może być cokolwiek zdefiniowanego we własności list-style-type.
-
counter(countername, string, style) wyświetla wszystkie liczniki o danej nazwie, rozdzielone danym ciągnem znaków.