خصائص القوائم 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>

 

تشمل قيم الكلمات الرئيسية المقبولة لـ 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>

---

---

 

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>

 

توضيح:

• “;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>

 

لاحظ: عند استخدام خاصية list-style المختصرة يكون ترتيب قيم الخاصية كما يلي:

1. list-style-type.
2. list-style-position.
3. list-style-image.

 

---

 

إزالة الإعدادات الافتراضية

 

يمكن استخدام خاصية ;list-style-type:none لإزالة العلامات و الرموز النقطية. كالتالى:

ul {
  list-style-type: none; 
}

لاحظ أن القائمة تحتوي أيضًا على padding وmargin افتراضي، ويمكن حلها عن طريق تَصفير كل من خاصية padding و margin، كالتالى:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

---

 

ملخص الفصل

 

• تحدد خاصية list-style-type نوع علامة عنصر القائمة.
• تحدد خاصية list-style-image صورة على أنها علامة عنصر القائمة.
• list-style-type:none: يمكن استخدام هذه الخاصية  لإزالة العلامات و الرموز النقطية.
• تحدد خاصية list-style-position موضع (أو مكان) علامات عنصر القائمة.
• خاصية list-style خاصية مختصرة، يتم استخدامها لتعيين جميع خصائص القائمة في إعلان واحد.