Как в списке вывести римские числа?
Для изменения вида нумерации списка и вывода римских чисел используется свойство list-style-type со значением upper-roman для заглавных символов (пример 1) и lower-roman для строчных.
списки
Начинаем работать с CSS-счётчиками
Оригинал: scotch.io/tutorials/getting-started-with-css-counters
Перевод: Влад Мержевич
Для веб-разработчиков правильное представление информации стоит на первом месте. Одним из способов соответственного отображения информации — обозначить иерархию, отвечая на вопрос «что идёт первым?».
Верный путь для обозначения иерархии — через нумерацию объектов. Кроме нумерованного списка в CSS нет другого элемента, который позволяет нам увеличивать порядок. Если бы мы хотели отобразить числа, то должны были сделать некоторую подготовку. Слежение за индексом, его автоинкремент и др. Что-то вроде этого.
PHP
<ul class="numbered-list">
<?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
<li class="numbered-list__item">
<span class="numbered-list__counter">
<?php echo $i ?>
</span>
<!-- Остальная разметка -->
</li>
<?php endfor ?>
</ul>Это хорошо до определённой степени, но здесь имеются свои ограничения. Что, если мы хотим использовать буквы, римские цифры, греческие символы и др. Реализация чего-либо потребует использования пользовательских библиотек.
К счастью, в CSS мы можем реализовать подобные вещи, не прилагая особых усилий.
Создание списков
Переведена и выложена следующая глава из книги Шэя Хоу с уроками по HTML и CSS. На этот раз создаём списки и применяем их на сайте Styles Conference, который из урока в урок обретает свой окончательный вид и обрастает новыми деталями.
Список с русскими буквами
В CSS нумерованный список может быть с латинскими и греческими буквами. А вот русских букв для списка нет. Нам это обещают в CSS3, но когда в реальности браузеры начнут поддерживать эту возможность никому не известно. Так что не станем пассивно ждать этого момента, и с помощью возможностей CSS3 добавим русские буквы в наш список прямо сейчас.
Как сделать вложенный список?
Вложенные списки предназначены для организации сложной иерархической структуры текста, обычно таких документов, как юридические или технические. Также вложенные списки используются для создания многоуровневых меню и навигации по сайту. Чтобы сделать такую структуру вначале создаётся список с помощью тега <ul>, а вложенный список вставляется внутрь одного из тегов <li>.
Нумерованные списки
С помощью тегов <ol> и <li> постройте списки, показанные на рис. 1. При этом у вас должен быть валидный XHTML и CSS. Списки должны корректно отображаться в браузерах IE8, Firefox 6, Safari 5, Opera 11, Chrome 8 и в их старших версиях.
Рис. 1. Нумерованные списки
Как сделать нумерацию с определенного числа через стили?
Изменение числа, с которого начинается нумерованный список, происходит с помощью атрибута start тега <ol>. Однако при использовании строгого <!DOCTYPE> код не проходит валидацию из-за наличия этого атрибута. Применение стилей обходит эту проблему и позволяет сделать код более гибким. Для этого понадобятся стилевые свойства counter-reset, counter-increment и content. Свойство counter-reset устанавливает переменную, в которой будет храниться значение счетчика, а также желаемый номер списка. Остальные свойства изменяют значение счетчика и занимаются выводом нумерации (пример 1).
Как изменить вид написания чисел в списке и сделать, чтобы после каждого номера шла круглая скобка?
По умолчанию нумерованный список имеет определенный вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рис. 1.
Рис. 1. Вид нумерованного списка со скобкой
Как изменить отступ слева от маркеров списка?
Добавьте свойство margin-left к селектору UL или OL, соответственно, для маркированного или нумерованного списка. Браузер Firefox, Safari и Chrome одновременно с отступами добавляет к списку поля (свойство padding), поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение padding.
Хочу изменить вид маркера на другой символ. Как это сделать?
С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора UL или LI.
Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?
Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь контейнера <li> вкладываем тег <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы <li>текст</li> создаем конструкцию <li><span>текст</span></li>. При этом цвет маркеров определяется стилевым свойством color для селектора LI, а цвет текста — для селектора SPAN.
Как разместить элементы списка горизонтально?
Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для построения различных меню. В таком случае к селектору LI следует добавить стилевое свойство display со значением inline, оно преобразует блочный элемент во встроенный.
Как убрать отступ сверху и снизу от списка?
Используйте стилевое свойство margin-top (отступ сверху) и margin-bottom (отступ снизу) для селектора UL или OL, в зависимости от типа списка. Также можно воспользоваться универсальным свойством margin.
Как изменить цвет текста в списке?
Используйте стилевое свойство color для задания цвета текста и background для указания цвета фона, добавляя их к селектору UL или OL.
Свойства списков
С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.
В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.