HTML, XHTML и CSS на 100%
Шрифт:
Если вы задали фоновое изображение, то нужно указать свойство background-attachment, которое определяет, будет ли изображение фиксироваться относительно окна просмотра (значение fixed) или перемещаться вместе с документом (значение scroll) в процессе его прокрутки.
Рассмотрим пример:
body {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
При использовании приведенного примера для какого-то HTML-документа цвет фона документа станет красным, а
Вы также можете задать начальное положение фонового изображения на странице, используя свойство background-position. Есть несколько способов присвоения значения данному свойству.
Например, вы можете задавать местоположение, используя проценты. Причем если вы используете пару значений 0 % 0 %, то верхний левый угол изображения выравнивается относительно верхнего левого угла краевой линии отступов блока. Если зададите пару значений 100 % 100 %, то нижний правый угол изображения помещается в нижний правый угол краевой линии отступов. Если вы зададите пару значений 14 % 8 4 %, то верхний левый угол изображения смещается вдоль изображения на 14 % вправо по горизонтали и на 84 % вниз по вертикали. Тем самым он помещается в точку, смещенную вдоль области, предназначенной для отступов, на 14 % вправо по горизонтали и на 84 % вниз по вертикали.
Вы также можете задать данное значение, используя число и единицу длины. Например, если вы зададите пару 2 cm 2 cm, то верхний левый угол изображения помещается на 2 см правее и 2 см ниже верхнего левого угла области, предназначенной для отступов.
Помимо этого, вы можете использовать в качестве значений ключевые слова. Ниже приведены их список и описания:
• 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-адрес документа, который должен быть вставлен, счетчик, кавычки либо значение атрибута. Вы можете создавать сложную вложенную строку, используя строку текста, счетчики, значения атрибутов элемента одновременно. При этом сложная строка должна быть разделена только пробелами, а не запятыми. Например: