مُولِد عدادات CSS إنشاء عدادات CSS مخصصة لقوائم مرقمة بأساليب وتراكيب مختلفة.
مُولِد عدادات CSS
إنشاء عدادات CSS مخصصة لقوائم مرقمة بأساليب وتراكيب مختلفة.
إعداد العداد
حدد اسم العداد، النمط (عشري، روماني، أبجدي)، البادئة واللاحقة.
تمكين التضمين
يمكن تمكين عدادات متداخلة مع محارف فاصلة مخصصة بشكل اختياري.
نسخ CSS
معاينة قائمة المرقمة ونسخ CSS الكامل للعداد.
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
مُولِد الجداول باستخدام CSS
ابني جداول HTML ذات تصاميم جميلة مع ألوان قابلة للتخصيص والشرائط وتأثيرات التمرير.
🎨 CSS & Design
مُولِد مقياس الطباعة
إنشاء مقياس طباعي متجدد مع حجم أساسي قابل للتعديل ونسبة ووحدات.
🎨 CSS & Design
مُولِّد متغيرات CSS
إنشاء خصائص مخصصة لCSS (متغيرات) للألوان والتباعد والتخطيط.
🎨 CSS & Design
مُنشئ أنماط الطباعة
إنشاء أنماط طباعة @media مع خيارات لإخفاء العناصر وتحسين النص والتحكم في فترات الصفحة.
🎨 CSS & DesignFrequently Asked Questions
Q ما الفرق بين counter() وcounters()?
Q هل يمكنني استخدام عدادات CSS على أي عنصر؟
Q كيف أعادة ضبط العداد?
Q هل يمكنني البدء بالعد من رقم معين؟
Q هل عدادات CSS قابلة للوصول؟
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.