יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
12/01/2022 12:57
בניית חנות באינטרנט למדבקות קיר מעוצבות ולתמונות קנבס
05/01/2022 15:55
אתר מכירות פומביות לרכישת מוצרים באמצעות שיטת המכרז האנגלי לפיה זוכה בעל ההצעה הגבוהה ביותר
29/11/2021 16:33
29/11/2021 16:32
29/11/2021 16:32
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...

עיצוב רשימות

  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
או מלא את הטופס להלן: