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

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

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

Начнем рассматривать список со структуры HTML. Код достаточно прост:

Данная техника использует автоматическое нумерование. По существу, оно базируется на двух свойствах CSS 2.1: counter-reset (инициализация счетчика) и counter-increment(инкремент счетчика). Свойство counter-increment будет использоваться с содержанием, генерируемым  CSS (псевдо-элемент).

Нумерация в круглых формах

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

Нумерация в квадратных формах

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

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