شمارنده‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:Tutorial(تغییرمسیر از CSS:شمارنده‌ها)
پرش به ناوبری پرش به جستجو

شمارنده‌های CSS «متغیرهایی» هستند که توسط CSS نگهداری می‌شوند و مقدار آنها می‌تواند با توجه به قوانین CSS افزایش یابد (برای فهمیدن اینکه چند مرتبه آنها استفاده شده‌اند). شمارنده‌ها به شما اجازه می‌دهند که ظاهر محتوا را با توجه به موقعیت آنها در سند تنظیم کنید.[۱]

شماره دهی خودکار باشمارنده ها

شمارنده‌های CSS همانند «متغیرها» هستند. مقادیر متغیرها می‌توانند با قوانین CSS (که مشخص می‌کند چندین بار استفاده شده‌اند) افزایش یابد.

برای کار با شمارنده‌های CSS از ویژگی‌های زیر استفاده خواهیم کرد:

  • counter-reset - ایجاد یا تنظیم مجدد یک شمارنده
  • counter-increment - افزایش مقدار یک شمارنده
  • content - واردکردن محتوای ایجاد شده
  • تابع counter() یا counters() - مقدار یک شمارنده را به یک عنصر اضافه می‌کند


برای استفاده از یک شمارنده CSS، شمارنده ابتدا می‌بایست با counter-reset ساخته شود.

مثال زیر یک شمارنده برای صفحه (در انتخابگر body) می‌سازد، سپس مقدار شمارنده را به ازای هر عنصر <h2> افزایش می‌دهد و عبارت بخش «<مقدار شمارنده>:» را به ابتدای هر عنصر <h2> اضافه می‌کند:

مثال

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}


شمارنده های تودرتو

مثال زیر یک شمارنده برای صفحه (بخش) می‌سازد و یک شمارنده برای هر عنصر <h1> (زیربخش) می‌سازد. شمارنده «بخش» برای هر عنصر <h1> با عبارت «بخش <محتوای شمارنده بخش>.» شمرده خواهد شد، و شمارنده «زیربخش» برای هر عنصر <h2> با عبارت «<مقدار شمارنده بخش>. <مقدار شمارنده زیربخش>» شمرده خواهد شد:

مثال

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) " ";
}


همچنین شمارنده برای ساختن لیست‌های outlined می‌تواند کاربردی باشد زیرا یک شی از شمارنده به صورت خودکار در عناصر فرزند ساخته می‌شود. در اینجا از تابع counters() برای قراردادن یک رشته متنی بین مراحل مختلف شمارنده‌های تو در تو استفاده می‌کنیم.

مثال

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}


ویژگی های شمارنده در CSS

ویژگی توضیحات
content با شبه عناصر ::before و ::after، برای قرار دادن محتوی تولید شده استفاده می‌شود
counter-increment مقادیر شمارنده را یک یا چند واحد افزایش می‌دهد
counter-reset یک یا چند شمارنده می‌سازد یا بازنشانی می‌کند


منابع آموزشی