Теги для нумерованного списка. Нумерованный список в HTML
В языке HTML существует два вида списков: нумерованные и ненумерованные. Их создание практически одинаковое. Даже теги отличаются на один символ. Также можно создавать которые могут включать в себя как нумерованные, так и маркерные.
Эти списки можно преобразовывать как угодно. Всё зависит от вашей фантазии. Сначала мы рассмотрим стандартные списки, такие же как в редакторе Word, а затем будем их улучшать и оформлять до неузнаваемости.
Нумерованный список HTML
Обычный нумерованный можно создать при помощи следующих тегов:
Простые списки выглядят вот так
Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый
Таким образом, списки можно делать так, как показано ниже.
Но с точки зрения профессионалов это некорректно.
Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега ol, пишется ul.
В нет цифр или букв — только различные символы, которые называются маркерами.
Многоуровневый нумерованный список HTML
Многих пользователей интересует такая возможность. Поэтому следует отметить, что любой нумерованный список HTML можно сделать многоуровневым. Дополнительные уровни могут быть такими же или маркированными.
Для того чтобы создать список, указанный в примере выше, нужно написать следующее.
Обратите внимание, что в этом коде, в отличие от первых примеров, добавлен атрибут type. Благодаря ему можно указать вид сортировки как для нумерованных, так и для маркерных списков.
Для нумерованных указываем алфавит или тип цифр, а для остальных случаев — тип маркера.
Если использовать специальный HTML-тег, нумерованный список может стать любым, каким вы хотите.
Можно указать атрибут type с любым значением из таблицы. Или в классе стиля css указать list-style-type с желаемым типом сортировки.
Перевод значений довольно простой. Хватит базовых знаний английского языка. Но даже если вы не можете перевести слова «круг», «квадрат» и т. п., то можно визуально понять, каков будет результат при указании этих значений в атрибуте type.
Для нумерованных списков нужно использовать следующие варианты:
- 1 — арабские цифры;
- A — заглавные ;
- a — строчные латинские буквы;
- I — заглавные римские цифры;
- i — строчные римские цифры.
По умолчанию всегда используется список с То есть, если вы ничего не указали, это равносильно type=»1″.
Помимо этого, нумерованные списки можно начинать с любой желаемой позиции. По умолчанию — вывод от 1. Но при желании можно начать хоть со ста. Для этого нужно указать атрибут start с любым значением.
Кроме этого, можно сделать вывод в обратном порядке. Для этого нужно написать reversed.
Оформление списков
Нумеров
offlink.ru
Тег HTML нумерованный список
Тег <ol> в HTML определяет нумерованный список.
Список, созданный с помощью тега <ol> может иметь числовую или буквенную нумерацию. По умолчанию используется нумерация арабскими цифрами (1, 2, 3…). Тип нумерации можно изменить с помощью атрибута type.
Элемент списка определяется тегом <li>.
Помимо нумерованного списка в HTML можно создать маркированный список. Для этого следует использовать тег <ul>.
Расширенный набор типов нумерации доступен при использовании CSS свойств. Подробнее на странице: Создание списков. Все о HTML списках.
Синтаксис
<ol>элементы_списка_li</ol>Отображение в браузере
- Создание дизайна
- Верстка
- Интеграция
- Продвижение
Пример использования <ol> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Нумерованный список ol в HTML</title>
</head>
<body>
<ol>
<li>Создание дизайна</li>
<li>Верстка</li>
<li>Интеграция</li>
<li>Продвижение</li>
</ol>
</body>
</html>Поддержка браузерами
Атрибуты тега <ol>
| Атрибут | Значение | Описание |
|---|---|---|
| reversed |
reversed |
Логический атрибут. Указывает на использовании обратной нумерации (9, 8, 7, 6, 5…). |
| start | число |
Устанавливает стартовый номер для нумерации. |
| type | 1 A a I i |
Тип нумерации списка: 1 — арабские цифры (1, 2, 3, 4, 5…). |
Тег <ol> также поддерживает глобальные HTML атрибуты.
Устаревшие атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| compact |
compact |
Логический атрибут. Указывает, что список должен быть выведен меньшим размером шрифта. В HTML5 используйте CSS. |
guruweba.com
Html многоуровневый нумерованный список. Ненумерованные списки — тег
В языке HTML существует два вида списков: нумерованные и ненумерованные. Их создание практически одинаковое. Даже теги отличаются на один символ. Также можно создавать которые могут включать в себя как нумерованные, так и маркерные.
Эти списки можно преобразовывать как угодно. Всё зависит от вашей фантазии. Сначала мы рассмотрим стандартные списки, такие же как в редакторе Word, а затем будем их улучшать и оформлять до неузнаваемости.
Нумерованный список HTML
Обычный нумерованный можно создать при помощи следующих тегов:
Простые списки выглядят вот так
Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый
Таким образом, списки можно делать так, как показано ниже.
Но с точки зрения профессионалов это некорректно.
Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега ol, пишется ul.
В нет цифр или букв — только различные символы, которые называются маркерами.
Многоуровневый нумерованный список HTML
Многих пользователей интересует такая возможность. Поэтому следует отметить, что любой нумерованный список HTML можно сделать многоуровневым. Дополнительные уровни могут быть такими же или маркированными.
Для того чтобы создать список, указанный в примере выше, нужно написать следующее.
Обратите внимание, что в этом коде, в отличие от первых примеров, добавлен атрибут type. Благодаря ему можно указать вид сортировки как для нумерованных, так и для маркерных списков.
Для нумерованных указываем алфавит или тип цифр, а для остальных случаев — тип маркера.
Если использовать специальный HTML-тег, нумерованный список может стать любым, каким вы хотите.
Можно указать атрибут type с любым значением из таблицы. Или в классе стиля css указать list-style-type с желаемым типом сортировки.
Перевод значений довольно простой. Хватит базовых знаний английского языка. Но даже если вы не можете перевести слова «круг», «квадрат» и т. п., то можно визуально понять, каков будет результат при указании этих значений в атрибуте type.
Для нумерованных списков нужно использовать следующие варианты:
- 1 — арабские цифры;
- A — заглавные ;
- a — строчные латинские буквы;
- I — заглавные римские цифры;
- i — строчные римские цифры.
По умолчанию всегда используется список с То есть, если вы ничего не указали, это равносильно type=»1″.
Помимо этого, нумерованные списки можно начинать с любой желаемой позиции. По умолчанию — вывод от 1. Но при желании можно начать хоть со ста. Для этого нужно указать атрибут start с любым значением.
Кроме этого, можно сделать вывод в обратном порядке. Для этого нужно написать reversed.
Оформление списков
Нумерованный список HTML можно оформить настолько красиво, что не сразу можно догадаться, что это обычный список, а не картинка, сделанная в Photoshop.
Вот примеры красивых списков.
Как видно из примера, можно изменять внешний вид нумерации и самих элементов.
Создать обычный список можно вот так.
В стилях css нужно указать оформление для тегов ol. Обратите внимание, что в этом случае настройки будут применены ко всем спискам всего сайта, где используется этот файл стилей.
Рассмотрим сначала вариант с круглым оформлением списка. Вернитесь к коду списка. Там указан класс rounded-list. Вот именно с этим классом нужно повозиться, чтобы сделать такую красоту. Назвать класс вы можете как хотите.
Теперь рассмотрим квадратное оформление.
Стили весьма похожи. Разница в том, что в первом случае происходит округление элемента посредством возможностей css.
Профессиональный верстальщик должен предвидеть и понимать, что не все пользователи используют современные компьютеры. Не у всех установлены Windows 7, 8, 10. Существует процент пользователей, кто до сих пор сидит на Windows XP и использует старые версии браузера Internet Explorer.
Как правило, почти все современные дизайнерские улучшения элементов ими не поддерживаются. Пользователю будет казаться, что над дизайном сайта вообще не работали. Что всё съехало. Элементы наезжают друг на друга. Чтобы этого избежать, нужно просчитывать все варианты.
Некоторые веб-мастера закрывают глаза на них, поскольку их доля на современном рынке становится всё меньше и меньше. Но для профессионала важен каждый посетитель, особенно если это коммерческий сайт.
Делайте что-то подходящее для всех или учитывайте все варианты браузеров.
Маркированные списки позволяют разбить большой текст на отдельные блоки, каждый
iuni.ru
Какой тег используется для нумерованного списка. Нумерованные и маркированные списки в HTML
маркированный список —
- — каждый элемент списка
- отмечается маркером,
нумерованный список —- — каждый элемент списка
- отмечается цифрой,
список определений — — состоит из пар термин- —
- определение.
Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.
Создание HTML-списков
1. Маркированный список
Маркированный список представляет собой неупорядоченный список (от англ. Unordered List) . Создаётся с помощью парного тега
. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.Браузеры по умолчанию добавляют следующее форматирование блоку списка:
Каждый элемент списка создаётся с помощью парного тега
- (от англ. List Item) .
2. Нумерованный список
Нумерованный список создаётся с помощью парного тега . Каждый пункт списка также создаётся с помощью элемента
- отмечается цифрой,
- . Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию:
- доступен атрибут value , который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать
- , то остальная нумерация будет пересчитана относительно нового значения.
Для тега
- доступны следующие атрибуты:
- Microsoft
- Apple
- и
- доступны .
- Режиссер:
- Петр Точилин
- В ролях:
- Андрей Гайдулян
- Алексей Гаврилов
- Виталий Гогунский
- Мария Кожевникова
4. Вложенный список
Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов . Разметка для вложенного списка будет следующей:
- Пункт 1.
- Пункт 2.
- Подпункт 2.1.
- Подпункт 2.2.
- Подпункт 2.2.1.
- Подпункт 2.2.2.
- Подпункт 2.3.
- Пункт 3.
Рис. 4. Вложенный список5. Многоуровневый нумерованный список
Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.Ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано — по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точ
Таблица 1. Атрибуты тега
Атрибут Описание, принимаемое значение reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…). start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция - первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например,
- .
type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).3. Список определений
Списки определений создаются с помощью тега
Блок списка определений имеет следующие стили браузера по умолчанию:
Для тегов
- ,
bitserv.ru
Создание списка в HTML | HTML теги списков
Для приятного оформления текста на страницах сайта рекомендуется по чаще использовать списки. Многие новички пытаются создавать списки с помощью пробелов, переносов и спецсимволы, при этом, категорически избегая html теги списка. Это грубейшая ошибка, т.к. в некоторых браузерах, а также при изменении разрешения экрана, такие списки будут отображаться несколько иначе.
На данном уроке мы научимся создавать списки в html, а также рассмотрим основные html теги списков. Познакомимся с нумерованным списком в html, со списком определений и с маркированным списком в html.
Нумерованный список в HTML
В нумерованным списке каждый перечисляемый пункт помечается арабской или римской цифрой, реже букой латинского алфавита.
- <ol> … </ol> — этот парный тег задаёт старт и окончание нумерованного списка в html. Данный тег имеет параметр type, в значении которого нужно указать, с помощью чего будут отмечаться пункты списка:
- A — английские большие буквы;
- a — английские маленькие буквы;
- I — римские большие цифры;
- i — римские маленькие цифры.
Если значение type не задавать, то в качестве нумерации пунктов, по умолчанию будут задействованы обычные цифры (1,2,3).
- <li> … </li> — данный тег служит для отделения пунктов списка друг от друга.
Освоить создание нумерованного списка в html намного проще будет на примере:
Если использовать параметр type со значение А – type=»А», то в результате нумерация будет выполнена английскими буквами – A,B,C,D и т.д
Маркированный список HTML
В маркированных списках, каждый отдельный пункт имеет маркер. С помощью CSS можно установить в качестве маркера любое изображение. Если использовать исключительно HTML, то ваши возможности ограничены только тремя видами маркеров.
- <ul> … </ul> — тег, задающий начало маркированного списка html. Как и в случае с нумерованными маркерами, каждый пункт отделяется тегами <li>. Также есть возможность воспользоваться параметром type, значения которого и задают внешний вид используемых маркеров в каждом пункте списка. Рассмотрим эти значения поподробнее:
- square – маленький квадратик, левее расположен пример данного маркера
- disc – большая точка, левее расположен пример данного маркера
- circle – кружок, левее расположен пример данного маркера
Частенько возникает нужда создавать списки, которые вложены в другие списки. Для примера сверстаем один из таких маркированных списков html:
Список определений HTML
Сразу нужно заметить, что списки определений используются довольно редко, но лучше всё же с ними познакомиться. HTML теги списков определений значительно отличаются от вышеперечисленных списков.
- <dl> — парный тег, который объявляет список определений;
- <dt> — данный тег используется для терминов;
- <dd> — этот тег служит для определений или описаний терминов;
Пример списка определений:
Вид кода в браузере:
В браузере видно, что термин выносятся выше и левее от текста, который его описывает.
Теперь вы умеете создавать списки в html, более того, знаете html теги списков. Владеете информацией, как создать маркированный и нумерованный списки html.
Дата первой публикации: 02.08.2016
Дата последнего обновления: 02.08.2016
x-phantom.ru
HTML теги. HTML списки. Нумерованный список, упорядоченный список.
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена нумерованным спискам HTML. Нумерованный или как еще говорят, упорядоченный список HTML формируется тегами <ol>, <li>.
Нумерованный список. Формирование нумерованного HTML списка. Теги <ol>, <li>.
Содержание статьи:
Как говорилось ранее, нумерованный список формируются двумя тегами <ol>, <li>. Упорядоченные списки — это одна из разновидностей HTML списков.
Тег <li> предназначен для формирования элементов упорядоченного списка, то есть, тег <li> формирует пункты HTML списка. Элемент <li> является блочным HTML элементом, внутри него могут располагаться любые HTML элементы, а его ширина зависит от области, в которой он находится.
Тег <ol> предназначен для формирования нумерованных списков. По умолчанию, нумерация идет по возрастанию и производится арабскими цифрами, но это легко исправить атрибутами тегов <ol> и <li>. Если к упорядоченному списку не применяются дополнительные стили и правила CSS, то браузер отобразит их шрифтом, заданным по умолчанию.
Синтаксис нумерованного списка
Теги <ol>, <li> являются парными HTML тегами, то есть для их корректной работы необходим закрывающий тег, но, у тега <li> можно закрывающий тег не ставить, хотя, это считается дурным тоном.
<ol> <li>Первый</li> <li>Второй</li> </ol>
<ol>
<li>Первый</li>
<li>Второй</li>
</ol> |
Атрибуты тегов списка определений
Тег <ol>, так же, как и любой другой тег из группы HTML списков, имеет атрибуты событий и универсальные HTML атрибуты. У тега <ol> имеется четыре уникальных атрибута:
Type – При помощи атрибута type можно изменить отображение нумерации упорядоченного списка
Start – Изменяя значения атрибута start, можно изменить начальный индекс нумерованного списка
Reversed – атрибут reversed делает порядок нумерации упорядоченного списка по убыванию
Тег <li> имеет все универсальные HTML атрибуты, атрибуты событий и два уникальных атрибута:
Value – атрибут value изменяет значение нумерации
Type – атрибут type изменяет вид маркера, как в списке директорий, так и в маркированном списке и списке меню.
Другие HTML списки
Помимо списка определений.
Есть еще четыре HTML списка:
Тег <ul> формирует маркированный список. Тег <dir> формирует список директорий. Тег <dl> формирует список определений. Контейнер <dt> служит для хранения и отображения термина списка определений. В контейнер <dd> помещается определение термина списка определений. Тег <menu> создает список меню.
Пример формирования списка определений
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Пример использования тега OL. Нумерованный список</title> </head> <body> <ol type=»I»> <li>Первый <ol type=»i» start=»50″> <li>1.1</li> <li>1.2</li> <li>1.3</li> <li>1.4</li> </ol> </li> <li>Второй <ol reversed type=»A»> <li>2.1</li> <li>2.2</li> <li>2.3</li> </ol> </li> </ol> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Пример использования тега OL. Нумерованный список</title> </head> <body> <ol type=»I»> <li>Первый <ol type=»i» start=»50″> <li>1.1</li> <li>1.2</li> <li>1.3</li> <li>1.4</li> </ol> </li> <li>Второй <ol reversed type=»A»> <li>2.1</li> <li>2.2</li> <li>2.3</li> </ol> </li>
</ol> </body> </html> |
Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru
zametkinapolyah.ru
Правильная нумерация во вложенных нумерованных списках HTML с помощью CSS
Стандарт языка HTML поддерживает два вида списков: нумерованные и ненумерованные. Первые используются для упорядоченного перечисления элементов, вторые — для создания списка равнозначных элементов. Есть ещё списки определений, которые используются для создания блоков определение-описание но, по моему опыту, используются крайне редко. О том, как работать с этими списками есть видео для новичков, где подробно показано, как работать с этими списками.
Проблема нумерации во вложенных нумерованных списках HTML
Поработав со стандартными вложенными нумерованными списками HTML, каждый рано или поздно столкнётся с проблемой её несовершенства. Дело в том, что при вложении списка, нумерация вложенного списка снова и снова начинается с единицы. И при уровне вложенности от трёх и при длине списка более десяти начинаются проблемы с восприятием того, какой вложенный элемент, к какому родительскому элементу относится.
Рассмотрим эту задачу на простом примере. В коде ниже элементы состоят из того, что бы хотелось видеть:
<ol>
<li><b>1.</b></li>
<li><b>2.</b>
<ol>
<li><b>2.1.</b></li>
<li><b>2.2.</b></li>
<ol>
<li><b>2.2.1.</b></li>
<ol>
<li><b>2.2.1.1.</b></li>
<li><b>2.2.1.2.</b></li>
</ol>
<li><b>2.2.2.</b></li>
</ol>
<li><b>2.3.</b></li>
<li><b>2.4.</b></li>
</ol>
</li>
<li><b>3.</b></li>
<li><b>4.</b>
<ol>
<li><b>4.1.</b></li>
<li><b>4.2.</b></li>
<ol>
<li><b>4.2.1.</b></li>
<ol>
<li><b>4.2.1.1.</b></li>
<li><b>4.2.1.2.</b></li>
</ol>
<li><b>4.2.2.</b></li>
</ol>
<li><b>4.3.</b></li>
<li><b>4.4.</b></li>
</ol>
</li>
</ol>
Однако, при выводе такого HTML кода на экран получаем стандартный вывод нумерованного списка HTML, в котором все вложенные списки начинаются с 1.
На рисунке выше то, что представлено в начале элементов списка (не жирным текстом) — это автоматическая нумерация списка <ol> HTML. Правда неудобно?
Правильная нумерация списков HTML (как в договорах) с помощью CSS
Для того, чтобы нумерация была правильной, интуитивно понятной, нужно чтобы каждый вложенный список начинался с цифры, обозначающий его уровень вложенности. И это можно сделать достаточно просто применив CSS:
ol {
list-style: none;
counter-reset: li;
}
li:before {
counter-increment: li;
content: counters(li,".") ". ";
}Применив этот CSS-код к тегам <ol> и <li> нумерованного списка получим то что нужно: правильно пронумерованный вложенный нумерованный список HTML:
Формирование правильной нумерации во вложенном нумерованном списке HTML с помощью CSS
Рассмотрим подробнее свойства элементов нумерованного списка HTML, которые можно модифицировать с помощью CSS.
list-style: none;- отменим все стили списка для элементов
ol(если они вдруг были ранее назначены) с помощью свойстваlist-style
- отменим все стили списка для элементов
counter-reset: li;- назначим идентификатор
li, в котором будет храниться счётчик отображений элементаolс помощью свойстваcounter-reset
- назначим идентификатор
counter-increment: li;- обозначим идентификатор
liкак счётчик, который будет подсчитывать количество отображений элементовolна странице и будет выводиться с помощью свойстваcontentи псевдоэлемента:beforeдляli
- обозначим идентификатор
content: counters(li,".") ". ";- зададим последовательность вывода счётчика
liдля всех элементов нумерованного спискаol.
- зададим последовательность вывода счётчика
Таким образом, изменив четыре свойства css двух элементов ol и li нумерованного списка можно получить красивый нумерованный список HTML, который легко воспринимается и более привычен нам, так как в нём наглядно прослеживается вложенность элементов и принадлежность к родительским элементам списка.
HTML и CSS код нумерованного списка с правильной нумерацией
Для того, чтобы проще было разобраться и применить описанные выше сведения, привожу полностью рабочий HTML и CSS код нумерованного списка с правильной нумерацией вложенных элементов:
<html>
<head>
<title>Правильная нумерация вложенных пунктов нумерованного списка в HTML с помощью css</title>
</head>
<body>
<style>
ol {
list-style: none;
counter-reset: li;
}
li:before {
counter-increment: li;
content: counters(li,".") ". ";
color: red;
}
</style>
<ol>
<li><b>1.</b></li>
<li><b>2.</b>
<ol>
<li><b>2.1.</b></li>
<li><b>2.2.</b></li>
<ol>
<li><b>2.2.1.</b></li>
<ol>
<li><b>2.2.1.1.</b></li>
<li><b>2.2.1.2.</b></li>
</ol>
<li><b>2.2.2.</b></li>
</ol>
<li><b>2.3.</b></li>
<li><b>2.4.</b></li>
</ol>
</li>
<li><b>3.</b></li>
<li><b>4.</b>
<ol>
<li><b>4.1.</b></li>
<li><b>4.2.</b></li>
<ol>
<li><b>4.2.1.</b></li>
<ol>
<li><b>4.2.1.1.</b></li>
<li><b>4.2.1.2.</b></li>
</ol>
<li><b>4.2.2.</b></li>
</ol>
<li><b>4.3.</b></li>
<li><b>4.4.</b></li>
</ol>
</li>
</ol>
<body>
</html>Спасибо за внимание! =D
P.S. О том, как создать правильную нумерация в смешанных нумерованных и маркированных списках HTML с помощью CSS, можно прочитать в → этой статье. Приведено универсальное решение по созданию css-свойств для различных типов HTML-списков.
Заберите ссылку на статью к себе, чтобы потом легко её найти 😉
Выберите, то, чем пользуетесь чаще всего:
Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )
mb4.ru