Цвет и фон

В этой главе мы поговорим о том, как с помощью CSS присвоить цвет элементу и его фону, а так же о том, как использовать рисунок в качестве фона элемента и управлять его положением.

Перед тем как перейти непосредственно к обучению, проведу краткий экскурс на тему: “Цвета в Интернете”

Цвет в CSS может быть задан тремя методами:

  • Именным значением, например: red – красный.
  • Значением цвета RGB, например: RGB(255,0,0) – опять таки красный.
  • Шестнадцатеричным значением цвета RGB, например: #ff0000 – всё тот же красный.

С именным значением цвета всё понятно black – черный, green – зелёный, olive – оливковый и т.д. (полную палитру базовых красок, т.е. цветов для которых зарезервированы именные значения, смотрите здесь.)

Однако по понятным причинам не для всех оттенков цветов зарезервировано индивидуальное имя. Когда возникает необходимость в использовании какого либо “нестандартного” цвета необходимо определить его значение RGB, (Red, Green , Blue ) сочетание красного, зеленого и синего цвета в числовом выражении. Каждый оттенок из основных цветов в системе RGB может выражаться в числе от 0 до 255.

RGB

Например, черный цвет будет иметь значение 0,0,0 то есть отсутствие всякого цвета.. белый – значение 255,255,255 теоретически если смешать основные цвета должен получится белый, а вот например классический синий цвет имеет значение 0,0,255 то есть на “мольберте” присутствует только синий. На рисунке наглядно показано, что происходит с красками если их смешать, так смешивая оттенки основных цветов можно добиться любого цвета из видимого спектра.

Однако в большинстве случаев “веб краски” имеют шестнадцатеричное выражение десятичного значения RGB.

В шестнадцатеричном исчислении цифры от 10 до 15 заменены латинскими буквами и числовой ряд приобретает следующий вид:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Числа больше 15ти в шестнадцатеричной системе образуются путём объединения двух и более чисел в одно. Так например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе.

Значит, для того чтобы выразить нужный оттенок в шестнадцатеричном виде, нам понадобиться три пары чисел, где первая пара – значение красного цвета, вторая пара значение зелёного и третья пара синего цвета. Так, например, тот же классический синий в шестнадцатеричном выражении будет выглядеть так: #0000FF. Знак решётки перед числом ставится для указания того что данное число является шестнадцатеричным, например в числе #808000 нет латинских букв однако со знаком решётки понятно что оно шестнадцатеричное и выражает собой оливковый цвет.

И еще.. выражая цвет в шестнадцатеричном виде можно обойтись тремя числами, которые затем будут дублироваться, например запись #DAF будет сокращённой формой #DDAAFF.

Фух.. затянул я с водной частью давайте же наконец учить CSS..

Цвет элемента.

Для того, что бы перекрасить текст, какого либо, элемента в нужный нам цвет необходимо воспользоваться свойством color и присвоив ему нужное значение – собственно цвет.

Как уже сказано выше цвет в CSS может быть задан следующими методами:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255,0,0) – значение цвета RGB.

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Цвет элемента</title>
</head>
<body>
<div style=”color: red“>Блок 1</div>
<div style=”color: #ff0000“>Блок 2</div>
<div style=”color: RGB(255, 0, 0)“>Блок 3</div>
</body>
</html>

Цвет фона элемента.

А вот свойство background-color – определяет цвет фона элемента.

Цвет фона может иметь следующие значения:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255,0,0) – значение цвета RGB.
  • transparent – прозрачный фон. (по умолчанию)

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Цвет фона элемента</title>
</head>
<body style=”background-color: #fffacd“>
<div style=”background-color: white“>Белый блок</div>
<div style=”background-color: #0000ff“>Синий блок</div>
<div style=”background-color: RGB(255,0,0)“>Красный блок</div>
<div style=”background-color: transparent“>Прозрачный блок</div>
</body>
</html>

Фоновое изображение.

Для любого элемента можно присвоить фоновое изображение с помощью CSS свойства: background-image.

Возможные значения background-image:

  • url – путь к файлу с изображением.
  • none – изображение отсутствует. (по умолчанию)

Для того чтобы сделать некую картинку фоном для элемента необходимо указать к ней путь согласно следующего синтаксиса url(путь к файлу/имя файла). Путь к файлу указывается в том случае, если рисунок находится в другой папке.

