HTML, XHTML и CSS на 100%
Шрифт:
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
В примере не указана цифра, с которой начинать нумерацию, так как по умолчанию она начинается с единицы. Однако, как отмечалось выше, это возможно.
Если вы одновременно зададите увеличение или сбрасывание счетчика, а также используете его с помощью свойства content, то сначала счетчик будет увеличен или сброшен, а потом применится в документе.
Важно помнить, что свойство counter-reset поддерживает правила каскада. По этим правилам в следующей таблице стилей сбрасывается только счетчик imagenum:
h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }
Чтобы выполнить сброс обоих счетчиков, необходимо задать их вместе:
h1 { counter-reset: section -1 imagenum 99 }
Стили счетчиков
По умолчанию браузер отображает значение счетчика как число в десятичном формате, но вы можете использовать и другие стили отображения счетчика, доступные через свойство list-style-type. Тогда описание счетчика будет выглядеть так:
counter(«название счетчика», list-style-type)
Чтобы задать стиль, используемый по умолчанию, можно использовать следующую запись:
counter(«название счетчика»)
Иными словами, просто не задавать значение list-style-type.
Вы можете использовать любые стили, в том числе disc (круг), circle (окружность), square (квадрат) и none (ничего). Например:
h1:before { content: counter(chno, upper-latin) ". " }
h2:before { content: counter(section, upper-roman) " – " }
blockquote:after { content: " [" counter(bq, hebrew) "]" }
div.note:before { content: counter(notecntr, disc) " " }
p:before { content: counter(p, none) }
Попробуйте создать простую HTML-страницу, используя элементы, которые записаны в данном CSS-коде, и применить к ней только что созданную таблицу стилей.
Счетчики со свойством display: none
Неотображаемые элементы, то есть элементы, для свойства display которых установлено значение none, не могут увеличивать или уменьшать значение счетчика.
Например, в таблице стилей, представленной ниже, элементы H2 класса do_not_ display не увеличивают значение счетчика count_h2:
H2. do_not_display {counter-increment: count_h2; display: none}
Следует отметить, что элементы, для которых свойство visibility задано как hidden, увеличивают значения счетчиков.
Списки
Рассмотрим все возможности задания спискам различного визуального форматирования.
Кстати, если вы с помощью display: marker укажете маркер вместе с элементом списка, созданным с помощью свойств списка, то маркер просто-напросто заменит стандартный элемент списка. Подробно про маркеры будет рассказано дальше.
Для списков также нельзя задать фон. Чтобы использовать в документе список с фоном, нужно задать список как маркер, то есть использовать display: marker, но про это также будет рассказано дальше.
Итак, начнем со стилизации списка с помощью свойства list-style-type. Это свойство задает вид маркера элемента списка, если для свойства list-style-image указано значение none или изображение, на которое указывает URL, недоступно. Можно использовать три типа маркеров: глифы, нумерованные и алфавитные, либо задать значение none, которое означает, что маркер не используется.
Рассмотрим типы маркеров списка подробнее. Первыми разберем глифы. Они определяются с помощью значений disk, circle и square. Обычно они отображаются браузерами клиента как круг, окружность или квадрат. Пример списка с маркером в виде квадрата приведен в листинге 9.4.
<html>
<head>
<title>Глава 9. Маркеры в виде квадрата</title>
<style type="text/css">
ol { list-style-type: square }
</style>
</head>
<body>
<ol>
<li> Это первый элемент списка.
<li> Это второй элемент списка.
<li> Это третий элемент списка.
</ol>
</body>
</html>
Теперь рассмотрим нумерованные списки. Различают несколько систем нумерации списков. Ниже представлены все системы нумерации, используемые в CSS, и их описание:
• decimal – десятичные числа, начиная с 1;
• decimal-leading-zero – десятичные числа, дополненные нулями (например, 01, 02, 03… 98, 99);
• lower-roman – римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т. д.);
• upper-roman – римские цифры, представленные прописными буквами (I, II, III, IV, V и т. д.);
• hebrew – традиционная еврейская нумерация;
• georgian – традиционная грузинская нумерация (an, ban, gan…, he, tan, in, in-an…);
• armenian – традиционная армянская нумерация;
• 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….
Третий вариант задания маркеров списка – с помощью так называемой алфавитной системы, или с помощью букв. Ниже приведены алфавитные системы и их описание: