الفرق بين المراجعتين ل"CSS/list-style-type"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-type</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-type</code>}}</noinclude> | ||
− | الخاصية <code>list-style-type</code> في CSS تُحدِّد شكل الإشارة إلى عناصر القائمة.<syntaxhighlight lang="css"> | + | الخاصية <code>list-style-type</code> في CSS تُحدِّد شكل الإشارة إلى عناصر القائمة. |
+ | |||
+ | == بطاقة الخاصية == | ||
+ | {| class="wikitable" style="width: 100%;" | ||
+ | |- | ||
+ | ! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]] | ||
+ | |<code>disc</code> | ||
+ | |- | ||
+ | ! scope="row" |تُطبَّق على | ||
+ | |عناصر القوائم. | ||
+ | |- | ||
+ | ! scope="row" |قابلة للوراثة | ||
+ | |نعم | ||
+ | |- | ||
+ | !قابلة للتحريك | ||
+ | |لا | ||
+ | |- | ||
+ | ! scope="row" |القيمة المحسوبة | ||
+ | |كما حُدِّدَت. | ||
+ | |||
+ | |} | ||
+ | <syntaxhighlight lang="css"> | ||
/* قائمة مختصرة بأنواع الأشكال */ | /* قائمة مختصرة بأنواع الأشكال */ | ||
list-style-type: disc; | list-style-type: disc; | ||
سطر 21: | سطر 42: | ||
list-style-type: unset; | list-style-type: unset; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية <code>[[CSS/display|display]]</code> فيها تساوي <code>list-item</code>، وهذا يتضمن العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> أو <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله. | ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية <code>[[CSS/display|display]]</code> فيها تساوي <code>list-item</code>، وهذا يتضمن العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> أو <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله. | ||
سطر 106: | سطر 109: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>list-style-type</code> القيم التالية. | تقبل الخاصية <code>list-style-type</code> القيم التالية. | ||
− | === | + | === <code>none</code> === |
تشير هذه القيمة إلى أنَّنا لا نريد استعمال رمز للإشارة إلى عناصر القائمة. | تشير هذه القيمة إلى أنَّنا لا نريد استعمال رمز للإشارة إلى عناصر القائمة. | ||
− | === | + | === <code>[[CSS/string|<string>]]</code> === |
ستُستخدَم السلسلة النصية المُحدَّدة للإشارة إلى عناصر القائمة. | ستُستخدَم السلسلة النصية المُحدَّدة للإشارة إلى عناصر القائمة. | ||
− | === | + | === <code>[[CSS/custom-ident|<custom-ident>]]</code> === |
مُعرِّف يطابق اسم قاعدة <code>[[CSS/@counter-style|@counter-style]]</code> أو نمط مُعرَّف مسبقًا. | مُعرِّف يطابق اسم قاعدة <code>[[CSS/@counter-style|@counter-style]]</code> أو نمط مُعرَّف مسبقًا. | ||
مراجعة 08:20، 29 يوليو 2018
الخاصية list-style-type
في CSS تُحدِّد شكل الإشارة إلى عناصر القائمة.
بطاقة الخاصية
القيمة الابتدائية | disc
|
---|---|
تُطبَّق على | عناصر القوائم. |
قابلة للوراثة | نعم |
قابلة للتحريك | لا |
القيمة المحسوبة | كما حُدِّدَت. |
/* قائمة مختصرة بأنواع الأشكال */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: arabic-indic;
/* <string> */
list-style-type: '-';
/* @counter-style rule */
list-style-type: custom-counter-style;
list-style-type: none;
/* القيم العامة */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;
ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية display
فيها تساوي list-item
، وهذا يتضمن العنصر <li>
افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <ol>
أو <ul>
) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله.
ملاحظة: لون الإشارة يماثل لون العنصر المضبوط عبر الخاصية color
.
أمثلة
مثال عن قوائم غير مرتبة <ul>
ضبطنا لها مختلف القيم:
<code>list-style-type: disc;</code>
<ul class="disc">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<code>list-style-type: circle;</code>
<ul class="circle">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<code>list-style-type: square;</code>
<ul class="square">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<code>list-style-type: upper-alpha;</code>
<ul class="upper-alpha">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<code>list-style-type: arabic-indic;</code>
<ul class="arabic-indic">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
شيفرة CSS:
.disc { list-style-type: disc; }
.circle { list-style-type: circle; }
.square { list-style-type: square; }
.upper-alpha { list-style-type: upper-alpha; }
.arabic-indic { list-style-type: arabic-indic; }
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 1.0 | 1.0 | 4.0 | 3.5 | 1.0 |
الدعم الأساسي يتضمن القيم none
و disc
و circle
و square
و decimal
و lower-alpha
و upper-alpha
و lower-roman
و upper-roman
، أما بقية القيم فهي إما مدعومة في بعض المتصفحات أو أنَّ دعمها قليل.
البنية العامة
تقبل الخاصية list-style-type
القيم التالية.
none
تشير هذه القيمة إلى أنَّنا لا نريد استعمال رمز للإشارة إلى عناصر القائمة.
<string>
ستُستخدَم السلسلة النصية المُحدَّدة للإشارة إلى عناصر القائمة.
<custom-ident>
مُعرِّف يطابق اسم قاعدة @counter-style
أو نمط مُعرَّف مسبقًا.
هذه بعض الأنماط المُعرَّفة:
disc
: دائرة مليئة • (القيمة الافتراضية).circle
: دائرة مُفرّغة ◦ .square
: مربع ◾ .decimal
: أرقام، ويبدأ العد من 1.lower-roman
: أرقام رومانية بالحالة الصغيرة.upper-roman
: أرقام رومانية بالحالة الكبيرة.lower-alpha
: الأحرف اللاتينية بالحالة الصغيرة.upper-alpha
: الأحرف اللاتينية بالحالة الكبيرة.arabic-indic
: الأرقام العربية المشرقية (١ ٢ ٣ ٤).
البنية الرسمية
list-style-image: <counter-style> | <string> | none;
حيث:
<counter-style> = <custom-ident> | symbols()
مصادر ومواصفات
- مواصفة CSS Counter Styles Level 3.
- مسودة CSS Lists and Counters Module Level 3.
- مواصفة CSS Level 2 (Revision 1).