Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Автоматическая нумерация с помощью CSS

Дата добавления: 09.10.2013 - 18:09
Добавил: Buger
Количество просмотров: 525
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Автоматическая нумерация с помощью CSS
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
На самом деле, есть также несколько свойств в CSS2, что действительно полезно, но менее известнее, в том числе тот, который мы будем обсуждать в этом посте: CSS счетчик автоматической нумерации.
Как вы уже знаете, когда мы добавляем списки с элементом <ol>, то список нумеруются автоматически.
Итак, давайте посмотрим, как делается
CSS счетчик автоматической нумерации.

Основы использования

CSS счетчик состоит из двух основных свойств: counter-reset и counter-increment.
Counter-reset используется для сброса количества, в то время как counter-increment - в сочетании с псевдо-элементом - используется для добавления номера.
Следующий код является основной, как число элементов <h1> с этими свойствами.
Код
body {
    counter-reset: number;
}
h1:before {
    counter-increment: number;
    content: "counter(number) ";
}

Этот код
дает нам следующий результат.




В случае, если вы хотите, начать числа от конкретной точки, можно указать "reset number” таким образом.

Код
body {
    counter-reset: number 1;
}

Этот номер, который мы добавили в приведенном выше коде является "reset number”. Если он не объявлен, то он будет установлен по умолчанию на 0, и счет будет инициализировать с 1. Другими словами, сгенерированный номер будет инициализировать со следующего номера одного в counter-reset. Так что, учитывая наш пример выше, отсчет начнется с 2.



Кроме того, вы также можете изменить тип номера, который указан в content.
Код
h2:before {
    counter-increment: first;
    content: counter(number, upper-roman) ". ";
}

В результате получится следующее.



В завершении

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


Источник: http://hongkiat.com
Добавлять комментарии могут только зарегистрированные пользователи.