ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Каскадные таблицы стилей позволяют задать цвет фона или использовать изображение в качестве фона. Для фонового рисунка можно задать начальное положение и указать, будет ли рисунок прокручиваться вместе с содержимым веб-страницы. Кроме того, можно контролировать, как фоновый рисунок повторяется, что позволяет получить интересные спецэффекты. Например, если в качестве фонового рисунка указать градиентную полосу с высотой, равной высоте элемента страницы, и шириной, равной 1-2 мм, а затем задать режим повторения только по горизонтали, первоначальное изображение будет размножено по горизонтали, и мы получим градиентную полосу любой ширины.

Цвет фона

С помощью атрибута background-color можно задать цвет фона:

body { background-color: blue }

td { background-color: silver }

В качестве значения атрибута можно использовать слово transparent. Оно означает, что цвет прозрачный:

td { background-color: transparent }

Фоновый рисунок

С помощью атрибута background-image можно задать URL-адрес изображения, которое будет использовано в качестве фонового рисунка. Может быть указан абсолютный или относительный URL-адрес (относительно местоположения таблицы стилей, а не документа):

body { background-image:url(images/foto14.gif) }

В качестве значения атрибута можно использовать слово none. Оно означает, что фоновая заливка отключена:

body { background-image: none }

Режим повтора фонового рисунка

Атрибут background-repeat задает режим повтора фонового рисунка. Он может принимать следующие значения:

• repeat —рисунок повторяется и по вертикали, и по горизонтали (по умолчанию);

• body { background-image: url(images/foto14.gif); background-repeat: repeat }

• repeat-x — рисунок повторяется по горизонтали;

• body { background-image: url(images/foto14.gif); background-repeat: repeat-x }

• repeat-y — рисунок повторяется по вертикали;

• body { background-image: url(images/foto14.gif); background-repeat: repeat-y }

• no-repeat — рисунок не повторяется:

• body { background-image: url(images/foto14.gif); background-repeat: no-repeat }

Прокрутка фонового рисунка

Атрибут background-attachment определяет, определяет будет ли фоновый рисунок прокручиваться вместе с документом. Он может принимать следующие значения:

• scroll —фоновый рисунок прокручивается вместе с содержимым страницы (по умолчанию);

• body { background-image: url (images/foto14.gif); background-repeat: no-repeat; background-attachment:scroll }

• fixed — фоновый рисунок не прокручивается;

• body { background-image: url (images/foto14.gif); background-repeat: no-repeat; background-attachment: fixed}

Положение фонового рисунка

Атрибут background-position задает начальное положение фонового рисунка. В качестве значений атрибута задаются координаты в абсолютных единицах или процентах. Координаты указываются через пробел:

body { background-image: url(images/foto14.gif); background-repeat: no-repeat; background-attachment:scroll; background-position: 50% 50% }

Списки

Задать параметры списка можно не только с помощью параметров тегов, но и с помощью атрибутов стиля. Более того, каскадные таблицы стилей позволяют использовать в качестве маркера списка любое изображение.

Вид маркера списка

Атрибут list-style-type задает вид маркера списка. Он может принимать следующие значения:

• disk —выводит значки в форме кружков с заливкой;

• >UL { list-style-type: disk }

• circle — выводит значки в форме кружков без заливки;

• UL { list-style-type: circle }

• square — выводит значки в форме квадрата с заливкой;

• UL { list-style-type: square }

• decimal — нумерует строки арабскими цифрами;

• ОL { list-style-type: decimal }

• lower-roman — нумерует строки малыми римскими цыфрами;

• ОL { list-style-type: lower-roman }

• upper-roman — нумерует строки большими римскими цыфрами;

• ОL { list-style-type: upper-roman }

• lower-alpha — нумерует строки малыми латинскими буквами;

• ОL { list-style-type: lower-alpha }

• upper-alpha — нумерует строки большими латинскими буквами;

• ОL { list-style-type: upper-alpha }

• none — никак не помечает позиции списка;

• ОL { list-style-type: none }

Изображение в качестве маркера списка

Атрибут list-style-image задает URL-адрес изображения, которое будет использовано в качестве маркера списка.

Относительные адреса указываются относительно расположения таблиц стилей, а не HTML-документа.

OL { list-style-image: url (foto.gif) }

Компактное отображение списка

Атрибут list-style-position позволяет задать более компактное отображение списка. Может принимать следующие значения:

• outside —по умолчанию. Маркер отображается отдельно от текста;

• OL { list-style-position: outside }

• inside —более компактное отображение списка. Маркер входит в состав текста;

• OL { list-style-position: inside }