Как изменить маркер списка в html
Перейти к содержимому

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

  • автор:

Хочу изменить вид маркера на другой символ. Как это сделать?

Изменить вид маркеров в списке и заменить их на другой символ.

Решение

С помощью 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.

Маркированный список

Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?

Как убрать маркеры в маркированном списке?

Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI .

Как вместо символа маркера использовать картинку?

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

Хочу изменить вид маркера на другой символ. Как это сделать?

С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI .

Как увеличить расстояние от маркера до текста?

Для изменения расстояния между маркером списка и текстом используйте свойство padding-left для селектора LI .

Как изменить отступ слева от маркеров списка?

Добавьте свойство margin-left к селектору UL или OL , соответственно, для маркированного или нумерованного списка. Браузер Firefox, Safari и Chrome одновременно с отступами добавляет к списку поля (свойство padding ), поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение padding .

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Как удалить, заменить или оформить маркеры списка с помощью CSS

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

Здесь у нас будет класс с названием «nolist» для упорядоченных списков. При необходимости он также может быть использован в будущем.

Можете также установить класс к любому элементу списка ( ), не меняя остальные маркеры.

Пример

html> html> head> title>Заголовок документа title> style> .nolist < list-style: none ; > style> head> body> h2>Неупорядоченный список h2> ul> li>Элемент списка 1 li> li class="nolist">Элемент списка 2 li> li>Элемент списка 3 li> ul> h2>Упорядоченный список strong> h2> ol class="nolist"> li>Элемент списка 1 li> li>Элемент списка 2 li> li>Элемент списка 3 li> ol> body> html>

Как заменить маркеры списка на изображения

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

Есть два способа установления изображений для элементов списка:

  1. Используйте list-style-image, чтобы заменить HTML маркеры на графические изображения. В большинстве современных браузеров применение этих изображений несовместимо. А также нет полного контроля над положением маркеров.

HTML маркеры могут быть заменены на изображения с помощью «list-style-image». Но применение изображений не всегда совместимо с браузером.

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

Пример

html> html> head> title>Заголовок документа title> style> ul < list-style-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png"); > style> head> body> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> li>Элемент списка 3 li> ul> body> html>
  1. Использование фоновых изображений для маркеров будет лучшим вариантом. Давайте пошагово увидим, как применить этот метод:
  • Создайте простой неупорядоченный список
  • Удалите маркеры с помощью list-style-type: none none
  • Удалите поля и отступы

Стандартные списки HTML имеют отступ в определенной величине. Она отличается для каждого браузера. Для этого некоторые браузеры (Mozilla, Safari) используют отступ, а другие (Internet Explorer, Opera) — поля.

    , как в данном примере:

ul < padding: 0; margin: 0; >
  • Добавьте отступ сами

В случае, если левый отступ обязателен, рекомендуется использовать margin-left. Так как сейчас padding установлено в «0», могут быть указаны точные измерения для левого поля, и это будет совместимо со всеми браузерами.

margin-left: 1em;
  • Добавьте фоновое изображение
  • Задайте no-repeat

Чтобы фоновое изображение не повторялось в фоне элементов списка, задайте «no-repeat» для свойства background-repeat. Здесь установлено только одно изображение для каждого элемента, но требуется изменить положение.

li < background-image: url(star.png); background-repeat: no-repeat; >
  • Измените положение фонового изображения

Используйте CSS свойство background-position для установления такого положения фонового изображения, чтобы оно соответствовало тексту.

Сейчас изображения выстроены в линию по горизонтали вместе с контентом. Но контент расположен наверху изображений.

background-position: 1px;
  • Переместите контент
padding-left: 20px;

А сейчас увидим каким будет полный пример:

Пример

html> html> head> title>Заголовок документа title> style> ul < list-style-type: none; padding: 0; margin: 0; > li < background-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png"); background-repeat: no-repeat; background-position: 1px; padding-left: 20px; > style> head> body> ul> li>Зеленый li> li>Синий li> li>Желтый li> li>Красный li> ul> body> html>

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

Как создать горизонтальные списки

Пример

html> html> head> title>Заголовок документа title> style> #container ul < margin: 0; padding: 0; list-style-type: none; text-align: center; > #container ul li < display: inline; > #container ul li a < text-decoration: none; padding: 5px 20px; color: #fff; background-color: #1c87c9; > #container ul li a:hover < color: #fff; background-color: #369; > style> head> body> div id="container"> ul> li>a href="#">Home a> li> li>a href="#">Blog a> li> li>a href="#">Contact a> li> li>a href="#">About a> li> ul> div> body> html>

Как оформить списки

Добавьте стиль к спискам с помощью свойств color и background-color:

Пример

html> html> head> style> ol < background: #1c87c9; padding: 20px; color: cyan; > ul < background: #8ebf42; padding: 20px; > ol li < background: #666; padding: 5px; margin-left: 35px; > ul li < background: #eee; margin: 5px; > style> head> body> ol> li>Кофе li> li>Чай li> li>Молоко li> ol> ul> li>Кофе li> li>Чай li> li>Молоко li> ul> body> html>

Создайте список с полной шириной границ, используя CSS свойства border и border-bottom:

Пример

html> html> head> title>Заголовок документа title> style> ul < border: 1px solid #ddd; background-color: #eee; list-style-type: none; padding: 0; > ul li < padding: 8px 10px; border-bottom: 1px solid #ddd; > ul li:last-child < border-bottom: none; > style> head> body> ul> li>Кофе li> li>Чай li> li>Молоко li> ul> body> html>

Добавьте границу к элементам вашего списка, используя CSS свойство border-left:

Пример

html> html> head> title>Заголовок документа title> style> ul < border-left: 5px solid #8ebf42; background-color: #eee; list-style-type: none; padding: 10px 20px; > style> head> body> div id="container"> ul> li>Кофе li> li>Чай li> li>Молоко li> ul> div> body> html>

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

Пример

html> html> head> title>Заголовок документа title> style> .disc < list-style: disc; > .square < list-style: square; > .armenian < list-style: armenian; > .lower-greek < list-style: lower-greek; > style> head> body> ul> li class="disc">Круглый маркер li> li class="square">Квадратный маркер li> li class="armenian">Армянский маркер li> li class="lower-greek">Греческий маркер li> ul> body> html>

Пример со всеми видами маркеров

    ) и неупорядоченных (
    ) списков:

Пример

html> html> head> title>Заголовок документа title> style> ul.a list-style-type: circle;> ul.b list-style-type: square;> ol.c list-style-type: upper-roman;> ol.d list-style-type: lower-alpha;> ol.e list-style-type: armenian;> ol.f list-style-type: decimal;> ol.g list-style-type: cjk-ideographic;> ol.h list-style-type: decimal-leading-zero;> ol.i list-style-type: georgian;> ol.j list-style-type: hebrew;> ol.k list-style-type: hiragana;> ol.l list-style-type: hiragana-iroha;> ol.m list-style-type: katakana;> ol.n list-style-type: katakana-iroha;> ol.o list-style-type: lower-greek;> ol.p list-style-type: lower-latin;> ol.q list-style-type: lower-roman;> ol.r list-style-type: none;> ol.s list-style-type: upper-alpha;> ol.t list-style-type: upper-latin;> style> head> body> h2>Примеры неупорядоченных списков h2> h3>Circle h3> ul class="a"> li>Нью-Йорк li> li>Лас-Вегас li> li>Вашингтон li> ul> h3>Square h3> ul class="b"> li>Сан-Франциско li> li>Лос-Анджелес li> li>Майами li> ul> h2>Примеры упорядоченных списков: h2> h3>Upper-roman h3> ol class="c"> li>Барселона li> li>Мадрид li> li>Лондон li> ol> h3>Lower-alpha h3> ol class="d"> li>Дубай li> li>Абу-Даби li> li>Катар li> ol> h3>Armenian h3> ol class="e"> li>Ереван li> li>Париж li> li>Рим li> ol> h3>Decimal h3> ol class="f"> li>Сидней li> li>Гонк Конг li> li>Москва li> ol> h3>Cjk-ideographic h3> ol class="g"> li>Киев li> li>Санкт-Петербург li> li>Тула li> ol> h3>Decimal-leading-zero h3> ol class="h"> li>Бангкок li> li>Гюмри li> li>Валенсия li> ol> h3>Georgian h3> ol class="i"> li>Мадрид li> li>Барселона li> li>Прага li> ol> h3>Hebrew h3> ol class="j"> li>Иерусалим li> li>Торонто li> li>Прага li> ol> h3>Hiragana h3> ol class="k"> li>Каир li> li>Токио li> li>Афины li> ol> h3>Hiragana-iroha h3> ol class="l"> li>Тегеран li> li>Тебриз li> li>Тель-Авив li> ol> h3>Katakana h3> ol class="m"> li>Мюнхен li> li>Берлин li> li>Бавария li> ol> h3>Katakana-iroha h3> ol class="n"> li>Брюссель li> li>Стамбул li> li>Сидней li> ol> h3>Lower-greek h3> ol class="o"> li>Севилья li> li>Гранада li> li>Венеция li> ol> h3>Lower-latin h3> ol class="p"> li>Будапешт li> li>Виенна li> li>Амстердам li> ol> h3>Lower-roman h3> ol class="q"> li>Буэнос-Айрес li> li>Рио-де-Жанейро li> li>Сан-Паоло li> ol> h3>None h3> ol class="r"> li>Вильнюс li> li>Таллинн li> li>Рига li> ol> h3>Upper-alpha h3> ol class="s"> li>Монреаль li> li>Мельбурн li> li>Эдинбург li> ol> h3>Upper-latin h3> ol class="t"> li>Дублин li> li>Мексика li> li>Флоренция li> ol> body> html>

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

Цвет маркера списка можно изменить несколькими способами:

  1. Использовать тег span ;
  2. Использовать псевдоэлемент ::before или ::after ;
  3. Использовать псевдоэлемент ::marker .
  4. Изображение для маркера списка.

Как изменить цвет маркера списка с помощью CSS

1. Используя тег span :

li < color:#f16092; >li span

2. Используя псевдоэлемент ::before :

li < color:#214133; list-style-type: none; >li::before
  1. Snow
  2. Rain
  3. Fog
  • list-style-type: none; — отменяем стандартный маркер,
  • content: » «; — указываем символ маркера, который хотим вывести перед элементом списка.

3. Маркер списка при помощи псевдоэлемента ::marker .

li::marker

Картинка для маркера списка

Чтобы заменить маркеры списка на изображения воспользуемся свойством list-style-image.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Поделиться с друзьями:

Статьи из данной категории:

  • JavaScript: Работа с Массивами
  • Наличие Динамически Добавленного Элемента
  • Стилизация Input File
  • Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
  • Стилизация Скролла
  • События Формы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *