Цвет - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Основы CSS » Цвет
Цвет
EvgenyДата: Вторник, 23.02.2010, 14:59 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
CSS имеет несколько опций для определения цвета текста и фоновых областей на веб-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом HTML, но и дают массу новых возможностей. Например, традиционный путь для создания цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц предлагая более простые и удобные варианты управления цветом.

В табл. 1 перечислены свойства элементов, предназначенных для задания цвета.

[small]Табл. 1. Управление цветом фона и текста[/small]
Свойство Значение Описание Пример
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).

[small]Пример 1. Установка цвета элемента по его названию[/small]

Code
<!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).

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

Code
<!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).

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

Code
<!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, который устанавливает прозрачный фон. Для установки фонового рисунка используется абсолютный или относительный адрес к файлу. Рекомендуется задавать одновременно фоновый рисунок и цвет фона, который будет использоваться в случае недоступности файла изображения.

[small]Пример 4. Цвет фона и фоновое изображение[/small]

Code
<!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.

[small]Пример 5. Повторяемость фонового рисунка[/small]

Code
<!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).

[small]Пример 6. Положение фона[/small]

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

 
Форум » Статьи о CSS » Основы CSS » Цвет
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]