صفحه اصلی / css / اموزش کار با counter در css

اموزش کار با counter در css

 اموزش کار با counter در css

با سلام خدمت شما بازدیدکنندگان و همراهان مجله اینترنتی شماسافت در این پست از مبحث توسعه و برنامه نویسی – اموزش css قصد اموزش کار با counter در css را داریم. در این اموزش شما یاد میگیرد چگونه با اضافه کردن کدهای css یک لیست سفارشی برای مطالب خود طراحی کنید.

 

متغیر counter در css :

counter در css یک متغیر می باشد که به شما این امکان را می دهد تا بتوانید لیست های سفارشی و تو درتو برای سایت خود طراحی کنید شاید شما هم گاهی نیاز داشتید لیست های تودرتو همانند تصویر زیر داشته باشید.

 

counter در css

برای طراحی چنین لیست های تودرتو شما نیاز دارید تا از ویژگی counter ها در css اگاهی داشته باشید.

 

*******

کار با counter در css :

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

به طور کلی برای ساختcounter ها در css از دو مقدار زیر استفاده می کنیم.

۱ – counter-reset:;

با استفاده از این کد می توانید یک شمارنده جدید تعریف کنیم این شمارنده به صورت زیر مقدارهایی به عنوان نام را میپذیرد.

همچنین در قسمت بالا می توانیم تعیین کنیم که شمارنده از چه عددی شماره گذاری را شروع کند به صورت پیشفرض شمارنده از عدد ۱ این کار را انجام می دهد برای تغییر مقدار می توانید یک عدد بعد از نام شمارنده خود قرار دهید برای مثال

در کد بالا ابتدا نام شمارنده تعریف و سپس مقداری که بعد از باید عدد گزاری شروع کند تعریف کردیم بدین صورت این شمارنده از عدد ۵ به بعد برای شماره گذاری استفاده میکند

۲ – counter-increment:;

این مقدار تعیین میکند که شمارنده چندتا چندتا افزایش یابد و به صورت پیشفرض یکی یکی شمارنده افزایش پیدا میکند. برای مثال :

در کد بالا تعیین کردیم که شمارنده ای که از قبل تعریف شده به نام mycount دوتادوتا افزایش یابد.

 

نمایش counter / شمارنده ساخته شده :

برای نمایش یک شمارنده که در css انرا تعریف کرده ایم می بایست عنصر مورد نظر را به صورت

::before انتخاب و با استفاده از content به ان مقدار دهی کنید. کد های نهایی به صورت زیر خواهد بود.

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

See the Pen vepKra by s,mohamamd hosein abedy (@shomasoft) on CodePen.

*******

ساخت لیست تودرتو با استفاده از counter در css :

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

  • لیست هایی که خودشان ساختار تودرتو دارند (مانند استفاده از ul , li)
  • لیست هایی که خودشان ساختار تودرتو ندارند(مثلا استفاده از h1 و h2 در یک div)

 

لیست هایی که خودشان ساختار تودرتو دارند (مانند استفاده از ul , li) :

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

نتیجه کار به صورت زیر می باشد.

See the Pen rGpLoy by s,mohamamd hosein abedy (@shomasoft) on CodePen.

 

*******

لیست هایی که خودشان ساختار تودرتو ندارند(مثلا استفاده از h1 و h2 در یک div) :

کار در اینجا کمی پیچیدگی پیدا میکند چرا که این ساختار عادی بوده و خاصیت تودرتو بودن ندارد بنابراین ما نیاز است دو شمارنده تعریف کنیم یکی به h1 مقدار دهی کند و دیگر به h2 ها مقدار دهی کند این چنین می توانیم ساختار تودرتو را با چندخط کد ایجاد کنیم کدهای مورد استفاده به صورت زیر می باشد.

نتیجه کار به صورت زیر می باشد.

See the Pen MErjap by s,mohamamd hosein abedy (@shomasoft) on CodePen.

 

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

 

یک دیدگاه

  1. اموزش جدید و به درد بخوری بود ممنون

پاسخ دهید

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