Свойства цвета и фона

Свойство color определяет цвет любого элемента CSS.

Пример:

SMALL {color: red:}

Свойство background-color указывает на цвет фона какого-либо элемента, причем этот цвет устанавливается именно для отображения элемента, а не всего html-документа. Учтите, что интерпретаторы разных браузеров обрабатывают данное свойство неодинаковым образом: например, Netscape Navigator выделяет фоновым цветом сам элемент страницы, причем выделение ограничивается его видимой шириной, a Internet Explorer растягивает выделение на всю ширину страницы.

Пример:

H1 { background-color: #f00000;}

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

Пример:

BODY {background-image: URL(/images/picture.gif):}

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

· no-repeat — не повторять изображение;

· repeat — повторять изображение во всех направлениях;

· repeat-x —только по горизонтали;

· repeat-y — только по вертикали.

Пример:

BODY {background-repeat: no-repeat:}

Свойство background-attachment устанавливает правила скроллинга фонового изображения. Может принимать одно из двух значений: scroll заставляет фоновое изображение двигаться вместе с содержимым web-страницы при прокрутке документа, a fixed фиксирует изображение на экране.

Пример:

BODY { background-attachment: scroll:}

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

· top — позиционирование по верхней границе экрана,

· middle — по центру экрана,

· bottom — по нижней границе,

· left — выравнивание по левой границе экрана или ячейки таблицы,

· right — выравнивание по правой границе,

· center — выравнивание по центру. Можно также указать в качестве значения этого свойства расстояние от левой и верхней границы видимой части экрана до изображения в пикселах, миллиметрах или сантиметрах.

Пример использования:

BODY {background-position: 30cm 0cm;}

TD {background-position: middle:}

Свойства границ

Свойства margin-left, margin-right, margin-top и margin-bottom определяют значения отступов вокруг содержащего их элемента в пикселах, сантиметрах или миллиметрах соответственно слева, справа, сверху и снизу. Отступ представляет собой пустое пространство, не заполненное никакими другими элементами. Данные свойства могут применяться совместно с элементами изображений, абзацев, таблиц, любых других компонентов, для которых вы хотите указать описанные здесь значения.

Пример:

Р {margin-left: 20px;}

IMG{

margin-top: 10mm:

margin-left: 15mm;

margin-bottom: 10mm:

}

Свойства padding-left, padding-right, padding-top и padding-bottom, аналогично рассмотренным выше, описывают значения отступов от видимых рамок объектов HTML, например таблиц. Величина отступов также определяется в пикселах, сантиметрах или миллиметрах. Они могут применяться как вместе, так и по отдельности.

Пример:

TABLE {

padding-left: 10рх:

padding-right:10px;

padding-top: 15px:

padding-bottom: 15px:

}

Свойства border-top-width, border-bottom-width, border-right-width и border-left-width определяют толщину видимого обрамления объектов, например таблиц и их ячеек, по правилам, аналогичным записи свойств, указанных выше.

Пример:

TD{

border-top-width: 2px:

border-bottom-width: 2px:

border-right-width: 1mm:

border-left-width: 1mm;

}

Свойство border-color описывает цвет видимого обрамления объектов — рамок изображений и бордюров таблиц.

Пример:

TABLE (border-color: blue;}

Свойства списков

Свойства списков применяются для настройки отображения элементов нумерованных и маркированных списков, определяемых в коде HTML тегом <LI>.В языке CSS данному элементу присваиваются следующие свойства. Свойство list-style-type определяет внешний вид маркера нумерованного или маркированного списка и может принимать одно из перечисленных далее значений:

· none — маркер списка не отображается; для маркированного списка

· disc — метка отображается в виде черного круга,

· circle — в виде полой окружности,

· square — в виде черного квадрата; для нумерованного списка

· decimal —метки отображаются в виде последовательности арабских чисел,

· lower-roman —в виде последовательности римских цифр, записанных в строчном регистре,

· upper-roman — в виде последовательности римских цифр в заглавном регистре,

· lower-alpha — в виде последовательности строчных букв, upper-alpha — в виде последовательности заглавных букв.

Пример:

LI {list-style-type: square:}

Свойство list-style-image позволяет назначить в качестве метки маркированного списка произвольное изображение.

Пример: