Css ol style list: CSS list-style-type property

Leave a Comment / Css / By /

Свойство стиля списка CSS

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Установите несколько различных стилей списка:

ul.a {тип стиля списка: круг;}
ul.b {тип стиля списка: квадрат;}
ol.c {список- style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

list-style-type указывает тип маркера элемента списка в списке.

Показать демо ❯

Значение по умолчанию: диск
Унаследовано: да
Анимация: нет. Читать о анимированном
Версия: CSS1
Синтаксис JavaScript: объект .style.listStyleType=»квадрат» Попытайся

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Собственность
тип-список 1,0 4,0 1,0 1,0 3,5

Примечание. Edge 18 и Opera 12 и более ранние версии не поддерживают значения: cjk-идеографические, иврит, хирагана, хирагана-ироха, катакана и катакана-ироха.

Синтаксис CSS

тип-стиля-списка: значение ;

Значения свойств

....
Значение Описание Демо
диск Значение по умолчанию. Маркер закрашенный круг Демо ❯
армянский Маркер имеет традиционную армянскую нумерацию Демо ❯
круг Маркер круг Демо ❯
cjk-ideographic Маркер простой идеографический номер Демо ❯
десятичный Маркер номер Демонстрация ❯
десятичный-начальный-ноль Маркер представляет собой число с ведущими нулями (01, 02, 03 и т.
д.)		 Демо ❯
грузинский Маркер с традиционной грузинской нумерацией Демо ❯
иврит Маркер имеет традиционную еврейскую нумерацию Демо ❯
хирагана Маркер с традиционной нумерацией хираганы Демо ❯
хирагана-ироха Традиционный маркер Hiragana iroha с номером Демо ❯
катакана Маркер традиционная катакана с номером Демонстрация ❯
катакана-ироха Маркер традиционная катакана ироха с номером Демонстрация ❯
нижний альфа-канал Маркер низший альфа (а, б, в, г, д и т.д.) Демо ❯
нижний греческий Маркер нижнегреческий Демо ❯
нижняя латиница Маркер нижний латинский (a,b,c,d,e и т. д.) Демо ❯
нижний латинский Маркер строчный (i, ii, iii, iv, v и т.д.) Демо ❯
нет Маркер не отображается Демо ❯
квадрат Маркер квадратный Демо ❯
верхний альфа-канал Маркер с верхним альфа-каналом (A, B, C, D, E и т. д.) Демо ❯
верхний греческий Маркер верхнегреческий Демо ❯
верхняя латиница Маркер верхне-латинский (A, B, C, D, E и т.д.) Демонстрация ❯
заглавная буква Маркер заглавный (I, II, III, IV, V и др.) Демо ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

Другие примеры

Пример

Этот пример демонстрирует все различные маркеры элементов списка:

ul.a {тип-стиля-списка: круг;}
ul.b {тип-стиля-списка: диск;}
ul.c {тип-стиля-списка: квадрат;}

ol.d {стиль-списка -type: армянский;}
ol.e {тип-стиля-списка: cjk-идеографический;}
ol.f {тип-стиля-списка: десятичный;}
ol.g {тип-стиля-списка: десятичный-начальный -zero;}
ol.h {тип стиля списка: грузинский;}

ol.i {тип-стиля-списка: иврит;}
ol.j {тип-стиля-списка: хирагана;}
ol.k {тип-стиля-списка: хирагана-ироха;}
ol.l {список -тип-стиля: катакана;}
ol.m {тип-стиля-списка: катакана-ироха;}
ol.n {тип-стиля-списка: нижняя альфа;}
ol.o {тип-стиля-списка : нижний греческий;}
ol.p {тип стиля списка: нижний латинский;}
ol.q {тип стиля списка: нижний римский;}
ol. r {тип стиля списка: верхний -альфа;}
ol.s {тип-стиля-списка: верхний-греческий;}
ol.t {тип-стиля-списка: верхний-латинский;}
ol.u {тип-стиля-списка: верхний роман;}
ol.v {тип-стиля-списка: нет;}
ol.w {тип-стиля-списка: наследовать;}

Попробуйте сами »

Пример

Как добавить цвета маркеров для

    или
      , удалив маркеры по умолчанию и добавив объект HTML, который выглядит как маркеры (•):

      ul {
        стиль списка: нет; /* Удалить маркеры списка */
        padding: 0;
        поля: 0;
      }

      li {
        padding-left: 16px;
      }

      li::before {
        content: «•»; /* Вставьте содержимое, похожее на маркеры */
        padding-right: 8px;
        цвет: синий; /* Или цвет, который вы предпочитаете */
      }

      Попробуйте сами »

      Связанные страницы

      Учебник CSS: CSS List

      Ссылка CSS: свойство list-style

      Ссылка HTML DOM: свойство listStyleType

      Предыдущая ❮ Полное руководство по CSS Далее ❯


      Как оформить теги «ol» с помощью CSS

      Введение

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

      Поскольку семантика HTML важна, я использую проверенный тег

        :

        1. Stop
        2. Drop
        3. Roll

        Проблема в том, что «пули» (числа префиксов) находятся в CSS — мертвая зона селектора. Невозможно стилизовать их независимо!

        Я не из тех, кто принимает апатичные пули. Поэтому я немного покопался и нашел отличное решение 🎉.

        У CSS есть довольно хитрый трюк, чтобы справиться с этой ситуацией. Имеет встроенный счетчик.

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

        Давайте рассмотрим это шаг за шагом:

        1. counter-increment — это свойство CSS, которое будет увеличивать определенную переменную «счетчик» всякий раз, когда встречается новый элемент. Мы ставим его на каждый элемент заказанного списка. Я назвал свою переменную «маффины», потому что мне нравятся маффины.
        2. Перед каждым элементом упорядоченного списка я отображаю текущее значение счетчика. counter() можно рассматривать как функцию CSS, которая возвращает значение для определенного счетчика. В данном случае кексов .
        3. Я удаляю ненастраиваемые маркеры по умолчанию с помощью list-style: none и указываю сброс счетчика. Это гарантирует, что если у меня есть несколько элементов
            на странице, счетчик будет сбрасываться для каждого из них.
          :до??

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

          В этом примере мы добавляем текущее количество и немного форматируем (точка и пробел), чтобы имитировать значение по умолчанию ol . Смело экспериментируйте с этим!

          С помощью этого CSS мы эффективно воссоздали значение по умолчанию

            . Разница в том, что теперь у нас есть селектор CSS, ol li:before , который мы можем использовать для применения пользовательских стилей.

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

            Link to this heading

            How to bake a cake

            1. I think you do something with dry ingredients

            2. The mixers play a role here

            3. Combine everything while crossing fingers

            4. Transfer to печь

            5. Потыкать зубочисткой для удовольствия, а потом подавать

            Это не день и ночь, но я очень доволен общим эффектом!

            Счетчики CSS кажутся функцией следующего поколения, но на самом деле их было около навсегда . Они поддерживаются в Internet Explorer 8!!

            Используйте это свойство без вины ✨

            Рабочая группа CSS согласна — они написали проект нового псевдоэлемента ::marker, который позволит вам применять стили непосредственно к маркерам списка.

            К сожалению, это доступно только в Firefox и Safari.

            Кроме того: есть еще одна хитрость, у счетчиков CSS есть свои рукава…

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

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

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