Css ul цвет маркера. Список Изменить цвет маркеров в HTML-списке без использования диапазона. Красивый и правильный способ
CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка , добавить изображение для маркера , а также изменить местоположение маркера . Высоту блока маркера можно задать свойством line-height .
Оформление списков с помощью CSS-стилей
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.
list-style-type | |
---|---|
Значения: | |
disc | Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок. |
armenian | Традиционная армянская нумерация. |
circle | В качестве маркера выступает незакрашенный кружок. |
cjk-ideographic | Идеографическая нумерация. |
decimal | 1, 2, 3, 4, 5, … |
decimal-leading-zero | 01, 02, 03, 04, 05, … |
georgian | Традиционная грузинская нумерация. |
hebrew | Традиционная еврейская нумерация. |
hiragana | Японская нумерация: a, i, u, e, o, … |
hiragana-iroha | Японская нумерация: i, ro, ha, ni, ho, … |
katakana | Японская нумерация: A, I, U, E, O, … |
katakana-iroha | Японская нумерация: I, RO, HA, NI, HO, … |
lower-alpha | a, b, c, d, e, … |
lower-greek | Строчные символы греческого алфавита. |
lower-latin | a, b, c, d, e, … |
lower-roman | i, ii, iii, iv, v, … |
none | Маркер отсутствует. |
square | В качестве маркера выступает закрашенный или незакрашенный квадрат. |
upper-alpha | A, B, C, D, E, … |
upper-latin | A, B, C, D, E, … |
upper-roman | I, II, III, IV, V, … |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Ul {list-style-type: none;} ul {list-style-type: square;} ol {list-style-type: none;} ol {list-style-type: lower-alpha;} Рис. 1. Пример оформления маркированного и нумерованного списков
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
Синтаксис
Ul {list-style-image: url("images/romb.png");}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
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-стили номеров строк (цифр) в упорядоченных списках
- , то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.
- Посадить дерево
- Построить дом
- Вырастить сына
- 1 Посадить дерево
- 2 Построить дом
- 3 Вырастить сына
- Посадить дерево
- Построить дом
- Вырастить сына
- li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
- counter-reset:myCounter;
– обнуляет css-счетчик myCounter внутри каждого
- .
- counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента::before .
- content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента::before .
- Изменение вида стандартного маркера для нумерованных списков
- Установка типа маркера для маркированных списков
- Установка изображения вместо маркера для элементов списка
- Кликните на значение свойства list-style-type
- Наблюдайте за сменой маркеров
- Используйте для своих списков наиболее подходящие маркеры
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
- , а просто скрываются за краем окна браузера.
Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:
- outside - маркер располагается слева от содержимого (является значением по умолчанию)
- inside - маркер располагается внутри пункта списка вместе с содержимым
Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:
Название документа - Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
В примере к каждому пункту списка была добавлена рамка, чтобы визуально показать границы пунктов списка.
Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.
По умолчанию стоит черная точка. Если просто задать цвет элементу 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
Давайте рассморим несколько способов решения вышеописанной задачи.
Традиционно топорный способ.
Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none; .
css
li{ list-style: none; } .num{ color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }html
Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.
Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент::before и css-свойства content , counter-increment , counter-reset .
Красивый и правильный способ.
Вначале мы приведем код и демку, а потом разберемся, что к чему.
css
ol{ counter-reset: myCounter; } li{ list-style: none; } li:before { counter-increment: myCounter; content:counter(myCounter); color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }html
Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.
Давайте разберем по пунктам:
подробнее о css-счетчиках можно посмотреть в
С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные . По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.
Изменение и удаление маркеров
Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type , в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.
Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:
CSS Свойство:
list-style-type:
Результат:
Ol#myList {
list-style-type: decimal
;
}
Кликните на любое значение свойства, чтобы увидеть результат
Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:
С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:
Замена маркеров картинками
Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image , в значении которого нужно прописать путь к выбранному изображению.
Примите во внимание тот факт, что изображение не будет автоматически масштабироваться под список и будет отображено собственным размером, поэтому придется подбирать изображение подходящее по размеру или редактировать существующее, уменьшив или увеличив его до нужного:
Отступ списка
При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left , которое позволяет регулировать внутренний отступ:
В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах - по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов