عدادات CSS
بيتزا
همبرغر
نقانق
عدادات 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,".") " ";
}
خصائص عداد CSS
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |
| counter() | Returns the current value of the named counter |