Blog. Just Blog

Стилизация нумерованных списков с помощью CSS

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Стилизация нумерованных списков с помощью CSS
Стилизация нумерованных списков с помощью CSS

Продолжаем тему стилизации различных HTML-элементов. Сегодня это будут нумерованные списки. Если вы захотите изменить отображение цифр перед строками в нумерованном списке, то обнаружите, что сделать это при помощи CSS невозможно. Но также невозможно объяснить заказчикам, почему дизайнер нарисовал в фотошопе красивый список, а повторить его на web-странице в таком же виде не получается. Решение этой проблемы есть, и даже не одно.

В староглиняные времена во многих пластилиновых местностях для этого использовали дополнительный тег, внутри которого вручную или динамически прописывался счетчик. Что-то типа такого:
  1. <ol>
  2.     <li><span class="list_num">1</spanКому заяц свежепойманный?</li>
  3.     <li><span class="list_num">2</spanМаловатопонимаешь... Маловато будет!</li>
  4.     <li><span class="list_num">3</spanВот это мой размерчик!</li>
  5. </ol>
Штатная нумерация списка убирается через list-style: none, а стиль цифр задается в описании класса list_num. Ужасное решение. Просто представьте, что в середину списка из десятков пунктов вдруг потребуется добавить новую строку. А если вложенный список? Не говоря уже об избыточности верстки. Ручная нумерация нумерованных списков - это зло. Точка.

Есть правильный путь - использование CSS-счетчиков и псевдоэлемента :before. Делается это следующим образом.
  1. <style type="text/css">
  2. ol {
  3.     margin10px 0 10px 0;
  4.     padding0;
  5.     /* определяем счетчик */
  6.     counter-resetcss_counter;
  7. }
  8.  
  9. li {
  10.     list-stylenone;
  11.     margin2px 0 2px 0;
  12. }
  13.  
  14. li:before {
  15.     displayinline-block;
  16.     counter-incrementcss_counter;
  17.     /* одноуровневый счетчик */
  18.     contentcounter(css_counter);
  19.     margin0 5px 0 0;
  20. }
  21. </style>
В содержимое HTML не вносится никаких изменений. Нумерованный список остается списком, строчки остаются строчками. Значения счетчика проставляются автоматически без добавления мусорных элементов.
  1. <ol>
  2.     <li>Раз он в море закинул неводпришел невод с одною тиной</li>
  3.     <li>В другой раз он закинул неводпришел невод с травой морскою</li>
  4.     <li>В третий раз закинул он неводпришел невод с одною рыбкой</li>
  5. </ol>
Чуть более сложный пример с вложенными списками. Тут можно оставить одноуровневую нумерацию, а можно сделать красивую нумерацию с подпунктами. В стилях одиночный счетчик в контенте :before заменяется на функцию генерации строки с подпунктами и точкой-разделителем. Вложенность списков при этом может быть любая, для каждого уровня будет генерироваться свой номер, соответствующий его положению в списке.
  1. li ol {
  2.     margin-left30px;
  3. }
  4.  
  5. li:before {
  6.     displayinline-block;
  7.     counter-incrementcss_counter;
  8.     /* счетчики с разделителем */
  9.     contentcounters(css_counter,'.');
  10.     margin0 5px 0 0;
  11. }
Верстка при этом остается красивой и логичной.
  1. <ol>
  2.     <li>У старинушки три сына:
  3.         <ol>
  4.             <li>Старший умный был детина</li>
  5.             <li>Средний сын и так и сяк</li>
  6.             <li>Младший вовсе был дурак</li>
  7.         </ol>
  8.     </li>
  9.     <li>Братья сеяли пшеницу</li>
  10.     <li>Да возили в град-столицу
  11.         <ol>
  12.             <li>Там пшеницу продавали</li>
  13.             <li>Деньги счетом принимали</li>
  14.         </ol>
  15.     </li>
  16.     <li>И с набитою сумой</li>
  17.     <li>Возвращалися домой</li>
  18. </ol>
Примеры нумерованных списков вы можете посмотреть на демонстрационной странице. К оформлению я добавил несколько эффектов, их вы можете посмотреть в исходном коде страницы. CSS-счетчики поддерживаются всеми современными браузерами, как мобильными, так и стационарными. Важное уточнение: CSS-счетчики не работают с атрибутами нумерованных списков типа изменения начала отсчета, направления нумерации и т.п., хотя некоторых из этих параметров можно задавать в стилях. Впрочем, они настолько редко используются, что этим неудобством можно пренебречь.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 1184 | Комментариев: 0

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0037 сек.) / Память: 4.5 Mb
Наверх