82 lines
2.8 KiB
Markdown
82 lines
2.8 KiB
Markdown
![]() |
---
|
||
|
title: How to Use Lists
|
||
|
localeTitle: كيفية استخدام القوائم
|
||
|
---
|
||
|
## كيفية استخدام القوائم
|
||
|
|
||
|
تستخدم القوائم لتحديد مجموعة من العناصر المتتالية أو المعلومات ذات الصلة بطريقة محكمة التشكيل والدلائل ، مثل قائمة المكونات أو قائمة بالخطوات الإجرائية. يحتوي ترميز HTML على ثلاثة أنواع مختلفة من القوائم - قوائم **مرتبة** وغير **مرتبة** **والوصف** .
|
||
|
|
||
|
### القوائم المطلوبة
|
||
|
|
||
|
يتم استخدام قائمة مرتبة لتجميع مجموعة من العناصر ذات الصلة ، بترتيب معين. يتم إنشاء هذه القائمة مع العلامة `<ol>` . كل عنصر قائمة محاط بعلامة `<li>` .
|
||
|
|
||
|
##### الشفرة
|
||
|
|
||
|
`
|
||
|
<ol>
|
||
|
<li>Mix ingredients</li>
|
||
|
<li>Bake in oven for an hour</li>
|
||
|
<li>Allow to stand for ten minutes</li>
|
||
|
</ol>
|
||
|
`
|
||
|
|
||
|
##### مثال
|
||
|
|
||
|
1. مزيج المكونات
|
||
|
2. يُخبز في الفرن لمدة ساعة
|
||
|
3. السماح للوقوف لمدة عشر دقائق
|
||
|
|
||
|
### قوائم غير مرتبة
|
||
|
|
||
|
يتم استخدام قائمة غير مرتبة لتجميع مجموعة من العناصر ذات الصلة ، دون ترتيب معين. يتم إنشاء هذه القائمة مع العلامة `<ul>` . كل عنصر قائمة محاط بعلامة `<li>` .
|
||
|
|
||
|
##### الشفرة
|
||
|
|
||
|
`
|
||
|
<ul>
|
||
|
<li>Chocolate Cake</li>
|
||
|
<li>Black Forest Cake</li>
|
||
|
<li>Pineapple Cake</li>
|
||
|
</ul>
|
||
|
`
|
||
|
|
||
|
#### مثال
|
||
|
|
||
|
* كعكة الشوكولاتة
|
||
|
* كيكة الغابة السوداء
|
||
|
* كعكة الأناناس
|
||
|
|
||
|
### وصف القوائم
|
||
|
|
||
|
يتم استخدام قائمة وصف لتحديد قائمة من العبارات وأوصافها. يتم إنشاء هذه القائمة بعلامة `<dl>` . كل عنصر قائمة محاط بعلامة `<dd>` .
|
||
|
|
||
|
##### الشفرة
|
||
|
|
||
|
`
|
||
|
<dl>
|
||
|
<dt>Bread</dt>
|
||
|
<dd>A baked food made of flour.</dd>
|
||
|
<dt>Coffee</dt>
|
||
|
<dd>A drink made from roasted coffee beans.</dd>
|
||
|
</dl>
|
||
|
`
|
||
|
|
||
|
##### انتاج |
|
||
|
|
||
|
خبز
|
||
|
|
||
|
طعام مخبوز مصنوع من الطحين.
|
||
|
|
||
|
قهوة
|
||
|
|
||
|
مشروب مصنوع من حبوب البن المحمص.
|
||
|
|
||
|
#### قائمة التصميم
|
||
|
|
||
|
يمكنك أيضا التحكم في نمط القائمة. يمكنك استخدام خاصية القوائم على `list-style` القائمة. يمكن أن تكون قائمتك نقطية أو مربعة أو في numearls رومانية أو يمكن أن تكون الصور التي تريدها.
|
||
|
|
||
|
الخاصية على `list-style` هي اختصار `list-style-type` ، `list-style-position` `list-style-image` ، `list-style-image` .
|
||
|
|
||
|
#### معلومات اكثر:
|
||
|
|
||
|
\[HTML lists · WebPlatform Docs\] (https://webplatform.github.io/docs/guides/html\_lists/ )
|