Маркированные списки в html – Маркированные списки | WebReference

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

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

С элементом

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

На рис.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

offlink.ru

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

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

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

В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

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

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

---

• Чебурашка
• Крокодил Гена
• Шапокляк
• Крыса Лариса

---

Результат данного примера показан на рис. 11.1.

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

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

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега

. Допустимые значения приведены в табл. 11.1 Табл. 11.1. Стили маркеров списка

Тип списка	Код HTML	Пример
Список с маркерами в виде круга		Первый Второй Третий
Список с маркерами в виде окружности		Первый Второй Третий
Список с квадратными маркерами		Первый Второй Третий

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

Создание списка с квадратными маркерами показано в примере 11.2.

Пример 11.2. Вид маркеров

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

Изменение убеждений

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

Результат данного примера показан на рис. 11.2.

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

Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки .

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

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

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

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

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

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

   1. Кофе
   2. Чай
   3. Молоко
   Попробовать »

   Примечание: тег

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

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

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

      Для создания маркированных списков в HTML применяется тег

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

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

        • Кофе
        • Чай
        • Молоко
        Попробовать »

        Виды маркеров

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

        Маркированные списки не имеют атрибута type , поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type , с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square .

        Изменение маркеров у списков:

        Заголовок страницы

        Нумерованный список c атрибутом type=»a»:

        1. Яблоки
        2. Бананы
        3. Лимоны

        Нумерованный список c атрибутом type=»I»:

        1. Яблоки
        2. Бананы
        3. Лимоны

        Виды маркеров маркированных списков:

        • Яблоки
        • Бананы
        • Лимоны
        • Яблоки
        • Бананы
        • Лимоны
        Попробовать »

        CSS свойство list-style-type , помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть .

        Горизонтальный список

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

        Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block , в зависимости от того, какие ещё свойства вы собираетесь использовать.

        Заголовок страницы

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

        1. Яблоки
        2. Бананы
        3. Лимоны

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

        • Яблоки
        • Бананы
        • Лимоны
        Попробовать »

        После этого все пункты списка выстроятся в одну строку. Обратите внимание, что у пунктов списка пропадут маркеры и между ними не будет даже пробела, но отступ слева у списка останется.

        Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть .

        Списки — важная составляющая контента, так как они помогают упорядочить информацию. Текст в списках лучше воспринимается и проще запоминается.

        Самый простой — перед каждым его элементом стоит маркер — кружок, квадрат или окружность. Последовательность элементов в маркированном списке не важна.

        Чтобы его создать, нужно использовать всего два тега: и

      . — это контейнер, содержащий список, элементы которого задаются тегом
      .
      Маркированный список
      • Камень
      • Ножницы
      • Бумага

lab-music.ru

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

Здравствуйте, дорогие посетители!

В одной из прошлых статей я рассказывала, как можно красиво оформить нумерованный список HTML. С этой статьей вы можете ознакомиться по этой ссылке.

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

Навигация по статье:

Создание маркера для маркированного списка HTML

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

По умолчанию в CSS предусмотрено три варианта оформления, которые можно задать при помощи свойства list-style-type. Которое, в свою очередь может принимать три значения:

1. 1.circle — кружок
2. 2.disc — точка
3. 3.square – квадрат

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

.text ul{ list-style-type: square; }

.text ul{ list-style-type: square; }

В данном случае у элементов будут метки в виде квадратиков.

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

Сделать это можно двумя способами:

1. 1.Нарисовать, например, в PhotoShop.
2. 2.В поиске Яндекс сделать запрос «маркер для списка». Яндекс выдаст вам огромное количество всевозможных заготовок:

Все, что вам остается сделать, это выбрать понравившееся изображение и в PhotoShop или любом другом редакторе подогнать его размер. В зависимости от размера текста и оформления сайта размер маркера может быть разным, но, как правило, для шрифта размером 14px подходят маркеры с размерами 20х20 или 25х25 пикселей.

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

Как задать свой маркер для маркированного списка HTML?

Теперь, когда у нас все готово, мы можем в файле стилей нашего сайта применить наш уникальный маркер. Для этого нужно дописать для ul свойство list-style-image в таком виде:

#opisanie .text ul { list-style-image: url(«images/galochka2.png») ; font-size: 16px; }

#opisanie .text ul {     list-style-image: url(«images/galochka2.png») ;     font-size: 16px; }

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

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

