Здравствуйте! На прошлом уроке мы разбирались как задать стили для абзацев. Сегодня поговорим о стилизации списков.
CSS предоставляет специальные свойства по стилизации списков. Одним из таких свойств является list-style-type. Оно может принимать следующие значения для нумерованных списков:
-
decimal: десятичные числа, отсчет идет от 1 -
decimal-leading-zero: десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99 -
lower-roman: строчные латинские цифры, например, i, ii, iii, iv, v -
upper-roman: заглавные латинские цифры, например, I, II, III, IV, V… -
lower-alpha: строчные латинские буквы, например, a, b, c..., z -
upper-alpha: заглавные латинские буквы, например, A, B, C, … Z
Для ненумерованных списков:
-
disk: черный диск -
circle: пустой кружочек -
square: черный квадратик
Например:
ul{
list-style-type: square;
}
Чтобы вообще отключить маркеры у элементов списка, используется значение none:
ul{
list-style-type: none;
}
Данное свойство может применяться как ко всему списку, так и к отдельным элементам. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Стилизация списков в CSS3</title>
<style>
.decimal{
list-style-type: decimal;
}
ol{
list-style-type: lower-roman;
}
</style>
</head>
<body>
<ol>
<li>Элемент 1</li>
<li class="decimal">Элемент 2</li>
<li>Элемент 3</li>
<li>Элемент 4</li>
</ol>
</body>
</html>
Читать далее
Это интересно
+1
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
-
Как покупать ссылки на Miralinks
(1)
Stanzeka
,
17.10.2021
20251118211706