سی اس ایس شمارش
- صفحه قبلی سی اس ایس فرم
- صفحه بعدی سی اس ایس وب سایتی دسته بندی
پیتزا
هامبرگر
هات‌دوگ
شمارنده‌های CSS یک "متغیر" حفظ شده توسط CSS هستند، که ارزش آن می‌تواند از قوانین CSS افزایش یابد (برای ردیابی تعداد استفاده‌ها).
شمارنده‌ها به شما امکان می‌دهند که به استایل خود در مکان‌های مختلف در مستند دسترسی پیدا کنید.
شماره‌گذاری خودکار با شمارنده
شمارنده‌های CSS مانند "متغیرها" هستند. ارزش متغیرها می‌تواند از قوانین CSS افزایش یابد (برای ردیابی تعداد استفاده‌ها).
برای استفاده از شمارنده‌های CSS، ما از属性 زیر استفاده خواهیم کرد:
counter-reset- شمارنده را ایجاد یا تنظیم مجدد کنیدcounter-increment- ارزش شمارنده را افزایش دهیدcontent- محتوای تولید شده را وارد کنیدcounter()یاcounters()فونکشن - ارزش شمارنده را به علامت اضافه کنید
برای استفاده از شمارنده‌های CSS، ابتدا باید از counter-reset ایجاد کنید.
مثال زیر برای ایجاد یک شمارنده برای صفحه (در انتخاب‌گر body) ایجاد می‌کند، سپس برای هر <h2> علامت ارزش شمارنده را افزایش می‌دهد و در ابتدای هر <h2> علامت "Section <value of the counter>:" اضافه می‌کند:
مثال
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
شمارنده‌های عمیق
مثال زیر برای ایجاد یک شمارنده برای صفحه (section) و برای هر <h1> علامت (subsection) یک شمارنده ایجاد می‌کند.
"section" شمارنده برای هر <h1> علامت شمارش می‌کند، در حالی که "Section" و ارزش شمارنده section نوشته می‌شود، "subsection" شمارنده برای هر <h2> علامت شمارش می‌کند، در حالی که ارزش شمارنده section و subsection نوشته می‌شود:
مثال
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) " ";
}
شمارنده‌ها برای ایجاد لیست‌های خلاصه نیز بسیار مفید هستند، زیرا یک نمونه جدید از شمارنده در عناصر فرزند خود ایجاد می‌شوند. در اینجا از 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 | یک یا چند شمارنده ایجاد یا تنظیم کنید. |
- صفحه قبلی سی اس ایس فرم
- صفحه بعدی سی اس ایس وب سایتی دسته بندی
