Задача
Изменить вид маркеров в списке и заменить их на другой символ.
Решение
С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI (пример 1).
Пример 1. Стандартные маркеры
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Чебурашка
- Крокодил Гена
- Шапокляк
В данном примере в качестве маркеров используется квадрат (рис. 1).
Рис. 1. Вид маркеров
Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент :before . Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type , а затем добавить псевдоэлемент :before к селектору LI . Сам вывод символа осуществляется с помощью свойства content , в качестве значения которого и выступает желаемый текст или символ (пример 2).
Пример 2. Использование:before и content
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Чебурашка
- Крокодил Гена
- Шапокляк
В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).
Рис. 2. Маркеры в виде символа
Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.
Маркированные списки позволяют разбить большой текст на отдельные блоки, каждый из которых начинается с маркера - обычно в его качестве выступает небольшая точка. Это привлекает внимание читателя к тексту и повышает его читабельность.
С элементом
-
связаны следующие особенности:
- в том месте, где встречается
-
, браузер автоматически добавляет перенос строки;
- у списка имеются отступы сверху и снизу;
- маркеры по умолчанию отображаются в виде закрашенного кружка;
- каждый элемент списка сдвигается вправо по отношению к основному тексту.
- disc - маркеры в виде закрашенного кружка;
- circle - маркеры в виде незакрашенного кружка;
- square - квадратные маркеры.
- Сепульки
- Сепулькарии
- Сепуление
- не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства 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. Размещение маркеров относительно текста
CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка , добавить изображение для маркера , а также изменить местоположение маркера . Высоту блока маркера можно задать свойством line-height .
Оформление списков с помощью CSS-стилей
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.
list-style-type Значения: disc Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок. armenian Традиционная армянская нумерация. circle В качестве маркера выступает незакрашенный кружок. cjk-ideographic Идеографическая нумерация. decimal 1, 2, 3, 4, 5, … decimal-leading-zero 01, 02, 03, 04, 05, … georgian Традиционная грузинская нумерация. hebrew Традиционная еврейская нумерация. hiragana Японская нумерация: a, i, u, e, o, … hiragana-iroha Японская нумерация: i, ro, ha, ni, ho, … katakana Японская нумерация: A, I, U, E, O, … katakana-iroha Японская нумерация: I, RO, HA, NI, HO, … lower-alpha a, b, c, d, e, … lower-greek Строчные символы греческого алфавита. lower-latin a, b, c, d, e, … lower-roman i, ii, iii, iv, v, … none Маркер отсутствует. square В качестве маркера выступает закрашенный или незакрашенный квадрат. upper-alpha A, B, C, D, E, … upper-latin A, B, C, D, E, … upper-roman I, II, III, IV, V, … initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. Синтаксис
Ul {list-style-type: none;} ul {list-style-type: square;} ol {list-style-type: none;} ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
Синтаксис
Ul {list-style-image: url("images/romb.png");} ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
CSS свойства списка позволяют вам:
- Устанавливать различные маркеры пунктов списка для упорядоченных списков
- Устанавливать различные маркеры пунктов списка для неупорядоченных списков
- Устанавливать изображение в качестве маркера пункта списка
Список
В HTML существует два типа списков:
- неупорядоченные списки - пункты списка помечаются маркерами
- упорядоченные списки - пункты списка помечаются числами или буквами
С помощью CSS списки могут оформлены лучшим образом, и изображения могут использоваться в качестве маркеров для пунктов списка.
Различные Маркеры Пунктов Списка
Тип маркера для пункта списка указывается с помощью свойства list-style-type:
Некоторые значения свойства list-style-type для неупорядоченных списков, и некоторые - для упорядоченных.
Изображение в качестве Маркера Пункта Списка
Чтобы указать изображение в качестве маркера пункта списка, используйте свойство list-style-image:
Пример выше не отображается одинаково вовсех браузерах. IE и Opera будут отображать маркер-изображение чуть выше, чем Firefox, Chrome, и Safari.
Если вы хотите, чтобы изображение-маркер размещался одинаково во всех браузерах, кросс-браузерное решение объяснено ниже.
Кросс-браузерное Решение
Следующий пример отрисовывает изображение-маркер одинаково во всех браузерах:
Объяснение примера:
- Для ul:
- Установка list-style-type в none - чтобы удалить маркер пункта списка
- Установка свойств padding и margin в 0px (для кросс-браузерной совместимости)
- Для li:
- Установка адреса URL для изображения, и значения no-repeat (чтобы изображение выводилось только один раз)
- Позиционирование изображения в желаемом месте (влево на 0px и вниз на 5px)
- Установка левого отступа для текста в списке
Список - Стенографическое (Сокращенное) свойство
Также можно указать все свойства списка в одном - одиночном свойстве. Оно называется стенографическим (или сокращенным) свойством.
Стенографическое свойство для списков - это свойство list-style:
При использовании стенографического свойства порядок значений таков:
- list-style-type
- list-style-position (объяснение смотрите ниже - в таблице свойств CSS)
- list-style-image
Не важно, если одно из значений выше пропущено, главное чтобы все остальные значения шли по указанному порядку.
На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.
Рис. 1. Вид маркированного списка
Вид маркера
Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:
Пример 1. Изменение вида маркера
В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к