Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

159. Типы списков в 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 для изменения стиля списка. Нет необходимости запоминать все значения, для этого можно в нужный момент воспользоваться справочником.

Похожие уроки и записи блога

Первое знакомство с PythonЗнакомство с Python
Управляющие последовательности в JavaScriptТипы и переменные
Написание модулей в PythonЗнакомство с Python
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Погружение в PythonЗнакомство с Python
Работа с файлами в Python Знакомство с Python
Функциональное программирование: map, filter и reduceЗнакомство с Python
Обработка исключений (try/except) в PythonЗнакомство с Python
Структуры данных в PythonЗнакомство с Python
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно