Цвет и фон страницы

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

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

О нас

Добро пожаловать в каталог продукции DigiPortfoolio OÜ.

Начиная с 2001 года мы обучались и развивались в сфере мультимедийного дизайна. На данный момент мы предлагаем услуги по созданию интернет дизайна, печатного дизайна, разработки рекламы, создание сайтов, туров 360 градусов.

Так же мы можем сделать печать на различных материалах и размерах. Изготовляем наклейки, визитки, roll-up стенды, сувенирную продукцию, печать на футболках.

В каталоге Вы найдете предлагаемые варианты, так же Вы можете связаться с нами по телефону +372 5596 5762 или прислать свой заказ на электронную почту info@digipo.eu

Ищите нас в социальных сетях: