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

Стилизация маркера элемента списка

1) Каким образом задать отображение маркировки элемента списка справа от содержимого? 2) Каким образом задать стиль маркера элемента списка? — background-color, border, border-radius и т.д. ?

Отслеживать
задан 4 сен 2011 в 11:40
253 4 4 золотых знака 6 6 серебряных знаков 18 18 бронзовых знаков

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

можно попробовать подобный вариант, кроссбраузерность разумеется страдает, но судя по тому что Вам нужен border-radius это уже не так важно )

li:after li < list-style-type: none;/*прятаем родные маркеры*/ >

Отслеживать
ответ дан 4 сен 2011 в 12:39
850 5 5 серебряных знаков 13 13 бронзовых знаков
Хороший вариант, спасибо.
4 сен 2011 в 12:54
не работает в ие до 9
4 сен 2011 в 13:08
согласен, также как и border-radius, css3 однако
4 сен 2011 в 13:26

Я обычно делал так

ЗЫ: маркер — не элемент DOM вроде как, а элемент стиля, поэтому border-radius и прочее неприменимо. А картинка еще и понадежнее будет со всякими IE.

Отслеживать
ответ дан 4 сен 2011 в 11:56
14.3k 1 1 золотой знак 21 21 серебряный знак 35 35 бронзовых знаков
В данном случае стилизуется не маркер, а сам элемент списка.
4 сен 2011 в 11:59
А вы где видели тег маркера, чтобы можно было задать ему стиль?
4 сен 2011 в 12:06
Я его не видел, потому и поднял этот вопрос.
4 сен 2011 в 12:08
4 сен 2011 в 12:12

А чем вам свойство list-style не нравиться?

Например, чтобы поставить маркировку элемента справа можно указать list-style-position: right;

Сам стиль маркера list-style

Может я конечно ошибаюсь. Просто это как вариант.

Отслеживать
ответ дан 4 сен 2011 в 18:38
430 1 1 золотой знак 6 6 серебряных знаков 15 15 бронзовых знаков

Там очень ограниченный набор параметров. Больше сделать квадратик, цвет сменить или бордер поставить нельзя, например.

4 сен 2011 в 18:39

list-style — вот тут можно регулировать переметры.Размер и т.д list-style-image — Меняем квадратик на картинку list-style-position — Позиция маркера list-style-type —

4 сен 2011 в 18:48

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

4 сен 2011 в 18:51

list-style-position: right; — нет такого свойства! У list-style-position: возможны варианты: inside/outside

2 ноя 2017 в 13:01

Вообще-то есть отличное свойство, чтобы подсунуть свою картинку вместо стандартного маркера:

И больше ничего не нужно прописывать.

Отслеживать
ответ дан 16 авг 2014 в 13:38

• css3
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

Думаю, вы уже знаете, что в HTML 5 применяется два основных вида списков (если не брать в расчет списки описаний и элементы меню):

• нумерованный (упорядоченный) список – HTML элемент
• маркированный (неупорядоченные) список – HTML элемент

CSS предоставляет нам широкие возможности форматирования внешнего вида этих списков, давайте рассмотрим основные из них.

Изменение типа маркера

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

), по умолчанию маркер которых, отображается в форме закрашенного круга, чтобы его убрать необходимо, воспользоваться CSS свойством list-style-type со значением none :

) предусмотрено три типа маркеров: в форме закрашенного кружка ( disc — это значение по умолчанию), маркер в форме полого круга ( сircle ) и в форме квадрата ( square ), а для нумерованных (упорядоченных) списков (элемент
) все оставшиеся варианты. Полный перечень размещен в следующей таблице:

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

Обращаю Ваше внимание, что значения hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha не поддерживаются браузером Internet Explorer.

Давайте рассмотрим пример использования свойства list-style-type в тексте:

), а к маркированному списку (HTML элемент
) мы применили стиль, который устанавливает тип маркера в форме полого круга (значение circle ).

Результат нашего примера:

Рис. 69 Пример использования свойства list-style-type (установка типа маркера).

В этом примере мы стилизовали все нечетные элементы списка — указали тип маркера квадрат, а цвет текста указали зеленый. Четные элементы списка получили следующий стиль: красный цвет текста и отсутствие маркера.

Результат нашего примера:

Рис. 70 Пример чередования стилей свойства list-style-type.

Расположение маркера относительно элемента списка

