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


Содержание
Илон Маск рекомендует:  Asp динамический html

Вложенные списки с автоматической нумерацией

Списки активно используются для автоматической нумерации блоков контента. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в ШТМЛ, можно возложить на стили.

Илон Маск рекомендует:  Шаблон сайта дизайн галереи HTML, CSS, 1 страница

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


    , а элементы списка формируются тегами
    . Вложенный список также начинается с

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

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

    Ниже представлен пример вложенных списков:

    Тег элемента списка
    может иметь атрибуты:

    в зависимости от того, в списке какого вида находится данный элемент.

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

    Список определений начинается с тега и завершается тегом . Данный список служит для создание списков типа «термин»-«описание». Каждый термин начинается тегом , а описание — тегом . Например:

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

    Данный отдел занимается всеми финансовыми операциями

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

    Не нашли то, что искали? Воспользуйтесь поиском:

    Лучшие изречения: Студент — человек, постоянно откладывающий неизбежность. 10526 — | 7315 — или читать все.

    188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

    Отключите adBlock!
    и обновите страницу (F5)

    очень нужно

    HTML Списки

    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

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

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

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

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

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

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

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

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

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

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

    Списки встречаются везде. Они используются для:

    • разбивки больших сегментов текста на части;
    • выделения важных моментов;
    • изложения « плана действий » и перечня мероприятий ( нумерованный список в HTML ).

    Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице?

    Маркированные списки (или ненумерованные списки)

    Первый вид списка, который мы рассмотрим, это маркированный.

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

    Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов . Ниже приводится простой его пример:

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

    Атрибут type

    Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов ( в том числе и в нумерованном списке HTML ):

    Элементы списка — тег

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

  1. . Часто можно обойтись и без
  2. , но я бы рекомендовал придерживаться этого правила.

    Приведенный выше список помещен в отдельный тег

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

    Отступ маркированного списка

    Перед тем, как к списку будет применен любой стиль CSS , HTML ( а точнее браузер ) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом

    Упорядоченный / нумерованный список — тег

    Если вы хотите упорядочить элементы списка, тогда тег

      поможет в этом. По умолчанию он задает нумерованный список HTML :

    что на выходе дает нам:

    A. Элемент 1
    B. Элемент 2
    C. Элемент 3

    Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.

    Начало нумерованного списка с определенного номера

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

    Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 ( или буквы А ). Это бы внесло неразбериху в ваше руководство!

    К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера:

    Что дает нам следующее:
    4. Шаг четыре
    5. Шаг пять
    6. Шаг шесть

    Обратный порядок

    Если вы хотите вывести номера ( или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed :

    В результате список будет выглядеть следующим образом:
    5. Пятый пункт.
    4. Четвертый пункт.
    3. Третий пункт.
    2. Второй пункт.
    1. Первый пункт.

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

    С помощью установленных в браузерах патчей поддержки ( и иногда с помощью отмены CSS для некоторых сайтов ) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой:

    • Элемент верхнего уровня
    o Подчиненный элемент 1
    o Подчиненный элемент 2
    • Элемент верхнего уровня

    Вы можете использовать комбинацию тегов

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

    1. Элемент верхнего уровня
    o Подчиненный элемент 1
    o Подчиненный элемент 2
    2. Элемент верхнего уровня

    Используйте нумерованные списки HTML на своих страницах.

    Заключение

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

    Данная публикация представляет собой перевод статьи « Numbered and Bullet Point Lists in HTML » , подготовленной дружной командой проекта Интернет-технологии.ру

    HTML списки

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

    • Нумерованный (упорядоченный) список.
    • Маркированный (неупорядоченный) список.
    • Список описаний.
    • Список контекстных меню.

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

    Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега (сокращенное от английского ordered list — упорядоченный список). Каждый элемент списка начинается с тега (элемент списка).

    Давайте рассмотрим примеры использования:

    Выглядеть на странице это будет соответственно так:

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

    Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега

      .

    Выглядеть на странице это будет соответственно так:

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

    Ещё один интересный атрибут — type, который позволит Вам задать буквенную нумерацию ( «A» – большие, «a» – строчные), либо нумерацию из римских цифр ( «I» – в верхнем регистре, «i» – в нижнем регистре).

    Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):

    Результат нашего примера:

    Рис. 14 Виды нумерованных списков.

    Еще один нюанс: при использовании атрибута start с буквами (type = «A» и type = «a» ), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = «4» , будет соответствовать букве «D» и список начнётся именно с неё. При использовании значения start = «27» счетчик обнуляется, при этом список становится двухзначным ( «27» = «AA», «28» = «AB», «29» = «AC». ). Значения должны быть целочисленными, допускается использование отрицательных значений.

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

    Выглядеть на странице это будет соответственно так:

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

    Но и это еще не все, атрибут reversed элемента позволяет задать, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.

    Выглядеть на странице это будет соответственно так:

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

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

    По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга.

    Давайте рассмотрим примеры использования:

    Выглядеть на странице это будет соответственно так:

    Забегая вперед, скажу, что каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть сделано с использованием глобального атрибута style. Более подробно этот атрибут будет рассмотрен в следующей статье «HTML стили».

    Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера. Возможные значения свойства:

    Атрибут Значение
    list-style-type:none Убирает маркер.
    list-style-type:disc Маленький черный круг. Это значение по умолчанию.
    list-style-type:circle Круг пустой внутри.
    list-style-type:square Маркер в виде квадрата.

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

    Результат нашего примера:

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

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

    • Первый пункт
      • Первый пункт
        • Первый пункт
          • Первый пункт
          • Второй пункт
          • Третий пункт
        • Второй пункт
        • Третий пункт
      • Второй пункт
      • Третий пункт
    • Второй пункт
    • Третий пункт

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

    Списки описаний используются для формирования пар типа «имя/значение» / «вопрос/ответ» и т.п.

    Тэг (HTML Description List Element) определяет список, тэг (HTML Definition Term Element) определяет его имя, а тег (HTML Description Element) описывает его значение.

    Рассмотрим пример использования:

    Как вы можете заметить значение списка описаний (элемент ) имеет по умолчанию внешний отступ с левой стороны равный 40 пикселям:

    Рис. 16 Список описаний.

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

    Маркированные (неупорядоченные), нумерованные (упорядоченные) и списки описаний внутри себя могут содержать элементы нового списка (внутри элементов списка / значений списка), другие элементы HTML, такие как, изображения, ссылки и т.д. Списки можно размещать горизонтально, формировать из них меню навигации и так далее. Более подробно о возможностях CSS (каскадных таблицах стилей) и некоторых особенностях HTML 5 вы узнаете позднее.

    Список контекстных меню

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

    Тег определяет элемент команды / меню, который пользователь может вызвать из контекстного меню.

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

    Тег Chrome Firefox Opera Safari IExplorer Edge
    Нет 8.0 Нет Нет Нет Нет

    Рассмотрим пример для расширения кругозора:

    Для тех у кого браузер не отображает результат:

    и .»>
    Использование глобального атрибута contextmenu , тегов и .

    Вопросы и задачи по теме

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

    • Используя полученные знания составьте следующие HTML списки:

    Практическое задание № 6.

    Практическое задание № 7.

    Практическое задание № 8.

    Практическое задание № 9.

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

    Кажется, вы используете блокировщик рекламы :(

    Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

    Компьютерные уроки, статьи и советы по настройке компьютера и сетевой работе — создание, оптимизация и продвижение сайтов и блогов в Сети Интернет, программирование HTML, XHTML, CSS и ява-скрипт

    Установка и загрузка ОС Виндовс

    Списки в HTML (XHTML)

    Списки в HTML (XHTML) используются для оформления и форматирования видимой текстовой части html-документа. Дополнительно, на основании кодов списков, в HTML-разметке веб-страницы создаются и группируются элементы управления и навигации – кнопочки и менюшки (простые и выпадающие). Коды списков языка гипертекстовой разметки HTML ничем не отличаются от кодов списков XHTML.

    Код и видимая часть списков HTML

    Равно как и все объекты веб-страницы, списки в HTML имеют две составляющие – код списка и его видимую часть (интерпретацию кода). Код списка HTML невидим пользователю. Код записывается в HTML-разметку веб-документа и интерпретируется браузером непосредственно на экран монитора пользователя – это будет видимая часть списка.

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

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

    Теги списков в HTML

    Для создания кода списков в HTML используются теги:

      ,
        и
        , а также , и
        Все теги парные – закрывающий тег обязателен.
        Теги списков в HTML создают и обозначают:
      • – маркированный список
        1. – нумерованный список
        2. – элементы (строки) маркированного и нумерованного списков
        3. – список определений
        4. – элемент-термин в списке определений
        5. – элемент-описание в списке определений

      Как создать список в html

      Чтобы создать список в веб-документе, нужно в его HTML-разметке написать html-код списка. Код любого html-списка начинается и заканчивается обрамляющими (оборачивающими) тегами (ol, ul, dl) которые указывают браузеру на вид списка. Между оборачивающими (обрамляющими) тегами располагаются элементы списка, обёрнутые, в свою очередь – тегами элементов списка (li, dd, dt).

      Существует множество визуальных html-редакторов, облегчающих работу по созданию разнообразных списков. В этой статье, речь – непосредственно про коды списка на веб-странице. Выбор способа создания кода, в Notepad-е (блокноте) или в хитрющем html-редакторе – личное дело юзера. Практически все текстовые html-редакторы слишком упрощённо подходят к созданию html-списков.

      Маркированный html-список | Теги
        и

      Код маркированного списка начинается с открывающего тега

        . Потом идут элементы, обрамлённые парными тегами . Код маркированного списка заканчивается закрывающим тегом

      . Пример кода маркированного списка:

      Выглядит в браузере:

      • Раз элемент
      • Два элемент
      • Три элемент

      Маркированный (неупорядоченный) список по-англицки звучит, как Unordered List. Становится понятной аббревиатура его обрамляющего тега – (Unordered List). Написание тега заглавными литерами – . В спецификации HTML нет верхнего регистра. Правильно писать –

      Нумерованный html-список | Теги
        и

      Код нумерованного списка ничем не отличается от кода маркированного списка, с той разницей, что обрамляющие список теги

        заменяются на
          (анг. Ordered List – нумерованный, упорядоченный список). Код нумерованного списка открывает тег
            . Внутри находятся элементы, обрамлённые парными тегами, вида
          1. элемент . Закрывается код нумерованного списка тегом

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

      Выглядит в браузере:

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

      Многоуровневые (вложенные списки)

      Вложенные (многоуровневые, ступенчатые) списки в HTML представляют наибольший интерес. Чтобы создать многоуровневый вложенный список в HTML, нужно в код одного списка вставить код другого списка. Код вложенного списка вставляется в виде отдельного элемента, между тегами . Порядок и степень вложения не имеет значения. Допускается вкладывать маркированный список в нумерованный и наоборот, на любую глубину и пока не надоест. Браузер всё вытерпит. Пример кода многоуровневого списка со вложенными списками (код основного списка обозначен синим цветом, первого вложенного – жёлтым, второго вложенного – зелёным):

      Выглядит в браузере:

      1. Первый элемент основного списка
        1. Раз (вложенный список)
        2. Два (вложенный список)
        3. Три (вложенный список)
          • 1 (второй вложенный)
          • 2 (второй вложенный)
          • 3 (второй вложенный)
      2. Второй элемент основного списка
      3. Третий элемент основного списка

      Список определений | Теги , и

      Список определений (описаний, объяснений) – перечень терминов и пояснений к ним. Этот вид текстовой записи списка специально придуман для объяснения и описания терминов и определений, например – описания списка товаров. Список определений отличается от обычных списков. Элементы списка определений разделены на две части – слово (термин) и его описание (определение, пояснение для этого слова или термина).

      Код списка определений начинается открывающим тегом (анг. Definition Lists – список определений). После него идёт элемент-термин списка, который требуется объяснить – этот элемент обрамлён парным тегом . Дальше идёт текстовый объясняющий элемент списка, он обрамлён парным тегом . Код списка определений заканчивается закрывающим тегом . Пример кода списка определений:

      В браузере список определений выглядит красиво:
      HTML HTML – язык гипертекстовой разметки веб-страницы CSS CSS – каскадные таблицы стилей javascript javascript – язык сценариев веб-страницы

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

      Элементы списка определений не имеют бу́ллетов – специальных типографских знаков. В HTML, списки определений существует исключительно для создания описаний и оформления текстовой видимой части веб-документа. Маркированный и нумерованный списки значительно универсальней и разнообразней. Управление их внешним видом производится при помощи атрибутов тегов списка и атрибутов тегов элементов (строк) списка. Дополнительно, маркированный и нумерованный списки используются в html-разметке веб-страниц для создания и группирования элементов управления и навигации.

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

      Список без ничего – без нумерации, маркировки и прочих списочных причиндалов (бу́ллетов), получится из маркированного или нумерованного списка, после присвоения последнему свойства list-style:none;

      Более сложный способ скрыть/убрать бу́ллеты (маркеры) у списка – это добавить ему свойство overflow: h >list-style-position:inside; ) то тогда добавляем просто overflow: hidden;. Пример кода немаркированного и ненумерованного списка (

        или
          , не важно):

      Выглядит в браузере:

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

      То же самое, через overflow: hidden;, при условии что list-style-position:outside; (маркеры списка находятся за пределами текста списка):

      Выглядит в браузере:

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

      Выпадающие списки

      Выпадающие списки стоят особняком в HTML(XHTML).

      Списки HTML

      В языке разметки html различают 3 вида списков — упорядоченные (нумерованные), неупорядоченные (ненумерованные) и списки определений (definition list).

      Маркированный (неупорядоченный) список — unordered list

      Для построения такого списка нужны 2 вида элементов: ‘ul’ (сокращение от unordered list, т.е. неупорядоченный список) и ‘li’ (элемент списка). Все, что написано внутри ‘li’, помечается маркером.

      Внешним видом такого списка можно управлять, задавая типы маркеров.

      Типы маркеров

      Есть специальный атрибут type, который ставится в обоих элементах списка. Это тип вашего маркера. Всего 3 типа: окружность, диск и квадрат:

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

      Нумерованный список (ordered list)

      Для построения списка также нужно 2 элемента: ‘ol’ и ‘li’ (элемент списка). Маркеры заменяются на цифры с точкой. Пример простого списка:

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

      Типы нумерации

      Есть специальный атрибут type, который ставится в элементе ‘ol’ или ‘li’. Это тип вашего списка. Всего 5 типов:

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

      Список определений (definition list)

      Список определений был разработан для словарных статей.

      Есть общий контейнер ‘dl’. Внутри него стоят ‘dt’ (definition termin — термин) и ‘dd’ (definition description — описание). Простейший пример:

      Все элементы всех списков — блочные. Но внутри элемента ‘dt’ можно ставить только строчные элементы. В элементы ‘dd’ и ‘li’ можно ставить все, что угодно. Отсюда появляются вложенные списки.

      Вложенные (смешанные списки)

      Это многоуровневые списки, внутри которых есть иерархия. Часто такие списки применяются при построении карты сайта. Пример:

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

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

      Есть всего одно правило построения таких списков — вкладывать элемент

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

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

      • List Item 1
      • List Item 2
        • List Item 2.1
        • List Item 2.2
          1. List item 2.3.1
          2. List item 2.3.2
          3. List item 2.3.3
        • List Item 2.3
        • List Item 2.4
      • List Item 3
      • List Item 4
      • List Item 5
        1. List Item 5.1
        2. List Item 5.2
        3. List Item 5.3
        4. List Item 5.4
      • List Item 6
      • List Item 7

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

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

      Списки активно используются для автоматической нумерации блоков текста. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку нумерация вложенных списков начинается каждый раз заново. Но то, что нельзя в HTML, можно возложить на стили.

      Уберем встроенную нумерацию списков и создадим ее по новой, но уже в том виде, что нам требуется. Для этого понадобится три стилевых атрибута: counter-reset, counter-increment и content.

      counter-reset — задает некоторую переменную, которая будет хранить значение счетчика;

      counter-increment — увеличивает или уменьшает значение счетчика на указанное число;

      content — выводит значение счетчика при использовании аргумента counter(переменная). Работает совместно с псевдоэлементами after или before.

      list1 и list2 — переменные счетчиков первого и второго уровней. Инициация счетчиков для списков будет следующей:

      В данном случае отделить вложенный список от внешнего помогают контекстные селекторы. Конструкция ol ol означает применять стиль только к тегу ol только тогда, когда он располагается внутри другого тега ol.

      Увеличение значения счетчика происходит через селектор ol li:before. Атрибут counter-increment со значением list1 повышает значение этого счетчика на единицу, а content: counter(list1) «. » выводит значение счетчика перед пунктом списка. Эти атрибуты работают в паре, поэтому включать их надо одновременно.

      Урок 7. Создание списков в html

      Стандартный список html

      Стандартный список — это такой список, в котором подпункты выделяются точками, независимо от их количества.

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

      Нумерованный список — это список, в котором подпункты выделяются цифрами по порядку.

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

      A — заглавные латинские буквы (A, B, C)
      a — прописные латинские буквы (a, b, c)
      I — большие римские цифры (I, II, III)
      i — маленькие римские цифры (i, ii, iii)
      Пример нумерации списка с заглавными латинскими буквами

      В итоге браузер выведет

      Список с определениями html

      Список с определениями — это список, в котором подпункты (термин, слово) выделяются отдельно от самой расшифровки (трактовка, определение) переносом строки и отступом.

      Пример готового кода

      Привожу пример использования трёх список подряд списков.

      В браузере будет выведено

      Пример списка с вложенными списками

      В итоге урока хочу привести конструкцию из вложенных друг в друга списков списков.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL