• Главная
  •  > 
  • Интернет
  •  > 
  • List style type css цвет. Добавление маркеров или нумерации к тексту

List style type css цвет. Добавление маркеров или нумерации к тексту

Задача

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

Решение

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

Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.

По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится - цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).

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

  1. Скрываем оригинальные маркеры списка с помощью свойства list-style-type
  2. Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Это позволит вставить любой текст или символ перед элементом li .
  3. Внешним видом маркера можно управлять через стили CSS, изменяя цвет, шрифт, фон и другое. Я использовал жирное начертание шрифта Монтсеррат.
li { list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ } li:before { font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: " "; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ }

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

article li { list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ } article li:before { font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: " "; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ }

Изменить цвет маркеров в HTML-списке без использования диапазона (6)

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

ul { list-style-type: none; } li { position: relative; } li:before { content: ""; display: block; position: absolute; width: 5px; /* adjust to suit your needs */ height: 5px; /* adjust to suit your needs */ border-radius: 50%; left: -15px; /* adjust to suit your needs */ top: 0.5em; background: #f00; /* adjust to suit your needs */ }

  • first
  • second
  • third

  • width и height должны иметь равные значения, чтобы удерживать указатели округлыми
  • вы можете установить border-radius равным нулю, если вы хотите иметь square пули

Для более стилей пули вы можете использовать другие css-формы https://css-tricks.com/examples/ShapesOfCSS/ (выберите это, для которого не требуются псевдоэлементы, например, треугольники)

Мне было интересно, есть ли способ изменить цвет на пули в списке.

У меня есть список:

  • House
  • Garden

Невозможно вставить что-либо в li, например, «span» и «p». Могу ли я изменить цвет пуль, но не текст каким-то умным способом?

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

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

Li { list-style-image: url(images/yourimage.jpg); }

Без использования изображения

Затем вам нужно отредактировать разметку HTML и включить пролет внутри списка и покрасить ли и диапазон с разными цветами.

Мне тоже очень понравился ответ Марка - мне нужен набор разных цветных UL, и, очевидно, было бы проще просто использовать класс. Вот что я использовал для апельсина, например:

Ul.orange { list-style: none; padding: 0px; } ul.orange > li:before { content: "\25CF "; font-size: 15px; color: #F00; margin-right: 10px; padding: 0px; line-height: 15px; }

Кроме того, я обнаружил, что шестнадцатеричный код, который я использовал для «content:», был другим, чем у Marc"s (этот шестигранный круг казался слишком высоким). Тот, который я использовал, кажется, сидит совершенно посередине. Я также нашел несколько других фигур (квадраты, треугольники, круги и т. Д.)

Мы можем комбинировать list-style-image с svg s, который мы можем встроить в css ! Этот метод предлагает невероятный контроль над «пулями», которые могут стать чем угодно.

Чтобы получить красный круг, просто используйте следующий css:

"); }

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

ul { list-style-image: url("data:image/svg+xml,"); } ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul.bulls-eye { list-style-image: url("data:image/svg+xml,"); } ul.multi-color { list-style-image: url("data:image/svg+xml,"); }

  • Big circles!
    • Big rectangles!
    • b
      • Small circles!
      • c
        • Small rectangles!
  • Bulls
  • eyes.
  • Multi
  • color

Ширина / высота атрибутов

Для некоторых браузеров требуются атрибуты width и height которые должны быть установлены на , или они ничего не отображают. На момент написания этой статьи последние версии Firefox демонстрируют эту проблему. Я установил оба атрибута в примерах.

Кодировки

Построение обоих решений @Marc и @jessica - это решение, которое я использую:

Li { position:relative; } li:before { content:""; display: block; position: absolute; width: 6px; height:6px; border-radius:6px; left: -20px; top: .5em; background-color: #000; }

Я использую em для размеров шрифта, поэтому, если вы установили top значение в.5em оно всегда будет помещено в середину вашей первой строки текста. Я использовал left:-20px потому что это позиция left:-20px по умолчанию в браузерах: parent padding/2

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

li { color: blue; } li::first-line { color: black; }

  • House
  • Garden

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

Использование

Внутрь каждого элемента

  • вкладываем , а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы

  • текст

    • создаем конструкцию

  • текст

    • При этом цвет маркеров определяется стилевым свойством color для селектора li , а цвет текста - для селектора span (пример 1).

    Пример 1. Использование вложенных тегов

    Цвет текста и маркеров в списке

    • Скрипка
    • Гитара
    • Волынка
    • Шарманка
    • Челеста

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

    Рис. 1. Маркеры, отличающиеся по цвету от основного текста

    Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять .

    Использование::before

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

  • . Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2.

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

    Цвет маркеров в списке

    • Север
    • Юг
    • Запад
    • Восток

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

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

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

    Оформление списков с помощью CSS-стилей

    1. Тип маркера списка list-style-type

    Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.

    list-style-type
    Значения:
    disc Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
    armenian Традиционная армянская нумерация.
    circle В качестве маркера выступает незакрашенный кружок.
    cjk-ideographic Идеографическая нумерация.
    decimal 1, 2, 3, 4, 5, …
    decimal-leading-zero 01, 02, 03, 04, 05, …
    georgian Традиционная грузинская нумерация.
    hebrew Традиционная еврейская нумерация.
    hiragana Японская нумерация: a, i, u, e, o, …
    hiragana-iroha Японская нумерация: i, ro, ha, ni, ho, …
    katakana Японская нумерация: A, I, U, E, O, …
    katakana-iroha Японская нумерация: I, RO, HA, NI, HO, …
    lower-alpha a, b, c, d, e, …
    lower-greek Строчные символы греческого алфавита.
    lower-latin a, b, c, d, e, …
    lower-roman i, ii, iii, iv, v, …
    none Маркер отсутствует.
    square В качестве маркера выступает закрашенный или незакрашенный квадрат.
    upper-alpha A, B, C, D, E, …
    upper-latin A, B, C, D, E, …
    upper-roman I, II, III, IV, V, …
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента.

    Синтаксис

    Ul {list-style-type: none;} ul {list-style-type: square;} ol {list-style-type: none;} ol {list-style-type: lower-alpha;} Рис. 1. Пример оформления маркированного и нумерованного списков

    2. Изображения для элементов списка list-style-image

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

    Синтаксис

    Ul {list-style-image: url("images/romb.png");} ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
    Рис. 2. Оформление маркированного списка с помощью изображения
    Рис. 3. Оформление маркированного списка с помощью градиента

    3. Местоположение маркера списка list-style-position

    Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.