Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать маркер списка 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 |
Результат : Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите list-style-type: none; Пример :
Результат : Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image . list-style-imagelist-style-image: url(картинка.png); Пример :
Результат : Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li. Пример :
Результат : Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег . Пример :
Результат : Дополнение к общей теме.
Пример :
Результат : Вот и подошла к завершению тема . Допустим у нас имеется нумерованный список OL (.our-list) такого вида:
А нам необходимо, чтобы номера строк были без точек. Тогда нам необходимо прописать в css-коде следующие правила:
Our-list { counter-reset: item; //item - переменная, которая будет содержать значение счетчика list-style-type: none; // убираем нумерование списка width: 150px; //необходимо задать ширину, чтобы отталкиваться от этого значения } .our-list li:before { content: counter(item) ""; //заново вставляем счетчик пунктов уже другим способом и без точки counter-increment: item; //увеличиваем значение счетчика color: #ff0000; //можем задать другой цвет цифрам } В результате мы можем наблюдать следующее:
Казалось бы, проблема решена. Но пока это хорошо работает только для однострочных пунктов. Если мы добавим строк к каждому пункту списка, то увидим, что пока еще все не так хорошо… Вот что получится:
Я думаю, это не совсем то, что требуется. Получается, что в данном случае номер принадлежит первой строке пункта списка. Чтобы решить этот вопрос окончательно, стоит добавить еще 3 строки в css-код Our-list { counter-reset: item; list-style-type: none; width: 150px; } .our-list li:before { content: counter(item) ""; counter-increment: item; color: #ff0000; float:right; //делаем обтекание справа position:relative; //и перемещаем цифры влево, чтобы они встали перед списком left:-165px; } Маркированные списки позволяют разбить большой текст на отдельные блоки, каждый из которых начинается с маркера - обычно в его качестве выступает небольшая точка. Это привлекает внимание читателя к тексту и повышает его читабельность. С элементом
На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка. Рис. 1. Вид маркированного списка Вид маркераМаркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения: Пример 1. Изменение вида маркера
В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к |