آموزش کار با شمارنده ها Counters در Css

حامد محمدیحامد محمدی
142 بازدید
آموزش کار با شمارنده ها در css

شمارنده ها Counters در css، مقادیر نگهداری شده توسط css هستند.

شمارنده ها می توانند طبق قوانین css مقادیر افزایشی داشته باشند.( به منظور مشخص کردن اینکه چند بار از آن استفاده شده است.)

شمارنده ها به شما اجازه می دهند تا ظاهر محتوا را بر اساس محل قرار گرفتن آن در سند مشخص کنید.

همراه آموزش امروز پرنیان طرح باشید تا باهم کار با شمارنده ها را مرور کنیم.

با سلام خدمت شما همراهان همیشگی سایت پرنیان طرح

شمارنده ها Counters در css، مقادیر نگهداری شده توسط css هستند.

شمارنده ها می توانند طبق قوانین css مقادیر افزایشی داشته باشند.( به منظور مشخص کردن اینکه چند بار از آن استفاده شده است.)

شمارنده ها به شما اجازه می دهند تا ظاهر محتوا را بر اساس محل قرار گرفتن آن در سند مشخص کنید.

همراه آموزش امروز پرنیان طرح باشید تا باهم کار با شمارنده ها را مرور کنیم.

 

شمارش خودکار با استفاده از شمارنده ها

شمارنده های css، مانند “متغیرها” هستند.

مقادیر متغیرها را می توان با استفاده از قوانین css افزایش داد.( مشخص می کند که چند بار از آن استفاده شده است.)

برای کار با شمارنده های css، ما از ویژگی های زیر استفاده میکنیم:

counter-reset : یک شمارنده را ایجاد میکند. و یا آن را ریست می کند.

counter-increment : مقدار یک شمارنده را افزایش می دهد.

content: محتوای ایجاد شده را وارد (درج) می کند.

()counter function -یا ()counters : مقدار یک شمارنده را به عنصر اضافه می کند.

برای استفاده کردن از یک شمارنده css، ابتدا باید آنرا توسط ویژگی counter-reset  ایجاد کنید.

مثال زیر یک شمارنده برای صفحات ایجاد می کند( در انتخاب کننده بدنه ) .

سپس مقدار شمارنده را به ازای هر عنصر <h2> اضافه می کند.همچنین عبارت “<Section <“value of the counter را در ابتدای هر عنصر <h2> اضافه می کند.

به مثال زیر دقت کنید.

[php]
body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: “Section ” counter(section) “: “;
}
[/php]

نتیجه را مشاهده کنید.

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

مثال زیر یک شمارنده برای صفحه (section) و یک شمارنده دیگر برای هر عنصر <h1> ایجاد می کند (subsection).

شمارنده “section”، به ازای هر عنصر <h1>  با “<Section <value of the section counter “شمارش خواهد شد.

و شمارنده  “subsection” به ازای هر عنصر <h2> با “<value of the subsection counter>” شمارش خواهد شد.

 

[php]
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) ” “;
}
[/php]

نتیجه را مشاهده کنید.

 

یک شمارنده ، همچنین می تواند برای تهیه لیست های طراحی شده مفید باشد. زیرا نمونه جدید شمارنده به طور خودکار در عناصر فرزند ایجاد می شود.

در این مثال ما از توابع ()counters برای وارد کردن یک رشته بین سطوح مختلف شمارنده های تودرتو استفاده کرده ایم.

[php]
ol {
counter-reset: section;
list-style-type: none;
}

li::before {
counter-increment: section;
content: counters(section,”.”) ” “;
}
[/php]

نتیجه را مشاهده کنید.

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

content : محتوا : برای درج محتوای تولید شده در ::قبل و بعد:: از شبه عناصر استفاده می شود.

counter-increment : افزایش دهنده شمارنده:  مقدار یک یا چند شمارنده را افزایش می دهد.

counter-reset : بازنشانی شمارنده:  یک یا چند شمارنده را ایجاد یا بازنشانی می کند.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت