Справочник по CSS (ЦСС) и ШТМЛ
Как изменить цвет контента в списке?
Используйте стилевой атрибут color для задания цвета контента и background для указания цвета фона, добавляя их к селектору UL или OL, как показано в примере 1.
Пример 1
<!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=utf-8">
<title>Цвет списка</title>
<style type="text/CSS (ЦСС)">
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).
Пример
<!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=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.