Цвет и фон в CSS

Урок №4

Цвета в CSS обозначаются по тому же принципу, что и в HTML. Для указания цвета переднего плана в CSS используется свойство color

Фоновое изображение и фоновый цвет блока всегда должен достаточно сильно контрастировать с цветом текста. Чем больше контраст, тем удобнее читается текст.

Рассмотрим семь основных свойств цвета и фона, которые применяются в CSS, к ним относятся:

Рассмотрим всё по-порядку.

1. Свойство COLOR

Задает основной цвет(цвет переднего плана) того или иного элемента. Например, если мы хотим сделать цвет всех заголовков первого уровня красным, а цвет текста параграфов зеленым, то таблица стилей будет выглядеть так:

Пример кода:

H1 {
color: red ;
}
P {
color: green ;
}

Как это будет выглядеть на странице:

2. Свойство BACKGROUND

Свойство background используется для сокращенной записи всех свойств в одном свойстве.
Порядок записи всех свойств в свойстве background будет иметь следующий вид:

background-color_background-image_background-repeat_background-attachment _background-position

Все свойства записываются через пробел, причём если вы не указали какое-нибудь значение, то вместо него присваивается значение по умолчанию. Это свойство помогает намного сократить запись в таблице стилей.

Простыми словами записывается пять значений свойств через пробел. Обратите внимание на два примера которые приведены ниже:

body {
background-color:#ffee8c ;
background-image : url(aple.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

Можно записать одной строчкой (рекомендуется):

body {
background: #ffee8c url(aple.png) no-repeat fixed top right ;
}

Внимание! Порядок важен. Указывая значения, следите за последовательностью их расположения как в примере.

3. Свойство BACKGROUND-ATTACHMENT

Свойство background-attachment устанавливает будет ли прокручиваться фоновое изображение вместе с содержимом страницы или будет оставаться фиксированным. Для этого свойства есть всего два значения: scroll и fixed. Причём значение scroll стоит по умолчанию, поэтому это значение можно не использовать.

На примере ниже показано как в файле стилей это свойство записывается следующим образом:

Пример кода:

body {
background-color:#c0c0c0;
background-image:url(img/logo.jpg);
background-repeat: repeat-x;
background-attachment: fixed ;
}

4. Свойство BACKGROUND-COLOR

Свойство background-color изменяет цвет фона какого-либо элемента или всего документа HTML. К примеру, чтобы изменить фон всей страницы нужно прописать это свойство для тега body. Важно знать понимание того, что вы хотите получить в итоге.

Пример кода:

body{
background-color:#F4F4F4;
}
p {color:#FF0000;
background-color:#FFFFFF
}

Как это будет выглядеть на странице:

5. Свойство BACKGROUND-IMAGE

Данное свойство используется для задания фонового изображения.
Благодаря этому свойству вы можете вставить какой-нибудь фоновый рисунок. Для этого нужно воспользоваться значением адреса фонового изображения url. То есть вам надо указать путь к файлу с изображением.

Чтобы применить данное свойство достаточно в файле стилей прописать вот такой код:

Пример кода:

body {
background-image:url(img/logo.jpg);
}

6. Свойство BACKGROUND-REPEAT

Cвойство background-repeat определяет, как фоновое изображение будет повторяться на экране: по вертикали, по горизонтали или сразу в обоих направлениях. Оно так же позволяет отменить повторение фонового изображения, то есть оно будет выведено всего один раз.

Допускается указывать более одного значения, через запятую. Каждое новое значение применяется к соответствующему фоновому изображению в том порядке, который определён в свойстве background-image.

repeat - Повторяет фоновое изображение по вертикали и по горизонтали.

repeat-x - Повторяет фоновое изображение только по горизонтали.

repeat-y - Повторяет фоновое изображение только по вертикали.

no-repeat - Фоновое изображение не будет повторяться.

inherit - Указывает, что значение наследуется от родительского элемента.

Стоит заметить что в HTML аналогов этому свойству нет. Это очень удобное свойство. Например его можно использовать при создании меню или выделения какого-либо блока. Причем достаточно использовать небольшой файл изображения для создания нужного эффекта.

7. Свойство BACKGROUND-POSITION

Свойство background-position очень полезное. Оно позволяет определить положение для фонового изображения или задать его положение с помощью относительных и абсолютных единиц. Обычно указывают два значения из ключевых слов.

Пример кода:

background-position: center right;

Где первое значение center задаёт позицию изображения по вертикали, а второе right по горизонтали. Если вы захотите задать позицию фона с помощью относительных и абсолютных единиц, то следует учитывать что отчет начала координат будет начинаться с верхнего левого края экрана, причем первое значение будет показывать изменение по горизонтали, а второе — по вертикали.

В качестве примера можете посмотреть вот такой вот простенький код:

body {
background-color:#c0c0c0;
background-image:url(img/logotip.jpg);
background-repeat: no-repeat;
background-attachment: fixed ;
background-position: 75% 65%;
}
p {
color:navy;
background-color:#FFF
}

 На этом уроке мы рассмотрели цвет и фон CSS, следующий урок будет посвящён свойству шрифта в CSS.

       

Создано: 11.05.2020. |Обновлено: 15.12.2022.