Создание различной маркировки для списков
10 мая 2018 | Опубликовано в css | Нет комментариев »
Самое простое, что можно сделать со списками HTML, — изменить значение свойства list-style-type (типа стиля списка). Обратите внимание, свойство list-style (стиля списка) — это другое свойство, важно их не путать. В спецификациях CSS1 и CSS2 выбор значений типа стиля списка довольно ограничен. В спецификации CSS3 вариантов значений гораздо больше, но не все они поддерживаются даже в самых современных версиях браузеров.
Для ненумерованных списков значения свойства типа стиля списка могут быть: none (нет), inherit (наследовать), circle (пустой круг), disc (заполненный круг), или square (квадрат). По умолчанию для ненумерованного списка применяется заполненный круг, вложенным ненумерованным спискам первого уровня задается пустой круг, второго уровня — квадрат, для следующих вложенных уровней они чередуются в этой последовательности. Значение «наследовать» просто означает, что список применит значение свойства типа стиля своего родителя. Обратите внимание, что задание значения «нет» свойству типа стиля не уберет отступ списка в большинстве браузеров, это можно сделать с помощью свойства левого внешнего отступа.
Для нумерованных списков выбор значений намного разнообразней. Кроме вышеупомянутых значений «нет» и «наследовать» также можно использовать следующие значения:
Очень важно обратить внимание на то, что при использовании любых из этих значений разметка нумерованного списка не изменяется: Вы создаете код HTML для списка как обычно, а после этого задаете любые изменения тому, как отображается список, с помощью кода CSS.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
- Создание простых рамок с использованием CSS
- Создание оформленных нумерованных списков с использованием CSS
- Использование единиц измерения CSS в зависимости от ситуации
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений