Css list style ol: list-style-type | htmlbook.ru

С нашими мощными, но простыми в использовании инструментами еще никогда не было так легко оказывать влияние на маркетинг по электронной почте.

Попробуйте бесплатно

Как настроить тип стиля списка CSS для каждого элемента?

Списки представляют собой форму представления данных, обычно используемую всеми типами документов. В HTML есть два типа списков, а именно упорядоченные и неупорядоченные списки.

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

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

 
<ул>
  
Элемент 1
  
Элемент 2
  
Элемент 3


<ол>
  
Элемент 1
  
Элемент 2
  
Элемент 3
 

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

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

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

 ул, ол {
  /* list-style — это сокращенное свойство */
  стиль списка: тип стиля списка тип стиля списка положение стиля списка
} 

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

Итак, чтобы изменить тип маркера для списка, нам просто нужно использовать тип стиля списка CSS с нужным маркером. Давайте посмотрим, как изменить маркеры для списка.

 /* Ненумерованный список */
ул {
  тип-списка: '❤️';
  или /* стиль списка: '❤️'; */
}
/* Список заказов */
пр {
  стиль списка: '👍'
} 

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

Но при таком подходе все типы стилей будут одинаковыми для всех элементов списка. Чтобы настроить тип стиля для каждого отдельного элемента, нам нужно определить его с помощью CSS at-rule, @счетчик-стиль .

Настройка стиля индивидуального списка

Используя @counter-style , мы можем определить пользовательский тип стиля списка для отдельных элементов списка. У него так много свойств для настройки списка. Есть три важных свойства, которые нам нужно знать, чтобы настроить типы стилей списка.

 @counter-style нестандартный тип {
  система: циклическая;
  символы: «😀»;
  суффикс: " ";
}
ул {
  стиль списка: пользовательский тип;
  /*или тип-стиля-списка: пользовательский-тип; */
} 

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

Давайте посмотрим на все вышеперечисленное в действии.

 
<ул>
  
Один
  
Два
  
Три
  
Четыре


<ол>
  
Один
  
Два
  
Три
  
Четыре
 

 /* тип стиля для ненумерованного списка */
@counter-style пользовательский неупорядоченный {
  система: циклическая;
  символы: '❓' '✌️' '❤️' ;
  суффикс: '';
}
/* тип стиля для нумерованного списка */
@counter-style на заказ {
  система: фиксированная;
  символы: '➡️' '😀' '👍';
  суффикс: '';
}
ул {
  стиль списка: пользовательский неупорядоченный;
  /* или list-style-type: custom-unordered; */
}
пр {
  тип стиля списка: заказной;
} 

Таким образом, используя @counter-style, мы можем добавлять отдельные типы стилей списка.