البرمجة

تنسيق القوائم في CSS

اخر تحديث 09/06/2025
17 تمت قراءة 5 دقيقة
جدول المحتوى

تنسيق القوائم (Lists) في CSS: دليل شامل ومفصل

تُعتبر القوائم (Lists) من العناصر الأساسية في تصميم صفحات الويب، حيث تُستخدم لتنظيم المعلومات بشكل يسهل على المستخدمين قراءتها وفهمها بسرعة. سواء كانت القوائم مرتبة (Ordered Lists) أو غير مرتبة (Unordered Lists) أو حتى قوائم وصفية (Description Lists)، فإن التنسيق الصحيح لها باستخدام CSS يرفع من جودة التصميم ويعزز تجربة المستخدم.

هذا المقال يقدّم شرحًا وافيًا ومفصّلًا عن كيفية تنسيق القوائم باستخدام CSS، مع توضيح خصائص وأمثلة عملية، لنصل إلى فهم شامل يمكن تطبيقه في مختلف المشاريع.

مواضيع ذات صلة

1. أنواع القوائم في HTML

قبل الدخول في تفاصيل CSS، من المهم أن نراجع أنواع القوائم التي نستطيع التعامل معها:

  • القائمة غير المرتبة (Unordered List): تُستخدم لعرض عناصر دون ترتيب معين، وغالبًا ما تُعرض بعلامات نقطية (bullet points).

    تُكتب في HTML باستخدام الوسم

      .

    • القائمة المرتبة (Ordered List): تُستخدم لعرض عناصر مرتبة وفق تسلسل رقمي أو حروف أبجدية.

      تُكتب باستخدام الوسم

        .

      1. القائمة الوصفية (Description List): تستخدم لعرض مصطلحات وتعريفاتها، وتُكتب باستخدام الوسوم

        ،

        , و

        .

    2. الهيكل الأساسي للقوائم في HTML

    مثال على قائمة غير مرتبة:

    html
    <ul>
  <li>العنصر الأولli>
  <li>العنصر الثانيli>
  <li>العنصر الثالثli>
ul>

    مثال على قائمة مرتبة:

    html
    <ol>
  <li>العنصر الأولli>
  <li>العنصر الثانيli>
  <li>العنصر الثالثli>
ol>

    3. أساسيات تنسيق القوائم باستخدام CSS

    تتنوع خواص CSS التي يمكن تطبيقها على القوائم، ومنها:

    3.1. التحكم في نوع العلامة (List-style-type)

    الخاصية list-style-type تتحكم في شكل العلامة أو النقط التي تظهر بجانب عناصر القائمة.

    القيم الشائعة تشمل:

    • disc (النقطة السوداء التقليدية) — الافتراضية للقائمة غير المرتبة

    • circle (دائرة فارغة)

    • square (مربع)

    • decimal (أرقام عشرية) — الافتراضية للقائمة المرتبة

    • decimal-leading-zero (أرقام تبدأ بصفر مثل 01, 02)

    • lower-alpha وupper-alpha (حروف أبجدية صغيرة أو كبيرة)

    • lower-roman وupper-roman (أرقام رومانية صغيرة أو كبيرة)

    • none (إخفاء العلامة)

    مثال:

    css
    ul {
  list-style-type: square;
}

