Что такое маркированный список
Перейти к содержимому

Что такое маркированный список

  • автор:

Маркированные списки

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

    связаны следующие особенности:

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

    На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.

    Вид маркированного списка

    Рис. 1. Вид маркированного списка

    Вид маркера

    Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

    • disc — маркеры в виде закрашенного кружка;
    • circle — маркеры в виде незакрашенного кружка;
    • square — квадратные маркеры.

    Пример 1. Изменение вида маркера

    Пример 2. Использование ::before

    Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача — переместить текст левее на один символ.

    Произвольные маркеры в списке

    Рис. 2. Произвольные маркеры в списке

    Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

    Выбор символа в LibreOffice

    Рис. 3. Выбор символа в LibreOffice

    Список с рисованными маркерами

    Стили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image . В качестве значения используется относительный или абсолютный путь к графическому файлу, как показано в примере 3.

    Пример 3. Использование изображения в качестве маркера

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

    Рисунок в качестве маркера

    Рис. 4. Рисунок в качестве маркера

    Применение list-style-image обладает некоторыми недостатками:

    • рисунок нельзя сдвинуть вверх или вниз;
    • в разных браузерах положение рисунка относительно текста может отличаться.

    Пример 4. Использование background

    ul < margin-left: -1em; >li < list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; >

    Положение текста и маркера

    Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).

    Маркеры в тексте Маркеры за текстом
    inside outside

    Рис. 5. Размещение маркеров относительно текста

    Чтобы управлять положением маркеров, применяется свойство list-style-position . Оно имеет два значения: outside — маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside — маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).

    Пример 5. Изменение положения маркеров

    • Перед началом работы проверьте наличие оборудования, входящего в комплект 3BM.
    • При отсутствии одного или нескольких периферийных устройств следует сразу же обратиться к техническому персоналу ВЦ.
    • После осмотра визуальными методами своего рабочего места можно осторожно включить питание 3BM.

    Результат данного примера показан на рис. 6.

    Маркеры в тексте

    Рис. 6. Маркеры в тексте

    Маркированный список

      , а каждый пункт списка начинается с тега
      , как показано ниже.

    В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

    Пример 11.1. Создание маркированного списка

    Результат данного примера показан на рис. 11.1.

    Рис. 11.1

    Рис. 11.1. Вид маркированного списка

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

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

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

    Создание списка с квадратными маркерами показано в примере 11.2.

    Пример 11.2. Вид маркеров

    Результат данного примера показан на рис. 11.2.

    Рис. 11.2

    Рис. 11.2. Вид списка с квадратными маркерами

    HTML по теме

    Статьи по теме

    Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

    Популярные рецепты

    • Как добавить картинку на веб-страницу?
    • Как добавить иконку сайта в адресную строку браузера?
    • Как добавить фоновый рисунок на веб-страницу?
    • Как сделать обтекание картинки текстом?
    • Как растянуть фон на всю ширину окна?
    • Как выровнять фотографию по центру веб-страницы?
    • Как разместить элементы списка горизонтально?
    • Как убрать подчеркивание у ссылок?
    • Как убрать маркеры в маркированном списке?
    • Как изменить расстояние между строками текста?
    • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
    • Как открыть ссылку в новом окне?

    Популярные задачи

    • TEX
    • Отступы между блоков
    • Андроид в тени
    • Ссылка как кнопка
    • Вложенные списки
    • Форма регистрации
    • Объединение ячеек таблицы
    • Обязательные поля формы
    • Цвет и фон в таблице
    • Асуанская плотина
    • Батарейка
    • Заголовки

    Что такое маркированные и многоуровневые списки

    Word для Microsoft 365 Outlook для Microsoft 365 Word 2021 Outlook 2021 Word 2019 Outlook 2019 Word 2016 Outlook 2016 Word 2013 Outlook 2013 Word 2010 Outlook 2010 Word 2007 Word Starter 2010 Еще. Меньше

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

    Задачи

    • Определение нового формата маркера
    • Определение нового формата номера
    • Определение нового многоуровневого списка
    • Определение нового стиля списка
    • Отключение автоматической нумерации списков
    • Дополнительные сведения

    Определение нового формата маркера

    Выполните одно из указанных ниже действий.

    Изменение маркера на символ

    Стрелка вниз на кнопке маркированного списка в Word

    1. Выделите текст или маркированный список, который вы хотите изменить.
    2. На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный списоки выберите пункт Определить новый маркер.
    3. Нажмите кнопку Символ и щелкните нужный символ.
    4. Нажмите кнопку ОК.

    Изменение маркера на рисунок

    Стрелка вниз на кнопке маркированного списка в Word

    1. Выделите текст или маркированный список, который вы хотите изменить.
    2. На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный списоки выберите пункт Определить новый маркер.
    3. Щелкните Рисунок и выберите изображение из файла или с помощью поиска изображений Bing.
    4. Нажмите кнопку Вставить.
    5. Просмотрите, как будет выглядеть рисунок в качестве маркера, и нажмите кнопку ОК, чтобы добавить его, либо замените рисунок, повторив шаги 3–5.

    Изменение шрифта маркера

    Вкладка Шрифт

    Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.

    Вкладка Дополнительно

    Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.

    Изменение выравнивания маркера

    Стрелка вниз на кнопке маркированного списка в Word

    1. Выделите текст или маркированный список, который вы хотите изменить.
    2. На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный списоки выберите пункт Определить новый маркер.
    3. В группе «Выравнивание» выберите Слева, По центру или Справа.
    4. Нажмите кнопку ОК.

    Определение нового формата номера

    1. Выделите текст или нумерованный список, который вы хотите изменить.
    2. На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Нумерованный списокСтрелка вниз на кнопке нумерованного списка в Wordи выберите пункт Определить новый формат номера.
    3. Чтобы изменить стиль, щелкните стрелку вниз рядом с полем Нумерация и выберите числа, буквы или другой формат последовательности.
    4. Чтобы изменить размер, начертание и цвет шрифта, щелкните Шрифт и задайте параметры на вкладках Шрифт и Дополнительно:
      Вкладка Описание
      Вкладка Шрифт Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.
      Вкладка Дополнительно Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.
    5. Чтобы добавить к номеру дефис, круглую скобку или другой символ, введите его в поле Формат номера.
    6. Чтобы настроить выравнивание номеров, выберите Слева, По центру или Справа в разделе «Выравнивание».
    7. Нажмите кнопку ОК.

    Определение нового многоуровневого списка

    1. Выделите текст или нумерованный список, который вы хотите изменить.
    2. На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Многоуровневый списокСтрелка вниз на кнопке многоуровневого списка в Wordи выберите пункт Определение нового многоуровневого списка.
    3. Разверните диалоговое окно «Многоуровневый список», щелкнув Дополнительно в левом нижнем углу.
    4. Выберите уровень списка, который нужно изменить, щелкнув его в списке. По умолчанию выбрано значение 1.
    5. Укажите, к чему вы хотите применить изменения, щелкнув ко всему списку, до конца документа или к текущему абзацу.
    6. Чтобы использовать существующий стиль в Word для каждого уровня в списке, выберите стиль в разделе «Связать уровень со стилем».
    7. Выберите номер для отображения в коллекции. По умолчанию отображается Уровень 1.
    8. Присвойте многоуровневому списку имя в разделе «Имя списка поля ListNum». Оно будет отображаться для всех полей ListNum.
    9. Чтобы добавить к нумерованному списку дефис, круглую скобку или другой символ, введите его в поле Формат номера.
    10. Чтобы изменить размер, начертание и цвет шрифта, щелкните Шрифт и задайте параметры на вкладках Шрифт и Дополнительно:
      Вкладка Описание
      Вкладка Шрифт Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.
      Вкладка Дополнительно Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.
    11. Чтобы изменить стиль, щелкните стрелку вниз рядом с полем Нумерация и выберите числа, буквы или другой формат последовательности. Укажите номер уровня, начиная с которого нужно это включать.
    12. Выберите начальный номер для списка. Значение по умолчанию — 1. Чтобы заново начать нумерацию после определенного уровня, установите флажок Нумеровать заново и выберите уровень в списке.
    13. Выберите Заменить римские цифры арабскими для использования этого стиля в многоуровневом списке.
    14. Чтобы настроить выравнивание номеров, выберите Слева, По центру или Справа в разделе «Выравнивание».
    15. Укажите, откуда нужно начать выравнивание, и задайте отступ.
    16. Чтобы применить эти значения ко всему списку, выберите Параметры для всех уровней.
    17. Укажите, что должно следовать после каждого номера: знак табуляции, пробел или ничего. Установите флажок Добавить позицию табуляции и введите значение.
    18. Нажмите кнопку ОК.

    Определение нового стиля списка

    Стрелка вниз на кнопке многоуровневого списка в Word

    1. Выделите текст или нумерованный список, который вы хотите изменить.
    2. На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Многоуровневый списоки выберите пункт Определение нового стиля списка.
    3. Введите имя для нового стиля списка.
    4. Выберите начальный номер для списка. Значение по умолчанию — 1.
    5. Выберите уровень в списке, к которому нужно применить форматирование.
    6. Укажите начертание, размер и цвет шрифта для стиля списка.
    7. Щелкните стрелку вниз, чтобы изменить стиль нумерованного или маркированного списка.
    8. Выберите символ для списка.
    9. Выберите изображение для списка.
    10. Сместите отступ влево или вправо.
    11. Укажите, нужно ли применить эти изменения Только в этом документе или же В новых документах, использующих этот шаблон.
    12. Чтобы настроить дополнительные параметры форматирования, щелкните Формат и выберите Шрифт, Нумерация, Текстовые эффекты или другие настройки.
    13. Нажмите кнопку ОК.

    Отключение автоматической нумерации списков

    1. Следуйте инструкциям для используемой версии Word Word 2016, Word 2013 или Word 2010
      • Выберите Файл, а затем в левой области выберите Параметры.
    • Нажмите кнопку Microsoft Office и выберите Параметры Word.

    HTML: Нумерованный и маркированный список

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

    Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений. Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки.

    Нумерованный список

    Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее.

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

      в качестве дочерних элементов может содержать только теги
    1. , то есть всё содержимое нумерованного списка должно размещаться внутри элементов
    2. . Тег
    3. , в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.

    Маркированный список

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

    Виды маркеров

    Виды маркеров нумерованного списка можно изменить с помощью атрибута type . Данный атрибут поддерживает пять видов маркеров:

    Значение Описание
    1 Десятичные числа (1, 2, 3..)
    a Список в алфавитном порядке, строчные буквы (a, b, c..)
    A Список в алфавитном порядке, заглавные буквы (A, B, C..)
    i Римские цифры, строчные (i, ii, iii, iv..)
    I Римские цифры, заглавные (I, II, III, IV..)

    Маркированные списки не имеют атрибута type , поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type, с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square .

    Изменение маркеров у списков:

    CSS свойство list-style-type , помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть тут.

    Горизонтальный список

    Если вы используете HTML список для создания горизонтального меню, то вам нужно будет расположить элементы списка друг за другом на одной строке. Средствами HTML это сделать не получится, поэтому нужно будет воспользоваться CSS.

    Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block , в зависимости от того, какие ещё свойства вы собираетесь использовать.

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

    Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть здесь.

    С этой темой смотрят:

    • Вложенные (многоуровневые) списки в html
    • HTML тег
    • HTML тег
    • Оформление списков

    Копирование материалов с данного сайта возможно только с разрешения администрации сайта
    и при указании прямой активной ссылки на источник.
    2011 – 2023 © puzzleweb.ru | razumnikum.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *