Skip to main content

مُولِد عدادات CSS إنشاء عدادات CSS مخصصة لقوائم مرقمة بأساليب وتراكيب مختلفة.

مُولِد عدادات CSS illustration
🎨

مُولِد عدادات CSS

إنشاء عدادات CSS مخصصة لقوائم مرقمة بأساليب وتراكيب مختلفة.

1

إعداد العداد

حدد اسم العداد، النمط (عشري، روماني، أبجدي)، البادئة واللاحقة.

2

تمكين التضمين

يمكن تمكين عدادات متداخلة مع محارف فاصلة مخصصة بشكل اختياري.

3

نسخ CSS

معاينة قائمة المرقمة ونسخ CSS الكامل للعداد.

Loading tool...

What Is مُولِد عدادات CSS?

مُولِّد عدادات CSS يخلق قوائم مرقمة مخصصة باستخدام خصائص counter-reset و counter-increment و content في CSS. توفر عدادات CSS مرونة أكبر من ترقيم القائمة القياسي باستخدام علامة <ol>، حيث تدعم أنماط رقمية متعددة وأحرف بادئة ونهاية مخصصة وترقيمًا متداخلًا وتشكيلًا مستقلًا عن نوع نمط القائمة. يسمح لك هذا الأداة بتهيئة اسم العداد، واختيار أحد عشر نمطًا للترقيم (عشري، عشري مع صفر مقدم، أبجدي صغير/كبير، روماني صغير/كبير، يوناني، وغيرها)، وتعيين نص بادئة ونهاية مخصص،以及 تمكين العدادات المتداخلة بشكل اختياري مع فاصل قابل للتهيئة. يُظهر المعاينة العداد المطبق على قائمة نموذجية بمحتوى واقعي، ويحتوي CSS الناتج على جميع خصائص العداد الضرورية.

Why Use مُولِد عدادات CSS?

  • عشرة أنماط ترقيم بما في ذلك العشري والروماني والأبجدي
  • نص بادئة ولاحقة مخصص قابل للتخصيص حول قيم العداد
  • دعم عدادات متداخلة مع فاصل可 تعديل
  • معاينة بمحتوى قائمة واقعي

Common Use Cases

الوثائق القانونية

إنشاء أقسام مرقمة متداخلة (1.1، 1.2، 2.1) للوثائق القانونية والفنية.

دلائل الخطوة بخطوة

بناء خطوات مرقمة مخصصة مع عدادات مصممة لتعليمات البرامج.

جدول المحتويات

توليد ترقيم هرمي لجدول محتويات الوثائق.

قوائم المرتبة المخصصة

استبدال ترقيم القائمة الافتراضي بعدادات مخصصة مصممة.

Technical Guide

تستخدم عدادات CSS ثلاثة خصائص رئيسية: counter-reset لتهيئة العداد في عنصر أب، وcounter-increment لزيادة العداد في العناصر الفرعية، وcounter() أو counters() في خاصية المحتوى لعرض القيمة. خاصية counter-reset تخلق مثيلًا جديدًا للعداد: counter-reset: section. خاصية counter-increment تزيد من قيمته: counter-increment: section. خاصية المحتوى على عنصر ::before الزائف تعرض العداد: content: counter(section). وظيفة counter() تقبل حجة نمط اختيارية: counter(section, upper-roman).对于 العدادات المتداخلة، كل مستوى يعادة ضبط عادده الفرعي. وظيفة counters() (لاحظ حرف 's') تتعامل مع نطاقات متداخلة: counters(section, ".") تنتج تنسيق "1.2.3". تشمل أنماط القائمة المتاحة decimal، decimal-leading-zero، lower-alpha، upper-alpha، lower-roman، upper-roman، lower-greek، وغيرها. يمكن تعريف عدادات متعددة واستخدامها بشكل مستقل.

Tips & Best Practices

  • 1
    استخدام counter-reset على عنصر الأب، counter-increment على العناصر الفرعية
  • 2
    استخدام counters() مع فاصل لترقيم متداخل مثل 1.1.1
  • 3
    نص البادئة واللاحقة المخصص يجعل العدادات مناسبة للوثائق القانونية
  • 4
    عدادات CSS تعمل مع أي عنصر، وليس فقط القوائم

Related Tools

Frequently Asked Questions

Q ما الفرق بين counter() وcounters()?
counter() يعرض قيمة عداد واحدة. counters() يعرض قيم عدادات متداخلة مع سلسلة فاصل.
Q هل يمكنني استخدام عدادات CSS على أي عنصر؟
نعم، عدادات CSS تعمل على أي عنصر، وليس فقط عناصر <ol> أو <li>.
Q كيف أعادة ضبط العداد?
تطبيق counter-reset على عنصر الأب. يبدأ العداد من 0 (الزيادة الأولى تجعله 1).
Q هل يمكنني البدء بالعد من رقم معين؟
نعم، استخدم counter-reset: section 5 لبدء من 5 (العرض الأول سيكون 6).
Q هل عدادات CSS قابلة للوصول؟
عدادات CSS في ::before المحتوى تقرأها معظم برامج قراءة الشاشة ولكن قد لا تكون متسقة. استخدم قوائم HTML الدلالية عند الإمكان.

About This Tool

مُولِد عدادات CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.