شمارندهها
شمارندههای CSS «متغیرهایی» هستند که توسط CSS نگهداری میشوند و مقدار آنها میتواند با توجه به قوانین CSS افزایش یابد (برای فهمیدن اینکه چند مرتبه آنها استفاده شدهاند). شمارندهها به شما اجازه میدهند که ظاهر محتوا را با توجه به موقعیت آنها در سند تنظیم کنید.[۱]
شماره دهی خودکار باشمارنده ها
شمارندههای CSS همانند «متغیرها» هستند. مقادیر متغیرها میتوانند با قوانین CSS (که مشخص میکند چندین بار استفاده شدهاند) افزایش یابد.
برای کار با شمارندههای CSS از ویژگیهای زیر استفاده خواهیم کرد:
counter-reset
- ایجاد یا تنظیم مجدد یک شمارنده
counter-increment
- افزایش مقدار یک شمارنده
content
- واردکردن محتوای ایجاد شده
- تابع
counter()
یاcounters()
- مقدار یک شمارنده را به یک عنصر اضافه میکند
برای استفاده از یک شمارنده CSS، شمارنده ابتدا میبایست با counter-reset
ساخته شود.
مثال زیر یک شمارنده برای صفحه (در انتخابگر body) میسازد، سپس مقدار شمارنده را به ازای هر عنصر <h2> افزایش میدهد و عبارت بخش «<مقدار شمارنده>:» را به ابتدای هر عنصر <h2> اضافه میکند:
شمارنده های تودرتو
مثال زیر یک شمارنده برای صفحه (بخش) میسازد و یک شمارنده برای هر عنصر <h1> (زیربخش) میسازد. شمارنده «بخش» برای هر عنصر <h1> با عبارت «بخش <محتوای شمارنده بخش>.» شمرده خواهد شد، و شمارنده «زیربخش» برای هر عنصر <h2> با عبارت «<مقدار شمارنده بخش>. <مقدار شمارنده زیربخش>» شمرده خواهد شد:
همچنین شمارنده برای ساختن لیستهای outlined میتواند کاربردی باشد زیرا یک شی از شمارنده به صورت خودکار در عناصر فرزند ساخته میشود. در اینجا از تابع counters()
برای قراردادن یک رشته متنی بین مراحل مختلف شمارندههای تو در تو استفاده میکنیم.
ویژگی های شمارنده در CSS
ویژگی | توضیحات |
---|---|
content | با شبه عناصر ::before و ::after، برای قرار دادن محتوی تولید شده استفاده میشود |
counter-increment | مقادیر شمارنده را یک یا چند واحد افزایش میدهد |
counter-reset | یک یا چند شمارنده میسازد یا بازنشانی میکند |
منابع آموزشی