Как сделать нумерованный список в css

Добавил пользователь Дмитрий К.
Обновлено: 04.10.2024

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

  1. нумерованные
  2. маркированные
  3. списки определений

Нумерованные списки

Заключаются в теги .

Тег ol может применяться с атрибутом start="значение" , тогда нумерация списка будет начинаться с заданного значения.

Если необходимо изменить номер определенного элемента списка и следующих за ним элементов, то тег li применяют с атрибутом value="значение" .

Можно задавать стиль отображения упорядоченного списка, задавая средствами CSS то или иное значение свойству list-style-type Его можно применять как ко всему списку, так и к отдельным пунктам li . На практике допускается использование вместо него универсального свойства list-style .

  1. Нумерация начинается с 4
  2. Меняем номер на 8
  3. Последующие номера меняются автоматически

Наиболее часто используемые значения свойства list-style-type :

decimal - обычные числа (по умолчанию)
upper-alpha - заглавные латинские буквы
lower-alpha - строчные латинские буквы
upper-roman - римские числа

Внимание!

Маркеры нумерованных списков выравниваются по правому краю! Поэтому, при достаточно больших числах (например 1802 или XXVII) маркер смещается влево и может выйти за пределы родительского блока!

Это решается установкой большего левого отступа для тега ol .

Маркированные списки

Заключаются между тегами

Обычный маркированный список, внешний вид которого определяется значениями по умолчанию Вашего браузера

Вы можете изменить вид маркеров как всего списка, так и отдельных пунктов с помощью свойства list-style-type :

circle - кружок
disc - жирная точка
square - квадрат
none - без маркера

Интересная особенность

Точно так-же значение none можно присвоить свойству list-style-type: none тега ol

Более того! Нумерованный и маркированный списки отличаются только значением этого свойства!

ul = ol Результат будет идентичным!

Для добавления своих маркеров используют свойство list-style-image , но пользуются им редко, потому что сложно позиционировать изображение маркера. Легче в качестве маркера использовать фоновое изображение для тегов li .

Списки определений

Заключаются между тегами и . Применяются для создания словарей, списков терминов и т.п.

Термин Описание. Термин Описание.

Вложенные списки

Вложенный список размещают в выбранном теге li родительского списка (после текста).

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

  • пункт 1
  • пункт 2
    1. подпункт вложенного списка 1
    2. подпункт вложенного списка 2
  • пункт 3

Внимание!

По спецификации, теги ul и ol могут содержать в себе только теги li !
Все иные теги, в данном случае теги вложенного списка, должны располагаться внутри тегов li

Вложенные списки наследуют свойства родительских, поэтому, в некоторых случаях, имеет смысл прописать для них свойства отдельно

Размеры и отступы списков

Теги ul и li - блочные элементы.
Если размеры не заданы явно, занимают всю доступную ширину родительского блока и высоту, необходимую для размещения содержимого. Браузеры устанавливают для них свои отступы по умолчанию (а иногда и свои маркеры). Поэтому, если эти значения вас не устраивают, нужно их изначально переопределить.

Для наглядности зададим для тегов ul и li рамки и цвет фона разного цвета.

Пояснения:

Левый внешний отступ отодвигает список от края содержащего родительского контейнера и обычно устанавливается 20-40px.
Внутренний отступ не устанавливается.

Для тега li отступы, обычно, не устанавливаются.
Высота строки простых списков часто задается line-height

Выравнивание списков

Список по центру

Автоматически центрировать список вне зависимости от длины строк достаточно просто

  • пункт списка 1
  • пункт списка 2 большей длины
  • пункт 3

Минус данного способа в необходимости дополнительной разметки - список должен быть заключен в содержащий контейнер, которому присвоен класс div.center_list .

Горизонтальный список

Иногда, например при использовании списка в качестве меню, нужно расположить элементы списка в строку.

Вариант 1. Сделать элементы списка строчными

Получаем список такого вида:

  • элемент списка 1
  • элемент списка 2
  • элемент списка 3

Вариант 2. Сделать элементы списка плавающими

Получаем такой же список:

  • элемент списка 1
  • элемент списка 2
  • элемент списка 3

На практике, в частности при создании меню на основе списка, чаще используется второй вариант.

Плавающий список

Заголовок не совсем точен; речь идет о списке, обтекающем плавающий элемент.

И опять возвращаемся к плавающим элементам. Два понятия - "плавающий элемент" и "обтекание". Необходимо четко представлять что это такое, что где плавает и что обтекает:

И плавает у соответствующей кромки содержащего блока или прижимается соответствующей кромкой к другому плавающему элементу.

