دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » Counter ( شمارنده ) در فیلم آموزش CSS به زبان فارسی
Counter ( شمارنده ) در فیلم آموزش CSS به زبان فارسی

Counter ( شمارنده ) در فیلم آموزش CSS به زبان فارسی

در این قسمت از فیلم آموزش CSS به آموزش Counter یا شمارنده پرداخته ایم . با استفاده از شمارنده می توانیم به هر تگی که خواستیم شمارشگر اضافه کنیم .

Counter ( شمارنده ) در CSS

یکی از ویژگی های شمارنده ،  Counter-reset است که برای تعریف کردن شمارنده استفاده می شوند و همین طور برای این که شمارنده از کدام عدد شروع شود هم از این ویژگی استفاده می شود .
ویژگی بعدی Counter-increment  است که تعیین می کند شمارنده چندتا چندتا کم شود و یا زیاد شود .

نکته مهم این است که برای نمایش شمارنده باید از شبه کلاس Before:: استفاده کنیم و در داخل Content از تابع ()Counter استفاده کنیم .

Counter-reset

گفتیم که برای تعریف کردن شمارنده از این ویژگی استفاده می کنیم و همین طور برای تعیین عدد شروع شمارنده استفاده می شود . شما می توانید هر چندتا که شمارنده می خواید تعریف کنید و برای هر کدام  اسمی را انتخاب کنید .
برای تعیین شماره آغاز کننده شمارنده همانند سورس کد زیر عمل کنید :

همان طور که می بینید بعد از ویژگی Counter-reset اسم div را برای آن انتخاب کرده ایم حالا چون عددی کنار آن قرار نداده ایم به صورت پیش فرض شمارنده از عدد 1 شروع می شود .
در سطر دوم کنار اسم شمارنده عدد 5 را قرار دادیم . این یعنی شمارنده باید از عدد 5 شروع شود .
در سطر سوم هم عدد 2- را نوشته ایم و این یعنی شمارنده باید از عدد 2- شروع شود .

Counter-increment

این ویژگی تعیین می کند که شمارنده چندتا چندتا زیاد شود و یا کم شود :

یعنی وقتی که تگ div دیدی یدونه یدونه به شمارنده اضافه کن . وقتی که فقط اسم شمارنده نوشته شود به صورت پیش فرض یدونه یدونه به شمارنده اضافه می کند .

کد بالا یعنی هر جا تگ h1  دوتا به شمارنده اضافه کن چون کنار اسم شمارنده از عدد 2 استفاده کرده ایم و این یعنی دوتا دوتا به شمارنده اضافه شود .

کد بالا یعنی از شمارنده سه تا سه تا کم کن چون از عدد 3- استفاده کرده ایم پس هر وقت تگ h2  رو دید سه واحد از شمارنده کم می کند .

تابع ()Counter

از این تابع باید در شبه کلاس before:: استفاده شود چون می خواهیم شمارنده قبل از عناصر نمایش داده شود . این تابع دوتا مقدار می گیرد اولی نام شمارنده و دومی استایل شمارنده ( یعنی به شکلی نمایش داده شود ) .
این تابع را باید در داخل Content بنویسیم و اگر مقدار دوم تابع را ننویسید به صورت پیش فرض از عدد صحیح را نمایش می دهد .

مقادیری که تابع استایل می پذیرد به صورت زیر است :

مثال :

کد HTML :

کد CSS :

اگر کدها را اجرا کنید می بینید که به شمارنده های تگ h2 یکم استایل دادم و شما می تونید خیلی استایل های زیباتری هم درست کنید .

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

برای نوشتن شمارنده ها به صورت تو در تو از تابع ()Counters استفاده می کنیم در تابع ()Counters بعد از نوشتن اسم شمارنده باید از جدا کننده استفاده کنید . ( در فیلم آموزشی توضیح داده شده است )

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

فیلم آموزش CSS را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

دانشجوی رشته نرم افزار ، عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *