تحدد القائمة في CSS كيفية إدراج المحتويات أو العناصر بطريقة معينة، أي أنه يمكن ترتيبها بشكل أنيق أو عشوائي، مما يساعد في إنشاء صفحة ويب نظيفة. ولأنها قابلة للتكيف وسهلة التعامل معها، فيمكن استخدامها لتنظيم كميات كبيرة من المواد. النمط الافتراضي للقائمة بلا حدود. ويمكن تقسيم القائمة إلى فئتين:
خصائص قائمة CSS التالية متاحة للاستخدام في التحكم في قوائم CSS:
وسنتعرف الآن على المزيد عن هذه الخصائص من خلال الأمثلة.
خاصية نوع القائمة
قد يتم تغيير نوع القائمة الافتراضية للعلامة إلى مجموعة متنوعة من الأنواع الأخرى، بما في ذلك المربع والدائرة والأرقام الرومانية والأحرف اللاتينية وغيرها الكثير. تتم الإشارة إلى الإدخالات الموجودة في القائمة غير المرتبة بالرموز النقطية المستديرة (•)، بينما يتم ترقيم العناصر الموجودة في القائمة المرتبة بشكل افتراضي باستخدام الأرقام العربية (1، 2، 3، وما إلى ذلك).
ستتم إزالة العلامات أو الرموز النقطية إذا قمنا بتعيين قيمتها على لا شيء.
بناء الجملة:
نوع نمط القائمة: القيمة؛
العمل الداخلي للهاشماب
يمكننا استخدام القيمة على النحو التالي:
- دائرة
- عشري، على سبيل المثال: 1،2،3، إلخ
- الأصفار العشرية البادئة، على سبيل المثال: 01,02,03,04، إلخ
- الرومانية السفلى
- الروماني العلوي
- ألفا أقل، على سبيل المثال، أ، ب، ج، وما إلى ذلك
- ألفا العليا، على سبيل المثال، A، B، C، إلخ
- مربع
ملاحظة: يتم أيضًا تضمين المساحة المتروكة والهامش الافتراضيين في القائمة. من الضروري إضافة الحشو: 0 والهامش: 0 إلى ملفوالعلامات للقضاء على هذا.
- العلامات للقضاء على هذا.
مثال
يوضح هذا المثال قائمة CSS مع العديد من أنواع أنماط القائمة والقيم المعينة على المربع وألفا العليا والعديد.
Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul> انتاج |
