قائمة CSS

تسمح خصائص قائمة CSS لك بوضع أو تغيير علامات عناصر القائمة أو استخدام الصور كعلامات عناصر القائمة.

قائمة CSS

بمعنى ما، يمكن اعتبار أي محتوى ليس نصوصًا وصفية على أنه قائمة. يمكن تمثيل الإحصاءات، نظام الشمس، السجلات العائلية، قائمة الزيارات، وحتى جميع أصدقائك كقائمة أو قائمة داخل قائمة.

بما أن القوائم متنوعة جدًا، فإن هذا يجعل القوائم مهمة جدًا، لذا فإن عدم كفاية أنماط القوائم في CSS يعتبر عيبًا كبيرًا.

نوع القائمة

للأثر على نمط القائمة، يمكن أن يكون تغيير نوع العلامة وسيلة بسيطة (والمستخدمة على نطاق واسع).

على سبيل المثال، في قائمة غير منظمة، تكون العلامة (marker) للعناصر القائمة نقاطاً تظهر بجانب كل عنصر قائمة. في القائمة المنظمة، تكون العلامة رقماً أو حرفاً أو رمزًا من نظام العد الآخر.

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

ul {list-style-type : square}

البيان أعلاه يضبط علامة عناصر القائمة في القائمة غير المنظمة على مربعة.

صورة العنصر القائمة

في بعض الأحيان، العلامات التقليدية لا تكون كافية. قد ترغب في استخدام صورة كعلامة لكل علامة، مما يمكن استخدامه list-style-image يحقق هذا

ul li {list-style-image : url(xxx.gif)}

باستخدام ببساطة قيمة url()، يمكنك استخدام الصورة كعلامة.

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

يمكن لـ CSS2.1 تحديد ما إذا كانت العلامة تظهر خارج محتوى العنصر أم داخلها. هذا يتم باستخدام list-style-position انه تم الانتهاء منه.

قائمة القوائم القصيرة

للغرض من البساطة، يمكن دمج هذه الثلاث خصائص القائمة في خاصية مريحة واحدة:list-style، مثل هذا:

li {list-style : url(example.gif) square inside}

يمكن سرد قيم list-style في أي ترتيب، ويمكن تجاهل هذه القيم. إذا تم تقديم قيمة واحدة، سيتم ملء الباقي بقيم افتراضية.

مثال على قائمة CSS:

في القوائم غير المنظمة، علامات عناصر القائمة المختلفة
هذا المثال يوضح جميع أنواع علامات قائمة CSS المختلفة.
في القوائم المنظمة، علامات عناصر القائمة المختلفة
هذا المثال يوضح جميع أنواع علامات قائمة CSS المختلفة.
جميع أنواع أنواع القائمة
هذا المثال يوضح جميع أنواع علامات قائمة CSS المختلفة.
استخدام الصورة كعلامة القائمة
هذا المثال يوضح كيفية استخدام الصورة كعلامة القائمة.
وضع علامة القائمة
هذا المثال يوضح أين يمكن وضع علامة القائمة.
تحديد جميع خصائص القائمة في بيان واحد
هذا المثال يوضح كيفية جمع جميع الخصائص المستخدمة في القائمة في بيان مختصر.

خصائص القائمة CSS (list)

خصائص وصف
list-style خصائص مختصرة. تستخدم لجمع جميع الخصائص المستخدمة في القائمة في بيان واحد.
list-style-image تعيين الصورة كعلامة القائمة.
list-style-position تعيين موقع علامة القائمة في القائمة.
list-style-type تعيين نوع علامة القائمة.
marker-offset