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

Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках

Вот самый простой пример нестилизованного списка:

html

Посадить дерево
Построить дом
Вырастить сына

Давайте рассморим несколько способов решения вышеописанной задачи.

Традиционно топорный способ.

Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none; .

css

html

1 Посадить дерево
2 Построить дом
3 Вырастить сына

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

Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент::before и css-свойства content , counter-increment , counter-reset .

Красивый и правильный способ.

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

css

html

Посадить дерево
Построить дом
Вырастить сына

Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

Давайте разберем по пунктам:

li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого
1. counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента::before .
2. content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента::before .

подробнее о css-счетчиках можно посмотреть в

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

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

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

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

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

article

размер маркера списка css (8)

Мне было интересно, есть ли способ изменить цвет на пули в списке.

У меня есть список:

House
Garden

Невозможно вставить что-либо в li, например, «span» и «p». Могу ли я изменить цвет пуль, но не текст каким-то умным способом?

Для меня лучшим вариантом является использование псевдоэлементов CSS, поэтому для disc пули disc это будет выглядеть так:

ul { list-style-type: none; } li { position: relative; } li:before { content: ""; display: block; position: absolute; width: 5px; /* adjust to suit your needs */ height: 5px; /* adjust to suit your needs */ border-radius: 50%; left: -15px; /* adjust to suit your needs */ top: 0.5em; background: #f00; /* adjust to suit your needs */ }

first
second
third

width и height должны иметь равные значения, чтобы удерживать указатели округлыми
вы можете установить border-radius равным нулю, если вы хотите иметь square пули

Для более стилей пули вы можете использовать другие css-формы https://css-tricks.com/examples/ShapesOfCSS/ (выберите это, для которого не требуются псевдоэлементы, например, треугольники)

Основываясь на ответе @ ddilsaver. Я хотел иметь возможность использовать спрайт для пули. Это, похоже, работает:

Li { list-style: none; position: relative; } li:before { content:""; display: block; position: absolute; width: 20px; height: 20px; left: -30px; top: 5px; background-image: url(i20.png); background-position: 0px -40px; /* or whatever offset you want */ }

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

li { color: blue; } li::first-line { color: black; }

House
Garden

Мне тоже очень понравился ответ Марка - мне нужен набор разных цветных UL, и, очевидно, было бы проще просто использовать класс. Вот что я использовал для апельсина, например:

Ul.orange { list-style: none; padding: 0px; } ul.orange > li:before { content: "\25CF "; font-size: 15px; color: #F00; margin-right: 10px; padding: 0px; line-height: 15px; }

Кроме того, я обнаружил, что шестнадцатеричный код, который я использовал для «content:», был другим, чем у Marc"s (этот шестигранный круг казался слишком высоким). Тот, который я использовал, кажется, сидит совершенно посередине. Я также нашел несколько других фигур (квадраты, треугольники, круги и т. Д.)

Построение обоих решений @Marc и @jessica - это решение, которое я использую:

Li { position:relative; } li:before { content:""; display: block; position: absolute; width: 6px; height:6px; border-radius:6px; left: -20px; top: .5em; background-color: #000; }

Я использую em для размеров шрифта, поэтому, если вы установили top значение в.5em оно всегда будет помещено в середину вашей первой строки текста. Я использовал left:-20px потому что это позиция left:-20px по умолчанию в браузерах: parent padding/2

Исходя из решения @ Marc - поскольку символ пули визуализирован по-разному с разными шрифтами и браузерами, я использовал следующую технику css3 с радиусом границы, чтобы сделать пулю, с которой я больше контролирую:

Li:before { content: ""; background-color: #898989; display: inline-block; position: relative; height: 12px; width: 12px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin-right: 4px; top: 2px; }

Мы можем комбинировать list-style-image с svg s, который мы можем встроить в css ! Этот метод предлагает невероятный контроль над «пулями», которые могут стать чем угодно.

Чтобы получить красный круг, просто используйте следующий css:

"); }

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

ul { list-style-image: url("data:image/svg+xml,"); } ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul.bulls-eye { list-style-image: url("data:image/svg+xml,"); } ul.multi-color { list-style-image: url("data:image/svg+xml,"); }

Big circles!
- Big rectangles!
- b
  - Small circles!
  - c
    - Small rectangles!

Bulls
eyes.

Multi
color

Ширина / высота атрибутов

Для некоторых браузеров требуются атрибуты width и height которые должны быть установлены на

Кодировки

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

li { list-style: none; } li:before { /* For a round bullet */ content: "\2022"; /* For a square bullet */ /*content:"\25A0";*/ display: block; position: relative; max-width: 0; max-height: 0; left: -10px; top: 0; color: green; font-size: 20px; }

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

Изменение цвета и стиля маркеров и понимание ограничений

Вы можете изменить цвет, стиль или размер маркеров или номеров в PowerPoint презентации, а также изменить номер, с которого вы хотите начать.

Применение пользовательских стилей к нескольким слайдам

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

Ограничения списка в PowerPoint

Вы не можете делать со списками в PowerPoint, которые можно использовать в других Office программах, например Word. Например, PowerPoint не поддерживает следующие возможности:

Вопросы и ответы

Щелкните заголовок раздела ниже, чтобы открыть подробные инструкции.

Почему я вижу только один маркер, независимо от того, сколько строк я добавляю?

Убедитесь, что вы используете в текстовом поле маркеры или номера, а не поле названия . В текстовом поле каждый раз при нажатии клавиши появляется число или маркер ВВОД. При нажатии клавиши CTRL + ВВОДВы получаете дополнительные линии без маркеров (для получения подробных сведений или примечаний в маркированной или нумерованной строке).

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

Как отменить создание маркеров при каждом добавлении линии?

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

Вы также можете нажать ВВОД и нажмите клавишу BACKSPACE для удаления маркера или номера. Затем можно добавить текст или нажать клавишу ВВОД для добавления лишних пустых строк.

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

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

1 . Уменьшить уровень списка (отступ)

2 . Увеличить уровень списка (отступ)

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

Как увеличить или уменьшить расстояние между маркером или номером и текстом в строке?

Чтобы увеличить или уменьшить расстояние между маркером или номером и текстом в строке, поместите курсор в начало строки текста. Чтобы просмотреть линейку, на вкладке вид в группе Показать установите флажок линейка . На линейке щелкните выступ (как показано на рисунке ниже) и перетащите указатель, чтобы изменить расстояние между маркером или числом и соответствующим текстом.

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

1 . Отступ первой строки - указывает на место фактического символа маркера или номера. Если абзац не маркирован, это означает позицию первой строки текста.

2 . Отступ слева - настраивает значения обоих маркеров: для первой строки и выступа и сохраняет их относительное расстояние.

3 . выступ - указывает на расположение фактических строк текста. Если абзац не маркирован, то он указывает на расположение второй строки (и последующих строк) текста.

Как изменить маркеры по умолчанию на другой символ?

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

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

Дополнительные сведения о работе с образцами можно найти в разделе Изменение образца слайдов .

Используйте маркеры или нумерацию для показа большого количества текста или последовательного процесса в Microsoft PowerPoint 2010 презентации.

Используйте маркеры или нумерацию для показа большого количества текста или последовательного процесса в Microsoft Office PowerPoint 2007 презентации.

Вам могут быть интересны следующие материалы

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

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

Инструкции

Windows

Вконтакте

Советы

Instagram

Ошибки