پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: حامد محمدی 
شمارنده ها Counters در css، مقادیر نگهداری شده توسط css هستند.
شمارنده ها می توانند طبق قوانین css مقادیر افزایشی داشته باشند.( به منظور مشخص کردن اینکه چند بار از آن استفاده شده است.)
شمارنده ها به شما اجازه می دهند تا ظاهر محتوا را بر اساس محل قرار گرفتن آن در سند مشخص کنید.
همراه آموزش امروز پرنیان طرح باشید تا باهم کار با شمارنده ها را مرور کنیم.
با سلام خدمت شما همراهان همیشگی سایت پرنیان طرح
شمارنده ها Counters در css، مقادیر نگهداری شده توسط css هستند.
شمارنده ها می توانند طبق قوانین css مقادیر افزایشی داشته باشند.( به منظور مشخص کردن اینکه چند بار از آن استفاده شده است.)
شمارنده ها به شما اجازه می دهند تا ظاهر محتوا را بر اساس محل قرار گرفتن آن در سند مشخص کنید.
همراه آموزش امروز پرنیان طرح باشید تا باهم کار با شمارنده ها را مرور کنیم.
شمارش خودکار با استفاده از شمارنده ها
شمارنده های css، مانند “متغیرها” هستند.
مقادیر متغیرها را می توان با استفاده از قوانین css افزایش داد.( مشخص می کند که چند بار از آن استفاده شده است.)
برای کار با شمارنده های css، ما از ویژگی های زیر استفاده میکنیم:
counter-reset : یک شمارنده را ایجاد میکند. و یا آن را ریست می کند.
counter-increment : مقدار یک شمارنده را افزایش می دهد.
content: محتوای ایجاد شده را وارد (درج) می کند.
()counter function -یا ()counters : مقدار یک شمارنده را به عنصر اضافه می کند.
برای استفاده کردن از یک شمارنده css، ابتدا باید آنرا توسط ویژگی counter-reset ایجاد کنید.
مثال زیر یک شمارنده برای صفحات ایجاد می کند( در انتخاب کننده بدنه ) .
سپس مقدار شمارنده را به ازای هر عنصر <h2> اضافه می کند.همچنین عبارت “<Section <“value of the counter را در ابتدای هر عنصر <h2> اضافه می کند.
به مثال زیر دقت کنید.
[php]
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: “Section ” counter(section) “: “;
}
[/php]
شمارنده های تو در تو
مثال زیر یک شمارنده برای صفحه (section) و یک شمارنده دیگر برای هر عنصر <h1> ایجاد می کند (subsection).
شمارنده “section”، به ازای هر عنصر <h1> با “<Section <value of the section counter “شمارش خواهد شد.
و شمارنده “subsection” به ازای هر عنصر <h2> با “<value of the subsection counter>” شمارش خواهد شد.
[php]
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: “Section ” counter(section) “. “;
}
h2::before {
counter-increment: subsection;
content: counter(section) “.” counter(subsection) ” “;
}
[/php]
یک شمارنده ، همچنین می تواند برای تهیه لیست های طراحی شده مفید باشد. زیرا نمونه جدید شمارنده به طور خودکار در عناصر فرزند ایجاد می شود.
در این مثال ما از توابع ()counters برای وارد کردن یک رشته بین سطوح مختلف شمارنده های تودرتو استفاده کرده ایم.
[php]
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,”.”) ” “;
}
[/php]
ویژگی های شمارنده های css
content : محتوا : برای درج محتوای تولید شده در ::قبل و بعد:: از شبه عناصر استفاده می شود.
counter-increment : افزایش دهنده شمارنده: مقدار یک یا چند شمارنده را افزایش می دهد.
counter-reset : بازنشانی شمارنده: یک یا چند شمارنده را ایجاد یا بازنشانی می کند.
