صفت counter-increment در css افزایش کاهش شمارنده

صفت counter-increment در css افزایش کاهش شمارنده

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت counter-increment در زبان css توضیحاتی را ارائه نماییم.

ویژگی جدید counter-increment در دومین نسخه زبان طراحی css یعنی CSS2 معرفی شده است.

صفت counter-increment در css افزایش کاهش شمارنده - سایت آموزی

معرفی ویژگی کاربردی counter-increment در زبان طراحی سی اس اس

خصوصیت counter-increment و خصوصیت counter-reset هر دو برای ایجاد شمارنده در زبان طراحی سی اس اس استفاده می شوند.

با استفاده از خصوصیت counter-increment می توانیم تعیین کنیم که شمارنده چندتا چندتا افزایش یا کاهش پیدا کند.

همچنین با استفاده از خصوصیت counter-reset می توانیم نام و روند افزایشی یا کاهشی شمارنده در زبان طراحی سی اس اس را تعیین کنیم.

اگر عدد مثبت برای شمارنده تعیین کنید، به میزان همان عدد شاهد افزایش مقدار شمارنده در هر مرتبه خواهید بود.

اگر عدد منفی برای شمارنده تعیین کنید، به میزان همان عدد شاهد کاهش مقدار شمارنده در هر مرتبه خواهید بود.

در صورتی که هیچ عددی برای شمارنده تعیین نکنید، در حالت پیش فرض شمارنده مورد نظر یکی یکی افزایش پیدا خواهد کرد.

صفت counter-increment در css افزایش کاهش شمارنده

بررسی تابع ()counter در زبان css

به وسیله تابع ()counter در ویژگی content و انتخابگر before:: می توانید شمارنده سی اس اس را قابل نمایش کنید.

این تابع که برای ساخت شمارنده در css کاربرد دارد، دو مقدار می گیرد.

مقدار اول در تابع ()counter جهت تعیین نام شمارنده و مقدار دوم در این تابع جهت تعیین استایل یا سبک شمارنده مورد نظر استفاده می شود.

تابع ()counter درون ویژگی content جهت نمایش شمارنده سی اس اس استفاده می شود.

به مثال زیر توجه کنید:

[html]ul li:before {content: counter(counter-name, circle);}[/html]

همانطور که در مثال بالا ملاحظه می کنید، مقدار اول تابع ()counter که درون ویژگی content آمده است، تعیین کننده اسم شمارنده و مقدار دوم در تابع ()counter ، استایل یا سبک شمارنده را تعیین نموده است.

مقادیر صفت کاربردی counter-increment در زبان طراحی سی اس اس

صفت کاربردی counter-increment که در زبان طراحی CSS2 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:

مقدار none
مقدار id number
مقدار initial

مقدار none درون خاصیت counter-increment در زبان css

اگر خاصیت counter-increment را برابر با مقدار none قرار دهیم، در حقیقت می خواهیم برای تگ html مورد نظر هیچ عددی را تعیین نکنیم.

و شمارنده را در حالت پیش فرض مقدار افزایشی یکی یکی قرار دهیم.

مقدار none به عنوان مقدار پیش فرض خصوصیت counter-increment می باشد.

مثال براساس مقدار none برای خاصیت counter-increment

[html]div{counter-increment: none;}[/html]

مقدار id number درون خاصیت counter-increment در زبان سی اس اس

اگر خاصیت counter-increment را برابر با مقدار id number قرار دهیم، یعنی می خواهیم برای تگ html مورد نظر یک عدد که تعیین کننده مقدار افزایشی یا کاهشی شمارنده است تعیین می کنیم.

مقدار مثبت شمارنده را در یک روند افزایشی و مقدار منفی شمارنده را در یک روند کاهشی قرار خواهد داد.

مثال براساس مقدار id number برای خاصیت counter-increment

[html]div{counter-increment: my-counter -1;}[/html]

در مثال بالا هر بار که تگ div تکرار شود، یک عدد از شمارنده کم می شود.

مقدار initial درون خاصیت counter-increment در زبان css

اگر خاصیت counter-increment را برابر با مقدار initial قرار دهیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

صفت counter-increment در css افزایش کاهش شمارنده - سایت آموزی

صفت counter-increment در css | افزایش و کاهش شمارنده

بررسی خاصیت counter-increment از نظر نسخه زبان طراحی سی اس اس

خصوصیت counter-increment در دومین نسخه زبان طراحی css یعنی CSS2 معرفی شده است.

بررسی ساختاری خصوصیت counter-increment


عناوین ساختاری خاصیت counter-increment	وضعیت ساختاری خاصیت counter-increment
مقدار پیش فرض	none
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS2
سینتکس صفت در جاوا اسکریپت	"object.style.counterIncrement="subsection