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

Присвоение элементам цветовых и фоновых значения помогают создать зрелищную WEB-страницу. В CSS можно использовать множество свойств, которые придадут вашей странице требуемую привлекательность.

color  

Определяет цвет текста.

Может иметь значение:

   цвета любое соответствующее стандарту значение.

   p{color:red}
   p{color:rgb(255,0,0)}
   p{color:#ff0000}

Примеры: [1]

background  

Удобное свойство для установки сразу всех параметров фона. Если какие либо параметры будут пропущены, то берутся их значения по умолчанию.

Может иметь значение:

   background-color - значение цвета фона.
   background-image - значение фонового изображения.
   background-repeat - значение повторения фонового изображения.
   background-attachment - значение фиксации фонового изображения.
   background-position - значение положения фонового изображения.

   body{background:black url(graf/bomba.jpg) center no-repeat;}

    Далее мы рассмотрим эти свойства подробнее.

background-color

Определяет цвет фона.

Может иметь значение:

   цвета любое соответствующее стандарту значение
   transparent - фон элемента делается прозрачным (по умолчанию).

Примеры: [1]

background-image

Определяет фоновое изображение элемента.

Может иметь значение:

   none - фоновое изображение не устанавливается.
   URL фонового изображение любое соответствующее стандарту значение URL фонового изображение.

    h1{background-image: url(pictures.gif)}

Примеры: [1]

background-repeat  

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

Может иметь значение:

   repeat - фоновое изображение повторяется по горизонтали и по ветикали (по умалчанию).
   repeat-x - фоновое изображение повторяется только по горизонтали.
   repeat-y - фоновое изображение повторяется только по вертикали.
   no-repeat - фоновое изображение не повторяется.

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

Примеры: [1]

background-attachment

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

Может иметь значение:

   scroll - фоновое изображение прокручивается вместе с документом (по умолчанию)
   fixed - фоновое изображение фиксируется в окне браузера.

   body{background-image: url(pictures.gif); background-attachment: fixed;}

Примеры: [1]

background-position

Определяет положение изображения относительно верхнего левого угла содержащего его элемента. Одиночное значение устанавливает расстояние по горизонтали и вертикали. Смещение по умолчанию равно 50%. Возможно сочетание нескольких ключевых слов.

Может иметь значение:

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

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

Первое, соответствующее стандарту процентное значение - отношение (в процентах) смещения фонового изображение от левого края по горизонтали к длине содержащего его элемента.
Значение по умолчанию 0%, что равносильно верхнему левому углу.

Второе, соответствующее стандарту процентное значение - отношение (в процентах) смещения фонового изображения от левого края по вертикали к высоте содержащего его элемента.

   top - размещение фонового изображение по верхнему краю
   center - размещение фонового изображение по центру содержащего его элемента.
   bottom - размещение фонового изображения по нижнему краю.
   left - размещение фонового изображение по левому краю.
   right - размещение фонового изображение по правому краю.

   body {background-image : url(pictures.gif); background-repeat : center;}

Примеры: [1]