Html многоуровневый нумерованный список. Маркированный список. Оформление при помощи CSS нумерованного списка

Здравствуйте, уважаемые читатели блога сайт. Сегодня в рамках этой рубрики я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI и DL. С помощью пары UL и LI создаются маркированные списки, с помощью OL и LI - нумерованные, а с помощью элементов DL, DT и DD создаются так называемые листинги определений. Так же мы рассмотрим вкратце принципы создания вложенных конструкций.

Хочу напомнить вам, что мы уже успели , успели поговорить про основы современной , а так же верстки табличной (). Кроме этого мы затронули основы , ну и узнали через .

Маркированные списки на основе тэгов UL и LI

Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.

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

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

• Первая строка
• Вторая
• Последний элемент

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

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

Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):

1. — закрашенный кружок (по умолчанию);
   • — не закрашенный кружок;
     • – квадрат

В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.

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

1. Маркер в виде закрашенного диска
2. Маркер в виде не закрашенного диска
3. Квадрат

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

Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI.

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

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

Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:

1. — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
   1. — заглавные буквы в качестве нумерации;
      1. — строчные буквы;
         1. — заглавные римские цифры;
            1. — строчные римские цифры;

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

               

               1. с нумерацией большими римскими цифрами
               2. Нумерация маленькими латинскими буквами
               3. Нумерация малыми римскими цифрами

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

               1. Первый элемент, номер которого задан в теге OL атрибутом start="23"
               2. Следующий пункт, с номером на единицу большим
               3. Еще на единицу больше

               Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например:

               1. Первый пункт с номером один
               2. Этот элемент получит номер, указанный в атрибуте value="32"
               3. Пункт с большим номером

               Оформление внешнего вида списков в CSS (таблицах стилей)

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

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

               • Первый пункт
               • Второй
               • Последний

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

               Специальные и вложенные списки в Html коде

               Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений.

               Обычно такой вид используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD).

               Первый термин

               Описание

               Второй термин

               Его описание

               

               Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина).

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

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

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

               

               1. Первый пункт основного нумерованного
               2. Второй пункт
                  • Первый элемент вложенного маркированного
                  • Второй
                  • Третий и последний пункт маркированного
               3. Третий элемент нумерованного

               Удачи вам! До скорых встреч на страницах блога сайт

               Вам может быть интересно

               Как вставить в HTML ссылку и картинку (фото) - теги IMG и A Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
               Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
               Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
               Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
               Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
               Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
               Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
               Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
               Iframe и Frame - что это такое и как лучше использовать фреймы в Html
               Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)

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

               И так, существуют теги "" - они определяют маркированный список.
               Теги "" – определяют пункты, то есть элементы маркированного списка.

               Для начала создадим простой список из нескольких пунктов:

               <html > <head > <title > Простой маркированный список HTMLtitle > head > <body > <ul > <li > Oneli > <li > Twoli > <li > Threeli > <li > Fourli > ul > body > html >
               • Three

               Для маркировок html можно задать некоторые типы, которые прописываются внутри
               первого тега "

               " в type=" "

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

               <html > <head > <title > Маркированный список HTML title > head > <body > <ul type="circle" > <li > Одинli > <li > Дваli > <li > Триli > <li > Четыреli > ul > body > html >
               • Четыре

               Теперь вместо типа "circle" зададим тип "square " (квадратики)

               <html > <head > <title > Маркированный список HTML title > head > <body > <ul type="square" > <li > einli > <li > zweili > <li > dreili > <li > vierli > ul > body > html >

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

               
               

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

               Списки можно не только маркировать, но и нумеровать, так как иногда это бывает необходимо. Это могут быть цифры (1, 2, 3 …) И буквы английского алфавита в нижнем и верхнем регистре. Рассмотри всё выше описанное.

               Для того что бы задать нумерацию применяются теги "" .
               Внутри первого тега задаётся тип.

               Нумерация числами (от одного)

               <html > <head > <title > Нумерованный список htmltitle > head > <body > <ol > <li > Разli > <li > Дваli > <li > Триli > <li > Четыреli > ol > body > html >
               1. Четыре

               Если вам нужно чтобы нумерация начиналась с нуля (ноля) или с тройки, например, то нужно в первом теги написать start=" " и нужное число.

               <html > <head > <title > Нумерованный список htmltitle > head > <body > <ol start="0" > <li > нольli > <li > одинli > <li > дваli > <li > триli > ol > body > html >

               Теперь рассмотрим, как задать "буквенную нумерацию".

               В нижнем регистре:

               <html > <head > <title > Нумерованные списки htmltitle > head > <body > <ol type="a" > <li > Меркурийli > <li > Венераli > <li > Земляli > <li > Марсli > ol > body > html >
               1. Меркурий
               2. Венера
               3. Земля

               В верхнем регистре:

               <html > <head > <title > Нумерованные HTML спискиtitle > head > <body > <ol type="A" > <li > Юпитерli > <li > Сатурнli > <li > Уранli > <li > Нептунli > <li > <b > Плутонb > li > ol > body > html >
               1. Юпитер
               2. Сатурн
               3. Нептун
               4. Плутон

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

               • название " вставить ещё один список и после этого закрыть его вторым тегом "
               "
               <html > <head > <title > Многоуровневый список html title > head > <body > <ul type="square" > <li > Скрипкаli > <li > Гитара <ul > <li > классическаяli > <li > ритмгитараli > <li > электрогитараli > ul > li > <li > Барабаныli > <li > Дудочкаli > ul > body > html >
               • Скрипка
               • Гитара
                 • классическая
                 • ритмгитара
                 • электрогитара
               • Барабаны
               • Дудочка

               В следующем уроке будет рассмотрено создание простого меню на базе знаний полученных из этого урока.

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

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

                    • – список определений состоит из пар «имя/значение», в том числе терминов и определений.

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

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

                    (от англ. Ordered List – нумерованный список). Далее в контейнер
                    для каждого пункта списка помещается элемент
                    1. (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
                       Тег
                       имеет следующий синтаксис:
                       1. элемент 1
                       2. элемент 2
                       3. элемент 3

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

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

                       • Попробуй сам »

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

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

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

                       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:

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

                       1. следующим образом:

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

                          Пример использования атрибута value тега

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

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

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

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

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

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

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

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

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

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

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

                            Внутри тега

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

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

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

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

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

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

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

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

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

                              • Попробуй сам »
                              • Coffee
                              • Coffee
                              • Coffee
                              • Coffee

                              Disc:

                              • Coffee
                              • Milk

                              Circle:

                              • Coffee
                              • Milk

                              Square:

                              • Coffee
                              • Milk

                              None:

                              • Coffee
                              • Milk

                              Графические маркеры.

                              В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
                              Чтобы заменить обычный маркер на графический, заменим свойство list-style-type на свойство list-style-image и укажем URL–адрес картинки:

                              Пример: Графические маркеры

                              • Попробуй сам »

                              Знаки зодиака

                              • Телец
                              • Близнeцы

                              Знаки зодиака

                              • Овен
                              • Телец
                              • Близнeцы

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

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

                              (от англ. Definition List – список определений). Он включает в себя теги

                              (от англ. Definition Term – определяемое слово, термин) и

                              (от англ. Definition Description – описание определяемого термина).
                              Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.

                              Общая структура списка описаний имеет следующий вид:

                              Первый термин

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

                              Второй термин

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

                              В следующем примере показано одно из возможных использований списка определений:

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

                              • Попробуй сам »

                              Всемирная паутина — от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету. Интернет — совокупность сетей, применяющих единый протокол обмена для передачи информации. Сайт — набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

                              Всемирная паутина

                              — от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.

                              Интернет

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

                              Сайт

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

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

                              Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы.

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

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

                              Html списки

                              1. кошки
                              2. собаки
                              3. лошади

                              Результат:

                              1. кошки
                              2. собаки
                              3. лошади

                              Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type :

                              - type="A" - нумерация заглавными латинскими буквами (A, B, C).

                              - type="a" - нумерация прописными латинскими буквами (a, b, c).

                              - type="I" - нумерация большими римскими цифрами (I, II, III) .

                              - type="i" - нумерация маленькими римскими цифрами (i, ii, iii).

                              Пример кода с римскими цифрами:

                              Html списки

                              1. кошки
                              2. собаки
                              3. лошади

                              Результат:

                              1. кошки
                              2. собаки
                              3. лошади

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

                              Пример кода:

                              Html списки

                              1. кошки
                              2. собаки
                              3. лошади

                              Результат:

                              1. кошки
                              2. собаки
                              3. лошади

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

                              Пример кода:

                              Html списки

                              1. красный
                              2. оранжевый
                              3. желтый
                              
                              ...............
                              4. фиолетовый

                              Результат:

                              1. красный
                              2. оранжевый
                              3. желтый
                              
                              ...............
                              4. фиолетовый

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

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

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

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

                              • кошки
                              • собаки
                              • лошади

                              Результат:

                              • кошки
                              • собаки
                              • лошади

                              По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type :

                              - type="disc" - закрашенный кружочек.

                              - type="circle" - пустой кружочек.

                              - type="square" - закрашенный квадратик.

                              Пример кода для маркированных списков:

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

                              • кошки
                              • собаки
                              • лошади

                              • кошки
                              • собаки
                              • лошади

                              • кошки
                              • собаки
                              • лошади

                              Результат:

                              • кошки
                              • собаки
                              • лошади

                              • кошки
                              • собаки
                              • лошади

                              • кошки
                              • собаки
                              • лошади

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

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

                              . Каждый термин заключается в теги

                              , а их определения - в теги

                              .

                              Пример кода списка определений:

                              Списки определений Термин 1 Определение термина 1 Термин 2 Определение термина 2

                              Результат:

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

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

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

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

                              • Животные
                                1. кошки
                                2. собаки
                              • Растения
                                1. деревья
                                2. цветы

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

                              С элементом

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

                                На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.

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

                                Вид маркера

                                Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

                                • disc - маркеры в виде закрашенного кружка;
                                • circle - маркеры в виде незакрашенного кружка;
                                • square - квадратные маркеры.

                                Пример 1. Изменение вида маркера

                                • Сепульки
                                • Сепулькарии
                                • Сепуление

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

                              • не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым
                              • добавляем свой собственный символ с помощью псевдоэлемента ::before . В примере 2 в качестве такого маркера выступает треугольник.

                                Пример 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 обладает некоторыми недостатками:

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

                                Этих недочётов можно избежать с помощью свойства background , оно устанавливает фоновое изображение. Для каждого элемента списка

                              • мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

                                Пример 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.