خصائص CSS المتعلقة بالقوائم

Articles

توضح هذه المقالة خصائص CSS المتعلقة بالقوائم۔

يمكنك تعلم كيفية استخدام وكتابة الخاصية list-style والدالة counter()۔

YouTube Video

HTML للمعاينة

css-list.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

مرتبط بالقوائم

خاصية `list-style`

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

خاصية list-style هي خاصية في CSS تُستخدم لتحديد نمط علامات القوائم (مثل النقاط أو الأرقام) لعناصر القائمة في HTML مثل <ul> و <ol>۔ تتيح لك هذه الخاصية التحكم في النمط العام للقائمة، مما يجعلها مفيدة لتخصيص مظهر القوائم۔

في هذا المثال، يتم تطبيق الأنماط التالية۔

ul: يتم عرض العلامات الدائرية المجوفة داخل القائمة۔
ol: يتم ترقيمها باستخدام الأرقام الرومانية الكبيرة وتُعرض الأرقام بالخارج۔
فئة custom-list: يتم عرض الصورة المحددة كعلامة۔

هيكل `list-style`

list-style هي اختصار للخصائص الثلاث التالية:

list-style-type: تحدد نوع العلامة (نقطة أو رقم) لعناصر القائمة۔
list-style-position: تحدد ما إذا كانت العلامة توضع داخل (inside) أو خارج (outside) عنصر القائمة۔
list-style-image: تحدد صورة لتُستخدم كعلامة للقائمة۔

الاستخدام الأساسي

1ul {
2    list-style: square inside url('path/to/image.png');
3}

يعمل هذا الكود على النحو التالي:

list-style-type: square: تعيّن نوع العلامة إلى شكل مربع۔
list-style-position: inside: يتم عرض العلامة داخل عنصر القائمة۔
list-style-image: url('path/to/image.png'): تستخدم صورة كعلامة۔

شرح الخصائص الفردية

`list-style-type`

list-style-type يحدد نوع العلامة للقائمة۔ الأنماط المتاحة للاستخدام تعتمد على نوع القائمة۔

مثال على القيمة

 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}

none: لا يتم عرض أي علامة۔
disc (افتراضي): دائرة سوداء صغيرة۔
circle: دائرة صغيرة فارغة (حلقة)۔
square: مربع صغير۔
decimal: قائمة مرقمة مثل 1، 2، 3، ...۔
lower-alpha: الأبجدية بالحروف الصغيرة مثل a، b، c، ...۔
upper-alpha: الأبجدية بالحروف الكبيرة مثل A، B، C، ...۔
lower-roman: الأرقام الرومانية بالحروف الصغيرة مثل i، ii، iii، ...۔
upper-roman: الأرقام الرومانية بالحروف الكبيرة مثل I، II، III، ...۔

`list-style-position`

1ul {
2    list-style-position: inside;
3}

list-style-position تحدد ما إذا كانت العلامة (النقطة) توضع خارج أو داخل عنصر القائمة۔ list-style-position يمكن أن تحتوي على القيم التالية:۔

outside: يتم وضع العلامات خارج عنصر القائمة، ويبدأ العنصر بعد العلامة۔ هذه هي القيمة الافتراضية۔
inside: يتم وضع العلامات داخل عنصر القائمة وتُعرض كجزء من النص۔

`list-style-image`

1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

يتم ضبط خاصية list-style-image عند استخدام صورة كعلامة للقائمة۔ تُحدد الصورة باستخدام url()، وإذا لم يتم تحميل الصورة، تظهر العلامة المحددة بواسطة list-style-type۔

خاصية shorthand `list-style`

1ul {
2    list-style: square inside url('bullet.png');
3}

خاصية list-style هي خاصية shorthand يمكنها ضبط list-style-type و list-style-position و list-style-image في نفس الوقت۔ الترتيب مرن، ولكنه يُكتب عادة كما في هذا المثال۔ في هذه الحالة، تظهر علامة مربعة داخل عنصر القائمة، وتُعرض صورة كعلامة۔

الملخص

list-style هي خاصية shorthand تتيح لك تحديد مظهر القائمة (نوع العلامة، الموقع، الصورة المخصصة) دفعة واحدة۔
من الممكن أيضًا تعيين list-style-type و list-style-position و list-style-image بشكل فردي۔
يمكنك تخصيص علامات القوائم بمرونة وفقًا للتصميم والتخطيط۔

