شمارنده‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

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

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

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


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

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

مثال
1 body {
2   counter-reset: section;
3 }
4 
5 h2::before {
6   counter-increment: section;
7   content: "Section " counter(section) ": ";
8 }


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

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

مثال
 1 body {
 2   counter-reset: section;
 3 }
 4 
 5 h1 {
 6   counter-reset: subsection;
 7 }
 8 
 9 h1::before {
10   counter-increment: section;
11   content: "Section " counter(section) ". ";
12 }
13 
14 h2::before {
15   counter-increment: subsection;
16   content: counter(section) "." counter(subsection) " ";
17 }


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

مثال
1 ol {
2   counter-reset: section;
3   list-style-type: none;
4 }
5 
6 li::before {
7   counter-increment: section;
8   content: counters(section,".") " ";
9 }


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

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


منابع آموزشی