English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS counter العدادات تشبه المتغيرات. يتم حفظها بواسطة CSS، ويمكن زيادة هذه القيم من خلال قواعد CSS لتتبع استخدامها. الهدف الرئيسي منها هو حساب استخدام العناصر المختلفة بناءً على القواعد المحددة.
CSS counter العدادات تساعد في إنشاء الأرقام بسهولة باستخدام CSS لعرض المحتوى.
إليك قائمة بالخصائص المستخدمة مع معادلة CSS:
counter-reset:لإنشاء أو إعادة تعيين المعادلة.
counter-increment:لزيادة قيمة المعادلة.
content:لإدراج المحتوى المولد.
وظيفة counter() أو counters():لإضافة قيمة المعادلة إلى العنصر.
لنأخذ مثالاً، لننشئ معادلة للصفحة ونزيد قيمة المعادلة لكل عنصر التالي.
يرجى الرجوع إلى المثال التالي:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>مثال على معادلة CSS Counters:</h1>
<h2>تعليم Java</h2>
<h2>تعليم HTML</h2>
<h2>تعليم CSS</h2>
<h2>تعليم Oracle</h2>
<p><strong>ملاحظة:</strong> يجب إعلان!DOCTYPE في متصفح IE8.</p>
</body>
</html>اختبار النظر في‹/›يمكنك أيضًا إنشاء مسبق في معادلة. هذا يُدعى بالتجميع المدمج. دعونا نوضح ذلك باستخدام مثال.
يرجى الرجوع إلى المثال التالي:
<!DOCTYPE html>
<html>
<head>
<style>
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) " ";
}
</style>
</head>
<body>
<h1>تعليمات Java:</h1>
<h2>تعليم Core Java</h2>
<h2>تعليم Servlet</h2>
<h2>تعليم JSP</h2>
<h2>تعليم Spring</h2>
<h2>تعليم Hibernate</h2>
<h1>دروس تقنيات الويب:</h1>
<h2>دليل HTML
<h2>دليل CSS
<h2>دليل jQuery
<h2>دليل Bootstrap
<h1>دروس قواعد البيانات:</h1>
<h2>دليل SQL
<h2>دليل MySQL
<h2>دليل PL/SQL
<h2>دليل Oracle
<p><strong>ملاحظة:</strong> لا يدعم إي 8 هذه الخاصيات إلا إذا تم تحديد !DOCTYPE.</p>
</body>
</html>اختبار النظر في‹/›ملاحظة:في المثال أعلاه، يمكنك رؤية أن هناك محايداً تم إنشاؤه لهذا الفصل، وقد تم إنشاء محايد آخر يُدعى subsection كمحايد مضمن.
يمكنك استخدام محايدات مضمنة لإنشاء قوائم مظللة. هذا يساعدك في إدراج كلمات بين مستويات المحايدات المختلفة.
يرجى الرجوع إلى المثال التالي:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<h2>عدد المستويات المختلفة من المحايدات</h2>
<ol>
<li>عنصر
<li>عنصر
<ol>
<li>عنصر
<li>عنصر
<li>عنصر
<ol>
<li>عنصر
<li>عنصر
<li>عنصر
</ol>
</li>
<li>عنصر
</ol>
</li>
<li>عنصر
<li>عنصر
</ol>
<p><strong>ملاحظة:</strong> لا يدعم إي 8 هذه الخاصيات إلا إذا تم تحديد !DOCTYPE.</p>
</body>
</html>اختبار النظر في‹/›