Как видите, заменить маркер для маркированного списка HTML совсем не сложно, но в результате ваш список будет оформлен намного красивее и оригинальнее.

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

Я на сегодня у меня все. Успехов вам и вашим проектам! До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Как в HTML создать маркированный список без маркеров

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

Добавление стиля «list-style: none» в тег неупорядоченного (<ul>) или упорядоченного списка (<ol>) уберет любые маркеры или номера:

<ul>
  <li>Элемент списка без маркера</li>
  <li>Второй элемент</li>
</ul>

1

Приведенный выше пример работает почти в любой ситуации. Но лучше размещать CSS во внешнем файле стилей. Ниже приведены CSS и HTML, которые можно использовать для удаления маркеров.

Применение этого кода CSS удаляет маркеры из всех неупорядоченных списков (<ul>). Это может понадобиться, если вы не намерены ставить маркеры или хотите использовать вместо них изображения:

<style type="text/css">
  ul {
    list-style-type: none;
  }
</style>

Но лучше создать класс list style none CSS, который можно будет использовать в том случае, когда не нужно показывать маркеры. Код CSS:

<style type="text/css">
  .nobull {
    list-style-type: none;
  }
</style>

В приведенном выше коде CSS создается новый класс «nobull». Его можно задействовать в тех случаях, когда не нужно показывать маркер. Например:

<ul>
  <li>Элемент списка без маркера</li>
  <li>Второй элемент</li>
</ul>

Подсказка: Этот класс можно применить для любого элемента списка (<li>), чтобы скрыть маркер напротив определенных элементов, но оставить другие маркеры.

Ниже показано, как выводится на экран неупорядоченный список без маркеров с помощью list style type none.

Данная публикация представляет собой перевод статьи «How to create a bullet list with no bullets in HTML» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Маркированный список. HTML, XHTML и CSS на 100%

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

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

Для создания списков в HTML предусмотрен элемент UL, требующий наличия закрывающего тега. Пункты списка находятся внутри элемента UL. Каждый пункт начинается с элемента LI.

У элемента UL есть атрибут type, определяющий вид маркера списка. Он может принимать следующие значения:

• circle – создает маркер в виде круга, белого внутри;

• square – создает маркер в виде квадрата;

• disc – создает маркер в виде круга, закрашенного черным цветом.

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

В листинге 2.5 представлен пример создания маркированных списков с разными маркерами.

Листинг 2.5. Маркированные списки

<html

<head>

<title>Списки</title>

<body>

<ul type=»circle»>

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

<li>Марс</li>

</ul>

<ul compact type=»square» >

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

<li>Марс</li>

</ul>

<ul compact type=»disc» >

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

<li>Марс</li>

</ul>

</body>

</html>

Результат обработки кода из листинга 2.5 показан на рис. 2.5. Здесь видно, как выглядят разные маркеры списков.

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

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

В листинге 2.6 приведен пример создания списка с разными маркерами для различных пунктов.

Листинг 2.6. Список с разными маркерами

<html>

<head>

<title>Списки</title>

<body>

<ul>

<li type=»circle»>Земля</li>

<li type=»circle»>Марс</li>

<li type=»square»>Солнце</li>

<li type=»circle»>Венера</li>

<li type=»disc»>Луна</li>

</ul>

</body>

</html>

Результат обработки браузером кода из листинга 2.6 представлен на рис. 2.6.

Рис. 2.6. Список с разными маркерами

В примере различные маркеры отмечают объекты разных типов.

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

В HTML есть возможность создать список с графическими маркерами. Для этого нужно вместо элемента LI подставить картинку с желаемым изображением. Элемент UL укажет браузеру, что надо сделать отступ, а с помощью элемента BR можно перенести строку.

В листинге 2.7 представлен пример создания списка с графическими маркерами.

Листинг 2.7. Список с графическими маркерами

<html>

<head>

<title>Списки</title>

<body>

<ul>

<img src=»marker.jpg» />Венера<br />

<img src=»marker.jpg» />Марс<br />

<img src=»marker.jpg» />Земля<br />

</ul>

</body>

</html>

Результат обработки кода из листинга 2.7 показан на рис. 2.7.

Рис. 2.7. Список с графическими маркерами

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

Поделитесь на страничке

Следующая глава >

it.wikireading.ru

Как сделать маркированный список в HTML

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

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

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

Маркированные списки еще называют неупорядоченными. И создаются они с использованием тега <ul>. Внутри этого тега может присутствовать еще один – <li>, который обозначает элемент списка.

Давайте сделаем простой список — перечислим уровни подготовки программистов, которым подойдёт книга:

...
<p>
    Текст про книгу 1
</p>
<p>
    Книга подойдёт для:
</p>
<ul>
    <li>Начинающих</li>
    <li>Середнячков</li>
    <li>Опытных</li>
</ul>
...

В браузере это будет выглядеть так:

На этом с маркированным списком всё. В следующем уроке поговорим про нумерованный список.

webshake.ru

Маркированный список html и примеры его использования

Доброго всем времени суток, мои дорогие друзья и читатели. Вчера я справлял свой день рождения и хочу сказать, что прошло всё хорошо, как и планировалось — в семейном кругу. Ну это так и должно было быть. Всё таки сидели в семейном кругу. Ну 19 июня буду отмечать уже с друзьями, так что будет продолжение банкета. Но сегодня мы наконец можем вернуться в рабочие будни (правда я в отпуске) и продолжить изучение html языка.

Вы знаете? Вчера мы как раз с супругой составляли список того, что нужно покупать в дом, на день рождения, на отдых, и мне как раз пришло в голову: «О. А следующую статью я как раз посвящу спискам в html.» Вообще существует два основных типа, поэтому каждому типу я захотел посвятить отдельную статью. И вот сегодня мы будем изучать маркированный список html.

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

Компьютерные комплектующие:

• Материнская плата
• Оперативная память
• Жесткий диск
• Видеокарта
• И т.д.

Давайте теперь посмотрим как это всё воспроизвести в html

<UL> и <LI>

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

• <ul> — unordered list (неупорядоченный список). Этот тег ставится в начале списка и закрывается в самом конце. Он сообщает нам, что здесь будет находиться маркированный неупорядоченный список.
• <li> — list item (пункт списка). В эти теги заключается каждый элемент списка.

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

<ul>
<li>Peugeot</li>
<li>Opel</li>
<li>KIA</li>
</ul>

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

Атрибуты

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

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

• <ul type=»disc»> — это значение стоит по умолчанию, так что его вообще нет смысла прописывать. Маркеры выглядят как черные закрашенные кружочки;
• <ul type=»circle»> — благодаря этому значению маркер останется круглым, но будет уже не закрашенным;
• <ul type=»square»> — в данном случаем маркеры превратятся в маленькие черные квадратики.

Попробуйте сами посмотреть, как это работает и вы увидите все изменения.

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

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

Сделать это абсолютно несложно, просто в тот тег <li>, который мы хотим расширить добавляем новый контейнер списка <ul>, и уже туда вставляем очередной набор тегов <li> между которыми и будут написаны модели автомобилей. Все понятно? Если нет, то смотрим, как это выглядит в коде.

Теперь сохраняем и запускаем всё это дело в браузере. Смотрите, что у нас получилось: теперь в каждом элементе списка есть еще один новый cписок. Этого-то мы и добивались. И если вы заметили, то маркеры по умолчанию ставятся другие, нежели родительские. Это сделано специально, чтобы не путаться, но вы можете поставить нужный атрибут и выбрать свой маркер. Я думаю, что тут всё должно быть понятно.

Но в дальнейшем мы изучим CSS и будем делать уже всё в соответствии, как и надо. Благодаря стилям можно намного улучшить отображение списка и даже сделать собственный маркер. Видите меню у меня на блоге (Главная, Все статьи, Об авторе и т.д.)? Да и вообще можно зайти практически на любой сайт и увидеть подобное меню. Так вот, все эти пункты меню — это элементы списка, только он обработаны через CSS.

Ну в общем я думаю, что суть вы уловили. Но если вы хотите хорошо разбираться в HTML и CSS, то я вам настоятельно рекомендую посмотреть курс «HTML5 и CSS3 с нуля до профи». Благодаря этому курсу вы с легкостью изучите все основы html и css, а также научитесь самостоятельно верстать несколько типов сайтов: сайты-визитки, блоги, интернет-магазины, и даже лендинги. Курс действительно потрясающий.

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

С уважением, Дмитрий Костин.

 

koskomp.ru

No related posts.