מדריך CSS – רשימות

‏ • Internet Israel

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

התכונה list-style-image מקבלת URL של תמונה כלשהי או את המילה none. אם יש לדפדפן גישה אל התמונה הוא יציג אותה, אם לא, יציג הדפדפן את מה שהוגדר כ- list-style-type.
כדי לקבל תוצאות יפות כאן מומלץ להשתמש בתמונות קטנות.

Ul li{list-style-image:url(/images/bcg.gif);list-style-type:square;}

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

התכונה list-style-position ממקמת את התמונה או הסימון בתוך (inside) או מחוץ (outside), ואלה מתייחסים לשורה הבאה אחרי התבליט, כלומר האם היא תחזור לקו הסימון(inside) או, לפי ברירת המחדל (outside) תישאר מוזחת פנימה. בעברית, אין הבדל בין השניים.

List-style-type משמשת לשני תפקידים:

  • במסגרת UL היא יכולה לקבל אחד מהערכים הבאים: disc, circle, square או none. ברירת המחדל disc היא עיגול ממולא, circle הוא עיגול שתוכו ריק ואילו square הוא ריבוע. (איך לא).
  • במסגרת OL התכונה יכולה לקבל מספר ערכים: decimal – מספר עשרוני, lower-roman ספרות רומיות קטנות, upper-roman – ספרות רומיות גדולות, lower-alpha – אותיות אנגליות קטנות, upper-alpha – אותיות אנגליות גדולות, או none. רוב הדפדפנים מקצים decimal כברירת מחדל.

    ניתן גם לכתוב בקיצור list-style ולזרוק לשם ערכים ללא סדר מסויים:

    Li.yyy{list-style: lower-roman inside;}
    Li.xyz{list-style: url(images/smiley.gif) circle outside;}
    
  • תגיות: , ,

    רן בר-זיק

    מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.אינטרנט ישראל: www.internet-israel.com

    תגובות בפייסבוק