מדריך לעיצוב רשימות בשפת CSS

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

הגדרת סגנון הרשימה ומצייני הפריטים ברשימה (list-style-type)

באמצעות התכונה list-style-type נגדיר את הסמן (marker) של פריטי הרשימה. ברשימות מסודרות <ol> נגדיר באמצעות תכונה זו את סוג המספור שיתלווה לכל פריט ואילו ברשימות לא מסודרות <ul> נגדיר את סוג התבליט המסמן את תחילתו של כל פריט ברשימה.

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

ערך רשימת ערכים
רשימה מסודרת 1. armenian - מספור ארמני.
2. decimal - מספור עשרוני.
3. decimal-leading-zero - מספור עשרוני עם אפסים מובילים.
4. georgian - מספור גאורגיאני.
5. lower-alpha - אותיות לועזיות קטנות.
6. lower-greek - אותיות יווניות קטנות (אלפא ביתה וכדומה.)
7. lower-latin - אותיות לטיניות קטנות כגון a, b, c וכדומה.
8. lower-roman - אותיות רומיות קטנות כגון  i, ii, iv וכדומה.
9. upper-alpha - אותיות לועזיות גדולות כגון: A, B, C
10. upper-latin - אותיות לטיניות גדולות
11. upper-roman - אותיות רומיות גדולות
רשימה לא מסודרת 1. circle - סמן בצורת עיגול.
2. disc - סמן בצורת עיגול מלא בצבע.
3. none - ללא סמן.
4. square - סמן בצורת ריבוע.

בדוגמת הקוד הבאה אציג כיצד נשתמש בתכונה list-style-type כדי להגדיר את סוג הסמן / מספור ברשימות מסודרות כמו גם ברשימות לא מסודרות:

הגדרת עיצוב לשתי רשימות לא מסודרות
ul.square {list-style-type:square;}
ul.disc {list-style-type:disc;}
הגדרת עיצוב לשתי רשימות מסודרות
ol.ur {list-style-type:upper-roman;}
ol.ua {list-style-type:upper-alpha;}


עיצוב רשימות בעזרת תמונות (list-style-image)

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


ul
{
list-style-image:url('OrangeBullet.png');
}

קביעת מרחק מצייני הפריטים ברשימה מתחילת הרשימה

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

1. inside - כניסה עמוקה יותר של הפריטים ברשימה יחסית לטקסט שסביבם.

2. outside - מצייני הפריטים יהיו בדרך כלל מחוץ לטקסט הסובב את הרשימה. זוהי ברירת המחדל של תכונה זו.

3. inherit - יורש את ההגדרה מן האלמנט שבתוכו הרשימה מקננת.


בדוגמת הבאה אדגים את השימוש בתכונה list-style-position:

דוגמה לכניסת טקסט לא עמוקה
ul.out
{
list-style-position:outside;
}
דוגמה להגדרת כניסת טקסט עמוקה
ul.in
{
list-style-position:inside;
}

 

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

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


list-style: <list-style-type> <list-style-position> <list-style-image>

בדוגמה הבאה אציג  כיצד יש להגדיר תכונות רשימה באמצעות כתיב מקוצר:

כתיב מקוצר
ul { list-style: url("marker.png") disc inside; }

אותה שורה בכתיב ארוך
ul {
list-style-image: url("marker.png");
list-style-marker: disc;
list-style-position: inside;
}


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש