Свойства цвета

23.09.2010

Влад Мержевич

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

В табл. 1 перечислены свойства элементов, предназначенных для задания цвета.

Табл. 1. Управление цветом фона и текста
Свойство	Значение	Описание	Пример
color	Цвет	Устанавливает цвет текста	P { color: #330000 }
background-color	Цвет transparent	Цвет фона	BODY { background-color: #6699FF }
background-image	URL none	Фоновый рисунок	BODY { background-image: url (bg.gif) }
background-repeat	repeat repeat-x repeat-y no-repeat	Повторяемость фонового рисунка	BODY { background-image: url (bg.gif) background-repeat: repeat-y }
background-attachment	scroll fixed	Прокручиваемость фона вместе с документом	BODY { background-image: url (bg.gif) background-attachment: fixed }
background-position	Проценты Пикселы top center bottom left right	Начальное положение фонового рисунка	BODY { background-position: left top }

Установка цвета

Цвет, используя CSS, можно задавать тремя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию (пример 1).

Пример 1. Установка цвета элемента по его названию

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет</title>
  <style type="text/css">
   P { 
    color: navy; /* Цвет текста */
    background-color: yellow; /* Цвет фона */ 
   } 
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet...</p>
 </body>
</html>

2. По шестнадцатеричному значению

Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML (пример 2).

Пример 2. Установка цвета элемента по шестнадцатеричному значению

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет</title>
  <style type="text/css">
   H1 { color: #fc0; }
   P { 
    color: #F9E71A; 
    background-color: #98560F; 
   } 
  </style>
 </head>
 <body>
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet...</p>
 </body>
</html>

Также допустимо использовать сокращенную запись, вроде #fc0. Она означает, что каждый символ дублируется, в итоге получим #ffcc00.

3. С помощью RGB

Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении (пример 3).

Пример 3. Установка цвета элемента по шестнадцатеричному значению

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет</title>
  <style type="text/css">
   P { 
    color: RGB(249, 231, 16); 
    background-color: RGB(85%, 24%, 5%); 
   } 
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet...</p>
 </body>
</html>

Установка цвета фона и фонового рисунка

Цвет фона определяется значением свойства background-color, а изображение, которое используется в качестве фона, задается свойством background-image. Значением по умолчанию для цвета фона является transparent, которое устанавливает прозрачный фон. Для установки фонового рисунка используется абсолютный или относительный адрес к файлу. Рекомендуется задавать одновременно фоновый рисунок и цвет фона, который будет использоваться в случае недоступности файла изображения.

Пример 4. Цвет фона и фоновое изображение

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет фона</title>
  <style type="text/css">
   BODY { 
    background-color: #98560F; /* Цвет фона */
    background-image: url(images/bg.jpg); /* Путь к фоновому рисунку */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet...</p>
 </body>
</html>

Если задано фоновое изображение, то свойство background-repeat определяет его повторяемость и способ, как это делать. Допустимыми значениями являются repeat (повторяемость по вертикали и горизонтали), repeat-x (по горизонтали), repeat-y (по вертикали) и no-repeat (только один рисунок, без повторения), как показано в примере 5.

Пример 5. Повторяемость фонового рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фон</title>
  <style type="text/css">
   BODY { 
    background-image: url(images/gradient.png); /* Путь к фоновому рисунку */
    background-color: #b9c79a; /* Цвет фона */
    background-repeat: repeat-x; /* Повторение фона по горизонтали */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet...</p>
 </body>
</html>

В данном примере фоновый рисунок повторяется по горизонтали.

Положение фона определяется свойством background-position. У него два значения, положение по горизонтали (может быть — right, left, center) и вертикали (может быть — top, bottom, center). Положение можно, также, задавать в процентах, пикселах или других абсолютных единицах (пример 6).

Пример 6. Положение фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Фон</title>
  <style type="text/css">
   BODY { 
    background-attachment: fixed; /* Фиксируем фон */
    background-image: url(images/home.png); /* Путь к фоновому рисунку */
    background-repeat: no-repeat; /* Отменяем повторение фона */
    background-position: right bottom; /* Положение фона */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet...</p>
 </body>
</html>

В данном примере фон будет помещен в правый нижний угол страницы. Если нужно определить рисунок в левом верхнем углу, то надо задать следующий вид: background-position: left top.

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

цвет фон