наверх




Для установки тексту своего цвета используется свойство color, для задания цвета фона или фоновой картинки элемента — свойство background.



color


Универсальное свойство для указания цвета текста в документе. Актуально лишь для текста, то есть цвет фона им задать нельзя.
Цвет можно указать в формате RGB (Red Green Blue), либо в формате HTML HEX кода. Для перевода цвета из одного формата в другой можно использовать сервис конвертера цвета.

Синтаксис следующий:

color: Цвет;

Пример указания цвета для всех ссылок в документе:

a {
  color: #1F87BF;
}


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

#content {
  color: #444;
}


Небольшой нюанс. Если вы указываете цвет для текста, то это не повлияет на цвет ссылок, его нужно будет указать отдельно, причем можно указать другие значения, то есть не делать цвет ссылок и цвет текста одинаковым.



Для установки фона можно указать как цвет, так и любое изображение, доступное для чтения браузером.

background-color


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

.obj {
  background-color: #478CFB;
}


background-image


Данное свойство же предназначено лишь для тех случаев, когда нужно в качестве фона загрузить определенное изображение. Для этого, в качестве значения указывается путь к изображению, относительно самого файла со стилями. Пример:

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


background-repeat


Используется в случаях, когда было использовано свойство background-image. Свойство устанавливает правило повтора изображения. По умолчанию, изображение повторяется по осе X и по осе Y.
Свойство background-repeat настраивает повтор. С помощью него можно задать, что бы изображение повторялось лишь по осе X - repeat-x или по осе Y - repeat-y. Если же вам нужно, что бы изображение вообще не повторялось, то надо в качестве значения необходимо установить no-repeat.

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


background-attachment


Свойство устанавливает фиксацию фона. Если вам нужно, что бы фон был закреплен и был всегда на глазах у пользователя, то есть был зафиксирован, то нужно в значение написать fixed. В ином случае можно установить в значении scroll, либо пропустить свойство, т.к. данное значение установлено по умолчанию.

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


background-position


Свойство устанавливает расположение фонового изображения в документе. То есть, если вы выбрали no-repeat и хотите, что бы изображение было расположено в определенной зоне, то следует использовать именно данное свойство. Правило у него таково: сначала задается расположение по горизонтали, а через пробел по вертикали. У данного свойства имеются два вида написания значения: буквенный и цифровой. В цифирном в основном используются пиксели и проценты, в буквенном стороны элемента: left, right, top, bottom, center.

Пример написания буквенного значения:

#keys {
  background-position: left center;
}


Здесь мы указали, что изображение будет расположено по горизонтали слева. А по вертикали по центру.
Пример написания цифирного значения:

#keys {
  background-position: 109px 57px;
}


Вот и все свойства связанные с фоном. Однако, посмотрите. сколько нужно написать строчек, что бы указать все правила. Поэтому, это все можно указать в одну строчку! Правило написания следующие:

background: color image repeat attachment position;

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

.section {
  background: #478CFB url("fon.jpg") repeat-x scroll 100px 125px;
}






Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.