| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Параметры шрифта и фона
|
|
Параметры фона
Фон можно указать для фрагмента текста (встроенного элемента), блочного элемента, таблицы, ее ячейки и всей Web-страницы. Хорошо подобранный фон может оживить Web-страницу и выделить отдельные ее элементы.
Фон у отдельных элементов, отличный от фона самой Web-страницы, следует задавать только в крайних случаях. Иначе Web-страница станет слишком пестрой и неудобной для чтения.
Атрибут стиля background-color служит для задания цвета фона:
background-color: transparent|<цвет>|inherit
Цвет можно задать в виде RGB-кода или имени. Значение transparent убирает фон совсем; тогда элемент Web-страницы получит "прозрачный" фон. По умолчанию фон у элементов Web-страницы отсутствует, а фон самой Web-страницы задает Web-обозреватель.
Пример:
body { color: white;
background-color: black }
Здесь мы задали для всей Web-страницы черный фон и белый текст.
Атрибут стиля background-image позволяет назначить в качестве фона графическое изображение (фоновое изображение):
background-image: none|url(<интернет-адрес файла изображения>);
Обратим внимание, в каком виде задается интернет-адрес файла с фоновым изображением: его заключают в скобки, а перед ними ставят символы url:
table.bgr { background-image: url("/table_background.png") }
Значение none убирает графический фон.
Графический фон выводится поверх обычного фона, заданного нами с помощью атрибута стиля background-color. И, если фоновое изображение содержит "прозрачные" фрагменты (такую возможность поддерживают форматы GIF и PNG), этот фон будет "просвечивать" сквозь них.
Пример:
table.yellow { background-color: yellow;
background-image: url("/yellow_background.png") }
Здесь мы задали для таблицы и обычный, и графический фон. Это, кстати, распространенная практика в Web-дизайне.
Если фоновое изображение меньше, чем элемент Web-страницы (или сама Web-страница), для которого оно задано, Web-обозреватель будет повторять это изображение, пока не "замостит" им весь элемент. Параметры этого повторения задает атрибут стиля background-repeat:
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. В приведенном примере, стиль помещает фоновое изображение на расстоянии 1 см от левого края элемента Web-страницы и прижимает его к нижнему краю данного элемента.
Пример:
table.bgr ( background-position: 1cm top }
А вот стиль, прижимающий фоновое изображение к правому краю элемента Web-страницы и располагающий его в центре данного элемента по вертикали:
table.bgr ( background-position: right }
Когда мы прокручиваем содержимое Web-страницы в окне Web-обозревателя, вместе с ней прокручивается и фоновое изображение (если оно есть). Стандарт CSS предлагает забавную возможность — запрет прокрутки графического фона Web-страницы и фиксация его на месте. Значение scroll заставляет Web-обозреватель прокручивать фон вместе с содержимым Web-страницы (это поведение по умолчанию). Значение fixed фиксирует фон на месте, и он не будет прокручиваться. Фиксацией фона управляет атрибут стиля background-attachment:
background-attachment: scroll|fixed;
На заметку:
Вероятно, имеет смысл фиксировать только графический фон, заданный для самой Web-страницы. Графический фон у отдельных элементов Web-страницы фиксировать не следует.
На этом мы пока закончим с атрибутами стиля CSS.
 
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
