Обзор покупки маркеры и стикербук
Создание сайтов с нуля - урок 9 - Списки html, теги ul, ol, dl, li, работа со списками
Что такое списки и для чего они нужны? Иногда текстовую информацию редактируют таким образом, чтоб как-то визуально и логически выделить одинаковые составляющие. Например, перечисление каких-то преимуществ. Преимущества машин BMW: Для подобных случаев в языке html предусмотрено целое семейство элементов, которые позволяют создать нумерованный или маркированный список, а также список определений. Начнем с маркированного списка. Маркированные списки создаются с помощью тега ul, который содержит внутри себя теги li, обозначающие «элемент списка». Т.е. тег ul – это как-бы контейнер для всех элементов списка, а каждый тег li– это отдельный пункт списка...
Как изменить вид маркера списка? С помощью CSS допускается устанавливать один из трёх типов маркеров: disc (точка), circle (кружок), square (квадратик). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора ul или li ul { list-style-type: square; /* Квадратные маркеры */ } Использование псевдоэлемента ::before Выбор и установка собственного символа маркера происходит через псевдоэлемент ::before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type, а затем добавить псевдоэлемент ::before к селектору li. Сам вывод символа осуществляется с помощью свойства content, в качестве значения которого и выступает желаемый символ li { list-style-type: none; /* Убираем маркеры у списка */ } li::before { content: "►"; /* Маркер списка */ padding-right: 0.5em; /* Расстояние от маркера до текста */ } Использование псевдоэлемента ::marker Псевдоэлемент ::marker позволяет управлять настройками маркера списка и работает схожим с ::before образом. При этом убирать исходные маркеры, как это делалось в предыдущем примере, необходимости нет. Для ::marker не работают свойства margin и padding, поэтому для изменения расстояния от маркера до текста свойство padding-left добавляется к селектору li li { padding-left: 0.5em; /* Расстояние от маркера до текста */ } li::marker { content: "►"; /* Маркер списка */ } Подробнее