Глава 4. Цвет и фон
В этой главе мы поговорим о том, как с помощью CSS присвоить цвет элементу и его фону, а так же о том, как использовать рисунок в качестве фона элемента и управлять его положением.
Перед тем как перейти непосредственно к обучению, проведу краткий экскурс на тему "Цвета в интернете".
Цвет в CSS может быть задан 3 методами:
С именным значением цвета всё понятно black - черный, green - зелёный, olive - оливковый и т.д.
Однако по понятным причинам не для всех оттенков цветов зарезервировано индивидуальное имя. Когда возникает необходимость в использовании какого либо "нестандартного" цвета необходимо определить его значение RGB(Red,Green,Blue) сочетание красного, зеленого и синего цвета в числовом выражении. Каждый оттенок из основных цветов в системе RGB может выражаться в числе от 0 до 255.
Например, черный цвет будет иметь значение 0,0,0, т.е. отсутствие всякого цвета (белый - значение 255,255,255) теоретически если смешать основные цвета должен получится белый, а вот например классический синий цвет имеет значение 0,0,255, т.е. на "мольберте" присутствует только синий. На рисунке наглядно показано, что происходит с красками если их смешать, так смешивая оттенки основных цветов можно добиться любого цвета из видимого спектра.
Однако в большинстве случаев "веб краски" имеют 16-ное выражение 10-ного значения RGB.
В 16-ном исчислении цифры от 10 до 15 заменены латинскими буквами и числовой ряд приобретает следующий вид: 0,1,2…9,A,B,C,D,E,F.
Числа больше 15 в 16-ной системе образуются путём объединения 2 и более чисел в 1. Так например, числу 255 в 10-ной системе соответствует число FF в 16-ной системе.
Значит, для того чтобы выразить нужный оттенок в 16-ном виде, нам понадобиться 3 пары чисел, где 1-я пара - значение красного цвета, 2-я пара значение зелёного и 3-я пара синего цвета. Так, например, тот же классический синий в 16-ном выражении будет выглядеть так:#0ff. Знак решётки перед числом ставится для указания того что данное число является 16-ным, например, в числе #808 нет латинских букв однако со знаком решётки понятно что оно 16-ное и выражает собой оливковый цвет.
И еще. выражая цвет в 16-ном виде можно обойтись 3 числами, которые затем будут дублироваться, например запись #daf будет сокращённой формой #ddaaff.
Цвет элемента
Для того, что бы перекрасить текст какого-либо элемента в нужный нам цвет необходимо воспользоваться свойством color и присвоив ему нужное значение.
Как уже сказано выше, цвет в CSS может быть задан следующими методами:
Пример:
<title>Цвет элемента</title>
<div style=color:red>Блок 1</div>
<div style=color:#ff0>Блок 2</div>
<div style=color:RGB(255,0,0)>Блок 3</div>
Цвет фона элемента
А вот свойство background - определяет цвет фона элемента.
Цвет фона может иметь следующие значения:
Пример:
<title>Цвет фона элемента</title>
<body style=background:#ffd>
<div style=background:white>Белый блок</div>
<div style=background:#0ff>Синий блок</div>
<div style=background:RGB(255,0,0)>Красный блок</div>
<div style=background:transparent>Прозрачный блок</div>
Фоновое изображение
Для любого элемента можно присвоить фоновое изображение с помощью CSS свойства:background-image.
Возможные значения background-image:
Для того чтобы сделать некую картинку фоном для элемента необходимо указать к ней путь согласно следующего синтаксиса url(путь к файлу/имя файла). Путь к файлу указывается в том случае, если рисунок находится в другой папке.
В примере ниже в качестве основного фона (элемент body) используется 1 графическое изображение, а для блока div другое, возможность использования различных фоновых изображений для разных элементов страницы позволяет решать практически любые дизайнерские задумки.
Пример:
<title>Фоновое изображение</title>
<style>
body{background-image:url(fon.jpg)} div{background-image:url(fon1.gif);border:5px double #245;height:250px} p{text-align:center;color:#008;font:bold 24px Arial} </style>
<p>Страница с фоновым изображением
<div><p>Блок с фоновым изображением</div>
Если рисунок не заполняет собой весь фон элемента, то он выкладывается "плиткой".
Фиксация фонового изображения
Если на странице или в каком либо блоке присутствует полоса прокрутки, то фоновое изображение будет прокручиваться вместе с остальным содержанием данного блока.
Зафиксировать фоновое изображение позволяет свойство background-attachment, которое может принимать 1 из 2 значений:
Пример:
<title>Фиксация фонового изображения</title>
<style>
body{background-image:url(fon.jpg);background-attachment:fixed} h1{color:#0ff;font:bold 28px} div{line-height:2;white-space:pre;color:#0ff;font-size:24px} </style>
<h1>Песенка мамонтенка</h1>
<div>
По синему морю, к зелёной земле
Плыву я на белом своём корабле.
. . .
. . .
</div>
Повторение фонового изображения
Как уже говорилось выше, если рисунок не заполняет собой весь фон элемента, то он повторяется и выкладывается "плиткой". Свойство background-repeat - регулирует повторение фонового изображения.
Возможные значения:
Пример:
<title>Повторение фонового изображения</title>
<body style=background-image:url(fon.jpg);background-repeat:repeat-x>
<samp style=background:#fff>Изображение повторяется только по оси х.
Позиция фонового изображения
При помощи CSS свойства background-position - можно управлять позицией фонового изображения в элементах где оно задано с помощью background-image.
Позицию фонового изображения, а точнее его верхнего левого угла, можно задать в процентах, пикселях, а также любых других единицах измерения CSS, с помощью 2 значений, где 1-е значение будет являться отступом от левой границы элемента, а 2-е значение отступом от верхней границы элемента.
Например, запись: background-position:200px 100px; будет обозначать, что фоновое изображение будет смещено по горизонтали на 200px от левой границы элемента и по вертикали на 100px от верхней границы элемента.
Так же можно использовать следующие значения: по горизонтали:
Пример:
<title>Позиция фонового изображения</title>
<style>
body{background-image:url(fon.jpg);background-repeat:no-repeat;background-position:center 100px} </style>
В этом примере фоновое изображение по горизонтали расположено по центру, а по вертикали в ста пикселях от верхней границы элемента.
Background
Ну и в довершении главы немного о базовом свойстве background.
Являясь базовым свойством, background может одновременно принимать те или иные значения от его дочерних свойств:
Все эти свойства мы рассмотрели выше, так что вдаваться в подробности нет смысла.
Нужные значения дочерних свойств указываются через пробел, в любом порядке и по мере необходимости.
Пример:
<title>Background</title>
<body style="background:url(fon.jpg)fixed repeat-x center">
<p style=background:red>Фон этого параграфа такой же красный как если бы мы использовали background:red.
<p>А у элемента body в базовом свойстве background указанно сразу 4 возможных значения взятых от его дочерних свойств.
