List Style - Украшаем веб-страницы с помощью списков

List style - это свойство CSS, которое определяет тип и стиль маркера для элементов списка. С помощью этого свойства можно изменять тип и стиль точек или номеров элементов списка, а также скрыть маркеры списков.

Синтаксис свойства list-style:

css
list-style: [list-style-type] [list-style-position] [list-style-image];

где:

• list-style-type - определяет тип маркера (буллет (точка), номер или римскую цифру);
• list-style-position - определяет расположение маркера (внутри или снаружи элемента списка);
• list-style-image - определяет изображение в качестве маркера.

Примеры кода:

1. Изменение типа маркера на квадрат:

css
ul {
  list-style-type: square;
}

2. Изменение расположения маркера на внутри элемента списка:

css
ul {
  list-style-position: inside;
}

3. Изменение маркера на изображение:

css
ul {
  list-style-image: url("marker.png");
}

4. Отключение маркеров списка:

css
ul {
  list-style: none;
}

5. Изменение стиля маркера с помощью псевдоэлемента ::marker:

css
ul li::marker {
  color: red;
  font-weight: bold;
}

В данном примере для элементов списка li заданы стили для псевдоэлемента ::marker, который отвечает за стиль маркера. Таким образом, маркеры будут красного цвета и жирным шрифтом.

В заключение, свойство list-style предоставляет широкие возможности для настройки внешнего вида элементов списка. Оно позволяет выбрать нужный тип и стиль маркера, изменить расположение маркера, а также использовать собственные изображения в качестве маркеров.