Как добавить цвет фона к заголовку текста?

🕛 23.01.2009, 00:32

Для изменения цвета фона под текстом используется универсальный стилевой атрибут background, который следует добавить к селектору H1,..., H6 (пример 1).

Пример 1. Цвет фона под заголовком

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Цвет фона под заголовком</title> <style type="text/css"> H1 { background: #D9FFAD; /* Цвет фона под заголовком */ } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </body>
</html>

Учтите, что на размер цветного прямоугольника влияет не только размер текста, но и отступы вокруг него. Поэтому регулируйте размер фона за счет атрибутов margin и padding, добавляя их опять же к селектору H1, как показано в примере 2.

Пример 2. Отступы вокруг заголовка

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Поля вокруг заголовка текста</title> <style type="text/css"> H1 { background: #D9FFAD; /* Цвет фона под заголовком */ color: green; /* Цвет текста */ padding: 2px; /* Поля вокруг текста */ } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </body>
</html>