2.8. CSS-списки

css_listCSS-списки — набор свойств, отвечающих за оформление списков. Использование 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;}
ul_ol
Рис. 1. Пример оформления маркированного и нумерованного списков

2. Изображения для элементов списка list-style-image

В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.

list-style-image
Значения:
url(url) Путь к изображению.
none значение по умолчанию, означает отсутствие изображения. Также убирает изображение для элемента из группы элементов с установленным изображением-маркером.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

ul {list-style-image: url("images/romb.png");}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
ul_image
Рис. 2. Оформление маркированного списка с помощью изображения
css-list-style-image
Рис. 3. Оформление маркированного списка с помощью градиента

3. Местоположение маркера списка list-style-position

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

list-style-position
Значения:
outside Значение по умолчанию. Маркер располагается вне блока с текстом.
inside Маркер списка изображается в одном блоке с текстом. Последующие строки текста будут располагаться под значком маркера, т.е. маркер будет обтекаться текстом.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

ul {list-style-position: inside;}
ol {list-style-position: outside;}
list_position
Рис. 4. Пример расположения маркера внутри и снаружи блока списка

4. Краткая форма задания стилей списка

Можно объединить все три свойства форматирования списка в одно с помощью list-style. Значения свойств могут быть расположены в произвольном порядке, а часть значений может быть опущена. Если присутствует одно значение, то другие свойства примут значения браузера по умолчанию.

Синтаксис

ul {list-style: url("images/romb.png") inside;}

4. Примеры красивого оформления списков

list-styling

Перейти на страницу с примерами

НазадCSS-таблицы
ВперёдCSS-фон

  • как сделать красивый список под номером 13

  • Создание Сайтов

    Как по счету каждому ul задать свои стили. Например, мне надо, чтобы был бордер-рихт у 1 и 2 ul у 3 чтобы не было. У 4 и 5 был, а у 6 не было.

  • Oльга Колесниченко

    Здравствуйте. У меня никак не получается в качестве маркера изображение сделать. Пишу полный путь url(«C:/Users/…») или url(«images/…png»), a если li:before делать outside не работает

  • Ali

    Как сделать регистрацыю ,вход и страницу для
    посетителя .

    ✔Как сделать чтобы они отправляли сообщения лично автору сайта на почту
    Спасибо)

  • Я заметил во многих темах wordpress списки вообще не работают, беда какая то!

    • Уточните, пожалуйста, как именно они не работают. Вероятно, речь идет о сбросе стилей списков в таблице стилей темы.

      • То есть на никаких css стилей видимо нет.

        • Я сталкивалась с тремя вариантами:
          1) стандартные маркеры у элементов списка
          2) маркеров нет вообще ul {list-style: none;}
          3) иногда заменяют маркеры какими-нибудь иконками.
          Поэтому вы можете сами стилизовать списки, используя предложенные варианты оформления.

          • Да, как раз и хочу этим заняться, хотя и не программист, поэтому и зашел к вам. А как вот это применить https://html5book.ru/krasivoe-oformlenie-spiskov/ не дописывая дополнительный класс? Или как его дописать к ul и li если его нет?

          • Если вы не зададите особый класс для списка, то стили применятся ко всем спискам на сайте, в том числе и к меню навигации. Класс можно дописать в админке в редакторе, когда вы обрамляете текст в список, то есть к добавить класс, например, , а стили понравившегося оформления добавить в файл style.css. К класс добавлять не обязательно.

          • Спасибо, попробую, если не получится, то напишу. Спасибо за отзывчивость.

          • Пожалуйста 🙂
            Дополнительно вы можете посмотреть видео на YouTube, как работать с редактором вордпресс.

          • Посмотрел у меня так — ul, ol { margin-left : 20px !important ;}
            li {list-style-type : none;}

            Даже когда вывожу цифровые списки цифры не отображаются

          • Если сайт в сети, пришлите ссылку на него на личную почту ( ссылка в подвале сайта )

          • Послал.

          • На выходных посмотрю и отвечу

          • Спасибо, я уже настроил, один знакомый помог добить эту тему. И вам спасибо, так как код у вас взял.

          • Сделал сам ваш стиль, но почему то в нумерованном списке везде цифра 1