Цвет маркера списка css. Как средствами CSS изменить цвет маркера html-списка

Меню навигации, к примеру, часто составляется из обычных маркированных списков (HTML элемент

), по умолчанию маркер которых, отображается в форме закрашенного круга, чтобы его убрать необходимо, воспользоваться CSS свойством list-style-type со значением none :
ul { list-style-type : none ; /* убираем маркер у списка */ }

Для маркированных (неупорядоченных) списков (HTML элемент

) предусмотрено три типа маркеров: в форме закрашенного кружка (disc - это значение по умолчанию), маркер в форме полого круга (сircle ) и в форме квадрата (square ), а для нумерованных (упорядоченных) списков (элемент
) все оставшиеся варианты. Полный перечень размещен в следующей таблице:

Значение	Описание
none Элемент списка Элемент списка Элемент списка	Маркер не отображается.
disc Элемент списка Элемент списка Элемент списка	Маркер в форме закрашенного кружка. Это значение по умолчанию.
armenian Элемент списка Элемент списка Элемент списка	Числовой маркер (традиционная Армянская нумерация).
circle Элемент списка Элемент списка Элемент списка	Маркер в форме круга.
cjk-ideographic Элемент списка Элемент списка Элемент списка	Простые идеографические числа.
decimal Элемент списка Элемент списка Элемент списка	Числовой маркер (десятеричные арабские числа, начинающихся с 1).
decimal-leading-zero Элемент списка Элемент списка Элемент списка	Числовой маркер (десятеричные арабские числа, начинающихся с 1 и дополненные начальным нулем - 01, 02, 03...).
georgian Элемент списка Элемент списка Элемент списка	Числовой маркер (традиционная Грузинская нумерация - an, ban, gan, ..., he, tan, in, in-an...).
hebrew Элемент списка Элемент списка Элемент списка	Числовой маркер (традиционная Еврейская нумерация.).
hiragana Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Хирагана - a, i, u, e, o, ka, ki...).
hiragana-iroha Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Хирагана ироха - i, ro, ha, ni, ho, he, to, ...).
katakana Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Катакана - A, I, U, E, O, KA, KI, ...).
katakana-iroha Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Катакана ироха - I, RO, HA, NI, HO, HE, TO, ...).
lower-alpha Элемент списка Элемент списка Элемент списка	Буквы ascii нижнего регистра (a, b, c, d...z).
lower-greek Элемент списка Элемент списка Элемент списка	Строчные греческие буквы (α, β, γ, δ, и т.д.).
lower-latin Элемент списка Элемент списка Элемент списка	Строчные латинские буквы (a, b, c, d,...z).
lower-roman Элемент списка Элемент списка Элемент списка	Римские числа в нижнем регистре (i, ii, iii, iv, v и т.д.).
square Элемент списка Элемент списка Элемент списка	Маркер в форме квадрата.
upper-alpha Элемент списка Элемент списка Элемент списка	Буквы ascii верхнего регистра (A, B, C, D,...Z).
upper-latin Элемент списка Элемент списка Элемент списка	Заглавные латинские буквы (A, B, C, D,...Z).
upper-roman Элемент списка Элемент списка Элемент списка	Римские цифры в верхнем регистре (I, II, III, IV, V и т.д.).

Обращаю Ваше внимание, что значения hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha не поддерживаются браузером Internet Explorer .

Давайте рассмотрим пример использования свойства list-style-type в тексте:

/* список со значением типа маркера по умолчанию (disc). */
• Элемент списка
• Элемент списка
• Элемент списка
/* нумерованный список с типом маркера lower-roman */
1. Элемент списка
2. Элемент списка
3. Элемент списка
/* маркированный список с типом маркера circle */
• Элемент списка
• Элемент списка
• Элемент списка

В данном примере мы создали два стиля, первый устанавливает тип маркера - римские числа в нижнем регистре (значение lower-roman ), мы его применили к нумерованном списку (HTML элемент

), а к маркированному списку (HTML элемент
) мы применили стиль, который устанавливает тип маркера в форме полого круга (значение circle ).

Результат нашего примера:

Обращаю Ваше внимание, что вы можете применить свойство list-style-type даже к отдельно взятому элементу списка (HTML элемент

• ), чтобы установить свой тип маркера, либо создать стили, которые будет применять определённый маркер к чётным, либо нечетным элементам списка, как рассмотрено в следующем примере:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка

  В этом примере мы стилизовали все нечетные элементы списка - указали тип маркера квадрат , а цвет текста указали зеленый . Четные элементы списка получили следующий стиль: красный цвет текста и отсутствие маркера.

  Результат нашего примера:

  Расположение маркера относительно элемента списка

  Результат нашего примера:

  Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).

  Создание собственных маркеров

  Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.

  Синтаксис свойства следующий:

  ol { list-style-image : url("images/primer.png") ; /* указываем относительный путь к изображению */ } ul { list-style-image : ; /* указываем абсолютный путь к изображению */ }

  Значение в скобках соответствует пути к изображению, которое вы планируете использовать в роли маркера. Путь к изображению может быть как абсолютный, так и относительный. При указании относительного пути, важным моментом является то, что его необходимо указывать относительно размещения таблицы стилей, а не страницы .

  Если вы планируете оформить собственные маркеры, то вам придется использовать программу для редактирования графики, либо воспользоваться уже готовыми наборами. Обратите внимание на такой момент, который может произойти, даже если Вы все сделали правильно, изображение может не загрузиться на страницу, в этом случае необходимо отредактировать изображение таким образом, чтобы его фон стал прозрачным.

  Давайте рассмотрим пример использования собственных маркеров в документе:

  .test { list-style-image : url("http://сайт/images/mini5.png") ; /* указываем абсолютный путь к изображению, которое будет использовано в качестве маркера */ }
  • Элемент списка
  • Элемент списка
  • Элемент списка

  В данном примере мы указываем абсолютный путь к изображению, которое будет использовано в качестве маркера.

  Результат нашего примера:

  Изменение цвета маркера в CSS

  В завершении этой статьи давайте рассмотрим продвинутый способ изменения цвета маркера без изменения цвета элемента, с использованием CSS свойства content и ранее рассмотренного псевдоэлемента :before :

  • Элемент списка
  • Элемент списка
  • Элемент списка

  Суть этого способа заключается в том, что мы перед каждым элементом списка (HTML элемент

• ) вставляем псевдоэлементом (:before) сгенерированный контент (CSS свойство content), который идентичен по внешнему виду маркеру в маркированном списке (HTML элемент
  ), только уже необходимого для нашей задачи цвета .

  Обращаю Ваше внимание, что в данном примере использовано свойство padding-right , которое нам позволило сделать внутренний отступ справа в каждом элементе списка (HTML элемент

  • ). Если в данном случае не применять это свойство, то маркер будет находится в упор к тексту, что зрительно некрасиво. Работа с внутренними и внешними отступами элементов будет подробно рассмотрена в следующей статье учебника " ".

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практические задания:

    
    

    Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

    2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com

    CSS дает возможность создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначения маркированного списка.

    CSS стили списка маркера.

    list-style-type

    list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;

    Значение :

    disk – маркированный список в виде закрашенного кружка

    circle – маркированный список в виде не закрашенного кружка

    square – маркированный список в виде закрашенного квадратика

    decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

    upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

    lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

    upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

    lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)

    none – без маркера.

    Пример :

    • Верь в лучшее, ожидай худшее.
    • Жизнь - это болезнь, со смертельным исходом.
    • Никогда не говори никогда.

    Результат :

    Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

    list-style-type: none;

    Пример :

    • Верь в лучшее, ожидай худшее.
    • Никогда не говори никогда.

    Результат :

    

    Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .

    list-style-image

    list-style-image: url(картинка.png);

    Пример :

    • Верь в лучшее, ожидай худшее.
    • Жизнь - это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат :

    

    Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

    Пример :

    • Верь в лучшее, ожидай худшее.
    • Жизнь - это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат :

    

    Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
    Это выглядит вот так:

  • текст

  Пример :

  • Верь в лучшее, ожидай худшее.
  • Жизнь - это болезнь со смертельным исходом.
  • Никогда не говори никогда.

  Результат :

  

  Дополнение к общей теме.
  Если вам нужно, по каким-либо причинам, задать нумерацию списка маркера не с нуля, а, допустим, с 8, вы можете сделать такой ход.

  Пример :

  • Верь в лучшее, ожидай худшее.Пункт 1
  • Жизнь - это болезнь со смертельным исходом.Пункт 2
  • Никогда не говори никогда.Пункт 3
  • Это все что я знал. Пункт 4

  Результат :

  

  Вот и подошла к завершению тема .

  Задача

  Задать цвет маркеров в списке не изменяя цвет текста.

  Решение

  Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь

  • вкладываем тег , а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы
  • текст
  создаем конструкцию
  • текст
  . При этом цвет маркеров определяется стилевым свойством color для селектора LI , а цвет текста — для селектора SPAN (пример 1).

  Пример 1. Использование вложенных тегов

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  • Скрипка
  • Гитара
  • Волынка
  • Шарманка
  • Челеста

  Результат данного примера показан ниже (рис. 1).

  Рис. 1. Маркеры, отличающиеся по цвету от основного текста

  Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять тег . Поэтому разберём хитрый способ, полностью основанный на работе CSS.

  Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
  8.0+	1.0+	7.0+	3.1+	1.0+	1.0+	1.0+

  Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае LI . Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2. Здесь в качестве маркеров используется символ параграфа ¶.

  Пример 2. Использование псевдоэлемента:before

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  • Север
  • Юг
  • Запад
  • Восток

  Результат данного примера показан на рис. 2.

  

  Рис. 2. Маркеры, созданные с помощью стилей

  В статье представлено несколько способов, которые позволяют установить определенный маркер для ненумерованного списка, а также указаны их достоинства и недостатки

  Если проанализировать какой-либо сайт, то можно обнаружить тот факт, что в контенте очень часто присутствуют списки разного рода: меню, список товаров и т. д. В HTML-коде за нумерованный список отвечает тег , а за маркированный – .

  Еще стоит отметить тот факт, что на практике маркированные списки встречаются намного чаще, но при этом у них есть один небольшой недостаток. Маркер в списке отображается по-разному, в зависимости от используемого браузера. Для серьезного дизайнера это проблема.

  Чтобы устранить этот негативный эффект надо отменить вывод маркера, воспользовавшись свойством list-style :

  ol, ul { list- style: none; }

  С этого начинается формирование списка с уникальными маркерами и значками. Ниже представлены наиболее распространенные способы представления уникальных и одинаковых для всех браузеров значков элементов списка.

  Маркеры через картинки

  Наиболее распространенный и простой способ указать для списка маркер – это воспользоваться бекграундной картинкой (свойство background). Метод основывается на указании в таблице стилей фонового рисунка для элементов списка, а также внутренний отступ (свойство padding), который зарезервирует место для нового маркера. Ниже представлен пример кода:

  ul { list- style: none; } li{ background: url(путь- к- картинке) no- repeat; padding- left: 20px; }

  Этот способ радует своей уникальностью, так как позволяет установить абсолютно любой маркер в виде картинки. Ниже показано, как наш код будет выглядеть в браузере:

  

  Главная положительная сторона этого метода заключается в 100%-ной кроссбраузерности, но, не смотря на это, есть маленький недостаток. Использование картинки – это дополнительное обращение к серверу.

  Маркеры с помощью before

  Существует вариант, когда можно обойтись без картинки, если дизайнерские условия позволяют это. Такое очень часто допускается при оформлении основного контента, когда список маркируется простейшими элементами, типа квадратик ( ) или стрелочка (→). Таким образом, мы подошли к тому, что в качестве маркера может выступать какой-либо подходящий спецсимвол.

  Далее возникает вопрос, каким образом спецсимволы вставлять в элементы списка. Естественно не в ручную, иначе это был бы очень затянутый и нудный процесс, плюс ко всему еще и трудоемкий. Выйти из этой ситуации нам поможет псевдоэлемент before , применение которого привязывается к определенному селектору, что позволяет автоматизировать наш процесс присвоения маркеров из спецсимволов. Такое решение подходит к большинству браузеров, с учетом того, что для IE , будет прописан expression .

  Ниже представлен пример кода, который формирует маркированный список с коротким тире:

  li{ this. innerHTML = "-" + this. innerHTML) /*хак для IE*/ } li: before{ content: "\201 3" ; }

  На практике получим такую картину:

  

  Напоминаю о том, что в реальных условиях хаки подключаются условными комментариями .

  При использовании этого метода главное знать кодировку необходимого значка. Также стоит отметить, что для expression спецсимволы прописываются числовой комбинацией или мнемоническим кодом. Что касается свойства content , то в этом случае вначале ставится слеш, а потом идет запись шестнадцатеричного кода.

  Использование insertAdjacentHTML

  Вышеупомянутый способ не всегда корректно отрабатывает в легендарном IE (не смотря на хак). Точнее, «костыли» для этого браузера не до конца доработанные. Более действенным является метод, основанный на insertAdjacentHTML , ниже представлен код этого метода:

  li{ //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }

  Маркеры, нарисованные CSS-свойствами

  Некоторые квадратные маркеры можно нарисовать с использованием некоторых CSS-свойств. К примеру, квадрат с цветной заливкой рисуется через свойство background-color , а квадратик в виде рамки – border (кстати говоря, квадрат с заливкой можно нарисовать и таким способом). Пример записи в CSS-файле:

  li{ //z-index: expression(runtimeStyle.zIndex = 1, this. innerHTML = "

  " + this. innerHTML) /* хак для ие6 и 7 */ } li: before, . listMarkerBackColor{ background- color: #539127; width: 7px; height: 7px; content: "" ; float: left; margin: 6px 6px 0 0 ; overflow: hidden; } html . listMarkerBackColor{ margin- right: 1px; /* исправляем маленткий косяк в IE6 */ }

  Таким образом рисованный CSS-свойствами маркер будет выглядеть на практике:

  

  Использование before и first-child в комплексе

  Такой метод частенько применяется при оформлении хлебных крошек на сайте. Кто не знает о чем речь, смотрим на пример ниже

  

  В таком случае каждая ссылка отделяется друг от друга спецсимволом, но перед первым элементом никакого спецсимвола быть не должно. В этом нам поможет псевдокласс first-child , который обращается только к первому элементу списка. В кодовом виде это должно выглядеть так

  HTML
  

  < ul> < li>< a href= "#" > Главная < li>< a href= "#" > Блог < li>< a href= "#" > CSS < li> Валидный код при использовании target= "_blank"

  li: before{ content: "\21 92" ; } li: first- child: before{ content: "" ; }

  Стоит также отметить, что такой прием используют не только для хлебных крошек, но и для обычных маркированных списков, в зависимости от дизайнерского задания.

  В каких браузерах работает?

  6.0+	4.0+	9.5+	3.0+	3.0+	-	-

  Выводы

  Подводя итог, можно отметить тот факт, что применение псевдоэлемента before является оправданным и рациональным в основном контенте, так как там не выдвигают особых требований к оформлению списков. Это в свою очередь позволит уменьшить нагрузку на сервер, в сравнении с вариантом, когда используют картинку. А если еще отметить тот факт, что в основном контенте может быть очень много маркированных списков, то разница может стать существеннее. Но картинки значительно выигрывают в плане дизайнерских решений маркера.