شرح تنسيق القوائم في CSS — كيف تغيّر شكل النقاط والترقيم باحتراف؟
القوائم (ul وol) عنصر أساسي في أي موقع: قوائم جانبية، خطوات، روابط، أو أقسام FAQ.
تنسيق القوائم في CSS يعطي مظهراً احترافياً ومنظماً.
إذا كنت تبحث عن شرح تنسيق القوائم في CSS أو كيفية إزالة النقاط من ul أو تغيير شكل الترقيم في ol، فهذا الدرس مخصص لك.
ما هي خصائص القوائم في CSS؟
أهم الخصائص لتنسيق القوائم:
list-style-type: نوع العلامة أو الترقيم.list-style-image: صورة بديلة للعلامة.list-style-position: مكان العلامة (داخل/خارج).list-style: الصيغة المختصرة.
التعريف البسيط: List Styling in CSS يعني التحكم الكامل في شكل العلامات والترقيم ومكان ظهورها داخل القوائم.
list-style-type في CSS
هذه الخاصية تغيّر شكل العلامات في ul،
وتغيّر نوع الترقيم في ol.
أمثلة لقوائم غير مرتبة (ul)
ul.circle { list-style-type: circle; }
ul.square { list-style-type: square; }
ul.none { list-style-type: none; }
ماذا يفعل هذا الكود؟ يبدّل شكل النقطة بين دائرة/مربع/بدون علامة.
النتيجة المتوقعة: تحكم بصري مباشر في شكل القائمة.
خطأ شائع: إزالة العلامات دون تعويض بصري في قوائم التنقل.
النتيجة في المتصفح:
- Circle item
- Square item
- None item (بدون علامة)
أمثلة لقوائم مرتبة (ol)
ol.roman { list-style-type: upper-roman; }
ol.alpha { list-style-type: lower-alpha; }
ol.decimal-zero { list-style-type: decimal-leading-zero; }
ماذا يفعل هذا الكود؟ يغير نوع الترقيم: روماني، أحرف، أو أرقام بصفر بادئ.
النتيجة المتوقعة: القائمة تصبح مناسبة للسياق (خطوات/فصول/بنود رسمية).
النتيجة في المتصفح:
- Roman numbering
- Alphabetic numbering
- Leading zero numbering
list-style-image في CSS
يمكنك وضع صورة صغيرة مكان النقطة الافتراضية.
ul.custom {
list-style-image: url("bullet.png");
}
ماذا يفعل هذا الكود؟ يستخدم صورة مخصصة كعلامة لكل عنصر قائمة.
النتيجة المتوقعة: مظهر بصري مخصص للعلامات.
خطأ شائع: استخدام صورة كبيرة فتبدو القائمة غير متناسقة.
list-style: none ثم نضيف أيقونات بـ ::before لمرونة أكبر.
list-style-position في CSS
تحدد مكان العلامة بالنسبة للنص:
outside(الافتراضي): العلامة خارج حدود النص.inside: العلامة تدخل ضمن السطر الأول للنص.
ul.outside { list-style-position: outside; }
ul.inside { list-style-position: inside; }
ماذا يفعل هذا الكود؟ يغيّر تموضع العلامة ويؤثر على محاذاة النص خاصة في العناصر الطويلة.
النتيجة المتوقعة: تحسين ترتيب بصري حسب التصميم.
outside
- عنصر نصي طويل نسبياً لعرض موضع العلامة.
inside
- عنصر نصي طويل نسبياً لعرض موضع العلامة.
الخاصية المختصرة list-style في CSS
يمكنك جمع النوع + الموقع + الصورة في سطر واحد.
ul {
list-style: square inside;
}
ماذا يفعل هذا الكود؟ يحدد الشكل والموقع معاً بطريقة مختصرة.
أخطاء شائعة في Lists Styling in CSS
١) إزالة العلامات بالكامل دون بديل: يقلل وضوح القائمة.
٢) استخدام list-style-image كبيرة: يكسر ارتفاع السطر.
٣) عدم ضبط padding/margin الافتراضي للقائمة: يسبب محاذاة غير دقيقة.
الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)
كيف أزيل النقاط من ul في CSS؟
استخدم list-style-type: none; أو list-style: none;.
كيف أغير نوع الترقيم في ol في CSS؟
باستخدام list-style-type مثل upper-roman أو lower-alpha.
ما الفرق بين list-style-type و list-style-image؟
الأولى تستخدم أشكالاً مدمجة، والثانية تستخدم صورة مخصصة كعلامة.
ما الفرق بين list-style-position inside و outside؟
inside تدخل العلامة ضمن سطر النص، وoutside تتركها خارج النص.
كيف أجعل القائمة مناسبة للـ navbar في CSS؟
غالباً تبدأ بـ list-style: none; ثم تنسق li وa بطريقة مناسبة.
ul بسيطة وغيّر list-style-type بين circle/square/none، ثم اضبط position إلى inside/outside.