| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Змінити колір тексту заголовка і фону під ним.
Рішення
Для зміни кольору фону під текстом використовується універсальне властивість background, який слід додати до селектору h1. Колір заголовка змінюється за допомогою властивості color, яка також додається до цього селектору (приклад 1).
Приклад 1. Колір фону під заголовком
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Колір фону під заголовком</title>
<style>
h1 {
background: #D9FFAD; /* Колір фону під заголовком */
color: green; /* Колір тексту */
padding: 2px; /* Поля навколо тексту */
}
</style>
</head>
<body>
<h1>Закон зовнішнього світу</h1>
<p>Закон зовнішнього світу методологічно виводить інтелігібельний світ, хоча в офіціозі прийнято протилежне.</p>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Колір фону під заголовком тексту
Врахуйте, що на розмір кольорового прямокутника впливає не тільки розмір тексту, але і відступи навколо нього. Тому регулюйте розмір фону за рахунок властивості padding, додаючи його знову ж до селектору h1.