wtorek, 2024-01-02

CSS: Własność list-style-type

Własność list-style-type w CSS określa wygląd punktorów lub numeracji w listach. Poniżej znajdziesz różne możliwe wartości, które może przyjąć. Wartości te pozwalają na dostosowanie wyglądu list, co jest szczególnie przydatne do zwiększenia czytelności treści i dopasowania stylów do ogólnego designu strony internetowej.

Możliwe wartości list-style-type

1. none

   • Usuwa punktory lub numerację z listy.
   • Przykład: list-style-type: none;

2. disc / circle / square

   • Dla list nieuporządkowanych (ul), ustawia punktory jako pełne koła (disc), puste koła (circle) lub kwadraty (square).
   • Przykład: list-style-type: disc;

3. decimal / decimal-leading-zero

   • Dla list uporządkowanych (ol), ustawia numerację jako liczby. 'decimal' używa liczb bez zer nieznaczących, a 'decimal-leading-zero' używa zer nieznaczących.
   • Przykład: list-style-type: decimal;

4. lower-roman / upper-roman

   • Używa rzymskich cyfr małych (lower-roman) lub dużych (upper-roman) do numeracji.
   • Przykład: list-style-type: lower-roman;

5. lower-greek

   • Używa małych liter alfabetu greckiego do numeracji.
   • Przykład: list-style-type: lower-greek;

6. lower-latin / lower-alpha

   • Używa małych liter alfabetu łacińskiego.
   • Przykład: list-style-type: lower-latin;

7. upper-latin / upper-alpha

   • Używa dużych liter alfabetu łacińskiego.
   • Przykład: list-style-type: upper-alpha;

8. lower-armenian / upper-armenian

   • Używa alfabetu ormiańskiego dla numeracji.
   • Przykład: list-style-type: lower-armenian;

9. georgian

   • Używa tradycyjnej numeracji gruzińskiej.
   • Przykład: list-style-type: georgian;

10. cjk-ideographic

    • Używa tradycyjnych chińskich ideogramów dla numeracji.
    • Przykład: list-style-type: cjk-ideographic;

11. hebrew

    • Używa tradycyjnej numeracji hebrajskiej.
    • Przykład: list-style-type: hebrew;

12. hiragana / katakana / hiragana-iroha / katakana-iroha

    • Używa japońskich systemów pisma dla numeracji.
    • Przykład: list-style-type: hiragana;

13. inherit / initial / unset

    • Pozwalają na dziedziczenie (inherit), ustawienie na wartość domyślną (initial) lub zresetowanie wartości (unset).

Demonstracja efektu różnych wartości list-style-type