الفرق بين المراجعتين ل"CSS/counter-reset"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| (مراجعتان متوسطتان بواسطة نفس المستخدم غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>counter-reset</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>counter-reset</code>}}</noinclude> | ||
| − | الخاصية <code>counter-reset</code> في CSS تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة، بينما يمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية <code>[[CSS/counter-increment|counter-increment]]</code>.<syntaxhighlight lang="css"> | + | الخاصية <code>counter-reset</code> في CSS تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة، بينما يمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية <code>[[CSS/counter-increment|counter-increment]]</code>. |
| + | |||
| + | == بطاقة الخاصية == | ||
| + | {| class="wikitable" style="width: 100%;" | ||
| + | |- | ||
| + | ! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]] | ||
| + | |<code>none</code> | ||
| + | |- | ||
| + | ! scope="row" |تُطبَّق على | ||
| + | |كل العناصر. | ||
| + | |- | ||
| + | ! scope="row" |قابلة للوراثة | ||
| + | |لا | ||
| + | |- | ||
| + | !قابلة للتحريك | ||
| + | |لا | ||
| + | |- | ||
| + | ! scope="row" |القيمة المحسوبة | ||
| + | |كما حُدِّدَت. | ||
| + | |} | ||
| + | <syntaxhighlight lang="css"> | ||
/* ضبط قيمة العداد إلى 0 */ | /* ضبط قيمة العداد إلى 0 */ | ||
counter-reset: my-counter; | counter-reset: my-counter; | ||
| سطر 19: | سطر 39: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== أمثلة == | == أمثلة == | ||
| − | القاعدة الآتية | + | القاعدة الآتية ستعين قيمة العداد <code>my-counter</code> بمقدار <code>0</code>، ثم ستزيد من قيمة العداد <code>my-counter</code> بمقدار <code>1</code>. <syntaxhighlight lang="css"> |
| − | + | <h2>HTML Tutorial</h2> | |
| − | + | <h2>CSS Tutorial</h2> | |
| + | <h2>JavaScript Tutorial</h2> | ||
| + | <h2>Bootstrap Tutorial</h2> | ||
| + | <h2>SQL Tutorial</h2> | ||
| + | <h2>PHP Tutorial</h2> | ||
| + | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
| + | body { | ||
| + | /* Set "my-counter" to 0 */ | ||
| + | counter-reset: my-counter; | ||
| + | } | ||
| + | |||
| + | h2::before { | ||
| + | /* Increment "my-counter" by 1 */ | ||
| + | counter-increment: my-counter; | ||
| + | content: "Section " counter(my-counter) ". "; | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 61: | سطر 79: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>counter-reset</code> أحد الأشكال الآتية: | تقبل الخاصية <code>counter-reset</code> أحد الأشكال الآتية: | ||
| − | * | + | * <code>[[CSS/custom-ident|<custom-ident>]]</code> تُسمي العداد ويتبعها اختياريًا عدد صحيح <code>[[CSS/integer|<integer>]]</code>، ويمكنك تحديد أي عدد تشاء من العدّادات لإعادة ضبط قيمتها ويُفصَل بين كل زوجين من القيم بفراغ. |
* الكلمة المحجوزة <code>none</code>. | * الكلمة المحجوزة <code>none</code>. | ||
| − | === | + | === <code>[[CSS/custom-ident|<custom-ident>]]</code> === |
اسم العدّاد الذي نريد إعادة تعيين قيمته. | اسم العدّاد الذي نريد إعادة تعيين قيمته. | ||
| − | === | + | === <code>[[CSS/integer|<integer>]]</code> === |
القيمة التي سيُضبَط إليها العداد، والقيمة الافتراضية هي <code>0</code>. | القيمة التي سيُضبَط إليها العداد، والقيمة الافتراضية هي <code>0</code>. | ||
| − | === | + | === <code>none</code> === |
لا يجب إعادة تعيين أيّ عداد، وتُستخدَم هذه القيمة كقيمة افتراضية، أو لإلغاء إعادة تعيين قيمة العدادات إذا كانت درجة تحديد القاعدة أكبر. | لا يجب إعادة تعيين أيّ عداد، وتُستخدَم هذه القيمة كقيمة افتراضية، أو لإلغاء إعادة تعيين قيمة العدادات إذا كانت درجة تحديد القاعدة أكبر. | ||
| سطر 77: | سطر 95: | ||
counter-reset: [ <custom-ident> <integer>? ]+ | none | counter-reset: [ <custom-ident> <integer>? ]+ | none | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | * صفحة الخاصية <code>[[CSS/counter-increment|counter-increment]]</code> التي تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة. | ||
| + | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-lists-3/#counter-reset CSS Lists and Counters Module Level 3]. | * مسودة [https://drafts.csswg.org/css-lists-3/#counter-reset CSS Lists and Counters Module Level 3]. | ||
المراجعة الحالية بتاريخ 07:38، 12 أغسطس 2018
الخاصية counter-reset في CSS تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة، بينما يمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية counter-increment.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | كل العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* ضبط قيمة العداد إلى 0 */
counter-reset: my-counter;
/* ضبط قيمة العداد إلى -1 */
counter-reset: my-counter -1;
/* ضبط قيمة أوّل عداد إلى 1 وثاني عدّاد إلى 4 */
counter-reset: counter1 1 counter2 4;
/* إلغاء عملية إعادة التعيين، وتُستخدَم لتجاوز القواعد التي لها أولوية أقل */
counter-reset: none;
/* القيم العامة */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;
أمثلة
القاعدة الآتية ستعين قيمة العداد my-counter بمقدار 0، ثم ستزيد من قيمة العداد my-counter بمقدار 1.
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Bootstrap Tutorial</h2>
<h2>SQL Tutorial</h2>
<h2>PHP Tutorial</h2>
شيفرة CSS:
body {
/* Set "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* Increment "my-counter" by 1 */
counter-increment: my-counter;
content: "Section " counter(my-counter) ". ";
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 2.0 | 1.0 | 8.0 | 9.2 | 3.1 |
البنية العامة
تقبل الخاصية counter-reset أحد الأشكال الآتية:
<custom-ident>تُسمي العداد ويتبعها اختياريًا عدد صحيح<integer>، ويمكنك تحديد أي عدد تشاء من العدّادات لإعادة ضبط قيمتها ويُفصَل بين كل زوجين من القيم بفراغ.- الكلمة المحجوزة
none.
<custom-ident>
اسم العدّاد الذي نريد إعادة تعيين قيمته.
<integer>
القيمة التي سيُضبَط إليها العداد، والقيمة الافتراضية هي 0.
none
لا يجب إعادة تعيين أيّ عداد، وتُستخدَم هذه القيمة كقيمة افتراضية، أو لإلغاء إعادة تعيين قيمة العدادات إذا كانت درجة تحديد القاعدة أكبر.
البنية الرسمية
counter-reset: [ <custom-ident> <integer>? ]+ | none
انظر أيضًا
- صفحة الخاصية
counter-incrementالتي تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة.
مصادر ومواصفات
- مسودة CSS Lists and Counters Module Level 3.
- مواصفة CSS Level 2 (Revision 1).