Изменить вид написания чисел в списке и сделать, чтобы после каждого номера шла круглая скобка - «Маркированный список» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 15 ноябрь 2024, 00:01
Грядёт Wi-Fi 8: когда он появится и что предложит вместо повышения скорости - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
26-03-2016, 17:22
Изменить вид написания чисел в списке и сделать, чтобы после каждого номера шла круглая скобка - «Маркированный список»
Рейтинг:
Категория: Самоучитель CSS / Списки
Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 7.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

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

 


Рис. 1. Вид нумерованного списка со скобкой

Стили позволяют поменять вид нумерации списков с помощью стилевых свойств content и counter-increment. Вначале для селектора OL требуется задать counter-reset: item, это нужно для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счетчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевое свойство list-style-type со значением none.

Свойство content само по себе не используется, как правило, оно работает в сочетании с псевдоэлементами :after и :before. Так, конструкция li:before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 1).

Пример 1. Создание своей нумерации

li:before {
  content: counter(item) ') '; /* Добавляем к числам скобку */
  counter-increment: item; /* Задаём имя счетчика */
}

content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. Свойство counter-increment необходимо для увеличения номера списка на единицу. Обратите внимание, что везде используется один и тот же идентификатор с именем item. Окончательный код приведен в примере 2.

Пример 2. Изменение вида списка

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
  <style>
   ol {
    list-style-type: none; /* Убираем исходные маркеры */
    counter-reset:  item; /* Обнуляем счетчик списка */
   }
   li:before {
    content: counter(item) ') '; /* Добавляем к числам скобку */
    counter-increment: item; /* Задаём имя счетчика */
   }
  </style>
  <!--[if lt IE 8]> 
  <style>
   ol {
    list-style-type: decimal;
   }
  </style
  <![endif]--> 
 </head>
 <body>
  <ol>
   <li>Первый</li>
   <li>Второй</li>
   <li>Третий</li>
   <li>Четвертый</li>
  </ol>
 </body>
</html>

Браузер Internet Explorer до версии 8.0 не поддерживает свойство content. Чтобы не получилось явного различия при выводе списка в разных браузерах, специально для Internet Explorer в данном примере через условные комментарии добавлено свойство list-style-type со значением decimal. Эта запись выводит традиционную нумерацию строк.

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

content: '[' counter(item) '] ';


Internet Explorer Chrome Opera Safari Firefox Android iOS 8.0 1.0 7.0 1.0 1.0 1.0 1.0 Задача Изменить вывод чисел в нумерованном списке и сделать, чтобы после номера шла круглая скобка. Решение По умолчанию нумерованный список имеет определённый вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рис. 1 или нечто подобное. Рис. 1. Вид нумерованного списка со скобкой Стили позволяют поменять вид нумерации списков с помощью стилевых свойств content и counter-increment. Вначале для селектора OL требуется задать counter-reset: item, это нужно для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счетчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевое свойство list-style-type со значением none. Свойство content само по себе не используется, как правило, оно работает в сочетании с псевдоэлементами :after и :before. Так, конструкция li:before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 1). Пример 1. Создание своей нумерации content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. Свойство counter-increment необходимо для увеличения номера списка на единицу. Обратите внимание, что везде используется один и тот же идентификатор с именем item. Окончательный код приведен в примере 2. Пример 2. Изменение вида списка HTML5 CSS 2.1 IE Cr Op Sa Fx Браузер Internet Explorer до версии 8.0 не поддерживает свойство content. Чтобы не получилось явного различия при выводе списка в разных браузерах, специально для Internet Explorer в данном примере через условные комментарии добавлено свойство list-style-type со значением decimal. Эта запись выводит традиционную нумерацию строк. Приведённым способом можно делать любой вид нумерованного списка, например, брать число в квадратные скобки, в стилях при этом изменится только одна строка. content: '_
Просмотров: 3 278
Комментариев: 0:   26-03-2016, 17:22
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР