Урок 8. Как установить цвет текста и фон элемента в CSS?

Одна из самых распространённых задач при редактировании текста и блоков в HTML и CSS. С ней может столкнуться не только верстальщик, но и любой контент-менеджер, который редактирует содержимое сайта. Для решения данного вопроса используется всего два свойства: color - цвет текста, background - работа с фоном, цвет или изображение.

Работа со цветом теста в CSS

color - это свойство, которое нужно для указания цвета только для текста. Цвет можно указать как в формате HTML HEX кода, так в формате RGB (Red Green Blue). Коды цвета можно выбрать либо в графических программах, например, Photoshop, либо в онлайн

Синтаксис свойства:

color: Цвет;

Теперь применяем свойство:

a {
  color: #0085сс; // ссылки приобретут светло-синий цвет
}

Пример указания цвета для текста в элементе с идентификатором content:

.content {
  color: #444; // тёмно-серый текст в элементе с классом content
}

Почему именно такой пример: указание цвета для ссылки и для текста - это разные вещи. Запомните. Ну и от себя рекомендую делать цвет текста и ссылки разного цвета.

Работа с фоном в CSS

background - это свойство, которое позволяет работать с фоном изображения: устанавливать цвет фона, устанавливать в качестве фона изображение (форматы jpg, gif, png), изменять положение фона и другие параметры, которые описаны ниже.

background-color - это свойство используется только для установки цвета фона. Принимает только код цвета. Цвет можно указать в формате RGB (Red Green Blue), либо в формате HTML HEX кода.

.block {
  background-color: #fbb5b5; // установим пастельный алый цвет для фона
}

Лучшие примеры цветов для фона (современные дизайн-модели: Flat Design и др):




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

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

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

#content {
  background-image: url("background.jpg");
  background-repeat: repeat-x; /* изображение будет повторяться только по горизонтали до границ блока */
}

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

#content {
  background-image: url("background.jpg");
  background-repeat: repeat-x; /* изображение будет повторяться лишь по горизонтали */
  background-attachment: fixed; /* закреплено в расположении */
}

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

#block {
  background-position: left center; /* по горизонтали - по левой стороне, по высоте - посередине */
}

В комментарии думаю всё понятно)
Пример написания цифирного значения:

#keys {
  background-position: 109px 57px; /* отступ слева 109px, сверху 57px */
}

Тут думаю тоже всё должно быть понятно.
Много свойств? Смотрим как писать сокращённо.

В итоге. Сокращённая запись background в CSS

Можно использовать сокращённую запись, где все параметры будут указаны в строчку:

background: color image repeat attachment position;

О плюсах. Подобная запись сокращает время загрузки страницы и рендеринг браузером. Пожалейте посетителей, записывайте лучше таким образом, если, конечно, Вам нужно несколько свойств.
Да, пропустить какое-либо свойство, в случае отсутствия потребности в нём, можно! Просто продолжаете дальше указывать значения дальше по списку.

.block {
  background: #f1f1f1 url("background.jpg") repeat-x scroll 100px 125px;
}

Пример работы фонов background в CSS

Код примера. Результат работы и исходники можете посмотреть по ссылке ниже.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обтекание</title>
  <style>
   .block1 {
    font: 22px/140% Palantino, Tahoma, Verdana, sans-serif; 
    width:500px;
    color:#303030;
    background-color: #f1f1f1; /* цвет фона блока */
   }
   .block1:hover  {
    background-color: #f1f1f1; /* цвет фона блока при наведении */
   }
   .block2 {
    font: 22px/140% Palantino, Tahoma, Verdana, sans-serif; 
    width:500px; /* для блока с фоновым изображением указываем размеры */
    height:400px; /* иначе блок примет размеры по контенту */
    color:#fff;
    background: #f1f1f1 url("comp/comp.jpg") repeat-x scroll left top;
   }
  </style>
 </head>

 <body>

<div class="block1">Блок с окрашеным фоном</div>
<div class="block2">Блок с фоновым изображением</div>

 </body>
</html>

В случае с фоновым изображением лучше указывать размеры блока, так как иначе он примет размер согласно содержимому.
Демонстрация Скачать исходники
Спасибо за внимание!