Ul list style – list-style-type — убирает или изменяет маркеры списка — Вебджем.рф

Содержание

list-style | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
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 1	CSS 2	CSS 2.1	CSS 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 справочник

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 | 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.

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

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

Объект.style.listStyle

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

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

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

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

Браузеры

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

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

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

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

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

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

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

list-style-type — убирает или изменяет маркеры списка
Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+

3.5+ 1.0+
Описание
CSS свойство list-style-type указывает вид маркера для элементов списка. Оно позволяет изменить или убрать маркеры HTML списка.
Для маркированных списков в CSS есть всего три вида маркеров: circle, disk и squred. Остальные значения свойства list-style-type предназначены для нумерованных списков.
Чтобы убрать маркеры у списка, то есть получить список без маркеров, надо в качестве значения для свойства list-style-type указать none. Для изменения маркеров у списка, надо просто выбрать любое значение, отличное от значения по умолчанию:
/* удаляем маркеры у маркированного списка */ ul { list-style-type: none; } /* изменяем числа в нумерованном списке на маленькие латинские буквы */ ol { list-style-type: lower-latin; }
Если ни один из представленных видов маркеров вам не подходит, то вы можете воспользоваться свойством list-style-image и заменить стандартный вид маркера любой картинкой.

Примечание: цвет стандартного маркера, устанавливаемого с помощью свойства list-style-type, будет таким же как и цвет, установленный для текста в элементе. Цвет текста устанавливается и изменяется с помощью свойства color.
Значение по умолчанию: «disc» для <ul> и «decimal» для <ol>
Применяется: к спискам (<ul> и <ol>) и пунктам списка (<li>)
Анимируется: нет
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.listStyleType=»square»
Синтаксис
list-style-type: значение;

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

Значение Описание
armenian Армянские цифры.
circle Круг.
cjk-ideographic Идеографические номера.
decimal Десятичные цифры.
decimal-leading-zero Десятичные цифры, начинающиеся с нуля (01, 02, 03…).
disc Диск.
georgian Грузинские цифры.
hebrew Нумерация Иврита.
hiragana Нумерация Хирагана.
hiragana-iroha Нумерация Хирагана-ироха.
inherit Указывает, что значение наследуется от родительского элемента.
katakana Нумерация Катакана.
katakana-iroha Нумерация Катакана-ироха.
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…).
Пример
Измените значение свойства list-style-type

Посмотрите на результат

Некоторые значения свойства не работают в IE или Opera

ol#myList {
list-style-type: armenian;
}

Ul list style – list-style-type — убирает или изменяет маркеры списка

list-style | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

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

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

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

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

Версия CSS

Наследуется

Анимируемое

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

list-style | CSS | WebReference

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

Обозначения

Значения

Пример

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

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

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

Браузеры

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

list-style-type — убирает или изменяет маркеры списка

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

Описание

Синтаксис

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

Пример

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

Рубрики

Значение по умолчанию:	«disc» для <ul> и «decimal» для <ol>
Применяется:	к спискам (<ul> и <ol>) и пунктам списка (<li>)
Анимируется:	нет
Наследуется:	да
Версия:	CSS1
Синтаксис JavaScript:	object.style.listStyleType=»square»

Значение	Описание
armenian	Армянские цифры.
circle	Круг.
cjk-ideographic	Идеографические номера.
decimal	Десятичные цифры.
decimal-leading-zero	Десятичные цифры, начинающиеся с нуля (01, 02, 03…).
disc	Диск.
georgian	Грузинские цифры.
hebrew	Нумерация Иврита.
hiragana	Нумерация Хирагана.
hiragana-iroha	Нумерация Хирагана-ироха.
inherit	Указывает, что значение наследуется от родительского элемента.
katakana	Нумерация Катакана.
katakana-iroha	Нумерация Катакана-ироха.
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…).