מאמרים אחרונים מאמרים אחרונים
15/05/2020 13:15
בניית אתר קטלוגי למכירה של סוככים, מרקיזות, פרגולות ומרקיזות
13/05/2020 15:41
בניית חנות וירטואלית לשעונים לגבר ולאישה
13/05/2020 15:06
בניית חנות וירטואלית לתכשיטים מעוצבים באנגלית ובעברית
30/04/2020 14:51
חנות מקוונת למכירה של חלקים ואביזרים לרכבי שטח
29/04/2020 21:10
בניית חנות אינטרנטית למכירת דלתות מעוצבות
תגובות אחרונות תגובות אחרונות
עיצוב רווחים ושוליים
21/04/2020 12:37
היי, קוד ה-CSS יכול להרשם בכל...
עיצוב רווחים ושוליים
02/04/2020 6:24
את העיצוב בשפת css כותבים בדף ...
תהליך בניית אתרים
17/10/2019 13:13
אחלה מאמר! ערך מעולה!

עיצוב רשימות

  1. דף הבית
  2. מדריך HTML5
  3. עיצוב רשימות

פרק זה עוסק בעיצוב הסימון של פריטים ברשימות (Lists) ממוספרות או בלתי ממוספרות.

CSS מאפשר לנו לעצב את הסימנים של פריטים ברשימה. עושים זאת באמצעות התכונה list-style-type.

ב-html קיימים שני סוגים של רשימות:

  • Ordered list - רשימות ממוספרות שבהן הפריטים מסומנים במספרים או אותיות. ניתן לבחור בספרות רומיות או ספרות רגילות, אותיות גדולות או קטנות ועוד.
  • Unordered list - רשימות לא ממוספרות, שבהן הפריטים מסומנים ע"י נקודות (bullets) או כל סימן אחר. ניתן לבחור את הצורה המועדפת עלינו.

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

ul.ingredients {
    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.

ul {
    list-style-image:url("star.jpg");
}

ישנם הבדלים בין הדפדפנים השונים, כך שהתמונות מוצגות בהם בגבהים שונים. ניתן לפתור זאת ע"י הגדרת סימון הפריטים עבור הסלקטור li, באופן כזה שהשוליים וה-padding עבור התמונה יוגדרו במדויק, וכל הדפדפנים יציגו את התמונה במיקום זהה.

קיצור תכונות הרשימה

ניתן לקצר את רשימת כל התכונות שאנו מעוניינים להגדיר, ע"י שימוש בתכונת הקיצור list-style ולאחריה כל הערכים ברצף, מופרדים ברווחים, כמו בדוגמה הבאה:

ul {
    list-style:square url("sqpurple.gif");
}

בעת שימוש בתכונת הקיצור, ניתן להגדיר את כל התכונות או להחסיר אחת מהן, כל עוד סדר הערכים הבא יישמר תמיד:

  • list-style-type
  • list-style-position
  • list-style-image

 

הוספת תגובה

רוצה שנקפיץ גם את העסק שלך?

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

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

 

לא מהססים! ממלאים את הטופס או מתקשרים עכשיו 077-7644819

 
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: