Меню

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



Как в офисе.

Предупреждение : хотя статья написана о MS PowerPoint, учитывая однотипный интерфейс, все сказанное здесь также точно действует и в других приложениях программного пакета MS Office.

Списки — маркированные и нумерованные, отличный способ организации информации в документе, будь то многостраничный доклад или электронная презентация. Добавить простейший последовательный маркированный список очень легко, справиться с этим даже новичок. Однако, не всегда нам нужны только простейшие списки, верно? Потому в этой статье я постараюсь рассказать не только о самых азах, но и поведать всё, что знаю о списках сам.

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

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

Простой щелчок по «маркерам» создаст простой список — если вы уже ввели на лист какой-то текст и выделили его, нажатие на «маркеры» превратит в отдельный пункт вашего списка каждую отдельную строку. Повторное нажатие на кнопку уберет уже поставленные маркеры для текущей строки.

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

Нажатие на треугольник справа от кнопки «маркеры» откроет список доступных стилей маркеров. Возможно для вашей презентации больше подойдут не «официальные» черные точки-кругляшки, а маркеры-звездочки или маркеры-квадраты? Нет проблем!

Как вставить нумерованный список в презентацию PowerPoint?

Принцип действий точно такой же — мы снова идем на панель «Главная», в группу «Абзац», но выбираем не «маркеры», а инструмент «нумерация». Также как и в предыдущем примере, нажатие на треугольник справа от него, раскроет полный список доступных стилей. Выбор здесь даже больше — и привычные нам арабские цифры, и цифры римские и даже буквы.

Все просто? Не совсем. Что если мы хотим начать нашу нумерацию не с «1», а, например, с «5»? Сколько не щелкай по «нумерации», результат не поменяется — программа нас не понимает и упорно начинает счет заново. Впрочем, эта проблема только кажется проблемой на первый взгляд. Снова раскройте варианты стилей нумерованного списка и выберите самый нижний пункт: «Список».

В открывшемся окне, обратите внимание на нижний правый угол. Видите надпись «Начать с:»? С помощью мыши и кнопок управления, «нащелкайте» счетчик до пяти и обратите внимание — цифры примеров в окне также начнут изменяться. Ну что, начинаем с «5»? Уже готово!

Настраиваем маркированные и нумерованные списки в презентации

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

Снова вызовем дополнительное окно «Список» из предыдущего пункта, и рассмотрим его повнимательнее. Всего мы имеем доступ к 4-ем настройкам списков:

  • Цвет: позволяет задать каким цветом будут выведены маркеры списка (по умолчанию — черный цвет).
  • Размер: какого размера по отношению к тексту будут эти маркеры (100% по умолчанию — т.е. высота маркеров совпадает с высотой текста).
  • Рисунок: потенциально интересный пункт, позволяющий использовать вместо стандартных маркеров любое изображение.
  • Настройка: самый интересный пункт, позволяющий использовать вместо стандартных маркеров одby из десятков символов входящих в установленные на компьютер наборы шрифтов.
Читайте также:  Торт желтого цвета для детей

Я выбрал (Настройка) для своего нестандартного списка один из символов входящих в шрифт Calibri (стандартный для MS Office 2013), и изменил его цвет на красный (Цвет), чтоб не сливался с текстом. Также, мне показалось, что стрелка выбранная мной, когда её высота составляет 100% от текста, занимает слишком много место, поэтому я уменьшил её высоту до 80% от стандартной (Размер).

Как видите, мой список совсем не похож на один из заданных по умолчанию.

Если вам кажется, что «нестандартный» маркер списка находится слишком далеко (или близко) по отношению к тексту, вы можете легко исправить это включив линейки (панель «Вид», группа «Показ», поставить галочку в пункт «Линейка»), а затем перетащив мышью границу расположения выбранного элемента до требуемой дистанции.

Теперь вы можете быть уверены — о списках в MS PowerPoint (да и во всем MS Office) вы знаете всё.

Источник

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

По умолчанию маркером списка ul, служит простая черная точка. Я знаю, что многие начинающие верстальщики, используют маркированные списки для разметки меню навигации, предварительно обнулив в CSS значение селектора ul.

Давайте рассмотрим на примере, что я имею ввиду.

HTML разметка базового маркированного списка:

  • Анжелика
  • Анастасия
  • Анатолий
  • Александр

На странице, вы увидите следующее.

Как верстают меню навигации без точек? Просто в стилях прописывают следующую строчку.

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

Меняем цвет маркера списка (1-ый способ)

Удалим дефолтные черные точки.

А взамен, поставим другие точки, поставив псевдоэлемент before перед всеми пунктами списка. Вместо точек, добавим значение свойства content «\2022» , это CSS код точки, взятый из таблицы Юникода. Дальше к этим точкам, можно применять нужные стили.

ul li::before <
content: «\2022»; /* юникод точки */
color: orange; /* Менять цвет */
font-weight: bold; /* Менять жирность */
display: inline-block; /* Расстояние между точкой и текстом */
width: 1em; /* Задать значение расстояния */
>

Пример с заменой цвета маркеров списка

Меняем цвет маркера списка (2-ой способ)

Все спецсимволы Юникода имеют альтернативный HTML-код и могут вставляться напрямую в HTML разметку, между тегами span. Для разнообразия, мы используем в качестве маркера спецсимвол – ☑ галочка в квадрате.

Читайте также:  Какие надо смешать цвета чтобы получился русый цвет

CSS-код

span <
color: cyan;
font-weight: bold;
display: inline-block;
width: 1em;
font-size: 20px;
>

Второй способ изменения маркера списка, мне понравился больше. Он позволяет увеличить размер маркера (font-size), не задевая межстрочный интервал, чего нельзя сказать о первом способе.

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

Символы вместо иконок

На сегодняшний день, самый легкий способ вставки иконки-гамбургера в меню сайта – это вставка символа Юникода Trigram for Heaven — ☰.

Если вы нашли в таблице Юникода, нужный символ, то для вставки его на сайт, не нужно подключать библиотеку Font Awesome.

Вместо маркера картинка

И это ещё не все, маркированный список можно сделать картинками. Это классический пример для верстальщика, как сверстать ту часть макета, где дизайнер сам нарисовал иконки, что наиболее вероятно.

ul <
list-style: none;
>
ul li <
background: url(images/icon_star.gif) no-repeat 0 5px;
>

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

Альтернативный способ:

Для внедрения символов Юникода, кодировка страницы должна быть обязательно UTF-8.

В HTML файле:

В отдельном CSS файле:

Если вы только присматриваетесь к профессии верстальщика, то наиболее оптимальным решением будет, начинать своё обучение с верстки лендингов, начните с этого видеокурса «О создании лендинга под ключ».

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

    Спасибо Михаилу за существенную подсказку верстальщику в оформлении списков. Это присутствует в каждом сайте и странице. Вчера отдал заказчику сайт визитку http://lomtop.kh.ua/ ,где и применял советы Михаила. В своё время я приобретал видео курсы М.Русакова и сейчас делаю сайты визитки на заказ. При этом мне уже за 70 лет. А я учусь.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

    Читайте также:  Как работать закладками цветов

    Источник

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

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

    Задача

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

    Решение

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

  • вкладываем тег , а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы
  • текст создаем конструкцию
  • текст . При этом цвет маркеров определяется стилевым свойством 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. Маркеры, созданные с помощью стилей

    Источник

    офис 2010

    сайт уроков по программам word, excel, access и power point.

    Рубрики

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

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

    например вот так.

    Если мы хотим изменить цвет маркера в программе word 2010, то достаточно выделить текст вместе с маркерами и перекрасить или зайти на закладку «Главная» и нажать на инструмент «Маркеры».

    Затем в меню инструмента «Маркеры» выбираем ссылку «Определить новый маркер» и в окне «Определение нового маркера» нажимаем кнопку «шрифт».

    Теперь просто выбираем цвет текста.

    В программе PowerPoint 2010 мы так же на закладке «Главная» нажимаем на инструмент «Маркеры», вот только далее в меню выбираем «Список».

    Затем в окне «Список», мы выбираем цвет маркера.

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

    Автор: Сергей Титов

    Подписывайтесь на рассылку, чтобы быть в курсе новых уроков.

    Источник