من السهل جدًا استخدام العناصر الزائفة في CSS، ولكن غالبًا ما يتجاهلها الجميع. قد يعتقد الكثير من الأشخاص الآن أن قيمة سمة المحتوى المستخدمة بشكل شائع في العناصر الزائفة تدعم السلاسل فقط سمات المحتوى الأخرى الشائعة الاستخدام هي أيضًا uri وcounter.
تشبه العدادات في CSS المتغيرات، حيث يمكنها تنفيذ وظائف عد بسيطة وعرض النتائج على الصفحة، وقد تم استخدامها على نطاق واسع في مواقع الويب المبكرة. لتنفيذ العداد، تحتاج إلى استخدام السمات التالية:
دعونا نلقي نظرة على كيفية استخدام العدادات في CSS.
1. استخدم العدادات للترقيم التلقائي
يقوم CSS بعداد المتغيرات المتزايدة وفقًا للقواعد.
تستخدم عدادات CSS الخصائص التالية:
(1) إعادة تعيين العداد: يقوم name1 name2 بإنشاء عداد أو إعادة تعيينه (يمكن تعريف عدادات متعددة في نفس الوقت، مفصولة بمسافات)
(2) الزيادة المضادة: متغير زيادة خطوة الاسم (يمكن زيادة واحدة أو أكثر)
(3) المحتوى: يقوم العداد (الاسم) بإدراج المحتوى الذي تم إنشاؤه (باستخدام عناصر زائفة قبل/بعد)
(4) تقوم الدالة counter() أو counters() بإضافة قيمة العداد إلى العنصر
عند إنشاء عداد، يجب أن يتم إنشاؤه في العلامة السابقة أو العلامة الأصلية للعلامة، وإذا تم تعريفه في العلامة الخاصة به، فسيكون غير صالح.
تطبيقات محددة:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>برمجة Dotcpp</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: قبل{/*قم بتعيين حجم الخطوة أولاً*/counter-increment:counter11;content:'th'counter(count er1)'section';}p::before{/*قم بتعيين حجم الخطوة أولاً*/counter-increment:counter21;content:'قسم 'counter(counter1)';}</style></he إعلان><body><div><h2></h2><p></p><p></p><p></p><h2></h2><p></p> <p></p><p></p><p></p></div></body></html>نتائج التشغيل:
2. تهيئة العداد
لاستخدام عداد، تحتاج أولاً إلى استخدام سمة إعادة تعيين العداد لإنشاء عداد. تنسيق بناء الجملة لسمة إعادة تعيين العداد هو كما يلي:
إعادة تعيين العداد: لا شيء|[<المعرف><عدد صحيح>]
وصف المعلمة كما يلي:
(1) لا شيء: منع إعادة ضبط العداد؛
(2) <identifier>: تحديد اسم العداد؛
(3) <عدد صحيح>: تحديد قيمة البداية للعداد، القيمة الافتراضية هي 0 ويمكن أن تكون قيمة سالبة.
3. العداد يزيد تلقائيا
بعد تهيئة العداد، يمكنك استخدام خاصية counter-increment لتحديد متى سيزيد العداد، وتكون الصيغة كما يلي:
الزيادة المضادة: لا شيء|[<المعرف><عدد صحيح>]
وصف المعلمة كما يلي:
(١) لا شيء: منع العداد من الزيادة؛
(2) <identifier>: تحديد اسم العداد المراد زيادته؛
(3) <عدد صحيح>: حدد القيمة التي يزيدها العداد في كل مرة. القيمة الافتراضية هي 1 ويمكن أن تكون قيمة سالبة.
4. عرض العداد
وأخيرا، هناك كيفية عرض العداد. لعرض عداد، يمكنك استخدام الدالة counter() أو counters()، ويكون بناء جملة هاتين الوظيفتين كما يلي:
العداد (الاسم) العدادات (الاسم، السلسلة، نوع نمط القائمة)
وصف المعلمة كما يلي:
(١) الاسم: اسم العداد؛
(2) سلسلة: سلسلة تستخدم للربط عند استخدام العدادات المتداخلة؛
(3) نوع نمط القائمة: يمكن أن يكون النمط الذي يعرضه العداد أي قيمة من "سمة نوع نمط القائمة" المسموح بها في CSS.
يستخدم ما يلي مثالا بسيطا لتوضيح استخدام العدادات:
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increment:chapter;}h6{counter- الزيادة:القسم؛}h5:قبل{المحتوى:Chaptercounter(الفصل).; }h6:before{content:counter(chapter).counter(section);</style></head><body><h5>الفصل 1</h5><h6>القسم 1</h6>< h6> لا. القسم 2</h6><h6>القسم 3</h6><h6>القسم 4</h6><h5>الفصل 2</h5><h6>القسم 1</h6><h6>الفصل القسم 2</ h6><h6>القسم 3</h6><h6>القسم 4</h6></body></html>نتائج التشغيل:
5. التعشيش المضاد
بالإضافة إلى ذلك، يمكن أيضًا أن تكون العدادات متداخلة، ويمكن استخدام الدالة counters() لإدراج سلسلة بين العدادات المتداخلة عند مستويات مختلفة، كما هو موضح في المثال التالي:
<!DOCTYPEhtml><html><head><style>ol{/*إنشاء مثيل مضاد جديد لكل عنصر ol*/counter-reset:ol-list;list-style-type:none;}li:before{ / *زيادة المثيل الحالي للعداد فقط*/counter-increment:ol-list;/*زيادة القيم المفصولة بـ "." لجميع مثيلات العداد*/content:counters(ol-list,.),;} < /style></head><body><ol><li>المجلد</li><li>الفصل<ol><li>القسم</li><li>القسم</li><li>القسم<ol ><li>القسم</li><li>القسم</li></ol></l i><li>القسم<ol><li>القسم الفرعي</li><li>القسم الفرعي</li><li>القسم الفرعي</li></ol></li></ol></li>< li>الفصل</li><li>الفصل</li></ol></body></html>نتائج التشغيل:
