الكورس

Advertisements

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

  1. JAVA
  2. Python
  3. Ruby
  4. 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

Advertisements

 

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 المختصرة يكون ترتيب قيم الخاصية كما يلي:

  1. list-style-type.
  2. list-style-position.
  3. 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 خاصية مختصرة، يتم استخدامها لتعيين جميع خصائص القائمة في إعلان واحد.

 



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements