Маркированный список css свой маркер. CSS Design: Укрощение списков

Приветствую вас на своем блоге. Сегодня я хотел бы затронуть тему, как через css у маркированных пунктов списка (ul li) убрать маркеры, потому что они зачастую не нужны и только мешают оформлять сайт.

Убираем маркеры по умолчанию

Иногда нужно просто убрать их. Например, при оформлении меню или чего-то другого. За отображение маркеров отвечает свойство list-style-type или сокращенное list-style . Значением по умолчанию выступает circle , то есть черный закрашенный кружочек. Чтобы убрать его, всего лишь нужно написать так:

Ul{
List-style-type: none;
}

Ul{
List-style: none;
}

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

В таком случае справиться с их стилизацией помогут классы. Нужным спискам просто вешаете стилевой класс и оформляете их.

Как поставить свою картинку маркера

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

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

С элементом

в том месте, где встречается
- у списка имеются отступы сверху и снизу;
- маркеры по умолчанию отображаются в виде закрашенного кружка;
- каждый элемент списка сдвигается вправо по отношению к основному тексту.
На рис.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-type устанавливает вид маркера. Вот таблица допустимых значений для этого свойства:

Значение	Пример
disc	Пункт списка
circle	Пункт списка
square	Пункт списка
decimal	Пункт списка
decimal-leading-zero	Пункт списка
lower-roman	Пункт списка
upper-roman	Пункт списка
lower-alpha	Пункт списка
upper-alpha	Пункт списка
georgian	Пункт списка Пункт списка Пункт списка
cjk-ideographic	Пункт списка Пункт списка Пункт списка
none	Пункт списка

В таблице я указал два весьма необычных свойства: georgian и cjk-ideographic . Эти свойства используются регионально. Есть ещё несколько похожих любопытных значений этого свойства, например armenian или hiragana , но все их перечислять нет смысла.

Теперь пример использования этого свойства:

Свойство list-style-type.

Первый пункт.
Второй пункт.
Третий пункт.

Обратите внимание, мы превратили нумерованный список

Рисунок 1. Свойство list-style-type.

Обязательно обратите внимание на значение none , это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.

Свойство list-style-type достаточно простое, как и остальные свойства по работе со списками.

Свойство list-style-image устанавливает символом маркера графический файл.

Свойство list-style-image..gif"); } </style> </head> <body>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93396025, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/93396025" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  <ul> <li>Первый пункт.</li> <li>Второй пункт.</li> <li>Третий пункт.</li> </ul> </body> </html> </p><p>Вот результат работы этого кода:</p> <img src='https://i2.wp.com/komotoz.ru/uroki/css/example/images/lists_2.png' height="190" width="374" loading=lazy> Рисунок 2. Свойство list-style-image. <p>Мы видим, что теперь маркеры списка отмечены графическим файлом .</p> <h2>Свойство list-style-position</h2> <p>Перед тем, как приступить к изучению этого свойства, более детально изучим модель форматирования элемента <ul> .</p><p> <!DOCTYPE html> <html> <head> <title>Форматируем список.

Первый пункт.
Второй пункт.
Третий пункт.

Вот что мы видим:

Тут важно обратить внимание на то, что маркеры списка выходят за границу блока элемента

, обрамлённого красной границей. Это может привести к неожиданным результатам, вот например обнулим внутренние отступы

Вид маркера в списке.

Пользовательский маркер рисунок.

Стиль обтекания маркера списком.

Здесь маркер обтекается текстом:

А здесь нет:

list-style

Рекомендуем также

Маркированный список css свой маркер. CSS Design: Укрощение списков

Убираем маркеры по умолчанию

Как поставить свою картинку маркера

Вид маркера

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

Положение текста и маркера

Свойство list-style

Рецепты CSS по теме

Список

Различные Маркеры Пунктов Списка

Изображение в качестве Маркера Пункта Списка

Кросс-браузерное Решение

Список - Стенографическое (Сокращенное) свойство

Главная > Красота > Маркированный список css свой маркер. CSS Design: Укрощение списков

Маркированный список css свой маркер. CSS Design: Укрощение списков

Убираем маркеры по умолчанию

Как поставить свою картинку маркера

Вид маркера

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

Положение текста и маркера

Свойство list-style

Рецепты CSS по теме

Список

Различные Маркеры Пунктов Списка

Изображение в качестве Маркера Пункта Списка

Кросс-браузерное Решение

Список - Стенографическое (Сокращенное) свойство

Вид маркера в списке.

Пользовательский маркер рисунок.

Стиль обтекания маркера списком.

Здесь маркер обтекается текстом:

А здесь нет:

list-style

Рекомендуем также