شمارنده‌ها

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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	یک یا چند شمارنده می‌سازد یا بازنشانی می‌کند

صفحهٔ بعد»

«صفحهٔ قبل