Следующие за ним, обычные блоки никого не обтекают! Они "тупо" не видят плавающий блок.

Подлость происходящего в том и состоит, что обтекает только текст (строчные элементы и элементы с установленным свойством display: inline или display: inline-block !

Когда-то изначально свойство float именно для этого и было придумано!

Все неприятности - от маркеров, которые не являются строчными элементами, и часто происходит следующее:

Наверняка, многие тщетно пытались вытащить маркер из под плавающего блока, увеличивая margin и padding .

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

    Каждый пункт нумерованного списка выделяется парным тегом , далее пример как создать нумерованный список:

Нумерованные списки можно вкладывать друг в друга. Глубина может быть любой. Такой способ часто применяется для создания меню на сайте. Далее пример вложенного, нумерованного списка:

Чтобы поменять тип списка, нужно использовать атрибут type . Значение атрибута должно быть первым символом данной последовательности, например, для арабских чисел type = "1" , для римских прописных type = "I" и т.д.

  • Арабские числа – 1, 2 и т.д.
  • Прописные латинские буквы - A, B и т.д.
  • Строчные латинские буквы - a, b и т.д.
  • Прописные римские числа - I, II и т.д.
  • Строчные римские числа - i, ii и т.д.

Возмем наш предыдущий пример и укажем типы списка:

Далее рассмотрим атрибут нумерованного списка - start . Атрибут start нужен для того, чтобы начать список с нужного значения. Атрибут start работает со всеми типами списков.

Оформление при помощи CSS нумерованного списка

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

Нумерованный список и SEO

Нумерованные списки тоже играют важную роль в SEO продвижении, так как они делают информацию на сайте более структурированной. А это значит, если вы будете использовать списки в нужных местах, то информация будет более понятной для читателя, а так же для поисковых роботов.

введите сюда описание изображения

Доброго всем времени! подскажите как сделать такую нумерацию на чистом css

не могу понять как убрать точки у нумерации и украсить именно нумерацию, пробовал создать нумерацию через content:counter(item); counter-increment:item, но не могу понять как сделать 01, 02 и тд.



3 ответа 3

Можно сделать так:

@agafron, так как before находится непосредственно в li . Единое решение я вижу добавить что-то такое: li > * < margin-left: 60px; >P.S: обновил пост

@agafron, не правильно вас понял сначала :) там -webkit-padding-start устанавливается браузером к ol .

Вот пример того что вы хотите. Это сделано с псевдоклассом :before .

Там нумерация происходит так. content: '0' counter(item); .

Стили немного не то что на вашей картинке. Но принцип уже понятен.

Стили можете оформить на ваш вкус.


Нумерацию именно списка так не получится стилизовать.
Можно просто убрать список и сделать цифры обычными блоками и стилизовать как душе угодно)

@RazGalstyan да, через :before тоже была такая мысль, но по сути создается тот же блок, только псевдоэлементом, конечно плюс, что не нужно лишних блоков)

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2022 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2022.1.28.41306

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

Базовая компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), CSS основы по тексту и шрифтам.

Пример простого списка

Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)

HTML для нашего примера списка представлен ниже:

Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя инструменты разработчика браузера, то вы заметите несколько стилей установленных по умолчанию:

  • Элементы и имеют верхний и нижний margin по 16px ( 1em ) и padding-left 40px ( 2.5em .)
  • Объекты списка (элементы ) не имеют заданных значений по умолчанию для интервалов.
  • Элемент имеет верхний и нижний margin по 16px ( 1em ), но padding не задан.
  • Элементы имеют margin-left 40px ( 2.5em .)
  • Элементы

Управление интервалами списков

При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть законченный стилизированный пример на Github, а также найти исходный код.)

CSS, используемый для оформления текста и интервалов, выглядит следующим образом:

  • Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.
  • Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.
  • Правило 4 задаёт одинаковую высоту line-height в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.
  • Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту line-height между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.

Стили специфичные для списков

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

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

Стили маркеров

Как указано выше, свойство list-style-type (en-US) позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:

Это даёт нам следующий вид:

an ordered list with the bullet points set to appear outside the list item text.

Вы можете найти гораздо больше опций, заглянув на справочную страницу list-style-type (en-US).

Позиция маркера

Свойство list-style-position (en-US) устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside , которое заставляет маркеры находится снаружи пунктов списка, как видно выше.

Если вы установите значение на inside , то маркеры будут находиться внутри строк:

an ordered list with the bullet points set to appear inside the list item text.

Использование пользовательского изображения как маркер

Свойство list-style-image позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:

Однако это свойство немного ограничено с точки зрения управления позициями , размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств background , о которых вы узнаете намного больше в модуле Styling boxes . А пока вот вам образец для дегустации!

В нашем законченном примере мы оформили неупорядоченный список следующим образом ( поверх того, что вы уже видели выше ):

Мы сделали следующее:

  • Установили padding-left элемента с 40px по умолчанию на 20px , затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо.
  • Установили list-style-type (en-US) на none , для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства background для управления маркерами.
  • Вставили маркер в каждый пункт неупорядоченного списка. Соответствующие свойства, следующие:
      : Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера. : Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим 0 0 , что значит что маркер будет появляться в самом верху слева каждого пункта списка. : Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер 1.6rem ( 16px ), что очень хорошо сочетается с отступом (padding) 20px , который мы позволили разместить внутри маркера — 16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо. : По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение no-repeat .

    Это даёт нам следующий результат:

    короткая запись list-style

    Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, list-style (en-US). Например, следующий CSS:

    Может быть заменён этим:

    Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — disc , none , и outside ). Если указаны и type и image , тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.

    Контроль счета списка

    Иногда вам может понадобиться вести счёт в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счёт с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.

    start

    Атрибут start позволит вам начать счёт списка с цифры отличной от 1. Например:

    что даст вам такой результат:

    reversed

    Атрибут reversed начнёт отсчёт по убыванию вместо возрастания. Например:

    что даст вам такой результат:

    Обратите внимание: Если пунктов в списке в обратном списке больше, чем значение атрибута start , счёт продолжится до нуля и далее отрицательные значения.

    value

    Атрибут value позволит вам установить специфичные цифровые значения к пунктам списка. Например:

    что даст вам такой результат:

    Обратите внимание: Даже если вы используете нечисловой list-style-type (en-US), вам всё равно надо использовать эквивалентное цифровое значение в атрибуте value .

    Активное изучение: Стилизация вложенного списка

    В этой сессии активного изучения, мы хотим, чтобы вы взяли всё что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:

    1. Задали неупорядоченному списку квадратные маркеры.
    2. Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
    3. Задали упорядоченному списку маркеры в виде строчных букв.
    4. Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдёте.

    Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы застрянете, нажмите кнопку Show solution чтобы посмотреть возможный ответ.

    Смотрите также

    Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите :

    Заключение

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

    Стандарт языка HTML поддерживает два вида списков: нумерованные и ненумерованные. Первые используются для упорядоченного перечисления элементов, вторые — для создания списка равнозначных элементов. Есть ещё списки определений, которые используются для создания блоков определение-описание но, по моему опыту, используются крайне редко. О том, как работать с этими списками есть видео для новичков, где подробно показано, как работать с этими списками.

    Проблема нумерации во вложенных нумерованных списках HTML

    Поработав со стандартными вложенными нумерованными списками HTML, каждый рано или поздно столкнётся с проблемой её несовершенства. Дело в том, что при вложении списка, нумерация вложенного списка снова и снова начинается с единицы. И при уровне вложенности от трёх и при длине списка более десяти начинаются проблемы с восприятием того, какой вложенный элемент, к какому родительскому элементу относится.

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

    Однако, при выводе такого HTML кода на экран получаем стандартный вывод нумерованного списка HTML, в котором все вложенные списки начинаются с 1 .

    HTML кода на экран получаем стандартный вывод нумерованного списка HTML, в котором все вложенные списки начинаются с 1

      HTML. Правда неудобно?

    Правильная нумерация списков HTML (как в договорах) с помощью CSS

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

      и нумерованного списка получим то что нужно: правильно пронумерованный вложенный нумерованный список HTML:

    правильно пронумерованный вложенный нумерованный список HTML

    Формирование правильной нумерации во вложенном нумерованном списке HTML с помощью CSS

    Рассмотрим подробнее свойства элементов нумерованного списка HTML, которые можно модифицировать с помощью CSS.

    • list-style: none;
      • отменим все стили списка для элементов ol (если они вдруг были ранее назначены) с помощью свойства list-style
      • назначим идентификатор li , в котором будет храниться счётчик отображений элемента ol с помощью свойства counter-reset
      • обозначим идентификатор li как счётчик, который будет подсчитывать количество отображений элементов ol на странице и будет выводиться с помощью свойства content и псевдоэлемента :before для li
      • зададим последовательность вывода счётчика li для всех элементов нумерованного списка ol .

      Таким образом, изменив четыре свойства css двух элементов ol и li нумерованного списка можно получить красивый нумерованный список HTML, который легко воспринимается и более привычен нам, так как в нём наглядно прослеживается вложенность элементов и принадлежность к родительским элементам списка.

      HTML и CSS код нумерованного списка с правильной нумерацией

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

      Читайте также: