145. Типы списков в CSS

Практически в любом текстовом документе можно встретить списки. Они повсюду. Если необходимо что-либо перечислить, то списки могут хорошо в этом помочь. В данной теме будем изучать основы оформления списков.

Самый удобный способ поменять список: изменить маркер. Маркером называется какая-либо метка (в маркированном списке) или символ (в нумерованном списке), который находится рядом с каждым элементом списка. Чтобы изменить маркер, необходимо применить свойство list-style-type для списка, заданного тегами li, ol или ul или, если к элементу применено свойство display: list-item. Свойство list-style-type имеет следующие значения:

Для маркированного списка:

1. disc – маркер по умолчанию. Выглядит как заполненный круг;
2. square – маркер в виде квадрата;
3. circle – обычный круг;

Для нумерованного списка:

4. armenian – армянская нумерация;
5. cjk-ideographic – простые идеографические числа;
6. decimal – десятичное число;
7. decimal-leading-zero – десятичное число с ведущим нулем;
8. georgian – грузинская нумерация;
9. hebrew – еврейская нумерация;
10. hiragana – нумерация Хирагана;
11. hiragana-iroha – традиционная нумерация Хирагана;
12. katakana – нумерация Катакана;
13. katakana-iroha – традиционная нумерация Катакана-ироха;
14. lower-alpha – латинский алфавит в нижнем регистре (a, b, c, d …);
15. lower-greek – греческий алфавит в нижнем регистре (α, β, γ, δ …);
16. lower-latin – аналог lower-alpha;
17. lower-roman – римские числа в нижнем регистре (i, ii, iii, iv, …);
18. upper-alpha – латинский алфавит в верхнем регистре (A, B, C, D …);
19. upper-greek – греческий алфавит в верхнем регистре;
20. upper-latin – аналог upper-alpha;
21. upper-roman – римские числа в верхнем регистре (I, II, III, IV, …);
22. none – без маркера.

Рассмотрим пример, в котором заменим стандартные маркеры квадратными метками. Далее HTML код.

<ul>
   <li>Элемент 1</li>
   <li>Элемент 2</li>
</ul>

Теперь CSS код:

ul {
    list-style-type: square;
}

И ему эквивалентный код CSS:

li {
    list-style-type: square;
}

Мы рассмотрели свойство list-style-type для изменения стиля списка. Нет необходимости запоминать все значения, для этого можно в нужный момент воспользоваться справочником.

Похожие уроки Codebra

1. Сделайте так, чтобы маркер списка был в виде римских чисел (таких: I, II, III, IV ...).

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.