تنسيق القوائم (Lists) والروابط (Links)

في CSS، تُستخدم الخاصية list-style للتحكم في مظهر القوائم على صفحة الويب.

سواء كنت تتعامل مع قوائم مرتبة (ordered lists ol) أو قوائم غير مرتبة (unordered lists ul)، تتيح لك الخاصية list-style تخصيص (customize) طريقة عرض عناصر القائمة.

تُعد الخاصية list-style في الواقع اختصاراً لثلاث خصائص أخرى:

• list-style-type

• list-style-position

• list-style-image

يؤدي كل منها دوراً مختلفاً في تحديد مظهر القوائم (appearance of lists).

تتيح لك الخاصية list-style-type تحديد نوع الرمز النقطي (type of bullet point) أو الرقم (number) المستخدم في القائمة.

بالنسبة للقوائم غير المرتبة (unordered lists)، يمكنك الاختيار من بين عدة أنماط للرموز النقطية (several bullet styles)، مثل الأقراص (discs) أو الدوائر (circles) أو المربعات (squares).

بالنسبة للقوائم المرتبة (ordered lists)، يمكنك استخدام أنظمة ترقيم مختلفة (different numbering systems)، مثل الأرقام العشرية (decimal)، أو الأرقام الرومانية (Roman numerals)، أو حتى الأحرف الأبجدية (alphabetical characters).

إليك مثال على استخدام list-style-type :

<ul style="list-style-type: square;">
 <li>العنصر 1</li>
 <li>العنصر 2</li>
 <li>العنصر 3</li>
</ul>
        

معاينة:

في هذا المثال، يتم تغيير رموز القائمة غير المرتبة (unordered list) إلى مربعات (squares).

تُعد الخاصية list-style-type الأكثر استخداماً من بين الخصائص الثلاث، إذ تؤثر بشكل مباشر على مظهر الرمز النقطي أو نمط الترقيم في القوائم الخاصة بك.

تتحكم الخاصية list-style-position في موضع الرمز النقطي (position of the bullet) أو الرقم (number) بالنسبة لمحتوى عنصر القائمة (list item’s content). وهناك قيمتان يمكنك استخدامهما: inside و outside.

عند استخدام القيمة "خارج" outside، تظهر النقطة أو الرقم خارج المحتوى (outside the content)، وهو السلوك الافتراضي (default behavior).

وعند استخدام القيمة "بالداخل" inside ، تظهر النقطة أو الرقم داخل المحتوى (inside the content)، مما قد يؤدي إلى التفاف النص ومحاذاته مع تلك النقطة أو الرقم.

إليك مثال على استخدام list-style-position :

<ul style="list-style-position: inside;">
 <li>العنصر 1</li>
 <li>العنصر 2</li>
 <li>العنصر 3</li>
</ul>
<ul style="list-style-position: outside;">
 <li>العنصر 4</li>
 <li>العنصر 5</li>
 <li>العنصر 6</li>
</ul>
        

معاينة:

في هذا المثال، يتم توفير قيم داخلية inside وخارجية outside لوسمين مختلفين من وسوم القوائم غير المرتبة.

تُعد الخاصية list-style-position مفيدة عندما ترغب في التحكم في محاذاة محتوى القائمة، ولا سيما في الحالات التي يحتوي فيها عنصر القائمة الواحد على أسطر متعددة من النص.

تتيح لك الخاصية list-style-image استخدام صورة (image) كعلامة تعداد (bullet point) لعناصر القائمة، مما يُعد مفيداً لإضفاء طابع بصري مميز على قوائمك.

إليك مثال على استخدام list-style-image :

<head>
 <style>
  ul {
   list-style-image: url('https://openarabtech.github.io/CSSVerse/src/assets/OpenarabtechIcon.png');
   list-style-position: inside;
  }
 </style>
</head>
<ul>
 <li>العنصر 1</li>
 <li>العنصر 2</li>
 <li>العنصر 3</li>
</ul>
        

معاينة:

في هذا المثال، تم استبدال النقاط (bullet points) بشعار التقنية العربية المفتوحة مخصص (custom Open Arab Tech logo)، مما يضفي لمسة شخصية على القائمة.

عند استخدام الخاصية list-style-image ، تأكد من أن الصورة (image) التي تختارها صغيرة ومناسبة لتصميم صفحة الويب الخاصة بك؛ فإذا كانت الصورة كبيرة جداً أو معقدة، فقد تجعل قراءة القائمة (list) أمراً صعباً.

يمكنك دمج (combine) الخصائص الثلاث — list-style-type و list-style-position و list-style-image — في خاصية مختصرة واحدة هي list-style.

لا يهم ترتيب القيم في الصيغة المختصرة، ولكن يمكن تحديد القيم الثلاث معاً.

إليك مثال يستخدم خاصية الاختصار (shorthand property) :

<ul style="list-style: square inside url('https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg');">
 <li>العنصر 1</li>
 <li>العنصر 2</li>
 <li>العنصر 3</li>
</ul>
        

معاينة:

في هذا المثال، تستخدم عناصر القائمة رموزاً نقطية مربعة الشكل (square bullets) تقع داخل المحتوى (inside the content)، مع استخدام صورة مخصصة (custom image) كرمز نقطي.

ومع ذلك، إذا كانت الصورة غير متاحة أو لم يتم عرضها، فسيتم استخدام الرموز النقطية المربعة (square bullets) كبديل (fallback).