В этом уроке изучим, как использовать цвета и фон на ваших web-сайтах. Рассмотрим продвинутые методы позиционирования и управления фоновым изображением.
В уроке будут использованы CSS-свойства:
- color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
Перед тем как перейти непосредственно к обучению, проведу краткий экскурс на тему: "Цвета в Интернете"
Цвет в 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.
Свойство color описывает цвет переднего плана элемента.
Сделаем все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом <h1>. В нижеприведённом коде цвет элемента <h1> устанавливается красным.
h1 { color: #ff0000;}
Как уже сказано выше цвет в CSS может быть задан следующими методами:
- #ff0000 - шестнадцатеричное значение цвета RGB.
- red - именное значение цвета.
- RGB(255,0,0) - значение цвета RGB.
Свойство background-color описывает цвет фона элемента.
В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.
Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам <body> и <h1>.
body { background-color: #0033FF; }
h1 { color: #ff0000;
background-color: #FC9804; }
Заметьте, что устанавливает два свойства для <h1>, разделяя их точкой с запятой.
CSS-свойство background-image используется для вставки фонового изображения.
Ниже мы используем в качестве фонового изображение. Вы можете загрузить это изображение и использовать его на вашем компьютере (щёлкните правой клавишей мыши на изображении и выберите "сохранить изображение как/save image as"), либо вы можете использовать другое изображение.
Для вставки рисунка в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка.
body { background-color: #0033FF; background-image: url("путьккартинке/2css.png"); }
h1 { color: #ff0000; background-color: #FC9804; }
Повторение/мультипликация фонового изображения [background-repeat]
Вы заметили в предыдущем примере, что изображение повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим.
В таблице указаны четыре значения background-repeat.
| Значение | Описание |
| Background-repeat: repeat-x | Рисунок повторяется по горизонтали |
| background-repeat: repeat-y | Рисунок повторяется по вертикали |
| background-repeat: repeat | Рисунок повторяется по горизонтали и вертикали |
| background-repeat: no-repeat | Рисунок не повторяется |
Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код:
body { background-color: #0033FF; background-image: url("путьккартинке/2css.png"); background-repeat: no-repeat; }
h1 { color: #ff0000; background-color: #FC9804; }
Блокировка фонового изображения [background-attachment]
Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.
В таблице указаны два значения background-attachment.
| Значение | Описание |
| Background-attachment: scroll | Изображение прокручивается вместе со страницей - разблокировано |
| Background-attachment: fixed | Изображение блокировано |
Например, следующий код фиксирует изображение.
body { background-color: #0033FF; background-image: url("путьккартинке/2css.png"); background-repeat: no-repeat; background-attachment: fixed; }
h1 { color: #ff0000; background-color: #FC9804; }
Расположение фонового рисунка [background-position]
По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.
Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.
Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:
В таблице дано несколько примеров.
| Значение | Описание |
| background-position: 2cm 2cm | Рисунок расположен на 2 cm слева и на 2 cm сверху |
| background-position: 50% 25% | Рисунок расположен по центру и на четверть экрана сверху |
| background-position: top right | Рисунок расположен в правом верхнем углу страницы |
В примере кода фоновое изображение располагается в правом нижнем углу экрана:
body { background-color: #0033FF; background-image: url("путьккартинке/2css.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; }
h1 { color: #ff0000; background-color: #FC9804; }
Задания
- Отобразите фоновую картинку по центур страницы
- Отобразите картинку в верхнем правом углу
- Отобразите картинку в нижней части страницы и что бы она копировалась по горизонтали
- Отобразите картинку, что бы она копировалась во вертикали с левой части страницы
