HTML, XHTML и CSS на 100% - Игорь Квинт

Помимо этого, вы можете использовать в качестве значений ключевые слова. Ниже приведены их список и описания:

• top left и left top – аналогично паре значений 0 % 0 %;

• top, top center и center top – как и пара значений 50 % 0 %;

• right top и top right – аналогично паре значений 100 % 0 %;

• left, left center и center left – как и пара значений 0 % 50 %;

• center и center center – аналогично паре значений 50 % 50 %;

• right, right center и center right – как и пара значений 100 % 50 %;

• bottom left и left bottom – аналогично паре значений 0 % 100 %;

• bottom, bottom center и center bottom – как и пара значений 50 % 100 %;

• bottom right и right bottom – аналогично паре значений 100 % 100 %.

Если вы зададите только одно значение длины или одно процентное соотношение, то оно определит позицию только по горизонтали, а позиция по вертикали будет принята браузером как значение 50 %. Если вы зададите два значения, то первым браузер будет считать позицию по горизонтали. Вы также можете сочетать значение длины и процентное соотношение (например, 5 0 % 2 cm). Можно использовать отрицательные значения. Однако помните, что ключевые слова нельзя применять вместе со значениями длины или процентными соотношениями.

Можно использовать сокращенную запись для всех свойств, приведенных выше, с помощью свойства background. Например:

body { background: url(«chess.png») gray 50% 20% repeat fixed }

В данной таблице стилей заданы значения для всех свойств фона документа.

9.2. Генерируемое содержимое

В некоторых случаях у вас может возникнуть необходимость в том, чтобы браузер пользователя отображал на экране содержимое, которое не принадлежит так называемому «дереву» HTML-документа. Хорошим примером может служить нумерованный список. Без сомнения, вам не захочется вводить числа нумерации вручную. Ведь если список довольно большой, а вам вдруг необходимо добавить элемент в его начало, то придется менять всю нумерацию. Не правда ли, будет гораздо удобнее, если браузер будет генерировать нумерацию автоматически? Согласитесь, также гораздо удобнее работать с большими страницами, если, к примеру, браузер сам добавляет слово «Рисунок» и номер рисунка перед его названием или, например, вставляет надпись «Глава 9.» перед заголовком девятой главы.

Хотя это может показаться нелепым, но в отличие от HTML CSS предоставляет средства для решения данных проблем.

С помощью CSS можно генерировать содержимое несколькими способами:

• с использованием свойства content в сочетании с псевдоэлементами: before и: after;

• с использованием элементов, свойство display которых принимает значение list-item.

Подробно рассмотрим все возможности CSS по генерации содержимого и начнем с использования свойства content.

Псевдоэлементы :before и: after

С помощью псевдоэлементов: before и: after можно задать стиль и местоположение генерируемого содержимого. Не требуется особых познаний в английском языке, чтобы из названия догадаться, что эти псевдоэлементы определяют местоположение «перед» и «после» содержимого элемента, принадлежащего дереву HTML-документа. Используя эти псевдоэлементы в сочетании со свойством content, вы можете определить содержимое и место, куда оно должно быть вставлено.

Рассмотрим простой пример. Пусть браузер сам расставит точки в конце абзацев в документе:

p:after { content: "." }

Надо помнить, что псевдоэлементы: before и: after могут быть связаны с элементом HTML-документа. Тогда они будут наследовать его свойства. Чтобы вы лучше разобрались, приведу такой пример:

p:before {

content: open-quote;

color: red

}

Теперь перед каждым элементом P будет добавлена кавычка красного цвета, а шрифт кавычки будет такой же, какой задан всему абзацу.

Свойство content

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

Свойство content может принимать одно из нескольких значений: строку текста, URL-адрес документа, который должен быть вставлен, счетчик, кавычки либо значение атрибута. Вы можете создавать сложную вложенную строку, используя строку текста, счетчики, значения атрибутов элемента одновременно. При этом сложная строка должна быть разделена только пробелами, а не запятыми. Например:

content: "Рисунок " counter(imagenum) ". " attr(alt)

В документ может быть вставлена обычная текстовая строка, которая обязательно должна быть заключена в кавычки. Для примера добавим перед всеми абзацами надпись Абзац::

p:before { content "Абзац: " }

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

Скорректируем наш пример:

p:before {

content: "Абзац:A"

}

Теперь перед каждым абзацем будет добавлена строка Абзац:, а сам абзац будет начинаться со следующей строки.

Рассмотрим вставку строки, которая является значением параметра элемента. На первый взгляд может показаться непонятным, где это можно использовать. Такая функция применяется, например, для вставки значения атрибута alt элемента IMG:

img:before { content: attr(alt) }

Если изображение не будет выведено, то читатель, по крайней мере, увидит текст атрибута alt, то есть название или описание рисунка.

Хорошо разобраться с данным свойством помогут только эксперименты. Не пожалейте на них времени, и при разработке и обслуживании страниц оно вам с лихвой окупится.

Кавычки

Может понадобиться, чтобы в документе или в какой-то его части кавычки отображались не так, как обычно, а в зависимости от стиля и содержимого. С помощью CSS вы можете определять, каким образом браузер будет отображать кавычки. Свойство quotes задает пару «» для каждого уровня вложенности цитат, а свойство content предоставляет доступ к этим кавычкам и вставляет их до и после цитаты.

Рассмотрим определения кавычек с помощью свойства quotes. Лучше всего это можно понять из примера. Попробуйте применить следующую таблицу стиля:

/* Определение пар кавычек для двух уровней в двух языках */

Q:lang(ru) { quotes: ‘"’ ‘"’ "’" "’" }

Q:lang(no) { quotes: "«" "»" "<" ">" }

/* Вставка кавычек до и после содержимого элемента Q */

Q:before { content: open-quote }

Q:after { content: close-quote }

к HTML-документу, представленному в листинге 9.2.

<html>

<head>

<title>Глава 9</title>

</head>

<body>

<p><q>Этот текст выделен кавычками.</q>

</body>

</html>

В результате его обработки браузером вы получите такой текст:

«Этот текст выделен кавычками.»

Если ту же таблицу стилей применить к HTML-документу, приведенному в листинге 9.3, то получим такую строку:

«Trondere graˇter naˇr <Vinsjan paˇ kaia> blir deklamert.»

<html>

<head>

<title>Глава 9</title>

</head>

<body>

<p><q>Trondere graˇter naˇr <q>Vinsjan paˇ kaia</q> blir deklamert.</q>

</body>

</html>

Как вы, наверное, заметили из примера, кавычки вставляются в соответствующие места документа благодаря значениям open-quote и close-quote, принимаемым свойством content. Каждое вхождение open-quote или close-quote в зависимости от глубины вложения заменяется одной из строк, принадлежащих значению свойства quotes.

Open-quote указывает на первую из двух кавычек, а close-quote – на вторую. Тип используемых кавычек зависит от уровня их вложенности.

Вы также можете задавать кавычки, используя один из шестнадцатеричных кодов, приведенных в табл. 9.1, предварительно поставив знак .

Например:

quotes: """ """ «2039» «203A»

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

В CSS существует два свойства для управления нумерацией: counter-increment и counter-reset. Счетчики, которые определены данными свойствами, используются функциями counter() и counters() свойства content. Рассмотрим подробно свойства для управления нумерацией.

• counter-increment – с помощью этого свойства вы можете задать одно или несколько имен счетчиков, после каждого из которых может быть указано целое число. Оно определяет величину, на которую увеличивается содержимое счетчика при каждом его использовании. По умолчанию значение счетчика увеличивается на единицу. Вы также можете использовать отрицательные целые числа.

• counter-reset – также содержит список из одного или нескольких имен счетчиков, после каждого из которых может быть указано целое число. Оно задает значение, которое сначала присваивается счетчику. По умолчанию значение равно 0.

Для примера рассмотрим таблицу стилей, которая нумерует главы и разделы таким образом: