Header Ads

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


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


  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تحديد نوع علامة القائمة





يتم التشغيل بواسطة Blogger.