מאפייני 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.

מאפיין מקוצר `list-style`

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

התכונה list-style היא מאפיין מקוצר שניתן להגדיר באמצעותו את list-style-type, list-style-position, ו-list-style-image בבת אחת. הסדר גמיש, אך לרוב הוא נכתב כמו בדוגמה זו. במקרה זה, יופיע סימון ריבועי בתוך פריט הרשימה, ותמונה תוצג כסימון (מארקר).

סיכום

list-style היא תכונה מקוצרת שמאפשרת לקבוע את המראה של הרשימה (סוג סימון, מיקום, תמונה מותאמת אישית) בבת אחת.
ניתן גם להגדיר את 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 Video

מאפייני CSS הקשורים לעיצוב מודל התיבה תכונות CSS הקשורות לטבלאות

מאפייני CSS הקשורים לרשימות

YouTube Video

HTML לתצוגה מקדימה

הקשור לרשימות

מאפיין list-style

מבנה list-style

שימוש בסיסי

הסבר על מאפיינים בודדים

list-style-type

דוגמה של ערך

list-style-position

list-style-image

מאפיין מקוצר list-style

סיכום

מונה CSS (counter())

יצירה ואתחול של מונים

העלאה של ערכי מונים

counters()

הבדלים בין counter ל-counters

תחביר של הפונקציה counters

דוגמה לשימוש בפונקציה counters

דוגמה מתקדמת לשימוש במונים מרובי-רמות

סיכום

YouTube Video

מאפיין `list-style`

מבנה `list-style`

`list-style-type`

`list-style-position`

`list-style-image`

מאפיין מקוצר `list-style`

מונה CSS (`counter()`)

`counters()`

הבדלים בין `counter` ל-`counters`

תחביר של הפונקציה `counters`

דוגמה לשימוש בפונקציה `counters`