Как изменить маркер на изображение для маркированного списка - Исправление ошибок и поиск оптимальных решений проблем

Чтобы задать собственный рисунок маркера для пунктов списка, воспользуйтесь стилевым свойством list-style-image, добавляя его к селектору ul или li. В качестве значения указывается адрес желаемого изображения (рис. 1).

Пример 1. Картинка вместо маркеров

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Рисунок в качестве маркера</title>
<style>
ul {
list-style-image: url(/example/image/book.png); /* Изображение маркера */
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Картинка в качестве маркера списка

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

Использование свойства list-style-image имеет некоторые недочёты. Во-первых, нельзя смещать рисунок относительно его исходного положения, во-вторых, в разных браузерах рисунки иногда выводятся с небольшим смещением. Более гибкие настройки имеет свойство background, которое позволяет выводить картинку как фоновый рисунок (пример 2). Его следует добавить к селектору li и убрать отображение исходных маркеров через свойство list-style со значением none.

Пример 2. Фоновый рисунок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Рисунок в качестве маркера</title>
<style>
li {
list-style: none; /* Убираем исходные маркеры */
background: url(/example/image/book.png) no-repeat 0 50%; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Картинка в качестве маркера списка

Чтобы текст не накладывался на фоновый рисунок к селектору li добавлено свойство padding-left, значение которого равно ширине картинки плюс желаемый отступ от рисунка до текста.

См. также

Источник

Как изменить маркер списка

По умолчанию маркером списка ul, служит простая черная точка. Я знаю, что многие начинающие верстальщики, используют маркированные списки для разметки меню навигации, предварительно обнулив в CSS значение селектора ul.

Давайте рассмотрим на примере, что я имею ввиду.

HTML разметка базового маркированного списка:

<ul> <li>Анжелика</li> <li>Анастасия</li> <li>Анатолий</li> <li>Александр</li> </ul>

На странице, вы увидите следующее.

Как верстают меню навигации без точек? Просто в стилях прописывают следующую строчку.

ul { list-style: none; }

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

Меняем цвет маркера списка (1-ый способ)

Удалим дефолтные черные точки.

ul { list-style: none; }

А взамен, поставим другие точки, поставив псевдоэлемент before перед всеми пунктами списка. Вместо точек, добавим значение свойства content «2022» , это CSS код точки, взятый из таблицы Юникода. Дальше к этим точкам, можно применять нужные стили.

ul li::before { content: "2022"; /* юникод точки */ color: orange; /* Менять цвет */ font-weight: bold; /* Менять жирность */ display: inline-block; /* Расстояние между точкой и текстом */ width: 1em; /* Задать значение расстояния */ }

Пример с заменой цвета маркеров списка

Меняем цвет маркера списка (2-ой способ)

Все спецсимволы Юникода имеют альтернативный HTML-код и могут вставляться напрямую в HTML разметку, между тегами span. Для разнообразия, мы используем в качестве маркера спецсимвол – ☑ галочка в квадрате.

<ul> <li><span>☑</span>Анжелика</li> <li><span>☑</span>Анастасия</li> <li><span>☑</span>Анатолий</li> <li><span>☑</span>Александр</li> </ul>

CSS-код

ul { list-style: none; }


span {

  color: cyan;

  font-weight: bold;

  display: inline-block;
 

  width: 1em;

  font-size: 20px;

}

Второй способ изменения маркера списка, мне понравился больше. Он позволяет увеличить размер маркера (font-size), не задевая межстрочный интервал, чего нельзя сказать о первом способе.

В первом способе вместе с увеличением размера маркера, становиться больше и межстрочный интервал.

Символы вместо иконок

На сегодняшний день, самый легкий способ вставки иконки-гамбургера в меню сайта – это вставка символа Юникода Trigram for Heaven — ☰.

<a href="#">☰</a>

Если вы нашли в таблице Юникода, нужный символ, то для вставки его на сайт, не нужно подключать библиотеку Font Awesome.

Вместо маркера картинка

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

ul { list-style: none; } ul li { background: url(images/icon_star.gif) no-repeat 0 5px; }

В стилях, иконки нужно вставлять, как фон, без повтора и подобрать нужные значения для выравнивания.

Альтернативный способ:

ul { list-style-image: url(images/icon_star.gif); }

Для внедрения символов Юникода, кодировка страницы должна быть обязательно UTF-8.

В HTML файле:

<meta charset="utf-8"/>

В отдельном CSS файле:

@charset 'utf-8';

Если вы только присматриваетесь к профессии верстальщика, то наиболее оптимальным решением будет, начинать своё обучение с верстки лендингов, начните с этого видеокурса «О создании лендинга под ключ».

Создано 28.11.2018 10:13:07
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:

Она выглядит вот так:
Текстовая ссылка:

Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник

Изменение и удаление маркеров
Замена маркеров картинками
Отступ списка

Возможности свойств CSS для стилизации списков

Изменение вида стандартного маркера для нумерованных списков
Установка типа маркера для маркированных списков
Установка изображения вместо маркера для элементов списка

С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.

Изменение и удаление маркеров

Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.

Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:

Кликните на значение свойства list-style-type
Наблюдайте за сменой маркеров
Используйте для своих списков наиболее подходящие маркеры

ol#myList {
list-style-type: decimal;
}

Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .class1 { list-style-type: circle; }
      .class2 { list-style-type: disc; }
      .class3 { list-style-type: square; }
    </style>
  </head>

  <body>
    <ul class="class1">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class2">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class3">
      <li>Кофе</li><li>Чай</li>
    </ul>
  </body>
</html>

Попробовать »

С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { list-style-type: none; }
	  ol { list-style-type: none; }
    </style>
  </head>

  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
	<ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Попробовать »

Замена маркеров картинками

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

Примите во внимание тот факт, что изображение не будет автоматически масштабироваться под список и будет отображено собственным размером, поэтому придется подбирать изображение подходящее по размеру или редактировать существующее, уменьшив или увеличив его до нужного:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { list-style-image: url('sqpurple.gif'); }
      ol { list-style-image: url('donald.gif'); }
    </style>
  </head>

  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Попробовать »

Отступ списка

При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left, которое позволяет регулировать внутренний отступ:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { 
	    list-style-type: none;
        padding-left: 0;		
	  }
	  ol { padding-left: 0;	}
    </style>
  </head>

  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
	<ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Попробовать »

В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах — по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов <li>, а просто скрываются за краем окна браузера.

Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:

outside — маркер располагается слева от содержимого (является значением по умолчанию)
inside — маркер располагается внутри пункта списка вместе с содержимым

Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  li { border: 1px solid red; }
      .class1 { list-style-position: outside; }
      .class2 { list-style-position: inside; }
      .class3 { 
	    list-style-position: inside;
		padding-left: 0;
	  }
    </style>
  </head>

  <body>
    <ul class="class1">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class2">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class3">
      <li>Кофе</li><li>Чай</li>
    </ul>
  </body>
</html>

Попробовать »

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

Источник

3 / 3 / 3

Регистрация: 18.11.2011

Сообщений: 286

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

17.05.2014, 16:55. Показов 21381. Ответов 8

Здравствуйте.
Нужно вместо символа маркера списка использовать картинку с зданными размерами.
Как это реализовать?
Сказали что нужно вместо типа маркера например «disk» прописать ссылку с параметрами но как сделать не пойму.

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

Boo

142 / 117 / 55

Регистрация: 02.12.2013

Сообщений: 396

17.05.2014, 17:04

Nooby93,

CSS

1
2
3

ul {
    list-style-image: url(images.png);
   }

3 / 3 / 3

Регистрация: 18.11.2011

Сообщений: 286

17.05.2014, 17:22

[ТС]

Это понял а как правильно width и height прописать? если пишу так: width=»30″ то пропадает картинка.

Boo

142 / 117 / 55

Регистрация: 02.12.2013

Сообщений: 396

17.05.2014, 17:39

Nooby93, примерно так

CSS

ul li{
    list-style:none;
    line-height:30px;
}
ul li:before {
    content:"";
    background:url(images.jpg);
    float:left;
    width:30px;
    height:30px;
    margin-right:10px;
}

3 / 3 / 3

Регистрация: 18.11.2011

Сообщений: 286

17.05.2014, 20:53

[ТС]

Не совсем то.
Используется маркированный список (<UL>…</UL>). Внутри списка вместо маркера прописываются ссылка на рисунок,ширина и высота

Условие выше.
С таким именно вариантом как сделать не понимаю.

327 / 217 / 97

Регистрация: 04.11.2012

Сообщений: 638

17.05.2014, 21:16

Сообщение от Nooby93

Это понял а как правильно width и height прописать? если пишу так: width=»30″ то пропадает картинка.

Естественно, вы ведь этим задаете ширину не кртинке, а элементу списка.

Сообщение от Nooby93

Не совсем то.

Чтобы обыграть размеры «маркеров-картинок» элемента списка, то это как-раз то, что вам надо. Иначе никак.

Nooby93

3 / 3 / 3

Регистрация: 18.11.2011

Сообщений: 286

20.05.2014, 14:55

[ТС]

Получается так

Код

HTML5

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рисунок в качестве маркера</title>
  <style>
   ul li{
    list-style:none;
    line-height:30px;
}
ul li:before {
    content:"";
    background:url(IMG/p.png);
    float:left;
    width:50px;
    height:50px;
    margin-right:10px;
}
  </style>
 </head> 
 <body> 
  <ul>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ul>
 </body>
</html>

Миниатюры

Ukkas

153 / 126 / 39

Регистрация: 02.05.2012

Сообщений: 573

20.05.2014, 16:14

Nooby93, добавить

CSS

1	background-repeat: no-repeat;

и еще картинка у вас меньше 50х50

Boo

142 / 117 / 55

Регистрация: 02.12.2013

Сообщений: 396

20.05.2014, 21:36

Nooby93, вы задали ширину и высоту 50px и забыли исправит line-height:30px; на line-height:50px;

Источник

От автора: теперь легко настроить цвет, размер или тип числа или маркера при использовании <ul> или <ol>. Благодаря Igalia, спонсируемой Bloomberg, мы наконец-то можем убрать хаки для стилей списков. Судите сами!

Благодаря CSS ::marker мы можем изменять содержимое и некоторые стили маркеров и чисел.

Совместимость с браузерами

Когда выйдет Chromium 86, ::marker будет поддерживаться в Firefox для настольных компьютеров и Android, Safari для настольных ПК и iOS Safari, а также в браузерах для настольных ПК и Android на базе Chromium. См. обновления в таблице совместимости браузеров MDN.

Псевдо-элементы

Рассмотрим следующий маркированный список HTML:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<ul>

<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>

<li>Dolores quaerat illo totam porro</li>

<li>Quidem aliquid perferendis voluptates</li>

<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>

</ul>

В результате получается следующий неожиданный рендеринг:

Точка в начале каждого элемента li является произвольной! Браузер рисует и создает за вас сгенерированную рамку маркера.

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

Важно: псевдо-элемент представляет в документе элемент, отличный от тех, которые существуют в дереве документа. Например, вы можете выбрать первую строку абзаца с помощью псевдо-элемента p::first-line, даже если нет HTML-элемента, обертывающего эту строку текста.

Создание маркера

Блок псевдо-элемента маркера ::marker автоматически создается внутри каждого элемента списка перед фактическим содержимым и псевдо-элементом ::before.

li::before {

content: «::before»;

background: lightgray;

border-radius: 1ch;

padding-inline: 1ch;

margin-inline-end: 1ch;

}

Обычно элементы списка являются элементами HTML li, но другие элементы также могут стать элементами списка с помощью display: list-item.

<dl>

<dt>Lorem</dt>

<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>

<dd>Dolores quaerat illo totam porro</dd>

<dt>Ipsum</dt>

<dd>Quidem aliquid perferendis voluptates</dd>

</dl>

dd {

display: list-item;

list-style-type: «your smile»;

padding-inline-start: 1ch;

}

Стилизация маркера

До ::marker списки не могли быть стилизованы с помощью list-style-type и list-style-image, чтобы изменить символ элемента списка с помощью 1 строки CSS:

li {

list-style-image: url(/right-arrow.svg);

/* OR */

list-style-type: ‘your icon’;

padding-inline-start: 1ch;

}

Это удобно, но нам нужно больше. А как насчет изменения цвета, размера, интервала и т. д.!? Вот где на помощь приходит ::marker. Он позволяет индивидуально и глобально выбирать эти псевдо-элементы из CSS:

li::marker {

color: hotpink;

}

li:first-child::marker {

font-size: 5rem;

}

Внимание: Если в приведенном выше списке нет розовых маркеров, значит ::marker не поддерживается вашим браузером.
Свойство list-style-type дает очень ограниченные возможности для стилизации. Псевдо-элемент ::marker означает, что можно настроить таргетинг самого маркера и применить стили непосредственно к нему. Это дает гораздо больший контроль.

Тем не менее, вы не можете использовать все свойства CSS для ::marker. Список разрешенных и запрещенных свойств четко указан в спецификации. Если вы попробуете что-то интересное с этим псевдо-элементом, и это не сработает, приведенный ниже список является вашим руководством по тому, что можно и что нельзя сделать с помощью CSS.

Допустимые свойства CSS для ::marker

animation-*

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

transition-*

color

direction

font-*

content

unicode-bidi

white-space

Изменение содержимого ::marker выполняется с помощью content вместо list-style-type. В следующем примере для первого элемента используется стиль list-style-type, а для второго — ::marker. Свойства в первом случае применяются ко всему элементу списка, а не только к маркеру, что означает, что текст анимируется так же, как и маркер. При использовании ::marker мы можем выбирать только блок маркера, а не текст.

Также обратите внимание на то, что отключенное свойство background не действует.

Стили списков

li:nth-child(1) {

list-style-type: ‘?’;

font-size: 2rem;

background: hsl(200 20% 88%);

animation: color-change 3s ease-in-out infinite;

}

Стили маркеров

li:nth-child(2)::marker {

content: ‘!’;

font-size: 2rem;

background: hsl(200 20% 88%);

animation: color-change 3s ease-in-out infinite;

}

Проблемы!

В Chromium white-space работает только с внутренними маркерами. Для маркеров, расположенных снаружи регулятор стиля всегда задает white-space: pre, чтобы сохранить свободное пространство.

Изменение содержимого маркера

Вот несколько способов стилизации маркеров.

Изменение всех маркеров списка

li {

list-style-type: «smile»;

}

/* OR */

li::marker {

content: «smile»;

}

Изменение только одного маркера списка

li:last-child::marker {

content: «smile»;

}

Замена маркера списка на SVG

li::marker {

content: url(/heart.svg);

content: url(#heart);

content: url(«data:image/svg+xml;charset=UTF-8,<svg xmlns=’//www.w3.org/2000/svg’ version=’1.1′ height=’24’ width=’24’><path d=’M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z’ fill=’none’ stroke=’hotpink’ stroke-width=’3’/></svg>»);

}

Изменение нумерованных списков

А что насчет ol? Маркер в элементе нумерованного списка по умолчанию является числом, а не маркером. В CSS они называются счетчиками, и они довольно мощные. У них даже есть свойства для установки и сброса в начале и в конце числа или переключения их на римские цифры. Можем ли мы это стилизовать? Да, и мы даже можем использовать значение содержимого маркера для создания собственного представления нумерации.

li::marker {

content: counter(list—item) «› «;

color: hotpink;

}

Отладка

Chrome DevTools готов помочь вам проверить, отладить и изменить стили, применяемые к псевдо-элементам ::marker.

Автор: Adam Argyle, Oriol Brufau

Источник: //web.dev

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Источник

См. также

Как изменить маркер списка

HTML разметка базового маркированного списка:

Меняем цвет маркера списка (1-ый способ)

Пример с заменой цвета маркеров списка

Меняем цвет маркера списка (2-ой способ)

CSS-код

Символы вместо иконок

Вместо маркера картинка

Альтернативный способ:

В HTML файле:

В отдельном CSS файле:

Возможности свойств CSS для стилизации списков

Изменение и удаление маркеров

Замена маркеров картинками

Отступ списка

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

Совместимость с браузерами

Псевдо-элементы

Создание маркера

Стилизация маркера

Допустимые свойства CSS для ::marker

Стили списков

Стили маркеров

Проблемы!

Изменение содержимого маркера

Изменение всех маркеров списка

Изменение только одного маркера списка

Замена маркера списка на SVG

Изменение нумерованных списков

Отладка

Верстка. Быстрый старт

Читайте также: