Html ol многоуровневый список: Многоуровневый список — Разметка текста — HTML Academy

Содержание

Как сделать многоуровневый нумерованный список на html + css, чтобы многоуровневый список отображался в Word?

Данный пример в браузере отображается, как многоуровневый нумерованный список, а в word как одноуровневый нумерованный список

<HTML>
            <HEAD>
                <STYLE>
					ol {
					/* убираем стандартную нумерацию */
					list-style: none; 
					/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ 
					counter-reset: li; 
					}
					li:before {
					/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
					counter-increment: li; 
					/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем.
Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; } </STYLE> </HEAD> <BODY> <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> </BODY> </HTML>
  • html
  • css
  • ms-word

6

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

Вложенные или многоуровневые списки предназначены для организации сложной иерархической структуры текста, обычно таких документов, как юридические или технические. Реально на веб-странице нельзя автоматически ввести многоуровневую нумерацию типа использования подпунктов 1.1 или 2.1.3. Поэтому приходится вводить числа отдельно или упрощать отображение списка. Так в примере 1 пункты и подпункты списка обозначаются числами.

Пример 1. Создание многоуровневого списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Списки</title> </head> <body> <ol> <li>Русская кухня <ol> <li>Уха бурлацкая</li> <li>Бабушкина тюря</li> <li>Растегай</li> </ol> </li> <li>Украинская кухня</li> <li>Молдавская кухня</li> <li>Кавказская кухня</li> <li>Прибалтийская кухня</li> </ol> </body> </html>

Результат действия данного примера приведён на рис. 1. Второй список <ol> вкладывается внутрь элемента <li> сразу же после текста пункта. Обратите внимание, что у подпунктов имеется отступ слева, но нет вертикальных отступов сверху и снизу списка.

Рис. 1. Вид многоуровневого списка

Альтернативно можно использовать в качестве подпунктов латинские буквы или римские цифры (пример 2).

Пример 2. Представление многоуровневого списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Списки</title> <style> ol li { font-weight: bold; /* Выделение пунктов */ } ol ol { list-style: lower-alpha; /* Тип нумерации подпунктов */ } ol ol li { font-weight: normal; /* Оформление подпунктов */ } </style> </head> <body> <ol> <li>Русская кухня <ol> <li>Уха бурлацкая</li> <li>Бабушкина тюря</li> <li>Растегай</li> </ol> </li> <li>Украинская кухня</li> <li>Молдавская кухня</li> </ol> </body> </html>

Применение стилей также позволяет по-разному выделять и оформлять пункты и подпункты (рис.

 2).

Рис. 2. Выделение пунктов списка

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

списки

См. также

  • <ol>
  • <ul>
  • Нумерованные списки
  • Создание списков
  • Списки
  • Текст в HTML

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

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

Список описаний
Ctrl+

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

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

Пример отображения упорядоченного списка с вложенными счетчиками со значением «блок» свойства отображения:

 

  <голова>
    Название документа
    <стиль>
      пр {
        сброс счетчика: пункт;
      }
      ли {
        дисплей: блок;
        цвет: #666666;
      }
      ли: до {
        содержимое: counters(item, ".") " ";
        счетчик-приращение: элемент;
      }
    
<тело> <ол>
  • Элемент 1 <ол>
  • Подэлемент 1
  • Подэлемент 2
  • Подэлемент 3
  • Элемент 2
  • Элемент 3 <ол>
  • Подэлемент 1
  • Подэлемент 2
  • Подэлемент 3
  • Попробуй сам »

    Результат

    1. Элемент 1
      1. Подэлемент 1
      2. Подэлемент 2
      3. Подэлемент 3
    2. Элемент 2
    3. Элемент 3
      1. Подэлемент 1
      2. Подэлемент 2
      3. Подэлемент 3

    В приведенном выше примере мы установили для свойства display значение «block» для элемента

  • .
    Мы применили псевдоэлемент :before, а затем добавили свойства content и counter-increment. Для элемента
      мы указали для свойства counter-reset значение «item».

      Давайте посмотрим на другой пример.

      Пример отображения упорядоченного списка с вложенными счетчиками со значением table свойства display:

       
      
        <голова>
          Название документа
          <стиль>
            пр {
              тип стиля списка: нет;
              сброс счетчика: пункт;
              маржа: 0;
              заполнение: 0;
            }
            ли {
              дисплей: таблица;
              счетчик-приращение: элемент;
              нижняя граница: 0.6em;
            }
            ли: до {
              содержимое: counters(item, ".") ". ";
              отображение: таблица-ячейка;
              отступ-справа: 0.6em;
            }
            ли ли {
              маржа: 0;
            }
            ли ли: до {
              содержимое: counters(item, ".") " ";
            }
          
        
        <тело>
          <ол>
            
    1. Элемент 1 <ол>
    2. Подэлемент 1
    3. Подэлемент 2
    4. Подэлемент 3
  • Элемент 2
  • Элемент 3 <ол>
  • Подэлемент 1
  • Подэлемент 2
  • Подэлемент 3
  • Попробуй сам »

    Здесь мы установили для отображения элемента

  • значение «table» и использовали значение «table-cell» для псевдоэлемента :before, примененного к элементу
  • .

    Как создать вложенный список в HTML?

    Обзор

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

    Предварительные условия

    Должен быть знаком с тегами HTML

      ,
        и
      • . Кроме того, вы знакомы со свойством псевдоэлементов в CSS.

        Что такое вложенность списка?

        На изображении выше неупорядоченный список вложен в упорядоченный список. Он содержит упорядоченный список транспортных средств, а также неупорядоченный список их типов.

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

        Вы можете вкладывать списки любой глубины. Однако это может стать сложным из-за слишком глубокого вложения списков. Для очень длинных списков лучше разделить материал на множество списков с заголовками или даже на отдельные страницы. Разумное эмпирическое правило — избегать списков вложенности глубже трех уровней.

        Создание вложенного списка в HTML

        В документах HTML вы будете использовать элементы HTML \

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

            Однако ни один из этих двух способов не создает полностью рабочий список без HTML-элемента \

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

            Для создания простого списка в HTML:

            1. Вы должны использовать тег \
                или \
                  для описания порядка вашего списка. Для создания неупорядоченного списка используйте тег \
                    , а для создания упорядоченного списка используйте тег \
                      .
                    1. После этого вы должны указать информацию, которую необходимо отобразить, используя тег \
                    2. . Этот тег следует указывать внутри тега \
                        или \
                          .

                        Вложенный неупорядоченный список в HTML

                        • В HTML неупорядоченные списки представляют собой наборы объектов, которые не обязательно должны находиться в какой-либо определенной последовательности. Чтобы перечислить эти элементы, мы часто используем короткие маркеры.
                        • Тег \
                            можно использовать для создания ненумерованного списка.
                            Затем, используя тег \
                          • , перечислите все, что вы хотите включить в свой список.
                          • Тег \
                              , обозначающий неупорядоченный список, является родительским для тега \
                            • , или мы можем просто сказать, что тег \
                            • является дочерним по отношению к тегу \
                                .
                              • Первым дочерним элементом тега \
                                  всегда будет тег \
                                • , после которого можно вложить еще один тег \
                                    или \
                                      , чтобы создать вложенный упорядоченный/неупорядоченный список.
                                   
                                   
                                  
                                  <голова>
                                     Ненумерованный список 
                                  
                                  <тело>
                                     

                                  Вложенный неупорядоченный список

                                  <ул>
                                • Языки программирования
                                • <ул>
                                • С
                                • С++
                                • Ява
                                • Питон
                              • ДПО
                              • <ул>
                              • Массив
                              • Связанный список
                              • стек
                              • Очередь
                              • Деревья
                              • Графики
                            • Веб-технологии
                            • <ул>
                            • HTML
                            • CSS
                            • JavaScript
                            • Автозагрузка
                            • Реакция JavaScript

                          Результат приведенного выше кода:

                          Вложенный упорядоченный список в HTML

                          • В HTML упорядоченные списки — это списки, в которых важен порядок элементов.
                          • Тег \
                              можно использовать для создания упорядоченного списка. Затем, используя тег \
                            1. , перечислите все, что вы хотите включить в свой список.
                            2. Тег \
                                , обозначающий упорядоченный список, является родительским для тега \
                              1. , или мы можем просто сказать, что тег \
                              2. является дочерним по отношению к тегу \
                                  .
                                1. Первым дочерним элементом тега \
                                    всегда будет тег \
                                  1. , после которого можно вложить еще один тег \
                                      или \
                                        , чтобы создать вложенный упорядоченный/неупорядоченный список.
                                     
                                     
                                    
                                    <голова>
                                       упорядоченный список 
                                    
                                    <тело>
                                       

                                    Вложенный упорядоченный список

                                    <ол>
                                  2. Языки программирования
                                  3. <ол>
                                  4. С
                                  5. С++
                                  6. Ява
                                  7. Питон
                                2. ДПО
                                3. <ол>
                                4. Массив
                                5. Связанный список
                                6. стек
                                7. Очередь
                                8. Деревья
                                9. Графики
                              3. Веб-технологии
                              4. <ол>
                              5. HTML
                              6. CSS
                              7. JavaScript
                              8. <ол>
                              9. Реагировать
                              10. Угловой
                              11. Вью
                            3. Автозагрузка

                    Результат приведенного выше кода:

                    Стилизация с помощью CSS

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

                    Пример 1: Как оформить элементы списка с помощью кружков

                     
                     
                    
                    <голова>
                       Ненумерованный список 
                    <стиль>
                    ул {
                        тип стиля списка: круг;
                    }
                    
                    
                    <тело>
                    <ул>
                        
                  • Элемент 1
                  • Элемент 2
                  • Элемент 3
                  • Элемент 4
                  • Элемент 5

                  Вывод приведенного выше кода:

                  Пример 2: Как оформить элементы списка квадратами

                   
                   
                  
                  <голова>
                     Ненумерованный список 
                  <стиль>
                  ул {
                      тип стиля списка: квадратный;
                  }
                  
                  
                  <тело>
                  <ул>
                      
                1. Элемент 1
                2. Элемент 2
                3. Элемент 3
                4. Элемент 4
                5. Элемент 5

              Вывод приведенного выше кода:

              Пример 3: Как оформить элементы списка с помощью эмодзи

               
               
              
              <голова>
                 Список животных
              <стиль>
              ул {
                  тип стиля списка: нет;
                  заполнение: 0;
                  маржа: 0;
              }
              /*первый элемент списка*/
              li:nth-child(1)::before{
                  содержание: "🐶";
              }
              /*второй элемент списка*/
              li:nth-child(2)::before{
                  содержание: "🐱";
              }
              /*третий элемент списка*/
              li:nth-child(3)::before{
                  содержание: "🐒";
              }
              /*четвертый элемент списка*/
              li:nth-child(4)::before{
                  содержание: "🐍";
              }
              /*пятый элемент списка*/
              li:nth-child(5)::before{
                  содержание: "🐀";
              }
              
              
              <тело>
              <ул>
                  
            2. Собака
            3. Кот
            4. Обезьяна
            5. Змея
            6. Крыса

        Вывод приведенного выше кода:

        Пример 4: Как удалить стили из элементов списка

         
         
        
        <голова>
           Ненумерованный список 
        <стиль>
        ул {
            тип стиля списка: нет;
        }
        
        
        <тело>
        <ул>
          
      • Элемент 1
      • Элемент 2
      • Элемент 3
      • Элемент 4
      • Элемент 5

      Вывод приведенного выше кода:

      Заключение

      • Вложенные списки в HTML могут быть легко созданы путем объединения различных элементов HTML и вложения элементов друг в друга.
  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *