HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Графический фон выводится поверх обычного фона, заданного нами с помощью атрибута стиля background-color. И, если фоновое изображение содержит "прозрачные" фрагменты (такую возможность поддерживают форматы GIF и PNG), этот фон будет "просвечивать" сквозь них.
Пример:
TABLE.yellow { background-color: yellow; background-image: url("/yellow_background.png") }
Здесь мы задали для таблицы и обычный, и графический фон. Это, кстати, распространенная практика в Web-дизайне.
Если фоновое изображение меньше, чем элемент Web-страницы (или сама Web- страница), для которого оно задано, Web-обозреватель будет повторять
background-repeat: no-repeat|repeat|repeat-x|repeat-y|inherit
Здесь доступны четыре значения.
— no-repeat — фоновое изображение не будет повторяться никогда; в этом случае часть фона элемента Web-страницы останется не заполненной им.
— repeat — фоновое изображение будет повторяться по горизонтали и вертикали (обычное поведение).
— repeat-x — фоновое изображение будет повторяться только по горизонтали.
— repeat-y — фоновое изображение будет повторяться только по вертикали.
С помощью атрибута стиля background-position можно указать позицию фонового изображения относительно элемента Web-страницы, для которого оно назначено:
background-position: <горизонтальная позиция> [<вертикальная позиция>] | inherit;
Горизонтальная позиция фонового изображения задается в следующем формате:
<числовое значение>|left|center|right
Числовое значение указывает местоположение фонового изображения в элементе Web-страницы по горизонтали и может быть задано с применением любой из поддерживаемых CSS единиц измерения (см. табл. 8.1). Также можно указать следующие значения:
— left — фоновое изображение прижимается к левому краю элемента Web-страницы (это обычное поведение);
— center — располагается по центру;
— right — прижимается к правому краю.
Формат задания вертикальной позиции фонового изображения таков:
<числовое значение>|top|center|bottom
Числовое значение указывает местоположение фонового изображения в элементе Web-страницы по вертикали и может быть задано с применением любой из поддерживаемых CSS единиц измерения.
Также возможны следующие значения:
— top — фоновое изображение прижимается к верхнему краю элемента Web-страницы (это обычное поведение);
— center — располагается по центру;
— bottom — прижимается к нижнему краю.
Если для какого-либо элемента Web-страницы указана только позиция фонового изображения по горизонтали, его вертикальная позиция принимается равной center.
Пример:
TABLE.bgr (background-position: 1cm top }
Этот стиль помещает фоновое изображение на расстоянии 1 см от левого края элемента Web-страницы и прижимает его к нижнему краю данного элемента. А вот стиль, прижимающий фоновое изображение к правому краю элемента Web-страницы и располагающий его в центре данного элемента по вертикали:
TABLE.bgr (background-position: right }
Когда мы прокручиваем содержимое Web-страницы в окне Web-обозревателя, вместе с ней прокручивается и фоновое изображение (если оно есть). Стандарт CSS предлагает забавную возможность — запрет
background-attachment: scroll|fixed;
Значение scroll заставляет Web-обозреватель прокручивать фон вместе с содержимым Web-страницы (это поведение по умолчанию). Значение fixed фиксирует фон на месте, и он не будет прокручиваться.
НА ЗАМЕТКУ
Вероятно, имеет смысл фиксировать только графический фон, заданный для самой Web-страницы. Графический фон у отдельных элементов Web-страницы фиксировать не следует.
На этом мы пока закончим с атрибутами стиля CSS. Рассмотрим новую разновидность элементов Web-страниц, с которой еще не сталкивались. Это…
Контейнеры. Встроенные контейнеры
В самом начале данной главы мы узнали, что все рассмотренные нами атрибуты стилей можно указывать для любых элементов Web-страниц: и блочных, и встроенных. Значит, мы можем задать размер шрифта и для абзаца (блочного тега ), и для важного текста (встроенных тегов <STRONG> и <EM>). Это очень полезная возможность.
Но что делать, если нам понадобилось применить какой-либо стиль к произвольному фрагменту текста, не помечая его никаким тегом? Например, нам нужно выделить полужирным шрифтом фрагмент абзаца, но мы не хотим заключать его в тег
<STRONG>. Может ли CSS нам в этом помочь?
CSS не может. Зато может HTML. Он специально для таких случаев предоставляет особые элементы Web-страницы — контейнеры — и, конечно, соответствующие теги. О контейнерах сейчас и пойдет разговор.
Контейнер — элемент Web-страницы, предназначенный только для выделения какого-либо ее фрагмента. Таким фрагментом может быть часть блочного элемента (абзаца, заголовка, цитаты, текста фиксированного форматирования и др.), блочный элемент или сразу несколько блочных элементов. Web-обозреватель никак не выделяет контейнер на Web-странице.
Контейнер служит двум целям. Во-первых, с его помощью мы можем привязать к определенному элементу или элементам Web-страницы нужный стиль; для этого достаточно заключить данный элемент или элементы в контейнер и привязать стиль к нему. Во-вторых, он может обеспечивать привязку поведения к элементу или элементам Web-страницы; выполняется это таким же образом, что и в случае стиля. (О поведении Web-страницы разговор пойдет в части III.)
Контейнеры бывают блочные и встроенные. Разговор о блочных контейнерах мы отложим до главы 10, в которой будем рассматривать контейнерный Web-дизайн. Поговорим о встроенных контейнерах.
Уже по определению ясно, что встроенный контейнер является частью блочного элемента Web-страницы. Так, блочным контейнером может стать фрагмент абзаца или цитаты, графическое изображение, помещенное в абзац, и др.
Встроенный контейнер создается с помощью парного тега <SPAN>. Фрагмент блочного элемента, который нужно превратить в содержимое встроенного контейнера, помещают в этот тег:
<SPAN>Представление</SPAN> создается с помощью стилей CSS.