خاصية القوائم (Lists) في لغة CSS تُستخدم لتنسيق وتخصيص شكل القوائم التي تم إنشاؤها باستخدام وسوم HTML مثل <ul> (قائمة غير مرتبة)، <ol> (قائمة مرتبة)، و <dl> (قائمة وصف). تُتيح لك CSS التحكم في جوانب مختلفة من القوائم، مثل نوع التعداد النقطي أو الرقمي، وموضع العناصر، والصور المستخدمة كعلامات تعداد، وغيرها.

إليك أهم الخصائص المُستخدمة لتنسيق القوائم في CSS:

1. list-style-type:

  • تُحدد نوع العلامة (marker) المستخدمة في القائمة.
  • تُستخدم مع القوائم غير المرتبة (<ul>) والقوائم المرتبة (<ol>).

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

  • disc: دائرة مُمتلئة (القيمة الافتراضية).
  • circle: دائرة فارغة.
  • square: مربع.
  • none: لا توجد علامة.

القيم المُمكنة مع القوائم المرتبة (<ol>):

  • decimal: أرقام عشرية (1، 2، 3، ...) (القيمة الافتراضية).
  • decimal-leading-zero: أرقام عشرية مع صفر بادئ (01، 02، 03، ...).
  • lower-roman: أرقام رومانية صغيرة (i، ii، iii، ...).
  • upper-roman: أرقام رومانية كبيرة (I، II، III، ...).
  • lower-alpha: أحرف لاتينية صغيرة (a، b، c، ...).
  • upper-alpha: أحرف لاتينية كبيرة (A، B، C، ...).
  • lower-greek: أحرف يونانية صغيرة (α، β، γ، ...).

مثال:

CSS
ul {
  list-style-type: square; /* مربعات كعلامات تعداد */
}

ol {
  list-style-type: lower-roman; /* أرقام رومانية صغيرة */
}

2. list-style-image:

  • تُستخدم لتحديد صورة كعلامة تعداد بدلاً من النقاط أو الأرقام.
  • تُحدد مسار الصورة باستخدام دالة url().

مثال:

CSS
ul {
  list-style-image: url("bullet.png"); /* صورة bullet.png كعلامة تعداد */
}

3. list-style-position:

  • تُحدد موضع علامة التعداد بالنسبة لعنصر القائمة.

القيم المُمكنة:

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

مثال:

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

4. list-style (خاصية مُختصرة):

  • تجمع الخصائص الثلاث السابقة (list-style-type، list-style-image، list-style-position) في خاصية واحدة.
  • يتم تحديد القيم بالترتيب التالي: list-style-type list-style-position list-style-image.

مثال:

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

في هذا المثال، يتم استخدام مربع كعلامة تعداد، ويتم وضعها داخل مربع محتوى العنصر، ويتم استخدام الصورة "bullet.png" كعلامة تعداد إذا لم يتم عرض المربع.

خصائص إضافية لتنسيق القوائم:

  • margin و padding: يُمكن استخدامها للتحكم في الهوامش الخارجية والداخلية للقوائم وعناصرها.
  • text-align: يُمكن استخدامها لمحاذاة نص عناصر القائمة.
  • vertical-align: يُمكن استخدامها لمحاذاة علامات التعداد عموديًا.

مثال شامل:

HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside;
  padding-left: 20px; /* إضافة مسافة بادئة */
}

ol {
  list-style-type: decimal;
  padding-left: 20px;
}

li {
  line-height: 1.5; /* زيادة تباعد الأسطر */
}
</style>
</head>
<body>

<h2>قائمة غير مرتبة:</h2>
<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ul>

<h2>قائمة مرتبة:</h2>
<ol>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>

</body>
</html>

باستخدام هذه الخصائص، يُمكنك تنسيق القوائم في CSS بشكل دقيق وجعلها مُناسبة لتصميم موقعك.