No Image

Списки в которых элементы списка отмечаются маркерами

СОДЕРЖАНИЕ
768 просмотров
10 марта 2020

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

С элементом

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

  • в том месте, где встречается
    , браузер автоматически добавляет перенос строки;

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

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

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

Вид маркера

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

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

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

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

  • не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым
  • добавляем свой собственный символ с помощью псевдоэлемента ::before . В примере 2 в качестве такого маркера выступает треугольник.
  • Пример 2. Использование ::before

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

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

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

    Читайте также:  Candy cte 103 tv

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

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

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

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

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

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

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

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

    Этих недочётов можно избежать с помощью свойства background , оно устанавливает фоновое изображение. Для каждого элемента списка
    мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

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

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

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

    inside outside

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

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

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

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

    Маркеры списка
    •‣⁃
    Характеристики Название : bullet
    : triangular bullet
    : hyphen bullet Юникод : U+2022
    : U+2023
    : U+2043 HTML-код ‎:

  • или

  • ‎:
  • или

  • ‎:
  • или
  • UTF-16 ‎: 0x2022
    ‎: 0x2023
    ‎: 0x2043
  • URL-код
  • : %E2%80%A2
    : %E2%80%A3
    : %E2%81%83 Мнемоника : •
    Читайте также:  Домашняя сеть из двух роутеров

    Ма́ркер списка, бу́ллит, бу́ллет, бу́лит ( • ) (англ. bullet ) — типографский знак, используемый для выделения элементов списка, как показано на примере ниже:

    • Это первый элемент списка. Обратите внимание на буллит слева.
    • Это следующий элемент списка, и перед ним стоит ещё один буллит.
      Это вторая строка второго элемента списка, и поэтому перед ней буллит не ставится.

    Употребление [ править | править код ]

    Обычно булиты используются в справочных и технических материалах, чтобы обозначить последовательность связанных элементов. Этими элементами могут быть короткие отрывки текста либо полноценные абзацы; в любом случае принято завершать все элементы, кроме последнего, точкой с запятой, и только последний — точкой. Иногда точкой завершают все элементы списка, как показано в примере ниже (способ 2), а иногда их не завершают вовсе. Кроме того, элементы принято начинать со строчной буквы.

    Способ 1 (основной) Способ 2 Способ 3
    • первый;
    • второй;
    • третий.
    • Первый.
    • Второй.
    • Третий.
    • первый
    • второй
    • третий

    Графические формы [ править | править код ]

    В традиционной русской типографике роль маркера списка играет тире (—), хотя издавна допускалось использование и других типографских знаков (кружков, ромбиков, звёздочек и т. п.). В последнее время использование компьютерных программ западного производства привело к распространению в деловой и технической документации тех стилей оформления текста, которые ими поддерживаются проще всего; в частности, прижилось использование буллита для маркировки списков. Вместе с тем Единая система конструкторской документации (ЕСКД, ГОСТ серии 2) не допускает использование этого маркера списков.

    В Юникоде определены несколько графических вариантов буллитов:

    Символ Код Название HTML
    U+2022 BULLET • или •
    U+2023 TRIANGULAR BULLET
    U+2043 HYPHEN BULLET
    U+204C BLACK LEFTWARDS BULLET
    U+204D BLACK RIGHTWARDS BULLET
    U+2219 BULLET OPERATOR
    U+25E6 WHITE BULLET

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

    В Windows буллит можно набирать сочетанием Alt+0149 (нажать и удерживать Alt, а в это время набрать на цифровом блоке клавиатуры 0149).

    Читайте также:  Как из видео вырезать музыку и сохранить

    В CSS для создания маркированных списков используется атрибут list-style-type, который допускает три графических варианта буллита: disc (чёрный кружок), circle (чёрное колечко) и square (чёрный квадратик). Кроме того, атрибут list-style-image позволяет использовать буллит произвольного вида, указав URL графического файла с его изображением. Например, в приведённом выше примере использование CSS позволило задать для буллитов вид серо-голубых квадратиков.

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

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

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

    В списке непременно должен присутствовать закрывающий тег

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

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

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

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

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

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

    Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега

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

    Табл. 11.1. Стили маркеров списка

    Тип списка Код HTML Пример
    Список с маркерами в виде круга

    • .
    • Первый
    • Второй
    • Третий
    Список с маркерами в виде окружности

    • .
    • Первый
    • Второй
    • Третий
    Список с квадратными маркерами

    • .
    • Первый
    • Второй
    • Третий

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

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

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

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

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

    Комментировать
    768 просмотров
    Комментариев нет, будьте первым кто его оставит

    Это интересно
    Adblock
    detector