عداد CSS (`counter()`)

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

يمكنك استخدام عدادات CSS لترقيم عناصر القوائم أو العناصر المحددة تلقائيًا۔

إنشاء وتهيئة العدادات

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

يمكنك إنشاء عداد وإعادة تعيينه باستخدام خاصية counter-reset۔

زيادة العدادات

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

يمكنك زيادة عداد باستخدام خاصية counter-increment وعرض قيمة العداد باستخدام وظيفة counter۔

`counters()`

وظيفة counters في CSS مفيدة جدًا لإدارة العدادات المخصصة، مثل ترقيم عناصر القوائم أو تنظيم الفقرات۔ تستطيع هذه الوظيفة ربط قيم متعددة للعدادات باستخدام سلسلة نصية وعرضها في محتوى CSS۔ هنا، سنشرح بالتفصيل من الاستخدام الأساسي لوظيفة counters إلى أمثلة تطبيقية عملية۔

الاختلافات بين `counter` و `counters`

تُستخدم وظيفتا counter و counters لعرض قيم العدادات، لكن بينهما الاختلافات التالية۔

counter: تسترجع قيمة عداد واحد۔
counters: تربط قيمًا متعددة للعدادات باستخدام فاصل محدد وتعرضها۔

على سبيل المثال، إذا كنت تريد استخدام عدادات مع عناصر قائمة متداخلة، يمكنك استخدام وظيفة counters لعرضها عن طريق ربط عدادات الوالد والطفل۔

صيغة وظيفة `counters`

counters(<counter-name>, <string>);

تُستخدم وظيفة counters بالصغة التالية۔

<counter-name>: يحدد اسم العداد المراد استخدامه۔
<string>: يحدد النص الذي سيتم إدراجه بين كل عداد (عادةً يكون فاصلًا مثل . أو -)۔

مثال على استخدام وظيفة `counters`

بعد ذلك، دعنا نلقي نظرة على مثال باستخدام وظيفة counters۔

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}

في هذا المثال، يتم ربط عدادات الوالد والطفل لقائمة متداخلة من مستويين۔
- يتم تعريف العداد list-counter۔
- تُستخدم الدالة counters لدمج وعرض عداد القائمة الرئيسية وعداد القائمة الفرعية۔

مثال متقدم باستخدام العدادات متعددة المستويات

باستخدام وظيفة counters، يمكنك إدارة العدادات متعددة المستويات بمرونة مثل الترقيم المخصص أو ترقيم الفقرات.۔ على سبيل المثال، يكون ذلك مفيدًا عند إنشاء مستندات تحتوي على فصول وأقسام.۔

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

في هذا الكود، يتم إعادة تعيين العدادات للفصول (h1) والأقسام (h2) والأقسام الفرعية (h3)، ويتم استخدام وظيفة counters لدمج كل مستوى.۔

الملخص

وظيفة counters مفيدة جدًا عندما تريد تخصيص وعرض عدادات متعددة بشكل هيكلي.۔ باستخدام عدادات CSS، يمكنك تخصيص ترقيم القوائم والعناوين بحرية، مما يمنح صفحات الويب بنية معلوماتية متقدمة.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بتزيين نموذج الصندوق خصائص CSS المتعلقة بالجداول

خصائص CSS المتعلقة بالقوائم

YouTube Video

HTML للمعاينة

مرتبط بالقوائم

خاصية list-style

هيكل list-style

الاستخدام الأساسي

شرح الخصائص الفردية

list-style-type

مثال على القيمة

list-style-position

list-style-image

خاصية shorthand list-style

الملخص

عداد CSS (counter())

إنشاء وتهيئة العدادات

زيادة العدادات

counters()

الاختلافات بين counter و counters

صيغة وظيفة counters

مثال على استخدام وظيفة counters

مثال متقدم باستخدام العدادات متعددة المستويات

الملخص

YouTube Video

خاصية `list-style`

هيكل `list-style`

`list-style-type`

`list-style-position`

`list-style-image`

خاصية shorthand `list-style`

عداد CSS (`counter()`)

`counters()`

الاختلافات بين `counter` و `counters`

صيغة وظيفة `counters`

مثال على استخدام وظيفة `counters`