Совет используйте CSS счетчики для стилизации пошаговых списков


Содержание материала:

CSS Счетчики

Использование CSS счетчики

счетчики CSS, как «переменные». Значения переменных может быть увеличено по правилам CSS (который будет отслеживать, сколько раз они используются).

Для работы с CSS счетчиков мы будем использовать следующие свойства:

  • counter-reset — Создает или сбрасывает счетчик
  • counter-increment — Приращивает значение счетчика
  • content — Вставки контент
  • counter() или counters() функция — Добавляет значение счетчика к элементу

Чтобы использовать CSS счетчик, он сначала должен быть создан с counter-reset .

Следующий пример создает счетчик для страницы (в селекторе тела), а затем увеличивает значение счетчика для каждого

элемента и добавляет «Section :» в начале каждого

элемента:

пример

h2::before <
counter-increment: section;
content: «Section » counter(section) «: «;
>

Вложенные счетчики

Следующий пример создает один счетчик (раздел) страницы и один счетчик для каждого

элемента (п). «section» счетчик будет учитываться для каждого

элемента с «Section .» , А «subsection» счетчик будет учитываться для каждого

элемент с » . » :

пример

h1 <
counter-reset: subsection;
>

h1::before <
counter-increment: section;
content: «Section » counter(section) «. «;
>

h2::before <
counter-increment: subsection;
content: counter(section) «.» counter(subsection) » «;
>

Счетчик может также быть полезным, чтобы сделать описанные списки, так как новый экземпляр счетчика автоматически создается в дочерних элементах. Здесь мы используем counters() функции , чтобы вставить строку между различными уровнями вложенности счетчиков:

пример

ol <
counter-reset: section;
list-style-type: none;
>

li::before <
counter-increment: section;
content: counters(section,».») » «;
>

CSS counters или как задать стили для чисел в списках

Уверен, вы прекрасно знаете про нумерованные и ненумерованные списки (или же, как их еще называют, маркированные списки). Но как быть в случае, когда у нас уникальный дизайн, а соответственно и стили для таких вот списков тоже выглядят весьма уникально?

Как использовать счетчики в CSS

Подумайте сами, вот у вас макет, с такими красивыми цифрами в кружке и сами цифры размером в 30 пикселей а вот текст после них уже гораздо меньше �� . Тут есть 3 пути решения (а на самом деле их гораздо больше) :

  1. вы можете нарезать это все картинками;
  2. вы можете записать все это статически через другие теги (нормальный вариант, даже для 20 элементов, если знать как быстро сформировать HTML);
  3. и наконец — использовать CSS counters.

Кстати говоря, мы рассматриваем вариант без использования JavaScript, PHP, Python и других языков программирования.
Для начала убираем наши стандартные стили у элементов списка (можно не только это делать для списков, но рассмотрим на примере их, плюс, мне кажется, так будет более верно):

и начинаем.. КВН? нет — CSS ��

Очень важно использовать именно на родительском элементе, а не на всех ol, как об этом вы могли прочитать в документации. Используем именно конкретный класс, не забывайте про нормальные нумерованные элементы на странице.
list — это некая переменная, которая будет увеличиваться с каждым элементом li

Если вам понадобится более сложные махинации с числами, например 1.1, 1.2, 1.3 — то наш HTML будет

Думаю с этим вы разберетесь. Последнее, что хотелось бы добавить — т.к. мы используем :before, то для позиционирования:

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
— Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
— Разработка функционала с нуля и доработка кода на уже созданных проектах;
— Адаптивная вёрстка макетов и натяжка на Битрикс;
— Парсинг файлов и выгрузка на сайт (форматы — CSV, XML, XLSX, JSON)
— Интеграции со сторонними сервисами по API;
— Многоязычные версии и многое другое.

CSS Design: Укрощение списков

Помню как в июле 1999 года я просвещал людей в мейл-листах о прелестях стилевой вёрстки. С тех пор мало что поменялось.

Впрочем, кое-что поменялось. Поменялся мой взгляд на CSS и на (X)HTML, который выступает в роли каркаса для стилей. Например, я обнаружил, что большинство страниц содержат панель навигации. Чаще всего она оформляются как простая текстовая строка со ссылками, разделенными тегами

. Структурно же они представляют собой списки ссылок, и следовательно должны оформляться как таковые.

Причина, по которой мы не оформляем их как списки, состоит в том, что нам не очень хочется перед каждой ссылкой в меню видеть маркер. Ранее я рассказал о некоторых приемах верстки страниц с помощью CSS. В одном из тех приемов мы научились выводить списки в строку, а не вертикально.

В данной же статье я покажу, как с помощью CSS можно укротить эти неповоротливые и неуклюжие списки. Хватит им беспризорно шататься по вашим веб-страницам. Настало ваше время командовать им, как себя вести.

Готовим арену

В качестве предмета дрессировки я выбрал простые ненумерованные списки. Все упомянутые тут правила CSS можно применить и к нумерованным спискам с тем же результатом. Во всех примерах (кроме специально оговоренных случаев) используется следующий список:

Каждый список просто помещен внутрь отдельного элемента

Без каких-либо дополнительных стилевых правил, список в базовом DIV-е будет выглядеть так:

Позиционирование

Иногда для вашего дизайна отступ в списке принятый по умолчанию может оказаться слишком большим. Но изменение только свойства margin или padding для элемента


    срабатывает не для всех броузеров. Для того, чтобы список полностью передвинулся скажем влево, вам необходимо поменять оба свойства: и margin, и padding. Связано это с тем, что Internet Explorer и Opera создают левый отступ у списка с помощью левого margin, а Mozilla/Netscape используют для этого левый padding.

В следующем примере свойствам margin-left и padding-left у элемента UL присвоено значение 0:

Обратите внимание, что маркеры лежат за границей DIV-а. Если бы контейнером был не DIV, а документа, маркеры оказались бы за пределами окна броузера, т.е. пропали бы с глаз долой. Если вы хотите, чтобы маркеры лежали внутри границ DIV-а, вдоль левого его края, присвойте либо свойству left-padding либо свойству left-margin значение «1em».

Маркеры

Скажем, вам понадобился список с особыми маркерами. Как вы поступали раньше? Создавали таблицу, в одной колонке размещали gif-картинку маркера и смещали ее в ячейке вверх и вправо. В другой колонке размещали текст, который должен был бы находится в элементах
. Теперь CSS позволяет использовать изображение в качестве маркера. Если броузер не поддерживает эту функцию CSS (или не поддерживает вывод графики), будет использован маркер по умолчанию (либо тот, который вы укажите на этот случай).

Стилевое правило выглядит так:

А броузер покажет список так:

Для тех броузеров, которые не поддерживают вывод графики, добавьте в правила следующую строчку:

Изображения, выбранное вами в качестве маркера, может «выползти» за границы списка. Чтобы этого не произошло, поместите изображение внутрь блока
. Для этого добавьте следующую строку:

Все три декларации можно объединить в одно краткое правило:

Список в результате будет выглядеть так:

Бывает так, что у вас есть список, но вам не нужны маркеры, или вы хотите использовать в качестве маркера какой-то другой символ. Опять-таки CSS спешит к вам на помощь. Добавьте правило list-style: none; и сделайте элементы
«надвисающими». Всё правило целиком будет выглядеть так:

Либо свойство левый padding, либо свойство левый margin должно иметь значение 0, а другое — значение 1em. Меняя это свойство вы можете подогнать размер отступа от вашего маркера до приемлемого. Отрицательное значение в свойстве text-indent приводит к тому, что первая строка каждого пункта списка сдвигается влево и «надвисает» над остальным текстом.

Следующий наш список будет обычным, только в качестве маркера будет использован стандартный HML-символ, например », который соответствует закрывающей типографской кавычке: «.

Здесь следует отметить, что Netscape6/7/Mozilla (и другие производные Gecko-броузеры), а также Opera умеют генерировать контент с помощью псевдо элемента :before из стандарта CSS2. Воспользуемся этой функцией и сгенерируем автоматически символ » или какой другой символ в качестве маркера. Таким образом нам не надо будет вписывать его вручную в каждый LI элемент. Если вы работает с броузером Opera или с семейством броузеров Gecko, нижеприведенный CSS создаст такой же список, что и предыдущий, при этом в сам список ничего дополнительно добавлять не нужно.

Свойству content может быть присвоена текстовая строка, URL или что-то другое, включая специальные символы. Если вы остановили свой выбор на символе типа », в свойстве надо прописать шестнадцатеричный код этого символа. У правой типографской кавычки это код 0BB (другой символ 020 — это пробел, добавлен из эстетических соображений). Конечный результат представлен ниже (смотрите броузером Opera или Mozilla/Netscape):

Выстраиваем список в ряд

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

Это касается не только списка ссылок. Вам может понадобиться привести список несколько раз внутри абзаца (например, список книг). Структурно — это список, но раньше если бы вы такое сделали, этот список разорвал бы ваш абзац. CSS опять приходит к вам на помощь!

Так как данный список не будет являться на странице чем-то отдельным, я не буду помещать его в базовый DIV, как предыдущие списки. На этот раз разметка будет выглядеть так: абзац, список, следующий абзац.

Уже слышу крики: «Болван! Мы думали ты научишь нас, как помещать списки внутри абзаца, а не между двумя абзацами.»

И на это я отвечу: «Ну да, вы правы. К сожалению (X)HTML не разрешает помещать списки внутрь абзаца. Однако с помощью стилей вы можете сделать вот что».

Сначала, вот стилевые правила:

Весь код помещен в

Результат выглядит так (список выделен синим цветом):

Как и в примере выше с маркером мы можем с помощью CSS автоматически генерировать запятые и точки. Если ваши посетители пользуются только броузерами Opera и Gecko, вам не о чем беспокоиться. Стилевые правила будут выглядеть вот так:

Здесь мы используем псевдо-элемент :after для добавления запятой в конце каждого пункта списка, а точку ставим с помощью класса >

Навигация

Как я уже сказал в самом начале меню ссылок, которые мы видим на каждом сайте, должны быть оформлены как списки, чем они по сути и являются. Так как мы не хотим видеть этот список так, как его выводит броузер по умолчанию, воспользуемся CSS для внесения косметических изменений. Мы уже знаем, что списки можно специально выводить горизонтально (в одну строчку), а не только вертикально (как они выводятся по умолчанию). С помощью стилей маркеры можно убрать, а в ваших руках появляется широкий набор возможностей, как визуально отделить один пункт списка от другого.

Вот примеры горизонтальных списков, помещенных в один и тот же базовый DIV со следующими правилами.

Два примера ниже используют все тот же UL только без длинного текста в последнем пункте. Добавлен также дополнительный класс, который позволяет отдельно работать с одним из LI в списке.

Границы

Символ | часто используется для обозначения различных вариантов выбора. Вполне естественно использовать его в меню. Сымитируем этот символ с помощью границ у LI.

Мы добавили класс >

Правила можно изменить, чтобы придать списку вид закладок:

В данном примере мы добавили класс >

Примечание: этот прием был предложен Ренделом Растом (Randal Rust), а затем его улучшили подписчики списка рассылки css-discuss

Ссылки-цепочки

Еще один тип ссылок, которые обычно располагаются горизонтально на веб-странице — это известные всем нам ссылки-цепочки (breadcrumb links). Эти ссылки показывают наглядно, где в иерархии сайта вы сейчас находитесь — весь ваш путь от главной страницы до текущего раздела или страницы. Если вы действительно хотите сделать код вашей страницы семантически правильным, этот тип ссылок следует оформить как серию вложенных списков, так как каждый раздел является частью предыдущего раздела:

в результате получаем:

Применив следующие правила:

получаем вот что:

И опять-таки символ «»» (или любой другой подходящий символ) можно генерировать автоматически с помощью псевдо-элемента :before в сочетании с классом >

Мир реалий

