HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
background-repeat: no-repeat|repeat|repeat-x|repeat-y|inherit
Здесь доступны четыре значения.
— no-repeat — фоновое изображение не будет повторяться никогда; в этом случае часть фона элемента Web-страницы останется не заполненной им.
— repeat — фоновое изображение будет повторяться по горизонтали и вертикали (обычное поведение).
— repeat-x — фоновое изображение будет повторяться только по горизонтали.
— repeat-y — фоновое изображение будет повторяться только по вертикали.
С помощью атрибута стиля background-position можно указать позицию фонового изображения относительно элемента Web-страницы, для которого оно назначено:
background-position: <горизонтальная
Горизонтальная позиция фонового изображения задается в следующем формате:
<числовое значение>|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 предлагает забавную возможность — запрет прокрутки графического фона Web- страницы и фиксация его на месте. Фиксацией фона управляет атрибут стиля background-attachment:
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.
Здесь мы поместили во встроенный контейнер фрагмент абзаца.
Толку от нашего первого встроенного контейнера никакого. Поэтому давайте привяжем к нему какой-нибудь стиль (листинг 8.1).
Представление для нашего Web-сайта, часть 1
Изучив гору теории, приступим к практике. Начнем создавать представление для нашего первого Web-сайта.
Все стили, которые мы применим к Web-страницам, поместим во внешнюю таблицу стилей main.css. Создадим ее и поместим в корневой папке Web-сайта. После чего привяжем ее ко всем Web-страницам, входящим в него. Как мы помним из главы 7, это выполняется с помощью тега <LINK>.
Для главной Web-страницы index.htm этот тег будет выглядеть так:
<LINK REL="stylesheet" href="#" TYPE="text/css">
Для всех Web-страниц, хранящихся в папке tags, он будет таким:
<LINK REL="stylesheet" href="#" TYPE="text/css">
Внесем в HTML-код всех Web-страниц этот тег и сохраним их.
В тегах <LINK>, привязывающих таблицу стилей к Web-страницам, мы указали относительные интернет-адреса. Это позволит нам просматривать Web-страницы, открывая их в Web-обозревателе без использования Web-сервера. Так проще.