میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

شمارنده ها Counters در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش شمارنده ها Counters در 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> اضافه می کند.

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

 

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

 


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

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

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

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

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 : محتوا : برای درج محتوای تولید شده در ::قبل و بعد:: از شبه عناصر استفاده می شود.

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

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

 

 


امیدواریم آموزش شمارنده ها Counters در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
counters csscounters css3counters در csscssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسشمارنده ها Counters در CSSشمارنده ها در cssفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