CSSقوائم التعداد
- مفهوم قوائم التعداد
- تحديد نوع الترقيم و التنقيط
- عرض صورة في بداية كل عنصر
- تحديد مكان محددات العناصر
- تعديل تصميم القائمة و العناصر
- عرض أيقونة في بداية العنصر
مفهوم قوائم التعداد
قوائم التعداد نوعان، قوائم مرتبة ( Order Lists ) يبدأ فيها كل عنصر برقم يدل على موقعه فيها أو قوائم غير مرتبة ( Unordered Lists ) حيث يكون هناك دائرة، مربع، رمز مخصص أو صورة في بداية كل عنصر.
الرقم أو الرمز الذي يظهر في بداية العنصر يسمى مُحدّد العنصر ( Item marker ) مهما كان شكله أو نوعه.
Ordered List
- Web Design
- Front End
- Back End
- Web Design
- Front End
- Back End
Unordered List
- Web Design
- Front End
- Back End
- Web Design
- Front End
- Back End
في هذا الدرس ستتعلم كيف تحدد نوع التنقيط و الترقيم، كيف تعرض صورة بدل التنقيط، كيف تحدد ما إن كان التنقيط أو الترقيم سيظهر بداخل أو خارج القائمة.
تحديد نوع الترقيم و التنقيط
يمكنك تحديد نوع الترقيم الذي سيظهر في القائمة التي تحصل عليها بواسطة الوسم <ol> باستخدام الخاصية list-style-type و تمرير إحدى القيم التالية لها.
| القيمة | معناها |
|---|---|
| arabic-indic | لإظهار ترقيم عربي. |
| decimal | لإظهار ترقيم إنجليزي. |
| decimal-leading-zero | لإظهار ترقيم إنجليزي مع إظهار صفر إضافي ناحية اليسار إذا كان الرقم بين 0 و 9. |
| lower-alpha | لإظهار ترقيم على شكل أحرف إنجليزية صغيرة الحجم. |
| upper-alpha | لإظهار ترقيم على شكل أحرف إنجليزية كبيرة الحجم. |
| lower-roman | لإظهار ترقيم على شكل أحرف رومانية صغيرة الحجم. |
| upper-roman | لإظهار ترقيم على شكل أحرف رومانية كبيرة الحجم. |
| hebrew | لإظهار ترقيم عبري. |
في المثال التالي قمنا بتجربة أنواع الترقيم المختلفة.
مثال
يمكنك تحديد نوع التنقيط الذي سيظهر في القائمة التي تحصل عليها بواسطة الوسم <ul> باستخدام الخاصية list-style-type أيضاً و تمرير إحدى القيم التالية لها.
| القيمة | معناها |
|---|---|
| disc | لإظهار دائرة. |
| circle | لإظهار دائرة فارغة. |
| square | لإظهار مربع. |
في المثال التالي قمنا بتجربة أنواع التنقيط المختلفة.
مثال
سواء كنت تستخدم قائمة نوعها <ol> أو <ul> يمكنك تمرير القيم التالية للخاصية list-style-type أيضاً.
| القيمة | معناها |
|---|---|
| none | لإظهار العناصر بدون ترقيم. |
| inherit | لجعل العنصر يرث خاصية الترقيم المعتمد في القائمة الأب. |
| 'string' | مكان الكلمة string يمكن تمرير أي نصف، رمز أو إيموجي ليتم إظهاره في بداية كل عنصر. |
في المثال التالي قمنا بإخفاء الترقيم و التنقيط.
في المثال التالي قمنا بجعل القائمة الداخلية تستخدم نفس نوع الترقيم المُستخدم في القائمة الخارجية.
مثال
في المثال التالي قمنا بعرض رمز في بداية كل عنصر.
في المثال التالي قمنا بعرض إيموجي في بداية كل عنصر.
عرض صورة في بداية كل عنصر
في القائمة التي تحصل عليها بواسطة الوسم <ul> يمكنك عرض صورة صغيرة أو لون في بداية كل عنصر بدلاً من التنقيط التقليدي باستخدام الخاصية list-style-image و تمرير إحدى القيم التالية لها.
| القيمة | معناها |
|---|---|
| url() | بين أقواس هذه الدالة يجب تمرير مسار الصورة المراد عرضها في بداية كل عنصر. |
| linear-gradient() | بين أقواس هذه الدالة يجب تمرير إتجاه عرض اللون و تدرج الألوان المراد إظهارها. |
| radial-gradient() | بين أقواس هذه الدالة يجب تمرير تدرج الألوان المراد إظهارها. |
| none | لإزالة الصورة من بداية العنصر كل عنصر و هذه القيمة الإفتراضية. |
في المثال التالي قمنا بعرض صورة في بداية كل عنصر.
مثال
في المثال التالي قمنا بعرض مربع متدرج الألوان في بداية كل عنصر.
مثال
في المثال التالي قمنا بعرض مربع متدرج الألوان و بشكل دائري في بداية كل عنصر.
مثال
تحديد مكان محددات العناصر
يمكنك تحديد مكان ظهور محددات العناصر باستخدام الخاصية list-style-position و تمرير إحدى القيم التالية لها.
| القيمة | معناها |
|---|---|
| inside | لإظهار المحددات بداخل حدود العناصر. |
| outside | لإظهار المحددات خارج حدود العناصر و هذه القيمة الإفتراضية. |
في المثال التالي قمنا بإظهار محددات العناصر مرة بداخل حدودها و مرة خارجها.
ملاحظة: قمنا بإظهار حدود العناصر حتى تلاحظ الفرق.
مثال
تعديل تصميم القائمة و العناصر
CSS تتيج لك تعديل تصميم القوائم كيفما تشاء حيث تستطيع إضافة ألوان، حدود، خلفيات للعناصر بالإضافة إلى تعديل تصميم محددات العناصر بشكل كلي.
إفتراضياً المتصفحات على اختلاف أنواعها تضيف للقوائم هوامش داخلية ( Padding ) و خارجية ( Margin ) بشكل إفتراضي و بنسب مختلفة. ننصحك دائماً بإزالة الهوامش الإفتراضية أو تحديدها بنفسك لكي تظهر بشكل موحّد في جميع المتصفحات.
الوصول لخصائص القوائم
الأسلوب التالي يتيح لك الوصول لخصائص القائمة و التعديل عليها كيفما تشاء.
في المثال التالي قمنا بتعديل هوامش القائمة الإفتراضية، لون خلفيتها، لون عناصرها و ألوان المحددات الموجودة فيها.
مثال
عرض أيقونة في بداية العنصر
إذا كنت تستخدم أيقونات جوجل أو أيقونات Font Awesome فإنه بإمكانك أيضاً استخدام هذه الأيقونات كمحددات في القوائم، حيث يمكنك عرض أيقوناتهم في بداية كل عنصر بالإضافة إلى تخصيص طريقة عرضها حتى تظهر بشكل الذي تريده.
في المثال التالي قمنا بعرض أيقونة النجمة الموجودة ضمن أيقونات FontAwesome في بداية كل عنصر و قمنا بتلوينها و تحديد حجمها و إبعاد نص العناصر عنها أيضاً.
