www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Основы CSS (ЦСС) > Цвет

Цвет

контентовая версия  

CSS (ЦСС) имеет несколько опций для определения цвета контента и фоновых областей на web-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом ШТМЛ, но и дают массу новых возможностей. Например, традиционный путь для разработки цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц предлагая более простые и удобные варианты управления цветом.

В табл. 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. Установка цвета элемента по его названию

Валидный HTML
Валидный CSS
<!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. По шестнадцатеричному значению

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

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

Валидный HTML
Валидный CSS
<!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. Установка цвета элемента по шестнадцатеричному значению

Валидный HTML
Валидный CSS
<!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. Цвет фона и фоновое изображение

Валидный HTML
Валидный CSS
<!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. Повторяемость фонового рисунка

Валидный HTML
Валидный CSS
<!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. Положение фона

Валидный HTML
Валидный CSS
<!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.2009 Последнее обновление: 16.04.2009
Поиск по сайту
Основы CSS (ЦСС)
Разделы
CSS (ЦСС) по теме

background-attachment
Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с файлом.

background-color
Устанавливает фоновый цвет элемента.

background-image
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью.

background-position
Задает начальное положение фонового Имаги, установленного с помощью параметра background-image.

background-repeat
Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

color
Определяет цвет контента элемента.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект