Используя описанные в этом руководстве CSS-свойства, вы можете оформить списки. Указания относятся к HTML-элементам ul и ol. Таким образом, вы можете настраивать упорядоченные и неупорядоченные списки по вашему усмотрению.
Общие сведения о списках
Свойство list-style является сводкой трех следующих свойств:
• list-style-type
• list-style-position
• list-style-image
С помощью list-style можно изменить способ графического отображения маркеров перед элементами списка и их отступов. Указанные значения записываются через запятую. Порядок не имеет значения. Кроме того, не для каждого свойства необходимо указывать значение.
Пример показан ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>В браузере это выглядит следующим образом:
Графические маркеры
Вы можете указать собственное изображение в качестве маркера. Для этого используется свойство list-style-image. Допустимыми значениями являются:
• url – имя файла и, возможно, путь к изображению
• none – изображение не отображается.
Пример:
ul {
list-style-image: url(bullet.gif);
}
Обратите внимание, что путь к указанному в URL изображению должен быть правильным.
Если указан неверный путь, браузеры должны использовать стандартный маркер.
Положение маркеров
Свойство list-style-position определяет, как должны себя вести нумерация или маркеры относительно отступов.
• inside – первая строка будет смещена так, чтобы маркеры и элементы списка были выровнены по левому краю.
• outside – маркеры находятся слева от элемента списка.
В следующем примере используются два значения: inside и outside.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style>
</head>
<body>
<p>Внутренний список:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Внешний список:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Таким образом можно наглядно увидеть различные влияния этих двух значений.
Оформление маркеров
Для маркеров в виде точек или иных символов вы можете явно управлять их внешним видом. Также можно изменить отображение нумерованных списков. Для этого используется свойство list-style-type. Допустимыми значениями являются:
• decimal – для списков ol: Нумерация 1, 2, 3 и т. д.
• lower-roman – для списков ol: Нумерация i., ii., iii. и т. д.
• upper-roman – для списков ol: Нумерация I., II., III., IV и т. д.
• lower-alpha или lower-latin – для списков ol: Нумерация I., II., III., IV. и т. д.
• upper-alpha или upper-latin – для списков ol: Нумерация A., B., C., D. и т. д.
• disc – для списков ul: Заполненный круг в качестве маркера
• circle – для списков ul: Пустой круг в качестве маркера
• square – для списков ul: Прямоугольник в качестве маркера
• none – ни маркера, ни нумерации
• lower-greek – для списков ol: Нумерация греческими буквами
• hebrew – для списков ol: Нумерация ивритскими буквами
• decimal-leading-zero – для списков ol: Нумерация с ведущим нулем 0: 01., 02., 03., 04. и т. д.
• cjk-ideographic – для списков ol: Нумерация идеографическими символами
• hiragana – для списков ol: Японская нумерация (строчными буквами)
• katakana – для списков ol: Японская нумерация (заглавными буквами)
• hiragana-iroha – для списков ol: Японская нумерация (строчными буквами)
• katakana-iroha – для списков ol: Японская нумерация (заглавными буквами)
В следующем примере используются некоторые из перечисленных вариантов.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>В браузере получится следующее изображение:
Счетчики
Через списки ol можно нумеровать содержимое. Однако в более сложных приложениях это не слишком удобно. CSS здесь предлагает альтернативу в виде счетчиков.
Далее покажу вам, как использовать счетчики.
Сначала я создам новый счетчик для элемента body.
body {
counter-reset: kapitel;
}Благодаря этому определению счетчик kapitel существует в документе. Теперь его можно использовать.
h1 {
counter-increment: kapitel;
}
С помощью показанного синтаксиса счетчик автоматически увеличивается на 1 при появлении нового элемента h1. Проблема заключается в том, что на данный момент ничего не отображается. Это можно легко изменить с помощью псевдоэлементов.
h1::before {
content: counter(kapitel) ". ";
}
Полное применение может выглядеть следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-increment: kapitel;
}
h1::before {
content: counter(kapitel) ". ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h1>Kapitel</h1>
</body>
</html>А вот, как это выглядит в браузере:
В приведенном примере с помощью ::before выходит число в начале элемента h1. Для того, чтобы цифра не находилась прямо у текста заголовка, после цифры добавляется точка и пробел.
content: counter(kapitel) ". "
Также возможны вложенные подсчеты. Для этого счетчик определяется в том месте, где он в итоге должен начинаться сначала.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}В данном примере счетчик сбрасывается при каждом новом элементе h1. Нижеследующий пример демонстрирует типичное применение вложенных счетчиков.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-reset: unterkapitel;
}
h1:before {
counter-increment: kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment: unterkapitel;
content: counter(kapitel) "." counter(unterkapitel) " ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
</body>
</html>В браузере это выглядит следующим образом:
Примеры показали, насколько мощными могут быть счетчики.
