8.3 KiB
title | localeTitle |
---|---|
Styling Lists | قوائم التصميم |
قوائم التصميم
HTML قوائم Recap
هناك نوعان رئيسيان من القوائم في HTML - مرتبة وغير مرتبة .
في القوائم المرتبة ( <ol></ol>
) ، يكون ترتيب عناصر القائمة مهمًا. قد تظهر العناصر بالترتيب حسب الرقم ، أو الأرقام الرومانية ، أو الأرقام ألفا ، أو أي نوع آخر من العلامات. العلامة الافتراضية للقوائم المرتبة هي رقم (أو decimal
):
في قوائم غير مرتبة ( <ul></ul>
) ، لا يهم ترتيب عناصر القائمة. تظهر العناصر بتنسيق التعداد النقطي. علامة الافتراضي للقوائم غير مرتبة هي النقطة مستديرة أو disc
.
يتم إنشاء كل عنصر قائمة ضمن قائمة مرتبة أو غير مرتبة بالعلامة <li></li>
.
أنماط قائمة محددة
هناك ثلاث خصائص شائعة خاصة بقوائم التصميم: list-style-type
list-style-position
list-style-image
. هناك أيضا خاصية الاختزال التي تشمل كل ثلاثة.
list-style-type
يمكن وضع العلامات (أو النقاط) التي تظهر في قوائم مرتبة وغير مرتبة بالعديد من الطرق. خاصية CSS لتصميم نوع العلامة هي نوع list-style-type
. القيمة الافتراضية list-style-type
مرتبة هي decimal
، بينما يكون الإعداد الافتراضي لقائمة غير مرتبة هو disc
.
مثال القائمة المطلوبة:
/* css */ ol { list-style-type: upper-roman; }
مثال قائمة غير مرتبة:
/* css */ ul { list-style-type: square; }
لا يوجد مثال للعلامات:
/* css */ ul { list-style-type: none; }
تتضمن القيم المقبولة لخاصية list-style-type
ما يلي:
غير مرتبة:
- قرص ( افتراضي )
- دائرة
- ميدان
أمر:
- عشري ( افتراضي )
- العشري الرائدة الصفر
- المنخفض الرومانية
- العلوي الرومانية
- المنخفض اليونانية
- أقل-اللاتينية
- العلوي اللاتينية
- الأرميني
- الجورجية
- انخفاض ألفا
- العلوي ألفا
آخر:
- لا شيء
ملاحظة: يمكن استخدام جميع قيم الخصائص المذكورة أعلاه لتصميم كل من القوائم المرتبة وغير المرتبة (مثل: قائمة مرتبة بها علامات قائمة square
).
list-style-position
يتحكم في list-style-position
ما إذا كانت علامة القائمة تظهر داخل أو خارج كل عنصر عنصر قائمة ( <li></li>
). تقبل الخاصية قيمتين ، outside
(افتراضي) أو inside
.
ضع العلامة outside
عنصر عنصر القائمة ، وستتم محاذاة جميع الأسطر والنصوص الفرعية لكل عنصر قائمة رأسيًا:
/* css */ ul { list-style-position: outside; /* default */ }
ضع العلامة inside
، وسيتم وضع مسافة بادئة للسطر الأول من كل عنصر قائمة لإفساح المجال للعلامة. سيتم محاذاة أي خطوط فرعية من نفس عنصر القائمة مع العلامة بدلاً من السطر الأول:
/* css */ ul { list-style-position: inside; }
list-style-image
تقبل خاصية list-style-image
عنوان url للصورة بدلاً من علامة القائمة. القيمة الافتراضية لهذه الخاصية هي none
.
/* css */ ul { list-style-image: url(https://url-to-image); }
list-style
الاختزال
list-style
هو خاصية اختزال لخصائص النمط الثلاثة المذكورة أعلاه. إن ترتيب قيم list-style
يقبل هو list-style-type
list-style-position
list-style-image
. إذا تم حذف أي قيمة ، فسيتم استخدام القيمة الافتراضية لهذه الخاصية.
مثال:
/* css */ ul { list-style: circle inside none; }
مزيد من التصميم المحدد قائمة
تقبل علامات القوائم المرتبة أيضًا السمات التي تتحكم في التدفق أو العد أو قيم محدد لعناصر القائمة الخاصة بها. وتشمل هذه سمات start
، reversed
، value
. راجع موارد MDN المدرجة أدناه لمزيد من التفاصيل.
التصميم العام
يمكن تصميم محتوى القائمة تمامًا مثل عناصر p
أو div
الأخرى. color
، font-family
، margin
، padding
، أو border
ليست سوى أمثلة قليلة من الخصائص التي يمكن أن تضاف إلى أي من ul
، ol
، أو li
العناصر.
لاحظ أن أي أنماط مضافة إلى عنصر ul
أو ol
ستؤثر على القائمة بأكملها. الأنماط المضافة مباشرة إلى عناصر li
ستؤثر على عناصر القائمة الفردية. في المثال أدناه ، تم تصميم خصائص الحدود ولون الخلفية بشكل مختلف بين عناصر القائمة والقائمة عنصر:
/* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }
قائمة التباعد
قد تلاحظ تباعد إضافي أمام عناصر list-style-type
عند تعيين list-style-type
على none
. سيؤدي تعيين padding
إلى 0
(أو أي فراغ مفضل) في عنصر القائمة إلى إلغاء هذا الحشو الافتراضي.
/* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }
مصادر:
تمت الإشارة إليها الارتباطات أدناه في ترجمة المعلومات الموجودة في هذه المقالة. يرجى زيارتهم لمزيد من التفاصيل حول هذا الموضوع.