Свойства элементов CSS

49 50 51 52 53 54 55

Цвет и фон в 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;

}

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

Свойство BACKGROUND-ATTACHMENT

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

Может принимать два значения:

SCROLL - фон прокручивается вместе с содержимым;

FIXED - фон строго зафиксирован.

BODY {

background-image: url(smile.png);

background-repeat: no-repeat;

background-attachment: scroll;

}

BODY {

background-image: url(smile.png);

background-repeat: no-repeat;

background-attachment: fixed;