Как изменить цвет текста в списке?

🕛 19.01.2009, 23:35

Используйте стилевой атрибут color для задания цвета текста и background для указания цвета фона, добавляя их к селектору UL или OL, как показано в примере 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"> UL { color: navy; /* Цвет текста */ background: #fc0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ margin-left: 20px; /* Отступ слева */ } </style> </head> <body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> </body>
</html>

При таком раскладе маркеры оказываются вынесенными за пределы цветной фоновой области. Поэтому для изменения вида фона следует использовать тег <DIV>, внутрь которого и добавить список. Все необходимые цвета при этом указываются для селектора DIV (пример 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"> DIV { color: navy; /* Цвет текста */ background: #fc0; /* Цвет фона */ padding: 2px; /* Поля вокруг текста */ } </style> </head> <body> <div> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> </div> </body>
</html>

Расстояние от края цветового прямоугольника до текста регулируется атрибутами margin и padding, добавляемые к селектору UL.