#Урок 8. Цвет текста и фон элемента в CSS

Свойства отвечающие за цвет и фон: color — цвет текста и background — цвет или изображение фона.

Теперь рассмотрим каждое свойство поподробнее.

color — свойство отвечающее за цвет только текста. Цвет можно указывать в формате HTML HEX и в формате RGB (Red Green Blue). Коды цветов можно легко найти в интернете или в Фотошопе.

Синтаксис:

color: цвет;

Пример:

a {

color: blue; /* ссылки будут синего цвета */

}

Указать цвет для текста в определенном элементе:

.block {

color: blue; /* синий текст в элементе с классом block */

}

background — свойство отвечающее за фон, либо цвет фона, либо изображение.

background-color — позволяет устанавливать только цвет фона.

.block {
  background-color: red; // красный цвет фона
}

background-image — свойство для установки изображения в фоне. 

#back {
  background-image: url("images/fon.jpg");
}

background-repeat — используется только если выше было указано свойство background-image. Это свойство устанавливает правило повтора изображения. По умолчанию, изображение повторяется по оси X и по оси Y до границ элемента (если фон меньше самого элемента). В свойстве можно указать настройку для того, чтобы изображение повторялось только по оси X — repeat-x (по горизонтали), только по Y — repeat-y (по вертикали) или не повторялось вообще — no-repeat.

background-attachment — фиксация фона в одном положении, то есть будет изображение прокручиваться вместе с содержимым блока или останется фиксированным. По умолчанию значение scroll, что не фиксирует фон.

#block {
  background-image: url("images/fon.png");
  background-repeat: repeat-y; /* изображение повторяется по вертикали */
  background-attachment: fixed; /* фиксация изображения */
}

background-position — свойство, отвечающее за расположение фона в элементе. Принимает 2 значения: расположение по горизонтали и затем по вертикали. Задаётся или в цифровом (px и %), или в буквенном варианте (left, center, right, top, bottom). Данное свойство применяется в том случае, когда изображение не повторяется (no-repeat), а фон нужно расположить в элементе определённым образом.

И снова мы с вами завершили еще один урок! Вперед, к следующему!

Комментарии закрыты.