Что такое маркированные и многоуровневые списки
Вы можете настроить внешний вид списка, определив собственный нумерованный, маркированный или многоуровневый список. После этого можно сохранить его параметры в качестве стиля и использовать их повторно.
Задачи
- Определение нового формата маркера
- Определение нового формата номера
- Определение нового многоуровневого списка
- Определение нового стиля списка
- Отключение автоматической нумерации списков
- Дополнительные сведения
Определение нового формата маркера
Выполните одно из указанных ниже действий.
Изменение маркера на символ
- Выделите текст или маркированный список, который вы хотите изменить.
- На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список
Изменение маркера на рисунок
- Выделите текст или маркированный список, который вы хотите изменить.
- На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список
Изменение шрифта маркера
- Выделите текст или маркированный список, который вы хотите изменить.
- На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список
Вкладка Шрифт
Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.
Вкладка Дополнительно
Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.
Изменение выравнивания маркера
- Выделите текст или маркированный список, который вы хотите изменить.
- На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список
Определение нового формата номера
- Выделите текст или нумерованный список, который вы хотите изменить.
- На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Нумерованный список
| Вкладка | Описание |
|---|---|
| Вкладка Шрифт | Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера. |
| Вкладка Дополнительно | Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера. |
Определение нового многоуровневого списка
- Выделите текст или нумерованный список, который вы хотите изменить.
- На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Многоуровневый список
| Вкладка | Описание |
|---|---|
| Вкладка Шрифт | Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера. |
| Вкладка Дополнительно | Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера. |
Определение нового стиля списка
- Выделите текст или нумерованный список, который вы хотите изменить.
- На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Многоуровневый список
Отключение автоматической нумерации списков
- Следуйте инструкциям для используемой версии Word Word 2016, Word 2013 или Word 2010
- Выберите Файл, а затем в левой области выберите Параметры.
- Нажмите кнопку Microsoft Office и выберите Параметры Word.
Списки — Основы верстки контента
Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:
- Маркированные;
- Нумерованные;
- Списки определений.
В предложении выше виды списков были сгруппированы с помощью маркированного списка. Он имеет небольшой отступ слева и обозначается маркером у каждого отдельного пункта. Каждый вид списка имеет такие черты, что позволяет быстро определить их на странице.
Помимо этого все списки имеют контейнеры — теги, внутри которых располагается информация. Эти контейнеры помогают странице определить, в каком месте начинается список и где он заканчивается.
В своем представлении каждый элемент списка является блочным элементом. Это означает, что он будет занимать всю доступную ему ширину и каждый новый элемент будет начинаться с новой строки.
Маркированные списки
Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.
Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег — сокращение от Unordered List. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег — сокращение от List Item. Так браузер отделяет списки друг от друга.
Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега . Внутри каждого из этих тегов помещается один пункт списка.
Маркированные; Нумерованные; Списки определений.
Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега . Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:
Теги в HTML Параграфы Списки Маркированные; Нумерованные; Списки определений.
У вложенного списка изменился маркер. Это позволяет даже при отсутствии отступов отделить вложенные списки от основного уровня. CSS позволяет управлять маркерами и настраивать их внешний вид. В конце урока будет изучено свойство, которое позволяет стилизовать маркеры и даже использовать свои изображения для этого.
Нумерованные списки
Структура нумерованных списков повторяет маркированные списки. Семантическое отличие нумерованных списков заключается в последовательности. Такие списки идут строго по порядку и обозначают последовательность какой-либо информации.
-
— сокращение от Ordered List. Примером такого списка может служить список дел на день.
Список дел на вторник Позавтракать Оплатить билет на метро Съездить к бабушке Лечь спать
Нумерованные списки возможно вкладывать друг в друга. Внутри нумерованных списков могут лежать маркированные.
Список дел на вторник Позавтракать Оплатить билет на метро Съездить к бабушке Купить цветы Купить конфеты Лечь спать
Списки определений
С точки зрения HTML списки определений являются самыми сложными для верстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.
В качестве контейнера для списков определений используется тег от английского Definition List, внутри которого не привычная схема , а система из двух тегов:
- — термин. От английского Definition Term;
- — определение. От английского Definition Description.
Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:
HTML Язык гипертекстовой разметки CSS Каскадные таблицы стилей
Стилизация списков
Основным способом стилизации списков является изменение маркера, который появляется в левой части пункта списка. В маркированных и нумерованных списках его можно изменить с помощью свойства list-style-type . Оно принимает множество различных значений. Все их вы можете увидеть с помощью веб-инспекторов. Для создания маркера в виде квадрата используется значение square .
Свойство list-style-type позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктов маркерами. Для скрытия маркера используется значение none .
Изменять маркер можно одним из двух способов:
- Установка свойства на контейнер. В этом случае все элементы списка получат тот маркер, который был указан в свойстве.
- Установка свойства на элемент списка. Маркер изменится только у одного пункта списка, другие получат маркер по умолчанию.
В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.
Картинка в качестве маркера списка
Помимо встроенных в браузер значений маркеров списка, CSS дает возможность устанавливать пользовательские маркеры в виде картинок. Это позволяет сделать уникальную стилизацию списков для проекта, как для всего, так и для отдельных списков.
Чтобы установить маркер в виде своего изображения, используется свойство list-style-image , значением которого является ссылка на изображение. Оно указывается внутри url() , например:
.list-image list-style-image: url("./good.png"); > Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Оформление списков в CSS
С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.
Изменение и удаление маркеров
Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.
Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:
Настройка списков
Настройка списков — это один из стандартных интерфейсных механизмов. Он предоставляется платформой и доступен пользователям любых прикладных решений. С его помощью пользователь может изменить внешний вид списка в соответствии со своими предпочтениями — представить список в виде дерева или в виде линейного списка, сгруппировать элементы списка, задать динамическое оформление списка в зависимости от тех данных, которые в него выводятся.
Например, список, спроектированный разработчиком, может выглядеть следующим образом:
Пользователь может сгруппировать документы по поставщику и те документы, которые приходуют товар на малый склад выделить жирным шрифтом.
Вызвать настройку списка можно с помощью команды Еще — Настроить список…
Отбор
Настройка списка позволяет установить произвольный отбор данных, которые отображаются в списке. Например, можно отобрать только те документы, которые приходуют товары от поставщиков Мосхлеб ОАО и Магазин «Продукты» на средний склад.
Сортировка
Настройка списка позволяет установить произвольную сортировку данных, которые отображаются в списке. Например, можно отсортировать документы сначала по возрастанию значения поля поставщик (чтобы документы шли в алфавитном порядке поставщиков), а затем -по убыванию даты (чтобы новые документы поставщика были в начале).
Группировка
Настройка списка позволяет сгруппировать данные, представленные в списке по значению какого-либо поля. Причем такая группировка может быть многоуровневой.
Например, можно сгруппировать документы сначала по поставщику, а затем — по складу.
В результате такой группировки список будет выглядеть следующим образом.
Условное оформление
Настройка списка позволяет устанавливать динамическое оформление списков в зависимости от выводимых в них данных. Например, документы, приходующие товары на малый склад можно выделить цветом Циан, а документы в валюте USD — жирным шрифтом.
В результате такого оформления список будет выглядеть следующим образом.
Режим просмотра
Для списков, содержащих иерархические данные, например, для справочника товары, система предоставляет стандартную возможность изменять режим просмотра.
Например, список товаров изначально может быть представлен в виде иерархического списка.
Пользователь может переключить его представление в виде дерева.
Изменение режима просмотра списка выполняется с помощью команды Еще — Режим просмотра.
Авторы: В.А. Ажеронок, А.В. Островерх, М.Г. Радченко, Е.Ю. Хрусталева