Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

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

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

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

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

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

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

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

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

Код HTML
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
</ul>

Теперь CSS код:

Код CSS
ul {
list-style-type: square;
}

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

Код CSS
li {
list-style-type: square;
}

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

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.