וובמאסטר - תיכנות ובניית אתרים

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

רן בר-זיק ,‏ אינטרנט ישראל‏ ‏/‏ 4 ינואר, 2004
F+
F-
אפשר באמצעות גליונות סגנון לעצב את המראה של פריטים ברשימות. דפדפנים מתייחסים לרשימות כמו כל בלוק אחר של טקסט, פרט לעובדה שלבלוק זה יש מקדם מסוג מסויים כגון מספור (במקרה של 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
    תגיות: CSS‏  /  מדריך‏  /  בניית אתרים‏  

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

    תגובות למאמר



    תגיות פופולאריות

    X
    הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
    וובמאסטר © כל הזכויות שמורות