Get Adobe Flash player
דף הבית כללי עיצוב מאפייני רשימות

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

מאפייני CSS מאפשרים לקבוע את הערכים וסגנון המספור, את סוגי התבליטים וגם להמיר תבליטים בתמונות.

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

מאפיין סוג הסמן

המאפיין לקביעת סוג הסמן הוא list-style-type. והוא מתאים לשני סוגי הרשימות ממוספרת <ol> או רשימת תבליטים <ul>. מאחר ומדובר במאפיין אחד, יש צורך להפריד בין הבוררים.

בדוגמא הבאה, הבוררים a ו-b עובדים רק עם תג ol והבוררים c ו-d עובדים עם ol.

ul.a { list-style-type: circle;}
ul.b { list-style-type: square;}

ol.c { list-style-type: upper-roman;}
ol.d { list-style-type: lower-alpha;}

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

רשימת הערכים לרשימה ממוספרת כוללת שפות רבות, אולם לא כולם נתמכים ע"י כל הדפדפנים. מספור עברי, סיני ואותיות הירוגליפים לא תמכים ע"י אקספלורר (אבל נתמכים ע"י פיירפוקס וגוגל כרום).

הערה חשובה: את מאפיין סוג הסמן ניתן להוסיף לבוררים שונים. אפשר לשים אותו בבורר ה-body למשל, ואז כל הרשימות בדף יוצגו בהתאם.  

רשימת ערכי מספור הנתמכים ע"י כל הדפדפנים list-style-type:
מספור עשרוני (ברירת המחדל) decimal
מספור עשרוני עם קידומת 0 (01, 02 וכו') decimal-leading-zero
מספור באותיות קטנות lower-alpha
מספור באותיות גדולות (capital) upper-alpha
מספור בספרות רומיות קטנות lower-roman
מספור בספרות רומיות גדולות upper-roman
מספור באותיות יווניות קטנות lower-greek
מספור באותיות לטיניות קטנות lower-latin
מספור באותיות גדולות לטיניות (capital) upper-latin
מספור ארמני armenian
מספור גיאורגי georgian
ללא מספור none

 

רשימת ערכי מספור שנתמכים ע"י הדפדפנים חוץ מאינטרנט אקספלורר (IE)
מספור א"ב עברי hebrew
סימונים cjk-ideographic
סימונים hiragana
סימונים hiragana-iroha
מספור סיני katakana
מספור סיני katakana-iroha
ימשיך את הערכים שבאלמנט האב inherit

 

רשימת ערכי תבליט
עיגול שחור (ברירת המחדל) disc
טבעת (ברירת מחדל לרמה שנייה) circle
ריבוע שחור (ברירת מחדל לרמה שלישית) square
ללא תבליט none
 תמונה במקום תבליט

המאפיין list-style-image מופעל ברשימות תבליטים ומיועד להחלפת התבליט בתמונה. הערך למאפיין זה הוא url אליו מצרפים את שם התמונה בתוך סוגריים וגרש. בדוגמא הבאה, שני הסעיפים הראשונים מקבלים את הערך באמצעות הבורר (wink.gif) והשלישי את הערך הנקודתי (biggrin.gif):

<style type="text/css">
   ul { list-style-image: url ('images/smilies/wink.gif'); }
</style>
</head>
<body>
<ul>
<li>קריצה ראשונה</li>
<li>קריצה נוספת</li>
<li style="list-style-image: url('/images/smilies/biggrin.gif');">איזה חיוך</li>
</ul>

 והתוצאה:

  •   קריצה ראשונה
  •   קריצה נוספת
  •   איזה חיוך
  •  מיקום השורה וסמן

     המאפיין list-style-position משנה מעט את מיקום הרשימה מהשוליים הכללים בה היא נמצאת.

    למאפיין זה יש שני ערכים inside (ברירת המחדל) וoutside.

    הדוגמא הבאה ממחישה את ההבדלים בין השניים

    <style type="text/css">
    a { list-style-position: inside; }
    b { list-style-position: outside; }
    </style>
    </head>
    <body>
    <p>רשימה בעלת הערך inside</p>
    <ul class="a">
    <li>פירות קיץ נדירים בחורף, אבל ניתן למצוא אותם במחיר גבוה ובטעם פחות טוב</li>
    <li>פירות חורף נדירים בקיץ, אבל ניתן למצוא אותם במחיר גבוה ובטעם פחות טוב</li>
    <li>פירות כל השנה שכיחים כל השנה</li>
    </ul>
    <p>רשימה בעלת הערך outside:</p>
    <ul class="b">
    <li>פירות קיץ נדירים בחורף, אבל ניתן למצוא אותם במחיר גבוה ובטעם פחות טוב</li>
    <li>פירות חורף נדירים בחורף, אבל ניתן למצוא אותם במחיר גבוה ובטעם פחות טוב</li>
    <li>פירות כל השנה שכיחות כל השנה</li>
    </ul>

    רשימה בעלת הערך inside:

  • פירות קיץ נדירים בחורף, אבל ניתן למצוא אותם במחיר גבוה ובטעם פחות טוב
  • פירות חורף נדירים בחורף, אבל ניתן למצוא אותם במחיר גבוה ובטעם פחות טוב
  • פירות כל השנה שכיחות כל השנה
  • רשימה בעלת הערך outside:

  • פירות קיץ נדירים בחורף, אבל ניתן למצוא אותם במחיר גבוה ובטעם פחות טוב
  • פירות קיץ נדירים בחורף, אבל ניתן למצוא אותם במחיר גבוה ובטעם פחות טוב
  • פירות כל השנה שכיחות כל השנה
  • אפיון רשימה בהוראה אחת

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

    ערך של המאפיין list-style-type הראשון, לאחריו הערך של  list-style-position, ולבסוף החלפת התבליט בתמונה list-style-image.

    אם אחד המאפיינים חסר, הדפדפן יציב במקומו את ערך ברירת המחדל.

    דוגמא:

    ul
    {
    list-style: inside url("smile.gif");
    }

     

    אל השיעור הקודם