Нумерованный и маркерованный список (list-style) в CSS

создание пунктуальности (никогда не будете никуда опаздывать);

Подробный обзор

Маркер в виде картинки

<ul style=»list-style-image: url(‘/’);»> <li>Мышь</li> <li>Кот</li> <li>Сыр</li> </ul>

  • Мышь
  • Кот
  • Сыр

Обратите внимание на то, что в значении свойства внутри атрибута были использованы одинарные кавычки, чтобы задать адрес картинки «( ‘ / ‘ );..». Если бы были использованы двойные кавычки, то браузер бы подумал, что атрибут style закончился. Но благодаря другому виду кавычек, свойство можно успешно записать в атрибут. Таким чередованием двойных и одинарных кавычек можно пользоваться в том числе и в JS скриптах внутри тегов, к примеру, onmousedown (читайте об этом подробнее в разделе JS скриптов).

Формирование правильной нумерации во вложенном нумерованном списке HTML с помощью CSS

Рассмотрим подробнее свойства элементов нумерованного списка HTML, которые можно модифицировать с помощью CSS.

  • list-style: none;
    • отменим все стили списка для элементов ol (если они вдруг были ранее назначены) с помощью свойства list-style
  • counter-reset: li;
    • назначим идентификатор li , в котором будет храниться счётчик отображений элемента ol с помощью свойства counter-reset
  • counter-increment: li;
    • обозначим идентификатор li как счётчик, который будет подсчитывать количество отображений элементов ol на странице и будет выводиться с помощью свойства content и псевдоэлемента:before для li
  • content: counters(li,».») «. «;
    • зададим последовательность вывода счётчика li для всех элементов нумерованного списка ol .

Таким образом, изменив четыре свойства css двух элементов ol и li нумерованного списка можно получить красивый нумерованный список HTML, который легко воспринимается и более привычен нам, так как в нём наглядно прослеживается вложенность элементов и принадлежность к родительским элементам списка.

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

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

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

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

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

Результат:

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

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

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

— type=»circle» — пустой кружочек.

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

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

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

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

Результат:

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

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

В HTML существует три вида списков:

1. Маркированный список html. За его отображение отвечает тег ul. То есть текст, расположившийся между открывающимся <ul> и закрывающимся </ul> тегом, будет относиться к маркированному списку.

Читайте также:  Как Отключить Доверительный Платеж На Мтс

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

Образец маркированного списка<ul><li>Создание сайта</li><li>Оптимизация</li><li>Продвижение</li><li>Монетизация</li></ul>

Тег <ul> может содержать внутри себя следующие параметры:

<ul

circle – маркер в виде не закрашенного кружка.

type= disc – маркер в виде закрашенного кружка.

square – маркер квадратной формы.

compact – компактное отображение списка.

>

Указанный параметр type можно использовать для тега <li>, но он будет активен только для конкретного пункта меню.

При желании установить какой-то особый маркер можно вместо привычного тега <li> применять тег <img src…> в результате чего напротив пункта будет отображаться изображение.

2. Нумерованный список html. За отображение и вывод данного HTML списка отвечают парные теги <ol>… </ol>

Для создания каждого пункта списка, так как и в вышеприведенном примере используется элемент <li>

Образец нумерованного списка<ol><li>Создание сайта</li><li>Оптимизация</li><li>Продвижение</li><li>Монетизация</li></ol>

Тег <ol> может включать в себя следующие атрибуты:

<ol

type – отвечает за вид маркера, который может отображаться в виде букв или цифр. К нему относятся значения:

1 – маркер по умолчанию (десятичная нумерация).

А – заглавные буквы (A, B, C…).

а – строчные буквы (A, B, C…).

I – римские заглавные буквы (I, II, III…).

i – строчные римские.

reversed – задает команду отображения списков в обратном отчете (5, 4, 3…).

start – отвечает за вывод начального значения, от которого начнется естественный отсчет нумерации. К примеру, поставленное в начале списка значение <ol start =”B”, говорит о том, что первому пункту списка будет присвоен порядковый номер «B».

Образец нумерованного списка с использованием атрибута type<ol type=»I»><li>Создание сайта</li><li>Оптимизация</li><li>Продвижение</li><li>Монетизация</li></ol>

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

В свою очередь тег <li> в нумерованном списке может в себя вмещать атрибут:

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

3. Список определений html. Для создания и отображения данного списка используется тег <dl>…</dl>

Для добавления термина применяется тег <dt></dt>, определения <dd></dd>. Данный тег не имеет атрибутов.

Образец списка содержимого в HTML <dl> <dt>Администратор сайта:</dt> <dd>Александр Щербына</dd> <dt>Посетители:</dt> <dd>Подписчики</dd> <dd>Все желающие</dd></dl>

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

Спасибо за внимание и до скорого на страницах Stimylrosta.

Читайте также:  Как сделать сводную таблицу в Excel - способы создания

Атрибуты тега

Атрибут Значение Описание reversed Логический атрибут. Указывает на использовании обратной нумерации (9, 8, 7, 6, start число Устанавливает стартовый номер для нумерации. type A a I i Тип нумерации списка: – арабские цифры (1, 2, 3, 4, A – английский алфавит. Заглавные (прописные) буквы (A, B, C, D, E. ). a – английский алфавит. Строчные буквы (a, b, c, d, e. ). I – Римские цифры. Заглавные (прописные) символы (I, II, III, IV, V. ). i – Римские цифры. Строчные символы (i, ii, iii, iv, v. ). Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега , который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом , как показано ниже.

Если не указывать никаких дополнительных атрибутов и просто написать тег , то по умолчанию применяется список с арабскими числами (1, 2, , как показано в примере

Пример Создание нумерованного списка Результат данного примера показан на рис. Рис. Вид нумерованного списка Заметьте, что в нумерованном списке также добавляются автоматические отступы сверху, снизу и слева от текста. В качестве нумерующих элементов могут выступать следующие значения: арабские числа (1, 2, 3, . ); прописные латинские буквы (A, B, C, . ); строчные латинские буквы (a, b, c, . ); прописные римские числа (I, II, III, . ); строчные римские числа (i, ii, iii, . ). Для указания типа нумерованного списка применяется атрибут type тега . Его возможные значения приведены в табл.

Табл. Типы нумерованного списка

Тип списка Код HTML Пример Арабские числа

. Чебурашка Крокодил Гена Шапокляк Прописные буквы латинского алфавита

. A. Чебурашка B. Крокодил Гена C. Шапокляк Строчные буквы латинского алфавита

. a. Чебурашка b. Крокодил Гена c. Шапокляк Римские числа в верхнем регистре

. I. Чебурашка II. Крокодил Гена III. Шапокляк Римские числа в нижнем регистре

. i. Чебурашка ii. Крокодил Гена iii. Шапокляк Чтобы начать список с определенного значения, используется атрибут start тега . При этом не имеет значения, какой тип списка установлен с помощью type , атрибут start одинаково работает и с римскими и с арабскими числами. В примере показано создание списка с использованием римских цифр в верхнем регистре, начинающихся с восьми.

Пример Нумерация списка Результат данного примера показан на рис. Рис. Нумерованный список с римскими числами

Похожие записи:

  1. Среднее значение массива java
  2. Телефон временно недоступен что значит мтс
  3. Цифровой телефонный аппарат panasonic