Списки html как сделать другой маркер

Добавил пользователь Владимир З.
Обновлено: 19.09.2024

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

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

• нумерованный (упорядоченный) список – HTML элемент
• маркированный (неупорядоченные) список – HTML элемент

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

Изменение типа маркера

Первое свойство, которое хотелось бы рассмотреть это свойство list-style-type, оно задает тип маркера элемента списка.

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

• Элемент списка
• Элемент списка
• Элемент списка

Обращаю Ваше внимание, что значения hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha не поддерживаются браузером Internet Explorer.

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

В данном примере мы создали два стиля, первый устанавливает тип маркера - римские числа в нижнем регистре (значение lower-roman ), мы его применили к нумерованном списку (HTML элемент ), а к маркированному списку (HTML элемент ) мы применили стиль, который устанавливает тип маркера в форме полого круга (значение circle ).

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

Рис. 69 Пример использования свойства list-style-type (установка типа маркера).

В этом примере мы стилизовали все нечетные элементы списка - указали тип маркера квадрат, а цвет текста указали зеленый. Четные элементы списка получили следующий стиль: красный цвет текста и отсутствие маркера.

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

Рис. 70 Пример чередования стилей свойства list-style-type.

Расположение маркера относительно элемента списка

С помощью CSS свойства list-style-position вы можете определить расположение маркера, либо цифры относительно элемента списка. Для того, чтобы расположить маркер (цифру) внутри элемента списка вместе с содержимым, то необходимо использовать значение inside , а для того, чтобы расположить за границей элемента списка необходимо использовать значение outside .

Давайте для наглядности рассмотрим пример, в котором помимимо свойства list-style-position используем еще одно новое свойство, которое позволит нам установить границы элемента.

Универсальное свойство border, которое позволяет установить границу для всех элементов списка, мы использовали для лучшего понимания работы свойства list-style-position. Работа с границами элементов в скором времени будет подробно рассмотрена в учебнике в статье "Границы элемента в CSS".

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

Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).

Создание собственных маркеров

Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.

Синтаксис свойства следующий:

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

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

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

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

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

Рис. 72 Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).

Изменение цвета маркера в CSS

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

Рис. 73 Пример изменения цвета маркера с использованием свойства content и псевдоэлемента :before.

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

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

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла и изображение) в любую папку на вашем жестком диске:
  

Практическое задание № 18.
Продвинутое задание:

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

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

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

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

Для чего нужны списки в HTML

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

Списки делают информацию более наглядной и удобной для восприятия. Например, вы составляете список покупок, берете лист бумаги и пишите:

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

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

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

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

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

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

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

1. Нумерованный HTML список формируется при помощи HTML тэга
   . Каждый пункт такого списка будет пронумерован, хотя вместо арабских цифр могут быть использованы римские цифры или буквы алфавита. Сокращение ol расшифровывается как ordered list.
   1. Маркированный HTML список. Каждый элемент такого списка имеет маркер с левой стороны. Маркированный HTML список формируется при помощи тэга , что можно расшифровать, как unordered list.
   2. Список определений состоит из трех HTML элементов и формируется при помощи трех тэгов. За формирование списка определений в HTML отвечает тэг . Тэг парный с обязательным закрывающим тэгом. HTML элемент DL блочный. Сокращение dl расшифровывается, как definition lists. Особенность списка определений заключается в том, что один его пункт состоит из двух HTML элементов: первый элемент – это термин, который обозначается тэгом , он является парным тэгом с опциональным закрывающим. HTML элемент DT блочный. Второй элемент – определение, которое обозначается тэгом , это парный тэг с опциональным закрывающим тэгом, а HTML элемент DT блочный.
   3. Список директорий в HTML считается запрещенным и не рекомендован к использованию. Список директорий формируется при помощи тэга , который является парным HTML тэгом, а элемент HTML страницы DIR блочный.
   4. Список меню в HTML. Формируется при помощи тэга , тэг является парным тэгом, а элемент MENU блочный. В стандарте HTML01 тэг считается запрещенным, но стандарт HTML 5 рекомендует использовать тэг для создания меню на сайте, чтобы поисковые системы и некоторые браузеры понимали, что это не просто список со ссылками, а именно меню сайта.

   Маркированный HTML список. HTML атрибуты маркированных списков

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

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

   1. Чтобы сделать маркер HTML списка в виде диска, нам нужно указать: type=”disc”.
   2. Если мы хотим, чтобы маркер списка отображался в виде квадрата, то нужно написать следующее: type=”square”.
   3. Если же вы хотите, чтобы маркер HTML списка был в виде окружности, то: type=”circle”.

   Значение по умолчанию для любого маркированного HTML списка в любом браузере: type=”disc”. CSS так же позволяет изменять вид маркера при помощи свойства list-style-type.

   Давайте попрактикуемся в создании маркированных HTML списков, откройте любой редактор (можно даже Блокнот, но я бы рекомендовал вам попробовать бесплатный редактор с подсветкой синтаксиса Notepad++) и напишите следующий код:

   
   

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

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

   Сначала нужно получить картинку маркера.

   Можно найти её в интернете, тем у кого есть фотошоп, можно сделать в нём. Я покажу, как сделать маркеры в редакторе Paint, так как он есть во всех Windows по умолчанию.

   Картинку можно взять прямо отсюда.

   
   

   Если нужен маркер помельче, то можно уменьшить масштаб экрана браузера(в Paint у меня, например, масштабирование работает очень грубо), и вырезать картинку помельче.

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

   
   

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

   Теперь приступим к украшению списка этой картинкой. Свойство, применяемое для вставки картинки маркера в список, называется list-style-image. В значении его указывается путь к картинке.

   Если Вам потребуется заключить список в рамку, то в селектор ul добавляется свойство list-style-position: inside;. Это свойство указывает на то, что маркеры должны располагаться внутри рамки, отодвинув при этом содержание.

   Можно сделать список в блоке с закруглёнными углами и тенью. Для этого в селектор ul добавляются свойства border-radius и box-shadow.

   Пример, html документ, с использованием этих блоков для списка с маркерами-картинками.

   В этом коде Вам нужно будет только вставить своё название картинки в свойстве list-style-image, там где 2.jpg, а у меня получился вот такой список

   
   

   Попробуйте поиграть со значениями (цифрами) в блоках border-radius и box-shadow, чтобы узнать, какие очертания может принять этот список.

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

   Маркеры можно и нарисовать средствами CSS. Об этом в статье CSS маркер списка

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

   Неужели не осталось вопросов? Спросить

   
   Перемена

   -Почему ты стал антисемитом?
   -Один еврей испортил мне всю жизнь.
   -И как же его звали?
   -Мендельсон.

   Подпишись на наш телеграм-канал TechRocks WEB-разработка?

   
   

   Что такое списки

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

   Списки в HTML

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

   Виды списков

   В HTML списки бывают трех видов:

   1. Упорядоченные списки.
   2. Неупорядоченные списки.
   3. Списки определений.

   Что такое упорядоченный список?

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

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

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

   
   
   1. Налейте воду в кастрюлю.
      
   2. Добавьте сахар, чайные листья и специи.
      
   3. Доведите до кипения и подержите на медленном огне около минуты.
      
   4. Добавьте молоко.
      
   5. Доведите до кипения и подержите на медленном огне 3-5 минут.
      
   6. Процедите чай и перелейте его в чайник.
      
   1. Налейте воду в кастрюлю.
   2. Добавьте сахар, чайные листья и специи.
   3. Доведите до кипения и подержите на медленном огне около минуты.
   4. Добавьте молоко.
   5. Доведите до кипения и подержите на медленном огне 3-5 минут.
   6. Процедите чай и перелейте его в чайник.

   Значения по умолчанию:

   По умолчанию пункты списка обозначаются арабскими цифрами.

   Это можно изменить, используя разные значения CSS-свойства list-style-type.

   list-style-type: upper-alpha

   list-style-type: upper-roman

   list-style-type: lower-alpha

   list-style-type: lower-roman

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

   Что такое неупорядоченный список?

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

   Примеры таких списков – списки покупок, списки запланированных дел.

   Для создания упорядоченных списков используется тег (unordered list), а для каждого из его элементов – тег (как и в упорядоченном списке).

   Значения по умолчанию:

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

   list-style-type: circle

   list-style-type: square

   list-style-type: disc

   Дальше мы разберем и другие варианты стилей.

   Что такое список определений?

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

   See the Pen definition-list by Amrish Kushwaha (@isamrish) on CodePen.

   Что такое вложенные списки?

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

   See the Pen nested-list by Amrish Kushwaha (@isamrish) on CodePen.

   Стиль списка

   Для придания стилей списку используются три CSS-свойства.

   list-style-type

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

   Это свойство может принимать несколько значений:

   • disc (круг)
   • square (квадрат)
   • circle (окружность)
   • decimal (арабские цифры)
   • lower-alpha (строчные латинские буквы, =lower-latin)
   • lower-roman (римские цифры в нижнем регистре)
   • lower-latin (строчные латинские буквы, =lower-alpha)
   • lower-greek (строчные греческие буквы)
   • upper-alpha (заглавные латинские буквы, =upper-latin)
   • upper-roman (римские цифры в верхнем регистре)
   • upper-latin (заглавные латинские буквы, =upper-alpha)

   С полным списком возможных значений свойства list-style-type можно ознакомиться здесь.

   list-style-image

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

   See the Pen list-style-image by Amrish Kushwaha (@isamrish) on CodePen.

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

   list-style-position

   Это свойство служит для определения положения маркера относительно элементов списка. Свойство list-style-position может принимать два значения: inside (внутри) и outside (снаружи).

   Пример применения значения inside

   Пример применения значения outside

   А теперь давайте поиграем с цветами списка

   Расцвеченный маркированный список

   Вариант 1: элементы списка и маркеры имеют один цвет.

   Вариант 2: элементы списка и маркеры имеют разные цвета.

   Расцвеченный нумерованный список

   Вариант 1: элементы списка и их номера имеют один цвет.

   Вариант 2: элементы списка и их номера имеют разные цвета.

   Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!

   Читайте также:

     
   • Ограждение для кровати для лежачих больных в домашних условиях своими руками
     
   • Русалка своими руками для сада из пластиковых бутылок
     
   • Косплей цунаде своими руками
     
   • Как установить доводчик нора м своими руками
     
   • Продление срока службы огнетушителя как это сделать