С помощью CSS свойства list-style-position вы можете определить расположение маркера, либо цифры относительно элемента списка. Для того, чтобы расположить маркер (цифру) внутри элемента списка вместе с содержимым, то необходимо использовать значение inside , а для того, чтобы расположить за границей элемента списка необходимо использовать значение outside .

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

) мы расположили маркер внутри элемента списка вместе с содержимым, использовав свойство list-style-position со значение outside , а для нумерованного списка (HTML элемент
) разместили цифру слева от текста внутри элемента вместе с содержимым (свойство list-style-position со значение inside ).

Универсальное свойство border, которое позволяет установить границу для всех элементов списка, мы использовали для лучшего понимания работы свойства list-style-position. Работа с границами элементов в скором времени будет подробно рассмотрена в учебнике в статье «Границы элемента в CSS».

Результат нашего примера:

Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).

Создание собственных маркеров

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

Синтаксис свойства следующий:

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

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

Давайте рассмотрим пример использования собственных маркеров в документе:

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

Результат нашего примера:

Рис. 72 Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).

Изменение цвета маркера в CSS

В завершении этой статьи давайте рассмотрим продвинутый способ изменения цвета маркера без изменения цвета элемента, с использованием CSS свойства content и ранее рассмотренного псевдоэлемента :before:

), только уже необходимого для нашей задачи цвета.

Рис. 73 Пример изменения цвета маркера с использованием свойства content и псевдоэлемента :before.

Вопросы и задачи по теме

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

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла и изображение) в любую папку на вашем жестком диске:

Практическое задание № 18.
Продвинутое задание:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS-код

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

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

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

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

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

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

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

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

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

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

В HTML файле:

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

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

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

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

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

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

Порекомендуйте эту статью друзьям:

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

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

Комментарии ( 1 ):

Спасибо Михаилу за существенную подсказку верстальщику в оформлении списков. Это присутствует в каждом сайте и странице. Вчера отдал заказчику сайт визитку http://lomtop.kh.ua/ ,где и применял советы Михаила. В своё время я приобретал видео курсы М.Русакова и сейчас делаю сайты визитки на заказ. При этом мне уже за 70 лет. А я учусь.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

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

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

Пример 1. Стандартные маркеры

В данном примере в качестве маркеров используется квадратик (рис. 1).

Рис. 1. Вид маркеров

Выбор и установка собственного символа маркера происходит через псевдоэлемент ::before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type , а затем добавить псевдоэлемент ::before к селектору li . Сам вывод символа осуществляется с помощью свойства content, в качестве значения которого и выступает желаемый символ (пример 2).

Пример 2. Использование ::before и content

В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).

Рис. 2. Маркеры в виде символа

Чтобы выбрать в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа, входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.

Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position)

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня будет очередная статья о свойствах каскадных таблиц стилей. В ней речь пойдет об оформлении нумерованных и маркированных списков HTML с помощью правил CSS.

Вообще списки среди блочных элементов стоят особняком. Это связано с тем, что они включают в себя маркеры и нумерацию, которые расставляет сам браузер.

Свойство List style — оформление списка на html странице

В языке CSS существует три свойства начинающихся с list-style, которые отвечают за оформление маркированных и нумерованных списков. Плюс еще есть сборное правило list-style, позволяющее сократить количество кода.

Все эти свойства допустимо использовать как для html элементов li, так и для элементов ul и ol. Единственное отличие, если правила прописать для конкретного значения списка li, то оно только для него и применится. А если эти же css правила прописать для контейнеров ul или ul, то они применятся для всех элементов li заключенных в этих контейнерах.

Начнем с атрибута list-style-type, который задает вид маркеров или нумерации у пунктов списка:

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

• disc — маркер в виде черного кружка (значение по умолчанию для маркированных списков).
• circle — маркер в виде не закрашенного кружка.
• square — маркер в виде квадратика. Он может быть светлым или темным, в зависимости от браузера.
• decimal — нумерация арабскими цифрами (значение по умолчанию для нумерованных списков).
• decimal-leading-zero — нумерация арабскими цифрами от 01 до 99 с начальным нулем.
• lower-roman — нумерация маленькими римскими цифрами.
• upper-roman — нумерация большими римскими цифрами.
• lower-greek — нумерация маленькими греческими буквами.
• lower-alpha и lower-latin — нумерация маленькими латинскими буквами.
• upper-alpha и upper-latin — нумерация большими латинскими буквами.
• armenian — нумерация традиционными армянскими цифрами.
• georgian — нумерация традиционными грузинскими цифрами.
• none — маркерация и нумерация осуществляться вообще не будет.

