ספר הבישול של דפי הסגנון

רשימות של נקודות ציון ו-CSS

לעיתים קרובות, אפילו באתרים הכי גדולים, תמצאו רשימות של נקודות ציון עם דמויות גיפ כנקודות ציון. לצערי, בעזרת HTML בלבד (ללא CSS) לא תוכלו ליצור רשימות אמיתיות עם נקודות הציון של גיפ משלכם. תמצאו שרשימות אלה לעולם אינן רשימות HTML ללא סדר <UL> .

שימו לב שזהו מאפיין תקף לחלוטין של דף סגנון, אך Netscape Navigator 4 ו-4.5 עבור מקינטוש וחלונות לא תומך בגיפים עבור נקודות ציון.

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

ב-HTML שלכם:

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

<ul>
<li>this is the first list item
<ul>
<li>this is the first item in the second level
</ul>
<li>this is the second list item at the first level
</ul>

בדף הסגנון:

בדף הסגנון שלכם אנו צריכים לטפל בשני מקרים. הראשון הוא פריט הרשימה של הרמה העליונה. אז, עלינו לדאוג לגבי פריט הרשימה של הרמה השנייה.

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

הפריט של הרמה העליונה הוא פשוט. אנו רוצים לבחור רק פריטי רשימה, שזה בדיוק כמו לבחור פיסקאות וכותרות של רמה 1, זאת אומרת

בחירה של פריטי רשימה מרמה שנייה היא כמו בחירה של קישורים בתוך פיסקאות של מעמד מסויים, שראינו בחלק המדבר על פסי הניווט שלנו. במקרה זה, אנו מעוניינים בפריטי רשימה הנמצאים בתוך רשימות ללא סדר <UL>- ים, שהם בעצמם נמצאים בתוך רשימות ללא סדר. זאת אומרת

UL UL LI

כעת, אנו צריכים לציין את ה-URL עבור הדמות. כאן, אנו משתמשים במאפיין list-style-image (רשימה-סגנון-דמות) ולתת לו URL כפי שכבר ראינו :

{list-style-image: url(../gifs/l1bullet.gif)}

למטה, יש דוגמא פשוטה של זה. שימו לב שוב שזה לא נתמך ע"י Netscape Navigator 4, למרות שזה כן יתמך בגירסא 5.

זה פרט הרשימה הראשון.
- זה הפריט הראשון ברמה השנייה.
זהו פריט הרשימה השני ברמה הראשונה.