Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

[ دورة CSS ] التصميم CSS – الدرس الخامس – تصميم القوائم

Home // Blog // [ دورة CSS ] التصميم CSS – الدرس الخامس – تصميم القوائم

 
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

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

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

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " [ دورة CSS ] التصميم CSS – الدرس الخامس R... "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM