تصميم القوائم

تسمح لك خاصية القائمة بما يلي 

1. لوضع العديد من العناصر بقائمة مرقّمة ordered lists


2. لوضع العديد من العناصر بقائمة غير مرقّمة unordered lists


3. لتخصيص صورة وتوضع عوضاً عن العلامة المستخدمة في القائمة

القائمة

في لغة HTML هناك نوعين من القوائم :

• القائمة الغير مرقّمة unordered lists وتكون محددة بعلامات سود


• القائمة المرقّمة ordered lists وتكون محددة بأرقام أو أحرف

باستخدام لغة CSS يمكنك التعديل على هذه القوائم بالاضافة الى وضع صورة بدلاً من الأرقام والدوائر

---

علامات عناصر القوائم المختلفة

يتم تحديد علامة عناصر القائمة من خلال الخاصية list-style-type

مثال

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

في المثال السابق بعض القيم للقوائم الغير مرقمة والقوائم المرقمة

---

استخدام صورة كعلامة للقائمة

لتحديد صورة كعلامة للقائمة يمكن استخدام خاصية list-style-image

مثال

ul
{
list-style-image: url('sqpurple.gif');
}

في المثال السابق لايتم عرض الصورة بتساوٍ في جميع المتصفحات فمثلاً في متصفح IE و Opera سيتم عرض الصورة أكبر قليلاً من Firefox و Chrome و Safari

اذا أردت استخدام العلامة بتساوٍ في جميع المتصفحات عندها يمكنك استخدام الحل مع "تخطي المتصفح" والذي سيتم شرحه لاحقاً

---

الحل مع تخطي المتصفح

يقدم المثال التالي شرحاً عن استخدام الصورة كعلامة في القائمة بشكل متساوٍ في جميع المتصفحات

مثال

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

شرح المثال :

• القائمة الرئيسية ul

1. في الخاصية list-style-type ضع القيمة none لإزالة علامة عناصر القائمة


2. في الخاصيات الهوامش الخارجية margin والداخلية padding ضع القيمة 0px (لتخطي توافقية المتصفح)

• عنصر القائمة li

1. استخدم رابط الصورة لعرضها URL مرة واحدة من خلال عدم التكرار no-repeat


2. قم بضبط مكان الصورة يسار وأسفل (left 0px and down 5px)


3. اضبط مكان النص في عنصر القائمة بالهوامش الداخلية اليمنى padding-right

---

اختصار الخاصيات في القائمة

يمكن جمع جميع قيم القائمة من خلال خاصية واحدة , يمكن استخدام الاختصار مع خاصية تصميم القائمة فقط list-style

مثال

ul
{
list-style: square url("sqpurple.gif");
}

عند استخدام الخاصية المختصرة يجب ترتيب القيم حسب التالي :

• نوع القائمة list-style-type


• موضع القائمة list-style-position


• صورة القائمة list-style-image

لايهم اذا كانت احدى هذه القيم غير موجودة طالما هم بنفس الترتيب

---

جميع خصائص CSS المتعلقة بالقوائم

الخاصية	الشرح
list-style	تضبط جميع قيم القائمة في خاصية واحدة
list-style-image	تحديد صورة كعلامة للقائمة
list-style-position	تحديد فيما اذا ستظهر الصورة كعلامة للقائمة داخل او خارج ترتيبة القائمة
list-style-type	تحديد نوع علامة القائمة

---