الفرق بين المراجعتين ل"CSS/counter-increment"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>counter-increment</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>counter-increment</code>}}</noinclude> | ||
| − | الخاصية <code>counter-increment</code> في CSS تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية <code>[[CSS/counter-reset|counter-reset]]</code>.<syntaxhighlight lang="css"> | + | الخاصية <code>counter-increment</code> في CSS تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية <code>[[CSS/counter-reset|counter-reset]]</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"> | ||
/* الزيادة بمقدار 1 */ | /* الزيادة بمقدار 1 */ | ||
counter-increment: my-counter; | counter-increment: my-counter; | ||
| سطر 19: | سطر 39: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== أمثلة == | == أمثلة == | ||
| − | القاعدة الآتية ستزيد من قيمة العداد <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> | ||
| + | |||
== دعم المتصفحات == | == دعم المتصفحات == | ||
{| class="wikitable" | {| class="wikitable" | ||
| سطر 61: | سطر 80: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>counter-increment</code> أحد الأشكال الآتية: | تقبل الخاصية <code>counter-increment</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>1</code>. | القيمة التي ستُضاف إلى العداد، والقيمة الافتراضية هي <code>1</code>. | ||
| − | === | + | === <code>none</code> === |
لا يجب زيادة أيّ عداد، وتُستخدَم هذه القيمة كقيمة افتراضية، أو لإلغاء زيادة أو إنقاص العدادات إذا كانت درجة تحديد القاعدة أكبر. | لا يجب زيادة أيّ عداد، وتُستخدَم هذه القيمة كقيمة افتراضية، أو لإلغاء زيادة أو إنقاص العدادات إذا كانت درجة تحديد القاعدة أكبر. | ||
| سطر 77: | سطر 96: | ||
counter-increment: [ <custom-ident> <integer>? ]+ | none | counter-increment: [ <custom-ident> <integer>? ]+ | none | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | |||
| + | == انظر أيضًا == | ||
| + | * صفحة الخاصية <code>[[CSS/counter-reset|counter-reset]]</code> التي تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-lists-3/#propdef-counter-increment CSS Lists and Counters Module Level 3]. | * مسودة [https://drafts.csswg.org/css-lists-3/#propdef-counter-increment CSS Lists and Counters Module Level 3]. | ||
* مواصفة [http://www.w3.org/TR/CSS2/generate.html#propdef-counter-increment CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/generate.html#propdef-counter-increment CSS Level 2 (Revision 1)]. | ||
| − | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Property]] | + | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS List]] | + | [[تصنيف:CSS List|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 07:36، 12 أغسطس 2018
الخاصية counter-increment في CSS تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية counter-reset.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | كل العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* الزيادة بمقدار 1 */
counter-increment: my-counter;
/* الإنقاص بمقدار 1 */
counter-increment: my-counter -1;
/* زيادة أحد العدادات بمقدار 1 وإنقاص الثاني بمقدار 4*/
counter-increment: counter1 counter2 -4;
/* عدم زيادة أو إنقاص أيّ عداد، وتُستخدَم لتجاوز القواعد التي لها أولوية أقل */
counter-increment: none;
/* القيم العامة */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;
أمثلة
القاعدة الآتية ستزيد من قيمة العداد 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 | 1.0 |
البنية العامة
تقبل الخاصية counter-increment أحد الأشكال الآتية:
<custom-ident>تُسمي العداد ويتبعها اختياريًا عدد صحيح<integer>، ويمكنك تحديد أي عدد تشاء من العدّادات لزيادة أو إنقاص قيمتها ويُفصَل بين كل زوجين من القيم بفراغ.- الكلمة المحجوزة
none.
<custom-ident>
اسم العدّاد الذي نريد زيادة أو إنقاص قيمته.
<integer>
القيمة التي ستُضاف إلى العداد، والقيمة الافتراضية هي 1.
none
لا يجب زيادة أيّ عداد، وتُستخدَم هذه القيمة كقيمة افتراضية، أو لإلغاء زيادة أو إنقاص العدادات إذا كانت درجة تحديد القاعدة أكبر.
البنية الرسمية
counter-increment: [ <custom-ident> <integer>? ]+ | none
انظر أيضًا
- صفحة الخاصية
counter-resetالتي تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة.
مصادر ومواصفات
- مسودة CSS Lists and Counters Module Level 3.
- مواصفة CSS Level 2 (Revision 1).