Css list style: list-style — CSS: Cascading Style Sheets

— это тип данных в CSS, который описывает пользовательский идентификатор, предварительно определенный пользователь таблицы стилей. Это идентификатор, аналогичный значению @counter-style или любого из его предопределенных стилей.

Как назвать значения ?

может включать следующие символы:

1. Любой буквенный символ (от A до Z или от a до z).
2. Любая десятичная цифра (от 0 до 9)
3. Дефис (-).
4. Знак подчеркивания (_).
5. экранированный символ, которому предшествует обратная косая черта ().
6. Символ Unicode (в формате обратной косой черты, за которой следует от одной до шести шестнадцатеричных цифр, представляющих его кодовую точку Unicode).

Правила, которые следует учитывать при именовании :

1. Мы не можем использовать цифру в качестве первого символа, если она не экранирована.
2. Нельзя начинать с дефиса, за которым следует десятичная цифра.
3. Не может начинаться с двух дефисов.
4. чувствителен к регистру.
5. Широкие ключевые слова в CSS недопустимы . Следовательно, мы не можем наследовать, начальные или сбрасывать идентификаторы.
6. Ключевое слово по умолчанию не является допустимым <пользовательский-идентификатор>.
7. Исключенные ключевые слова исключаются из всех перестановок регистра ASCII. Поэтому значения default, Default и DEFAULT не следует использовать.
8. Мы не можем заключить в кавычки. В противном случае он будет интерпретироваться как строка вместо идентификатора.

Ниже приведена реализация для :

Вывод:

2. Диск

Диск является значением свойства по умолчанию. Маркер представляет собой закрашенный круг в этом типе стиля.

Синтаксис:

Пример:

Вывод:

3. Круг

В этом типе стиля маркер представляет собой полый круг.

Синтаксис:

Пример:

Вывод:

4.

В этом типе стиля маркер представляет собой заполненный квадрат.

Синтаксис:

Пример:

Вывод:

5. Десятичное число

В этом типе стиля маркер представляет собой десятичное число, начинающееся с 1.

Синтаксис:

Пример:

Вывод:

6. строчная римская

В этом типе стиля маркер представляет собой строчную римскую цифру.

Синтаксис:

Пример:

Вывод:

7. верхний латинский 9 0008

В этом типе стиля маркер представляет собой прописную римскую цифру.

Синтаксис:

Пример:

Вывод:

8.lower-greek

В этом типе стиля маркером является строчная классическая греческая буква.

Синтаксис:

Пример:

Вывод:

9. нижний латинский

В этом типе стиля маркер представляет собой строчную букву ASCII (a,b,c,…z)(a, b, c, … z)(a,b,c,… я).

Синтаксис:

Пример:

Вывод:

10. upper-latin

В этом типе стиля маркер представляет собой прописную букву ASCII (A,B,C,…Z)(A, B, C, … Z)(A,B,C,… З).

Синтаксис:

Пример:

Вывод:

нижний альфа-канал и верхний альфа-канал аналогичны нижнему латинскому и верхнему латинскому алфавиту в Internet Explorer 7.

Теперь давайте рассмотрим некоторые другие типы стилей списков CSS в табличном виде:

Значение	Описание
нет	Маркер не отображается
decimal-lead-zero	десятичные числа с ведущими нулями
arabic-indic	arabic Индийские числа
армянские	традиционные армянские цифры
бенгальские	бенгальские нумерации
камбоджийские/кхмерские	камбоджийские/кхмерские числа
деванагари	числа деванагари
эфиопско-цифровые	эфиопские числа
грузинский	традиционный грузинский номер
гуджрати	нумерация гуджрати
гурмухи	нумерация гурмухи
иврит	традиционные еврейские цифры
хирагана	словарь для заказа чисел хираганы
japanese-formal	Японские формальные числа, используемые в юридических документах.
japanese-informal	неофициальные японские номера
каннада	нумерация каннада
катакана 9 0404	Словарь-порядок букв катакана
корейский-хангыль-формальный	нумерация корейский хангыль
корейская-ханджа-неофициальная	корейская неофициальная нумерация
лаосская	латинская нумерация
нижнеармянская	строчная армянская нумерация
малаялам	малаялам номера
монгольский	монгольский нумерация
мьянма	Мьянма (бирманская) нумерация
ория	ория нумерация
персидская	персидская нумерация
упрощенный китайский-формальный	упрощенный китайский официальный номер
простой китайский-неформальный	упрощенный китайский неофициальный номер
тамил	тамильская нумерация
телугу	нумерация телугу
тайский	тайский номер
тибетский	тибетский нумерация
традиционный китайский	традиционный подбородок эта формальная нумерация
традиционно-китайская-неформальная	традиционная китайская формальная нумерация
заглавная армянская	традиционная заглавная армянская нумерация
маркер, указывающий на открытый виджет раскрытия
раскрытие -closed	маркер, указывающий на закрытый виджет раскрытия

Примеры

Теперь давайте обсудим «тип стиля списка» Свойство CSS с помощью примеров и узнайте, как использовать это свойство в CSS.

Настройка маркеров элементов списка

В вышеприведенном примере «тип стиля списка» CSS мы решили отображать римские цифры в верхнем регистре перед каждым элементом упорядоченного списка.

В то время как для ненумерованного списка мы удалили маркер диска по умолчанию перед каждым элементом списка. Элементы списка по-прежнему будут иметь отступ (если это не будет переопределено с помощью CSS), но перед каждым элементом списка ничего не будет отображаться.

Вывод:

Все типы стилей списка

В этом примере мы реализуем все типы стилей списка в CSS и выбираем нужный с помощью переключателей.

Выход:

Проблемы доступности

Средство чтения с экрана Apple VoiceOver сталкивается с проблемой при работе с неупорядоченными списками, для которых значение list-style-type равно none. Поскольку эти списки не будут считываться как список, для решения этой проблемы мы должны добавить пробел нулевой ширины в качестве псевдосодержимого перед каждым элементом списка, чтобы обеспечить правильное чтение списка.

Символ пробела нулевой ширины кодируется в Unicode как U+200B .

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

Следующие браузеры поддерживают свойство CSS «тип стиля списка»:

1. Chrome
2. Microsoft Edge
3. Фаерфокс
4. Internet Explorer
5. Опера
6. Сафари
7. Хром Android
8. Firefox для Android
9. Опера Android
10. Сафари на iOS
11. Самсунг Интернет
12. Веб-просмотр Android

Заключение

• Свойство CSS тип стиля списка задает внешний вид стиля, используемого в маркере для элемента списка.
• CSS-свойство типа стиля списка можно применять к тегам
  ,
  или
  • и использовать к элементам с display: list-item.
  • Internet Explorer 7 не поддерживает нижние и верхние латинские буквы; поэтому мы используем более низкую альфу и верхнюю альфу в качестве замены.

    No related posts.