Фон элемента
Каскадные таблицы стилей позволяют задать цвет фона или использовать изображение в качестве фона. Для фонового рисунка можно задать начальное положение и указать, будет ли рисунок прокручиваться вместе с содержи- мым Web-страницы. Кроме того, можно контролировать, как фоновый рису- нок повторяется, что позволяет получить интересные спецэффекты. Напри- мер, если в качестве фонового рисунка указать градиентную полосу с высотой, равной высоте элемента страницы, и шириной, равной 1—2 мм, а затем задать режим повторения только по горизонтали, то первоначальное изображение будет размножено по горизонтали, и мы получим градиентную полосу любой ширины.
2.8.1. Цвет фона
С помощью атрибута background-color можно задать цвет фона:
body { background-color: green }
td { background-color: silver }
В качестве значения атрибута можно использовать слово transparent. Оно означает, что фон прозрачный:
td { background-color: transparent }
2.8.2. Фоновый рисунок
С помощью атрибута background-image можно задать URL-адрес изображе- ния, которое будет использовано в качестве фонового рисунка. Может быть указан абсолютный или относительный URL-адрес (относительно местопо- ложения таблицы стилей, а не документа):
body { background-image: url(foto1.gif) }
В качестве значения атрибута можно использовать слово none. Оно означает,
что фоновая заливка отключена:
body { background-image: none }
2.8.3. Режим повтора фонового рисунка
Атрибут background-repeat задает режим повтора фонового рисунка. Он может принимать следующие значения:
? repeat — рисунок повторяется и по вертикали, и по горизонтали (по умолчанию):
body { background-image: url(foto1.gif); background-repeat: repeat }
? repeat-x — рисунок повторяется по горизонтали:
body { background-image: url(foto1.gif); background-repeat: repeat-x }
? repeat-y — рисунок повторяется по вертикали:
body { background-image: url(foto1.gif); background-repeat: repeat-y }
? no-repeat — рисунок не повторяется:
body { background-image: url(foto1.gif); background-repeat: no-repeat }
2.8.4. Прокрутка фонового рисунка
Атрибут background-attachment определяет, будет ли фоновый рисунок прокручиваться вместе с документом. Он может принимать следующие зна- чения:
? scroll — фоновый рисунок прокручивается вместе с содержимым стра-
ницы (по умолчанию):
body { background-image: url(foto1.gif);
background-repeat: no-repeat; background-attachment: scroll }
? fixed — фоновый рисунок не прокручивается:
body { background-image: url(foto1.gif);
background-repeat: no-repeat; background-attachment: fixed }
2.8.5. Положение фонового рисунка
Атрибут background-position задает начальное положение фонового рисун- ка. В качестве значений атрибута задаются координаты в абсолютных едини- цах или в процентах. Координаты указываются через пробел:
body { background-image: url(foto1.gif); background-repeat: no-repeat;
background-attachment: fixed; background-position: 50% 50% }
Кроме того, могут быть указаны следующие значения:
? left — выравнивание по левому краю;
? right — по правому краю;
? center — по центру;
? top — по верху;
? bottom — по низу.
Пример:
body { background-image: url(foto1.gif); background-repeat: no-repeat;
background-attachment: fixed; background-position: left center }
2.8.6. Одновременное задание атрибутов фона
Атрибут background является сокращенным вариантом для одновременного указания значений атрибутов background-color, background-image, back- ground-position, background-repeat и background-attachment. Пример:
body { background: green url(foto1.gif) no-repeat fixed left center }
body { background: green }
Обратите внимание на то, что во втором примере мы указали только цвет фо- на. Если остальные атрибуты не указаны, то они получают значения по умол- чанию. Кроме того, поскольку значение атрибута однозначно определяет, к какому именно компоненту он относится, то их можно указывать в произ- вольном порядке.
2.9. Списки
Задать параметры списка можно не только с помощью параметров тегов, но и с помощью атрибутов стиля. Более того, каскадные таблицы стилей позво- ляют использовать в качестве маркера списка любое изображение.
2.9.1. Вид маркера списка
Атрибут list-style-type задает вид маркера списка. Он может принимать следующие значения:
? disc — выводит значки в форме кружков с заливкой:
ul { list-style-type: disc }
? circle — выводит значки в форме кружков без заливки:
ul { list-style-type: circle }
? square — выводит значки в форме квадрата с заливкой:
ul { list-style-type: square }
? decimal — нумерует строки арабскими цифрами:
ol { list-style-type: decimal }
? lower-roman — нумерует строки малыми римскими цифрами:
ol { list-style-type: lower-roman }
? upper-roman — нумерует строки большими римскими цифрами:
ol { list-style-type: upper-roman }
? lower-alpha — нумерует строки малыми латинскими буквами:
ol { list-style-type: lower-alpha }
? upper-alpha — нумерует строки большими латинскими буквами:
ol { list-style-type: upper-alpha }
? none — никак не помечает позиции списка:
ol { list-style-type: none }
2.9.2. Изображение в качестве маркера списка
Атрибут list-style-image задает URL-адрес изображения, которое будет использовано в качестве маркера списка.
Относительные адреса указываются относительно расположения таблицы стилей, а не HTML-документа:
ol { list-style-image: url(foto1.gif) }
2.9.3. Компактное отображение списка
Атрибут list-style-position позволяет задать более компактное отображе-
ние списка. Может принимать следующие значения:
? outside — по умолчанию. Маркер отображается отдельно от текста:
ol { list-style-position: outside }
? inside — более компактное отображение списка. Маркер входит в состав текста:
ol { list-style-position: inside }
2.10. Вид курсора
Атрибут cursor задает форму курсора мыши при наведении на элемент стра-
ницы. Может принимать следующие значения:
? auto — Web-браузер сам определяет форму курсора мыши:
p { cursor: auto }
? crosshair — в виде креста:
p { cursor: crosshair }
? default — стрелка (курсор по умолчанию):
p { cursor: default }
? pointer — в виде руки:
p { cursor: pointer }
? move — стрелка, указывающая во все направления:
p { cursor: move }
? n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, e- resize, w-resize — стрелки, показывающие направление:
p { cursor: n-resize }
? text — текстовый курсор:
p { cursor: text }
? wait — песочные часы:
p { cursor: wait }
? progress — стрелка с песочными часами:
p { cursor: progress }
? help — стрелка с вопросительным знаком:
p { cursor: help }
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- 50 СПОСОБОВ ЗАСТАВИТЬ GOOGLE ЛЮБИТЬ ВАШ САЙТ (0)
- Добавление тени к блоку (0)
- Выравнивание текста по ширине (0)
- Вывод текста заглавными буквами с помощью CSS (0)
- Изменение стиля маркеров списка или удаление маркеров (0)
- Удаление средствами CSS синей рамки вокруг изображения, выполняющего функцию ссылки (0)
- Задание фонового изображения для страницы с помощью CSS (0)