با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. تاکنون کار با انواع لیست ها (علامتدار و شمارشی) را بررسی کردیم و برای شماره گذاری آیتم ها تاکنون لیست های شماره گذاری را می شناختیم. اما این روش قابلیت های زیادی را در اختیار کاربران نمی گذرد و فقط یک شماره گذاری ساده را انجام می دهد. شمارنده ها (Counters) در CSS به شما این قابلیت های بیشتری برای شماره گذاری آیتم ها می دهند. با استفاده از شمارنده ها در CSS شما می توانید برای هر شماره آیتم یک عنوان نیز اضافه کرده و همچنین قالب شمارنده را تعریف کنید. برای آشنایی بیشتر با طرز کار Counters در CSS و چگونگی استفاده از آن در ادامه ی این بخش با ما همراه باشید.
در این آموزش ما شما را با شمارنده ی خودکار Counters در CSS و ویرایش فرمت آن آشنا خواهیم کرد.
شمارنده های Counters در CSS در واقع متغییرهایی هستند که در CSS تعریف و مدیریت می شوند.
با استفاده از کدهای CSS می توان نحوه ی شماره گذاری و Style آن را تنظیم کرد.
Counters در CSS همانند متغیرها عمل می کنند، مقادیر متغیرها می توانند با استفاده از قوانین CSS افزایش یابند.
برای تعریف و استفاده از شمارنده ها در CSS با خصوصیات زیر سر و کار داریم:
counter-reset
: یک شمارنده را ایجاد و یا ریست می کند.counter-increment
: مقدار شمارنده را افزایش می دهد.content
: درج محتوای تولید شده.counter()
یا counters()
: مقدار ایجاد شده توسط شمارنده را به یک عنصر اضافه می کند.برای استفاده از Counters در CSS ابتدا باید آن را با counter-reset
ایجاد کنیم.
در مثال زیر یک شمارنده در قسمت body صفحه وب تعریف می کنیم.
سپس مقدار شمارنده را برای هر عنصر <h2> اضافه می کنیم و سپس “:<Section <value of the counter” را در ابتدای هر عنصر <h2> اضافه می کنیم:
1 2 3 4 5 6 7 8 | body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; } |
در مثال زیر یک شمارنده برای هر صفحه (section) و یک شمارنده برای هر عنصر <h1> اضافه می کنیم.
شمارنده “section” برای هر عنصر <h1> با کد “:<Section <value of the counter” شمارش می شود.
و شمارنده ی “subsection” نیز برای هر عنصر <h2> با کد “<value of the section counter>.<value of the subsection counter>” شمارش می شود:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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) " "; } |
یک شمارنده همچنین می تواند برای ایجاد لیست های outline نیز استفاده شود چراکه نمونه جدید شمارنده به طور خودکار در عناصر فرزند ایجاد می شود.
ما از تابع counters()
به منظور ایجاد یک رشته در سطوح مختلف شمارنده های تودرتو استفاده می کنیم.
1 2 3 4 5 6 7 8 9 | ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; } |
با استفاده از ویژگی Counters در CSS می توانید یک شماره گذاری کامل و با جزئیات بیشتر برای محتوای خود ایجاد کنید، همچنین در مواردی که شما نیاز به شمارنده های تو در تو دارید، بکارگیری شمارنده ها در CSS بهترین گزینه است.
عبدالهی
واقعا ممنونم . اصلا شمارنده ها رو متوجه نمیشدم