10.12.13, 20:33
0 комментарий
  Уроки

Автоматическая нумерация посредством CSS Counter

До сегодняшнего дня мы успели рассказать вам о многих новых свойствах CSS3 – от цветных градиентов, переходов до анимации. На самом деле, есть еще множество других опций и функций (причем, некоторые из них доступны еще со времен CSS2), о которых следует рассказать. Сегодня мы хотим познакомить вас с CSS Counter.

Как вам всем уже наверное известно, когда мы добавляем списки при помощи элемента 'ol', нумерация проставляется автоматически. Используя CSS Counter, мы можем пронумеровать абсолютно любые элементы. Итак, давайте посмотрим, как это работает.

Базовое применение

CSS Counter состоит из двух основных свойств: counter-reset и counter-increment. counter-reset используется для сброса нумерации, а counter-increment – в компании псевдо-элемента – используется для повышения числа.

Следующий код представляет собой базовое применение функции.

body {
	counter-reset: number;
}
h1:before {
	counter-increment: number;
	content: "counter(number) ";
}


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

Автоматическая нумерация посредством CSS Counter


На случай, если вам нужно, чтобы числа начинались с определенной точки, вы можете указать reset number следующим образом:

body {
	counter-reset: number 1;
}


Число, которое мы добавили в вышеприведенном коде, - это reset number. Если вы не укажите его точно, то оно будет выставлено на 0 по умолчанию, и начало отсчета будет с 1. Другими словами, сгенерированное число будет инициализироваться со следующей цифры после той, что указана в свойстве counter-reset. Итак, учитывая вышеприведенный пример, отсчет начнется с 2.

Автоматическая нумерация посредством CSS Counter


Более того, вы также можете изменить тип чисел, который указан внутри свойства content.

h2:before {
	counter-increment: first;
	content: counter(number, upper-roman) ". ";
}


Результат получится следующим:

Автоматическая нумерация посредством CSS Counter


В завершение

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

Исходники в архиве.

СКАЧАТЬ

Вес файла
26.41 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204