עיצוב רשימות ב-CSS
ב-HTML קיימים 3 סוגי רשימות:
- רשימה ממוספרת (ordered list) - רשימה שיש חשיבות לסדר האיברים שבה. נהוג להציג את הרשימה באמצעות מיספור של כל איבר בספרות (1,2,3), באותיות (a,b,c), בספרות רומיות או בשיטות נוספות. תגיות ה-HTML המשמשות ליצירת רשימה ממוספרת הן ol להגדרת הרשימה ו-li להגדרת איברי הרשימה.
- רשימה לא ממוספרת (unordered list) - רשימה שאין חשיבות לסדר האיברים שבה. נהוג להציג את הרשימה באמצעות סימון אחיד של נקודת ציון (bullet) לכל איבר ברשימה, למשל על ידי נקודת ציון המעוצבת כעיגול שחור. תגיות ה-HTML המשמשות ליצירת רשימה לא ממוספרת הן ul להגדרת הרשימה ו-li להגדרת איברי הרשימה.
- רשימת תאורים (description list) - רשימה שהאיברים בה הם הגדרות עם תאור או הסבר להגדרה. נהוג להציג את הרשימה במבנה של הגדרה-תאור-הגדרה-תאור. את ההגדרות מבליטים באמצעות טקסט מודגש או עם קו תחתי. תגיות ה-HTML המשמשות ליצירת רשימת תאורים הן dl להגדרת הרשימה ו-dt להגדרת איברי הרשימה.
ניתן לקרוא בהרחבה על הגדרת רשימות ב-HTML.
עיצוב רשימות (כל אחת מ-3 סוגי הרשימות) מתבצע באמצעות התכונות list-style-type, list-style-image, list-style-position שאותן נסקור להלן.
ניתן לקבוע כל אחת מתכונות אלו עבור הרשימה עצמה (תגיות ol, ul, dl) או עבור איבר הרשימה (תגית li, dt). המלצתנו היא שאם התכונה רלוונטית לכלל הרשימה, יש להגדירה עבור הרשימה עצמה ולא עבור איבריה.
הגדרת טיפוס הרשימה
טיפוס הרשימה הוא עיצוב הסמן (המארקר, נקודת הציון) של הרשימה שמאפיין כל איבר ברשימה. שינוי טיפוס הרשימה נעשה באמצעות התכונה list-style-type.
להלן הערכים האפשריים לתכונה זו:
- none - ללא סימון
- circle - עיגול ריק
- disc - עיגול מלא
- square - ריבוע מלא
- disclosure-closed - סימן (בד"כ משולש) שמראה שמונח מוצג באופן סגור לגולש
- disclosure-open - סימן (בד"כ משולש) שמראה שמונח מוצג באופן פתוח לגולש
- hebrew - מיספור באותיות עבריות
- lower-alpha - מיספור באותיות אנגליות קטנות
- upper-alpha - מיספור באותיות אנגליות גדולות
- lower-roman - מיספור באותיות רומיות קטנות
- upper-roman - מיספור באותיות רומיות גדולות
- decimal - מיספור במספרים עם נקודה המייצגת תתי רשימה
דוגמה:
ol {
list-style-type:lower-roman;
}
ul {
list-style-type:circle;
}
article ul {
list-style-type:disc;
}
article ul.fruits {
list-style-type:square;
}בדוגמה זו, הגדרנו שאיברים ברשימת ol כלשהי באתר ימוספרו באמצעות אותיות רומיות קטנות, איברים ברשימת ul כלשהי באתר יסומנו באמצעות עיגול חלול, איברים ברשימת ul שבתוך האלמנט article יסומנו באמצעות עיגול מלא (דיסקית) ואיברים ברשימת ul מהמחלקה fruits שבתוך האלמנט article יסומנו באמצעות ריבוע מלא.
נשים לב שניתן לקבוע נקודת ציון מספרית או שאינה מספרית גם לתגיות ul וגם לתגיות ol. בחירת התגית ul או ol צריכה להקבע בהתאם לשיקול: האם יש חשיבות לסדר האלמנטים ברשימה או לא (ולא אם האיברים ממוספרים בפועל בתצוגה). לדוגמה, ניתן לקבוע רשימת פירות שצריך לשים בסלט פירות, באמצעות רשימת ul (כי אין חשיבות לסדר הפירות בסלט) ולמספר את איברי הרשימה ב- 1,2,3.
הגדרת תמונת הרשימה
תמונת הרשימה היא תמונה מותאמת אישית שניתן לקבוע כסמן הרשימה. שינוי תמונת הרשימה נעשה באמצעות התכונה list-style-image. ערך ברירת המחדל לתכונה זו הוא none, כלומר, ללא תמונה מותאמת אישית.
במקרה של הגדרה גם של list-style-type וגם של list-style-image, תוצג התמונה שקבענו בהגדרת התכונה list-style-image. במקרה כזה, ההגדרה של list-style-type היא סוג של fallback, כלומר, היא תבוצע רק אם מסיבה כלשהי לא ניתן לטעון את התמונה שהוגדרה בתכונה list-style-image (לדוגמה, אם התמונה אינה קיימת בכתובת שקבענו).
דוגמה:
ol {
list-style-image:url('my_bullet.webp');
}הגדרת מיקום סמן הרשימה
באמצעות התכונה list-style-position ניתן לקבוע את מיקום הסמן (המארקר) של הרשימה: מחוץ או בתוך איבר הרשימה. כלומר, האם סמן הרשימה יחשב כחלק מהאיבר של הרשימה או לא.
הערכים האפשריים לתכונה זו:
- inside - הסמן יהיה בתוך איבר הרשימה
- outside - הסמן יהיה מחוץ לאיבר הרשימה
אם סמן הרשימה הוא בתוך איבר הרשימה, המשמעות היא שעיצוב של איבר הרשימה יכלול גם את עיצוב הסמן. אם לדוגמה קבענו שאיבר הרשימה מוסט כמה תווים פנימה לתוך הטקסט, אז גם סמן הרשימה יוסט פנימה. אם קבענו שאיבר הרשימה יהיה עם רקע אדום, אז גם סמן הרשימה יהיה עם רקע אדום.
אם סמן הרשימה הוא מחוץ לאיבר הרשימה, הגדרות עיצוב של איבר הרשימה לא יכללו את עיצוב הסמן.
דוגמה:
article ul {
list-style-position:inside;
}שימוש בתכונה list-style בצורה מקוצרת
ניתן להשתמש בתכונה list-style כקיצור עבור התכונות list-style-type, list-style-image, list-style-position.
כלומר, במקום לקבוע ערכים לכל אחת מ-3 התכונות לעיל בנפרד, ניתן לקבוע ערך אחד עבור התכונה list-style שכולל את כל הערכים שנרצה ביחד.
אין חשיבות לסדר הערכים של התכונה list-style.
דוגמה:
ol {
list-style:lower-roman inside;
}
ul {
list-style:circle;
}בדוגמה זו, תכונת list-style שנקבעה לתגית ol מחליפה את התכונות list-style-type ו-list-style-position. תכונת list-style שנקבעה לתגית ul מחליפה את התכונה list-style-type בלבד.
