Списки в CSS
HTML даёт вам ul и ol. CSS решает, как эти списки выглядят — круглые маркеры, квадраты, цифры, буквы или вообще без маркера, когда вы строите меню навигации.
Набор list-style
📊 Стили списка одним взглядом
| Свойство | Повседневная роль |
|---|---|
list-style-type |
Форма маркера или стиль нумерации (disc, square, decimal…) |
list-style-position |
Маркер внутри или снаружи блока содержимого |
list-style-image |
Использовать изображение как маркер |
list-style |
Сокращение для типа, позиции и изображения |
list-style: none |
Убрать маркеры (часто для меню навигации) |
Маркеры принадлежат пункту списка, но стили обычно ставят на ul или ol, чтобы каждый li унаследовал тот же вид.
Типы маркеров
Неупорядоченные списки часто начинаются с disc. Переходите на circle или square, когда дизайн хочет более спокойный или чёткий знак.
Типы маркеров списка
cssul.features {
list-style-type: square;
}
ul.notes {
list-style-type: circle;
}Нумерованные и буквенные списки
Упорядоченные списки используют стили нумерации. decimal — повседневный выбор; lower-alpha или upper-roman подходят для планов и формальных шагов.
Типы упорядоченного списка
cssol.steps {
list-style-type: decimal;
}
ol.outline {
list-style-type: lower-alpha;
}Позиция маркера — внутри или снаружи
list-style-position: outside (обычный default) вешает маркер в поле. inside втягивает его в поток текста — удобно в узких карточках.
Маркеры в потоке
cssul.card-list {
list-style-position: inside;
padding-left: 0;
}Убрать маркеры для меню
Навигационные списки редко хотят маркеры. list-style: none очищает их — затем задайте свои отступы через padding/margin.
Чистое меню-навигации
cssnav ul {
list-style: none;
margin: 0;
padding: 0;
}Маркеры-изображения и сокращение
Маленькое изображение может заменить маркер. Предпочитайте крошечные файлы. Сокращение list-style задаёт тип, позицию и изображение в одной строке.
Маркер-изображение + сокращение
cssul.custom {
list-style: square outside none;
}
ul.icons {
list-style-image: url("/icons/check.svg");
}Спокойная привычка для списков
Выберите один ясный стиль маркера на список, держите изображения маленькими и после none для меню сбросьте padding, чтобы пункты выровнялись чисто.
Читаемый список статьи
cssarticle ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}Попробуйте сами
- Поставьте
ulнаlist-style-type: square. - Стилизуйте
olчерезlower-alpha. - Задайте
list-style-position: insideкороткому списку в карточке. - Уберите маркеры у
nav ulчерезlist-style: noneи нулевой padding. - Попробуйте крошечный
list-style-image, затем вернитесь к type, если картинка не загрузится.
Частые ошибки
- Ждать, что один
colorнаliвезде перекрасит сложные маркеры - Ставить
list-style: none, но оставлять большой default padding - Огромные файлы
list-style-image, которые давят на строку - Нумеровать
ulчерез CSS вместо семантическогоol, когда важен порядок - Смешивать этот урок с состояниями hover/visited ссылок (прошлый урок)
Кратко
list-style-typeвыбирает маркеры или стили нумерацииlist-style-positionставит маркеры внутрь или наружуlist-style: noneочищает маркеры для менюlist-style-imageи сокращениеlist-styleдобавляют опции- Держите маркеры спокойными и padding намеренным после снятия маркеров
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху