Изучаем оформление списков на CSS
Время чтения: 2 мин.Здравствуй, уважаемый читатель.
Это восьмой урок изучения CSS. В этом уроке мы рассмотрим как задать стиль спискам и как вставить картинку вместо значка списка.
Перед изучением данного урока пройдите предыдущие уроки:
Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Теория и практика
В html мы изучали списки <ul>, <li>. В CSS существует несколько свойств для работы со списками. Но в CSS свойств больше и возможностей больше, чем в html.
list-style-type, list-style-position, list-style-image
Пример html кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html>
<head>
<title>Главная</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Фрукты</p>
<ul>
<li>Банан</li>
<li>Яблоко</li>
<li>Апельсин</li>
<li>Груша</li>
</ul>
<p>Фрукты</p>
<ul>
<li>Банан</li>
<li>Яблоко</li>
<li>Апельсин</li>
<li>Груша</li>
</ul>
</body>
</html> |
Пример CSS кода:
1 2 3 4 5 6 7 8 9 | .fruits{
list-style-type:upper-roman;
list-style-position:outside;
}
.fruits_o{
list-style-type:upper-roman;
list-style-position:inside;
} |
Как это выглядит в браузере:
Также вместо обычных значков можно вставить изображение. Делается это с помощью свойства list-style-image.
Изменим наш CSS код:
1 2 3 4 5 6 7 8 9 | .fruits{
list-style-image:url('hand_point.png');
list-style-position:outside;
}
.fruits_o{
list-style-image:url('hand_point.png');
list-style-position:inside;
} |
Как это выглядит в браузере:
Посмотреть примерСкачать
Но так как и в прошлом уроке данную запись можно сократить.
Сегодня мы рассмотрели как оформить список, как добавить изображение вместо обычного значка, а также как написать сокращенную форму. Чтобы лучше запомнить материал пробуйте всё написать руками.
Больше практикуйтесь!
Полное руководство по спискам в HTML и CSS
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Подписаться ×Перевод статьи «A complete guide about lists in HTML and CSS».
Что такое списки
Список это способ представления набора данных или информации. Таким образом этот набор данных становится более понятным, чем при любой другой форме изложения. Например, список покупок выглядит куда понятнее, если имеет вид именно списка, а не простого абзаца, где наименования идут просто через запятую.
Списки в HTML
Если вы хотите представлять на своих веб-страницах какие-то данные, являющиеся наборами чего-либо, список является прекрасным вариантом оформления. Благодаря спискам пользователи легче воспринимают информацию.
Виды списков
В HTML списки бывают трех видов:
- Упорядоченные списки.
- Неупорядоченные списки.
- Списки определений.
Что такое упорядоченный список?
Упорядоченный список это набор элементов, представленных в определенном порядке. Форма упорядоченного списка лучше всего подходит для представления наборов данных, где порядок элементов имеет значение.
Примерами могут послужить кулинарные рецепты, где действия следует выполнять в определенном порядке, или списки инструкций простой программы.
Подобные списки делают упорядоченными, потому что без нужной последовательности изложения эта информация теряет свой смысл. Упорядоченные списки также называют нумерованными.
Для создания упорядоченных списков используется тег <ol> (ordered list – «упорядоченный список»), а для каждого из его элементов – тег <li> (list – «список»).
HTML-код:
[html]<ol>
<li>Налейте воду в кастрюлю.</li>
<li>Добавьте сахар, чайные листья и специи.</li>
<li>Доведите до кипения и подержите на медленном огне около минуты.</li>
<li>Добавьте молоко.</li>
<li>Доведите до кипения и подержите на медленном огне 3-5 минут.</li>
</ol>
[/html]
Результат:
- Налейте воду в кастрюлю.
- Добавьте сахар, чайные листья и специи.
- Доведите до кипения и подержите на медленном огне около минуты.
- Добавьте молоко.
- Доведите до кипения и подержите на медленном огне 3-5 минут.
- Процедите чай и перелейте его в чайник.
Значения по умолчанию:
По умолчанию пункты списка обозначаются арабскими цифрами.
Это можно изменить, используя разные значения CSS-свойства list-style-type.
list-style-type: upper-alpha
See the Pen ordered-list-upper-alpha by Amrish Kushwaha (@isamrish) on CodePen.
list-style-type: upper-roman
See the Pen ordered-list-upper-roman by Amrish Kushwaha (@isamrish) on CodePen.list-style-type: lower-alpha
See the Pen ordered-list-lower-alpha by Amrish Kushwaha (@isamrish) on CodePen.
list-style-type: lower-roman
See the Pen ordered-list-lower-roman by Amrish Kushwaha (@isamrish) on CodePen.
Это самые часто используемые значения свойства list-style-type. Но есть множество других значений, которые мы рассмотрим дальше.
Что такое неупорядоченный
список?
Неупорядоченный список это список с элементами, которые могут быть представлены в произвольном порядке. Такие списки также называют маркированными.
Примеры таких списков – списки покупок, списки запланированных дел.
Для создания упорядоченных списков используется тег <ul> (unordered list), а для каждого из его элементов – тег <li> (как и в упорядоченном списке).
HTML-код:
[html]<ul>
<li>одежда</li>
<li>книги</li>
<li>ручки</li>
<li>ноутбук</li>
<li>сумка</li>
</ul>
[/html]
Результат:
- одежда
- книги
- ручки
- ноутбук
- сумка
Значения по умолчанию:
По умолчанию маркеры элементов представлены в виде кружочков. Это можно изменить, используя все то же CSS-свойство list-style-type.
list-style-type: circle
See the Pen unordered-list-circle by Amrish Kushwaha (@isamrish) on CodePen.
list-style-type: square
See the Pen unordered-list-square by Amrish Kushwaha (@isamrish) on CodePen.
list-style-type: disc
See the Pen unordered-list-disc by Amrish Kushwaha (@isamrish) on CodePen.
Дальше мы разберем и другие варианты стилей.
Что такое список определений?
Список определений отличается тем, что каждый его пункт состоит из двух элементов. Первый из них – термин, а второй – его определение.
Вы можете создать список определений при помощи тега <dl> (definition list – «список определений»). В пунктах списка термины (term) создаются при помощи тега <dt>, а описание (description) – при помощи тега <dd>.
Например:
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
See the Pen list-style-position-inside by Amrish Kushwaha (@isamrish) on CodePen.
Пример применения значения outside
See the Pen list-style-position-outside by Amrish Kushwaha (@isamrish) on CodePen.
А теперь давайте поиграем с цветами списка
Расцвеченный маркированный список
Вариант 1: элементы списка и маркеры имеют один цвет.
See the Pen same-color-unordered-list by Amrish Kushwaha (@isamrish) on CodePen.
Вариант 2: элементы списка и маркеры имеют разные цвета.
See the Pen different-color-unordered-list by Amrish Kushwaha (@isamrish) on CodePen.
Расцвеченный нумерованный список
Вариант 1: элементы списка и их номера имеют один цвет.
See the Pen colored-numbered-list by Amrish Kushwaha (@isamrish) on CodePen.
Вариант 2: элементы списка и их номера имеют разные цвета.
See the Pen different-color-numbered-list by Amrish Kushwaha (@isamrish) on CodePen.
Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!
Как сделать список в HTML (нумерованный и маркированный). Маркеры списка
В HTML за организацию списков отвечает целый набор тегов, организация которых должна соответствовать определенным правилам структуризации данных.
Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений. Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки.
Нумерованный список
Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее.
Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт — это нумерованный список, с чёткой последовательностью действий.
Для создания нумерованных списков в HTML используется тег <ol>, внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега <li>:
<html>
<body>
<h5>Нумерованный список:</h5>
<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
Попробовать »Примечание: тег <ol> в качестве дочерних элементов может содержать только теги <li>, то есть всё содержимое нумерованного списка должно размещаться внутри элементов <li>. Тег <li>, в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.
Маркированный список
Маркированный список — это ненумерованные, то есть неупорядоченные списки элементов, последовательность которых не имеет никакого значения. Все пункты маркированного списка имеют одинаковые маркеры, по умолчанию они отображаются в виде маленьких чёрных кругов.
Для создания маркированных списков в HTML применяется тег <ul>, внутри которого располагаются элементы самого списка (как и в случае с нумерованными списками используется тег <li>, который содержит в себе всё отображаемое содержимое списка):
<html>
<body>
<h5>Маркированный список:</h5>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
Попробовать »Виды маркеров
Виды маркеров нумерованного списка можно изменить с помощью атрибута type. Данный атрибут поддерживает пять видов маркеров:
| Значение | Описание |
|---|---|
| 1 | Десятичные числа (1, 2, 3..) |
| a | Список в алфавитном порядке, строчные буквы (a, b, c..) |
| A | Список в алфавитном порядке, заглавные буквы (A, B, C..) |
| i | Римские цифры, строчные (i, ii, iii, iv..) |
| I | Римские цифры, заглавные (I, II, III, IV..) |
Маркированные списки не имеют атрибута type, поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type, с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square.
Изменение маркеров у списков:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
<h5>Нумерованный список c атрибутом type="a":</h5>
<ol type="a">
<li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
</ol>
<h5>Нумерованный список c атрибутом type="I":</h5>
<ol type="I">
<li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
</ol>
<h5>Виды маркеров маркированных списков:</h5>
<ul>
<li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
</ul>
<ul>
<li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
</ul>
</body>
</html>
Попробовать »CSS свойство list-style-type, помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть тут.
Горизонтальный список
Если вы используете HTML список для создания горизонтального меню, то вам нужно будет расположить элементы списка друг за другом на одной строке. Средствами HTML это сделать не получится, поэтому нужно будет воспользоваться CSS.
Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block, в зависимости от того, какие ещё свойства вы собираетесь использовать.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
<style>li { display: inline; }</style>
</head>
<body>
<h5>Нумерованный список</h5>
<ol>
<li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
</ol>
<h5>Маркированный список:</h5>
<ul>
<li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
</ul>
</body>
</html>
Попробовать »После этого все пункты списка выстроятся в одну строку. Обратите внимание, что у пунктов списка пропадут маркеры и между ними не будет даже пробела, но отступ слева у списка останется.
Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть здесь.
С этой темой смотрят:
Как создать маркированный список? Маркированные и нумерованные списки. Оформление списков в CSS Как в css изменить маркер списка
Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.
По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится — цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).
Как изменить цвет буллитов с помощью CSS
- Скрываем оригинальные маркеры списка с помощью свойства list-style-type
- Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Это позволит вставить любой текст или символ перед элементом li .
- Внешним видом маркера можно управлять через стили CSS, изменяя цвет, шрифт, фон и другое. Я использовал жирное начертание шрифта Монтсеррат.
Если у вас возникла ситуация, когда маркеры появились в ненужных местах, например в главном меню или в дублирующем меню в футере, то это можно легко исправить. Просто допишите родительский элемент, в котором находятся списки, цвет маркеров которых нам надо изменить. Я добавил слово article и теперь эти изменения стали относиться только к контентной области сайта.
article li { list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ } article li:before { font-family: «Montserrat», sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: » «; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ }Сегодня разберемся, как создаются списки на веб-странице, какие маркеры используются и протестируем разные стили для изменения внешнего вида.
Напомню, как подключаются стили к Html странице:
Существуют маркированный, или ненумерованный список css и нумерованный.
Маркеры списка представляют собой изображения разных фигур: кружочки, квадратики, галки и тому подобное. Их еще называют пульками. В качестве маркеров для списка используются и собственные рисунки.
Нумерованный список представляет собой вывод информации под номерами 1, 2, 3 и т.д.
Обычно маркеры представляют собой простые черные кружочки, что привычно для пользователя, но с другой стороны не привлекают особого внимания к тексту.
Если вы решили заменить эти кружки на дизайнерские, то нужно освоить оформление списка с помощью css . Чем мы сегодня и займемся.
Основа любого списка состоит из следующего кода веб-страницы:
- Первый элемент списка
- Второй элемент списка
- Последний элемент списка
Выглядит этот блок так:
- Первый элемент списка
- Второй элемент списка
- Последний элемент списка
Css оформление маркеров списка
Внешний вывод будем прописывать в файле стилей style.css . Он может называться и по-другому, но иметь расширение.css.
Стандартные маркеры CSS: кружок (circle) – не закрашенный кружок, точка (disk) – закрашенный кружок, квадрат (square) – закрашенный квадрат.
Формирует список в css код ul — с его помощью мы задаем, какой из стандартных маркеров будет выводиться на странице.
Например, выведем списки с использованием кружка (circle). Запись в css файле будет такая:
Ul {list-style-type: circle}
Но часто нужно заменить маркеры не во всех выводимых списках, а только в определенных блоках. К примеру, изменить в постах, но не в комментариях. В этом случае, код ul не должен иметь никакого значения, а стиль кружка нужно прописать только для списков в постах. Так выглядит код без значения:
Ul {list-style-type: none}
Если вы не можете найти код в файле css, отвечающий за вывод списка в нужном вам блоке, то воспользуйтесь плагином для Firefox — Firebug или в Google Chrom нажмите правой кнопкой мыши на веб-странице блога. Затем «просмотр кода элемента».
Например, один из вариантов изменения внешнего вида списка в постах на стандартный кружок, если для блока контента нет ul :
Post-content ul {list-style-type: circle}
Или другой пример:
#content-blok ul{list-style-type:square}
Полный курс «Css практика»
]]> ]]>
Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы.
Для тех, кто хочет очень быстро научиться трюкам css стилей , ]]> рекомендую ]]> расширенный курс «CSS практика» Евгения Попова .
Следующие статьи:
Графические маркеры для списка.
Отступ списка css.
Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.
Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.
Скачать красивые маркеры для списков сайта.
Хочу изменить вид маркера на другой символ. Как это сделать?
С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому параметру list-style-type , который указывается для селектора UL или LI .
Квадратные маркеры
- Чебурашка
- Крокодил Гена
- Шапокляк
Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент before . Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому атрибуту list-style-type , а затем через двоеточие добавить псевдоэлемент before к селектору LI . Сам вывод символа осуществляется с помощью параметра content , в качестве значения которого и выступает желаемый текст или код знака в юникоде.
Символ в качестве маркера
- Чебурашка
- Крокодил Гена
- Шапокляк
В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ +.
Замечание
Псевдоэлемент before не работает в браузере Internet Explorer, поэтому собственные маркеры в нем отображаться не будут.
Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word, выбрав меню Вставка > Символ… После чего откроется окно, как показано на рис. 1.
Рис. 1. Выбор символа в программе Microsoft Word
Код знака, выделенный на рисунке цветом, следует вписать в качестве параметра content , добавив перед ним слэш. Например, для приведенного символа следует указывать content: «\25aa» .
Задача
Изменить вид маркеров в списке и заменить их на другой символ.
Решение
С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI (пример 1).
Пример 1. Стандартные маркеры
HTML5 CSS 2.1 IE Cr Op Sa Fx
Квадратные маркеры- Чебурашка
- Крокодил Гена
- Шапокляк
В данном примере в качестве маркеров используется квадрат (рис. 1).
Рис. 1. Вид маркеров
Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент :before . Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type , а затем добавить псевдоэлемент :before к селектору LI . Сам вывод символа осуществляется с помощью свойства content , в качестве значения которого и выступает желаемый текст или символ (пример 2).
Пример 2. Использование:before и content
HTML5 CSS 2.1 IE Cr Op Sa Fx
Символ в качестве маркера- Чебурашка
- Крокодил Гена
- Шапокляк
В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).
Рис. 2. Маркеры в виде символа
Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.
С помощью окна диалога Список можно изменить следующие параметры маркированного списка:
Символ маркера на любой символ из шрифтов, установленных на компьютере.
Величину выступа.
Расстояние между символом маркера и текстом.
Выравнивание.
Для этих целей необходимо войти в меню Формат – Список и нажать кнопкуИзменить , после чего откроется окно диалогаИзменить маркированный список , представленное на рис. 4.25.
Рис. 4.25. Окно диалога Изменить маркированный список
Ниже приведен состав его опций:
Опции | Назначение |
Символ маркера | |
Предлагает варианты различных шрифтов для выбранного символа | |
Позволяет осуществить выбор варианта символа маркера | |
Положение маркера | |
Определяет выравнивание и положение маркера относительно левой границы текста | |
Положение от текста | |
Устанавливает величину отступа от правого края маркера до начала текста | |
Позволяет визуально оценить, как будет выглядеть список после внесения в него изменений | |
Изменение формата нумерованного списка
Нумерованные списки создаются на вкладке Нумерованные (рис. 4.24). Если предложенные форматы нумерованного списка не подходят для оформления конкретного документа, можно создать собственный формат списка, нажав кнопкуИзменить в диалоговом окнеСписок на вкладкеНумерованный. При этом откроется окно диалогаИзменение нумерованного списка (рис. 4.26).
Рис. 4.26. Окно диалога Изменить нумерованный список
Ниже приведены опции этого окна диалога, с помощью которых осуществляется изменение формата нумерованного списка.
Опция | Назначение | |
Формат номера | ||
Нумерация | Осуществляет выбор стиля номеров для списка | |
Задает номер, с которого должна начаться нумерация в списке | ||
Позволяет выбрать шрифт для номеров в списке и для любого текста до и после номеров Открывает вкладку Шрифт | ||
Положение номера | ||
Выравнивание | Устанавливает выравнивание списка | |
Определяет выравнивание и положение номера | ||
Положение текста | ||
Устанавливает расстояние от правого края номера до начала текста | ||
Дает возможность увидеть все проводимые изменения до внесения их в документ | ||
Создание многоуровневых списков
Во многих видах документов встречаются более сложные типы списков. Это так называемые многоуровневые списки. В них также используется либо маркировка, либо нумерация, а иногда и сочетание того и другого. Но главное их отличие от предыдущих типов списков – наличие нескольких уровней. В зависимости от уровня для каждого абзаца устанавливается символ или номер.
Рис. 4.27. Вкладка Многоуровневые окна диалогаСписок .
Многоуровневые списки отличаются от обычных наличием отступов. Определенный отступ принимается за уровень такого списка.
Создание многоуровневого списка возможно только с помощью окна диалога Список . Причем уровни задает сам исполнитель, устанавливая определенные отступы. Word анализирует отступы и, в зависимости от их величины, нумерует, создавая уровни.
Можно создавать измененные форматы нумерации для различных уровней многоуровневого списка, однако в одном документе допустим только один формат многоуровневого списка.
Для создания многоуровневого списка необходимо выполнить следующие действия:
1. Определить фрагмент документа, который предполагается оформить в виде списка.
2. Создать отступы каждого абзаца, воспользовавшись кнопкойУвеличить отступ на панели инструментовФорматирование (при создании отступов нельзя использовать табуляцию).
3. Выделить выбранный фрагмент текста.
4. Выбрать команду Формат –Список . В окне диалогаСписок перейти на вкладкуМногоуровневый (рис. 4.27).
5. Выбрать нужный тип многоуровневого списка из предложенных вариантов. Нажать ОК .
Каким тегом задается нумерованный список. Оформление при помощи CSS нумерованного списка
, в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.Маркированный список
Маркированный список — это ненумерованные, то есть неупорядоченные списки элементов, последовательность которых не имеет никакого значения. Все пункты маркированного списка имеют одинаковые маркеры, по умолчанию они отображаются в виде маленьких чёрных кругов.
Для создания маркированных списков в HTML применяется тег
- , внутри которого располагаются элементы самого списка (как и в случае с нумерованными списками используется тег
- , который содержит в себе всё отображаемое содержимое списка):
Маркированный список:
- Кофе
- Чай
- Молоко
Виды маркеров
Виды маркеров нумерованного списка можно изменить с помощью атрибута type . Данный атрибут поддерживает пять видов маркеров:
Маркированные списки не имеют атрибута type , поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type , с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square .
Изменение маркеров у списков:
Заголовок страницыНумерованный список c атрибутом type=»a»:
- Яблоки
- Бананы
- Лимоны
Нумерованный список c атрибутом type=»I»:
- Яблоки
- Бананы
- Лимоны
Виды маркеров маркированных списков:
- Яблоки
- Бананы
- Лимоны
- Яблоки
- Бананы
- Лимоны
CSS свойство list-style-type , помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть .
Горизонтальный список
Если вы используете HTML список для создания горизонтального меню, то вам нужно будет расположить элементы списка друг за другом на одной строке. Средствами HTML это сделать не получится, поэтому нужно будет воспользоваться CSS.
Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block , в зависимости от того, какие ещё свойства вы собираетесь использовать.
Заголовок страницыНумерованный список
- Яблоки
- Бананы
- Лимоны
Маркированный список:
- Яблоки
- Бананы
- Лимоны
После этого все пункты списка выстроятся в одну строку. Обратите внимание, что у пунктов списка пропадут маркеры и между ними не будет даже пробела, но отступ слева у списка останется.
Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть .
Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера
, иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка. - Чебурашка
- Крокодил Гена
- Шапокляк
- Крыса Лариса
- Первый
- Второй
- Третий
- Первый
- Второй
- Третий
- Первый
- Второй
- Третий
- изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение — иудаизм и мусульманство вместе;
- изменение веры в непогрешимость любимой партии;
- убеждение в том, что инопланетяне существуют;
- предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).
В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
Пример 11.1. Создание маркированного списка
Маркированный списокРезультат данного примера показан на рис. 11.1.
Рис. 11.1. Вид маркированного списка
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега
- . Допустимые значения приведены в табл. 11.1
| Тип списка | Код HTML | Пример |
|---|---|---|
| Список с маркерами в виде круга | ||
| Список с маркерами в виде окружности | ||
| Список с квадратными маркерами |
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в примере 11.2.
Пример 11.2. Вид маркеров
Маркированный списокИзменение убеждений
Результат данного примера показан на рис. 11.2.
Нумерованные списки иногда называют упорядоченными. Списки данного типа представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от броузера и может задаваться атрибутами тегов списка. В остальном реализация нумерованного списка во многом похожа на реализацию маркированного списка.
Для создания нумерованного списка следует использовать тег-контейнер OL > OL >, внутри которого располагаются все элементы списка.
Каждый элемент списка должен начинаться тегом LI > и заканчиваться тегом LI >.
Спецификация элемента OL:
TYPE=»вид нумерации»
START=»начальная позиция»>
Атрибут TYPE задает вид нумерации, которой выделяются элементы списка. Он может иметь следующие значения:
A – маркеры в виде прописных латинских букв;
a – маркеры в виде строчных латинских букв;
I- маркеры в виде больших римских цифр;
i- маркеры в виде маленьких римских цифр;
1- маркеры в виде арабских цифр, это значение используется по
умолчанию.
Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации.
Спецификация элемента LI для нумерованного списка:
TYPE=»вид нумерации»
VALUE=»номер элемента»>
Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1.
Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов.
Пример использования нумерованного списка:
Пример спискаГорода России по величине:
Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. В отличие от других типов списков каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка указывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина.
Списки определений задаются с помощью тега-контейнера DL >. Внутри него тегом DT > отмечается определяемый термин, а тегом DD > – абзац с его определением. Внутри элемента
Списки — важная составляющая контента, так как они помогают упорядочить информацию. Текст в списках лучше воспринимается и проще запоминается.
Самый простой — перед каждым его элементом стоит маркер — кружок, квадрат или окружность. Последовательность элементов в маркированном списке не важна.
Чтобы его создать, нужно использовать всего два тега: и . — это контейнер, содержащий список, элементы которого задаются тегом .
4: Текст и списки — CSS Documentation
4: Текст и списки
Текст
В этом разделе мы рассмотрим те свойства текстового фрагмента, которые остались без внимания в разделах, посвященных блокам текста и шрифтам.
При обсуждении свойств блочных элементов разметки речь шла о параметрах, относящихся к блоку как целому. Мы не рассматривали внутренние характеристики текста.
Рассказывая о шрифтах, мы акцентировали внимание на начертаниях символов как таковых, а не на их соотношении.
Тем не менее в стороне остались такие важные характеристики текстового фрагмента, как:
- межбуквенные расстояния;
- высота строк;
- выравнивание;
- отступ в первой строке параграфа;
- преобразования начертания.
Все эти атрибуты сгруппированы в свойства текстовых фрагментов (Text Properties).
Межбуквенные расстояния
Расстояние между буквами автоматически регулируется размером шрифта — кеглем. Чем больше размер шрифта, тем больше расстояние между буквами: (открыть)
Рис. 11.1.Присмотревшись внимательно, нетрудно убедиться, что расстояние между буквами в слове «параграф» первого примера и буквами слова «параграфа» второго примера разное. Во втором случае оно больше:
Рис. 11.2.
Моноширинный шрифт выбран не случайно. На пропорциональном шрифте межбуквенное расстояние зависит от начертания букв и показать его как расстояние между буквами достаточно сложно. У моноширинного шрифта размер символа фиксирован, поэтому и расстояние между буквами прослеживается четко.
Однако не всегда удобно управлять межбуквенным расстоянием через кегль (font-size). Бывают случаи, когда нужно либо уплотнить строку, либо увеличить расстояния между буквами. Это можно сделать с помощью атрибута letter-spacing: (открыть)
<P >
Межбуквенное расстояние 5pt</P>
<P STYLE=
"font-family:monospace;
letter-spacing:10pt;
color:black">
Межбуквенное расстояние 10pt
</P>
Рис. 11.3.
Правда, в версиях Netscape Navigator 4.x этот параметр не поддерживается.
Выравнивание
По умолчанию все слова в параграфе прижаты влево. Левый край параграфа таким образом оказывается выравненным. Точно так же может быть выравнен правый край параграфа или блока текста, и даже оба края вместе.
В обычной HTML-разметке такой эффект достигается за счет применения атрибута ALIGN, как это сделано на страницах данного пособия:
Аналогичный результат в CSS достигается за счет атрибута text-align: (открыть)
<P >
Этот параграф выравнен по правому краю. Все
строки справа кончаются на границе раздела.
А вот слева они начинаются с различным
отступом от левого края.</P>
Рис. 11.4.
<P > Этот параграф выравнен по левому и правому краям. Все строки справа кончаются на вертикальной границе раздела. Все строки слева теперь начинаются также с вертикальной границы раздела.</P>
(открыть)
Рис. 11.5.
Выравнивать текст можно в любом блочном элементе. Причем можно не только выравнивать текст по краям блочного элемента, но и центрировать его (<P >…</P>).
Преобразование шрифта
Преобразование шрифта подразумевает капитализацию слов, перевод всех «больших» и «маленьких» букв в большие, или, наоборот, получение одних строчных.
Рассмотрим несколько примеров: (открыть)
<P >
Сделать заглавными</P>
<P >
Сделать строчными</P>
<P >
Сделать заглавными первые буквы в словах</P>
Рис. 11.6.
Обратите внимание, что выполнение преобразований зависит от алгоритма преобразования символов. В нелокализованных программах переход от строчных букв к прописным осуществляется путем простого смещения по таблице ASCII, что для русского алфавита не приемлемо.
Еще один вид преобразования шрифта — это подчеркивание, перечеркивание или надчеркивание слов. Выполняется такое преобразование с помощью атрибута text-decoration: (открыть)
<P >
Перечеркнем это предложение.</P>
<P >
Подчеркнем это предложение.</P>
Рис. 11.7.
Для того, чтобы преобразование работало, необходимо соответствующее начертание (подчеркнутые или перечеркнутые начертания букв). Очень сложно найти гарнитуру, в которой было бы начертание с надчеркнутыми буквами. Отмена декора происходит, если использовать в text-decoration значение none.
Первая строка параграфа
При оформлении параграфов в технологии CSS автор может воспользоваться «красной» строкой, такую возможность предоставляет ему атрибут text-indent.
Речь идет о горизонтальном отступе в первой строке параграфа относительно его левого края: (открыть)
<P >
Этот параграф мы начнем со строки с
горизонтальным отступом в двадцать
типографских пунктов от левого края параграфа.
</P>
<P >
А в этом параграфе мы применим отрицательный
горизонтальный отступ в первой строке
параграфа.</P>
Рис. 11.8.
Отрицательные значения атрибутов — это нормальная практика CSS. Там, где применение отрицательного значения оправдано, например, в случае смещения вложенного блока текста относительно охватывающего элемента разметки, можно указывать отрицательные атрибуты смещения.
Кроме text-indent в CSS для оформления первой строки параграфа зарезервирован модификатор стиля first-line. Он позволяет не только задать горизонтальное смещение, но и определить другие параметры параграфа:
P:first-line { color:red; } Еще один параметр, который влияет на отображение первой строки параграфа — первая буква первой строки. Ее отображением управляет модификатор first-letter:
P:first-letter { font-size:20pt; } К сожалению, оба названных модификатора реализованы не во всех версиях браузеров, поэтому для верности применяют элементы разметки FONT и TABLE.
Межстрочное расстояние
В CSS межстрочное расстояние определяется параметром line-height. Он задает расстояние не между строками, а между базовыми линиями строк. Проще говоря, если, например, взять букву «н» и напечатать ее последовательно друг под другом, то line-height будет равно расстоянию между двумя одинаковыми точками букв.
Рис. 11.9.
Посмотрим, как этот параметр влияет на взаимное расположение строк: (открыть)
<P >
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 12 pt.</p>
<P >
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 24 pt.</P>
<P >
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 6 pt.</P>
Рис. 11.10.
Первый пример набран со значением line-height, равным размеру кегля. Во втором примере значение line-height вдвое превышает размер кегля. В третьем примере значение line-height в два раза меньше размера кегля — строки стали «наползать» друг на друга.
В связи с использованием line-height следует обратить внимание на применение in-line картинок на HTML-страницах. Под in-line картинкой здесь имеется в виду картинка, которая встроена в тело документа при помощи элемента IMG, но не с новой строки и не как элемент таблицы: (открыть)
<P > В эту строку мы встраиваем картинку - <IMG SRC="inline.gif" BORDER="0" HEIGHT="24" ALIGN="top">, на которой изображены концентрические круги. </P>
Рис. 11.11.
Картинка имеет размеры 24х24 пиксела и выравнена по верхнему краю строки. Ее размер больше размера кегля (20 px), поэтому межстрочное расстояние увеличено браузером автоматически. (открыть)
<P >
В эту строку, которая имеет размер кегля 24рх,
мы встраиваем картинку - <IMG SRC="inline.gif"
BORDER="0" ALIGN="top">
, на которой изображены концентрические круги.
</P>
Рис. 11.12.
Таким образом, можно точно позиционировать текст и графику в строке.
Списки
При отображении списков CSS позволяет управлять формой и изображением «пулек» (bullets) списка. «Пулька» (bullet) — это символ, стоящий перед элементом списка. Например, в неупорядоченном списке (unordered list) перед элементом списка ставится «жирная» точка:
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
CSS позволяют управлять формой «пулек» и заменять «пульки» картинками.
Любопытно, что управление отображением элементов списка отнесено к набору свойств, в который входит атрибут display. У этого атрибута может быть только одно значение — none. Если элемент в своем описании имеет атрибут display, и этот атрибут равен none, то он не отображается браузером вообще:
<UL >
<LI>Первый элемент списка
<LI>Второй элемент списка
<LI>Третий элемент списка
</UL>
Если посмотреть HTML-код данного документа, то за примером описания списка следует код, который браузер не отобразил.
Атрибут display управляет отображением документа на дисплее компьютера, но не распространяется на другие среды отображения документа. Например, при печати скрытый список должен быть отображен.
Однако, на самом деле он не отображается и при печати.
Форма «пулек»
Форма «пульки» в виде «жирной» точки несколько непривычна. Обычно в машинописных документах используют черту. С другой стороны, в рекламных материалах часто в качестве «пульки» применяют квадрат или другой символ типографского набора, а также графическую картинку.
CSS позволяет управлять формой «пульки» через атрибут list-style-type: (открыть)
<UL >
<LI>В виде "пульки" используем квадрат
</UL>
<UL >
<LI>В виде "пульки" используем диск
</UL> <UL >
<LI>В виде "пульки" используем круг
</UL>
Рис. 11.13.
До сих пор мы обсуждали только неупорядоченные списки (UL), но управлять отображением «пулек» можно и в упорядоченных списках (OL): (открыть)
<OL >
<LI>...
...
</OL>
<OL >
<LI>...
...
</OL>
<OL >
<LI>...
...
</OL>
Рис. 11.14.
CSS позволяют вообще отказаться от «пулек». Для этого нужно указать значение атрибута list-style-type равным none.
«Пульки»-картинки
Если стандартные формы «пулек» автора страницы не устраивают, он может использовать нестандартные. Для этого ему придется «пульку» нарисовать самому и в виде графического файла разместить на Web-узле. У такой «пульки» есть URL, который используется в CSS для обращения к ней.
<UL
> <LI>Элемент списка расположен за чертой
</UL>
Картинка может быть и более замысловатой. Это уже зависит от фантазии автора документа. Например, можно создать картинку-стрелочку: (открыть)
<UL
> <LI>Элемент списка расположен за стрелкой
</UL>
Рис. 11.15.
Здесь надо признаться в маленьком обмане. Если вы пользователь Internet Explorer, то все, что здесь написано — верно. Фрагмент кода, представленный перед примером, является его точной копией. Однако перед пользователями Netscape Navigator придется извиниться: Netscape Navigator этот атрибут не поддерживает. В тексте страницы присутствует JavaScript-код, который имитирует применение атрибута list-style-image в случае просмотра страницы браузером от Netscape.
Маркированный список. 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. Список с графическими маркерами
Теперь можно использовать картинки для создания симпатичных списков, соответствующих стилю вашего сайта.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРесlist-style — CSS: каскадные таблицы стилей
Сокращенное свойство CSS стиля списка позволяет установить сразу все свойства стиля списка.
Примечание: Это свойство применяется к элементам списка, т. Е. Элементам с . По умолчанию это display : list-item;
Это свойство является сокращением для следующих свойств CSS:
стиль списка: квадрат;
стиль списка: url ('../ img / shape.png');
стиль списка: внутри;
стиль списка: грузинский внутри;
стиль списка: нижний римский URL ('../ img / shape.png') снаружи;
стиль списка: нет;
стиль списка: наследовать;
стиль списка: начальный;
стиль списка: вернуться;
стиль списка: не задано;
Свойство в стиле списка задается как одно, два или три ключевых слова в любом порядке. Если заданы list-style-type и list-style-image , то list-style-type используется в качестве запасного варианта, если изображение недоступно.
Значения
У Safari есть проблема, из-за которой неупорядоченные списки со значением стиля списка нет , примененным к ним, не будут распознаны как список в дереве специальных возможностей. Чтобы решить эту проблему, добавьте пробел нулевой ширины в качестве псевдоконтента перед каждым элементом списка, чтобы обеспечить правильное распознавание списка. Это гарантирует, что исправление ошибки не повлияет на дизайн и что элементы списка не будут неправильно описаны.
ul {
стиль списка: нет;
}
ul li :: before {
содержание: "\ 200B";
}
Тип и позиция стиля списка настроек
HTML
Список 1
- Элемент списка1
- Элемент списка2
- Элемент списка3
Список 2
- Элемент списка A
- Элемент списка B
- Элемент списка C
CSS
.один {
стиль списка: круг;
}
.два {
стиль списка: квадрат внутри;
} Результат
таблицы BCD загружаются только в браузере
Рецепты стиля списка | CSS-уловки
Списки - это фундаментальная часть HTML! Они полезны в таких вещах, как сообщения в блогах для перечисления шагов, рецепты для перечисления ингредиентов или элементы в меню навигации. Они не только дают возможность стилизовать, но и обеспечивают доступность. Например, количество элементов в списке объявляется в программе чтения с экрана, чтобы дать список некоторого контекста.
Давайте сосредоточимся здесь на стилизации списков, в основном просто упорядоченных и неупорядоченных списков (с извинениями за пренебрежение нашим другом к списку определений) и несколько необычных ситуациях стилизации.
Основы
Прежде чем делать что-либо слишком сложное, знайте, что существует довольно мало настроек для типа списка , которые могут полностью удовлетворить ваши потребности.
Прорыв посередине
Упорядоченные списки могут начинаться с с любого номера, который вы хотите.
Вложенные десятичные числа
Перевернутый список 10 лучших
Единственный перевернутый атрибут сделает свое дело.
Изображение пуль
Лучше всего использовать фоновое изображение на псевдоэлементе. Вы могли бы подумать, что list-style-image будет подходящим вариантом, но он крайне ограничен. Например, вы не можете расположить его или даже изменить его размер.
Emoji Bullets
Собранный «случайным образом» заказ
Значение Атрибут устанавливает элемент списка для использования маркера, релевантного для этой позиции.
Счетчики пользовательского текста
Может быть выполнено с псевдоэлементами для максимального контроля, но есть также list-style-type: '-';
Внутри и снаружи
Вещи лучше сочетаются с list-style-position: outside; (значение по умолчанию), но маркеры списка отображаются за пределами поля, поэтому вы должны быть осторожны, чтобы не обрезать их. Они могли свисать с края окна браузера или overflow: hidden; скроет их полностью.В последних двух примерах есть трюк, имитирующий более приятное выравнивание при рендеринге внутри элемента.
Цветные пули
Три пути сюда:
-
:: marker(самый новый и простой) - Классический стиль псевдоэлемента
-
background-image(это URL-адрес данных SVG, поэтому вы можете управлять цветом из CSS)
Колонный список
Количество столбцов может быть автоматическим.
Цветные номера в кружках
Пользовательские символы списка циклов
Одноразовые могут быть выполнены с помощью стиля списка : символы () и многоразовые наборы можно сделать с помощью @ counter-style , а затем использовать.Обратите внимание, что на момент написания это поддерживается только в Firefox.
полностью настраиваемых стилей списков | Современные решения CSS
Это выпуск №5 из серии, посвященной современным решениям CSS для проблем, которые я решал за последние 14 с лишним лет работы фронтенд-разработчиком .
Из этого туториала Вы узнаете, как использовать макет сетки CSS для упрощения пользовательского стиля списка в дополнение к:
- Атрибуты данных как содержимое псевдоэлементов
- Счетчики CSS для стилизации упорядоченных списков
- Пользовательские переменные CSS для стилизации элементов списка
- Адаптивные многоколоночные списки
Обновление : псевдоселектор
.:: markerтеперь хорошо поддерживается в современных браузерах.Хотя это руководство содержит полезные советы по CSS для перечисленных выше элементов, вы можете перейти к решению:: marker
Список HTML #
Сначала мы настроим наш HTML с одним ul и одним li . Я добавил более длинный пункт, чтобы помочь в проверке выравнивания, интервала и высоты строки.
- Элемент неупорядоченного списка
- Пирожное мороженое, сладкое кунжутное печенье, драже, кекс, вафельное печенье
- Элемент неупорядоченного списка
- Заказанный элемент списка
- Пирожное мороженое сладкое кунжутное печенье драже кекс вафельное печенье
- Заказанный элемент списка
Обратите внимание на использование role = "list" .Поначалу это может показаться лишним, но мы собираемся удалить неотъемлемый стиль списка с помощью CSS. Хотя CSS не часто влияет на семантическое значение элементов, list-style: none может удалить семантику списка для некоторых программ чтения с экрана. Самое простое решение - определить атрибут role , чтобы восстановить эту семантику. Вы можете узнать больше из этой статьи от Скотта О'Хара.
Базовый список CSS #
Сначала мы добавляем сброс стилей списков в дополнение к их определению как сетке с пробелом.
ol,
ul {
маржа: 0;
отступ: 0;
стиль списка: нет;
дисплей: сетка;
сетка-зазор: 1бэр;
} Преимущество grid-gap заключается в добавлении пространства между li , заменяя старый метод, такой как li + li {margin-top: ...} .
Далее подготовим элементы списка:
li {
дисплей: сетка;
столбца-шаблона-сетки: 0 1fr;
сетка-зазор: 1,75 эм;
align-items: start;
font-size: 1.5рем;
line-height: 1,25;
} Мы также настроили элементы списка для использования сетки. И мы обновили старую "хитрость" использования padding-left , чтобы оставить место для псевдоэлемента с абсолютным позиционированием с комбинацией первого столбца шириной 0 и grid-gap . Мы скоро увидим, как это работает. Затем мы используем align-items: начинаем вместо значения по умолчанию stretch и применяем стили некоторых типов.
UL: атрибуты данных для маркеров эмодзи №
Возможно, это не совсем масштабируемое решение, но для развлечения мы собираемся добавить настраиваемый атрибут данных, который будет определять эмодзи, который будет использоваться в качестве маркера для каждого элемента списка.
Во-первых, давайте обновим ul HTML:
- Элемент неупорядоченного списка
- Пирожное мороженое сладкое кунжутное печенье драже кекс вафельное печенье < / li>
- Элемент неупорядоченного списка
А чтобы применить смайлики как маркеры, мы используем довольно волшебную технику, в которой атрибуты данных могут использоваться в качестве значения свойства content для псевдоэлементов:
ul li :: before {
content: attr (data-icon);
font-size: 1.25em;
} Вот результат с проверкой элемента :: before , чтобы помочь проиллюстрировать, как работает сетка:
Смайлик все еще может занимать ширину, чтобы быть видимым, но фактически находится в промежутке между сеткой. Вы можете поэкспериментировать с установкой для первого столбца сетки li значения auto , что приведет к полному применению разрыва сетки между столбцом смайликов и столбцом текста списка.
OL: счетчики CSS и пользовательские переменные CSS #
СчетчикиCSS были жизнеспособным решением со времен IE8, но мы собираемся добавить дополнительный эффект использования пользовательских переменных CSS для изменения цвета фона каждого числа.
Сначала мы применим стили счетчиков CSS, назвав наш счетчик Orderlist :
ol {
сброс счетчика: заказанный список;
} ol li :: before {
counter-increment: orderlist;
содержание: счетчик (упорядоченный список);
}
Этим достигается следующее, которое не сильно отличается от стиля по умолчанию ol :
Затем мы можем применить базовый стиль к номерам счетчиков:
семейство шрифтов: "Indie Flower";
font-size: 1.25em;
line-height: 0,75;
ширина: 1,5 бэр;
набивка: 0,25 бэр;
выравнивание текста: по центру;
цвет: #fff;
цвет фона: фиолетовый;
border-radius: 0,25em; Сначала мы применяем шрифт Google и увеличиваем размер шрифта до . line-height составляет половину применяемой line-height из li (по крайней мере, это то, что сработало для этого шрифта, это может быть немного магическим числом). Он выравнивает число там, где мы хотели бы по отношению к основному текстовому контенту li .
Хотели бы вы, чтобы советы по CSS в вашем почтовом ящике? Присоединяйтесь к моему информационному бюллетеню, чтобы получать обновления статей, советы по CSS и внешние ресурсы!
Затем нам нужно указать явную ширину. В противном случае фон не появится, хотя текст появится.
Добавлен Padding для исправления выравнивания текста по фону.
Теперь у нас есть это:
Это, безусловно, кажется более индивидуальным, но мы немного расширим его, заменив background-color на пользовательскую переменную CSS, например:
ol {
--li-bg: пурпурный;
} ol li :: before {
background-color: var (- li-bg);
}
Он будет выглядеть так же, пока мы не добавим встроенные стили ко второму и третьему li для обновления значения переменной:
- Упорядоченный элемент списка.
- Пирожное мороженое, сладкое, кунжутное печенье, драже, кекс, вафельное печенье
- Упорядоченный элемент списка
И вот последние ul и ol вместе взятые:
Стефани Эклс (@ 5t3ph)
Обновите свои алгоритмы: многостолбцовые списки #
В нашем примере было только 3 элемента короткого списка, но не забывайте, что мы применили сетку к базовым ol и ul .
В то время как в предыдущей жизни я делал забавные вещи с модулем в PHP, чтобы разбивать списки и применять дополнительные классы для получения равномерно разделенных многоколоночных списков.
С сеткой CSS теперь вы можете применить его в трех строках с присущей ему отзывчивостью, равными столбцами и длиной строки содержимого:
ol,
ul {
дисплей: сетка;
столбца-шаблона-сетки: повтор (автозаполнение, minmax (22ch, 1fr));
сетка-зазор: 1бэр;
} Применяя к нашему существующему примеру (не забудьте сначала удалить max-width на li ) дает:
Вы можете переключить это представление, обновив переменную $ multicolumn в Codepen до true .
Попался: больше, чем просто текст как
li content # Если у вас есть более чем простой текст внутри li - включая что-то вроде невинного - наш шаблон сетки сломается.
Однако это очень простое решение - обернуть содержимое li в диапазон . Нашему шаблону сетки не важно, что это за элементы, но он ожидает только два элемента, из которых псевдоэлемент считается первым.
Обновление до CSS-маркера #
За несколько месяцев после публикации этой статьи поддержка :: marker стала намного лучше во всех современных браузерах.
Псевдоселектор :: marker позволяет напрямую изменять и стилизовать маркированный / числовой список ol или ul .
Мы можем полностью заменить решение для пуль ul , используя :: marker , но мы должны понизить версию нашего решения ol , потому что для :: marker :
-
анимация- * -
цвет -
содержание -
направление -
шрифт- * -
переход- * -
юникод-биди -
белое пространство
Стиль неупорядоченного списка с
:: маркер # Поскольку содержимое по-прежнему является разрешенным свойством, мы можем сохранить наше решение data-icon для разрешения пользовательских маркеров эмодзи 🎉
Нам просто нужно поменять местами :: before на :: marker :
ul li :: marker {
content: attr (значок данных);
font-size: 1.25em;
} Затем удалите больше не нужные свойства сетки из li и снова добавьте padding , чтобы заменить удаленный grid-gap :
li {
padding-left: 0,5em;
} Наконец, мы ранее удалили поле , но нам нужно добавить немного левого поля, чтобы обеспечить место для :: marker , чтобы предотвратить его обрезание из-за переполнения:
ol,
ul {
margin: 0 0 0 2em;
} И визуальные результаты идентичны нашему предыдущему решению, как вы можете видеть в демонстрации.
Стиль упорядоченного списка с
:: маркер #Для нашего упорядоченного списка теперь мы можем переключиться и воспользоваться встроенным счетчиком.
Нам также нужно отбросить background-color и border-radius , поэтому мы перейдем к использованию нашего настраиваемого свойства для значения color . И мы изменим имя нашего настраиваемого свойства на --marker-color для ясности.
Итак, наши сокращенные стили выглядят следующим образом:
ol {
- цвет маркера: пурпурный;
} li :: marker {
content: counter (элемент списка);
семейство шрифтов: "Indie Flower";
font-size: 1.5em;
color: var (- маркер-цвет);
}
Не забудьте также обновить имя настраиваемого свойства CSS в HTML!
Остерегайтесь этой ошибки : изменение свойства
displayдляliприведет к удалению псевдоэлемента:: marker. Поэтому, если вам нужен другой тип отображения для содержимого списка, вам нужно будет применить его, вложив дополнительный элемент оболочки.
:: marker Demo # Вот наши обновленные стили пользовательских списков, которые теперь используют :: marker .
Обязательно проверьте текущую поддержку браузера, чтобы решить, какое решение для стиля настраиваемого списка использовать с учетом вашей уникальной аудитории! Вы можете захотеть использовать :: marker как прогрессивное усовершенствование одного из ранее продемонстрированных решений.
Стефани Эклс (@ 5t3ph)
Для получения более подробной информации об использовании
:: markerознакомьтесь с этой отличной статьей Адама Аргайла.
списков стилей в CSS | Школа кодов викингов
Кто заказал стилизованный список? Кто-нибудь? Хм... надо разупорядочить тогда ...
В этом уроке мы проведем экскурсию по оформлению скучных списков HTML, которые можно было бы украшать. Мы представим некоторые специфические свойства CSS, которые вы можете использовать для изменения внешнего вида списков. Мы также предложим вам прочитать пошаговое руководство, которое проведет вас через более подробную информацию о том, как вы можете украсить старые списки HTML, чтобы они выглядели красиво и модно. К концу урока у вас будет отличное представление о том, как управлять списками с помощью CSS.
Списки стилей
Есть несколько простых способов изменить внешний вид списков HTML практически без каких-либо усилий. Звучит здорово, не правда ли?
- Изменение типа списка
- Отображение тегов
liв виде встроенного блока - Плавающие
liтеги
Давайте посмотрим на них по очереди.
Изменение типа списка
Свойство типа списка управляет внешним видом маркера в неупорядоченных списках и числовым значением в упорядоченных списках.Вы можете указать множество различных настроек, которые описаны в документации MDN. Часто вы устанавливаете для них различные значения для различных уровней вложенности списков. Вот простой пример:
ul {
тип-стиль-список: квадрат;
}
Это изменит все теги ul , которые будут отображаться с черными квадратами для маркеров.
Отображение
li тегов в строке Здесь мы можем описать два способа достижения одной и той же цели. Эта цель - вывести элементы списка в одну строку.Вы можете сделать это в одной строке CSS, указав отображение тегов li как inline-block .
li {
дисплей: встроенный блок;
}
Другой способ добиться того же эффекта - отобразить li как блок и переместить их влево. Поскольку основное различие между блоком и встроенным блоком состоит в том, что элементы блока имеют разрывы строк до и после них, плавающий элемент эффективно изменяет элемент на встроенный блок .Плавающий просто дает вам немного больше контроля. Для получения дополнительной информации о различиях между block и inline-block ознакомьтесь с дополнительными ресурсами этого урока.
li {
дисплей: блок;
плыть налево;
}
Использование чисел с плавающей запятой означает, что вам нужно использовать clearfix в родительском теге ul или ol , чтобы содержать плавающие теги li в списке.
Шей Хау: Создание списков, часть 2
В списках стилей есть еще много деталей.Ваша задача - прочитать пошаговое руководство Шэя Хоу по созданию списков. Если вы еще не ознакомились с разделом о списках стилей, вам следует прочитать его сейчас. Поиграйте с различными примерами живого кода, чтобы увидеть, как они работают.
Обзор кода
Важные фрагменты кода из этого урока
ul {
тип-стиль-список: квадрат;
}
li {
дисплей: встроенный блок;
}
li {
дисплей: блок;
плыть налево;
}
Завершение
Вы будете удивлены, насколько часто вы используете списки в повседневной разметке.Списки повсюду и искусно замаскированы стилем CSS во многих веб-приложениях, которые вы используете постоянно. Таким образом, вам будет очень полезно использовать навыки, полученные в этом уроке, на ваших собственных веб-страницах, чтобы внести такое же разнообразие в отображение списков HTML.
Использование определенных стилей списков · Документы WebPlatform
Сводка
В этой статье показаны основы использования CSS для конкретных списков для управления такими вещами, как внешний вид маркера.
Информация: Списки
Из предыдущих статей вы можете вспомнить, что вы можете добавлять контент перед любым элементом, чтобы отобразить его как элемент списка.Однако, CSS предоставляет специальные свойства, разработанные для списков, и обычно их удобнее использовать всякий раз, когда это возможно.
Чтобы указать стиль для списка, используйте свойство list-style, чтобы указать тип маркера.
Селектор в вашем правиле CSS может либо выбрать элементы элемента списка li , либо он может выбрать элемент родительского списка ul , чтобы его элементы списка унаследовали стиль.
Неупорядоченные списки
В неупорядоченном списке каждый элемент списка помечен одинаково.CSS имеет три типа маркеров пуль: диск , круг ,
и кв. .
Кроме того, вы можете указать URL-адрес файла изображения для значка маркера.
Эти правила определяют разные маркеры для разных классов элементов списка:
li.open {стиль списка: круг;}
li.closed {стиль списка: диск;}
Когда эти классы используются в списке, они различают открытые и закрытые элементы (например, в списке дел):
- Lorem ipsum
- Долор сидеть
- Амет священник
- Магна аликвота
- Autem vellum
Результат может выглядеть так:
Рисунок 1.Открытый и закрытый (кружок и диск) пункты списка.
Вы также можете использовать псевдокласс: nth-child с тем же результатом.
Заказные списки
В упорядоченном по списку каждый элемент списка помечен по-разному, чтобы показать его позицию в последовательности.
Опять же, используйте свойство стиля списка, чтобы указать тип маркера: десятичный , латиницей нижних , латиницей верхних , латиницей нижних или латиницей верхних .
Это правило определяет, что в элементах ol с классом info элементы идентифицируются заглавными буквами.
ol.info {стиль списка: верхний латынь;}
Элементы li в списке наследуют этот стиль:
- Lorem ipsum
- Долор сидеть
- Амет священник
- Магна аликвота
- Autem vellum
Результат может выглядеть так:
Рисунок 2.Элементы упорядоченного списка отмечены заглавными буквами.
Свойство в виде списка является сокращенным свойством. В сложных таблицах стилей вы можете предпочесть использовать отдельные свойства для установки отдельных значений. Ссылки на эти отдельные свойства и дополнительные сведения о том, как CSS определяет списки, см. В разделе list-style.
Браузеры различаются способом реализации стилей для списков. Не ожидайте, что ваша таблица стилей даст одинаковые результаты во всех браузерах.
Счетчики
Примечание: Некоторые браузеры не поддерживают счетчики.Страница содержимого CSS и совместимости браузеров на сайте Quirks Mode содержит подробную диаграмму совместимости браузеров для этой и других функций CSS. Вы также можете найти полезную информацию о совместимости браузеров на обширном сайте Can I Use.
Счетчики можно использовать для нумерации любых элементов, а не только элементов списка. Например, в некоторых документах вы можете нумеровать заголовки или абзацы.
Чтобы указать нумерацию, вы можете добавить счетчик с указанным вами именем.
В каком-то элементе до начала подсчета сбросьте счетчик со свойством counter-reset и именем вашего счетчика. Родитель элементов, которые вы подсчитываете, - хорошее место для этого, но вы можете использовать любой элемент, который стоит перед элементами списка.
В каждом элементе, в котором счетчик должен увеличиваться, используйте свойство counter-increment и имя вашего счетчика.
Обычно элемент, отображающий счетчик, также увеличивает его.
Чтобы отобразить счетчик, добавьте : перед или : после в селектор и используйте свойство content для размещения счетчика с элементом.
В значении свойства content укажите counter () с именем вашего счетчика. При желании укажите тип. Типы те же, что и в приведенном выше разделе Упорядоченные списки .
Например, это правило сбрасывает счетчик под названием «mynum», когда встречается h4 с классом с номером , подготавливая абзацы, следующие за h4 , для нумерации.
h4.numbered {counter-reset: mynum;}
Это правило отображает и увеличивает счетчик для каждого последующего элемента p с классом с номером .
p.numbered: before {
content: counter (mynum) ":";
счетчик инкремента: mynum;
font-weight: жирный;
}
Итак, для этого HTML:
Это h4
Это абзац.
Это абзац.
Это абзац.
результат выглядит так:
Рисунок 3. Нумерованные абзацы с использованием свойства счетчика .
Вы не можете использовать счетчики, если не уверены, что у всех, кто читает ваш документ, есть браузер, который их поддерживает. Если вы можете использовать счетчики, у них есть то преимущество, что вы можете стилизовать счетчики отдельно от элементов списка. В приведенном выше примере счетчики выделены жирным шрифтом, а элементы списка - нет.
Вы также можете использовать счетчики более сложными способами - например, для нумерации разделов, заголовков, подзаголовков и абзацев в официальных документах.Для получения дополнительной информации см. Автоматические счетчики и нумерация в Спецификации CSS.
Действие: стилизованные списки
Создайте новый документ HTML и назовите его
doc2.html. Скопируйте приведенный ниже код и вставьте его в документ:Образец документа 2 & lt; h4 & gt; Океаны & lt; / h4 & gt; & lt; ul & gt; & lt; li & gt; Арктика & lt; / li & gt; & lt; li & gt; Атлантический & lt; / li & gt; & lt; li & gt; Тихий океан & lt; / li & gt; & lt; li & gt; Индийский & lt; / li & gt; & lt; li & gt; Саузерн & lt; / li & gt; & lt; / ul & gt; & lt; h4 & gt; Нумерованные абзацы & lt; / h4 & gt; & lt; p & gt; Lorem ipsum & lt; / p & gt; & lt; p & gt; Долор сидеть & lt; / p & gt; & lt; p & gt; Amet Conctetuer & lt; / p & gt; & lt; p & gt; Аликвота Magna & lt; / p & gt; & lt; p & gt; Autem vellum & lt; / p & gt;Создайте новую таблицу стилей и назовите ее
style2.css. Скопируйте приведенный ниже CSS и вставьте его в таблицу стилей:/ * пронумерованные абзацы * / h4.numbered {counter-reset: mynum;}p.numbered: before {
content: counter (mynum) ":";
счетчик: mynum;
font-weight: жирный;
}При желании можно отредактировать макет и комментарии.
Откройте документ в браузере. Если ваш браузер поддерживает счетчики, вы увидите что-то вроде примера ниже. Если ваш браузер не поддерживает счетчики, то вы не увидите цифр (и, вероятно, не будут отображаться даже двоеточия):
Рисунок 4.Элементы неупорядоченного списка и пронумерованные абзацы.
Также важно упомянуть в этом руководстве, что стилизованные списки часто используются в качестве меню из-за семантики. Для этого люди используют свойства css, такие как list-style: none, display: inline-block или block и т. Д., Псевдоклассы, такие как :: before и :: after, и другие настраиваемые стили, чтобы эти элементы выглядели красиво.
См. Также
Вопросы для упражнений
- Добавьте в таблицу стилей правило для нумерации океанов римскими цифрами от i до v:
- Измените свою таблицу стилей, чтобы выделить заголовки заглавными буквами в круглых скобках.
Атрибуты
Эта статья содержит контент из внешних источников, в том числе под лицензией CC-BY-SA.
Авторские права на часть этого содержимого принадлежат авторам Mozilla 2012. Эта статья содержит работу, лицензированную на условиях Creative Commons Attribution-Sharealike License v2.5 или более поздней версии. Оригинальная работа доступна в сети разработчиков Mozilla: статья
.
Списки стилей
По умолчанию элементы списка имеют либо маркеры, либо номера, в зависимости от типа списка.Однако CSS предлагает ряд методов для настройки стиля и , позиционирующих маркеров элементов списка.
на этой странице
Тип стиля списка Вложенные списки Обивка Положение стиля списка Практическое упражнение РесурсыТип списка стиля
Свойство типа стиля списка определяет, какой стиль маркера или числового индикатора применяется к каждому элементу списка. Это свойство будет работать, если оно применяется ко всему списку ( ul или ol ) или если оно применяется непосредственно к элементам списка ( li ).Некоторые общие возможные значения:
-
диск: значение по умолчанию. Закрашенный круг. -
нет: маркер не отображается. -
круг: полый круг. -
квадрат: закрашенный квадрат. -
десятичное: десятичные числа, отсчет от 1. -
десятичный-ведущий-ноль: десятичные числа с ведущим нулем, отсчет от 01. -
верхние римские: римские цифры в верхнем регистре, отсчет от I. -
нижняя римская: римские цифры в нижнем регистре, отсчет от i. -
верхняя латинская: прописные буквы алфавита, отсчет от A. -
строчные латинские: строчные буквы алфавита, отсчет от a.
Вложенные списки
По умолчанию список, вложенный в другой список, получает разные маркеры / номера из родительского списка. Это отлично подходит для создания визуального различия между разными уровнями иерархии.Чтобы создать собственные стили вложенных списков, вы можете использовать селектор потомков. ul ul выбирает любой список внутри другого списка. И ul ul ul выбирает для любого списка, вложенного как минимум в два уровня. И так далее.
В приведенном выше примере попробуйте разные значения для list-style-type для разных списков. Можете ли вы понять, как сделать так, чтобы только вложенные и отображали десятичные числа?
Набивка
По умолчанию списки имеют определенное количество padding-left , которое отвечает за отступ текста.И, по умолчанию, пуля находится внутри мягкой области. Если вы хотите удалить или скорректировать отступ, вы можете просто применить собственное значение, например отступ слева: 0;
Позиция стиля списка
По умолчанию маркированный / числовой индикатор, связанный с элементами списка, размещается за пределами макета, слева от выравнивания текста. Однако это можно изменить с помощью свойства list-style-position . Значение по умолчанию - за пределами .При изменении значения внутри маркеры / индикаторы обрабатываются как часть текста. Пожалуй, лучше всего это понять на примере:
Практическое упражнение
ресурсов
CSS Свойство: тип-стиль-список | HTML Dog
Свойство CSS: стиль-список | HTML СобакаВы здесь: Главная → Ссылки → CSS → Свойства →
Стиль маркера списка или система нумерации в списке.
Применяется к блокам, установленным на display: list-item (из которых li HTML-элементов по умолчанию).
Тип стиля списка также может быть указан как часть сокращенного свойства стиля списка .
Возможные значения
| Значение | Описание |
|---|---|
диск | Сплошной круг. |
круг | Полый круг. |
квадрат | Сплошной квадрат. |
десятичный | 1, 2, 3, 4 и т. Д. |
десятичный-ведущий ноль | 01, 02, 03… 10, 11 и т. Д. |
нижний римский | i, ii, iii, iv и т. Д. |
заглавные римские буквы | I, II, III, IV и т. Д. |
нижнегреческие символы | греческие буквы. |
нижняя латынь | a, b, c, d и т. Д. |
верхняя латынь | A, B, C, D и т. Д. |
армянский | Армянская нумерация. |
грузинский | грузинский нумерация. |
младший альфа | Эквивалент младшего латинского . |
верхний альфа | Эквивалент верхний латинский . |
нет | Нет маркера списка. |
наследство | |
начальное | |
снятое | |
Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.
Пример
ли {список-стиль-тип: нижний римский; }
Поддержка браузера
Поддерживается всеми современными браузерами.