מדריך CSS מספר 8 - איך לעצב רשימות (lists)

שלבים

1. 1

   שלב 1

   אם אינכם יודעים כיצד להשתמש באלמנטי הרשימות בHTML, ראו את המדריך המקושר. בדומה לעיצוב רשימות בHTML, גם בCSS ניתן לעצב את הרשימה בתבליטים שונים כמו עיגולים, ריבועים וכו'. כמו כן, אפשר לסדר את התבליטים במספרים, ספרות רומיות, אותיות וכדומה.
2. 2

   שלב 2

   
   ul.square {list-style-type:square;} ol.ordered {list-style-type:lower-alpha;}

   An unordered lists:

   • one square
   • two square
   • three square

   An ordered lists:

   1. Bob
   2. Shimon
   3. Israel
4. 3

   שלב 3

   
   הגדרנו סלקטור לunsorted list (אלמנט הul) שנקרא square (בחרנו בשם זה שרירותית) והגדרנו שהlist-style-type יהיה square (תבליטים מרובעים) באותו אופן הגדרנו שהרשימה הממויינת (הod) תהיה ממויינת לפי אותיות באנגלית (רשימה מלאה של סוגי הטבלאות ניתן למצוא במדריך הטבלאות בHTML באתר). כעת נגדיר שתבליטי הרשימה יהיו תמונות שהגדרנו מראש:
5. 4

   שלב 4

   
   ul {list-style-image:url('smiley.jpg');}

   • Happy
   • Very happy
   • Very Very happy
6. 5

   שלב 5

   
   כך יראו תבליטי התמונות.