ol {
  list-style-type: lower-roman;
}

    3.2. التحكم في صورة العلامة (List-style-image)

    يمكن استخدام صورة بدلاً من العلامة التقليدية:

    css
    ul {
  list-style-image: url('bullet.png');
}

    هذه الطريقة تضيف لمسة جمالية خاصة، لكن يجب الانتباه إلى توافق الصورة مع التصميم العام وحجمها المناسب.

    4. التحكم في مكان العلامة بالنسبة للنص

    4.1. خاصية list-style-position

    تحدد مكان العلامة بالنسبة للنص:

    • inside: العلامة تكون داخل حدود النص، مما يجعل النص يلتف حول العلامة.

    • outside (الافتراضية): العلامة تكون خارج حدود النص.

    مثال:

    css
    ul {
  list-style-position: inside;
}

    في هذه الحالة، تُصبح العلامة جزءًا من النص، فتتم المحاذاة بشكل مختلف عن الوضع الافتراضي.

    5. تنسيق الهوامش والتباعد في القوائم

    التحكم في الهوامش (margin) والحشوات (padding) عنصر مهم لتحسين شكل القوائم وموضعها ضمن الصفحة.

    • الهوامش الخارجية (margin) تتحكم في المسافة بين القائمة والعناصر المحيطة بها.

    • الحشوات الداخلية (padding) تتحكم في المسافة بين حدود العنصر ومحتواه، بما في ذلك العلامة.

    مثال:

    css
    ul {
  margin-left: 20px;
  padding-left: 40px;
}

    في هذا المثال، تُبعد القائمة عن الحافة اليسرى بمقدار 20 بكسل، ويتم إضافة حشوة داخلية على اليسار بمقدار 40 بكسل لتوفير مساحة للعلامة والنص.

    6. تخصيص تنسيق عناصر القائمة (li)

    يمكن تنسيق عناصر القائمة بشكل فردي أو جماعي باستخدام العنصر

  • .

    6.1. التحكم في الخطوط والألوان

    مثال على تغيير الخط وحجم الخط ولون النص:

    css
    li {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333333;
}

    6.2. تنسيق المسافة بين عناصر القائمة

    يمكن التحكم في المسافات الرأسية بين العناصر باستخدام margin أو padding:

    css
    li {
  margin-bottom: 10px;
}

    7. استخدام القوائم داخل قوائم: القوائم المتداخلة (Nested Lists)

    القوائم يمكن أن تكون متداخلة داخل بعضها البعض لعرض هياكل أكثر تعقيدًا.

    مثال:

    html
    <ul>
  <li>العنصر الأول
    <ul>
      <li>العنصر الفرعي 1li>
      <li>العنصر الفرعي 2li>
    ul>
  li>
  <li>العنصر الثانيli>
ul>

    لتنسيق القوائم المتداخلة يمكن استخدام محددات CSS متقدمة:

    css
    ul ul {
  list-style-type: circle;
  margin-left: 20px;
}

ul ul ul {
  list-style-type: square;
  margin-left: 20px;
}

    هذا يسمح بتمييز القوائم الفرعية بأنماط وعلامات مختلفة عن القائمة الأصلية.

    8. تنسيق القوائم الوصفية (Description Lists)

    القوائم الوصفية تستخدم لعرض تعاريف أو مصطلحات مع شرحها، وتتكون من ثلاث عناصر:

    • : تحوي القائمة بأكملها

    • : يمثل المصطلح

    • : يمثل التعريف أو الوصف

    8.1. تنسيق القوائم الوصفية باستخدام CSS

    يمكن تخصيص تنسيق العناصر باستخدام:

    css
    dl {
  margin: 0;
  padding: 0;
}

dt {
  font-weight: bold;
  margin-top: 10px;
}

dd {
  margin-left: 20px;
  margin-bottom: 10px;
}

    هذا يضمن ظهور المصطلحات بخط عريض مع ترك مسافة مناسبة بين المصطلح وتعريفه.

    9. استخدام خاصية list-style المختصرة

    تجمع خاصية list-style بين أكثر من خاصية متعلقة بالقوائم في تعبير واحد، مما يسهل الكتابة والقراءة:

    css
    ul {
  list-style: square inside url('bullet.png');
}

    تعني:

    • شكل العلامة: مربع (square)

    • موقع العلامة: داخل النص (inside)

    • صورة العلامة: صورة مخصصة (url('bullet.png'))

    10. استراتيجيات لتخصيص تصميم القوائم

    10.1. إخفاء العلامات الافتراضية واستخدام أيقونات مخصصة

    في بعض التصميمات الحديثة، قد يرغب المصممون بإزالة العلامات التقليدية واستخدام أيقونات أو رموز أخرى، وذلك يتم عبر:

    css
    ul {
  list-style: none;
  padding-left: 0;
}

li::before {
  content: "✓"; /* أو رمز أيقونة */
  color: green;
  margin-right: 8px;
}

    في هذا الأسلوب، تُزال العلامات التقليدية، ويتم إضافة رمز معين قبل كل عنصر باستخدام ::before.

    10.2. قوائم أفقية (Horizontal Lists)

    تستخدم القوائم الأفقية عادةً في القوائم التنقلية (Navigation Menus)، حيث تُعرض عناصر القائمة بجانب بعضها بدلاً من أسفل بعضها.

    مثال:

    css
    ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

