CSS Academy · درس

عدادات CSS باستخدام ::before

أنشئ أنظمة ترقيم تلقائية باستخدام عدادات CSS والدالة counter()

عدادات CSS باستخدام ::before درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما عدّادات CSS؟

عدّادات CSS هي متغيرات تديرها CSS، ويمكن زيادة قيمها وعرضها في المحتوى المُنشأ. وهي تتيح الترقيم التلقائي دون JavaScript أو إدارة الأرقام يدويًا في HTML.

counter-reset

تعمل counter-reset على تهيئة عدّاد أو إعادة ضبطه. ضعوها على العنصر الذي يحتوي على العناصر المطلوب عدّها.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

counter-increment

تزيد counter-increment قيمة العدّاد بمقدار 1 (افتراضيًا) في كل مرة تُطبّق فيها. ضعوها على العناصر المتكررة.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

دالة counter() في content

اعرضوا قيمة العدّاد الحالية باستخدام counter(name) في الخاصية content لعنصر زائف.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

عدّاد خطوات منسّق

مكوّن كامل للخطوات المرقّمة دون JavaScript:

<div class="steps">
  <div class="step">Create an account</div>
  <div class="step">Verify your email</div>
  <div class="step">Start your first project</div>
</div>

القيمة الابتدائية للعدّاد

اضبطوا رقم البداية المخصص في counter-reset:

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

أنماط العدّاد

استخدموا وسيطًا ثانيًا مع counter() لتحديد نوع نمط القائمة:

<ul class="list" style="list-style:none;padding-left:0;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

العدّادات المتداخلة باستخدام counters()

تنشئ counters(name, separator) (بحرف "s") ترقيمًا متداخلًا مثل "1.1" و"1.2" و"2.1":

<ol>
  <li>Chapter one
    <ol>
      <li>Intro</li>
      <li>Details</li>
    </ol>
  </li>
  <li>Chapter two
    <ol>
      <li>Overview</li>
    </ol>
  </li>
</ol>

إعادة الضبط في القوائم المتداخلة

ترث كل قائمة ol متداخلة نطاق العدّاد. وتستخدم الدالة counters() سلسلة العدّادات الكاملة تلقائيًا.

ترقيم الأقسام

رقّموا العناوين تلقائيًا في المستندات الطويلة:

<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>

جدول المحتويات باستخدام العدّادات

استُخدمت عدّادات CSS تاريخيًا لإنشاء جداول المحتويات والمستندات المنسّقة. أما اليوم، فغالبًا ما تتولى أطر JavaScript هذه المهمة، لكن تظل عدّادات CSS خيارًا يعتمد على CSS فقط.

تحقق سريع

ما الخاصية التي تزيد عدّاد CSS في كل عنصر مطابق؟

مراجعة

تتيح عدّادات CSS الترقيم التلقائي دون JavaScript. استخدموا counter-reset على الحاوية، وcounter-increment على العناصر المتكررة، واعرضوا القيمة باستخدام counter(name) في الخاصية content لعنصر زائف. وتتولى counters() معالجة الترقيم المتداخل باستخدام الفواصل.

الأسئلة الشائعة

هل درس «عدادات CSS باستخدام ::before» مجاني؟

نعم — نص درس «عدادات CSS باستخدام ::before» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «عدادات CSS باستخدام ::before»؟

أنشئ أنظمة ترقيم تلقائية باستخدام عدادات CSS والدالة counter() تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «عدادات CSS باستخدام ::before»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy