Css маркированный список задать цвет. Установка маркера списка разными способами
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
Результат :
Вот и подошла к завершению тема .
В этой статье учебника речь пойдет о работе со списками в CSS, вы научитесь изменять тип маркера, расположение маркера относительно элемента списка, создавать собственные маркеры и даже изменять цвет маркера.
Думаю, вы уже знаете, что в HTML 5 применяется два основных вида списков (если не брать в расчет списки описаний и элементы меню):
- нумерованный (упорядоченный) список – HTML элемент
- маркированный (неупорядоченные) список – HTML элемент
CSS предоставляет нам широкие возможности форматирования внешнего вида этих списков, давайте рассмотрим основные из них.
Изменение типа маркера
Первое свойство, которое хотелось бы рассмотреть это свойство list-style-type , оно задает тип маркера элемента списка.
Меню навигации, к примеру, часто составляется из обычных маркированных списков (HTML элемент
- ), по умолчанию маркер которых, отображается в форме закрашенного круга, чтобы его убрать необходимо, воспользоваться CSS свойством list-style-type со значением none
:
ul
{
list-style-type
: none
; /* убираем маркер у списка */
}
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- ), чтобы установить свой тип маркера, либо создать стили, которые будет применять определённый маркер к чётным, либо нечетным элементам списка, как рассмотрено в следующем примере:
Пример чередования стилей свойства list-style-type - Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
В этом примере мы стилизовали все нечетные элементы списка - указали тип маркера квадрат , а цвет текста указали зеленый . Четные элементы списка получили следующий стиль: красный цвет текста и отсутствие маркера.
Результат нашего примера:
Расположение маркера относительно элемента списка
Результат нашего примера:
Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).
Создание собственных маркеров
Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.
Синтаксис свойства следующий:
ol { list-style-image : url("images/primer.png") ; /* указываем относительный путь к изображению */ } ul { list-style-image : ; /* указываем абсолютный путь к изображению */ }Значение в скобках соответствует пути к изображению, которое вы планируете использовать в роли маркера. Путь к изображению может быть как абсолютный, так и относительный. При указании относительного пути, важным моментом является то, что его необходимо указывать относительно размещения таблицы стилей, а не страницы .
Если вы планируете оформить собственные маркеры, то вам придется использовать программу для редактирования графики, либо воспользоваться уже готовыми наборами. Обратите внимание на такой момент, который может произойти, даже если Вы все сделали правильно, изображение может не загрузиться на страницу, в этом случае необходимо отредактировать изображение таким образом, чтобы его фон стал прозрачным.
Давайте рассмотрим пример использования собственных маркеров в документе:
Пример использования CSS свойства list-style-image .test { list-style-image : url("http://сайт/images/mini5.png") ; /* указываем абсолютный путь к изображению, которое будет использовано в качестве маркера */ } - Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- ) вставляем псевдоэлементом (:before) сгенерированный контент (CSS свойство content), который идентичен по внешнему виду маркеру в маркированном списке (HTML элемент
- ), только уже необходимого для нашей задачи цвета
.
- ). Если в данном случае не применять это свойство, то маркер будет находится в упор к тексту, что зрительно некрасиво.
Работа с внутренними и внешними отступами элементов будет подробно рассмотрена в следующей статье учебника " ".
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com
Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.
По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится - цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).
Как изменить цвет буллитов с помощью CSS
- Скрываем оригинальные маркеры списка с помощью свойства list-style-type
- Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Это позволит вставить любой текст или символ перед элементом li .
- Внешним видом маркера можно управлять через стили CSS, изменяя цвет, шрифт, фон и другое. Я использовал жирное начертание шрифта Монтсеррат.
Если у вас возникла ситуация, когда маркеры появились в ненужных местах, например в главном меню или в дублирующем меню в футере, то это можно легко исправить. Просто допишите родительский элемент, в котором находятся списки, цвет маркеров которых нам надо изменить. Я добавил слово article и теперь эти изменения стали относиться только к контентной области сайта.
article li { list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ } article li:before { font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: " "; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ }Задача
Изменить вид маркеров в списке и заменить их на другой символ.
Решение
С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI (пример 1).
Пример 1. Стандартные маркеры
HTML5 CSS 2.1 IE Cr Op Sa Fx
Квадратные маркеры - Чебурашка
- Крокодил Гена
- Шапокляк
В данном примере в качестве маркеров используется квадрат (рис. 1).
Рис. 1. Вид маркеров
Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент :before . Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type , а затем добавить псевдоэлемент :before к селектору LI . Сам вывод символа осуществляется с помощью свойства content , в качестве значения которого и выступает желаемый текст или символ (пример 2).
Пример 2. Использование:before и content
HTML5 CSS 2.1 IE Cr Op Sa Fx
Символ в качестве маркера - Чебурашка
- Крокодил Гена
- Шапокляк
В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).
Рис. 2. Маркеры в виде символа
Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.
Задача
Задать цвет маркеров в списке не изменяя цвет текста.
Решение
Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь
-
вкладываем тег , а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы
- текст
создаем конструкцию- текст
. При этом цвет маркеров определяется стилевым свойством 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. Маркеры, созданные с помощью стилей
Обращаю Ваше внимание, что в данном примере использовано свойство padding-right , которое нам позволило сделать внутренний отступ справа в каждом элементе списка (HTML элемент
- ). Если в данном случае не применять это свойство, то маркер будет находится в упор к тексту, что зрительно некрасиво.
Работа с внутренними и внешними отступами элементов будет подробно рассмотрена в следующей статье учебника " ".
Для маркированных (неупорядоченных) списков (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 в тексте:
Пример использования свойства list-style-type - /* список со значением типа маркера по умолчанию (disc). */
- /* нумерованный список с типом маркера lower-roman */
- /* маркированный список с типом маркера circle */
В данном примере мы создали два стиля, первый устанавливает тип маркера - римские числа в нижнем регистре (значение lower-roman ), мы его применили к нумерованном списку (HTML элемент
- ), а к маркированному списку (HTML элемент
- ) мы применили стиль, который устанавливает тип маркера в форме полого круга (значение circle
).
Результат нашего примера:
Обращаю Ваше внимание, что вы можете применить свойство list-style-type даже к отдельно взятому элементу списка (HTML элемент
В данном примере мы указываем абсолютный путь к изображению, которое будет использовано в качестве маркера.
Результат нашего примера:
Изменение цвета маркера в CSS
В завершении этой статьи давайте рассмотрим продвинутый способ изменения цвета маркера без изменения цвета элемента, с использованием CSS свойства content и ранее рассмотренного псевдоэлемента :before :
Пример изменения цвета маркера Суть этого способа заключается в том, что мы перед каждым элементом списка (HTML элемент