| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Змінити колір фону списку і колір тексту в ньому.
Рішення
Використовуйте стильове властивість color для завдання кольору тексту і backgroundдля вказівки кольору фону, додаючи їх до селектору UL або OL, як показано в прикладі 1.
Приклад 1. Колір фону в списку
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Колір списку</title>
<style>
ul {
color: navy; /* Колір тексту */
background: #fc0; /* Колір фону */
padding: 5px; /* Поля навколо тексту */
margin-left: 20px; /* Відступ зліва */
}
</style>
</head>
<body>
<ul>
<li>Шевченко Т. Г.</li>
<li>Франко І. Я.</li>
<li>Косач Л. П.</li>
</ul>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Виділення кольором тексту списку
При такому розкладі маркери виявляються винесеними за межі кольоровий фонової області. Тому для зміни фону слід використовувати тег <div>, усередину якого й додати список. Всі необхідні кольори при цьому зазначаються для селектора DIV (приклад 2).
Приклад 2. Колір фону в списку
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html">
<html>
<head>
<meta charset="utf-8" />
<title>Колір списку</title>
<style type="text/css">
div {
color: navy; /* Колір тексту */
background: #fc0; /* Колір фону */
padding: 2px; /* Поля навколо тексту */
}
</style>
</head>
<body>
<div>
<ul>
<li>Шевченко Т. Г.</li>
<li>Франко І. Я.</li>
<li>Косач Л. П.</li>
</ul>
</div>
</body>
</html>
В даному прикладі до списку додається помаранчевий колір фону і встановлюється темно-синій колір тексту, як показано на рис. 2.
Рис. 2. Виділення кольором всій області списку
Відстань від краю колірного прямокутника до тексту регулюється властивості margin і padding, що додаються до селектору ul.