12.4. Свойства элементов css Цвет и фон в css

Основными свойствами цвета и фона в CSS являются:

• color;

• background-color;

• background-image;

• background-repeat;

• background-attachment;

• background-position;

• background.

Свойство COLOR

Задает основной цвет того или иного элемента. Например, если мы хотим сделать цвет всех заголовков первого уровня красным, а цвет текста параграфов зеленым, то таблица стилей будет выглядеть так:

H1 { color: red ; }

P { color: green ; }

Последняя строка дает описание цвета всему абзацу, а первая – изменяет цвет заголовков первого уровня.

Свойство background-color

Задает фоновый цвет элемента. В отличие от html, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы (т.е. имеющих атрибут bgcolor) в CSS, фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др.

Так, для того чтобы изменить фоновый цвет всей страницы, нужно задать это свойство элементу BODY - т.к. именно он отвечает за тело документа, т.е. за всю страницу.

BODY { background-color : #FFEE8C; }

H1 { color: red; background-color :blue; }

P { color: green; }

Свойство background-image

Данное свойство используется для задания фонового изображения. В примере ниже, приведен синтаксис такого тега. Данный параметр относится не только к свойству фона всего документа, но может также употребляться и для оформления ячеек таблиц и DIV элементов.

BODY { background-color : #FFEE8C; background-image : url(smile.png); }

H1 { color: red ; background-color :blue ; }

P { color: green; }

Как видите, в качестве значения свойства, указывается путь к изображению, но немного не так как в html. В начале пишется URL а затем сразу, без пробелов в круглых скобках точный или относительный адрес к картинке. Если она находится в той же папке, то пишем достаточно указать название картинки, как в примере выше. Если в подпапке, то запись преобразуется в следующую: url(img/smile.png).

Фоновое изображение в CSS можно задавать для любого элемента, не только для таблиц и всей страницы.

Свойство BACKGROUND-REPEAT

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

Это свойство может принимать четыре значения:

background-repeat: repeat-x;	повторение по горизонтали
background-repeat: repeat-y;	повторение по вертикали
background-repeat: repeat;	по вертикали и по горизонтали (значение по-умолчанию)
background-repeat: no-repeat;	не повторяется

Это очень полезное свойство, и аналогов ему в html нет.

Пример записи стиля:

BODY

{

background-image : url(smile.png);

background-repeat: repeat-x;

}

Если это свойство не указано, то будет использоваться его значение по умолчанию.