Маркеры в css. Как в css у элементов ul li убрать маркеры

Маркеры в css. Как в css у элементов ul li убрать маркеры

22.05.2019
ВКонтакте

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

CSS стили списка маркера.

list-style-type

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;

Значение :

disk – маркированный список в виде закрашенного кружка

circle – маркированный список в виде не закрашенного кружка

square – маркированный список в виде закрашенного квадратика

decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)

none – без маркера.

Пример :

Свойства списков в css

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

Результат :

Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

list-style-type: none;

Пример :

Свойства списков в css

  • Верь в лучшее, ожидай худшее.
  • Никогда не говори никогда.

Результат :

Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .

list-style-image

list-style-image: url(картинка.png);

Пример :

Свойства списков в css

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

Результат :

Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

Пример :

Свойства списков в css

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

Результат :

Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
Это выглядит вот так:

  • текст

    • Пример :

    Свойства списков в css

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

    Результат :

    Дополнение к общей теме.
    Если вам нужно, по каким-либо причинам, задать нумерацию списка маркера не с нуля, а, допустим, с 8, вы можете сделать такой ход.

    Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.Пункт 1
    • Жизнь - это болезнь со смертельным исходом.Пункт 2
    • Никогда не говори никогда.Пункт 3
    • Это все что я знал. Пункт 4

    Результат :

    Вот и подошла к завершению тема .

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

    С элементом

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

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

        На рис.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).

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

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

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

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

        Списки

        • Сепульки
        • Сепулькарии
        • Сепуление

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

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

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

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

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

      • мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

        Пример 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.

        Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать маркер списка CSS. Для этого есть свойство list-style-type . У него достаточно много значений. Часть значений применяется для маркированного, другая часть для нумерованного списка.

        Для маркированного списка:

        list-style-type: disc - в виде диска (по умолчанию)

        list-style-type: circle - в виде круга

        list-style-type: square - в виде квадрата

        Для нумерованного списка

        list-style-type: decimal - арабские цифры (по умолчанию)

        list-style-type: decimal-leading-zero - арабские цифры c 0 впереди для чисел 1-9

        list-style-type: upper-roman - заглавные римские цифры

        list-style-type: lower-roman - строчные римские цифры

        list-style-type: upper-latin - заглавные латинские буквы

        list-style-type: upper-alpha - то же, что и upper-latin

        list-style-type: lower-latin - строчные латинские буквы

        list-style-type: lower-alpha - то же, что и lower-latin

        list-style-type: lower-greek - строчные греческие буквы

        list-style-type: armenian - армянские числа

        list-style-type: georgean - грузинские числа

        list-style-type: none - позволяет убрать маркеры списка. Для обоих списков

        list-style-type: inherit - значение принимается от родительского элемента. Для обоих списков

        Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

        Стиль:

        1
        2
        3
        4
        5
        6

        		 Страница