---
title: Lists
localeTitle: قوائم
---
# قوائم

يتم استخدام القوائم لعرض العناصر. هناك 3 أنواع من القوائم.

## قوائم مرتبة

يتم استخدام _قائمة مرتبة_ لوصف مجموعة مرتبة من البيانات. تعرض المتصفحات عادةً قائمة مرتبة كقائمة مُرقمة. قم بإنشاء قائمة مرتبة باستخدام العلامة `<ol>` .

## قوائم غير مرتبة

يتم استخدام _قائمة غير مرتبة_ لوصف مجموعة غير مرتبة من البيانات. تعرض المتصفحات عادة قائمة غير مرتبة كقائمة نقطية. إنشاء قائمة غير مرتبة باستخدام علامة `<ul>` .

## قائمة المواد

يجب أن يكون الأطفال المباشرون للقوائم المرتبة وغير المرتبة عناصر قائمة. يتم لف كل عنصر قائمة في `<li>` العلامة. يمكن أن تحتوي علامة عنصر القائمة على [محتوى التدفق](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content) .

## أمثلة

تتم كتابة قائمة مرتبة ك

 `<ol> 
  <li>January</li> 
  <li>February</li> 
  <li>March</li> 
 </ol> 
` 

ويتم عرضها على النحو التالي:

1.  كانون الثاني
2.  شهر فبراير
3.  مارس

قائمة غير مرتبة مكتوبة باسم

 `<ul> 
  <li>Macintosh</li> 
  <li>Fuji</li> 
  <li>Gala</li> 
 </ul> 
` 

ويتم عرضها على النحو التالي:

*   ماكنتوش
*   فوجي
*   مهرجان

## نقاط رصاص التصميم

يمكن استخدام قائمة مرتبة لمجموعة متنوعة من الوظائف وفي عدد من الأنماط. نظرًا لأن تغيير ألوان العلامة الشاملة لا يؤدي إلى تغيير لون الرموز النقطية نفسها ، فيمكنك تنسيقها من خلال إزالة الرموز السوداء التقليدية وإدخال التعدادات الخاصة بك:

إزالة الرموز النقطية:

 `ul { 
  list-style: none; 
  } 
` 

قم بإدخال الخاص بك:

 `ul li::before { 
  content: "\2022"; 
  color: orange; 
  display: inline-block; 
  width: 1em; 
  } 
` 

يضيف نمط المحتوى نقطية جديدة بينما يعمل نمط العرض والعرض على إنشاء مسافة بين الرمز النقطي والكلمة. يمكن تطبيق أنماط الخطوط العادية هنا إذا كنت ترغب في جعل الرمز النقطي أكبر أو أكثر جرأة.

## قوائم الوصف

قائمة الوصف هي قائمة من المصطلحات ، مع وصف لكل مصطلح. يتم إجراء قائمة وصف باستخدام العلامة `<dl>` . يتكون كل عنصر في القائمة من علامتين: عبارة `<dt>` ، ووصف لهذا المصطلح `<dd>` . يطلق عليها قوائم تعريف في HTML 4.

في ما يلي مثال لقائمة الوصف:

 `<dl> 
  <dt>Programming</dt> 
  <dd>The process of writing computer programs.</dd> 
  <dt>freeCodeCamp</dt> 
  <dd>An awesome non-profit organization teaching people how to code.</dd> 
 </dl> 
` 

والتي من شأنها أن تبدو وكأنها:

برمجة

عملية كتابة برامج الكمبيوتر.

freeCodeCamp

منظمة غير هادفة للربح رائعة تعليم الناس كيفية رمز.

## معلومات اكثر:

*   [قوائم HTML على w3schools](https://www.w3schools.com/html/html_lists.asp)