Закончу свою статью реальным примером, в котором использован вышеописанный трюк. Мы возьмем стандартный список UL со ссылками и создадим динамическое меню с эффектами перекатывания. Для создания эффекта перекатывания визуальные стили будут применяться к элементам A, а элементы UL и LI будут служить лишь как структурный каркас.

Это меню — фактически ответ на вопрос, заданный Майклом Эффордом (Michael Efford) в списке рассылки css-discuss. Майкл создал в точности такое же меню с помощью таблиц, графики и JavaScript. Затем он спросил в списке рассылки, можно ли то же самое получить с помощью CSS.

Дайте разберем стилевую таблицу правило за правилом, и я объясню для чего нужно каждое из них.

Первое правило — для DIV-а #button. Оно задает, сколько места будет занимать меню, и создает контекст, чтобы мы могли управлять поведением ссылок и пунктов списка. Я предпочел сделать меню гибким и зависимым от установок броузера, поэтому (почти) все значения заданы в «em»-ах. Включая ширину меню. Черная граница была взята из исходного дизайна Майкла. Большой нижний отступ (padding) у меню сделан для того, чтобы вы могли видеть фон у DIV. Опять таки, это было сделано, чтобы повторить исходный дизайн. Нижнее поле (margin) используется для того, чтобы отделить меню от того, что за ним идет. Все цвета взяты из исходного дизайна.

Тут я определил, как должен выглядеть список. Так как все пункты списка у нас являются ссылками, а эффект перекатывания пока имеется только у ссылок, я намеренно удалил все стилистические правила из списков. Я добавил лишь границу шириной в один пиксель, у которой цвет совпадает с цветом фона DIV-а #button. Эта граница служит разделителем между пунктами меню. В исходном дизайне для этого использовалась отдельная картинка.

Наконец, я дошел до ссылок. В исходном дизайне слева и справа были границы по 10 пикселей каждый. Эти границы меняли свой цвет вместе с фоном при наведении мышки. Это поведение довольно просто получить с помощью псевдо-класса :hover, поэтому эффект изменения цвета границ и фона применен к элементам .

Здесь воспользовался одним трюком: чтобы поведение ссылок распространялось на весь блок (по ширине и высоте), я присвоил им правило display: block;. Это сработало во всех броузерах, кроме IE для Windows. Если вы явно укажите ширину в 100%, IE для Windows все поймет. Но при этом вы получаете проблемы в броузерах IE5 для Mac и Netscape/Mozilla. Поэтому я схитрил: с помощью дочернего селектора « > » я присвоил ширине значение «auto». Так как броузер IE для Windows не понимает дочерних селекторов, он игнорирует это правило. IE5 для Mac, Opera и Netscape/Mozilla понимают это правило, и все остались довольными.

Правило для псевдо-класса :hover меняет цвет фона и границ при наведении мышки на ссылку.

Все стилевые правила и список (1 кб кода) заменили примерно 5кб JavaScript-ов и вложенных таблиц, не говоря уже о примерно 8кб графических файлов, использовавшихся для создания эффекта перекатывания. Кроме того разметка стала более читаемой, ее легче обновлять, так как вам не нужно создавать новые картинки, если поменяется название какого-либо меню. Достаточно лишь поменять текст. Окончательный вариант меню вы можете посмотреть на сайте Asset Surveillance.

Вершина айсберга

Хотите верьте, хотите — нет, но мы лишь слегка затронули тему списков и того, что с ними можно вытворять с помощью CSS. Я не утверждаю, что все приемы, изложенные тут, являются верхом совершенства, но я очень надеюсь что данная статья изменит ваше отношение к CSS и привлечет ваше внимание к идее структурной верстки.

Стилизация нумерованного списка ol, при помощи счётчика CSS

Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках

    , то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.

Традиционный подход к решению проблемы заключается в том, что бы блокировать отрисовку нумерации списка браузером, установленную по умолчанию, и избавившись от стандартной нумерации элементов (li) вставить вместо них жёстко заданные числа. Это дает возможность оформить их так, как мы хотим.

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

Приведём код и пример, а потом разберемся, что к чему.

  1. Влюбиться
  2. Завести собаку
  3. Посадить дерево
  4. Построить дом
  5. Воспитать сына
  6. Воспитать дочь

Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

  • li:before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
  • counter-reset: myCounter; – обнуляет css-счетчик myCounter внутри каждого
      .
    1. counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента :before.
    2. content: counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента :before.

Стилизация элемента select на чистом CSS

Перед тем как мы будем стилизовать селекты, давайте вспомним, что из себя представляет код этого элемента в html.

Так выглядит код обычного выпадающего селекта.

И так он выглядит на практике в браузере.

Но данный элемент может принимать и совершенно другой вид, если в числе его параметров присутствует атрибут size, он указывает нам на число элементов в списке.

Теперь этот select выглядит как список. В данном варианте выбирать можно сразу несколько пунктов списка.

Т.е. перед нами стоит задача кастомизировать две эти разновидности селекта.

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

Итак, с этим мы разобрались. Осталось упомянуть, что всё рассматриваемое в данной статье исключительно для десктопа (компьютера). На смартфонах select выглядит совершенно иначе, необходимости изменять его внешний вид особой нет.Вот, например, как выглядит этот элемент в операционной системе Android (представлены соответственно селекты списка множественного выбора и простой селект).

Стилизация select списка множественного выбора

Итак, первым в нашем списке будет стилизация select с параметром multiple. Это не выпадающий список, а, как его называют, список множественного выбора.

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

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

Как я уже упомянула, изменить цвет подсветки пунктов селекта с помощью стилей нельзя напрямую, но есть одна хитрость, благодаря которой изменить цвет все же можно. Для этого достаточно вспомнить свойство filter (которое содержит в себе целую группу так называемых css-фильтров), позволяющее применять различные эффекты к элементам, это размытие, обесцвечивание, сияние, гравюра, инвертирование цветов и т.п. Подробнее про них я писала в статье про обесцвечивание картинки. Из всего этого набора нас будет интересовать hue-rotate. Данное свойство задает оттенок в зависимости от величины угла цветового круга.

Задавая для пункта селекта этот фильтр можно добиться необходимого цвета подсветки. Формально цвет его остался прежним, задаваемым стандартно, а hue-rotate уже в свою очередь изменит отображение цвета на то, которое нам нужно.

Приведу пример рабочего кода для стилизации селекта.

Создание списков

Списки являются частью повседневной жизни. Список дел определяет что сделано. Навигационные маршруты предлагают пошаговый список направлений. Для рецептов требуется список ингредиентов и список инструкций. Списки встречаются практически везде, так что легко понять, почему они также популярны в Интернете.

Когда мы хотим использовать список на сайте, HTML предлагает три разных типа на выбор: маркированный, нумерованный и список описаний. Какой тип списка выбрать для использования и применять ли список вообще — зависит от содержимого и семантически наиболее подходящего варианта для его отображения.

В дополнение к трём разным типам списков доступных в HTML есть несколько путей для стилизации этих списков через CSS. Например, мы можем выбрать, какой тип маркера указать для списка. Маркер может быть квадратным, круглым, числом, буквой или, возможно, отсутствовать. Кроме того, мы можем решить, как должен отображаться список — по вертикали или горизонтали. Все эти варианты играют важную роль при стилизации наших веб-страниц.

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

Маркированный или неупорядоченный список — это просто список связанных элементов, для которых порядок не имеет значения. Создание маркированного списка в HTML осуществляется с помощью блочного элемента списка

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

По умолчанию, большинство браузеров добавляет вертикальный margin и левый padding к элементу

    , а перед каждым элементом
    ставит однотонную точку. Эта точка называется маркером списка и может быть изменена с помощью CSS.

Демонстрация маркированного списка

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

Нумерованный или упорядоченный список элементов

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

Поскольку порядок имеет значение, вместо точки в качестве маркера по умолчанию в нумерованном списке применяются номера.

Демонстрация нумерованного списка

У нумерованных списков также есть доступные для них уникальные атрибуты, включая start и reversed.

Атрибут start

Атрибут start определяет номер, с которого должен начинаться нумерованный список. По умолчанию списки начинаются с 1, однако могут возникнуть ситуации, когда список должен начинаться с 30 или с другого числа. Когда мы используем атрибут start для элемента

    , то можем точно определить, с какого номера должен начинаться отсчёт нумерованного списка.

Атрибут start принимает только целые значения, хотя в нумерованных списках могут применяться разные системы нумерации, например, римские числа.

Демонстрация атрибута start

Атрибут reversed

Атрибут reversed при добавлении к элементу

    позволяет списку отображаться в обратном порядке. Список из пяти пунктов пронумерованных от 1 до 5 может быть задан обратно и нумероваться от 5 до 1.

Атрибут reversed является логическим атрибутом и как таковой он не принимает никакого значения. Он может быть истиной, либо ложью. Ложь является значением по умолчанию, значение становится истинным, когда атрибут reversed появляется у элемента

    .

Демонстрация атрибута reversed

Атрибут value

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

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

Демонстрация атрибута value

Списки описания

Другой тип списка который вы видели в Интернете (но не так часто, как маркированные или нумерованные списки) — это список описаний. Такие списки применяются для обозначения нескольких терминов и их описаний, как в глоссарии, к примеру.

Создание списка описания в HTML происходит с помощью блочного элемента . Вместо использования элемента
для разметки пунктов списка, список описания требует два блочных элемента: для термина и для описания.

Список описания может содержать множество терминов и описаний, один за другим. Кроме того, такой список может содержать несколько терминов на одно описание, а также несколько описаний на термин. Один термин может иметь несколько значений и допускать несколько описаний. И наоборот, одно описание может подходить к нескольким терминам.

При добавлении списка описания элемент должен идти до элемента . Термин и описание, которое следует непосредственно за ним, связаны друг с другом. Таким образом, порядок этих элементов имеет важное значение.

По умолчанию, элемент включает вертикальные отступы, подобно элементам

    и

      . Кроме того, элемент включает в себя по умолчанию левый margin .

Демонстрация списка описания

Вложенные списки

Особенность, которая делает списки очень мощными — это возможность вложения. Каждый список может быть помещён в другой список и они могут быть вложены неоднократно. Но возможность вкладывать списки бесконечно не даёт свободу делать это. Списки должны быть зарезервированы специально там, где они сохраняют наиболее семантическое значение.

