دليل CSS الشامل لتنسيق القوائم - الأنماط، الرموز النقطية والترقيم

🧾 تنسيق القوائم في CSS: من الممل إلى الرائع!

مرحباً بك في عالم تنسيق القوائم باستخدام CSS! 🎨 إذا كنت قد استخدمت القوائم في HTML (<ul> أو <ol>)، فربما لاحظت أن مظهرها الافتراضي بسيط جداً. في هذا الدرس، سنتعلم كيفية تحويل قوائمك من شكلها العادي إلى تصميم جذاب يتناسب مع هوية موقعك بالكامل، خطوة بخطوة وسهلة الفهم.

📝 ما هي القوائم التي يمكننا تنسيقها؟

في CSS، يمكننا تنسيق نوعين رئيسيين من القوائم التي نعرفها من HTML:

1. القوائم غير المرتبة (Unordered Lists) <ul>: تستخدم عادة الرموز النقطية (•) أو الدوائر أو المربعات.
2. القوائم المرتبة (Ordered Lists) <ol>: تستخدم الترقيم بالأرقام (1, 2, 3) أو الحروف (A, B, C).

الخاصية الأساسية التي تتحكم في مظهر القوائم هي list-style.

🎯 الخاصية list-style-type (تغيير شكل العلامة)

هذه الخاصية هي الأهم، وهي تحدد شكل العلامة (النقطة أو الرقم) بجوار كل عنصر في القائمة (<li>).

للقوائم غير المرتبة (<ul>):

ul {
  list-style-type: disc; /* النقطة السوداء الافتراضية • */
}

ul.square {
  list-style-type: square; /* مربع صغير ▢ */
}

ul.circle {
  list-style-type: circle; /* دائرة مفرغة ○ */
}

ul.none {
  list-style-type: none; /* إزالة العلامة تماماً */
}

للقوائم المرتبة (<ol>):

ol {
  list-style-type: decimal; /* الأرقام 1,2,3 (الافتراضي) */
}

ol.upper-roman {
  list-style-type: upper-roman; /* الأرقام الرومانية كبيرة: I, II, III */
}

ol.lower-alpha {
  list-style-type: lower-alpha; /* حروف إنجليزية صغيرة: a, b, c */
}

ol.armenian {
  list-style-type: armenian; /* الترقيم الأرمني */
}

مثال عملي: لنطبق هذه الأنماط على قائمة مهام.

<ul class="tasks">
  <li>مراجعة الدرس</li>
  <li>حل التمرين</li>
  <li>تحضير للدرس القادم</li>
</ul>

.tasks {
  list-style-type: square; /* سيظهر كل عنصر بمربع صغير */
  color: darkblue; /* يمكننا تلوين النص أيضاً */
}

🖼️ الخاصية list-style-image (استخدام صورة كعلامة)

ماذا لو أردت استخدام أيقونة أو صورة صغيرة خاصة بك بدلاً من النقاط العادية؟ هنا تأتي خاصية list-style-image لتنقذ الموقف! 🚀

ul.custom-bullet {
  list-style-image: url('images/star-icon.png'); /* مسار الصورة */
}

ملاحظة مهمة: يجب أن تكون الصورة صغيرة الحجم ومناسبة لتعمل كعلامة للقائمة.

📍 الخاصية list-style-position (موقع العلامة)

تتحكم هذه الخاصية في مكان ظهور العلامة: داخل مربط النص أم خارجه؟ الفرق بسيط لكنه يؤثر على تنسيق النص.

ul.inside-example {
  list-style-position: inside; /* العلامة داخل مساحة النص */
}

ul.outside-example {
  list-style-position: outside; /* العلامة خارج مساحة النص (الافتراضي) */
}

الوضع outside هو الشائع لأنه يبقي النص متماشياً في عمود واحد جميل.

✨ كتابة list-style بطريقة مختصرة (Shorthand)

مثل العديد من خواص CSS، يمكننا جمع list-style-type و list-style-position و list-style-image في خاصية واحدة مختصرة تسمى list-style. الترتيب ليس مهماً جداً.

ul {
  /* type | position | image */
  list-style: square inside url('icon.png');
}

/* يمكن حذف القيم التي لا نريد تغييرها */
ol {
  list-style: lower-roman; /* هنا حددنا النوع فقط */
}

🧹 كيف نزيل التنسيق الافتراضي للقوائم؟

غالباً ما نريد إزالة المسافات الهامشية (margin) والحشو (padding) والعلامات (bullets) الافتراضية للقوائم، خاصة عندما نبدأ ببناء قائمة تنقل أفقية (مثل شريط القوائم الرئيسي للموقع).

nav ul {
  list-style-type: none; /* إزالة النقاط */
  margin: 0; /* إزالة الهامش الخارجي */
  padding: 0; /* إزالة الحشو الداخلي */
}

هذه الخطوة هي أساسية قبل البدء بتصميم قوائم التنقل الأفقية.

➡️ بناء قائمة أفقية بسيطة (مقدمة)

لتحويل قائمة رأسية إلى أفقية، نستخدم خاصية display على عناصر القائمة الفردية (<li>). هذا مجرد مثال تمهيدي بسيط، وسنتعمق فيه أكثر في دروس لاحقة.

<nav>
  <ul class="horizontal-menu">
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">اتصل بنا</a></li>
  </ul>
</nav>

.horizontal-menu {
  list-style-type: none; /* الخطوة الأولى: إزالة النقاط */
  margin: 0;
  padding: 0;
  background-color: #333; /* خلفية للقائمة */
}

.horizontal-menu li {
  display: inline-block; /* يجعل العناصر بجانب بعضها */
}

.horizontal-menu a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

🎓 خلاصة الدرس

تعلمنا اليوم كيف نتحكم بشكل كامل في مظهر القوائم باستخدام CSS! من تغيير الرموز النقطية البسيطة إلى استخدام صور مخصصة، ومن ضبط موقعها إلى إزالة التنسيق الافتراضي تمهيداً لإنشاء قوائم أفقية. تذكر أن خاصية list-style هي مفتاحك الرئيسي هنا، وأن البدء بـ list-style-type: none; margin: 0; padding: 0; هو قاعدة ذهبية لتصميم قوائم التنقل.