Глава 2.11. Генерация содержимого, нумерация и списки

2.11.1. Понятие генерации содержимого

В некоторых случаях CSS позволяет отображать содержание, которого нет в дерева документа. Типичным примером является нумерованный список: автор документа не нумерует его пункты, а требует от обозревателя, чтобы тот генерировал номера пунктов автоматически. В этой главе собраны все возможности CSS по генерации содержимого, а именно:

  • генерация содержимого с помощью псевдоэлементов :before и :after;
  • автоматическая нумерация с использованием счетчиков;
  • создание маркеров и отображение списков.

2.11.2. Генерация содержимого

2.11.2.1. Задание содержимого: свойство content

Синтаксис:  content: [<строка> | <uri> | <счетчик> | attr(X) | open-quote | close-quote |
                     no-open-quote | no-close-quote]+ | inherit
Начально:   пустая строка
Применимо:  к псевдоэлементам :before и :after
Наследуемо: нет
Проценты:   не используются
Устройства: все
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство content используется совместно с псевдоэлементами :before и :after для генерации содержимого. Оно задает текст содержимого для вставки и может принимать следующие значения:

<строка>
  Вставляется данный текст.
<uri>
  Вставляется содержимое ресурса с данным URI.
<счетчик>
  Вставляется значение указанного счетчика или счетчиков.
attr(X)
  Вставляется значение атрибута X субъекта селектора.
open-quote
  Вставляется открывающая кавычка (см. свойство quotes).
close-quote
  Вставляется закрывающая кавычка (см. свойство quotes).
no-open-quote
  Не вставляется ничего, но счетчик вложения кавычек увеличивается на 1.
no-close-quote
  Не вставляется ничего, но счетчик вложения кавычек уменьшается на 1.

Место вставки текста определяется псевдоэлементом в селекторе данного элемента — :before означает вставку перед элементом, а :after после него. Способ вставки (текстовый, блочный или маркер) задается значением свойства display. Например, следующая декларация задает вывод текста "Конец документа" в центре последней строки экрана.

BODY:after {
  content: "Конец документа";
  display: block;
  margin-top: 2em;
  text-align: center;
}

2.11.2.2. Кавычки: свойство quotes

Синтаксис:  quotes: [<строка> <строка>]+ | none | inherit
Начально:   зависит от обозревателя
Применимо:  ко всем элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство quotes задает символы кавычек и может принимать следующие значения:

none
  Значения open-quote и close-quote свойства content не генерируют символов кавычек.
[<строка> <строка>]+
  Задает пары символов кавычек для значений open-quote и close-quote свойства content.
  Каждая пара соответствует очередному уровню вложения кавычек.

В качестве кавычек обычно используются следующие символы Unicode:

Код (16-ный) Вид Описание
0022 " двойная кавычка
0027 ' одинарная кавычка (апостроф)
2039 ‹ открывающая одинарная угловая кавычка
203A › закрывающая одинарная угловая кавычка
00AB « открывающая двойная угловая кавычка
00BB » закрывающая двойная угловая кавычка
2018 ‘ открывающая одинарная кавычка
2019 ’ закрывающая одинарная кавычка
201A ‚ закрывающая нижняя одинарная кавычка
201C “ открывающая двойная кавычка
201D ” закрывающая двойная кавычка
201E „ закрывающая нижняя двойная кавычка

В следующем примере задан внешний вид кавычек и указано, что они должны вставляться в начале и конце элемента Q.

Q { quotes: "\201C" "\201D" "\2018" "\2019" }
Q:before ( content: open-quote }
Q:after ( content: close-quote }

2.11.3. Автоматическая нумерация

2.11.3.1. Счетчики

Для автоматической нумерации в CSS используются счетчики. Счетчик — это идентификатор, которому присваиваются целые значения с помощью свойств counter-reset и counter-increment. Текущее значение счетчика может использоваться при генерации содержимого свойством content.

