Цвет и фон.В этой главе мы поговорим о том, как с помощью CSS присвоить цвет элементу и его фону, а так же о том, как использовать рисунок в качестве фона элемента и управлять его положением. Перед тем как перейти непосредственно к обучению, проведу краткий экскурс на тему: "Цвета в Интернете" Цвет в CSS может быть задан тремя методами:
С именным значением цвета всё понятно black - черный, green - зелёный, olive - оливковый и т.д. (полную палитру базовых красок, т.е. цветов для которых зарезервированы именные значения, смотрите здесь.) Однако по понятным причинам не для всех оттенков цветов зарезервировано индивидуальное имя. Когда возникает необходимость в использовании какого либо "нестандартного" цвета необходимо определить его значение RGB, (Red, Green , Blue ) сочетание красного, зеленого и синего цвета в числовом выражении. Каждый оттенок из основных цветов в системе RGB может выражаться в числе от 0 до255. 
Например, черный цвет будет иметь значение 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 может быть задан следующими методами:
Пример: <!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 - определяет цвет фона элемента. Цвет фона может иметь следующие значения:
Пример: <!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(путь к файлу/имя файла). Путь к файлу указывается в том случае, если рисунок находится в другой папке. В примере ниже в качестве основного фона (элемент 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, которое может принимать одно из двух значений:
Пример: <!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 - регулирует повторение фонового изображения. Возможные значения:
Пример: <!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 пикселей от верхней границы элемента. Так же можно использовать следующие значения: по горизонтали:
Пример: <!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 может одновременно принимать те или иные значения от его дочерних свойств:
Все эти свойства мы рассмотрели выше, так что вдаваться в подробности нет смысла.. Нужные значения дочерних свойств указываются через пробел, в любом порядке и по мере необходимости. Пример: <!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> Полезные советы:
|
