خصائص القوائم List Style فى CSS
فى هذا الفصل سيتم شرح خصائص القوائم List Style فى CSS، مع بعض الأمثلة التوضيحية.
خصائص القوائم – CSS List Properties
توفر CSS بعض الخصائص للتحكم فى قوائم HTML (سواء كانت قوائم مرتبة <ol> أو غير مرتبة <ul>)، هيا بنا لنتعرف عليهم!
1. خاصية list-style-type
تحدد خاصية list-style-type نوع علامة عنصر القائمة. كالتالى:
<style> ul { list-style-type: armenian; } ol { list-style-type: lower-roman; } </style> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>PHP</li> </ul> <hr /> <ol> <li>JAVA</li> <li>Python</li> <li>Ruby</li> <li>C++</li> </ol>
- HTML
- CSS
- JS
- PHP
- JAVA
- Python
- Ruby
- C++
تشمل قيم الكلمات الرئيسية المقبولة لـ list-style-type ما يلي:
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-latin
- upper-latin
- armenian
- georgian
- lower-alpha
- upper-alpha
- none.
2. خاصية list-style-image
تحدد خاصية list-style-image صورة على أنها علامة عنصر القائمة، كالتالى:
<style> ul { list-style-image: url('checked.png'); } </style> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>PHP</li> </ul>
- HTML
- CSS
- JS
- PHP
3. خاصية list-style-position
تحدد خاصية list-style-position موضع (أو مكان) علامات عنصر القائمة (نقاط). كالتالى:
<style> .inside li { border: 1px solid; list-style-position: inside; } .outside li { border: 1px solid; list-style-position: outside; } </style> <ul class="inside"> <li>Toyota</li> <li>Tesla</li> <li>BMW</li> <li>Lamborghini</li> </ul> <ul class="outside"> <li>Honda</li> <li>Ferrari</li> <li>Porsche</li> <li>Derby</li> </ul>
- Toyota
- Tesla
- BMW
- Lamborghini
- Honda
- Ferrari
- Porsche
- Derby
توضيح:
- “;list-style-position: inside” تعني أن النقاط ستكون داخل عنصر القائمة. وبما أنه جزء من عنصر القائمة ، فسيكون جزءًا من النص ويدفع النص في البداية.
- “;list-style-position: outside” (الافتراضي): تعني أن النقاط ستكون خارج عنصر القائمة. وسيتم محاذاة بداية كل سطر من عناصر القائمة عموديًا.
4. خاصية list-style المختصرة
خاصية list-style هى خاصية مختصرة، يتم استخدامها لتعيين جميع خصائص القائمة في إعلان واحد، كالتالى:
<style> ul { list-style: circle inside url("circle.png"); } </style> <ul> <li>Toyota</li> <li>Tesla</li> <li>BMW</li> <li>Lamborghini</li> </ul>
- Toyota
- Tesla
- BMW
- Lamborghini
لاحظ: عند استخدام خاصية list-style المختصرة يكون ترتيب قيم الخاصية كما يلي:
- list-style-type.
- list-style-position.
- list-style-image.
إذا كانت إحدى قيم الخاصية المذكورة أعلاه مفقودة ، فسيتم إدراج القيمة الافتراضية للخاصية المفقودة ، إن وجدت.
إزالة الإعدادات الافتراضية
يمكن استخدام خاصية ;list-style-type:none لإزالة العلامات و الرموز النقطية. كالتالى:
ul { list-style-type: none; }
- Toyota
- Tesla
- BMW
- Lamborghini
لاحظ أن القائمة تحتوي أيضًا على padding وmargin افتراضي، ويمكن حلها عن طريق تَصفير كل من خاصية padding و margin، كالتالى:
ul { list-style-type: none; margin: 0; padding: 0; }
- Toyota
- Tesla
- BMW
- Lamborghini
ملخص الفصل
- تحدد خاصية list-style-type نوع علامة عنصر القائمة.
- تحدد خاصية list-style-image صورة على أنها علامة عنصر القائمة.
- list-style-type:none: يمكن استخدام هذه الخاصية لإزالة العلامات و الرموز النقطية.
- تحدد خاصية list-style-position موضع (أو مكان) علامات عنصر القائمة.
- خاصية list-style خاصية مختصرة، يتم استخدامها لتعيين جميع خصائص القائمة في إعلان واحد.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!