path: root/files/ar/web/guide/css/getting_started/القوائم/index.html

---
title: القوائم
slug: Web/Guide/CSS/Getting_started/القوائم
translation_of: Learn/CSS/Styling_text/Styling_lists
---
<p>{{ CSSTutorialTOC() }}</p>

<p dir="rtl"> الصفحة السابقة هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") أما هذا الجزء فهو العاشِر في سلسلة  تعليم لغة CSS على هذا الموقع  <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a>، وهو يصف كيف يُمكن استخدام لغة الـCSS لتحديد مظهر القائمة. ستقوم بإنشاء مثال مستند يحتوي على قائمة بالـHTML  وملف تنسيق بلغة الـCSS والذي من خلاله سوف نقوم بتنسيق القائمة التي قمنا بإنشَائها. </p>

<h2 class="clearLeft" dir="rtl" id="معلومات_عن_القوائم">معلومات عن القوائم </h2>

<p dir="rtl">لو نظرت إلى الجزء السابق، سوف يتضح لك  كيف يمكن إضافة محتـوًى قبل أي عنصر بحيث يظهر وكأنّه عنصرٌ في قائمة.</p>

<p dir="rtl">تقدم لغة الـCSS بعض الخواص المُصَمَّـمَـة للقائمة، والتي يجب استخدامها دائما مع القوائم.</p>

<p dir="rtl">لتحديد نمط القائمة، عليك استخدام هذه الخاصية «<strong>list-style</strong>» وذلك لتحديد نوع  العلامة الموجودة قبل كل عنصر في القائمة. </p>

<div class="note" dir="rtl">
<p>من الممكن أن يتم اختيار القائمة ككل بهذا الوسم «<em>ul</em>» أو اختيار عنصر بداخل القائمة من خلال هذا الوسم «<em>li</em>».  </p>

<p>وعند اختيار القائمة ككل فإنَّ هذا الوسم يسمى الأب للقائمة وهو«<em>ul</em>»، ويورث الخواص التى تٌطبق عليه لكُـلِّ عنصر في القائمة. </p>
</div>

<h3 dir="rtl" id="القوائم_غير_المرتبة">القوائم غير المرتبة</h3>

<p dir="rtl"> في القوائم غير المُرَتَّـبة، يكون كل عنصر من القائمة معَلَّــمًا بنفس الطريقة. </p>

<p dir="rtl"> يوجد ثلاثة أنواع من العلامات، وأدناه هي كيفية عرض المتصفح لهذه العلامات:</p>

<p dir="rtl">• disc  قرص </p>

<p dir="rtl">○ circle دائرة</p>

<p dir="rtl">◘ square مربع</p>

<p dir="rtl">بدلا من ذلك، يمكن تحديد رابط صورة لاستخدامها كعلامة للعناصر بدل من العلامات السابقة.</p>

<div class="tuto_example">
<h3 dir="rtl" id="مثال">مثال </h3>

<p dir="rtl"> هذه القواعد تُـوَضِّح علامات مختلفة لأصناف (classes) مختلفة من عناصر القائمة:</p>

<pre class="brush:css" dir="rtl">li.open {
    list-style: circle;
}
li.closed {
    list-style: disc;
}
</pre>

<p dir="rtl">عندما يتم استعمال هذه الأصناف (classes) في قائمة، تقوم بالتمييز بين العناصر المفتوحة والمغلقة (مثلًا في قائمة مهامّ).</p>

<pre class="brush: html" dir="rtl">&lt;ul&gt;
  &lt;li class="open"&gt;Lorem ipsum&lt;/li&gt;
  &lt;li class="closed"&gt;Dolor sit&lt;/li&gt;
  &lt;li class="closed"&gt;Amet consectetuer&lt;/li&gt;
  &lt;li class="open"&gt;Magna aliquam&lt;/li&gt;
  &lt;li class="closed"&gt;Autem veleum&lt;/li&gt;
&lt;/ul&gt;
</pre>

<p dir="rtl">وهكذا تبدو النتيجة: </p>

<div class="syntaxbox">  ○ Lorem ipsum</div>

<div class="syntaxbox">  •  Dolor sit</div>

<div class="syntaxbox">  •  Amet consectetuer</div>

<div class="syntaxbox">  ○ Magna aliquam</div>

<div class="syntaxbox">  • Autem veleum</div>

<div class="syntaxbox"> </div>
</div>

<h3 dir="rtl" id="القوائم_المُـرَتَّـبة">القوائم المُـرَتَّـبة </h3>

<p dir="rtl">في القوائم المُرتّبة، يكون لكل عنصر علامة مختلفة تُميّز موضعه في القائمة.</p>

<p dir="rtl">استخدم الخاصية «list-style» لتعيين نمط القائمة، لتحديد نوع العلامة التي تظهر قبل كل عنصرفي القائمة.</p>

<ul style="padding-left: 2em;">
 <li style=""><code>decimal (تعداد بأرقام عشرية)</code></li>
 <li style=""><code>lower-roman (تعداد بحروف رومانية صغيرة)</code></li>
 <li style=""><code>upper-roman (تعداد بحروف رومانية كبيرة)</code></li>
 <li style=""><code>lower-latin (تعداد بحروف لاتيتنية صغيرة)</code></li>
 <li style=""><code>upper-latin (تعداد بحروف لاتينية كبيرة)</code></li>
</ul>

<div class="tuto_example">
<div class="tuto_type" dir="rtl"> </div>

<h4 class="tuto_type" dir="rtl" id="مثال_2">مثال                                                                                                                                              </h4>

<div class="tuto_type" dir="rtl">القاعدة التّالية تجعل العناصر في القائمة المرتّبة &lt;ol&gt; والتي تٌميز بصنف .«info» مُرتبة بحروف لاتينية كبيرة.  </div>

<div class="tuto_type" dir="rtl"> </div>

<pre class="brush: html">&lt;ol class="info"&gt;
  &lt;li&gt;Lorem ipsum&lt;/li&gt;
  &lt;li&gt;Dolor sit&lt;/li&gt;
  &lt;li&gt;Amet consectetuer&lt;/li&gt;
  &lt;li&gt;Magna aliquam&lt;/li&gt;
  &lt;li&gt;Autem veleum&lt;/li&gt;
&lt;/ol&gt;</pre>

<pre class="brush:css">ol.info {
    list-style: upper-latin;
}
</pre>

<div class="note" dir="rtl">
<p>عند تطبيق خاصية النمط على الـ «<em>ol</em>»  يُوَرِّثُ هذه الخاصية إلى الأبناء وهم عناصر القائمة المرتبة وهي العناصر المسبوقة بوسم «<em>li</em>».</p>
</div>

<p dir="rtl">فتكون النتيجة كالتالي:</p>

<div class="syntaxbox">ِA. Lorem ipsum</div>

<div class="syntaxbox">B. Dolor sit</div>

<div class="syntaxbox">C. Amet consectetuer</div>

<div class="syntaxbox">D. Magna aliquam</div>

<div class="syntaxbox">E. Autem veleum</div>
</div>

<div class="tuto_details">
<div class="tuto_type">
<h3 dir="rtl" id="تفاصيل_أكثر">تفاصيل أكثر                                                                             </h3>

<div class="syntaxbox" dir="rtl">الخاصية «list-style» هي خاصية مختصرة أي أنه من الممكن استخدامها إذا أردت أن يكون نمط القائمة سواء كان </div>

<div class="syntaxbox" dir="rtl"> (صورة أو رقم أو شكل أو حرف )</div>

<div class="syntaxbox" dir="rtl">       ولكن يمكن أن تستخدم خواص منفردة لكل شكل على حدة وليكن للصورة لها  خاصية محددة مثل «list-style-image»    </div>

<p dir="rtl">يمكنك مراجعة هذه الخاصية وما بها من تفاصيل من خلال هذه الصفحة  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style">list style</a> </p>

<div class="syntaxbox" dir="rtl">إن كنت تستخدم لغة HTML فإنها تُـوفر وسوما مُختلفة، فعلى سبيل المثال  للقوائم المرتبة يُستخدم هذا الوسم «ol»</div>

<div class="syntaxbox" dir="rtl">والقوائم  الغير مرتبة «ul»</div>

<div class="syntaxbox" dir="rtl">  فيفضّل استخدام هذه القوائم بحسب دلالتها ولكن من الممكن إذا أردت أن تجعل القوائم المرتبة كغير المرتبة شكلا </div>

<div class="syntaxbox" dir="rtl">والعكس، فذلك يتم من خلال الـCSS أيضا يتم كل هذا باستخدام الخواص المختلفة لتحصل على ما تريد من نتائج </div>

<div class="syntaxbox" dir="rtl">ولكن يُفَضَّـل أن تُسْتَخدم كل قائمة حسب وضعها والاستخدام الخاص بها. </div>

<div class="syntaxbox" dir="rtl"> </div>

<p dir="rtl">قد تختلف المتصفّحات في طرق عرضها لتنسيق القوائم، لا يُمكن أن تحصُل على نفس النتيجة في كل المتصفحات. </p>
</div>
</div>

<h3 dir="rtl" id="العَـدَّادَات">العَـدَّادَات</h3>

<div dir="rtl" style="border: 1px solid red; padding: 6px; margin: 0px -6px 0.5em 0px; width: 100%;">
<p><strong>ملاحظة هامّة</strong>:</p>

