٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش شمارنده های CSS

شمارنده های CSS “متغیرهایی” هستند که توسط CSS نگهداری می شوند و مقادیر آنها را می توان با قوانین CSS افزایش داد (برای پیگیری چند بار استفاده از آنها). شمارنده ها به شما امکان می دهند شکل ظاهری محتوا را بر…

محمد یوسفی

12 جولای 2021

شمارنده های CSS “متغیرهایی” هستند که توسط CSS نگهداری می شوند و مقادیر آنها را می توان با قوانین CSS افزایش داد (برای پیگیری چند بار استفاده از آنها). شمارنده ها به شما امکان می دهند شکل ظاهری محتوا را بر اساس قرارگیری آن در سند تنظیم کنید.


شماره گذاری خودکار با شمارنده ها

شمارنده های CSS مانند “متغیرها” هستند. مقادیر متغیر را می توان با قوانین CSS افزایش داد (که تعداد دفعات استفاده را ردیابی می کند).

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

  • counter-reset – پیشخوان ایجاد یا بازنشانی می کند
  • counter-increment – مقدار مقابله ای را افزایش می دهد
  • content – محتوای تولید شده را درج می کند
  • counter()یا counters()تابع – مقدار شمارنده را به یک عنصر اضافه می کند

برای استفاده از شمارنده CSS ، ابتدا باید با آن ایجاد شود counter-reset.

مثال زیر یک شمارنده برای صفحه ایجاد می کند (در انتخابگر بدنه) ، سپس مقدار شمارنده را برای هر عنصر <h2> افزایش می دهد و “بخش < مقدار شمارنده >:” را به ابتدای هر عنصر <h2> اضافه می کند:

مثال

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

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

مثال زیر یک شمارنده برای صفحه (بخش) و یک شمارنده برای هر عنصر <h1> (بخش) ایجاد می کند. شمارنده “بخش” برای هر عنصر <h1> با “بخش < مقدار شمارنده بخش >.” و شمارنده “زیر بخش” برای هر عنصر <h2> با “< مقدار شمارنده بخش شمارش می شود >. < مقدار پیشخوان فرعی > “:

مثال

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

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

مثال

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

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها