Содержание

Свойство list-style | CSS справочник

CSS свойства

Определение и применение

CSS свойство list-style устанавливает все свойства списка в одном объявлении.

Свойства, которые могут быть заданы:

  • list-style-type (тип маркера).»none | disc (по умолчанию) | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | square | upper-alpha | upper-latin | upper-roman | initial | inherit»
  • list-style-position (расположение маркера). «inside | outside (по умолчанию) | initial | inherit»
  • list-style-image (изображение маркера). «none (по умолчанию) | url | initial | inherit»

Если одно из значений свойства отсутствует, то значение этого свойства будет установлено по умолчанию автоматически.

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

CSS синтаксис:

list-style:"list-style-type list-style-position list-style-image | initial | inherit";

JavaScript синтаксис:

object.style.listStyle = "katakana inside"

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

ЗначениеОписание
list-style-typeУказывает тип маркера элемента списка. Значение по умолчанию — disc.
list-style-positionОпределяет расположение маркера относительно элемента списка (внутри элемента списка вместе с содержимым, либо за границей элемента списка). Значение по умолчанию — outside.
list-style-imageПозволяет задать изображение в качестве маркера элемента списка. Значение по умолчанию — none.
initialУстанавливает свойство в значение по умолчанию.
inherit		Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Пример CSS свойства list-style.</title>
<style> 
.test {
list-style : square outside; /* указываем, что маркер в форме квадрата располагается слева от текста за границей элемента списка */
}
.test2 {
list-style : circle inside; /* указываем, что маркер в форме круга располагается слева от текста внутри элемента вместе с содержимым */
}
</style>
</head>
	<body>
		<ul class = "test">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
		<ul class = "test2">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
	</body>
</html>
Пример использования CSS свойства list-style (все свойства маркера в одном объявлении). CSS свойства

Свойство list-style-type — стили для маркеров списка

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

Синтаксис

селектор { list-style-type: значение; }

Значения для ul

ЗначениеОписание
circleСоздает маркеры в виде кружков.
discСоздает маркеры в виде закрашенных кружков.
squareСоздает маркеры в виде квадратиков.
noneУбирает маркеры.

Значение по умолчанию: disc.

Значения для ol

ЗначениеОписание
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Убирает маркеры.

Значение по умолчанию: decimal.

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: disc; }

:

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>

ul { list-style-type: circle; }

:

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: square; }

:

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>

ul { list-style-type: none; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: decimal; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: armenian; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: decimal-leading-zero; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: georgian; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: lower-alpha; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: lower-greek; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: lower-latin; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: lower-roman; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: upper-alpha; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: upper-roman; }

:

Пример

Данный пример показывает, что свойство color влияет не только на цвет текста, но и на цвет маркеров:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: disc; color: red; }

:

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

  • свойство list-style-image,
    которое задает маркеры в виде заданных картинок
  • свойство list-style-position,
    которое задает позицию маркеров
  • свойство list-style-style,
    которое является сокращением для маркеров
  • свойство list-style-type,
    которое задает тип маркеров списка

list-style | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюНет
НаследуетсяДа
ПрименяетсяК тегам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/generate.html#propdef-list-style

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для подробного ознакомления смотрите информацию о каждом свойстве list-style-type, list-style-position и list-style-image отдельно.

Синтаксис

list-style: list-style-type || list-style-position || list-style-image | inherit

Значения

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

inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>list-style</title>
  <style>
   ul {
    list-style: square outside; /* Квадратные маркеры */
                               /* Маркеры размещаются за 
                                  пределами текстового блока */
   }
  </style>
 </head> 
 <body> 
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>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.</li>
  </ul>
 </body>
</html>

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

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

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

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

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

list-style | CSS | WebReference

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

Краткая информация

Значение по умолчаниюНет
НаследуетсяДа
ПрименяетсяК элементам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item
АнимируетсяНет

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>list-style</title> <style> ul { list-style: square outside; /* Квадратные маркеры */ /* Маркеры размещаются за пределами текстового блока */ } </style> </head> <body> <ul> <li>Многомерный полином</li> <li>Нормальный абсолютно сходящийся ряд</li> <li>Интеграл от функции</li> <li>Коллинеарный экстремум функции</li> </ul> </body> </html>

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

Применение свойства list-style

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

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

Объект.style.listStyle

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.08.2017

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

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


Пример

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

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {тип-стиля-списка: верхний-римский;}
ol.d {тип-стиля-списка: нижний-альфа;}

Попробуй сам »

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

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

Тип list-style-type определяет тип маркера элемента списка в списке.

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

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

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

Объект
тип списка 1,0 4.0 1,0 1,0 3,5

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

Синтаксис CSS

Стоимость недвижимости

..
Значение Описание Сыграй
диск Значение по умолчанию.Маркер представляет собой закрашенный кружок Играй »
армянский Маркер традиционный армянский номер Играй »
круг Маркер круг Играй »
cjk-ideographic Маркер простой идеографический номер Играй »
десятичное Маркер номер Играй »
десятичный ведущий ноль Маркер — это число с ведущими нулями (01, 02, 03 и т. Д.).) Играй »
грузинский Маркер традиционный грузинский с номером Играй »
еврейский Маркер — традиционная ивритская нумерация Играй »
хирагана Маркер — традиционная хирагана с номером Играй »
хирагана-ироха Маркер — традиционный хирагана ироха с номером Играй »
катакана Маркер — традиционный катакана с номером Играй »
катакана-ироха Маркер традиционный катакана ироха номер Играй »
нижний альфа Маркер с нижним альфа-каналом (a, b, c, d, e и т. Д.) Играй »
нижнегреческий Маркер нижнегреческий Играй »
строчная латынь Маркер нижнелатинский (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 {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style- type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: десятичный-начальный-ноль;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {тип-стиля-списка: katakana;}
ol.m {тип-стиля-списка: katakana-iroha;}
ol.n {тип-стиля-списка: нижний-альфа;}
ol.o {тип-стиля-списка: нижний-греческий;}
ol.p {тип-стиля-списка: нижний-латинский;}
ol.q {тип-стиля-списка: нижний-римский;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-greek;}
ол.t {list-style-type: upper-latin;}
ol.u {тип-стиля-списка: верхний-римский;}
ol.v {тип-стиля-списка: нет;}
ol.w {тип-стиля-списка: наследование;}

Попробуй сам »

Пример

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

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

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

      li {
      padding-left: 16px;
      }

      li: до {
      content: «•»; / * Вставляем контент, похожий на маркеры * /
      отступ справа: 8 пикселей;
      цвет: синий; / * Или желаемый цвет * /
      }

      Попробуй сам »

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

      Учебник

      CSS: Список CSS

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

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


      .

      list-style-type — веб-технология для разработчиков

      list-style-type Chrome Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 4 Опера Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
      вдалеке Хром Нет поддержки 6-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 3–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Нет поддержки 1,0 — 5,0
      амарик хром Нет поддержки 6-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 3–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Нет поддержки 1,0 — 5,0
      amaric-abegede Хром Нет поддержки 6-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 3–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Нет поддержки 1,0 — 5,0
      арабский индикатор Хром Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33
      Полная поддержка 33
      Полная поддержка 1
      С префиксом Реализуется с префиксом поставщика: -moz-
      		 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33
      Полная поддержка 33
      Полная поддержка 4
      С префиксом Реализовано с префиксом поставщика: -moz-
      		 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
      армянский Хром Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 8 Опера Полная поддержка 6 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
      звездочки Хром Нет поддержки 13-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5.1 WebView Android Нет поддержки 4,4 — 45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 5 Samsung Интернет Android Нет поддержки 1.0 — 5,0
      бенгальский Хром Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33
      Полная поддержка 33
      Полная поддержка 1
      С префиксом Реализуется с префиксом поставщика: -moz-
      		 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33
      Полная поддержка 33
      Полная поддержка 4
      С префиксом Реализовано с префиксом поставщика: -moz-
      		 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
      двоичный Хром Нет поддержки 13-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 4.4–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Нет поддержки 1,0 — 5,0
      камбоджийский Хром Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33 Опера Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
      круг Хром Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 4 Опера Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
      cjk-decimal Chrome Нет поддержки № Край Нет поддержки № Firefox Полная поддержка 28 IE Нет поддержки № Опера Нет поддержки № Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № Firefox Android Полная поддержка 28 Опера Android Нет поддержки № Safari iOS Нет поддержки № Samsung Internet Android Нет поддержки №
      cjk-earthly-branch Chrome Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33
      Полная поддержка 33
      Полная поддержка 1
      С префиксом Реализуется с префиксом поставщика: -moz-
      		 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33
      Полная поддержка 33
      Полная поддержка 4
      С префиксом Реализовано с префиксом поставщика: -moz-
      		 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
      cjk-небесный ствол Хром Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33
      Полная поддержка 33
      Полная поддержка 1
      С префиксом Реализуется с префиксом поставщика: -moz-
      		 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33
      Полная поддержка 33
      Полная поддержка 4
      С префиксом Реализовано с префиксом поставщика: -moz-
      		 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
      cjk-ideographic Хром Полная поддержка 1 Край Полная поддержка 79 Firefox Полная поддержка 1 IE Нет поддержки № Опера Полная поддержка 15
      Полная поддержка 15
      Частичная поддержка 7
      Примечания До версии 15 отображаются только десятичные числа.
      		 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 14
      Полная поддержка 14
      Частичная поддержка 10.1
      Примечания До версии 15 отображаются только десятичные числа.
      		 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
      десятичное Хром Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 4 Опера Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
      десятичный начальный ноль Chrome Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 8 Опера Полная поддержка 8 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
      деванагари Хром Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33
      Полная поддержка 33
      Полная поддержка 1
      С префиксом Реализуется с префиксом поставщика: -moz-
      		 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33
      Полная поддержка 33
      Полная поддержка 4
      С префиксом Реализовано с префиксом поставщика: -moz-
      		 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
      диск хром Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 4 Опера Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
      раскрытие закрыто Хром Нет поддержки № Край Нет поддержки № Firefox Полная поддержка 33 IE Нет поддержки № Опера Нет поддержки № Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № Firefox Android Полная поддержка 33 Опера Android Нет поддержки № Safari iOS Нет поддержки № Samsung Internet Android Нет поддержки №
      раскрытие открыто Хром Нет поддержки № Край Нет поддержки № Firefox Полная поддержка 33 IE Нет поддержки № Опера Нет поддержки № Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № Firefox Android Полная поддержка 33 Опера Android Нет поддержки № Safari iOS Нет поддержки № Samsung Internet Android Нет поддержки Нет
      этиопский Хром Нет поддержки 6-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 3–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Нет поддержки 1,0 — 5,0
      ethiopic-abegede Хром Нет поддержки 6-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 3–45 Chrome Android Нет поддержки 18
      .

      Списки стилей CSS

      заказанных списков:

      1. Кофе
      2. Чай
      3. Кока-Кола
      1. Кофе
      2. Чай
      3. Кока-Кола

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

      В HTML есть два основных типа списков:

      • неупорядоченных списков (
          ) — элементы списка отмечены маркерами
        • упорядоченных списков (
            ) — элементы списка отмечены цифрами или буквами

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

        • Установка разных маркеров элементов списка для упорядоченных списков
        • Установить разные маркеры элементов списка для неупорядоченных списков
        • Установить изображение в качестве маркера элемента списка
        • Добавление цвета фона в списки и элементы списков

        Маркеры различных пунктов списка

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

        В следующем примере показаны некоторые из доступных маркеров элементов списка:

        Пример

        ul.a {
        список-стиль-тип: круг;
        }

        ul.b {
        list-style-type: квадрат;
        }

        ol.c {
        list-style-type: верхний римский алфавит;
        }

        ol.d {
        list-style-type: lower-alpha;
        }

        Попробуй сам »

        Примечание. Некоторые значения предназначены для неупорядоченных списков, а некоторые — для упорядоченных списков.

        Изображение как маркер элемента списка

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

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

        Свойство list-style-position определяет положение маркеров элемента списка. (отверстия от пуль).

        «позиция в стиле списка: снаружи;» означает, что маркеры будут снаружи элемент списка. Начало каждой строки элемента списка будет выровнено по вертикали. По умолчанию:

        • Кофе — Сваренный напиток из жареных кофейных зерен …
        • Чай
        • Кока-кола

        «позиция в стиле списка: внутри;» означает, что точки будут внутри элемент списка. Поскольку он является частью элемента списка, он будет частью текста и нажмите текст в начале:

        • Кофе — Сваренный напиток из жареных кофейных зерен…
        • Чай
        • Кока-кола

        Пример

        ul.a {
        список-стиль-позиция: снаружи;
        }

        ul.b {
        list-style-position: внутри;
        }

        Попробуй сам »

        Удалить настройки по умолчанию

        Свойство list-style-type: none также может быть используется для удаления маркеров / пуль. Обратите внимание, что список также имеет поле по умолчанию и обивка. Чтобы удалить это, добавьте margin: 0 и padding: 0 к

          или
            :

            Список — Сокращенное свойство

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

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

            • list-style-type (если задано изображение-list-style, значение этого свойства будет отображаться, если изображение по каким-то причинам невозможно отобразить)
            • list-style-position (указывает, должны ли маркеры элементов списка появляться внутри или вне потока контента)
            • list-style-image (указывает изображение как элемент списка маркер)

            Если одно из указанных выше значений свойств отсутствует, значение по умолчанию для отсутствующее свойство будет вставлено, если таковое имеется.

            Список стилей с цветами

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

            Все, что добавлено к тегам

              или
                , влияет на весь список, в то время как свойства, добавленные в тег
              • , повлияют на отдельные элементы списка:

                Пример

                ол {
                фон: # ff9999;
                отступ: 20 пикселей;
                }

                ul {
                фон: # 3399ff;
                отступ: 20 пикселей;
                }

                ol li {
                фон: # ffe5e5;
                отступ: 5 пикселей;
                маржа слева: 35 пикселей;
                }

                ul li {
                фон: # cce5ff;
                маржа: 5 пикселей;
                }

                Результат:

                Попробуй сам »

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

                Индивидуальный список с красной рамкой слева
                В этом примере показано, как создать список с красной левой границей.

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

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

                Проверьте себя упражнениями!

                Все свойства списка CSS


                .Тип стиля списка

                — Tailwind CSS

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

                Для создания маркированных или числовых списков используйте утилиты list-disk и list-decimal .

                . Список-диск

                • Lorem ipsum dolor sit amet, conctetur adipisicing elit
                • Assumenda, quia temporibus eveniet a libero incidunt Suscipit
                • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

                .список-десятичный

                1. Lorem ipsum dolor sit amet, conctetur adipisicing elit
                2. Assumenda, quia temporibus eveniet a libero incidunt Suscipit
                3. Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

                .list-none (по умолчанию)

                • Lorem ipsum dolor sit amet, conctetur adipisicing elit
                • Assumenda, quia temporibus eveniet a libero incidunt Suscipit
                • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
                  
                  
  
                •  Lorem ipsum dolor sit amet, conctetur adipisicing elit 
                  • 
  ...

                


                  
  
                1.  Lorem ipsum dolor sit amet, conctetur adipisicing elit 
                  2. 
  ...

                


                  
  
                •  Lorem ipsum dolor sit amet, conctetur adipisicing elit 
                  • 
  ...

                Адаптивный

                Чтобы управлять типом стиля списка элемента списка в определенной точке останова, добавьте префикс {screen}: к любой существующей утилите списка. Например, используйте .md: list-disc , чтобы применить утилиту .list-disc только при средних размерах экрана и выше.

                Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

                  
                  
  
                •  Lorem ipsum dolor sit amet, conctetur adipisicing elit 
                  • 
  
                •  Assumenda, quia temporibus eveniet a libero incidunt suscipit 
                  • 
  
                •  Quidem, ipsam illum quis sed voluptatum quae eum fugit earum 
                  •
                • Lorem ipsum dolor sit amet, conctetur adipisicing elit
                • Assumenda, quia temporibus eveniet a libero incidunt suscipit
                • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
                  • 9000 9000 9000 9000

                  предоставляет три утилиты для наиболее распространенных типов стилей списков.Вы можете изменять, добавлять или удалять их, редактируя раздел theme.listStyleType в вашей конфигурации Tailwind.

                    // tailwind.config.js
  module.exports = {
    theme: {
      listStyleType: {
        нет: "нет",
- диск: 'диск',
- decimal: 'десятичный',
+ квадрат: 'квадрат',
+ roman: 'верхний римский',
      }
    }
  }

                  Варианты ответа и псевдокласса

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

                  Вы можете контролировать, какие варианты создаются для утилит типа стиля списка, изменяя свойство listStyleType в разделе вариантов файла tailwind.config.js .

                  Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

                    // tailwind.config.js
  module.exports = {
    варианты: {
      // ...
- listStyleType: ['отзывчивый'],
+ listStyleType: ['отзывчивый', 'наведение', 'фокус'],
    }
  }

                  Отключение

                  Если вы не планируете использовать утилиты типа списка стилей в своем проекте, вы можете полностью отключить их, установив для свойства listStyleType значение false в разделе corePlugins вашего файла конфигурации. :

                    // попутный ветер.config.js
  module.exports = {
    corePlugins: {
      // ...
+ listStyleType: ложь,
    }
  }
                  .

                  No related posts.