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