Цвет
CSS (ЦСС) имеет несколько опций для определения цвета контента и фоновых областей на web-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом ШТМЛ, но и дают массу новых возможностей. Например, традиционный путь для разработки цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц предлагая более простые и удобные варианты управления цветом.
В табл. 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. Установка цвета элемента по его названию
<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. По шестнадцатеричному значению
Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном ШТМЛ (пример 2).
Пример 2. Установка цвета элемента по шестнадцатеричному значению
<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. Установка цвета элемента по шестнадцатеричному значению
<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. Цвет фона и фоновое изображение
<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.gif'); /* Путь к фоновому рисунку */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>
Если задано фоновое изображение, то свойство background-repeat определяет его повторяемость и способ, как это делать. Допустимыми значениями являются repeat (повторяемость по вертикали и горизонтали), repeat-x (по горизонтали), repeat-y (по вертикали) и no-repeat (только один рисунок, без повторения), как показано в примере 5.
Пример 5. Повторяемость фонового рисунка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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. Положение фона
<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('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.2009 | Последнее обновление: 16.04.2009 |