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



Низкая сложность

Тема: 
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.

CSS по теме

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.