قوائم CSS

خصائص القائمة تُستخدم لتحكم في عرض علامات عناصر القائمة.

أنواع قائمة HTML

هناك ثلاثة أنواع مختلفة من القوائم في HTML:

• قائمة غير مرتبة —قائمة العناصر، حيث يتم استخدام علامة المشروع لكل عنصر.

• القائمة المرتبة —قائمة العناصر، حيث يتم تسمية كل عنصر بالرقم.

• قائمة التعريف -قائمة العناصر، حيث يحتوي كل عنصر على وصف.

للحصول على معلومات إضافية حول القوائم، يرجى الرجوع إلىقائمة HTMLالتعليمات.

دليل CSS القائمة

CSS يقدم عدة خصائص لإنشاء قوائم غير المرتبة والمرتبة الشائعة. هذه خصائص CSS القائمة تسمح لك عادةً:

• تحكم في شكل أو مظهر العلامة.

• تحديد صورة العلامة بدلاً من نقطة المشروع أو الرقم.

• ضبط المسافة بين العلامة والنص في القائمة.

• يحدد حيث سيظهر العلامة أو نقطة المشروع داخل أو خارج مربع القائمة التي تحتوي على القائمة غير المرتبة أو المرتبة.

نوع النمط القائمة

بشكل افتراضي،القائمة المرتبةتم تحديد العناصر باستخدام أرقام عربية (1،2،3 وما إلى ذلك)، بينما فيفي القائمة غير المرتبة، حيث يتم استخدام علامة مشرعة دائرية. ولكن يمكنك استخدام خاصية list-style-type لتغيير هذا النوع الافتراضي للعلامة إلى أي نوع آخر، مثل الدوائر، المربعات، الأرقام الرومانية، الحروف اللاتينية، وما إلى ذلك.

ul　{
　　　　list-style-type:　square;
}
ol　{
　　　　list-style-type:　upper-roman;
}

تغيير موقع علامة القائمة

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

يأخذ هذا الخصائص قيم inside أو outside، وinside هي القيمة الافتراضية. إذا تم استخدام هذا القيمة inside، فإن هذه السطور ستكون محاطة بالعلامة بدلاً من التدقيق.

ul.in　li　{
　　　　list-style-position:　inside;
}
ul.out　li　{
　　　　list-style-position:　outside;
}

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

يمكنك أيضًا استخدام خاصية list-style-image لضبط الصورة كعلامة قائمة.

قواعد النمط في هذا المثال توزع صورة PNG شفافة "arrow.png" كعلامة قائمة على جميع عناصر القائمة غير المرتبة.

ul　li　{
　　　　list-style-image:　url("arrow.png");
}

النموذج المقدم ليس له نفس النتيجة في جميع المتصفحات. إنترنت إكسبلورر و أوبرا سيقومان بعرض علامات الصورة أعلى قليلاً من فيرفوكس، كروم وسافاري.

حل مشكلة علامات الصورة المتعددة المتصفحات

عند استخدام خصائص list-style-image لاستخدام الصورة كعلامة، لا يمكن تحديد موقع العلامة بشكل دقيق في المتصفح. الحل هو، من خلال background-image يستخدم خصائص CSS لتحديد الصور البؤرية بشكل صحيح.

المثال التالي يظهر علامات الصورة في جميع المتصفحات بشكل متساوٍ:

ul　{
　　　　list-style-type:　none;
}
ul　li　{
　　　　background-image:　url("arrow.png");
　　　　background-position:　0px　5px;　　　　/*　X-pos　Y-pos　(from　top-left)　*/
　　　　background-repeat:　no-repeat;
　　　　padding-left:　20px;
}

خصائص النمط القائمة المختصرة

الخصائص المختصرة للنمط القائمة هي خصائص مختصرة لجميع الثلاث خصائص list-style-type،list-style-image،list-style-position في مكان واحد.

ستضبط هذه قاعدة النمط على إشارات القائمة المكتوبة بالحروف اللاتينية العليا التي تظهر في بداية عنصر القائمة:

ol　{
　　　　list-style:　upper-latin　inside;
}