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

Изменить маркер списка css – Как изменить цвет маркера в списке css. Оформление списков с помощью CSS-стилей. Местоположение маркера списка list-style-position

С помощью CSS допускается устанавливать один из трёх типов маркеров: disc (точка), circle (кружок), square (квадратик). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора ul или li (пример 1).

Пример 1. Стандартные маркеры

В данном примере в качестве маркеров используется квадратик (рис. 1).

Рис. 1. Вид маркеров

Выбор и установка собственного символа маркера происходит через псевдоэлемент ::before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type, а затем добавить псевдоэлемент ::before к селектору li. Сам вывод символа осуществляется с помощью свойства content, в качестве значения которого и выступает желаемый символ (пример 2).

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

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

Рис. 2. Маркеры в виде символа

Чтобы выбрать в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа, входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 19.09.2018

Редакторы: Влад Мержевич

Как изменить маркер списка CSS

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

Напомню, как подключаются стили к Html странице:

Существуют маркированный, или ненумерованный список css и нумерованный.

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

Нумерованный список представляет собой вывод информации под номерами 1, 2, 3 и т.д.

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

Если вы решили заменить эти кружки на дизайнерские, то нужно освоить оформление списка с помощью css. Чем мы сегодня и займемся.

Основа любого списка состоит из следующего кода веб-страницы:

• Первый элемент списка
• Второй элемент списка
• Последний элемент списка

Выглядит этот блок так:

• Первый элемент списка
• Второй элемент списка
• Последний элемент списка

Css оформление маркеров списка

Внешний вывод будем прописывать в файле стилей style.css. Он может называться и по-другому, но иметь расширение .css.

Стандартные маркеры CSS: кружок (circle) – не закрашенный кружок, точка (disk) – закрашенный кружок, квадрат (square) – закрашенный квадрат.

Формирует список в css код ul — с его помощью мы задаем, какой из стандартных маркеров будет выводиться на странице.

Например, выведем списки с использованием кружка (circle). Запись в css файле будет такая:

Но часто нужно заменить маркеры не во всех выводимых списках, а только в определенных блоках. К примеру, изменить в постах, но не в комментариях. В этом случае, код ul не должен иметь никакого значения, а стиль кружка нужно прописать только для списков в постах. Так выглядит код без значения:

Если вы не можете найти код в файле css, отвечающий за вывод списка в нужном вам блоке, то воспользуйтесь плагином для Firefox — Firebug или в Google Chrom нажмите правой кнопкой мыши на веб-странице блога. Затем «просмотр кода элемента».

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

.post-content ul

Или другой пример:

#content-blok ul

Полный курс «Css практика»

]]>]]>

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

Для тех, кто хочет очень быстро научиться трюкам css стилей, ]]>рекомендую]]> расширенный курс «CSS практика» Евгения Попова.

Следующие статьи:

Графические маркеры для списка.

Отступ списка css.

Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.

Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.

Скачать красивые маркеры для списков сайта.

Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

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

Решение

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

Результат данного примера показан ниже (рис. 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

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

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

Как установить цвета маркеров в списках HTML, используя только CSS?

Учитывая неупорядоченные списки (UL) маркеров, нам нужно изменить цвет маркеров в списке с помощью CSS.

Примечание . Не допускается использование каких-либо изображений или тегов диапазона.

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

Этот контент является Unicode того типа маркера, который вы хотите использовать в своем списке. Символы Юникода для различных стилей маркеров:

Ниже приведен пример кода CSS, который удаляет стиль по умолчанию из неупорядоченного списка в HTML и использует юникоды:

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

Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.

По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится — цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).

Как изменить цвет буллитов с помощью CSS

1. Скрываем оригинальные маркеры списка с помощью свойства list-style-type
2. Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content. Это позволит вставить любой текст или символ перед элементом li.
3. Внешним видом маркера можно управлять через стили CSS, изменяя цвет, шрифт, фон и другое. Я использовал жирное начертание шрифта Монтсеррат.

li:before < font-family: 'Montserrat', sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: "•"; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ >

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

article li < list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ >

article li:before < font-family: 'Montserrat', sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: "•"; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ >

Как изменить маркер списка

Цвет маркера списка можно изменить несколькими способами:

1. Использовать тег span ;
2. Использовать псевдоэлемент ::before или ::after ;
3. Использовать псевдоэлемент ::marker .
4. Изображение для маркера списка.

Как изменить цвет маркера списка с помощью CSS

1. Используя тег span :

li < color:#f16092; >li span

2. Используя псевдоэлемент ::before :

li < color:#214133; list-style-type: none; >li::before

1. Snow
2. Rain
3. Fog

• list-style-type: none; — отменяем стандартный маркер,
• content: » «; — указываем символ маркера, который хотим вывести перед элементом списка.

3. Маркер списка при помощи псевдоэлемента ::marker .

li::marker

Картинка для маркера списка

Чтобы заменить маркеры списка на изображения воспользуемся свойством list-style-image.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Поделиться с друзьями:

Статьи из данной категории:

• JavaScript: Работа с Массивами
• Наличие Динамически Добавленного Элемента
• Стилизация Input File
• Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
• Стилизация Скролла
• События Формы

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

Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?

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

Решение

Пример 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. Здесь в качестве маркеров используется символ параграфа ¶.

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

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

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

При этом цвет маркеров определяется стилевым свойством color для селектора li , а цвет текста — для селектора span (пример 1).

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

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

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

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять .

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

Полное руководство по спискам в HTML и CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «A complete guide about lists in HTML and CSS».

Что такое списки

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

Списки в HTML

Если вы хотите представлять на своих веб-страницах какие-то данные, являющиеся наборами чего-либо, список является прекрасным вариантом оформления. Благодаря спискам пользователи легче воспринимают информацию.

Виды списков

В HTML списки бывают трех видов:

1. Упорядоченные списки.
2. Неупорядоченные списки.
3. Списки определений.

Что такое упорядоченный список?

Упорядоченный список это набор элементов, представленных в определенном порядке. Форма упорядоченного списка лучше всего подходит для представления наборов данных, где порядок элементов имеет значение.

Примерами могут послужить кулинарные рецепты, где действия следует выполнять в определенном порядке, или списки инструкций простой программы.

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

Для создания упорядоченных списков используется тег (ordered list – «упорядоченный список»), а для каждого из его элементов – тег (list – «список»).

1. Налейте воду в кастрюлю.
2. Добавьте сахар, чайные листья и специи.
3. Доведите до кипения и подержите на медленном огне около минуты.
4. Добавьте молоко.
5. Доведите до кипения и подержите на медленном огне 3-5 минут.
6. Процедите чай и перелейте его в чайник.

1. Налейте воду в кастрюлю.
2. Добавьте сахар, чайные листья и специи.
3. Доведите до кипения и подержите на медленном огне около минуты.
4. Добавьте молоко.
5. Доведите до кипения и подержите на медленном огне 3-5 минут.
6. Процедите чай и перелейте его в чайник.

Значения по умолчанию:

По умолчанию пункты списка обозначаются арабскими цифрами.

Это можно изменить, используя разные значения CSS-свойства list-style-type.

list-style-type: upper-alpha

list-style-type: upper-roman

list-style-type: lower-alpha

list-style-type: lower-roman

Это самые часто используемые значения свойства list-style-type. Но есть множество других значений, которые мы рассмотрим дальше.

Что такое неупорядоченный список?

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

Примеры таких списков – списки покупок, списки запланированных дел.

Для создания упорядоченных списков используется тег (unordered list), а для каждого из его элементов – тег (как и в упорядоченном списке).

Значения по умолчанию:

По умолчанию маркеры элементов представлены в виде кружочков. Это можно изменить, используя все то же CSS-свойство list-style-type.

list-style-type: circle

list-style-type: square

list-style-type: disc

Дальше мы разберем и другие варианты стилей.

Что такое список определений?

Список определений отличается тем, что каждый его пункт состоит из двух элементов. Первый из них – термин, а второй – его определение.

Вы можете создать список определений при помощи тега (definition list – «список определений»). В пунктах списка термины (term) создаются при помощи тега , а описание (description) – при помощи тега .

See the Pen definition-list by Amrish Kushwaha (@isamrish) on CodePen.

Что такое вложенные списки?

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

See the Pen nested-list by Amrish Kushwaha (@isamrish) on CodePen.

Стиль списка

Для придания стилей списку используются три CSS-свойства.

list-style-type

Как вы уже знаете, это свойство используется для стилизации маркеров списка (как упорядоченного, так и неупорядоченного).

Это свойство может принимать несколько значений:

• disc (круг)
• square (квадрат)
• circle (окружность)
• decimal (арабские цифры)
• lower-alpha (строчные латинские буквы, =lower-latin)
• lower-roman (римские цифры в нижнем регистре)
• lower-latin (строчные латинские буквы, =lower-alpha)
• lower-greek (строчные греческие буквы)
• upper-alpha (заглавные латинские буквы, =upper-latin)
• upper-roman (римские цифры в верхнем регистре)
• upper-latin (заглавные латинские буквы, =upper-alpha)

С полным списком возможных значений свойства list-style-type можно ознакомиться здесь.

list-style-image

Это свойство используется, чтобы в качестве маркера списка установить изображение. Свойство может принимать два значения: url изображения или none.

See the Pen list-style-image by Amrish Kushwaha (@isamrish) on CodePen.

Поскольку значение этого свойства наследуется, для возвращения значения по умолчанию используется значение none.

list-style-position

Это свойство служит для определения положения маркера относительно элементов списка. Свойство list-style-position может принимать два значения: inside (внутри) и outside (снаружи).

Пример применения значения inside

Пример применения значения outside

А теперь давайте поиграем с цветами списка

Расцвеченный маркированный список

Вариант 1: элементы списка и маркеры имеют один цвет.

Вариант 2: элементы списка и маркеры имеют разные цвета.

Расцвеченный нумерованный список

Вариант 1: элементы списка и их номера имеют один цвет.

Вариант 2: элементы списка и их номера имеют разные цвета.

Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!

Изменить цвет маркера в html-списке?

Все, что я хочу, — это иметь возможность изменить цвет маркера в списке на светло-серый. По умолчанию он черный, и я не могу понять, как его изменить.

Я знаю, что могу просто использовать изображение; Я бы предпочел не делать этого, если смогу.

Цвет маркера определяется текстом. Поэтому, если вы хотите, чтобы в вашем списке была маркировка, отличная от текста, вам придется добавить разметку.

Оберните текст списка в диапазон:

Затем немного измените правила стиля:

Я справился с этим без добавления разметки, а вместо этого использовал li: before. Это, очевидно, имеет все ограничения :before (без поддержки старого IE), но, похоже, работает с IE8, Firefox и Chrome после очень ограниченного тестирования. Он работает в нашей среде контроллера, интересно, может ли кто-нибудь это проверить. Стиль маркера также ограничен юникодом.

Это было невозможно в 2008 году, но скоро это станет возможным (надеюсь)!

Согласно спецификации W3C CSS3 , вы можете полностью контролировать любое число, глиф или другой символ, сгенерированный до элемента списка с ::marker псевдоэлементом. Чтобы применить это к решению, получившему наибольшее количество голосов:

Однако обратите внимание, что по состоянию на июль 2016 года это решение является только частью рабочего проекта W3C и пока не работает ни в каких основных браузерах.

Похожие публикации:

1. Как добавить фото в html css
2. Как задать высоту в css
3. Как удалить неиспользуемый код css
4. Как указать путь к картинке в css