Так примерно будут выглядеть элементы списка в браузере с различными значениями list-style-type:

При использовании CSS стилей не важно какой элемент (OL или UL) используется для создания списка. OL и UL отличаются только поведением по умолчанию и с помощью свойства list-style-type вы можете легко превратить один вид списка в другой.

Атрибут стиля list-style-image позволяет задавать в качестве маркера пунктов списка графическое изображение. При использовании атрибута list-style-image значение атрибута list-style-type игнорируется:

Значение none убирает маркер изображение и устанавливает обычный, не графический. Это поведение по умолчанию.

При указании адреса файла изображения, на место маркера будет вставлена картинка. Как и при использовании тега изображения img, в качестве адреса картинки можно использовать как абсолютные так и относительные адреса. В случае если браузер не сможет подгрузить изображение, то будет использоваться маркер или нумерация по умолчанию или то, что прописано в свойстве в list-style-type.

Пример списка с картинкой в качестве маркера:

А вот как это выглядит:

• первый пункт списка;
• второй пункт списка;
• третий пункт списка.

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

И последнее свойство CSS из серии list-style — list-style-position, которое позволяет указать местоположение маркера или нумерации в пункте списка. В качестве значения может быть два варианта:

В случае значения inside маркер или нумерация помещается как бы внутри списка, а в случае outside за пределами элементов li. По умолчанию используется значение outside и маркер выносится за пределы.

Пример списка с различными значениями list-style-position:

• в первом пункте все по умолчанию;
• во втором пункте list-style-position установлен в inside. В этом случае, обратите внимание, вторая строка размещается на одном уровне с маркером;
• в этом пункте list-style-position равен outside.

Сборное CSS правило list-style

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

Разделять значения в сборном правиле list-style следует пробелами:

list-style: list-style-type list-style-image list-style-position;

Реальное CSS правило для оформления списков может выглядеть примерно вот так:

list-style: circle url (//webcodius.ru/images/marker.png) outside;

Таким образом свойство list-style позволяет значительно сократить объем кода, ведь вместо трех правил достаточно задать лишь одно.

Как уже говорилось выше, значения можно указывать в любом порядке и любом количестве. Так, например, для того чтобы убрать маркеры из списка меню достаточно записи:

Тоже самое можно сделать используя свойство list-style-type:

На этом рассказ об оформлении html списков при помощи каскадных таблиц стилей я закончу. Чтобы узнать о других CSS свойствах вы можете почитать статьи из раздела «Справочник CSS» и не забудьте подписаться на обновления блога. До новых встреч!

Похожие публикации:

1. Как обрезать картинку css
2. Как опустить footer в самый низ css
3. Сколько учить html и css
4. Что выбрать arduino или raspberry

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

С помощью CSS у HTML списков можно удалить маркеры, заменить маркеры на другой вид или вместо них использовать картинки.

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

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

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

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

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

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

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

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

ol#myList list-style-type: decimal ;
>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

< 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 >

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

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

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

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

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

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

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

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

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

< dd >Quidem aliquid perferendis voluptates < / dd >

list-style-type : «your smile» ;

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

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

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

list-style-type : ‘your icon’ ;

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

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

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

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

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

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

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

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

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

background : hsl ( 200 20% 88% ) ;

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

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

background : hsl ( 200 20% 88% ) ;

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

Проблемы!

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

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

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

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

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

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

content : url ( / heart . svg ) ;

content : url ( #heart);

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

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

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

Отладка

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

Автор: Adam Argyle, Oriol Brufau

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

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

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

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

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

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

Стилизация списков

• Назад
• Обзор: Styling text
• Далее

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

Требования:	Базовая компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), CSS основы по тексту и шрифтам.
Цель:	Познакомиться с лучшими практиками и свойствами по стилизации списков.

Пример простого списка

Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)

HTML для нашего примера списка представлен ниже:

