List style none что это
Перейти к содержимому

List style none что это

  • автор:

list-style-type

Изменяет вид маркера для каждого элемента списка. Это свойство используется только в случае, когда значение list-style-image установлено как none . Маркеры различаются для маркированного списка (элемент ) и нумерованного (элемент ).

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

Синтаксис

list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none
Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

Маркированный список

circle Маркер в виде кружка. disc Маркер в виде точки. square Маркер в виде квадрата.

Нумерованный список

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 Отменяет маркеры для списка.

Песочница

armenian decimal decimal-leading-zero georgian lower-alpha lower-greek lower-roman upper-alpha upper-roman none

Пример

  1. Gaius Octavius Thurinus
  2. Tiberius Claudius Nero
  3. Gaius Iulius Caesar Augustus Germanicus
  4. Tiberius Claudius Drusus
  5. Lucius Arruntius Camillus Scribonianus
  6. Nero Claudius Caesar Drusus Germanicus
  7. Lucius Clodius Macer

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

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

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

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

Объект.style.listStyleType

Примечание

    и значения inside свойства list-style-position , числа идущие с 10, начинают накладываться на текст списка.

Браузер Internet Explorer до версии 7 включительно не поддерживает значения armenian , decimal-leading-zero , georgian , lower-greek , lower-latin , upper-latin . Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов ( ul < float: left; >).

Internet Explorer 8 дополнительно понимает значение upper-greek , которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ. ).

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

Спецификация Статус
CSS Counter Styles Level 3 Рабочий проект
CSS Lists and Counters Module Level 3 Рабочий проект
CSS Level 2 (Revision 1) Рекомендация

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

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

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

Браузеры

none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman 4 12 1 7 1 1
lower-latin, upper-latin, lower-greek, armenian, georgian 8 12 1 6 1 1
decimal-leading-zero 8 12 1 8 1 1
none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman 1 1 6 1
lower-latin, upper-latin, lower-greek,armenian, georgian 1 1 6 1
decimal-leading-zero 1 1 8 1

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

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

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

См. также

  • list-style
  • list-style-image
  • list-style-position
  • Создание списков

Свойство list-style-type

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

Синтаксис

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

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

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

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

Значение Описание
armenian Традиционная армянская нумерация.
decimal Арабские числа.
decimal-leading-zero Арабские числа с нулем впереди для цифр меньше десяти.
georgian Традиционная грузинская нумерация.
lower-alpha Строчные латинские буквы.
lower-greek Строчные греческие буквы.
lower-latin Это значение аналогично lower-alpha.
lower-roman Римские числа в нижнем регистре.
upper-alpha Заглавные латинские буквы.
upper-latin Это значение аналогично upper-alpha.
upper-roman Римские числа в верхнем регистре.
none Убирает маркеры.

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

list — style

Шорткат list — style позволяет одновременно задать значение для следующих свойств:

  • list — style — type ;
  • list — style — position ;
  • list — style — image .

Пример

Скопировать ссылку «Пример» Скопировано

Код ниже задаёт всем элементам списка стиль маркера upper — alpha и делает маркер частью содержимого элемента списка.

 li  list-style: upper-alpha inside;> li  list-style: upper-alpha inside; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Значения свойства можно задавать в любом порядке и в любом количестве от 1 до 3.

Установим значение none для изображения и типа маркера:

 ul  list-style: none;> ul  list-style: none; >

Зададим значение disc для типа маркера и inside для позиции:

 ul  list-style: disc inside;> ul  list-style: disc inside; >

Зададим значение decimal для типа, укажем путь до картинки и расположим маркер снаружи пункта списка:

 ul  list-style: decimal url('marker.png') outside;> ul  list-style: decimal url('marker.png') outside; >

Браузер сам найдёт подходящие значения для нужных свойств.

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

Скопировать ссылку «Использование значения none» Скопировано

Использовать значение none в сокращении стоит аккуратно, потому что это значение можно указать как для list — style — image так и для list — style — type .

Например, код ниже установит значение none для list — style — image , а для list — style — type значение disc :

 ul  list-style: none disc;> ul  list-style: none disc; >

А здесь установит значение url ( doka . png ) для list — style — image , а для list — style — type значение none :

 ul  list-style: none url(doka.png);> ul  list-style: none url(doka.png); >

Если установить просто значение none свойству list — style , то значение none применится только к list — style — image и list — style — type , но не к свойству list — style — position , потому что у него нет значения none .

Код ниже устанавливает значение none для свойств list — style — image и list — style — type :

 ul  list-style: none;> ul  list-style: none; >

А такой код не сработает. У свойства list — style — position нет значения none :

 ul  list-style: none disc url(doka.png);> ul  list-style: none disc url(doka.png); >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Как и с любым шорткатом, со свойством list — style нужно обращаться осторожно. Если потребуется переопределить всего одно из заданных значений, то нужно будет переписать и все остальные.

�� Если в рамках шортката не задано значение для какого-то из свойств и в коде ниже оно не прописано, то свойству устанавливается значение по умолчанию.

�� Записанные выше отдельные свойства переопределяются заданным ниже свойством list — style .

list-style-type¶

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

Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка (элемент ) и нумерованного (элемент ).

Демо¶

Списки, счетчики, генерируемый контент

  • counter-increment
  • counter-reset
  • counter-set
  • list-style-image
  • list-style-type
  • list-style-position
  • list-style

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
/* Partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: cjk-ideographic; list-style-type: kannada; /* value */ list-style-type: '-'; /* Identifier matching an @counter-style rule */ list-style-type: custom-counter-style; /* Keyword value */ list-style-type: none; /* Global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset;

Значения¶

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

Маркированный список¶

Маркер в виде кружка.

Маркер в виде точки.

Маркер в виде квадрата.

Нумерованный список¶

Традиционная армянская нумерация.

Арабские числа (1, 2, 3, 4. ).

Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ).

Традиционная грузинская нумерация.

Строчные латинские буквы (a, b, c, d. ).

Строчные греческие буквы (α, β, γ, δ. ).

Это значение аналогично lower-alpha .

Римские числа в нижнем регистре (i, ii, iii, iv, v. ).

Заглавные латинские буквы (A, B, C, D. ).

Это значение аналогично upper-alpha .

Римские числа в верхнем регистре (I, II, III, IV, V. ).

Отменяет маркеры для списка.

list-style-type: disc; /* для ul */ list-style-type: decimal; /* для ol */

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

  • CSS Counter Styles Level 3
  • CSS Lists and Counters Module Level 3
  • CSS Level 2 (Revision 1)

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
 html> head> meta charset="utf-8" /> title>list-style-typetitle> style> ol  list-style-type: upper-roman; > style> head> body> ol> li>Gaius Octavius Thurinusli> li>Tiberius Claudius Neroli> li>Gaius Iulius Caesar Augustus Germanicusli> li>Tiberius Claudius Drususli> li>Lucius Arruntius Camillus Scribonianusli> li>Nero Claudius Caesar Drusus Germanicusli> li>Lucius Clodius Macerli> ol> body> html>
Похожие публикации:
  1. Как загрузиться с флешки на android
  2. Мои отзывы на яндекс картах как посмотреть
  3. Ожидание ответа от как убрать
  4. Параметры папок в windows 10 как зайти

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

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