Книга: HTML, XHTML и CSS на 100%

Цвет фона

Цвет фона

Цвет фона задается с помощью свойства background-color. Его можно использовать, чтобы сделать в документе текст, похожий на выделенный маркером. Значение цвета задается, как и в предыдущей главе, одним из трех способов: названием цвета, шестнадцатеричным значением или RGB-значением.

Теперь поработаем с тестовой страницей. Для примера выделим заголовки первого уровня, то есть элементы H1, синим цветом. Для этого, как и в предыдущей главе, добавим в файл таблицы стилей такой код:

h1 {

background-color: blue;

}

Следует отметить, что если задать один и тот же цвет фона и текста, то текст просто-напросто сольется с фоном и не будет виден. Результат работы примера можно увидеть на рис. 8.3.

Рис. 8.3. Выделение заголовка фоновым цветом

Наверное, вы уже обратили внимание, что на рис. 8.3 цветом выделена вся строка. Это потому, что браузер отводит место под элемент H1 до конца строки. То же самое будет и с элементом P. Если вы хотите, чтобы был выделен только текст без пустого пространства справа, надо внутрь H1 вложить элемент SPAN и записать таблицу стилей следующим образом:

h1 span {

background-color: blue;

}

В этом случае стиль будет применяться только к последовательности элементов hi span.

В элемент H1 включаем элемент SPAN:

<h1><span>Форматирование текста средствами CSS</span></h1>

В результате синим цветом будет выделена только строка заголовка.

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

Оглавление книги