Как стилизовать списки с помощью CSS

Списки стилей с помощью CSS

Списки - очень важная часть многих веб-страниц.

CSS может стилизовать их, используя несколько свойств.

list-style-typeиспользуется для установки предопределенного маркера, который будет использоваться списком:

li {
  list-style-type: square;
}

У нас есть много возможных значений, которые вы можете увидеть здесьhttps://developer.mozilla.org/en-US/docs/Web/CSS/list-style-typeс примерами их внешнего вида. Некоторые из самых популярных:disc,circle,squareиnone.

list-style-imageиспользуется для использования настраиваемого изображения в качестве маркера, когда предопределенный маркер не подходит:

li {
  list-style-image: url(list-image.png);
}

list-style-positionпозволяет добавить маркерoutside(по умолчанию) илиinsideсодержимого списка, в потоке страницы, а не за ее пределами

li {
  list-style-position: inside;
}

Вlist-styleсокращенное свойство позволяет нам указать все эти свойства в одной строке:

li {
  list-style: url(list-image.png) inside;
}

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: