شمارنده‌ها

« صفحهٔ قبل

صفحهٔ بعد »

شمارنده‌های 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	یک یا چند شمارنده می‌سازد یا بازنشانی می‌کند

« صفحهٔ قبل

صفحهٔ بعد »