Фоновый цвет

Цвет фона элемента можно объявлять почти так же, как основной цвет. Для этого применяется свойство background-color, принимающее (что и не удивительно) любой действительный цвет, или ключевое слово, делающее фон прозрачным. Для того чтобы цвет немного выступал за края текста элемента, просто добавьте отступы:

p {background-color: gray; padding: 10px;}

Фоновый цвет можно задать практически для любого элемента, от body до строковых элементов, таких как em и a. Свойство background-color не наследуется. Для него по умолчанию устанавливается значение transparent: если цвет элемента не определен, его фон должен быть прозрачным, чтобы был виден фон его элемента-предка. Ситуацию с наследованием можно представить в виде прозрачной пластиковой вывески на окрашенной стене. Стена видна сквозь вывеску, но это не фон вывески, а фон стены (во всяком случае с точки зрения CSS). Аналогично, если задается фон для холста, он будет виден сквозь все элементы документа, не имеющие собственного фона. Они не наследуют фон; он просматривается сквозь них. Это может показаться несущественным различием, но, как вы увидите в разделе, посвященном фоновым изображениям, в действительности это важно.

Чаще всего в применении ключевого слова transparent нет необходимости, т.


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

a {color: white; background-color: transparent;}

Если бы объявление фонового цвета было опущено, ваш основной белый цвет в сочетании с белым фоном пользователя дал бы совершенно нечитаемые ссылки. Такая ситуация маловероятна, но возможна. Из-за потенциальной возможности совпадения стилей автора и читателя утилита проверки достоверности CSS будет генерировать предупреждения, такие как «You have no background-color with your color» (Вы не задали фоновый цвет). Она пытается напомнить вам, что может произойти взаимодействие автор-пользователь, а правило не учитывает эту возможность. Предупреждения не означают, что стили заданы неверно, только ошибки мешают подтверждению достоверности.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Воздействие на рамки
Воздействие на элементы формы
Еще раз о повторении в определенном направлении
Замещение атрибутов
Значения, заданные в единицах измерения длины

Вернуться в раздел: CSS / 9. Цвета и фон