li {
  display: inline-block;
}

    هذا يجعل القائمة تعرض العناصر بشكل أفقي مع مسافات بينها.

    10.3. استخدام خاصية counter-reset و counter-increment لإنشاء ترقيم مخصص

    CSS يسمح بإنشاء ترقيم مخصص للقوائم المرتبة، بعيدًا عن الأرقام الافتراضية.

    مثال:

    css
    ol.custom-counter {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}

ol.custom-counter li::before {
  counter-increment: item;
  content: counter(item) ". ";
  font-weight: bold;
  color: #ff6600;
}

    هذا يتيح تحكمًا كاملاً في شكل ونمط الأرقام، مثل تغيير اللون، الخط، التنسيق، وغيرها.

    11. تنسيق القوائم عند الطباعة

    عند طباعة صفحة ويب تحتوي على قوائم، يمكن أن يختلف شكل القوائم عما هو معروض على الشاشة. لضمان وضوح القوائم، يمكن تخصيص أنماط الطباعة باستخدام @media print:

    css
    @media print {
  ul {
    list-style-type: disc;
    margin-left: 20px;
  }
  
  ol {
    list-style-type: decimal;
  }
  
  li {
    font-size: 12pt;
  }
}

    12. دعم المتصفحات والقوائم

    خصائص CSS المتعلقة بالقوائم مدعومة بشكل واسع عبر معظم المتصفحات الحديثة، إلا أن بعض القيم مثل list-style-image قد تحتاج إلى اختبار للتأكد من عرض الصور بشكل صحيح.

    كما أن استخدام قوائم مخصصة مع ::before و counter-reset يعمل بكفاءة في جميع المتصفحات الحديثة، مما يجعلها الحل الأمثل لتخصيص القوائم بشكل مبتكر.

    13. مقارنة بين تنسيق القوائم في CSS1 و CSS3

    • في CSS1، تركز التنسيقات على خصائص بسيطة مثل list-style-type, list-style-position, وlist-style-image.

    • في CSS3، أضيفت إمكانيات متقدمة مثل ::before، counter-reset، counter-increment، والتعامل مع القوائم ضمن تنسيقات مرنة كـ Flexbox و Grid.

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

    14. أمثلة تطبيقية متقدمة على تنسيق القوائم

    14.1. قائمة شريط التنقل بأيقونات وصورة خلفية

    css
    nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  background: url('nav-bg.png') repeat-x;
}

nav li {
  margin: 0 15px;
  position: relative;
}

nav li::before {
  content: url('icon.png');
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
}

    14.2. قائمة وصفية مع تأثير تظليل وتنسيق متقدم

    css
    dl {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

dt {
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
}

dd {
  margin-left: 30px;
  color: #7f8c8d;
  line-height: 1.6;
}

    15. جدول مقارنة بين خصائص تنسيق القوائم في CSS

    الخاصية الوصف القيم الشائعة
    list-style-type تحديد شكل العلامة بجانب عناصر القائمة disc, circle, square, decimal, lower-alpha, none
    list-style-position تحديد موقع العلامة بالنسبة للنص inside, outside
    list-style-image استخدام صورة بدلاً من العلامة URL لصورة
    list-style خاصية مختصرة تجمع كل ما سبق مزيج من type, position, image
    counter-reset إعادة تعيين عداد مخصص للقوائم اسم العداد
    counter-increment زيادة العداد لكل عنصر اسم العداد
    ::before إدراج محتوى قبل عنصر القائمة نص أو رمز أو صورة

    16. الخلاصة

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

    تقدم CSS إمكانيات واسعة لتخصيص القوائم، من التنسيقات البسيطة إلى التصاميم المعقدة باستخدام الخصائص الحديثة مثل العدادات المخصصة وعناصر المحتوى قبل النص. كما تتيح القوائم المتداخلة إنشاء هياكل معلوماتية متعددة المستويات، تدعم عرض المحتوى بشكل واضح ومرتب.

    اعتماد التنسيق المناسب للقوائم يرفع من احترافية الموقع، ويساعد في تحسين SEO عبر تنظيم المحتوى بطريقة يسهل على محركات البحث فهمها.

    المراجع

    1. MDN Web Docs – CSS Lists and Counters

    2. W3Schools – CSS List Style Property

اخر تحديث 09/06/2025
17 تمت قراءة 5 دقيقة