В примере ниже в качестве основного фона (элемент body) используется одно графическое изображение, а для блока div другое, возможность использования различных фоновых изображений для разных элементов страницы позволяет решать практически любые дизайнерские задумки.

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Фоновое изображение</title>
<style type=”text/css”>
body{
background-image: url(fon.jpg);
}
div{
background-image: url(fon1.gif);
border: 5px double #245404; 
height: 250px; 
}
p{
text-align: center;
color: #008040;
font: bold 24px Arial;
}
</style>
</head>
<body>
<p>Страница с фоновым изображением</p>
<div><p>Блок с фоновым изображением</p></div>
</body>
</html>

Если рисунок не заполняет собой весь фон элемента, то он выкладывается “плиткой”.

Фиксация фонового изображения.

Если на странице или в каком либо блоке присутствует полоса прокрутки, то фоновое изображение будет прокручиваться вместе с остальным содержанием данного блока.

Зафиксировать фоновое изображение позволяет свойство background-attachment, которое может принимать одно из двух значений:

  • fixed – фиксированный фон.
  • scroll – подвижный фон (по умолчанию).

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Фиксация фонового изображения</title>
<style type=”text/css”>
body{
background-image: url(fon.jpg);
background-attachment: fixed;
}
h1{
color: #0000ff;
font: bold 28px;
}
div{
line-height: 2;
white-space: pre;
color: #0000ff;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Песенка мамонтенка</h1>
<div>
По синему морю, к зелёной земле
Плыву я на белом своём корабле.
… … …
… … …
Музыка: В. Шаинский 
Слова: Д. Непомнящий
</div>
</body>
</html>

Повторение фонового изображения.

Как уже говорилось выше, если рисунок не заполняет собой весь фон элемента, то он повторяется и выкладывается “плиткой”. Свойство background-repeat – регулирует повторение фонового изображения.

Возможные значения:

  • no-repeat – запретить повторение, показать только одно изображение.
  • repeat – повторять изображение (по умолчанию).
  • repeat-x – повторять только по горизонтали.
  • repeat-y – повторять только по вертикали.

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Повторение фонового изображения</title>
</head>
<body style=”background-image: url(fon.jpg); background-repeat: repeat-x“>
<samp style=”background-color: #ffffff”>Изображение повторяется только по оси х.</samp>
</body>
</html>

Позиция фонового изображения.

При помощи CSS свойства background-position – можно управлять позицией фонового изображения в элементах где оно задано с помощью background-image.

Позицию фонового изображения, а точнее его верхнего левого угла, можно задать в процентах, пикселях, а также любых других единицах измерения CSS, с помощью двух значений, где первое значение будет являться отступом от левой границы элемента, а второе значение отступом от верхней границы элемента.

Например, запись: background-position: 200px 100px; будет обозначать, что фоновое изображение будет смещено по горизонтали на 200 пикселей от левой границы элемента и по вертикали на 100 пикселей от верхней границы элемента.

Так же можно использовать следующие значения:

по горизонтали:

  • left – расположить слева.
  • center – расположить по центру.
  • right – расположить справа.

по вертикали:

  • top – расположить сверху.
  • center – расположить по центру.
  • bottom – расположить снизу.

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Позиция фонового изображения</title>
<style type=”text/css”>
body{
background-image: url(fon.jpg);
background-repeat: no-repeat;
background-position: center 100px;
}
</style>
</head>
<body>
<samp>В этом примере фоновое изображение по горизонтали расположено по центру, а по вертикали в ста пикселях от верхней границы элемента.</samp>
</body>
</html>

Background.

Ну и в довершении главы немного о базовом свойстве background.

Являясь базовым свойством, background может одновременно принимать те или иные значения от его дочерних свойств:

  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat

Все эти свойства мы рассмотрели выше, так что вдаваться в подробности нет смысла..

Нужные значения дочерних свойств указываются через пробел, в любом порядке и по мере необходимости.

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Background</title>
</head>
<body style=”background: url(fon.jpg) fixed repeat-x center“>
<p style=”background: red“>Фон этого параграфа такой же красный как если бы мы использовали background-color: red.</p>
<p>А у элемента body в базовом свойстве background указанно сразу четыре возможных значения взятых от его дочерних свойств</p>
</body>
</html>

Полезные советы:

  • При использовании изображения в качестве фона с помощью свойства background-image заодно заливайте фон альтернативным цветом с помощью background-color. Так если, по каким либо причинам, не загрузится фоновое изображение или же пользователь умышленно отключит в настройках браузера загрузку рисунков, фон элемента не останется “голым”.
  • Не используйте большие весом “мегабайтные” изображения берегите время деньги и нервы пользователей.. А если уж без этого не обойтись, то перед тем как выкладывать такие изображения, как следует, поработайте с ней в графических редакторах на предмет “лишнего веса”. Почти всегда можно значительно сжать картинку особо не проиграв в качестве изображения.

Залишити відповідь