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
Transitional//EN">
<html>
<head>
<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
Transitional//EN">
<html>
<head>
<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
Transitional//EN">
<html>
<head>
<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
Transitional//EN">
<html>
<head>
<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
Transitional//EN">
<html>
<head>
<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
Transitional//EN">
<html>
<head>
<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 фиксирует
фон, чтобы он оставался неподвижным при прокрутке содержимого окна браузера.