More

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

" Here you can search for everything you want and you will find it as soon as possible "

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

  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
مثال

Click Here To See URL To Download
ul
{
list-style-image: url('sqpurple.gif');
}

في المثال السابق لايتم عرض الصورة بتساوٍ في جميع المتصفحات فمثلاً في متصفح IE و Opera سيتم عرض الصورة أكبر قليلاً من Firefox و Chrome و Safari
اذا أردت استخدام العلامة بتساوٍ في جميع المتصفحات عندها يمكنك استخدام الحل مع “تخطي المتصفح” والذي سيتم شرحه لاحقاً

Click Here To See URL To Download

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

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

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;
}

شرح المثال :

Click Here To See URL To Download
  • القائمة الرئيسية 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 تحديد نوع علامة القائمة

Show More
" Here you can search for everything you want and you will find it as soon as possible "

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker