CSS имеет несколько опций для определения цвета текста и фоновых областей на веб-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом HTML, но и дают массу новых возможностей. Например, традиционный путь для создания цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц предлагая более простые и удобные варианты управления цветом.
В таблице перечислены свойства элементов, предназначенных для задания цвета.
Свойство | Значение | NC | IE | Op | Описание | Пример |
---|---|---|---|---|---|---|
color | Цвет |
4+ |
3+ |
3+ | Устанавливает цвет текста | P { color: #330000 } |
background-color | Цвет transparent |
4+ |
4+ |
3+ | Цвет фона | BODY { background-color: #6699FF } |
background-image |
URL none |
4+ |
4+ |
3+ | Фоновый рисунок | BODY { background-image: url (bg.gif) } |
background-repeat | repeat repeat-x repeat-y no-repeat |
4+ |
4+ |
3+ | Повторяемость фонового рисунка | BODY { background-image: url (bg.gif) background-repeat: repeat-y } |
background-attachment | scroll fixed |
6 |
4+ |
4+ |
Прокручиваемость фона вместе с документом | BODY { background-image: url (bg.gif) background-attachment: fixed } |
background-position | Проценты Пикселы top center bottom left right |
6 |
4+ |
3+ |
Начальное положение фонового рисунка | BODY { background-position: left top } |
NC - Netscape Communicator, IE - Microsoft Internet Explorer, Op - Opera; 4+ означает, что свойство поддерживается в браузере 4 версии и выше.
Цвет, используя CSS, можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию - blue,red...
2. По шестнадцатеричному значению
Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML.
P { color: #F9E71A; background-color: #98560F } |
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном
исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также
можно задавать цвет в процентном отношении.
P { color: RGB(249, 231, 16); background-color: RGB(85%, 24%, 5%) } |
Цвет фона определяется значением параметра background-color, а изображение, которое используется в качестве фона, задается параметром background-image. Значением по умолчанию для цвета фона является transparent, который задает прозрачный фон. Для указания фонового рисунка используется абсолютный или относительный адрес к файлу. Рекомендуется задавать одновременно фоновый рисунок и цвет фона, который будет использоваться в случае недоступности файла изображения.
BODY { background-color: #98560F; background-image: url(//images/001/bg.gif) } |
Если задано фоновое изображение, то свойство background-repeat определяет его повторяемость и способ, как это делать. Допустимыми значениями являются repeat (повторяемость по вертикали и горизонтали), repeat-x (по горизонтали), repeat-y (по вертикали) и no-repeat (только один рисунок, без повторения).
BODY { background-image: url(//images/001/bg.gif); background-repeat: repeat-y } |
В примере фоновый рисунок повторяется по вертикали.
Положение фона определяется параметром background-position. У него два значения, положение по горизонтали (может быть - right, left, center) и вертикали (может быть - top, bottom, center). Положение можно, также, задавать в процентах, в пикселах или других абсолютных единицах.
BODY { background-attachment: fixed; background-image: url(mybg.gif); background-repeat: no-repeat; background-position: right bottom } |
В примере фон будет помещен в правый нижний угол страницы. Если нужно определить рисунок в левом верхнем углу, то надо задать следующий вид: background-position: left top.
Параметр background-attachment: fixed фиксирует фон, чтобы он оставался неподвижным при прокрутке содержимого окна браузера.
Примечание:
Позиционирование фона и его фиксация не работает в браузере Netscape 4.
[Назад] [Содержание] [Вперед]