شمارنده های CSS

راهنمای محاسبه و تودرتو شمارنده های CSS

شمارنده های CSS متغیرهایی هستند که مقادیر آن ها برای ردیابی تعداد دفعات استفاده در سند افزایش می یابد.

نحوه کار با شمارنده های CSS

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

سه ویژگی اصلی وجود دارد که می توانید برای کار با شمارنده استفاده کنید – محتوای CSS ، افزایش شمارنده CSS و تنظیم مجدد شمارنده CSS:

شمارنده ها در لیست های شماره دار CSS

ما برای محاسبه شمارنده های CSS از دو ویژگی – ضد تنظیم مجدد و ضد افزایش استفاده خواهیم کرد. برای نمایش آن ها ، ما باید از محتوای جفت شده با دو عملکرد اختصاصی ضد CSS استفاده کنیم: شمارنده () و شمارنده ().

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

مثال زیر نشان می دهد که چگونه می توانید یک شمارنده با استفاده از CSS ایجاد کنید ، سپس مقدار شمارنده را برای هر عنصر <h1> افزایش دهید. ما همچنین شمارنده “(Chapter” (Chapter “را اضافه می کنیم که نام فصل را با شماره مربوطه قبل از هر عنوان نشان می دهد:

body {
    counter-reset: counter;
}

h1::before {
    counter-increment: chapter;
    content: "Chapter " counter(chapter) ": ";
}

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

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

در مثال زیر ، می توانید CSS را مشاهده کنید که اعداد را برای هر دو فصل و زیر فصل نشان می دهد:

body {
    counter-reset: chapter;
}

h1 {
    counter-reset: subchapter;
}

h1::before {
    counter-increment: chapter;
    content: "Chapter " counter(chapter) ". ";
}

h2::before {
    counter-increment: subchapter;
    content: counter(chapter) "." counter(subchapter) " ";
}

شمارنده فصل مقادیر فعلی فصل را در هر عنوان سطح اول جداگانه افزایش می دهد و نمایش می دهد. در همین حال ، شمارنده زیر فصل برای هر عنوان سطح دوم با مقدار مقابله فصل فعلی و مقدار مقابله با زیر فصل فعلی با یک دوره (.) بین آن ها افزایش می یابد.

لیست های مشخص شده

شمارنده ها نیز برای ایجاد لیست های مشخص شده مفید هستند. در HTML ، بعد از اینکه به سطح بالاتری رسیدید ، نمی توانید به سطح قبلی لیست ادامه دهید. با این حال ، با شمارنده های CSS امکان پذیر است.

ما می خواهیم از تابع counters () برای قرار دادن یک رشته بین سطوح مختلف شمارنده های تو در تو استفاده کنیم:

ol {
    counter-reset: list;
    list-style-type: none;
}  	

li::before {
    counter-increment: list;
    content: counters(list, ".") " ";
}

نکات مهم شمارنده های CSS:

• هنگامی که به سادگی چیزی را لیست می کنید ، می توانید از لیست ساده HTML مرتب شده نیز استفاده کنید. این همچنین معنای معنایی یک لیست را منتقل می کند.
• با افزودن مقدار دوم به محتوا ، می توانید سبک شمارنده CSS را اصلاح کنید. نوع شماره گذاری (اعشاری ، اعشاری ، صفر ، رومی فوقانی ، رومی سفلی ، لاتین فوقانی ، لاتین پایین ، آلفای فوقانی ، آلفای پایین ، یونانی سفلی ، ارمنی یا گرجی) یا یک نشانگر دیگر تعریف کنید (دیسک ، دایره یا مربع).

پشتیبانی از مرورگر

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.