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

تعديل المقال

الأقسام CSS Tutorial

تعلم البرمجة ببساطة