Цвет

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

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=windows-1251">
<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=windows-1251">
<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=windows-1251">
<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=windows-1251">
<title>Цвет фона</title>
<style type="text/css">
BODY {
background-color: #98560F; /* Цвет фона */
background-image: url('/images/bg.gif'); /* Путь к фоновому рисунку */
}
</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=windows-1251">
<title>Фон</title>
<style type="text/css">
BODY {
background-image: url('/images/bg.gif'); /* Путь к фоновому рисунку */
background-repeat: repeat-y;/* Повторение фона по вертикали */
}
</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=windows-1251">
<title>Фон</title>
<style type="text/css">
BODY {
background-attachment: fixed; /* Фиксируем фон */
background-image: url('mybg.gif'); /* Путь к фоновому рисунку */
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 фиксирует фон, чтобы он оставался неподвижным при прокрутке содержимого окна браузера.

Статья опубликована: 13.09.2005

Последнее обновление: 16.04.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

Андрей

29.06.2006

почему то с фоновым рисунком не получилось.его просто не видит

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

29.06.2006

Путь надо правильный указывать к файлу.

xattabych

26.10.2006

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

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

07.11.2006

Используйте значение transparent параметра background-color.

Владимир

22.01.2007

Доступно написано. Спасибо.
Заодно и спросить, как прописать через стиль команду моусовер, для замены цвета ячейки в таблице при наведении мыши. Обычная команда не отображается в експлоере.

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

23.01.2007

Например, так.

<html>
<body>
<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center>
<tr>
<td align=center bgcolor=#CCCCCC onMouseOver="this.style.background=`#FFCC33`"
onMouseOut="this.style.background=`#CCCCCC`" onClick="document.location=`1.html`" style="cursor: hand"><a
href="link1.htm">Пункт 1</a></td>
<td align=center bgcolor=#CCCCCC><a href="link2.htm">Пункт 2</a></td>
</tr>
</table>
</body>
</html>

Андрей

27.03.2007

Подскажите как можно применить несколько фоновых рисунков с разными параметрами к одному елименту например к слою.

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

28.03.2007

Никак.

Андрей

28.03.2007

А что же, извените, тогда можно сделать?

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

29.03.2007

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

Александр

17.05.2007

Пробовал как в примере 6, но IE-7 почемуто не отображает. В чем причина?

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

18.05.2007

Должен отображать, проверь путь к графическому файлу.

Dee

27.05.2007

В таблице стилей пишу такую конструкцию:
span.red {color:"#E00";}
в файле html пишу:
...
<td><span class="red">Текст красного цвета</span></td>
...
В IE все нормально, а FireFox этот параметр игнорирует.
Подскажите, пожалуйста, в чем проблема?

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

29.05.2007

Кавычки не нужны. Следует писать color: #E00

08.06.2007

Было бы замечательно, если бы на этом сайте появились таблицы цветов. Сделайте, пожалуйста, Влад.

Sysa

21.06.2007

Запукался уже... в Css:

background-image: url('images/City.jpg');

для div. IE и Opera картинку показывают, Firefox нет

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

24.07.2007

Sysa, проверь вначале, загружается ли вообще картинка в Firefox, потом используй позиционирование рисунка через background-position, может просто за границей слоя изображение показывается.

Roman

25.07.2007

Погогите реализовать вставку двух и более картинок background-image

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

31.07.2007

Делай вложенные слои и для каждого слоя задавай свой фоновый рисунок.

Ольга

30.08.2007

Не показывает фон
background: url ('C

снова/back01.gif') repeat-y 50%;

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

03.09.2007

Используйте путь относительно страницы или корня сайта, а не относительно диска С.

Lesso

18.02.2008

А как сделать, чтобы был основной фон с рисунком, а при прокрутке страницы вниз, в самом конце был ещ? один фоновый рисунок, который бы выравнивался по концу страницы, так как страница динамическая и имеет разную длинну задать ч?ткое значение в пикселях не получится.
Спасибо.

Гордей

23.03.2008

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

Андрей

27.03.2008

Хочу использовать в качестве фона градиент с плавным переходом от одного цвета к другому. Если размножать по X и Y, то получается чушь, а целый загружать многовато. Подскажите можно ли сделать так чтоб загружалось небольшое изображение и браузер его растягивал (не размножал, а растягивал) сам?

Константин

19.04.2008

Можно средствами css сделать градиент? всмысле без рисунков и repeat-x

Юра

05.05.2008

Андрей и Константин. может вам вот это поможет: http://anton.shevchuk.name/html-and-css/css-gradient/

Юрий

16.06.2008

Не показывает фон
background: url ('Cснова/back01.gif') repeat-y 50%;

Mozilla не загружает картинки с кириллическими именами с локального диска.

Цвет

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

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

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

3. С помощью RGB

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

Комментарии к статье

Добавить комментарий