Справочник по CSS (ЦСС) и ШТМЛ
Как сделать, чтобы цвет маркеров в списке отличался от цвета контента?
Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь контейнера <LI> вкладываем тег <SPAN>, а уже внутрь него помещаем контент. Иными словами вместо традиционной схемы <li>контент</li> создаем конструкцию <li><span>контент</span></li>. При этом цвет маркеров определяется стилевым параметром color для селектора LI, а цвет контента ? для селектора SPAN (пример 1).
Пример 1
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Цвет контента и маркеров в списке</title>
<style type="text/CSS (ЦСС)">
LI {
color: green; /* Цвет маркеров */
}
LI SPAN {
color: navy; /* Цвет контента */
}
</style>
</head>
<body>
<ul>
<li><span>Скрипка</span></li>
<li><span>Гитара</span></li>
<li><span>Волынка</span></li>
<li><span>Шарманка</span></li>
<li><span>Челеста</span></li>
</ul>
</body>
</html>
Результат данного примера показан ниже (рис. 1).
Рис. 1. Маркеры, отличающиеся по цвету от основного контента
Несмотря на простоту, метод неудобен, особенно при объемных списках, ведь к каждому пункту списка теперь придется добавлять тег <SPAN>. Поэтому разберем хитрый способ, полностью основанный на работе CSS (ЦСС).
Смысл в следующем ? убираем оригинальные маркеры списка через атрибут list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента before и параметра content. Такая связка имеется ввиду ?генерируемое содержание? и позволяет вставлять любой контент или символ перед элементом, в данном случае LI. Причем видом контента (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2. Здесь в качестве маркеров используется символ параграфа ?.
Пример 2
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Цвет контента и маркеров в списке</title>
<style type="text/CSS (ЦСС)">
LI {
color: red; /* Цвет контента */
list-style-type: none; /* Прячем исходные маркеры */
}
LI:before {
color: black; /* Цвет маркера */
content: "\00B6 "; /* Сам маркер в формате юникод */
}
</style>
</head>
<body>
<ul>
<li>Север</li>
<li>Юг</li>
<li>Запад</li>
<li>Восток</li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Маркеры, созданные с помощью стилей
Учтите, что псевдоэлемент before и атрибут content не поддерживаются в браузере Internet Эксплорер ни в одной его версии. Зато прекрасно работают в Файер фох и Опера.