צור קשר
מאמרים אחרונים
עיצוב רשימות
ב-html קיימים שני סוגים של רשימות:
- Ordered list - רשימות ממוספרות שבהן הפריטים מסומנים במספרים או אותיות. ניתן לבחור בספרות רומיות או ספרות רגילות, אותיות גדולות או קטנות ועוד.
- Unordered list - רשימות לא ממוספרות, שבהן הפריטים מסומנים ע"י נקודות (bullets) או כל סימן אחר. ניתן לבחור את הצורה המועדפת עלינו.
- Definition list - רשימת הגדרות, שבה לכל פריט יש מספר הגדרות.
ניתן לקרוא בהרחבה על סוגי הרשימות של HTML5 כאן.
CSS מאפשר לנו לעצב את הסימנים של פריטים ברשימה. עושים זאת באמצעות התכונה list-style-type.
נניח שאנו מעצבים אתר של מתכונים ובו ישנם כמה סוגים של רשימות: מצרכים, כלים, הכנות ושלבי הכנה. נוכל באמצעות CSS להחליט להבדיל בין הרשימות, כך שכל סוג ישתמש בסימון שונה של הפריטים, וזה יהיה אחיד בכל עמודי האתר. לשם כך, נגדיר תחילה מחלקה שונה לכל סוג רשימה, ולאחר מכן נגדיר עבור כל מחלקה כיצד היא תעוצב. כך למשל בדוגמה הבאה ברשימת המצרכים יהיו נקודות בצבע מלא (disc), ברשימת הכלים - עיגולים חלולים, ברשימת ההכנות - ספרות רומיות קטנות וברשימת שלבי ההכנה יהיו אותיות אנגליות קטנות:
list-style-type:disc;
}
ul.tools {
list-style-type:circle;
}
ol.preparations {
list-style-type:lower-roman;
}
ol.stages {
list-style-type:lower-alpha;
}
בנוסף לסימנים המקובלים, ניתן באמצעות CSS להגדיר תמונה בתור הסימון של פריטי הרשימה. לשם כך משתמשים בתכונה list-style-image.
list-style-image:url("star.webp");
}
ישנם הבדלים בין הדפדפנים השונים, כך שהתמונות מוצגות בהם בגבהים שונים. ניתן לפתור זאת ע"י הגדרת סימון הפריטים עבור הסלקטור li, באופן כזה שהשוליים וה-padding עבור התמונה יוגדרו במדויק, וכל הדפדפנים יציגו את התמונה במיקום זהה.
קיצור תכונות הרשימה
ניתן לקצר את רשימת כל התכונות שאנו מעוניינים להגדיר, ע"י שימוש בתכונת הקיצור list-style ולאחריה כל הערכים ברצף, מופרדים ברווחים, כמו בדוגמה הבאה:
list-style:square url("sqpurple.webp");
}
בעת שימוש בתכונת הקיצור, ניתן להגדיר את כל התכונות או להחסיר אחת מהן.
