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

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

Поскольку семантический HTML важен, я использую корректный тег ol:

Проблема в том, что «маркеры» (номера пунктов) находятся в мертвой зоне CSS-селектора. У нас нет способа стилизовать их независимо*!

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

Счетчики в помощь

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

Давайте рассмотрим этот код шаг за шагом:

counter-increment — это свойство CSS, которое будет увеличивать определенную переменную «counter» при каждом обнаружении нового элемента. Мы помещаем ее в каждый элемент нумерованного списка. Я назвал свою переменную «muffins», потому что я люблю маффины.

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

Я удаляю ненастраиваемые маркеры по умолчанию с помощью list-style: none, и указываю сброс счетчика. Это гарантирует, что если у меня на странице будет несколько элементов ol, счетчик будет сброшен для каждого.

:before

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

В этом примере мы добавляем текущий счетчик и немного форматирования (точка и пробел) для имитации значения ol по умолчанию. Можете поэкспериментировать с этим!

Стилизация

С помощью этого CSS мы фактически воссоздали ol по умолчанию. Разница в том, что теперь у нас есть селектор CSS, ol li: before, который мы можем использовать для применения пользовательских стилей.

Поддержка браузерами

Счетчики CSS напоминают функцию нового поколения, но на самом деле они существуют вечно. Они поддерживаются в Internet Explorer 8. Используйте это свойство без проблем.

Это кажется большой проблемой!

Рабочая группа CSS согласна с этим — они разработали черновик для нового псевдо-элемента ::marker, который позволил бы вам применять стили непосредственно к маркерам списка. К сожалению, это доступно только в Firefox и Safari. Кроме того: есть еще одна хитрость с CSS-счетчиками…

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

Это действительно крутая вещь: counter имеет двоюродного брата, counters, и это работает для вложенных списков. Обратите внимание, как нумерация складывается рекурсивно:

Вот CSS, необходимый для этого:

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

Возвращаем популярность ol

ol не так популярен, как ul. И все же люди любят считать вещи! Что-то не складывается. Может быть с этим аккуратным трюком, мы, наконец, увидим, что ol получит внимание, которого он заслуживает.

Css для построения собственного счетчика нумерованного списка

Современные сайты наполняются содержанием с помощью специального программного обеспечения: CMS.

Соответственно, контент-менеджер (или редактор сайта) — это специалист, работающий с CMS.

Для кого этот курс?

Курс Контент-менеджер адресован тем, кто работает с содержанием сайта: наполнение, изменение текста, загрузка и размещение картинок и так далее.

• работать с элементами управления в интерфейсе системы;
• приемам работы в визуальном редакторе — основном инструменте при работе над содержанием сайта;
• работать с информационными блоками — местом хранения большей части информации на сайте;
• работать с компонентами — инструментом вывода информации на страницах сайта;
• работать с некоторыми модулями системы.

У нас часто спрашивают, сколько нужно заплатить

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

Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.

Баллы опыта

В конце каждого урока есть кнопка . При клике на неё в Вашу итоговую таблицу опыта добавляется то количество баллов, которое указано в прочитанном После нажатия кнопки Прочитано! появится
окно подтверждения:

уроке.

Периодически мы заново оцениваем сложность уроков, увеличивая/уменьшая число баллов, поэтому итоговое количество набранных Вами баллов может отличаться от максимально возможного. Не переживайте! Отличный результат — это если общее число набранных Вами баллов отличается от максимального на 1-2%.

Практика и тесты

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

После изучения курса пройдите тесты на сертификацию. При успешной сдаче последовательности тестов со страницы Моё обучение скачайте сертификат об успешном прохождении курса в формате PDF.

Для преподавания оффлайн

Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 2 дня (16 академических часов).

Если нет интернета

Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox

iPhone:
FBReader
CoolReader
iBook
Bookmate

Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome

iOS
Marvin for iOS
ShortBook
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса. Версия файла — от 20.10.2021.

Как проходить учебный курс?

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

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

Область применения счетчика есть из документа ‘counter-reset’ [6] Начинается первый элемент счетчика, включая потомков, последующих братьев и сестер и потомков элемента.

Официальную формулу сложнее понять, она изложена на местном языке. counter-reset , Тогда дочерние элементы этого элемента принадлежат этой области.

Чтобы полностью понять сферу, вы должны понимать следующую диаграмму:

Код HTML выше, плюс этот код CSS:

OL создаст счетчик, и все дочерние элементы OL будут ссылаться на счетчик. Если мы будем использовать item [n] для обозначения n-го экземпляра счетчика "item", используйте "<" и ">" для обозначения начала области И конец, тогда вышеупомянутый фрагмент HTML будет использовать отмеченный счетчик.

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

Если вы понимаете сферу отношений, то вы можете передать counter() Или counters() Функция.

counter

Счетчик отображения кода выглядит следующим образом:

Эффект заключается в следующем:

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

counters

Изменить формат

В счетчике секций счетчика и счетчиков есть необязательный параметр, стиль отображения, этот стиль отображения list-style-type [7] Это то же самое. Например, в качестве примера мы берем пример в начале статьи. По умолчанию используется десятичный стиль, например буква (тип нижний латинский). CSS выглядит следующим образом:

Эффект заключается в следующем: существует много типов типа стиля списка и даже китайский (тип стиля списка — cjk-ideographic).

Пользовательское начальное значение

Начальное значение установлено на 5

Настройте значение каждого приращения

Каждое значение приращения равно 2

На видео ниже вы можете увидеть всю работу со списками HTML на практике:

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

На этом со списками заканчиваем и переходите к следующему уроку по изображениям.

Если вам нужно больше, чем просто основы сайтостроения, а хотите освоить профессию Front-end разработчика, то обратите внимание на курс от онлайн-школу Нетология — «Front-end разработчик с нуля» и онлайн-школу Skillbox и курс «Front-end разработчик«.

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