Трюк с вложением списков заключается в том, что следует знать, где начинается и заканчивается каждый список и пункт списка. Говоря конкретно о маркированных и нумерованных списках, единственным элементом, который может находиться непосредственно внутри

    и

      является элемент
      . Повторим — единственным элементом, который мы можем поставить как прямой потомок элементов

        и

          , является
          .

      Тем не менее, внутри элемента
      может быть добавлен стандартный набор элементов, включая любые элементы

        или

          .

      Чтобы вложить список — перед закрытием пункта списка начните новый список. После того, как вложенный список завершён и закрыт, закройте обрамляющий пункт списка и продолжите с первоначального списка.

      Демонстрация вложенных списков

      Поскольку вложенные списки могут немного запутать и отобразить нежелательные стили, если они сделаны неправильно — давайте быстро их просмотрим. Элементы

        и

          могут содержать только элементы
        1. . Элемент
        2. может содержать любой обычный элемент, какой пожелаете. Однако элемент
        3. должен быть прямым потомком либо элемента
            , либо

              .

          Стоит также отметить, что когда списки вложены внутрь других списков, их маркеры будут меняться в зависимости от глубины вложения. В предыдущем примере маркированный список, вложенный в нумерованный, использует в качестве маркеров кружок вместо точки. Это изменение происходит потому, что маркированный список вложен на один уровень в нумерованном списке.

          К счастью, мы можем управлять, как маркеры пунктов списка выглядят на любом уровне, что мы и рассмотрим дальше.

          Стилизация пунктов списка

          Маркированные и нумерованные списки используют маркеры пунктов списка по умолчанию. Для маркированных списков это, как правило, однотонные точки, в то время как для нумерованных списков, как правило, применяются числа. С помощью CSS стиль и положение этих маркеров можно настраивать.

          Свойство list-style-type

          Свойство list-style-type используется для установки содержимого маркера пунктов списка. Доступные значения находятся в диапазоне от квадратиков и десятичных чисел до армянской нумерации и стиль в CSS может быть добавлен к элементам

            ,

              или
              .

          Любое значение свойства list-style-type может быть добавлено к маркированному или нумерованному списку. Имея это в виду, можно использовать нумерацию в маркированном списке и не числовые маркеры в нумерованном списке.

          Демонстрация свойства list-style-type

          Значения list-style-type

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

          Значение list-style-type Содержимое
          none Нет пунктов списка
          disc Однотонный кружок
          circle Пустая окружность
          square Однотонный квадрат
          decimal Десятичные числа
          decimal-leading-zero Десятичные числа начинающиеся с нуля
          lower-roman Строчные римские числа
          upper-roman Заглавные римские числа
          lower-greek Строчные греческие числа
          lower-alpha / lower-latin Строчные латинские буквы
          upper-alpha / upper-latin Заглавные латинские буквы
          armenian Традиционная армянская нумерация
          georgian Традиционная грузинская нумерация

          Использование изображения в качестве маркера списка

          Может наступить время, когда значений по умолчанию для свойства list-style-type не хватит и мы пожелаем задать свой собственный маркер списка. Чаще всего это делается путём размещения фонового изображения для каждого элемента
          .

          Процесс включает в себя удаление любого значения свойства list-style-type по умолчанию и добавление фонового изображения и полей для элемента
          .

          Подробнее — значение none свойства list-style-type удалит существующие маркеры списка. Свойство background задаст фоновое изображение вместе с его положением и повтором, если необходимо. А свойство padding обеспечит пространство слева от текста для фоновой картинки.

          Демонстрация изображения в качестве маркера

          Свойство list-style-position

          По умолчанию маркеры списка располагаются слева от содержимого в элементе
          . Такой стиль позиционирования описывается как outside , это означает, что всё содержимое будет отображаться непосредственно справа, за пределами маркера списка. С помощью свойства list-style-position мы можем изменить значение по умолчанию outside на inside или inherit .

          Значение outside размещает маркер списка слева от элемента

        4. и не позволяют любому содержимому обтекать ниже этот маркер. Значение inside (которое редко используется и можно увидеть) размещает маркер списка в первой строке элемента
        5. и позволяет содержимому обтекать маркер при необходимости.

          Демонстрация свойства list-style-position

          Универсальное свойство list-style

          Свойства списка, которые мы недавно обсудили, list-style-type и list-style-position , могут быть объединены в одно универсальное свойство list-style . В этом свойстве мы можем использовать одно или все значения свойств списка одновременно. Порядок этих значений должен быть: list-style-type , затем идёт list-style-position .

          Горизонтальное отображение списка

          Иногда мы хотим отобразить списки горизонтально, а не вертикально. Возможно, мы желаем разделить список на несколько колонок, чтобы построить список навигации или разместить несколько пунктов списка в один ряд. В зависимости от содержания и желаемого внешнего вида есть несколько способов для отображения списков в виде одной строки, например, путём принятия значения свойства display для элементов
          как inline или inline-block или через свойство float .

          Отображение списка

          Самый быстрый способ отобразить список на одной строке — это задать элементам

        6. свойство display со значением inline или inline-block . Это поставит все элементы
        7. в одну строку с одинаковым промежутком между каждым пунктом списка.

          Если промежутки между элементами
          доставляют проблемы, то они могут быть удалены с помощью тех же методов, что мы обсуждали в уроке 5, «Позиционирование содержимого».

          Намного чаще мы будем использовать значение inline-block вместо значения inline . Значение inline-block позволяет легко добавлять вертикальные отступы и другое пространство к элементам
          , в то время как значение inline нет.

          При изменении значения свойства display на inline или inline-block , маркер списка, будь то точка, число или другое, удаляется.

          Демонстрация списка с inline-block

          Списки с float

          Изменение значение свойства display на inline или inline-block быстро, однако это удаляет маркеры списка. Если они необходимы, то добавление float к каждому элементу
          является лучшим вариантом, чем изменение свойства display .

          Установка для всех элементов

        8. свойства float как left выровняет горизонтально все элементы
        9. непосредственно рядом друг с другом без каких-либо промежутков между ними. Когда мы используем float для
        10. , маркер списка отображается по умолчанию и будет располагаться поверх элемента
        11. рядом с ним. Чтобы предотвратить отображение маркера списка поверх других элементов
        12. , должны быть добавлены горизонтальный margin или padding .

          Демонстрация списка с float

          Как и с любыми обтекаемыми элементами это нарушает поток страницы. Мы не должны забывать очищать float и возвращать страницу в обычный поток — наиболее распространённым методом через clearfix.

          Пример навигационного списка

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

          Демонстрация навигационного списка

          На практике

          Теперь, когда мы знаем, как создавать списки в HTML и CSS, давайте оглянемся на наш сайт Styles Conference и посмотрим, где мы могли бы использовать списки.

          Сейчас навигационные меню в элементах и на наших страницах состоят из нескольких ссылок. Эти элементы могут быть лучше организованы в виде неупорядоченного списка.

          Использование неупорядоченного списка (через элемент

            ) и пунктов списка (через элемент
            ) задаст структуру наших навигационных меню. Эти новые элементы, однако, будут отображать наши навигационные меню вертикально.

          Мы собираемся изменить значение display для наших элементов

        13. на inline-block , чтобы все они выравнивались в строке по горизонтали. Когда мы это сделаем, то также должны учесть пустое пространство слева между каждым элементом
        14. . Вспоминая урок 5, «Позиционирование содержимого», мы знаем что открытие комментария HTML в конце элемента
        15. и закрытие комментария в начале элемента
        16. удалит это пространство.

          Помня об этом, разметка для навигационного меню внутри нашего элемента будет выглядеть так:

          В том же духе, разметка для навигационного меню внутри нашего элемента будет выглядеть так:

          Не забывайте внести эти изменения во все наши HTML-файлы.

          С нашим маркированным списком давайте удостоверимся, что пункты списка выровнены по горизонтали и слегка очистим их стили. Мы будем использовать существующий класс nav для указания наших новых стилей.

          Начнём с того, чтобы все элементы
          внутри какого-либо элемента со значением nav атрибута class отображались как inline-block , чтобы включить горизонтальные margin и чтобы можно было выравнивать элементы по вертикали.

          Кроме того, мы воспользуемся псевдоклассом :last-child чтобы определить последний элемент

        17. и сбросить его правый margin в 0. Это гарантирует, что любое горизонтальное пространство между элементами
        18. и краем его родителя исчезнет.

          В наш файл main.css, ниже стилей навигации добавим следующий CSS:

          Вы наверное удивлены, почему наш список не включает каких-либо маркеров списка или стилей по умолчанию. Эти стили были удалены сбросом вверху нашего стиля. Если мы посмотрим на сброс, то увидим что элементы

            ,

              и
              включают в себя нулевые margin и padding , а для

                и

                  значение list-style задано как none .

              Меню навигации не единственное место, где мы будем использовать списки. Также применим их на некоторых наших внутренних страницах, включая страницу Спикеры. Давайте добавим несколько спикеров в нашу конференцию.

              В файле speakers.html, чуть ниже раздела со вступлением, создадим новый раздел, где мы представим всех наших спикеров. Повторно задействуя некоторые существующие стили мы воспользуемся элементом с классом row , чтобы обернуть всех наших спикеров и применить белый фон и поля за ними. Внутри элемента мы добавим элемент

              Пока наш HTML ниже раздела со вступлением выглядит следующим образом:

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

              Используя наши существующие классы col-2-3 и col-1-3 , схема для раздела со спикерами будет выглядеть так:

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

              Кроме того, закрывающий тег элемента

              Внутри колонки 2/3 размеченный элементом

              Учитывая это содержимое, раздел спикера будет выглядеть следующим образом:

              В колонку 1/3 размеченной элементом мы собираемся добавить элемент

              Прежде чем перейти к каким-либо стилям, давайте добавим неупорядоченный список в элемент

              Теперь наш HTML для спикера будет выглядеть следующим образом:

              Начнём с добавления нового раздела в наш файл main.css для стилей страницы Спикеры. В нём добавим однопиксельную сплошную рамку с радиусом 5 пикселей вокруг любого элемента с классом speaker-info .

              Далее добавим верхний margin 88 пикселей, чтобы поместить элемент на той же вертикальной строке, что и первый абзац докладчика, а также добавим 22 пикселя по вертикали для padding , чтобы обеспечить место для вложенного маркированного списка.

              Наконец, выровняем по центру весь текст внутри элемента.

              В целом, наш CSS для класса speaker-info выглядит следующим образом:

              Остановимся на минутку и разберём, почему мы используем здесь элемент

              Мы размещаем элемент

              По мере добавления больше и больше спикеров на страницу мы хотим убедиться, что они остаются на равном расстоянии друг от друга по вертикали. Чтобы сделать это, мы создадим набор правил для класса speaker , который включает в себя нижний margin 44 пикселя, таким образом:

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

              Обратите внимание на первый элемент со спикером Крис Миллс. Раздел включает в себя атрибут class со значением speaker , который вертикально отделяет его от моего раздела, Шэя Хоу. Последний элемент снова мой и он не включает в себя класс speaker чтобы сохранить его на нужном расстоянии от элемента .

              Наше меню навигации в настоящее время завершено и страница Спикеры начала принимать свою форму.

              Рис. 8.01. Наша страница Спикеры после обновления навигационных меню и добавления колонки

              Демонстрация и исходный код

              Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

              Резюме

              Списки довольно часто применяются в HTML, нередко в местах, которые не явны или очевидны. Главное, насколько это возможно, использовать их семантически и там, где они подходят лучше всего.

              Подводя итоги, в этом уроке мы рассмотрели следующее:

              • как создать маркированный, нумерованный список и список описаний;
              • как правильно вкладывать одни списки внутрь других;
              • как изменить стиль маркера списка и его положение;
              • как использовать фоновое изображение вместо маркера списка;
              • как горизонтально отобразить список через display и float .

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

              CSS counters

              Одной из редко используемых возможностей CSS2.1 являются счетчики. Описаны они в разделе спецификации, посвященной генерации контента. Что же это такое?

              Приведу пример из спецификации, эмулирующий обычный нумерованый список с помощью счетчика и свойства content:

              Первым правилом мы назначаем элементам OL счетчик с именем «item», затем для всех LI меняем значение свойства display на block, вместо значения по умолчанию (list-item), чем отключаем стандартные маркеры-цифры. Наконец, в последнем правиле, мы инкрементируем счетчик для каждого элемента списка, а само его значение показываем перед элементом c помощью функции counter() и свойства content. Всё просто.

              С помощью механизма счетчиков можно делать нумерованые списки, с нумерацией 1, 1.1, 1.2. Причем сами маркеры можно оформлять достаточно гибко например в результате вот такого кода:

              ol >
              li > item 1, level 1 li >
              li > item 2, level 1 li >
              li > item 3, level 1 li >
              li > item 4, level 1
              ol >
              li > item 1, level 2 li >
              li > item 2, level 2 li >
              li > item 3, level 2 li >
              ol >
              li >
              li > item 5, level 1 li >
              ol >

              * This source code was highlighted with Source Code Highlighter .

              мы получим вот такой список:

              Функция counters() принимает два параметра, имя счетчика, значение которого нужно вывести и строку-разделитель между значениями вложенных счетчиков, в данном случае это точка. Также вторым параметром можно указывать любое из возможных значений атррибута list-style-type, т.е. none, disc, circle и square. В последних трех случаях список станет выглядеть так же как обычный ненумерованный список с маркерами соответствующего типа.

              Но и это еще не всё

              style >
              div /* объявляем счетчик num-p */
              div p /* для каждого p внутри div инкрементируем его */
              div:after < /* выводим результат */
              display:block;font-weight:bold;
              content: «Всего абзацев: » counter(num-p) «.»;
              >
              style >
              div >
              p > Абзац 1 p >
              p > Абзац 2 p >
              p > Абзац 3 p >
              p > Абзац 4 p >
              div >

              * This source code was highlighted with Source Code Highlighter .

              станет вот такая страница:

              Здесь мы воспользовались псевдоэлементом :after элемента div, для вывода конечного значения привязанного к нему счетчика.

              Ну и наконец приведу код, результат которого вы видели на изображении в самом начале топика, если вы подключите этот стиль в качестве пользовательского стиля вашего браузера, то возле каждого топика у вас появится «немного статистики» о нем:

              /* Инициализируем счетчики */
              div.hentry <
              counter-reset:
              num-post-sections 1
              /* Количество заголовков/секций в топике. Обратите внимание, что счетчику можно передать начальное значение. */
              /* В данном случае это единица, потому что один заголовок уже есть вне блока .content */
              num-code-listings /* Листинги кода code и pre */
              num-bq /* цитаты */
              num-br /* break-lines */
              num-links /* ссылки */
              num-links-internal /* внутренние ссылки */
              num-links-rel-tag /* ссылки тэгов rel=’tag’ */
              num-img /* изображения */
              ;
              >
              /* Инкрементируем счетчики. */
              div.hentry .content h4,
              div.hentry .content h5,
              div.hentry .content h6 < counter-increment: num-post-sections; >
              div.hentry .content code,
              div.hentry .content pre < counter-increment: num-code-listings; >
              div.hentry .content img < counter-increment: num-img; >
              div.hentry .content blockquote < counter-increment: num-bq; >
              div.hentry .content br

              div.hentry .content a[href] < /* все ссыкли */
              counter-increment: num-links;
              >
              div.hentry .content a[href^=»http://habrahabr.ru/»],
              div.hentry .content a[href^=»/»] < /* внутренние ссыкли */
              counter-increment:
              num-links
              num-links-internal;
              >
              div.hentry a[rel=»tag»] < /* теги */
              counter-increment:
              num-links
              num-links-rel-tag;
              >
              /* Показываем результат счетчиков */
              div.hentry:after <
              clear:both;
              display: block;
              background:#9cc;
              border:1px solid #79B1D4;
              padding:10px;
              margin:0 35px;
              white-space:pre;
              content:
              «This topic contains: \a»
              «Sections — » counter(num-post-sections) «,\a»
              «Code listings — » counter(num-code-listings) «,\a»
              «Links — » counter(num-links) «, » counter(num-links-internal) » internal and »
              counter(num-links-rel-tag)» tags, \a»
              «Images — » counter(num-img) «,\a»
              «Quotes — » counter(num-bq) «,\a»
              «Break lines — » counter(num-br) «\a»
              ;
              >

              * This source code was highlighted with Source Code Highlighter .

              Ограничения

              1. К сожалению, всеми нами горячо и страстно любимый браузер Intenet Explorer — не поддерживает CSS-счетчики вплоть до версии 7, как и свойство content. Но в 8-й, говорят поддержка будет.
              2. Вывод суммарных счетчиков возможен только в псевдоэлементе :after, что ограничивает возможности дизайна.
              3. Контент, сгенеренный с помощью css не может быть выбран/выделен пользователем.

              Исходя из ограничений, описываемые возможности пока врядли найдут широкое применение, но думаю светлое будущее не за горами. Весь код был написан только для того, чтобы показать вам эти возможности 🙂

              Upd. В написании топика и кода сильно помогла статья Meitar Moscovitz, там есть еще неплохие примеры.

              Использование CSS для стилизации нумерованного списка

              Мне нужен HTML для вывода, аналогичного:

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

              Если строки переносятся на следующую строку, они должны продолжаться под текстом, как упорядоченный список.

              ОБНОВЛЕНИЕ Я пытался

              и HTML, такой как:

              К сожалению, мои требования в точности соответствуют заявленному в исходном вопросе. Так что мой CSS не работает в этих областях.

              1. Должна быть полная остановка после 1 и после 2, но не после 1.1 и 1.2
              2. 1 и 1.1 не должны быть с отступом, и текст для них обоих должен быть выровнен в одном месте. Таким образом, слово онедотон должно быть точно ниже слова один. Также должен быть больший разрыв, чем один пробел между числом и текстом.
              3. (А) должен соответствовать словам onedottwo, и опять же должен быть больший разрыв, чем один пробел между (а) и А.

              padding-left это не ответ, так как это не поможет выстроить текст после цифр, вы получите

              Это выходит за рамки моих возможностей CSS. Если у кого-то нет опыта, чтобы указать мне правильное направление, я боюсь, что мне придется прибегнуть к помощи стола.

              1 ответ

              Ниже приведен пример того, как с помощью

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

              Согласованный интервал между нумерацией и текстом получается установкой width к li:before псевдоэлемент и делает его отображение как display: inline-block , Изменить width в зависимости от того, сколько места требуется. Обратите внимание, что при изменении width , margin-left а также padding-left также должны быть изменены соответствующим образом, чтобы сохранить стиль.

              Отзывы к комментариям:

              трюк не совсем работает с inline-block элементы. Внутренний уровень li теги inline-block в нашем случае (по причинам, объясненным выше во втором абзаце) и, следовательно, этот конкретный трюк не работает. Альтернативой является вставка пустой строки height линии, равной необходимому line-height и поместите его ниже li тег. Обратите внимание, что используемый селектор li:not(:last-child):after потому что нам не нужен дополнительный разрыв строки после последнего li (если мы этого не сделаем, у нас будет двойной пробел после внутреннего li заканчивается). Это селектор CSS3, поэтому он может не работать с более низкими версиями IE. Если вам нужно также поддерживать эти версии, нам нужно будет настроить их дальше (или проще было бы использовать br ).

              Вы были на правильном пути здесь, но :before псевдоэлемент (который имеет нумерацию) не находится на элементе с , Это было на .level1 > li и, следовательно, делает сброс font-weight для селектора .level1 > li:before, .level1 > li * бы исправить это. Как вы уже знали / догадались, .level1 > li * означает каждый элемент ниже первого уровня li ,

              Совет: используйте CSS счетчики для стилизации пошаговых списков

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

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

              1. ol >
              2. li > span > «list_num» > 1 span > Кому заяц свежепойманный ? li >
              3. li > span > «list_num» > 2 span > Маловато , понимаешь . Маловато будет ! li >
              4. li > span > «list_num» > 3 span > Вот это мой размерчик ! li >
              5. ol >

              Штатная нумерация списка убирается через list-style: none, а стиль цифр задается в описании класса list_num. Ужасное решение. Просто представьте, что в середину списка из десятков пунктов вдруг потребуется добавить новую строку. А если вложенный список? Не говоря уже об избыточности верстки. Ручная нумерация нумерованных списков — это зло. Точка.

              Есть правильный путь — использование CSS-счетчиков и псевдоэлемента :before. Делается это следующим образом.

              1. style type = «text/css» >
              2. ol <
              3. margin : 10px 0 10px 0 ;
              4. padding : 0 ;
              5. /* определяем счетчик */
              6. counter — reset : css_counter ;
              7. >
              8. li <
              9. list- style : none ;
              10. margin : 2px 0 2px 0 ;
              11. >
              12. li : before <
              13. display : inline — block ;
              14. counter — increment : css_counter ;
              15. /* одноуровневый счетчик */
              16. content : counter ( css_counter );
              17. margin : 0 5px 0 0 ;
              18. >
              19. style >
              1. ol >
              2. li > Раз он в море закинул невод , пришел невод с одною тиной li >
              3. li > В другой раз он закинул невод , пришел невод с травой морскою li >
              4. li > В третий раз закинул он невод , пришел невод с одною рыбкой li >
              5. ol >
              1. li ol <
              2. margin — left : 30px ;
              3. >
              4. li : before <
              5. display : inline — block ;
              6. counter — increment : css_counter ;
              7. /* счетчики с разделителем */
              8. content : counters ( css_counter , ‘.’ );
              9. margin : 0 5px 0 0 ;
              10. >
              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-счетчики не работают с атрибутами нумерованных списков типа изменения начала отсчета, направления нумерации и т.п., хотя некоторых из этих параметров можно задавать в стилях. Впрочем, они настолько редко используются, что этим неудобством можно пренебречь.

              Совет: используйте CSS счетчики для стилизации пошаговых списков

              Группа: Главные администраторы
              Сообщений: 14349
              Регистрация: 12.10.2007
              Из: Twilight Zone
              Пользователь №: 1

              Меня всегда раздражало то, как сложно стилизировать нумерованные списки. Достаточно часто дизайн требует чего то большего, чем просто число — другой шрифт, размер, цвет, фон, да мало ли?

              Вас тоже? Добро пожаловать под кат.

              Традиционный подход к решению проблемы заключается в том, что бы блокировать отрисовку нумерации списка браузером, установленную по умолчанию, и избавившись от стандартной нумерации элементов (li) вставить вместо них жестко заданные числа. Это дает возможность стилизировать их так, как мы хотим.

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

              Так что когда я недавно снова столкнулся со стилизацией нумерованных списков, то решил попробовать другой подход, без подделки нумерации. Благодаря тому, что Internet Explorer наконец догоняет остальные браузеры в области поддержки CSS и увеличивает пространство для использования концепции постепенного улучшения (progressive enhancement), на этот раз я смог найти приемлемое решение проблемы Если вы (ну … ваш клиент) может смириться с тем, что нумерованные списки будут лишены стилизации в IE7 и ниже, то эта техника может быть полезна.

              Фишка в использовании Генерированного СSS контента (CSS generated content) для создания и внедрения в список нумерации после удаление стандартной. Для начала я стилизировал упорядоченный нумерованный список в качестве простого примера использования техники. Обратите внимание: сейчас у примера в CSS нет отката для старых браузеров и вложенные списки не принимаются в расчет. Как только будет время — поправлю.

              CSS примера следующий:

              ol <
              counter-reset:li; /* Инициализируем счетчик */
              padding:0; /* Удаляем установленное по умолчанию левое поле*/
              list-style:none; /* Отменяем нумерацию установленную по умолчанию */
              >
              ol li <
              position:relative; /* Создаем контекст для позиционирования элементов */
              margin:0 0 6px 2em; /* Даем каждому элементу списка отступ слева, что бы освободить пространство для нумерации */
              padding:4px 8px;
              border-top:2px solid #666;
              background:#f6f6f6;
              >
              ol li:before <
              content:counter(li); /* В качестве данных используем счетчик */
              counter-increment:li; /* Увеличиваем значение счетчика на 1 */
              /* Позиционируем и стилизируем цифры */
              position:absolute;
              top:-2px;
              left:-2em;
              width:2em;
              padding:4px 0;
              border-top:2px solid #666;
              color:#fff;
              background:#666;
              font-weight:bold;
              font-family:»Helvetica Neue», Arial, sans-serif;
              text-align:center;
              >

              Ключевые моменты в следующем:

              list-style:none: отменяет нумерацию списка установленную по умолчанию

              counter-reset и counter-increment: создают пространство нумерации и увеличивают значение счетчика. И то и другое описано в CSS 2.1 12.4 Automatic counters and numbering.

              content: Вставляет индекс созданного счетчика. Описан тут: CSS 2.1 12.2 Свойство ‘content’

              Перейдет по ссылкам для получения детального описания этих свойств

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

              Топ-пост этого месяца:  Выбор выделенного сервера
Добавить комментарий