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

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

  • автор:

::marker

Псевдоэлемент ::marker применяет стили к маркеру элемента списка, которые обычно содержит значок или номер. Работает с любым элементом или псевдоэлементом, к которого установлен display: list-item , например, у такого как или .

::marker  color: blue; font-size: 1.2em; > 

Разрешённые свойства

Только некоторые CSS-свойства могут быть использованы с ::marker в качестве селектора:

  • Все свойства шрифтов
  • white-space
  • color (en-US)
  • text-combine-upright (en-US), unicode-bidi (en-US) и direction
  • Свойство content
  • Все animation и transition (en-US) свойства

Примечание: The specification states that additional CSS properties may be supported in future.

159. Типы списков в CSS

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

Самый удобный способ поменять список: изменить маркер. Маркером называется какая-либо метка (в маркированном списке) или символ (в нумерованном списке), который находится рядом с каждым элементом списка. Чтобы изменить маркер, необходимо применить свойство list-style-type для списка, заданного тегами li , ol или ul или, если к элементу применено свойство display: list-item . Свойство list-style-type имеет следующие значения:

Для маркированного списка:

  1. disc – маркер по умолчанию. Выглядит как заполненный круг;
  2. square – маркер в виде квадрата;
  3. circle – обычный круг;

Для нумерованного списка:

  1. armenian – армянская нумерация;
  2. cjk-ideographic – простые идеографические числа;
  3. decimal – десятичное число;
  4. decimal-leading-zero – десятичное число с ведущим нулем;
  5. georgian – грузинская нумерация;
  6. hebrew – еврейская нумерация;
  7. hiragana – нумерация Хирагана;
  8. hiragana-iroha – традиционная нумерация Хирагана;
  9. katakana – нумерация Катакана;
  10. katakana-iroha – традиционная нумерация Катакана-ироха;
  11. lower-alpha – латинский алфавит в нижнем регистре (a, b, c, d …);
  12. lower-greek – греческий алфавит в нижнем регистре (α, β, γ, δ …);
  13. lower-latin – аналог lower-alpha ;
  14. lower-roman – римские числа в нижнем регистре (i, ii, iii, iv, …);
  15. upper-alpha – латинский алфавит в верхнем регистре (A, B, C, D …);
  16. upper-greek – греческий алфавит в верхнем регистре;
  17. upper-latin – аналог upper-alpha ;
  18. upper-roman – римские числа в верхнем регистре (I, II, III, IV, …);
  19. none – без маркера.

Рассмотрим пример, в котором заменим стандартные маркеры квадратными метками. Далее HTML код.

Списки — Основы верстки контента

Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:

  • Маркированные;
  • Нумерованные;
  • Списки определений.

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

Помимо этого все списки имеют контейнеры — теги, внутри которых располагается информация. Эти контейнеры помогают странице определить, в каком месте начинается список и где он заканчивается.

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

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

Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.

Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег — сокращение от Unordered List. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег — сокращение от List Item. Так браузер отделяет списки друг от друга.

Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега . Внутри каждого из этих тегов помещается один пункт списка.

  Маркированные; Нумерованные; Списки определений.  

Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега . Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:

 Теги в HTML  Параграфы Списки  Маркированные; Нумерованные; Списки определений.    

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

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

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

    — сокращение от Ordered List. Примером такого списка может служить список дел на день.

 Список дел на вторник  Позавтракать Оплатить билет на метро Съездить к бабушке Лечь спать  

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

 Список дел на вторник  Позавтракать Оплатить билет на метро Съездить к бабушке  Купить цветы Купить конфеты   Лечь спать  

Списки определений

С точки зрения HTML списки определений являются самыми сложными для верстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.

В качестве контейнера для списков определений используется тег от английского Definition List, внутри которого не привычная схема , а система из двух тегов:

  1. — термин. От английского Definition Term;
  2. — определение. От английского Definition Description.

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

  HTML Язык гипертекстовой разметки CSS Каскадные таблицы стилей  

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

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

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

Изменять маркер можно одним из двух способов:

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

В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.

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

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

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

.list-image  list-style-image: url("./good.png"); > 

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

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

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

list-style-image: url(images/book.png); /* Путь к изображению маркера */

Все готово. Осталось только напомнить, что CSS код вставляется в блоге в разделе Шаблон – Настроить – Дополнительные – Добавить С SS .

От себя добавлю, что код , который вы добавляете, лучше всего комментировать текстом (что это и для чего добавлено). Для добавления комментария в CSS используйте /*—Здесь комментарий—*/ ,а в HTML — ->

Сейчас рассмотрим случай, когда вам нужно изменить только один список, а не все списки в блоге.
Для этого, нам нужно присвоить списку какой либо класс. Например, вот так:
А уже в CSS написать :
list-style-image: url(https://sites.google.com/site/youmorestop/home/arrow_1.png);
.news a:hover< Если перевести все это на нормальный язык, то получится приблизительно так:

маркером перед всеми тегами li , которые расположены внутри класса news , будет картинка, которая находится по этому адресу: https :// sites . google . com / site / youmorestop / home / arrow _1. png
При наведении курсора (a:hover) на ссылку «а», которая находится внутри класса news , цвет ссылки меняется на красный.

Результат можете посмотреть в блоге «Трейдер», раздел «Новости» .Я сделал, таким образом, там страницу.

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

Бывают случаи, когда в списке нужен:
Нужен квадратный маркер:
list style type : square ;
Если нам не нужен вообще маркер , то ставим:
list-style-type: none;
Если хотим символ вместо маркера, то например так:
list-style-type: none; /* Убираем маркеры у списка */
content: «ƥ «; /* Добавляем в качестве маркера символ */

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

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

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