<div class="syntaxbox">  بعض المتصفحات لا تدعم العدّادات، تقدّم هذه الصّفحة <a href="http://www.quirksmode.org/css/contents.html">CSS contents and browser comptability</a> على موقع <a href="http://www.quirksmode.org/">QuirksMode</a> معلومات تفصيلية عن دعم  المتصفحات لهذه الميزة وميزات أخرى.</div>

<div class="syntaxbox">كما توفّر الصّفحات الفرديّة في <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" rel="external noopener noreferrer">CSS</a> مرجعا للمعلومات عن دعم  المتصفحات أيضا لهذه الخاصية وغيرها.</div>
</div>

<p> </p>

<div class="syntaxbox" dir="rtl">يُمكن استخدام العدّادات لعدّ أيّة عناصر، وليس فقط عناصر القوائم، فمثلًا يمكن عدّ العناوين والفقرات في المستند.</div>

<div class="syntaxbox" dir="rtl">تحتاج إلى إنشاء عدّاد counter باسم خاص بك لتستخدمه فى العّد.</div>

<div class="syntaxbox" dir="rtl"> </div>

<div class="syntaxbox" dir="rtl"> يمكن تهيئة العدّاد قبل البدء بالعدّ باستخدام الخاصية «counter-reset» واسم العدادَ الخاص بك الذي أنشأته. </div>

<div class="syntaxbox" dir="rtl">وعليك أن تعلم أن الأب للعنصر الذي تقوم بِعده هو المكان الأنسب لتهيئة العّداد، ولكن يمكن استخدام أي عنصر يأتي قبل العناصر المطلوب عدّها.</div>

<div class="syntaxbox"> </div>

<div class="syntaxbox" dir="rtl"> في كلّ عنصر ترغب بعدّه، استخدم الخاصية «counter-increment» مع اسم العّداد الذي تٌريده.</div>

<div class="syntaxbox" dir="rtl"> استخدم «befor» ،«:after:» لعرض العدّاد، مع استخدام هذه الخاصية «content» مع العنصر المٌحدد المُراد عّده (سيتم شرح ذلك لاحقاَ).</div>

<div class="syntaxbox" dir="rtl">يمكنك معرفة معلومات أكثر عن هذه الخاصية في هذه الصفحة <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content">Content</a>. </div>

<div class="syntaxbox"> </div>

<h4 class="syntaxbox" dir="rtl" id="استخدام_()counter_مع_اسم_العّداد_كقيمة_لـcontent">استخدام ()counter مع اسم العّداد كقيمة لـcontent   </h4>

<div class="syntaxbox" dir="rtl">ويمكن كذلك استخدام نوع للعلامة فى العد. الأنواع المُتاحة هي التي تم عرضها في فقرة القوائم المرتّبة.</div>

<p dir="rtl">عادةً يزيد العنصر الّذي يعرض العدّاد من قيمته. </p>

<div class="tuto_example">
<div class="tuto_type" dir="rtl">          مثال                                                                                                                                            </div>

<div class="tuto_type" dir="rtl"> </div>

<div class="tuto_type" dir="rtl">    هذه القاعدة تُنشئ عدّادًا لكلّ عنصر&lt;h3&gt; له تصنيف (كلاس) «numbered»:                                          </div>

<pre class="brush:css">h3.numbered {
    counter-reset: mynum;
}
</pre>

<p dir="rtl"> أما هذه القاعدة فهى تعرض عّداد الـ &lt;p&gt;  والتي لها تصنيف «numbered»</p>

<pre class="brush: html">&lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
&lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
&lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
&lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
&lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
</pre>

<pre class="brush:css">body {
   counter-reset: mynum;
}
p.numbered:before {
  content: counter(mynum) ": ";
  counter-increment: mynum;
  font-weight: bold;
}
</pre>

<p dir="rtl">والنتيجة ستبدُو هكذا:</p>

<div class="syntaxbox"><strong>1:</strong> Lorem ipsum</div>

<div class="syntaxbox"><strong>2:</strong> Dolor sit</div>

<div class="syntaxbox"><strong>3:</strong> Amet consectetuer</div>

<div class="syntaxbox"><strong>4:</strong> Magna aliquam</div>

<div class="syntaxbox"><strong>5:</strong>  Autem veleum</div>

<div class="syntaxbox"> </div>
</div>

<div class="tuto_details">
<div class="tuto_type" dir="rtl">تفاصِيل أكثر                                                                                                                                 </div>

<div class="syntaxbox" dir="rtl"> </div>

<div class="syntaxbox" dir="rtl">   لا تستطيع استخدام العَدادات إلا إذا تيقنت من أنَ كل شخص يستخدم العدادات يستعمل  متصفحاً يُدعمها.  </div>

