Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
Практически в любом текстовом документе можно встретить списки. Они повсюду. Если необходимо что-либо перечислить, то списки могут хорошо в этом помочь. В данной теме будем изучать основы оформления списков.
Самый удобный способ поменять список: изменить маркер. Маркером называется какая-либо метка (в маркированном списке) или символ (в нумерованном списке), который находится рядом с каждым элементом списка. Чтобы изменить маркер, необходимо применить свойство list-style-type для списка, заданного тегами li, ol или ul или, если к элементу применено свойство display: list-item. Свойство list-style-type имеет следующие значения:
Для маркированного списка:
disc– маркер по умолчанию. Выглядит как заполненный круг;square– маркер в виде квадрата;circle– обычный круг;
Для нумерованного списка:
armenian– армянская нумерация;cjk-ideographic– простые идеографические числа;decimal– десятичное число;decimal-leading-zero– десятичное число с ведущим нулем;georgian– грузинская нумерация;hebrew– еврейская нумерация;hiragana– нумерация Хирагана;hiragana-iroha– традиционная нумерация Хирагана;katakana– нумерация Катакана;katakana-iroha– традиционная нумерация Катакана-ироха;lower-alpha– латинский алфавит в нижнем регистре (a, b, c, d …);lower-greek– греческий алфавит в нижнем регистре (α, β, γ, δ …);lower-latin– аналогlower-alpha;lower-roman– римские числа в нижнем регистре (i, ii, iii, iv, …);upper-alpha– латинский алфавит в верхнем регистре (A, B, C, D …);upper-greek– греческий алфавит в верхнем регистре;upper-latin– аналогupper-alpha;upper-roman– римские числа в верхнем регистре (I, II, III, IV, …);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 по тегу CSS.
