Уроки CSS

Работа с цветом и фоном

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

color

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

p {color: #0000ff}
p {color: blue}

а также

p {color: rgb(0,0,255)}

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

background-color

Задает цвет фона элемента. Значение задается, как и в свойстве color. Например:

p {color: #0000ff;
background-color: #ffff00}

в этом примере текст в абзаце задается синим цветом, а фон - желтым.

background-image

Задает фоновое изображение для элемента. Значением этого свойства является URL файла изображения. Например:

p {background-image: url(image.gif)}

background-repeat

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

repeat - изображение повторяется по вертикали и по горизонтали
repeat-y - изображение повторяется по вертикали
repeat-x - изображение повторяется по горизонтали
no-repeat - изображение не повторяется

Например:

p {background-image: url(image.gif);
background-repeat: repeat-x}

background-attachment

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

fixed - фон неподвижен
scroll - фон будет перемещаться вместе с содержимым страниы.

background-position

Это свойство задает смещение фонового изображения относительно левого верхнего угла элемента. Например:

p {background-image: url(image.gif);
background-position: -30px 100px}

это правило смещает фоновое изображение на 30 пикселов влево и на 100 пикселов вниз от верхнего левого угла абзаца. Смещение также можно задавать и в процентах. В этом случае проценты вычисляются относительно ширины и высоты блока элемента.