القوائم في CSS
HTML يعطيك ul وol. CSS يقرر كيف تبدو تلك القوائم — نقاط دائرية أو مربعات أو أرقام أو حروف، أو بلا علامة إطلاقًا حين تبني قائمة تنقل.
مجموعة أدوات list-style
📊 أنماط القائمة بنظرة واحدة
| الخاصية | دورها اليومي |
|---|---|
list-style-type |
شكل العلامة أو أسلوب الترقيم (disc، square، decimal…) |
list-style-position |
العلامة داخل أو خارج صندوق المحتوى |
list-style-image |
استخدام صورة كعلامة |
list-style |
اختصار للنوع والموضع والصورة |
list-style: none |
إزالة العلامات (شائع لقوائم التنقل) |
العلامات تخص عنصر القائمة، لكنك عادةً تضبط أنماط القائمة على ul أو ol ليرث كل li نفس المظهر.
أنواع النقاط
القوائم غير المرتبة غالبًا تبدأ بـ disc. انتقل إلى circle أو square حين يحتاج التصميم علامة أهدأ أو أحدّ.
أنواع علامات النقاط
cssul.features {
list-style-type: square;
}
ul.notes {
list-style-type: circle;
}قوائم مرقمة وحروف
القوائم المرتبة تستخدم أساليب ترقيم. decimal الخيار اليومي؛ lower-alpha أو upper-roman تناسب المخططات والخطوات الرسمية.
أنواع القائمة المرتبة
cssol.steps {
list-style-type: decimal;
}
ol.outline {
list-style-type: lower-alpha;
}موضع العلامة — داخل أو خارج
list-style-position: outside (الافتراضي المعتاد) يعلّق العلامة في الهامش. inside يدخلها في تدفق النص — مفيد في البطاقات الضيقة.
علامات داخل التدفق
cssul.card-list {
list-style-position: inside;
padding-left: 0;
}إزالة العلامات للقوائم
قوائم التنقل نادرًا تريد نقاطًا. list-style: none يمسحها — ثم أضف تباعدك بـ padding/margin.
قائمة تنقل نظيفة
cssnav ul {
list-style: none;
margin: 0;
padding: 0;
}علامات الصور والاختصار
صورة صغيرة يمكن أن تحل محل النقطة. فضّل أصولًا صغيرة. اختصار list-style يضبط النوع والموضع والصورة في سطر واحد.
علامة صورة + اختصار
cssul.custom {
list-style: square outside none;
}
ul.icons {
list-style-image: url("/icons/check.svg");
}عادة هادئة للقوائم
اختر أسلوب علامة واضحًا لكل قائمة، أبقِ صور العلامات صغيرة، وعندما تستخدم none للقوائم أعد ضبط الـ padding ليصطفّ العناصر بنظافة.
قائمة مقال مقروءة
cssarticle ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}جرّب بنفسك
- غيّر
ulإلىlist-style-type: square. - نسّق
olبـlower-alpha. - اضبط
list-style-position: insideعلى قائمة بطاقة قصيرة. - أزل نقاط
nav ulبـlist-style: noneوpadding صفر. - جرّب
list-style-imageصغيرًا ثم ارجع لنوع عادي إن فشلت الصورة.
أخطاء شائعة
- توقع أن
colorعلىliوحده يغيّر العلامات المخصصة دائمًا - استخدام
list-style: noneمع ترك padding افتراضي كبير يبدو مكسورًا - ملفات
list-style-imageضخمة تسيطر على السطر - ترقيم
ulبـ CSS بدلolالدلالي حين يهمّ الترتيب - خلط هذا الدرس مع حالات hover/visited للروابط (الجلسة السابقة)
ملخص
list-style-typeيختار النقاط أو أساليب الترقيمlist-style-positionيضع العلامات داخلًا أو خارجًاlist-style: noneيمسح العلامات للقوائمlist-style-imageواختصارlist-styleيضيفان خيارات- أبقِ العلامات هادئة والـ padding مقصودًا بعد إزالة النقاط
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى