Нумерованный список css: CSS стили для нумерованных списков ol
Правильная нумерация во вложенных нумерованных списках 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;
- назначим идентификатор
, в котором будет храниться счётчик отображений элементаol
с помощью свойстваcounter-reset
- назначим идентификатор
counter-increment: li;
- обозначим идентификатор
li
как счётчик, который будет подсчитывать количество отображений элементовol
на странице и будет выводиться с помощью свойстваcontent
и псевдоэлемента:before
дляli
- обозначим идентификатор
content: counters(li,".") ". ";
- зададим последовательность вывода счётчика
li
для всех элементов нумерованного спискаol
.
- зададим последовательность вывода счётчика
Таким образом, изменив четыре свойства css двух элементов
и 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-списков.
Заберите ссылку на статью к себе, чтобы потом легко её найти 😉
Выберите, то, чем пользуетесь чаще всего:
Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )
создание пользовательского стиля с помощью counter-increment и counter-reset
От автора: как насчет классического трюка CSS! Это даже и не трюк, поскольку нумерованный список CSS может быть сделан с помощью counter-increment и counter-reset, и это идеально нам подходит. Я просто хотел удостовериться, что вы знаете, как это работает, и у вас есть простые примеры для копирования.
Скажем, все, что вы хотите сделать, это изменить стиль номеров:
Вот пример со страницы CodePen Challenges:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееНа днях на Pen появилось такое демо, в которой использованы довольно классные стили:
Сайты рецептов — отличное места для поиска стилей пользовательских списков, поскольку списки этапов — это одна из основных их функций. На сайте Мета Маркиза у него есть забавные варианты. Я взял его CSS и переместил сюда:
Обязательно ознакомьтесь с небольшим изменением медиа-запросов. Конечно же, на сайте рецептов Леи Веру также есть интересная нумерация.
Вот интересная демо-версия Джонатана Снука, которая имеет «временную шкалу» и использует пользовательские счетчики для обозначения каждого раздела:
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Практика верстки сайта на CSS Grid с нуля
СмотретьНумерованные и маркированные списки в HTML
Списки встречаются везде. Они используются для:
- разбивки больших сегментов текста на части;
- выделения важных моментов;
- изложения «плана действий» и перечня мероприятий (нумерованный список в HTML).
Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице?
Первый вид списка, который мы рассмотрим, это маркированный.
Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов <ul> </ul>. Ниже приводится простой его пример:
<ul type="square"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ul>
Сначала весь список берется в теги <ul> </ul>. При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка.
Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов (в том числе и в нумерованном списке HTML):
Каждый элемент в списке обворачивают в отдельную пару тегов <li> </ li>. Часто можно обойтись и без <li>, но я бы рекомендовал придерживаться этого правила.
Приведенный выше список помещен в отдельный тег <ul>, но каждый <li> также поддерживает собственный атрибут type, и таким образом можно создать следующий список:
Перед тем, как к списку будет применен любой стиль CSS, HTML (а точнее браузер) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом <p>.
Если вы хотите упорядочить элементы списка, тогда тег <ol> поможет в этом. По умолчанию он задает нумерованный список HTML:
<ol type="A"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ol>
что на выходе дает нам:
A. Элемент 1
B. Элемент 2
C. Элемент 3
Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.
Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков.
Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А). Это бы внесло неразбериху в ваше руководство!
К счастью, в HTML есть свойство start, которое позволяет начать нумерацию с указанного номера:
<ol start="4"> <li>Шаг четыре</li> <li>Шаг пять</li> <li>Шаг шесть</li> </ol>
Что дает нам следующее:
4. Шаг четыре
5. Шаг пять
6. Шаг шесть
Если вы хотите вывести номера (или буквы) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed:
<ol reversed> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> <li>Четвертый пункт</li> <li>Пятый пункт</li> </ol>
В результате список будет выглядеть следующим образом:
5. Пятый пункт.
4. Четвертый пункт.
3. Третий пункт.
2. Второй пункт.
1. Первый пункт.
С помощью установленных в браузерах патчей поддержки (и иногда с помощью отмены CSS для некоторых сайтов) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой:
<ul> <li>Элемент верхнего уровня</li> <ul> <li>Подчиненный элемент 1</li> <li>Подчиненный элемент 2</li> </ul> <li> Элемент верхнего уровня</li> </ul>
Что дает нам:
• Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
• Элемент верхнего уровня
Вы можете использовать комбинацию тегов <ul> и <ol>. Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка.
1. Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
2. Элемент верхнего уровня
Используйте нумерованные списки HTML на своих страницах.
Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях!
Данная публикация представляет собой перевод статьи «Numbered and Bullet Point Lists in HTML» , подготовленной дружной командой проекта Интернет-технологии.ру
телеграм канал. Подпишись, будет полезно!
Круглые скобки для нумерованного списка HTML с помощью CSS
По правилам русского языка после точки (.) первая буква следующего предложения пишется заглавной, а после круглой скобки — строчной. Несмотря на это довольно часто приходится наблюдать следующую картину при использовании нумерованных списков HTML:
1. один.
2. два.
3. три.
1) Один;
2) Два;
3) Три.
Конечно же так оформлять списки неправильно, но, в то же время, это дело автора …
Рассмотрим создание следующего списка средствами CSS:
1) один;
2) два;
3) три.
Обычная нумерация
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Обычная нумерация</title> <style> ol.with-parentheses { counter-reset: myCounter; list-style: none; } ol.with-parentheses > li::before { content: counter( myCounter ) ‘) ‘; counter-increment: myCounter; } </style> </head> <body> <h2>Обычная нумерация</h2> <h3>Первый список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> <h3>Второй список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> </body> </html>Смотреть в этой вкладкеСмотреть в новой вкладкеol.with-parentheses { counter-reset: myCounter; list-style: none; }
counter-reset: myCounter;
- сбрасываем счётчик.
list-style: none;
- скрываем стандартные номера / маркеры.
ol.with-parentheses > li::before { content: counter( myCounter ) ') '; counter-increment: myCounter; }
content: counter( myCounter ) ') ';
- добавляем перед каждым пунктом списка номер и круглую скобку с пробелом: ‘) ‘.
counter-increment: myCounter;
- увеличиваем счётчик на единицу.
myCounter — это переменная счётчика, которой можно определить любое другое имя, состоящее из английских букв (a-z), арабских цифр (0-9) и знаков подчёркивания (_), причём в качестве первого символа переменной рекомендуется использовать букву.
Сквозная нумерация
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Сквозная нумерация</title> <style> ol.start { counter-reset: myCounter; } ol.with-parentheses { list-style: none; } ol.with-parentheses > li::before { content: counter( myCounter ) ‘) ‘; counter-increment: myCounter; } </style> </head> <body> <h2>Сквозная нумерация</h2> <h3>Первый список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> <h3>Второй список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> <h3>Третий список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> <h3>Четвёртый список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> </body> </html>Смотреть в этой вкладкеСмотреть в новой вкладкеДля сброса нумерации нужно просто использовать класс start
ещё раз.
Неактуальный способ
Ниже расположен код, в котором не используются counter-подобные свойства.
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Неактуальный способ</title> <style> ol.with-parentheses > li::before { content: ‘) ‘; margin-left: -10px; } </style> </head> <body> <h2>Неактуальный способ</h2> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> </body> </html>Смотреть в этой вкладкеСмотреть в новой вкладкеЕдинственное отличие данного списка от вышеприведённых — это наличие точки (.) после номера пункта.
Добавив отступ влево (margin-left: -10px;
) больше 10 пикселей (например, 14), можно добиться слияния точки с круглой скобкой:
Полное руководство по спискам в HTML и CSS
Перевод статьи «A complete guide about lists in HTML and CSS».
Что такое списки
Список это способ представления набора данных или информации. Таким образом этот набор данных становится более понятным, чем при любой другой форме изложения. Например, список покупок выглядит куда понятнее, если имеет вид именно списка, а не простого абзаца, где наименования идут просто через запятую.
Списки в HTML
Если вы хотите представлять на своих веб-страницах какие-то данные, являющиеся наборами чего-либо, список является прекрасным вариантом оформления. Благодаря спискам пользователи легче воспринимают информацию.
Виды списков
В HTML списки бывают трех видов:
- Упорядоченные списки.
- Неупорядоченные списки.
- Списки определений.
Что такое упорядоченный список?
Упорядоченный список это набор элементов, представленных в определенном порядке. Форма упорядоченного списка лучше всего подходит для представления наборов данных, где порядок элементов имеет значение.
Примерами могут послужить кулинарные рецепты, где действия следует выполнять в определенном порядке, или списки инструкций простой программы.
Подобные списки делают упорядоченными, потому что без нужной последовательности изложения эта информация теряет свой смысл. Упорядоченные списки также называют нумерованными.
Для создания упорядоченных списков используется тег <ol> (ordered list – «упорядоченный список»), а для каждого из его элементов – тег <li> (list – «список»).
HTML-код:
[html]<ol>
<li>Налейте воду в кастрюлю.</li>
<li>Добавьте сахар, чайные листья и специи.</li>
<li>Доведите до кипения и подержите на медленном огне около минуты.</li>
<li>Добавьте молоко.</li>
<li>Доведите до кипения и подержите на медленном огне 3-5 минут.</li>
<li>Процедите чай и перелейте его в чайник.</li>
</ol>
[/html]
Результат:
- Налейте воду в кастрюлю.
- Добавьте сахар, чайные листья и специи.
- Доведите до кипения и подержите на медленном огне около минуты.
- Добавьте молоко.
- Доведите до кипения и подержите на медленном огне 3-5 минут.
- Процедите чай и перелейте его в чайник.
Значения по умолчанию:
По умолчанию пункты списка обозначаются арабскими цифрами.
Это можно изменить, используя разные значения CSS-свойства list-style-type.
list-style-type: upper-alpha
See the Pen ordered-list-upper-alpha by Amrish Kushwaha (@isamrish) on CodePen.
list-style-type: upper-roman
See the Pen ordered-list-upper-roman by Amrish Kushwaha (@isamrish) on CodePen.
list-style-type: lower-alpha
See the Pen ordered-list-lower-alpha by Amrish Kushwaha (@isamrish) on CodePen.
list-style-type: lower-roman
See the Pen ordered-list-lower-roman by Amrish Kushwaha (@isamrish) on CodePen.
Это самые часто используемые значения свойства list-style-type. Но есть множество других значений, которые мы рассмотрим дальше.
Что такое неупорядоченный список?
Неупорядоченный список это список с элементами, которые могут быть представлены в произвольном порядке. Такие списки также называют маркированными.
Примеры таких списков – списки покупок, списки запланированных дел.
Для создания упорядоченных списков используется тег <ul> (unordered list), а для каждого из его элементов – тег <li> (как и в упорядоченном списке).
HTML-код:
[html]<ul>
<li>одежда</li>
<li>книги</li>
<li>ручки</li>
<li>ноутбук</li>
<li>сумка</li>
</ul>
[/html]
Результат:
- одежда
- книги
- ручки
- ноутбук
- сумка
Значения по умолчанию:
По умолчанию маркеры элементов представлены в виде кружочков. Это можно изменить, используя все то же CSS-свойство list-style-type.
list-style-type: circle
See the Pen unordered-list-circle by Amrish Kushwaha (@isamrish) on CodePen.
list-style-type: square
See the Pen unordered-list-square by Amrish Kushwaha (@isamrish) on CodePen.
list-style-type: disc
See the Pen unordered-list-disc by Amrish Kushwaha (@isamrish) on CodePen.
Дальше мы разберем и другие варианты стилей.
Что такое список определений?
Список определений отличается тем, что каждый его пункт состоит из двух элементов. Первый из них – термин, а второй – его определение.
Вы можете создать список определений при помощи тега <dl> (definition list – «список определений»). В пунктах списка термины (term) создаются при помощи тега <dt>, а описание (description) – при помощи тега <dd>.
Например:
See the Pen definition-list by Amrish Kushwaha (@isamrish) on CodePen.
Что такое вложенные списки?
Иногда бывают ситуации, когда вам нужно представить информацию в виде списка, причем его пункты сами могут быть отдельными списками. Такая структура называется вложенным списком.
Например:
See the Pen nested-list by Amrish Kushwaha (@isamrish) on CodePen.
Стиль списка
Для придания стилей списку используются три CSS-свойства.
list-style-type
Как вы уже знаете, это свойство используется для стилизации маркеров списка (как упорядоченного, так и неупорядоченного).
Это свойство может принимать несколько значений:
- disc (круг)
- square (квадрат)
- circle (окружность)
- decimal (арабские цифры)
- lower-alpha (строчные латинские буквы, =lower-latin)
- lower-roman (римские цифры в нижнем регистре)
- lower-latin (строчные латинские буквы, =lower-alpha)
- lower-greek (строчные греческие буквы)
- upper-alpha (заглавные латинские буквы, =upper-latin)
- upper-roman (римские цифры в верхнем регистре)
- upper-latin (заглавные латинские буквы, =upper-alpha)
С полным списком возможных значений свойства list-style-type можно ознакомиться здесь.
list-style-image
Это свойство используется, чтобы в качестве маркера списка установить изображение. Свойство может принимать два значения: url изображения или none.
Например:
See the Pen list-style-image by Amrish Kushwaha (@isamrish) on CodePen.
Поскольку значение этого свойства наследуется, для возвращения значения по умолчанию используется значение none.
list-style-position
Это свойство служит для определения положения маркера относительно элементов списка. Свойство list-style-position может принимать два значения: inside (внутри) и outside (снаружи).
Пример применения значения inside
See the Pen list-style-position-inside by Amrish Kushwaha (@isamrish) on CodePen.
Пример применения значения outside
See the Pen list-style-position-outside by Amrish Kushwaha (@isamrish) on CodePen.
А теперь давайте поиграем с цветами списка
Расцвеченный маркированный список
Вариант 1: элементы списка и маркеры имеют один цвет.
See the Pen same-color-unordered-list by Amrish Kushwaha (@isamrish) on CodePen.
Вариант 2: элементы списка и маркеры имеют разные цвета.
See the Pen different-color-unordered-list by Amrish Kushwaha (@isamrish) on CodePen.
Расцвеченный нумерованный список
Вариант 1: элементы списка и их номера имеют один цвет.
See the Pen colored-numbered-list by Amrish Kushwaha (@isamrish) on CodePen.
Вариант 2: элементы списка и их номера имеют разные цвета.
See the Pen different-color-numbered-list by Amrish Kushwaha (@isamrish) on CodePen.
Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!
HTML-списки
HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:
маркированный список — <ul> — каждый элемент списка <li> отмечается маркером,
нумерованный список — <ol> — каждый элемент списка <li> отмечается цифрой,
список определений — <dl> — состоит из пар термин <dt> — <dd> определение.
Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.
Создание HTML-списков
1. Маркированный список
Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.
Браузеры по умолчанию добавляют следующее форматирование блоку списка:
ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}
Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).
Для тега <ul> доступны глобальные атрибуты.
<ul>
<li>Microsoft</li>
<li>Google</li>
<li>Apple</li>
<li>IBM</li>
</ul>
Рис. 1. Маркированный список2. Нумерованный список
Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию:
ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}
Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.
Для тега <ol> доступны следующие атрибуты:
Атрибут | Описание, принимаемое значение |
---|---|
reversed | Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…). |
start | Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" 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). |
<ol>
<li>Microsoft</li>
<li>Google</li>
<li>Apple</li>
<li>IBM</li>
</ol>
Рис. 2. Нумерованный список3. Список определений
Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.
Блок списка определений имеет следующие стили браузера по умолчанию:
dl {margin-top: 1em; margin-bottom: 1em;}
Для тегов <dl>, <dt> и <dd> доступны глобальные атрибуты.
<dl>
<dt>Режиссер:</dt>
<dd>Петр Точилин</dd>
<dt>В ролях:</dt>
<dd>Андрей Гайдулян</dd>
<dd>Алексей Гаврилов</dd>
<dd>Виталий Гогунский</dd>
<dd>Мария Кожевникова</dd>
</dl>
Рис. 3. Список определений4. Вложенный список
Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:
<ul>
<li>Пункт 1.</li>
<li>Пункт 2.
<ul>
<li>Подпункт 2.1.</li>
<li>Подпункт 2.2.
<ul>
<li>Подпункт 2.2.1.</li>
<li>Подпункт 2.2.2.</li>
</ul>
</li>
<li>Подпункт 2.3.</li>
</ul>
</li>
<li>Пункт 3.</li>
</ul>
Рис. 4. Вложенный список5. Многоуровневый нумерованный список
Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
<ol>
<li>пункт</li> <!-1.->
<li>пункт
<ol>
<li>пункт</li> <!-2.1.->
<li>пункт</li> <!-2.2.->
<li>пункт
<ol>
<li>пункт</li> <!-2.3.1.->
<li>пункт</li> <!-2.3.2.->
<li>пункт</li> <!-2.3.3.->
</ol>
</li> <!-2.3.->
<li>пункт</li> <!-2.4.->
</ol>
</li> <!-2.->
<li>пункт</li> <!-3.->
<li>пункт</li> <!-4.->
</ol>
Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
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() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li,".") ". ";
}
Рис. 5. Многоуровневый нумерованный списокКак сделать список в HTML + подробный видеоурок
Доброго времени суток!
В этой статье вы узнаете о всех возможностях списков, поймете как сделать нумерованный список, освоите теги, которые помогут сделать из простого маркированного списка более интересный и заметный с произвольными маркерами. После прохождения урока у вас придет понимание того, где применяются списки и при каких обстоятельствах их можно использовать.
Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:
Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер.
В каждой части статьи создание тех или иных списков будет сопровождаться подробными пояснениями по вставке того или иного списка.
1. Маркированные списки в HTML
Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:
HTML КОД
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <title>Моя первая html страница</title> </head> <body> <p>Фрукты</p> <ul> <li>Банан</li> <li>Яблоко</li> <li>Персик</li> </ul> </body> </html> |
А вот так выглядит в браузере:
Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере1.1 Стандартные маркеры для маркированного списка
На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:
Название маркера | Значение атрибута «type» | Пример списка |
---|---|---|
Маркеры в виде круга | disc |
|
Маркеры в виде незакрашенного круга | circle | |
Маркеры в виде квадрата | square |
|
1.2 Маркер списка в виде пустого круга
Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:
HTML КОД
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>Пример маркированного списка с маркером в виде пустого круга</title> </head> <body> <p>Звезды:</p> <ul type="circle"> <li>Сириус</li> <li>Арктур</li> <li>Поллукс</li> <li>Бетельгейзе</li> <li>Солнце</li> </ul> </body> </html> |
Сразу смотрим как этот код будет выглядеть в браузере:
Рис. 1.2. Вид маркера для списка в виде окружности в браузере1.3 Маркер списка в виде квадрата
Посмотрим также и последний пример с квадратным маркером для HTML списка:
HTML КОД
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <title>Пример маркированного списка с маркером в виде квадрата</title> </head> <body> <p>Виды птиц:</p> <ul type="square"> <li>Ара зеленокрылый</li> <li>Дрозд рябинник</li> <li>Индейка палевая</li> </ul> </body> </html> |
Обратите внимание на маркер, он стал квадратным:
Рис. 1.3. Вид маркера для списка в виде квадрата в браузереВажное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте здесь) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.
Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 («<!DOCTYPE html>»), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — валидация сайта.
Ошибка будет следующая:
Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у спискаИз пояснения становится понятно, что этот атрибут является устаревшим и нужно использовать CSS вместо этого атрибута, чтобы задать вид маркера у списка. Как это сделать читайте в этом уроке по CSS — Урок 8. Оформление списков.
С маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах.
2. Нумерованные списки в HTML
В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега <ol></ol>. Как это выглядит на практике:
Пример нумерованного списка:
HTML КОД
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>Пример стандартного нумерованного списка</title> </head> <body> <p>От одного до пяти:</p> <ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ol> </body> </html> |
Таким образом выглядит нумерованный список со стандартными настройками в браузере:
Рис. 2.1. Нумерованный список в браузере со стандартными настройкамиКак и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.
2.1 Стандартные маркеры для нумерованного списка
Здесь у нас есть выбор не из трех видов маркеров, а из пяти:
Название маркера | Значение атрибута «type» | Пример списка |
---|---|---|
Маркеры в виде арабских чисел | 1 |
|
Маркеры в виде строчных латинских букв | a |
|
Маркеры в виде заглавных латинских букв | A |
|
Маркеры в виде римских цифр в нижнем регистре | i |
|
Маркеры в виде римских цифр в верхнем регистре | I |
|
2.2 Своя нумерация в списке HTML
Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start». Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:
HTML КОД
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>Произвольная нумерация для нумерованного списка</title> </head> <body> <p>Начинаем нумерацию с двенадцати:</p> <ol type="a" start="12"> <li>Двенадцать</li> <li>Тринадцать</li> <li>Четырнадцать</li> <li>Пятнадцать</li> <li>Шестнадцать</li> </ol> </body> </html> |
Вот как это будет отображаться на реальном сайте:
Рис. 2.2. Нумерация с произвольного числа в нумерованном спискеНа изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах.
Важное замечание: в нумерованном списке валидатор не выдаст ошибку, здесь можно использовать данные атрибуты, но также можно задать нумерацию и с помощью CSS. Подробнее об этом здесь — Урок 8. Оформление списков.
Ну а сейчас перейдем к вложенным спискам HTML.
3. Как сделать многоуровневый (вложенный) список в HTML
Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по выпадающему меню на CSS3), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.
На примере моделей автомобилей мы построим многоуровневый список в HTML:
HTML КОД
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <title>Вложенный маркированный список HTML</title> </head> <body> <ul> <li>Citroen <ul> <li>Berlingo</li> <li>C1</li> <li>C2</li> <li>C3 Picasso</li> <li>C4 Grand Picasso</li> </ul> </li> <li>KIA</li> <li>Toyota</li> <li>Audi</li> <li>Lexus</li> </ul> </body> </html> |
Обратите внимание, как выглядит многоуровневый список в браузере:
Рис. 3.1. Пример многоуровневого списка в HTMLМы делали многоуровневый список с помощью маркированного (тег <ul>). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать стили для маркеров с помощью CSS).
Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:
HTML КОД
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <head> <title>Нумерованные, маркированные и многоуровневые списки в HTML</title> </head> <body> <ul> <li>Первая группа тюльпанов <ol> <li>Первый класс <ul> <li>Простые ранние тюльпаны</li> </ul> </li> <li>Второй класс <ul> <li>Махровые тюльпаны</li> </ul> </li> </ol> </li> </ul> </body> </html> |
В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.
Смотрим его вид в браузере:
Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере4. Полезные материалы по спискам HTML
Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: основы CSS. Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).
4.1 Как сделать список HTML в строку
Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто:
4.2 Как сделать список HTML без значка
За это отвечает свойство list-style-type в CSS (подробнее здесь):
4.3 Как сделать список в HTML по центру
Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало:
4.4 Как сделать список в HTML с картинками
Достаточно лишь одного свойства CSS list-style-image. Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:
4.5 Маркированный список HTML свой маркер
В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome). Тогда можно сделать любую иконку вместо стандартного маркера:
4.6 Как сделать список в HTML в несколько столбцов
Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:
5. Комбинированный список HTML
Чтобы сделать комбинированный список в HTML лучше всего использовать иконочные шрифты. Например, Flaticon или Fontawesome.
Эта информация уже для продвинутых, поэтому для начала необходимо будет изучить уроки по CSS.
6. Практика работы со списками
На видео ниже вы можете увидеть всю работу со списками HTML на практике:
Чтобы закрепить полученную информацию, я рекомендую все действия проделать вручную. Попробовать разные маркеры для списков, создать нумерованные списки, а после перейти к многоуровневым (вложенным) спискам и поэкспериментировать с ними.
На этом со списками заканчиваем и переходите к следующему уроку по изображениям.
Если вам нужно больше, чем просто основы сайтостроения, а хотите освоить профессию Front-end разработчика, то обратите внимание на курс от онлайн-школу Нетология — «Front-end разработчик с нуля» и онлайн-школу Skillbox и курс «Front-end разработчик«.
Курс длится долго, но знания вы получите структурированные, с которыми можно сразу устроится на работу, если вам интересно это направление.
Больше практикуйтесь!
Полное руководство по спискам в HTML и CSS
Перевод статьи «Полное руководство по спискам в HTML и CSS».
Что такое списки
Список это способ представления набора данных или информации. Таким образом этот набор данных становится более понятным, чем при любой другой форме изложения. Например, список покупок выглядит куда понятнее, если имеет вид именно список, а не простой абзаца, где наименования идут просто через запятую.
Списки в HTML
Если вы хотите представлять на своих веб-страницах какие-то данные, являющиеся наборами чего-либо, список является прекрасным оформлением. Благодаря спискам легче воспринимают информацию.
Виды списков
В HTML-списки бывают трех видов:
- Упорядоченные списки.
- Неупорядоченные списки.
- Списки определений.
Что такое упорядоченный список?
Упорядоченный список это набор элементов, представленных в определенном порядке.Форма упорядоченного списка лучше всего подходит для представления наборов данных, где порядок элементов имеет значение.
Примерами могут послужить кулинарные рецепты, где действия следует выполнять в определенном порядке, или списки инструкций простые программы.
Похожие списки делают упорядоченными, потому что без нужной последовательности изложения эта информация теряет свой смысл. Упорядоченные списки также называют нумерованными.
Для создания упорядоченных списков
используется тег
( o rdered l ist — «упорядоченный список»), а для
каждого из его элементов — тег
HTML-код:
[html]
- Налейте воду в кастрюлю.
- Добавьте сахар, чайные листья и специи.
- Доведите до кипения и подержите на медленном огне около минуты .
- Добавьте молоко.
- Доведите до кипения и подержите на медленном огне 3-5 минут.
- Процедите чай и перелейте его в чайник. / li>
[/ html]
Результат:
- Налейте воду в кастрюлю.
- Добавьте сахар, чайные листья и специи.
- Доведите до кипения и подержите на медленном огне около минуты.
- Добавьте молоко.
- Доведите до кипения и подержите на медленном огне 3-5 минут.
- Процедите чай и перелейте его в чайник.
Значения по умолчанию:
По умолчанию пункты список обозначаются. арабскими цифрами.
Это можно изменить, используя разные значения CSS-свойства list-style-type .
список-стиль-тип: верхний альфа
Посмотреть перо Order-list-upper-alpha от Амриша Кушвахи (@isamrish) на CodePen.
список-стиль: верхний римский алфавит
Посмотреть перо упорядоченный список-верхний римский алфавит, автор Амриш Кушваха (@isamrish) на CodePen.
список-стиль-тип: нижний альфа
Посмотреть перо Order-list-lower-alpha от Амриша Кушвахи (@isamrish) на CodePen.
список-стиль: нижний римский алфавит
Посмотреть перо упорядоченный список-нижний-римский, Амриш Кушваха (@isamrish) на CodePen.
Это самые часто используемые значения свойства список-стиль-тип. Но есть множество других значений, которые мы рассмотрим дальше.
Что такое неупорядоченный список?
Неупорядоченный список это список с элементами, которые могут быть в представленном произвольном порядке. Такие списки также называют маркированными.
Примеры таких списков — списки покупок, списки запланированных дел.
Для создания упорядоченных
списков используется тег
( u nordered l ist), а для каждого из его
элементов — тег
HTML-код:
[html]
- одежда
- книги
- ручки
- ноутбук
- сумка
[/ html]
Результат:
- одежда
- книги
- ручки
- ноутбук
- сумка
Значения по умолчанию:
По умолчанию маркеры элементов в представлении виде кружочков.Это можно изменить, используя все то же CSS-свойство , стиль списка, тип .
список-стиль-тип: круг
Посмотреть перо unordered-list-circle от Амриша Кушвахи (@isamrish) на CodePen.
список-стиль: квадрат
Посмотреть перо unordered-list-square от Амриша Кушвахи (@isamrish) на CodePen.
list-style-type: диск
Посмотреть перо unordered-list-disc от Амриша Кушвахи (@isamrish) на CodePen.
Дальше мы разберем и другие варианты стилей.
Что такое список определений?
Список определений отличается тем, что каждый его пункт состоит из двух элементов. Первый из них — термин, а второй — его определение.
Вы можете создать
список определений при помощи тега
( d определение l ist — «список определений»).
В пунктах списка термины ( t erm)
при помощи тега
Например:
Посмотреть перо список определений Амриша Кушвахи (@isamrish) на CodePen.
Что такое вложенные списки?
Иногда бывают ситуации, когда вам нужно представить информацию в виде списка, причем его пункты сами могут быть отдельными списками. Такая структура называется вложенным списком.
Например:
Посмотреть перо вложенный список от Амриша Кушвахи (@isamrish) на CodePen.
Стиль списка
Для придания стилей списку используются три CSS-свойства.
тип списка
Как вы уже знаете, это свойство используется для стилизации маркеров списка (как упорядоченного, так и неупорядоченного).
Это свойство может принимать несколько значений:
- диск (круг)
- квадрат (квадрат)
- круг (окружность)
- десятичное (арабские цифры)
- низко-альфа (строчные латинские буквы, = нижняя латинская)
- нижнеримские (римские цифры в нижнем регистре)
- нижнелатинский (строчные латинские буквы, = нижняя альфа)
- нижнегреческий (строчные греческие буквы)
- альфа верхняя (заглавные латинские буквы, = верхняя латинская)
- верхнеримские (римские цифры в регистре)
- верхнелатынь (заглавные латинские буквы, = верхняя альфа)
С полным списком следующие значения свойства тип-стиль-список можно ознакомиться здесь.
изображение в стиле списка
Это свойство используется, чтобы в качестве маркера списка установить изображение. Свойство может принимать два значения: url изображения или нет .
Например:
Посмотреть перо list-style-image от Амриша Кушвахи (@isamrish) на CodePen.
значение свойства этого наследуется, для возвращение значения по умолчанию используется значение нет .
позиция стиля списка
Это свойство служит для определения положения маркера относительно элементов списка. Свойство list-style-position может принимать два значения: внутри (внутри) и снаружи (снаружи).
Пример применения значения внутри
Посмотреть перо list-style-position-inside, автор: Амриш Кушваха (@isamrish) на CodePen.
Пример применения значения за пределами
Посмотреть перо list-style-position-outside, автор: Амриш Кушваха (@isamrish) на CodePen.
А теперь давайте поиграем с цветами списка
Расцвеченный маркированный список
Вариант 1: элементы списка и маркеры имеют один цвет.
Посмотреть перо тот же цвет-неупорядоченный-список от Амриша Кушвахи (@isamrish) на CodePen.
Вариант 2: элементы списка и маркеры имеют разные цвета.
Посмотреть перо разный-цвет-неупорядоченный-список от Амриша Кушвахи (@isamrish) на CodePen.
Расцвеченный нумерованный список
Вариант 1: элементы списка и их номера имеют один цвет.
Посмотреть перо цветной-пронумерованный-список Амриша Кушвахи (@isamrish) на CodePen.
Вариант 2: элементы списка и их номера имеют разные цвета.
Посмотреть перо список с номерами разных цветов, автор: Амриш Кушваха (@isamrish) на CodePen.
Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!
.: элемент упорядоченного списка — Веб-технологии для разработчиков
HTML-элемент
используется для упорядоченного списка — в частности для пронумерованного списка.
Источник для интерактивного примера расположен в GitHub. Если вы желаете сделать вкладку в интерактивную часть, распакуйте https://github.com/mdn/interactive-examples и отправьте нам pull request.
Категории контента | Основной поток, и если дочерний элемент включает в себя хотя бы один , явный контент. |
---|---|
Разрешённое содержимое | Ноль или больше элементов, в свою очередь, содержащих вложенные элементы или . |
Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
Разрешённые родители | Любой элемент, который принимает основной поток. |
Разрешённые ARIA-роли | каталог , группа , список , меню , строка меню , радиогруппа , список вкладок , панель инструментов , дерево , презентация |
DOM-интерфейс | HTMLOListElement |
Свойства
Этот элемент включает глобальные атрибуты.
-
сторнированный
- Атрибут логического значения (bool) показывает, что указано по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.
-
начало
- Нумерация начнется с числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация
введите
в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы «г» или Римской «iv», використовуйтеstart = "4"
. -
тип
- Задаёт тип нумерации:
-
а
для строчных букв -
A
для заглавных букв -
и
для строчной Римской нумерации -
I
для заглавной Римской нумерации -
1
для цифр (по умолчанию)
, тип используется для всего списка, если только не указан любой другой аттрибут
, тип
в элементе
.Примечание: Если тип цифр в списке не имеет значений (к примеру, юридические или технические документы, где элементы обозначены обозначениями / цифрами), используйте свойство CSS
list-style-type
. -
Заметки об использовании
Обычно, элементы списка отображены с маркером, предшествующим цифрам или буквам.
Элементы
и
могут быть вложены (вложены) на любом уровне, передуясь между элементами
и
.
Оба элемента
и
используются для списков. Различие лишь в том, что в элементе
порядок имеет значение, как в примерах:
- Инструкции рецепта
- Направление по заданному
- Список ингридиентов на информации о питании, в убывающих пропорциях.
Чтобы определить, каким списком пользоваться, можно поменять порядок элементов с списке.Если значение меняется, використовуйте элемент
— в противном случае
.
Примеры
Обычный список
- Комиссия
- Fi
- Fo
- Фум
Результат HTML кода выше:
Список с Римскими числами
- Введение
- Список приветствий
- Заключение
Результат HTML кода выше:
Используя свойство start
Итоговые места конкурсантов не в круге победителей:
- Speedwalk Stu
- Сонтерин Сэм
- Slowpoke Rodriguez
Результат HTML кода выше:
Вложенный список
- первый элемент
- второго элемента тега здесь нет! ->
->
- второй элемент первый подпункт
- второй элемент второй подпункт
- второй элемент третий подпункт
- третий пункт
Результат HTML кода выше:
Неупорядоченный список внутри упорядоченного списка
- первый элемент
- второго элемента тега здесь нет! ->
->
- второй элемент первый подпункт
- второй элемент второй подпункт
- второй элемент третий подпункт
- третий пункт
Результат HTML кода выше:
Спецификации
браузерами Поддержка
Таблица «поддержка браузерами» сгенерирована с помощью структурированных данных.Если хотите внести вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам pull request. Обновите данные о совместимости на GitHubКомпьютеры | Мобильные | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Chrome для Android | Chrome для Android | Opera для Android | Safari на iOS | Samsung Internet | ||
ol | Chrome Полная поддержка Да | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Интернет Android Полная поддержка Да | ||
компакт Устаревшая Нестандартная | Хром Полная поддержка Да | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Интернет Android Полная поддержка Да | ||
обратное | Хром Полная поддержка 18 | Край Полная поддержка ≤79 | Firefox Полная поддержка 18 | IE Нет поддержки Нет | Opera Полная поддержка Да | Safari Полная поддержка 6 | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 18 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Интернет Android Полная поддержка Да | ||
старт | Хром Полная поддержка Да | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Интернет Android Полная поддержка Да | ||
тип | Хром Полная поддержка Да | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Интернет Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Нестандартная.Ожидается плохая кросс-браузерная поддержка.
- Нестандартная. Ожидается плохая кросс-браузерная поддержка.
- Устаревшая. Не следует использовать в новых веб-сайтах
- Устаревшая. Не следует использовать в новых веб-сайтах
Смотрите также
- Другие элементы HTML списка:
,
, - CSS свойства, которые могут быть полезны для стилизации
элемента:- свойство
в стиле списка
, для порядковых показов - CSS счётчики, для более сложных вложенных списков
- свойство line-height, для замены убранного свойства compact
- Свойство маржи, для контроля отступа в списке
- свойство