Маркированные списки
Маркированные списки позволяют разбить большой текст на отдельные блоки, каждый из которых начинается с маркера — обычно в его качестве выступает небольшая точка. Это привлекает внимание читателя к тексту и повышает его читабельность.
-
связаны следующие особенности:
- в том месте, где встречается
-
, браузер автоматически добавляет перенос строки;
- у списка имеются отступы сверху и снизу;
- маркеры по умолчанию отображаются в виде закрашенного кружка;
- каждый элемент списка сдвигается вправо по отношению к основному тексту.
На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.
Рис. 1. Вид маркированного списка
Вид маркера
Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:
- disc — маркеры в виде закрашенного кружка;
- circle — маркеры в виде незакрашенного кружка;
- square — квадратные маркеры.
Пример 1. Изменение вида маркера
Пример 2. Использование ::before
Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача — переместить текст левее на один символ.
Рис. 2. Произвольные маркеры в списке
Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).
Рис. 3. Выбор символа в LibreOffice
Список с рисованными маркерами
Стили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image . В качестве значения используется относительный или абсолютный путь к графическому файлу, как показано в примере 3.
Пример 3. Использование изображения в качестве маркера
Рисунок лучше всего выбирать небольшого размера, чтобы не превращать элементы списка в подрисуночные подписи. На рис. 4 показан результат действия примера по использованию в качестве маркеров небольших картинок.
Рис. 4. Рисунок в качестве маркера
Применение list-style-image обладает некоторыми недостатками:
- рисунок нельзя сдвинуть вверх или вниз;
- в разных браузерах положение рисунка относительно текста может отличаться.
Пример 4. Использование background
ul < margin-left: -1em; >li < list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; >
Положение текста и маркера
Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).
inside | outside |
Рис. 5. Размещение маркеров относительно текста
Чтобы управлять положением маркеров, применяется свойство list-style-position . Оно имеет два значения: outside — маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside — маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).
Пример 5. Изменение положения маркеров
- Перед началом работы проверьте наличие оборудования, входящего в комплект 3BM.
- При отсутствии одного или нескольких периферийных устройств следует сразу же обратиться к техническому персоналу ВЦ.
- После осмотра визуальными методами своего рабочего места можно осторожно включить питание 3BM.
Результат данного примера показан на рис. 6.
Рис. 6. Маркеры в тексте
Маркированные списки (Unordered Lists) и нумерованные списки (Ordered Lists)
Всем привет, с вами Сергей Никонов и в этой статье я расскажу про маркированные html-списки(Unordered Lists) и нумерованные html-списки (Ordered Lists). Мы рассмотрим html-списки на примерах и если вы еще не знаете как создавать html-списки, вы очень быстро разберетесь.
О нумерованных и маркированных списках я рассказываю в своем курсе HTML/CSS Advanced и если вы хотите научиться профессионально верстать веб-сайты и освоить HTML и CSS, я рекомендую пройти курс HTML/CSS Advanced выполняя интерактивные упражнения и тесты для закрепления ваших знаний верстки сайтов.
Только на сайте FructCode.com вы можете найти актуальные версии моих курсов и если на каких-то других интернет сайтах вы находите мои курсы, знайте, что на всех этих сайтах устаревшие версии моих курсов и я категорически не рекомендую по ним учиться!
Содержание
- Что такое маркированные списки (Unordered Lists)
- Простой пример маркированного списка
- Пример маркированного списка с вложенностью
- Примеры маркированных списков для горизонтальной и вертикальной навигации сайта(меню)
- Пример использования list-style-type
- Что такое нумерованные списки (Ordered Lists)
- Простой пример нумерованного списка
- Пример нумерованного списка с бесконечной вложенностью
- Пример смешанных нумерованных и маркированных списков
- Примеры атрибутов для нумерованных списков: reversed, start и type
- Примеры list-style-type для нумерованных списков
Смотрите видеоурок Что такое маркированные HTML-списки (Unordered List) и нумерованные списки (Ordered Lists)
Подпишитесь на YouTube канал FructCode, где вы можете найти полезные видео по теме разработки веб-сайтов, программирования и все, что с этим связано.
Что такое маркированные HTML-списки (Unordered List)
Маркированный список или Unordered List — это HTML список пункты которого отмечены каким-либо символом, обычно символом BULLET (пуля).
Самый простой и наглядный пример маркированного списка — это содержание книги или меню сайта с категориями и подкатегориями
Маркированный список
-
, а каждый пункт списка начинается с тега
, как показано ниже.
В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
Пример 11.1. Создание маркированного списка
Результат данного примера показан на рис. 11.1.
Рис. 11.1. Вид маркированного списка
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
-
. Допустимые значения приведены в табл. 11.1
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в примере 11.2.
Пример 11.2. Вид маркеров
Результат данного примера показан на рис. 11.2.
Рис. 11.2. Вид списка с квадратными маркерами
HTML по теме
Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
- Как добавить картинку на веб-страницу?
- Как добавить иконку сайта в адресную строку браузера?
- Как добавить фоновый рисунок на веб-страницу?
- Как сделать обтекание картинки текстом?
- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
- Как разместить элементы списка горизонтально?
- Как убрать подчеркивание у ссылок?
- Как убрать маркеры в маркированном списке?
- Как изменить расстояние между строками текста?
- Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
- Как открыть ссылку в новом окне?
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
Маркированный список ul
Маркированный список используется для группировки и выделения элементов, но без указания их порядка. Например, это может быть Меню навигации сайта. Маркированный, или еще неупорядоченный список применяется для форматирования перечислений, последовательность элементов которых не имеет значения. К примеру, на странице требуется расположить перечень независимых друг от друга услуг, оказываемых некоторой организацией.
Неупорядоченный список создается элементами двух типов:
-
— Unordered List, неупорядоченный список. Данный элемент создает, собственно, сам список, указывает его начало и конец.
Тип маркера списка по умолчанию — •. Но это положение вещей можно легко изменить. Для указания типа маркера всего списка или его отдельного элемента, ранее использовали атрибут type. Атрибут type может принимать следующие значения:
«disc» — маркер в виде диска. Используется по умолчанию.
«circle» — маркер в виде окружности (внутри пустой)
«square» — маркер в виде заполненного квадрата
На данный момент атрибут type считается устаревшим и должен быть заменен таблицами стилей list-style-type.
Нумерованный список
Данный тип списка используется для форматирования перечня действий или элементов, последовательность которых имеет значение. Например, пошаговое описание выполнения некоторого алгоритма, содержание статьи или книги (пронумерованный перечень глав).
-
используется элемент
— Ordered List, упорядоченный список. Тип нуменации по умолчанию — арабские цифры (1,2,3…). Поменять способ нумерации можно, используя устаревший атрибут type.
Стили для форматирования списков
Помимо стилевых правил для форматирования шрифта и цвета символов, рассмотренных на прошлом занятии, к списку и его отдельным элементам можно применить ряд специальных правил. Эти правила отвечают за назначение маркера или нумерации элементов списка, а, также, могут управлять положением маркера по отношению к элементу.
Свойство list-style-type
Это свойство является заменой устаревшего атрибута type, о котором упоминалось в предыдущих разделах. Свойство list-style-type может принимать следующие значения:
disc — маркировка в виде дика (замена type=»disc»)
circle — маркировка в виде окружности (замена type=»circle»)
square — маркировка в виде квадрата (замена type=»square»)
decimal — арабская (десятичная) нумерация (замена type=»1″)
upper-roman — римская нумерация в верхнем регистре (замена type=»I»)
lower-roman — римская нумерация в нижнем регистре (замена type=»i»)
upper-alpha — алфавитная нумерация в верхнем регистре (замена type=»A»)
lower-alpha — алфавитная нумерация в нижнем регистре (замена type=»a»)
none — маркер или нумерация отсутствует
Свойство стиля list-style-type можно применять одинаково как для форматирования маркированного, так и для нумерованного списка. В принципе, можно маркированному списку (ul) дать нумерацию элементов, и наоборот — нумерованному (ol) присвоить маркер в виде диска, к примеру. Вопрос только в том, зачем? Сделав это вы грубо нарушите логику разметки.
Помимо дублирования значений отмененного атрибута type, с помощью стилей можно вообще запретить всяческую нумерацию или маркировку. Для этого используется значение none свойства list-style-type.
Ниже показан пример применения стиля для оформления нумерации списка в виде малых букв латинского алфавита:
Листинг: Пример оформления списка с помощью стиля
Свойство list-style-image
Еще одним эффектным способом визуального оформления списков является возможность использования графического маркера элемента списка. То есть, вместо использования нескольких скучных стандартных маркеров, вы сможете использовать собственноручно созданное изображение.
Изображение должно быть создано в формате *.jpg, *.gif или *.png. При использовании *.gif или *.png явным преимуществом является поддержка прозрачности — маркер становится более универсальным и может быть применен на web-страницах, имеющих совершенно разные фоновые цвета или изображения.
Предположим, что вы хотите использовать в качестве маркера изображение «marker.gif», размерами 10х16 пикселей, расположенное в той же папке, что и XHTML страница. Код для достижения поставленной цели будет иметь следующий вид:
Листинг: Использование графического маркера
Если в стиле для списка одновременно указать и стандартный тип маркера и графический маркер, то сработает только графический, так как он имеет больший приоритет.
При назначении графического маркера, установите, так же, стандартный маркер. Тогда, в случае отсутствия изображения маркера, форматирование списка будет производиться стандартным маркером.
Для отмены графического маркера используйте свойство list-style-image со значением none:
Свойство list-style-position
Свойство стиля list-style-position позволяет управлять положением маркера или номера элемента по отношению к тексту элемента списка. Возможные значения:
outside — маркеры расположенны снаружи по отношению к тексту (по умолчанию)
inside — маркеры расположенны «в тексте»
Многоуровневые списки
Вкладывать элемент ul или ol необходимо только в элемент li. Нельзя вкладывать список в список непосредственно!
Многоуровневые списки используют в тех случаях, когда требуется отразить иерархическую структуру, подчинение одних элементов другим. Наиболее ярким примером многоуровневого списка может служить оглавление сложного документа:
Все о разметке Предназначение разметки Важность синтаксически корректных и правильных документов Об элементах, атрибутах и объектах Дополнительная информация Обзор структуры элементов Общие атрибуты Дополнительная информация .
Для создания многоуровневого списка просто вложите в любой из элементов списка еще один список. Это и будет список второго уровня. Для создания третьего уровня, вложите список в элемент второго уровня. И так далее. Пример:
Листинг: Многоуровневый неупорядоченный список
- Элемент списка 1го уровня
- Элемент списка 1го уровня
- Элемент списка 1го уровня с вложенным списком
- Элемент списка 2го уровня
- Элемент списка 2го уровня с вложенным списком
- Элемент списка 3го уровня
- Элемент списка 3го уровня
- Элемент списка 3го уровня
- Элемент списка 3го уровня
При выполнении примера вы, несомненно, обратили внимание на тот факт, что типы маркеров для каждого уровня списка изменяются. Первый уровень маркируется как «disc», второй — «circle», третий и далее — «square». Проделав тот же опыт с упорядоченными списками, вы убедитесь в том, что каждый следующий уровень списка не меняет тип нумерации. Эту задачу придется решать самостоятельно.
Одним из вариантов ее решения является использование стиля для вложенных списков:
Листинг: Многоуровневый упорядоченный список
Для еще большего визуального отличия элементов первого и второго уровня, к внешнему списку применен полужирный шрифт (font-weight: bold;). В каждом вложенном списке жирность шрифта возвращается в норму (font-weight: normal;).