آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

counter-reset و counter-increment در css

counter

فصل چهارم : Properties در CSS

جلسه بیست و نهم : counter-reset و counter-incrementدر CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان چند وقتیه که قصد دارم در رابطه با خصوصیات counter-reset و counter-incrementدر css یه مقاله تهیه کنم و در اختیارتون قرار بدم. تو اینترنت که جستجو میکردم هیچ سایتی رو پیدا نکردم که با مثال و واضح این خصوصیات رو توضیح داده باشه جز یک سایت که ترجمه شده ی خود w3school هست و درک اون هم برای دوستان مبتدی یک مقدار مشکله برای همین تصمیم گرفتم تو این مقاله بصورت کامل در رابطه با این دو خصوصیت صحبت کنم و با ذکر مثال اونهارو خدمتتون آموزش بدم.

 

خصوصیات counter-reset و counter-increment

این دو خصوصیت معمولا در کنار هم استفاده میشه و زمانی که شما بخواین یک لیستی رو شماره گذاری یا علامت گذاری کنید میتونید خیلی راحت از این خصوصیات استفاده کنید.

 

خصوصیت counter-reset

این خصوصیت برای reset کردن شمارنده یا شروع مجدد شمارنده استفاده میشه. مثلا شما یک لیستی رو شماره گذاری میکنید و میخواین لیست دوم هم از شماره ۱ شماره گذاری بشه . در این زمان از counter-reset استفاده میشه.

 

خصوصیت counter-increment

از خصوصیت counter-increment و کلاس های کاذب (شبه انتخابگر) before و یا after و خاصیت content برای نام گذاری و اشاره به عنصر مورد نظرمون استفاده می کنیم . مثلا میگیم برای h1 نام heading رو در نظر بگیر و شمارنده و تمامی عملیات رو روی نام heading انجام بده. حالا با ذکر مثال خیلی دقیق تر متوجه ی این موارد خواهید شد.

 

تصور کنید دو سرتیتر دارید و هر کدوم از سرتیترها گزینه هایی جهت نمایش دارند. شما میخواین برای سرتیترها شمارنده ی ۱، ۲ ، ۳ و … قرار بدید و برای گزینه ها شمارنده ی سرتیتر به اضافه ی شمارنده ی گزینه هارو قرار بدید. به تصویر زیر دقت کنید:

counter-reset

همونطور که در تصویر مشاهده میکنید دو سرتیتر داریم و یکسری گزینه که به ترتیب نام گذاری شدند. این کار و ما با li ها یا با شماره گذاری دستی اعداد انجام ندادیم خیلی راحت از div و h1 استفاده کردیم . html این قسمت فقط تکه کد زیر هست:

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

اول سرتیترهامون رو شماره گذاری میکنیم و از خاصیت counter-increment استفاده می کنیم و نام شمارنده رو تعیین میکنیم :

در این مثال ما شمارنده رو با نام iwl-h1 نام گذاری کردیم. حالا باید بگیم که شمارنده ای که تولید میکنی رو در h1 نمایش بده . برای اینکار از شبه انتخابگر before استفاده می کنیم:

 

در مثال بالا گفتیم محتوای (content ) قبل (before) از h1 مقدار شمارنده ی iwl-h1 باشه (یعنی همون شماره هایی که تولید میکنه رو قبل از محتوای داخل عنصر h1 نمایش بده) تا اینجا ما برای سرتیترها شمارنده گذاشتیم. برای اینکه یه نقطه بعد از شماره قرار بگیره هم از “.” استفاده کردیم. تا اینجای کار رو ببینیم:

counter-increment

حالا میخوایم برای گزینه های هر سرتیتر شمارنده تعریف کنیم. به همین صورت برای گزینه ها هم عمل میکنیم:

 

اسم شمارنده ی گزینه هارو iwl-div در نظر گرفتیم. تا اینجا کار به شکل زیر درمیاد:

counter-increment

حالا میخوایم شمارنده ی گزینه های زیرمجموعه ی هر سرتیتر از عدد ۱ شروع بشه و ادامه ی گزینه های قبلی نباشه. برای اینکار از reset استفاده میکنیم و میگیم به هر h1 که رسیدی شمارنده ی iwl-div رو reset کن . از خصوصیت counter-reset استفاده میکنیم:

نتیجه رو ببینیم :

counter-increment

حالا میخوایم مثل دموی اولیه که دیدید، شماره ی هر سرتیتر رو در شمارنده ی گزینه های زیرمجموعه اش ادغام کنیم و شمارنده هارو بصورت زیرمجموعه ای نمایش بدیم. برای اینکار شمارنده ی سرتیتر رو هم در contentDIV نمایش میدیم:

.countDIV:before{ content: counter(iwl-h1)”.”counter(iwl-div)” “;}

نتیجه رو ببینیم:

counter-increment

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

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

 

مرورگرهایی که این خصوصیت رو پشتیبانی میکنند

در حال حاضر تمامی مرورگرها حتی IE8 هم این خصوصیت رو پشتیبانی میکنند.

 

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

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • محمد امین

    بسیار بسیار تشکر . خانم رحیمی عالین ! عالی ! موفق باشید

  • محسن

    آموزش مفیدی بود ، ولی خیلی راحت تر هم میشه این شماره گزاری ها رو انجام داد !

    • میترا رحیمی

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

  • hassany

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

  • hassany

    میشه از همون لیست عادی هم برای این کار استفاده کرد تا نیازی به این همه تگ نباشه و برای بحث سئو هم مشکلی پیش نیاد چون برای ایجاد لیست بهتره که از لیست استفاده کنیم تا سئو ی بهتری داشته باشیم و از قوانین کدنویسی هم پیروی کرده باشیم.

    • میترا رحیمی

      سلام دوست عزیز

      بله ، صد در صد برای ایجاد لیست ها از li ها استفاده می کنیم، اگر تو این مثال استفاده نکردیم به این دلیل بود که دوستان این خاصیت رو با خاصیت شماره گذاری li ها اشتباه نگیرن.
      تو مطالب اگر مثالی زده میشه صرفا برای فهم و درک اون خاصیت هست، نباید حتما این کد html رو پیاده کنید، باید نحوه ی کار با خاصیت هارو یاد بگیرید : )
      علاوه بر این شماره گذاری ساده می تونید با این خاصیت ها کارهای دیگه ای هم انجام بدید، مثلا تو ماهنامه هفتم بازی با اعداد رو گذاشتم که با همین خصوصیات طراحی شده .

      موفق و پاینده باشید.

  • hassany

    قبلا مقاله توی ماهنامه رو خونده بودم ولی چون با دوتا از خاصیتهاش یعنی همینایی که اینجا آموزش دادین آشنا نبودم زیاد به اون بازی دقت نکردم و گذاشتم برا بعد ولی الان که برگشتم و یه بار دیگه با دقت کدهارو بررسی کردم بیشتر به کاربرد این خواص پی بردم.
    تشکر به خاطر توضیحاتتون.

  • محمد

    مقاله خوبی بود.
    تو لیست شمارنده ها arabic-indic رو یادتون رفته!
    شماره گذاری عربی که میتونیم برای فارسی هم استفاده کنیم، انجام میده.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