Tel: +372 5596 5762
e-mail: info@digipo.eu

В этом уроке изучим, как использовать цвета и фон на ваших 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.

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.


Свойство 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-repeat


Блокировка фонового изображения [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; }     

background-position    

Задания

  1. Отобразите фоновую картинку по центур страницы
  2. Отобразите картинку в верхнем правом углу
  3. Отобразите картинку в нижней части страницы и что бы она копировалась по горизонтали
  4. Отобразите картинку, что бы она копировалась во вертикали с левой части страницы


В предыдущем уроке мы знакомились с CSS

В следующем уроке рассмотрим шрифты