Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.
Использование
Внутрь каждого элемента
создаем конструкцию
При этом цвет маркеров определяется стилевым свойством color для селектора li , а цвет текста - для селектора span (пример 1).
Пример 1. Использование вложенных тегов
- Скрипка
- Гитара
- Волынка
- Шарманка
- Челеста
Результат данного примера показан ниже (рис. 1).
Рис. 1. Маркеры, отличающиеся по цвету от основного текста
Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять .
Использование::before
Смысл в следующем - убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента ::before и свойства content . Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае
Пример 2. Использование псевдоэлемента::before
- Север
- Юг
- Запад
- Восток
Результат данного примера показан на рис. 2.
Вы можете использовать маркированные или нумерованные списки для упорядочения текста или отображения последовательного процесса в PowerPoint презентации.
Изменение цвета и стиля маркеров и понимание ограничений
Вы можете изменить цвет, стиль или размер маркеров или номеров в PowerPoint презентации, а также изменить номер, с которого вы хотите начать.
Применение пользовательских стилей к нескольким слайдам
Лучший способ применения пользовательских стилей списков ко всем слайдам в презентации - изменение образца слайдов. Любые настройки списка, внесенные в образец слайдов, будут сохранены и применены ко всем слайдам. Вы также можете изменить или создать один или несколько макетов слайдов , которые включают пользовательские стили списков, и добавить их в те места презентации, где вы хотите использовать свои стили списков.
Ограничения списка в PowerPoint
Вы не можете делать со списками в PowerPoint, которые можно использовать в других Office программах, например Word. Например, PowerPoint не поддерживает следующие возможности:
Вопросы и ответы
Щелкните заголовок раздела ниже, чтобы открыть подробные инструкции.
Почему я вижу только один маркер, независимо от того, сколько строк я добавляю?
Убедитесь, что вы используете в текстовом поле маркеры или номера, а не поле названия . В текстовом поле каждый раз при нажатии клавиши появляется число или маркер ВВОД. При нажатии клавиши CTRL + ВВОДВы получаете дополнительные линии без маркеров (для получения подробных сведений или примечаний в маркированной или нумерованной строке).
В поле названия ожидается, что текст является заголовком или названием в виде одной строки. Вы можете использовать номера или маркеры, но рассчитает все строки текста одной строкой, в результате чего получается один маркер или номер.
Как отменить создание маркеров при каждом добавлении линии?
Чтобы остановить создание маркеров и номеров и вернуться к тексту, щелкните маркеры или нумерация еще раз, чтобы отключить его.
Вы также можете нажать ВВОД и нажмите клавишу BACKSPACE для удаления маркера или номера. Затем можно добавить текст или нажать клавишу ВВОД для добавления лишних пустых строк.
Как использовать несколько уровней маркеров?
Чтобы создать подчиненный список в списке, поместите курсор в начало строки, для которой вы хотите задать отступ, а затем на вкладке Главная в группе абзац нажмите кнопку увеличить уровень списка .
1 . Уменьшить уровень списка (отступ)
2 . Увеличить уровень списка (отступ)
Чтобы переместить текст обратно на более низкий уровень в списке, поместите курсор в начало строки, а затем на вкладке Главная в группе абзац нажмите кнопку уменьшить уровень списка .
Как увеличить или уменьшить расстояние между маркером или номером и текстом в строке?
Чтобы увеличить или уменьшить расстояние между маркером или номером и текстом в строке, поместите курсор в начало строки текста. Чтобы просмотреть линейку, на вкладке вид в группе Показать установите флажок линейка . На линейке щелкните выступ (как показано на рисунке ниже) и перетащите указатель, чтобы изменить расстояние между маркером или числом и соответствующим текстом.
На линейке отображаются три разных маркера для обозначения отступов, определенных для текстового поля.
1 . Отступ первой строки - указывает на место фактического символа маркера или номера. Если абзац не маркирован, это означает позицию первой строки текста.
2 . Отступ слева - настраивает значения обоих маркеров: для первой строки и выступа и сохраняет их относительное расстояние.
3 . выступ - указывает на расположение фактических строк текста. Если абзац не маркирован, то он указывает на расположение второй строки (и последующих строк) текста.
Как изменить маркеры по умолчанию на другой символ?
Чтобы изменить маркеры, используемые по умолчанию, в PowerPoint на компьютере с Windows, выполните указанные ниже действия.
При вставке слайда или текстового поля для маркеров будут отображены новые параметры маркеров по умолчанию.
Дополнительные сведения о работе с образцами можно найти в разделе Изменение образца слайдов .
Используйте маркеры или нумерацию для показа большого количества текста или последовательного процесса в Microsoft PowerPoint 2010 презентации.
Используйте маркеры или нумерацию для показа большого количества текста или последовательного процесса в Microsoft Office PowerPoint 2007 презентации.
Задача
Задать цвет маркеров в списке не изменяя цвет текста.
Решение
Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь
Пример 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 или 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.
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
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.