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

Обновлено: 05.07.2024

HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

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

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег имеет следующий синтаксис:

Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:

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

Пошаговая инструкция

1. Достать ключ
2. Вставить ключ в замок
3. Повернуть ключ на два оборота
4. Достать ключ из замка
5. Открыть дверь

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

Здесь: type – символы списка:

• A — прописные латинские буквы (A, B, C . . .);
• a — строчные латинские буквы (a, b, c . . .);
• I — большие римские цифры (I, II, III . . .);
• i — маленькие римские цифры (i, ii, iii . . .);
• 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега .
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:

Пример: Применение атрибутов type и start.

1. Перепела
2. Фазаны
3. Куропатки
4. Павлины

Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу следующим образом:

В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.

Пример использования атрибута value тега , который позволяет изменить номер данного элемента списка:

Пример: Применение атрибута value

1. Первый пункт списка
2. Второй пункт списка
3. Третий пункт списка

В этом примере "Первый пункт списка" будет иметь номер 1, "Второй пункт списка" – номер 7, а "Третий пункт списка" – номер 8.

Форматирование нумерованных списков с помощью CSS

Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:

Стили оформления нумерованных списков

Пример	Значение	Описание
а, Ь, с	lower-alpha	Строчные буквы
А, В, С	upper-alpha	Прописные буквы
i, ii, iii	lower-roman	Римские цифры, набранные строчными буквами
I, II, III	upper-roman	Римские цифры, набранные прописными буквами

На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:

Пример: Применение свойства CSS list-style-type

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

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

Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
Тег имеет следующий синтаксис:

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

Пример: Маркированный список

• Windows Movie Maker
• Pinnacle VideoSpin
• AviSynth
• Avidemux

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

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

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

Пример: Вложенные списки

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

Форматирование маркированных списков

Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:

Стили оформления маркированного списка

Значение	Описание
disc	маркер в форме кружков с заливкой
circle	маркер в форме кружков без заливки
square	маркер в форме квадрата с заливкой
none	пункты списка без маркера

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

Списки HTML — это набор взаимосвязанных элементов, которые начинаются с маркера. В этой статье я расскажу о HTML-списках. Статья рассчитана на новичков (школьников и студентов) но может быть полезна всем кто изучает HTML.

Виды HTML-списков

Списки бывают следующих видов:

. Перед элементом списка идет маркер. . Перед элементом списка идет номер. . Перед определением идет термин. . . Список состоит из нескольких уровней. может быть маркированным. нумерованным и комбинированным.

Так же в этом материале я расскажу, как сделать выпадающий список.

Рассмотрим каждый вид подробнее.

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

— unordered list (неупорядоченный список). Стандартный маркер — точка.

Стиль по умолчанию:

display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

• Лев
• Тигр
• Леопард
• Снежный барс

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

• Disc — точка.
• Crcle — круг.
• Square — квадрат.
• None — убирает маркер.

• Лев
• Тигр
• Леопард
• Снежный барс

Получим следующий результат:

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

— order list (упорядоченный список). Стандартно список нумеруется арабскими (традиционными) числами.

Стиль по умолчанию:

display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

1. Лев
2. Тигр
3. Леопард
4. Снежный барс

Тип номера так же, как и в маркированном списке, задается с помощью свойства list-style-type. Возможные значения:

• Armenian — армянская нумерация.
• Decimal — арабская нумерация.
• Decimal-leading-zero — арабская нумерация с нулем впереди чисел меньше десяти, то есть 01, 02, 03 и так далее.
• Georgian — грузинская нумерация.
• Lower-alpha (lower-latin) — строчные латинские буквы.
• Lower-greek — строчные греческие буквы.
• Lower-roman — римские числа в нижнем регистре, например i, ii.
• Upper-alpha (upper-latin) — заглавные латинские буквы.
• Upper-roman — римские числа в верхнем регистре, например I, II.
• None — без нумерации.

в отличии элемента имеет атрибуты.

Атрибуты тега

Атрибут	Описание	Возможные значения
reversed	Указывает, что элементы списка расположены в обратном порядке.	Нет.
start	Задает первый порядковый номер списка.	Число.
type	Задает тип номера для использования в списке.	1: Десятичный: 1, 2, 3 и так далее. (По умолчанию) a: строчные буквы латинского алфавита: a, b, c и так далее. A: прописные буквы латинского алфавита: A, B, C и так далее. i: римские цифры в нижнем регистре: i, ii, iii и так далее. I: римские цифры в верхнем регистре: I, II, III и так далее.

1. Первый элемент
2. Второй элемент
3. Третий элемент

1. Первый элемент
2. Второй элемент
3. Третий элемент

1. Первый элемент
2. Второй элемент
3. Третий элемент

1. Первый элемент
2. Второй элемент
3. Третий элемент

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

Список определений создается с помощью тега — description list (список определений). Список определений состоит из пары термин — определение. Термин создается с помощью тега , а описание с помощью тега .

Стиль по умолчанию (тега ):

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;

Собака Домашнее животное, одно из наиболее популярных (наряду с кошкой) животных-компаньонов. HTML Язык гипертекстовой разметки. Язык, используемый для форматирования веб-документов.

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

Аналогично можно вкладывать списки уже во вложенные элементы.

Многоуровневый список

Многоуровневым считают нумерованный список. Его отличие от вложенного списка в том, что бы нумерация шла по порядку.

1. Элемент списка
2. Элемент списка
3. Элемент списка
4. Элемент списка
5. Элемент списка
   1. Элемент списка
   2. Элемент списка
   3. Элемент списка
   4. Элемент списка
   5. Элемент списка
   6. Элемент списка

   
   

   Результат.
   

   Выпадающий список

   Как сделать выпадающий список в HTML? Довольно просто, с помощью тега

   Элемент с атрибутом selected будет выбранным, то есть стоять в начале выпадающего списка. Его можно оставить пустым.

   Расшифровка и перевод используемых тегов

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

   Тег	Значение	Перевод
   	Unordered list	Неупорядоченный список
   	List item	Элемент списка
   	Order list	Упорядоченный список
   Description list	Список описаний (определений)
   Description list term	Термин (списка описаний)
   Description list description	Описание термина (списка описаний)
   Select	Выбор
   Option	Вариант.

   На этом изучение списков HTML заканчивается.

   
   

   Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

   Но затем я вспомнил о некоторых замечательных CSS свойствах. Полистав спецификацию, я понял, что задача решаема, и при этом будет сохранена семантика в HTML.

   Итак, многоуровневый список:

   1. Максим Горький
      1. Автобиографические повести
         1. Детство
         2. В людях
         3. Мои университеты
         1. Мещане
         2. На дне
         3. Дачники
         1. Фома Гордеев
         2. Трое
         3. Мать
         1. Повести
            1. Степь
            2. Дуэль
            3. Мужики
            1. Дядя Ваня
            2. Три сестры
            3. Вишневый сад
            1. Ионыч
            2. Крыжовник
            3. Человек в футляре

            Исходный код этого примера:

            Обратите внимание на пробел во фрагменте ". " . С его помощью мы создаём отступ между нумерацией и текстом.

            HTML-код получается простым и семантически верным.

            Теорию про счётчики и автоматическую нумерацию можно почитать в спецификации.

            Автор: Шуркаев Александр Владимирович
            Источник: Заметки HTML кодера

            Этот урок сложнее предыдущего, по этому советую не отвлекаться и максимально сконцентрироваться на материале. Списки бывают четырех видов. Это нумерованные списки, маркированные, многоуровневые и списки определений. Теперь давайте разберемся с каждым в порядке очереди. Наш урок будет состоять из 4-ех частей. Поехали!

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

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

            Нумерованный список открывается с помощью тега <ol> и закрывается соответственно тегом </ol>. Каждая отдельная позиция (элемент) списка находится внутри тега <li>. Теперь давайте сами создадим нумерованный список, код будет выглядеть так:

            
            

            Сохраняем внесенные изменения в Notepad и открываем файл в браузере:

            
            

            По умолчанию нумерация списка всегда начинается с 1. Если Вам необходимо, чтобы нумерация начиналась, например, с 5, то для тега <ol> нужно задать атрибут start и дать ему значение 5.

            
            

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

            По умолчанию элементы списка нумеруются при помощи цифр, однако стиль нумерации можно изменить используя для тега <ol> атрибут type, которому можно задавать значения 1, A, a, I, i.
            1 - 1, 2, 3, 4. (задается по умолчанию)
            A - A, B, C, D.
            a - a, b, c, d.
            I - I, II, III, IV.
            i - i, ii, iii, iv.

            К примеру, если мы хотим, чтобы наш список нумеровался при помощи маленьких латинских букв, то для тега <ol> нужно задать атрибут type со значением a. На практике это будет выглядеть так:

            
            

            Маркированный список html.

            Маркированные списки html используются для перечисления позиций (элементов) списка которые не требуют строгой нумерации и могут располагаться в произвольном порядке.

            Маркированный список открывается с помощью тега <ul> и закрывается соответственно тегом </ul>. Каждая отдельная позиция (элемент) списка находится внутри тега <li>, так же как и в случае с нумерованным списком.

            По умолчанию элементы списка всегда маркируются черным кружком, стиль маркировки можно изменить используя для тега <ul> атрибут type, которому можно задавать значения disc, circle, square.
            disc - (задается по умолчанию)
            circle -
            square -

            Теперь давайте создадим список используя для маркировки черные квадратики (square).

            
            

            Многоуровневый список html.

            Многоуровневый список html - это список, который содержит в себе еще один или несколько списков. Многоуровневый список может состоять как из нумерованных, так и из маркированных списков. Чтобы его создать нужно один обычный список "вложить" в другой обычный.

            Каждый отдельный элемент списка находиться между тегами <li> и </li>. Для создания многоуровневого списка нужно между этими тегами, помимо текста вставить еще один список. Без наглядного примера в этом сложно разобраться, так что все внимание на рисунок:

            
            

            Мы сделали многоуровневый список из сочетания нумерованного и маркированного списка. Как видите в основе лежит нумерованный список открывающийся тегом <ol> и закрывающийся тегом </ol>. Первый элемент нашего нумерованного списка открывается тегом <li>, затем, как обычно, идет текст, а далее вместо того чтобы закрыть элемент списка тегом </li>, мы вставляем еще один полноценный маркированный список. И только после этого мы закрываем элемент списка тегом </li>. Затем уже идут следующие элементы нашего основного нумерованного списка.

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

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

            Список определений открывается тегом <dl> и закрывается тегом </dl>. Каждый отдельный термин заключается между <dt> и </dt>. Далее пишется определение к термину, оно находится между тегами <dd> и </dd>.

            Сейчас мы сделаем список определений состоящий из двух терминов. Код будет следующим:

            
            

            Сохраняем изменения и смотрим результат в браузере:

            
            

            * Вот мы и рассмотрели все варианты списков html. Из своего опыта могу сказать, что многоуровневые списки используются не часто, списки определений еще реже. Самое главное, что Вы должны из этого урока усвоить - это принцип составления списков. Настоятельно советую попрактиковаться с многоуровневыми списками.

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

              
            • Как сделать так чтобы копчик перестал болеть
              
            • Как сделать производственный анализ
              
            • Как сделать так чтобы не показало алкоголь перед полицией
              
            • Как сделать коэффициент
              
            • Как сделать полигонное удостоверение