כיצד לעצב רשימות עם CSS

סיכום רשימות HTML

ישנם שני סוגים עיקריים של רשימות ב- HTML - הורה ו ממוין .

בשנת הורה רשימות (

), סדר פריטי הרשימה חשוב. הפריטים עשויים להופיע לפי סדר, מספר רומאי, ספרות אלפא או סוג אחר של סמן. סמן ברירת המחדל לרשימות שהוזמנו הוא מספר (או decimal):

בשנת ממויינת רשימות (

), סדר פריטי הרשימה לא משנה. הפריטים מופיעים בתבנית תבליט. סמן ברירת המחדל לרשימות לא מסודרות הוא נקודת תביעה עגולה או disc.

כל פריט ברשימה ברשימה מסודרת או לא מסודרת נוצר עם התג.

סגנונות ספציפיים לרשימה

ישנם שלושה ספציפיים המאפיינים המשותפים רשימות סטיילינג: list-style-type, list-style-position, ו list-style-image. יש גם נכס קצר שכולל את כל השלושה.

list-style-type

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

דוגמה לרשימה מסודרת:

/* css */ ol { list-style-type: upper-roman; }

דוגמה לרשימה לא מסודרת:

/* css */ ul { list-style-type: square; }

אין דוגמה לסמן:

/* css */ ul { list-style-type: none; }

הערכים המקובלים עבור list-style-typeהנכס כוללים:

לא מסודר:

• דיסק ( ברירת מחדל )
• מעגל
• כיכר

הוזמן:

• עשרוני ( ברירת מחדל )
• עשרוני-מוביל-אפס
• רומנית תחתונה
• רומנית עליונה
• יווני נמוך יותר
• לטינית תחתונה
• לטינית עליונה
• אַרְמֶנִי
• גיאורגית
• תחתון-אלפא
• עליון-אלפא

אַחֵר:

• אף אחד

הערה: כל ערכי המאפיינים המפורטים לעיל יכולים לשמש לעיצוב רשימות מסודרות ובלתי מסודרות (למשל: רשימה מסודרת עם squareסמני רשימה).

list-style-position

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

מקם את הסמן outsideשל אלמנט פריט הרשימה וכל שורות הטקסט ושורות המשנה של כל פריט רשימה יישרו אנכית:

/* css */ ul { list-style-position: outside; /* default */ }

מקם את הסמן ושורת insideהטקסט הראשונה של כל פריט ברשימה תוטה בכדי לפנות מקום לסמן. כל שורות משנה של אותו פריט רשימה יתיישרו עם הסמן ולא עם שורת הטקסט הראשונה:

/* css */ ul { list-style-position: inside; }

list-style-image

list-style-imageרכוש מקבל כתובת אתר של תמונה במקום של הסמן הרשימה. ערך ברירת המחדל של מאפיין זה הוא none.

/* css */ ul { list-style-image: url(//url-to-image); }

list-style קַצרָנוּת

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

דוגמא:

/* css */ ul { list-style: circle inside none; }

סטיילינג ספציפי יותר לרשימה

תגי רשימות מסודרים מקבלים גם תכונות השולטות בזרימה, בספירה או בערכי סמן ספציפיים של פריטי הרשימה שלה. אלה כוללים את start, reversed, ו valueתכונות. לפרטים נוספים, עיין במשאבי ה- MDN המפורטים להלן.

סטיילינג כללי

ניתן לעצב תוכן רשימה בדיוק כמו אחרים pאו divאלמנטים. color, font-family, margin, padding, או borderהם רק כמה דוגמאות של תכונות כי ניתן להוסיף גם את ul, olאו liאלמנטים.

Note that any styles added to the ul or ol element will affect the entire list. Styles added directly to the li elements will affect the individual list items. In the example below, the border and background-color properties are styled differently between the list and list item elements:

/* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

List Spacing

You may notice extra spacing in front of the list items when list-style-type is set to none. Setting padding to 0 (or whatever spacing is preferred) on the list element will override this default padding.

/* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

Sources:

The links below were referenced in compiling information found in this article. Please visit them for further details about this topic.

More Information:

MDN - Styling Lists

W3Schools - CSS Lists

CSS Tricks - list-style