<div class="syntaxbox" dir="rtl">  العًدادات بها مِيزات ويمكن تنسيقها منفصلة عن عنصر القَائمة المرافِقة لها كما في المثال السابق </div>

<div class="syntaxbox" dir="rtl">ترى أن العًدادات لها تنسيق خاص فهي بِخط عريض غير عناصر القّائمة.  </div>

<div class="syntaxbox" dir="rtl"> </div>

<div class="syntaxbox" dir="rtl">يمكن أيضًا استخدام العدّادات بطرق أكثر تعقيدًا؛ مثلًا: لعدّ الفقرات والعناوين والعناوين الفرعيّة والفقرات في المستندات الرسمية.</div>

<div class="syntaxbox" dir="rtl"> ولتفاصِيل أكثر عليك الرجوع إلى هذِه الصفحة  <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a>.</div>
</div>

<h2 dir="rtl" id="تمرين_قوائم_مُنسقة">تمرين: قوائم مُنسقة</h2>

<p dir="rtl">   قم بإنشاء ملف  HTML  باسم doc2.html، انسخ والصق هذا المحتوى إلى الملف الخاص بك:</p>

<pre class="brush:html;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Sample document 2&lt;/title&gt;
    &lt;link rel="stylesheet" href="style2.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
    &lt;ul&gt;
      &lt;li&gt;Arctic&lt;/li&gt;
      &lt;li&gt;Atlantic&lt;/li&gt;
      &lt;li&gt;Pacific&lt;/li&gt;
      &lt;li&gt;Indian&lt;/li&gt;
      &lt;li&gt;Southern&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;

  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p dir="rtl">  قم بإنشاء ملف CSS وقُم بتسميته  style2.css، انسخ والصق هذه الشيفرة البرمجية إلى صفحتك:</p>

<pre class="brush:css;">/* numbered paragraphs */
h3.numbered {counter-reset: mynum;}

p.numbered:before {
  content: counter(mynum) ": ";
  counter-increment: mynum;
  font-weight: bold;
}
</pre>

<p dir="rtl">قم بتغيير أسلوب  التعليقات كما تحبّ إن لم يعجبك هذا.</p>

<p dir="rtl">افتح الملف على المٌتصفح الخاص بِك. إذا كان متصفحط يَدعم العّدادات سوف ترى النتيجة كما هي موضحة أدناه، وإن لم يكُن يُدعمها فلن ترى إلاَّ الأرقام والنُقتطان قبل القائمة التي هي بعنوان «Numbered paragraphs» :</p>

<h3 id="The_oceans">The oceans</h3>

<div class="syntaxbox">Arctic</div>

<div class="syntaxbox">Atlantic</div>

<div class="syntaxbox">Pacific</div>

<div class="syntaxbox">Indian</div>

<div class="syntaxbox">Southern</div>

<h3 id="Numbered_paragraphs">Numbered paragraphs</h3>

<div class="syntaxbox"><strong>1:</strong>Lorem ipsum</div>

<div class="syntaxbox"><strong>2:</strong>Dolor sit</div>

<div class="syntaxbox"><strong>3:</strong>Amet consectetuer</div>

<div class="syntaxbox"><strong>4:</strong>Magna aliquam</div>

<div class="syntaxbox"><strong>5:</strong>Autem veleum</div>

<div class="tuto_example">
<div class="tuto_type" dir="rtl"> تمرين إضافي                                                                                                                                          </div>

<div class="syntaxbox" dir="rtl"> أضِف قاعدة لملف التنسيق الخاص بك بحيث تجعل النمط قبل عناصِر القائِمة بحروف رومانية من i إلى v، بحيث تحصل على هذه النتيجة: </div>

<div class="syntaxbox" dir="rtl"> </div>

<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>

    <ul style="">
     <li>Arctic</li>
     <li>Atlantic</li>
     <li>Pacific</li>
     <li>Indian</li>
     <li>Southern</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p dir="rtl">وقم بتغييرها مرة أُخرى إلى حروف لاتينية كبيرة قبل عناصرالقائمة، وستكون النتيجة هكذا: </p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p>

    <p><strong>. . .</strong></p>

    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p>

    <p><strong>. . .</strong></p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">See solutions to these challenges.</a></p>

<h2 dir="rtl" id="ما_هو_القادم_؟">ما هو القادم ؟</h2>

<p dir="rtl">الصفحة القادمو هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")</p>

<p dir="rtl">عندما يعرض المتصفّح مستند الخاص بك، فإِنه يُنشئ مساحات حول العناصر عندما يضعها في مواضعها في الصّفحة. الصفّحة القادِمة تصف كيف يُمكن استخدام لغة الـCSS لتَّعامل مع  هذه الأشكال من خلال الـ<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">boxes</a>.</p>