Тег элемент списка цвет другой. Стилизация номеров строк (цифр) в упорядоченных списках ol

Задача

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

Решение

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

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

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

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

CSS стили списка маркера.

list-style-type

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;

Значение :

disk – маркированный список в виде закрашенного кружка

circle – маркированный список в виде не закрашенного кружка

square – маркированный список в виде закрашенного квадратика

decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)

none – без маркера.

Пример :

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

  • Верь в лучшее, ожидай худшее.
  • Жизнь - это болезнь, со смертельным исходом.
  • Никогда не говори никогда.

Результат :

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

list-style-type: none;

Пример :

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

  • Верь в лучшее, ожидай худшее.
  • Никогда не говори никогда.

Результат :

Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .

list-style-image

list-style-image: url(картинка.png);

Пример :

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

  • Верь в лучшее, ожидай худшее.
  • Жизнь - это болезнь со смертельным исходом.
  • Никогда не говори никогда.

Результат :

Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

Пример :

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

  • Верь в лучшее, ожидай худшее.
  • Жизнь - это болезнь со смертельным исходом.
  • Никогда не говори никогда.

Результат :

Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
Это выглядит вот так:

  • текст

    • Пример :

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

    • Верь в лучшее, ожидай худшее.
    • Жизнь - это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат :

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

    Пример :

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

    • Верь в лучшее, ожидай худшее.Пункт 1
    • Жизнь - это болезнь со смертельным исходом.Пункт 2
    • Никогда не говори никогда.Пункт 3
    • Это все что я знал. Пункт 4

    Результат :

    Вот и подошла к завершению тема .

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

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

    Ul { list-style-image: url("data:image/svg+xml,"); }

    Но это только начало. Это позволяет нам делать любую сумасшедшую вещь, которую мы хотим с этими пулями. круги или прямоугольники просты, но все, что вы можете нарисовать с помощью 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 демонстрируют эту проблему. Я установил оба атрибута в примерах.

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

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

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

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

  • текст

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

  • текст

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

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

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

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

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

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

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

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

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

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

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

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

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

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