h2>Shopping (unordered) listh2> p>Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.p> ul> li>Hummusli> li>Pitali> li>Green saladli> li>Halloumili> ul> h2>Recipe (ordered) listh2> p>Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.p> ol> li>Toast pita, leave to cool, then slice down the edge.li> li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.li> li>Wash and chop the salad.li> li>Fill pita with salad, hummus, and fried halloumi.li> ol> h2>Ingredient description listh2> p>Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.p> dl> dt>Hummusdt> dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.dd> dt>Pitadt> dd>A soft, slightly leavened flatbread.dd> dt>Halloumidt> dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.dd> dt>Green saladdt> dd>That green healthy stuff that many of us just use to garnish kebabs.dd> dl> 

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

• Элементы
  и
  имеют верхний и нижний margin по 16px ( 1em ) и padding-left 40px ( 2.5em .)
  • Объекты списка (элементы
  • ) не имеют заданных значений по умолчанию для интервалов.
  • Элемент имеет верхний и нижний margin по 16px ( 1em ), но padding не задан.
  • Элементы имеют margin-left 40px ( 2.5em .)
  • Элементы

    которые мы включили для ссылок (сноски) имеют верхний и нижний margin по 16px ( 1em ), точно так же, как и различные типы списков.

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

  При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть законченный стилизированный пример на Github, а также найти исходный код.)

  CSS, используемый для оформления текста и интервалов, выглядит следующим образом:

  /* Базовые стили */ html  font-family: Helvetica, Arial, sans-serif; font-size: 10px; > h2  font-size: 2rem; > ul,ol,dl,p  font-size: 1.5rem; > li, p  line-height: 1.5; > /* Задаём стили для списка описаний */ dd, dt  line-height: 1.5; > dt  font-weight: bold; > dd  margin-bottom: 1.5rem; > 

  • Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.
  • Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.
  • Правило 4 задаёт одинаковую высоту line-height в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.
  • Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту line-height между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.

  Стили специфичные для списков

  • list-style-type (en-US): задаёт тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.
  • list-style-position (en-US): управляет будет ли маркер появляется внутри пунктов списка или вне их перед началом каждого элемента.
  • list-style-image : позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.

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

  Как указано выше, свойство list-style-type (en-US) позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:

  ol  list-style-type: upper-roman; > 

  Это даёт нам следующий вид:

  

  Вы можете найти гораздо больше опций, заглянув на справочную страницу list-style-type (en-US).

  Позиция маркера

  Свойство list-style-position (en-US) устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside , которое заставляет маркеры находится снаружи пунктов списка, как видно выше.

  Если вы установите значение на inside , то маркеры будут находиться внутри строк:

  ol  list-style-type: upper-roman; list-style-position: inside; > 

  

  Использование пользовательского изображения как маркер

  Свойство list-style-image позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:

  ul  list-style-image: url(star.svg); > 

  Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств background , о которых вы узнаете намного больше в модуле Styling boxes. А пока вот вам образец для дегустации!

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

  ul  padding-left: 2rem; list-style-type: none; > ul li  padding-left: 2rem; background-image: url(star.svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; > 

  Мы сделали следующее:

  • Установили padding-left элемента
    с 40px по умолчанию на 20px , затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо.
    • Установили list-style-type (en-US) на none , для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства background для управления маркерами.
    • Вставили маркер в каждый пункт неупорядоченного списка. Соответствующие свойства, следующие:
      • background-image : Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.
      • background-position : Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим 0 0 , что значит что маркер будет появляться в самом верху слева каждого пункта списка.
      • background-size : Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер 1.6rem ( 16px ), что очень хорошо сочетается с отступом (padding) 20px , который мы позволили разместить внутри маркера — 16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.
      • background-repeat : По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение no-repeat .

      Это даёт нам следующий результат:

      короткая запись list-style

      Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, list-style (en-US). Например, следующий CSS:

      ul  list-style-type: square; list-style-image: url(example.png); list-style-position: inside; > 

      Может быть заменён этим:

      ul  list-style: square url(example.png) inside; > 

      Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — disc , none , и outside ). Если указаны и type и image , тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.

      Контроль счета списка

      Иногда вам может понадобиться вести счёт в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счёт с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.

      start

      Атрибут start позволит вам начать счёт списка с цифры отличной от 1. Например:

      ol start="4"> li>Toast pita, leave to cool, then slice down the edge.li> li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.li> li>Wash and chop the salad.li> li>Fill pita with salad, hummus, and fried halloumi.li> ol> 

      что даст вам такой результат:

      reversed

      Атрибут reversed начнёт отсчёт по убыванию вместо возрастания. Например:

      ol start="4" reversed> li>Toast pita, leave to cool, then slice down the edge.li> li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.li> li>Wash and chop the salad.li> li>Fill pita with salad, hummus, and fried halloumi.li> ol> 

      что даст вам такой результат:

      Примечание: Обратите внимание: Если пунктов в списке в обратном списке больше, чем значение атрибута start , счёт продолжится до нуля и далее отрицательные значения.

      value

      Атрибут value позволит вам установить специфичные цифровые значения к пунктам списка. Например:

      ol> li value="2">Toast pita, leave to cool, then slice down the edge.li> li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.li> li value="6">Wash and chop the salad.li> li value="8">Fill pita with salad, hummus, and fried halloumi.li> ol> 

      что даст вам такой результат:

      Примечание: Обратите внимание: Даже если вы используете нечисловой list-style-type (en-US), вам всё равно надо использовать эквивалентное цифровое значение в атрибуте value .

      Активное изучение: Стилизация вложенного списка

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

      1. Задали неупорядоченному списку квадратные маркеры.
      2. Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
      3. Задали упорядоченному списку маркеры в виде строчных букв.
      4. Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдёте.

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

      div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> h2>HTML Inputh2> textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">ul> li>First, light the candle.li> li>Next, open the box.li> li>Finally, place the three magic items in the box, in this exact order, to complete the spell: ol> li>The book of spellsli> li>The shiny rodli> li>The goblin statueli> ol> li> ul>textarea> h2>CSS Inputh2> textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">textarea> h2>Outputh2> div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;">div> div class="controls"> input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> div> div> 

      var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var solution = document.getElementById("solution"); var styleElem = document.createElement('style'); var headElem = document.querySelector('head'); headElem.appendChild(styleElem); function drawOutput()  output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; > reset.addEventListener("click", function()  htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); >); solution.addEventListener("click", function()  htmlInput.value = htmlCode; cssInput.value = 'ul nnul li, ol li nnol '; drawOutput(); >); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); 

      Смотрите также

      Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:

      • @counter-style
      • counter-increment (en-US)
      • counter-reset (en-US)

      Заключение

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

      • Назад
      • Обзор: Styling text
      • Далее

      В этом модуле

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

      

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

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

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

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

      

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

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

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

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

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

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

      width: 1em; /* Задать значение расстояния */
      >

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

      

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

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

      CSS-код

      span color: cyan;
      font-weight: bold;
      display: inline-block;

      width: 1em;
      font-size: 20px;
      >

      

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

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

      

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

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

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

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

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

      ul li background: url(images/icon_star.gif) no-repeat 0 5px;
      >

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

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

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

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

      В HTML файле:

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

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

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

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

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

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

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

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

      Кнопка: Она выглядит вот так:

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

      Думаю, вы уже знаете, что в HTML 5 применяется два основных вида списков (если не брать в расчет списки описаний и элементы меню):

      • нумерованный (упорядоченный) список – HTML элемент
      • маркированный (неупорядоченные) список – HTML элемент

      CSS предоставляет нам широкие возможности форматирования внешнего вида этих списков, давайте рассмотрим основные из них.

      Изменение типа маркера

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

      ), по умолчанию маркер которых, отображается в форме закрашенного круга, чтобы его убрать необходимо, воспользоваться CSS свойством list-style-type со значением none :

      ul  list-style-type : none; /* убираем маркер у списка */ > 

      ) предусмотрено три типа маркеров: в форме закрашенного кружка ( disc — это значение по умолчанию), маркер в форме полого круга ( сircle ) и в форме квадрата ( square ), а для нумерованных (упорядоченных) списков (элемент
      ) все оставшиеся варианты. Полный перечень размещен в следующей таблице:

      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка
      • Элемент списка

      Обращаю Ваше внимание, что значения hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha не поддерживаются браузером Internet Explorer.

      Давайте рассмотрим пример использования свойства list-style-type в тексте:

      /* список со значением типа маркера по умолчанию (disc). */ Элемент списка Элемент списка Элемент списка
      ), а к маркированному списку (HTML элемент
      ) мы применили стиль, который устанавливает тип маркера в форме полого круга (значение circle ).

      Результат нашего примера:

      

      Рис. 69 Пример использования свойства list-style-type (установка типа маркера).

      Элемент списка Элемент списка Элемент списка Элемент списка Элемент списка Элемент списка Элемент списка Элемент списка

      В этом примере мы стилизовали все нечетные элементы списка — указали тип маркера квадрат, а цвет текста указали зеленый. Четные элементы списка получили следующий стиль: красный цвет текста и отсутствие маркера.

      Результат нашего примера:

      

      Рис. 70 Пример чередования стилей свойства list-style-type.

      Расположение маркера относительно элемента списка

      С помощью CSS свойства list-style-position вы можете определить расположение маркера, либо цифры относительно элемента списка. Для того, чтобы расположить маркер (цифру) внутри элемента списка вместе с содержимым, то необходимо использовать значение inside , а для того, чтобы расположить за границей элемента списка необходимо использовать значение outside .

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

      ) мы расположили маркер внутри элемента списка вместе с содержимым, использовав свойство list-style-position со значение outside , а для нумерованного списка (HTML элемент
      ) разместили цифру слева от текста внутри элемента вместе с содержимым (свойство list-style-position со значение inside ).

      Универсальное свойство border, которое позволяет установить границу для всех элементов списка, мы использовали для лучшего понимания работы свойства list-style-position. Работа с границами элементов в скором времени будет подробно рассмотрена в учебнике в статье «Границы элемента в CSS».

      Результат нашего примера:

      

      Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).

      Создание собственных маркеров

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

      Синтаксис свойства следующий:

      ol  list-style-image : url('images/primer.png'); /* указываем относительный путь к изображению */ > ul  list-style-image : url('http://basicweb.ru/images/mini5.png'); /* указываем абсолютный путь к изображению */ > 

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

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

      Давайте рассмотрим пример использования собственных маркеров в документе:

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

      Результат нашего примера:

      

      Рис. 72 Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).

      Изменение цвета маркера в CSS

      В завершении этой статьи давайте рассмотрим продвинутый способ изменения цвета маркера без изменения цвета элемента, с использованием CSS свойства content и ранее рассмотренного псевдоэлемента :before:

      Элемент списка Элемент списка Элемент списка
      ), только уже необходимого для нашей задачи цвета.

      

      Рис. 73 Пример изменения цвета маркера с использованием свойства content и псевдоэлемента :before.

      Вопросы и задачи по теме

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

      Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла и изображение) в любую папку на вашем жестком диске:

      

    • Используя полученные знания составьте следующие HTML страницы:
      Практическое задание № 18. Продвинутое задание:
      Практическое задание № 19.

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

    Свойство list-style-type изменяет вид маркера для каждого элемента списка.

    ) и нумерованного (элемент
    ).

    Списки, счетчики, генерируемый контент

    • counter-increment
    • counter-reset
    • list-style-image
    • list-style-type
    • list-style-position
    • list-style
    • content
    • quotes

    Синтаксис¶

    /* Partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: cjk-ideographic; list-style-type: kannada; /* value */ list-style-type: '-'; /* Identifier matching an @counter-style rule */ list-style-type: custom-counter-style; /* Keyword value */ list-style-type: none; /* Global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset; 

    Значения¶

    Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

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

    circle Маркер в виде кружка. disc Маркер в виде точки. square Маркер в виде квадрата.

    Нумерованный список¶

    armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4,…). decimal-leading-zero Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,…). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d,…). lower-greek Строчные греческие буквы (α, β, γ, δ,…). lower-latin Это значение аналогично lower-alpha . lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v,…). upper-alpha Заглавные латинские буквы (A, B, C, D,…). upper-latin Это значение аналогично upper-alpha . upper-roman Римские числа в верхнем регистре (I, II, III, IV, V,…). none Отменяет маркеры для списка.

    list-style-type: disc; /* для ul */ list-style-type: decimal; /* для ol */ 

    и
    , а также ко всем элементам, у которых указано display: list-item

    Спецификации¶

    • CSS Counter Styles Level 3
    • CSS Lists and Counters Module Level 3
    • CSS Level 2 (Revision 1)

    Описание и примеры¶

     html> head> meta charset="utf-8" /> title>list-style-typetitle> style> ol  list-style-type: upper-roman; > style> head> body> ol> li>Gaius Octavius Thurinusli> li>Tiberius Claudius Neroli> li>Gaius Iulius Caesar Augustus Germanicusli> li>Tiberius Claudius Drususli> li>Lucius Arruntius Camillus Scribonianusli> li>Nero Claudius Caesar Drusus Germanicusli> li>Lucius Clodius Macerli> ol> body> html> 

    Свойства списков

    С помощью CSS можно создать маркированные и нумерованные списки, а также использовать
    в качестве маркера подходящее изображение.

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

    Свойство Значение Описание Пример list-style-type disc
    circle
    square
    decimal
    lower-roman
    upper-roman
    lower-alpha
    upper-alpha
    none Вид маркера. Первые три используются для создания маркированного списка,
    а остальные — для нумерованного. LI
    или
    ,
    который выступает в качестве его родителя, то можно устанавливать стиль как
    для селектора UL , так и для селектора LI .
    Так, в примере 1 используется селектор UL , для
    него и задаются стилевые параметры.

    Пример 1. Создание маркированного списка

    Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно
    текста.

    

    Рис. 1. Вид списка, измененого с помощью стилей

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

    Пример 2. Использование изображений в качестве маркера

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

    

    Рис. 2. Изображения в качестве маркеров

    Некоторые примеры создания различных списков приведен в табл. 2.

    • работоспособность всех ссылок
    • поддержку разных браузеров
    • читабельность текста
    • работоспособность всех ссылок
    • поддержку разных браузеров
    • читабельность текста
    • работоспособность всех ссылок
    • поддержку разных браузеров
    • читабельность текста

    Нумерованный список с арабскими цифрами:

    Нумерованный список со строчными римскими цифрами:

    Нумерованный список с заглавными римскими цифрами:

    Нумерованный список со строчными буквами латинского алфавита:

    Нумерованный список с заглавными буквами латинского алфавита:

    Списки являются частью повседневной жизни. Список дел определяет что сделано. Навигационные маршруты предлагают пошаговый список направлений. Для рецептов требуется список ингредиентов и список инструкций. Списки встречаются практически везде, так что легко понять, почему они также популярны в Интернете.

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

    В дополнение к трём разным типам списков доступных в HTML есть несколько путей для стилизации этих списков через CSS. Например, мы можем выбрать, какой тип маркера указать для списка. Маркер может быть квадратным, круглым, числом, буквой или, возможно, отсутствовать. Кроме того, мы можем решить, как должен отображаться список — по вертикали или горизонтали. Все эти варианты играют важную роль при стилизации наших веб-страниц.

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

    . Каждый отдельный пункт в списке размечается с помощью элемента
    .

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

    Демонстрация маркированного списка

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

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

    Поскольку порядок имеет значение, вместо точки в качестве маркера по умолчанию в нумерованном списке применяются номера.

    1. Пройдите по Абрикосовой улице
    2. Сверните на Виноградную
    3. Остановитесь на Тенистой улице

    Демонстрация нумерованного списка

    У нумерованных списков также есть доступные для них уникальные атрибуты, включая start и reversed.

    Атрибут start

    , то можем точно определить, с какого номера должен начинаться отсчёт нумерованного списка.

    Атрибут start принимает только целые значения, хотя в нумерованных списках могут применяться разные системы нумерации, например, римские числа.

    Демонстрация атрибута start

    Атрибут reversed

    позволяет списку отображаться в обратном порядке. Список из пяти пунктов пронумерованных от 1 до 5 может быть задан обратно и нумероваться от 5 до 1.

    Демонстрация атрибута reversed

    Атрибут value

    В качестве примера, если у второго пункта списка атрибут value задан как 9, номер этого пункта списка будет выводиться, как если бы он был девятым. Все последующие пункты списка будут пронумерованы от 9.

    1. Пройдите по Абрикосовой улице
    9. Сверните на Виноградную
    10. Остановитесь на Тенистой улице

    Демонстрация атрибута value

    Списки описания

    Другой тип списка который вы видели в Интернете (но не так часто, как маркированные или нумерованные списки) — это список описаний. Такие списки применяются для обозначения нескольких терминов и их описаний, как в глоссарии, к примеру.

    Список описания может содержать множество терминов и описаний, один за другим. Кроме того, такой список может содержать несколько терминов на одно описание, а также несколько описаний на термин. Один термин может иметь несколько значений и допускать несколько описаний. И наоборот, одно описание может подходить к нескольким терминам.

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

    и
    . Кроме того, элемент включает в себя по умолчанию левый margin .

     
    учёба
     
    Посвящение времени и внимания для получения знаний по преподаваемому предмету, особенно с помощью книг.
     
    проект
     
    Представленный план или чертёж, который показывает, как будет выглядеть и функционировать здание, одежда или другой предмет, прежде чем он будет построен или сделан.
     
    Существующие цели, планы или намерения до их воплощения или реализации в материальном объекте.
     
    бизнес
     
    работа
     
    Регулярные занятия человека, профессия или ремесло.
     

    Демонстрация списка описания

    Вложенные списки

    Особенность, которая делает списки очень мощными — это возможность вложения. Каждый список может быть помещён в другой список и они могут быть вложены неоднократно. Но возможность вкладывать списки бесконечно не даёт свободу делать это. Списки должны быть зарезервированы специально там, где они сохраняют наиболее семантическое значение.

    и
    является элемент
    . Повторим — единственным элементом, который мы можем поставить как прямой потомок элементов
    и
    , является
    .

    Чтобы вложить список — перед закрытием пункта списка начните новый список. После того, как вложенный список завершён и закрыт, закройте обрамляющий пункт списка и продолжите с первоначального списка.

    1. Погулять с собакой
    2. Сложить бельё
    3. Сходить в магазин и купить:
       • Молоко
       • Хлеб
       • Сыр
    4. Подстричь газон
    5. Приготовить ужин

    Демонстрация вложенных списков

    и
    могут содержать только элементы
    • . Элемент
    • может содержать любой обычный элемент, какой пожелаете. Однако элемент
    • должен быть прямым потомком либо элемента
      , либо
      .

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

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

      Стилизация пунктов списка

      Маркированные и нумерованные списки используют маркеры пунктов списка по умолчанию. Для маркированных списков это, как правило, однотонные точки, в то время как для нумерованных списков, как правило, применяются числа. С помощью CSS стиль и положение этих маркеров можно настраивать.

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

      Любое значение свойства list-style-type может быть добавлено к маркированному или нумерованному списку. Имея это в виду, можно использовать нумерацию в маркированном списке и не числовые маркеры в нумерованном списке.

      Демонстрация свойства list-style-type

      Значения list-style-type

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

      Значение list-style-type	Содержимое
      none	Нет пунктов списка
      disc	Однотонный кружок
      circle	Пустая окружность
      square	Однотонный квадрат
      decimal	Десятичные числа
      decimal-leading-zero	Десятичные числа начинающиеся с нуля
      lower-roman	Строчные римские числа
      upper-roman	Заглавные римские числа
      lower-greek	Строчные греческие числа
      lower-alpha / lower-latin	Строчные латинские буквы
      upper-alpha / upper-latin	Заглавные латинские буквы
      armenian	Традиционная армянская нумерация
      georgian	Традиционная грузинская нумерация

      Использование изображения в качестве маркера списка

      Подробнее — значение none свойства list-style-type удалит существующие маркеры списка. Свойство background задаст фоновое изображение вместе с его положением и повтором, если необходимо. А свойство padding обеспечит пространство слева от текста для фоновой картинки.

      list-style-type

      list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit

      Значения

      Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

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

      circle Маркер в виде кружка. disc Маркер в виде точки. square Маркер в виде квадрата.

      Нумерованный список

      armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4. ). decimal-leading-zero
      Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d. ). lower-greek Строчные греческие буквы (α, β, γ, δ. ). lower-latin Это значение аналогично lower-alpha . lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v. ). upper-alpha Заглавные латинские буквы (A, B, C, D. ). upper-latin Это значение аналогично upper-alpha . upper-roman Римские числа в верхнем регистре (I, II, III, IV, V. ). none Отменяет маркеры для списка. inherit Наследует значение родителя.

      HTML5 CSS2.1 IE Cr Op Sa Fx

      1. Lorem ipsum dolor sit amet
      2. Consectetuer adipiscing elit
      3. Sed diem nonummy nibh euismod
      4. Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

      

      Рис. 1. Применение свойства list-style-type

      Объектная модель

      [window.]document.getElementById(» elementID «).style.listStyleType

      Браузеры

      и значения inside свойства list-style-position , числа идущие с 10, начинают накладываться на текст списка.

      Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения armenian , decimal-leading-zero , georgian , lower-greek , lower-latin , upper-latin , inheirt . Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов ( ul < float: left; >).

      Internet Explorer 8 дополнительно понимает значение upper-greek , которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ. ).

      CSS по теме

      Похожие публикации:

      1. Где находится файл php ini в wordpress
      2. Как перенести telegram с андроида на андроид
      3. Как пользоваться пылесосом zelmer aquawelt
      4. Как удалить лишние масштабы аннотаций в автокаде