По умолчанию, счетчик обозначается как counter(name) и его значением являются десятичные числа. Вместе с тем мы можем задавать стиль отображения значений счетчика в формате counter(name,style), где style может принимать любые значения свойства list-style-type. Отметим, что стиль none допустим: counter(name,none) генерирует пустую строку. Примеры:

H1:before        { content: counter(chapter, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecnt, disc) " " }
P:before         { content: counter(pcount, none) }

Элементы со значением none свойства display не изменяют значения счетчиков. С другой стороны, элементы со значением hidden свойства visibility изменяют их значения, как обычные элементы.

Поддержка:  Internet Explorer Не поддерживаются
            Netscape Navigator Не поддерживаются

2.11.3.2. Начальное значение счетчика: свойство counter-reset

Синтаксис:  counter-reset: [<идентификатор> <целое> ?]+ | none | inherit
Начально:   none
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: все
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство counter-reset задает начальные значения счетчиков. Его значением является список имен счетчиков, за каждым из которых может следовать необязательное целое число; если такое число указано, то оно становится значением счетчика, если нет, то счетчику присваивается значение 0.

Если элемент и задает начальное значение счетчика, и использует его значение в свойстве content, то значение используется после присваивания.

Данное свойство следует правилам каскадности. Поэтому следующие декларации

H1 { counter-reset: chapter 1 }
H1 { counter-reset: section -1 }

зададут только значение счетчика section. Для задания начальных значений обоих счетчиков их нужно указать в одном правиле:

H1 { counter-reset: chapter 1 section -1 }

2.11.3.3. Изменение значения счетчика: свойство counter-increment

Синтаксис:  counter-increment: [<идентификатор> <целое> ?]+ | none | inherit
Начально:   none
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: все
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство counter-increment изменяет значения счетчиков.Его значением является список имен счетчиков, за каждым из которых может следовать необязательное целое число; если такое число указано, то оно добавляется к текущему значению счетчика, если нет, то значение счетчика увеличивается на 1. Целое число может быть и нулем, и отрицательным.

Если использован счетчик, которому не присвоено начальное значение, то оно принимается равным нулю. Если элемент и сбрасывает, и изменяет значение счетчика, то оно сначала сбрасывается, а затем изменяется. Если элемент и изменяет значение счетчика, и использует его значение в свойстве content, то значение используется после изменения значения.

Следующий пример показывает, как нумеровать главы текстом вида "Глава 1. ", а разделы — текстом вида "1.1 " и т. д.

H1:before {
  counter-increment: chapter;  /* Увеличить chapter на 1 */
  counter-reset: section;      /* Обнулить section */
  content: "Глава " counter(chapter) ". ";
}
H2:before {
  counter-increment: section;  /* Увеличить section на 1 */
  content: counter(chapter) "." counter(section) " ";
}

2.11.4. Маркеры

2.11.4.1. Создание маркеров

Большинство блочных элементов в CSS генерируют один объемлющий прямоугольник. Однако, CSS содержит два механизма, вынуждающих элемент генерировать два прямоугольника: главный прямоугольник для содержимого элемента и прямоугольник маркера, который может располагаться как внутри, так и вне главного прямоугольника. В отличие от генерируемого содержимого, прямоугольник маркера не влияет на позицию главного прямоугольника. Более общий из этих механизмов называется маркеры и описан в этом разделе. Второй, более ограниченный по возможностям, но чаще используемый, называется списки и описан в следующем разделе.

Маркеры создаются присваиванием значения marker свойству display в псевдоэлементах :before и :after. Прямоугольник маркера форматируется как однострочный прямоугольник, расположенный вне главного прямоугольника элемента. Он создается только в том случае, когда свойство content псевдоэлемента действительно генерирует содержание. Прямоугольник маркера имеет рамку и заполнитель, но не имеет границ.

Для псевдоэлемента :before базовая линия текста прямоугольника маркера вертикально выравнивается по базовой линии текста первой строки содержимого главного прямоугольника, а для псевдоэлемента :after — по базовой линии текста последней строки. Если главный прямоугольник не содержит текста, то выравнивание производится соответственно по верхнему и нижнему внешнему краю главного прямоугольника.

Высота прямоугольника маркера задается свойством line-height. Вертикальное выравнивание маркера внутри его прямоугольника задается свойством vertical-align.

Если свойство width имеет значение auto, то ширина прямоугольника маркера определяется его содержимым, в остальных случаях — значением width. Если при этом ширина содержимого больше ширины прямоугольника, то обрезка определяется значением свойства overflow. Прямоугольник маркера может накладываться на главный прямоугольник. Если ширина содержимого меньше ширины прямоугольника, то горизонтальное выравнивание содержимого задается свойством text-align.

Свойство marker-offset задает смещение прямоугольника маркера по горизонтали относительно главного прямоугольника, точнее, расстояние между ближайшими краями их рамок.

Если свойство display имеет значение marker для содержимого, сгенерированного элементом, у которого значение display равно list-item, то прямоугольник маркера, сгенерированный для :before, замещает обычный маркер элемента списка.

Например, следующий HTML-документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Создание списка с маркерами</TITLE>
  <STYLE type="text/css">
    LI:before {
      display: marker;
      counter-increment: mycounter;
      content: counter(mycounter, lower-roman) ". ";
    }
  </STYLE>
</HEAD>
<BODY>
  <OL>
    <LI>Первый элемент списка.</LI>
    <LI>Второй элемент списка.</LI>
    <LI>Третий элемент списка.</LI>
  </OL>
</BODY>
</HTML>

будет отображаться так:

  i. Первый элемент списка.
 ii. Второй элемент списка.
iii. Третий элемент списка. 

Поддержка:  Internet Explorer Не поддерживаются
            Netscape Navigator Не поддерживаются

2.11.4.2. Позиция маркера: свойство marker-offset

Синтаксис:  marker-offset: <размер> | auto | inherit
Начально:   auto
Применимо:  к элементам типа display: marker
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство marker-offset задает смещение прямоугольника маркера по горизонтали относительно главного прямоугольника, точнее, расстояние между ближайшими краями их рамок. Оно может быть задано явно (<размер>) или оставлено на усмотрение обозревателя (auto). Размер может быть отрицательным. Пример:

LI:before { marker-offset: 3em }

2.11.5. Списки

2.11.5.1. Введение в списки

Элементы списков создаются присваиванием значения list-item свойству display. Как и в более общем случае маркеров, они отображаются в виде двух прямоугольников: главного прямоугольника для содержимого элемента и необязательного прямоугольника маркера списка. Свойства списков позволяют задать тип этого маркера и его положение относительно главного прямоугольника. Отметим, что при отображении списков фон элемента распространяется только на главный прямоугольник; прямоугольник маркера всегда прозрачен.

2.11.5.2. Тип маркера списка: свойство list-style-type

Синтаксис:  list-style-type: disc | circle | square | decimal | decimal-leading-zero |
                             lower-roman | upper-roman | lower-greek | lower-alpha |
                             lower-latin | upper-alpha | upper-latin | hebrew |
                             armenian | georgian | cjk-ideographic | hiragana | katakana |
                             hiragana-iroha | katakana-iroha | none | inherit
Начально:   disc
Применимо:  к элементам типа display: list-item
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Поддерживаются только disc, circle, square, none, decimal, lower-roman,
               upper-roman, lower-alpha, upper-alpha (4.0+)
            Netscape Navigator Поддерживаются только disc, circle, square, none, decimal, lower-roman,
               upper-roman, lower-alpha, upper-alpha (4.0+)

Свойство list-style-type задает тип маркера списка. Оно может принимать следующие значения:

disc Черный кружок (зависит от обозревателя)
circle Светлый кружок (зависит от обозревателя)
square Черный квадратик (зависит от обозревателя)
decimal Десятичные числа (1, 2, 3, …)
decimal-leading-zero Десятичные числа с ведущим нулем (01, 02, 03, … 98, 99)
lower-roman Строчные римские числа (i, ii, iii, iv, v, …)
upper-roman Прописные римские числа (I, II, III, IV, V, …)
lower-greek Строчные греческие буквы (α, β, γ, …, ω)
lower-alpha Строчные латинские буквы (a, b, c, …, z)
lower-latin Строчные латинские буквы (a, b, c, …, z)
upper-alpha Прописные латинские буквы (A, B, C, …, Z)
upper-latin Прописные латинские буквы (A, B, C, …, Z)
hebrew Традиционная ивритская нумерация
armenian Традиционная армянская нумерация
georgian Традиционная грузинская нумерация (an, ban, gan, …, he, tan, in, in-an, …)
cjk-ideographic Дальневосточная идеографическая нумерация
hiragana Японская нумерация азбукой хирагана (a, i, u, e, o, ka, ki, …)
katakana Японская нумерация азбукой катакана (A, I, U, E, O, KA, KI, …)
hiragana-iroha Японская нумерация хирагана-ироха (i, ro, ha, ni, ho, he, to, …)
katakana-iroha Японская нумерация катакана-ироха (I, RO, HA, NI, HO, HE, TO, …)

Спецификация CSS не определяет, какие символы должны использоваться в качестве маркеров списка, когда заданный алфавит будет исчерпан. Например, 27-й элемент списка типа lower-alpha не определен. Поэтому алфавитные типы маркеров должны использоваться только для коротких списков заранее известного размера. Если обозреватель не поддерживает заданный тип маркера, то он должен заменяться на decimal.

Это свойство применяется к списку только тогда, когда значением свойства list-style-image является none или указанный в нем графический образ не может быть загружен.

Следующий пример нумерует элементы нумерованного списка строчными римскими числительными:

OL { list-style-type: lower-roman }

2.11.5.3. Графический маркер списка: свойство list-style-image

Синтаксис:  list-style-image: <uri> | none | inherit
Начально:   none
Применимо:  к элементам типа display: list-item
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Не поддерживается

Свойство list-style-image задает графический маркер списка указанием на URI соответствующего графического образа. Если оно равно none, то тип маркера списка задается свойством list-style-type.

Следующий пример помещает в начало каждого элемента маркированного списка графический образ "ellipse.gif":

UL { list-style-image: url("http://mylibrary.com/ellipse.gif") }

2.11.5.4. Позиция маркера списка: свойство list-style-position

Синтаксис:  list-style-position: inside | outside | inherit
Начально:   outside
Применимо:  к элементам типа display: list-item
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Не поддерживается

Свойство list-style-position задает положение маркера списка относительно элемента списка. Оно может принимать следующие значения:

inside
  Прямоугольник маркера становится первым текстовым блоком главного прямоугольника.
outside
  Прямоугольник маркера размещается вне главного прямоугольника.

Например, следующий фрагмент HTML-документа

<UL style="list-style-type: square; list-style-position: inside; width: 40%">
  <LI>Первый элемент списка расположен таким вот образом.</LI>
  <LI>Второй элемент списка располагается так же.</LI>
</UL>

будет отображаться так (Netscape Navigator 4.x отображает этот пример неверно!):

  • Первый элемент списка расположен таким вот образом.
  • Второй элемент списка располагается так же.

2.11.5.5. Задание свойств списка: свойство list-style

Синтаксис:  list-style: [<list-style-type> || <list-style-image> ||
                        <list-style-position>] | inherit
Начально:   не определено для сокращений
Применимо:  к элементам типа display: list-item
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Не поддерживается

Свойство list-style является сокращением для свойств list-style-type, list-style-image и list-style-position. Оно позволяет задать все свойства списка одновременно. С его помощью стиль маркированного списка из предыдущего примера мог бы быть задан так:

<UL style="list-style: square inside; width: 40%">