10. קישורים מיוחדים עם CSS
קבוצות של קישורים
קישורים יכולים לעשות הרבה דברים. הם יכולים להצביע על כתובות e-mail, כתובות ftp, חלקים אחרים באותו אתר, או על אתרים אחרים לגמרי. אנחנו לא יודעים בדיוק מה הוא שנמקם את סמן העכבר מעליו ונבדוק את ה-url, או עד ש"נקליק" עליו.
זה היה נחמד אם אפשר היה לקודד את הקישורים שלנו, כך שהמשתמשים יכולים להבחין אילו סוג קישורים אלה רק מתוך הסתכלות עליהם. עם CSSים וקבוצות אנו יכולים לעשות את זה בדיוק. למעשה, ע"י שילוב של בוררי הקישורים ( המכונים בצורה טכנית pseudo class selectors), כמו: A:hover (חלק 7), עם בוררי קבוצות, אנו יכולים ליצור סגנון לקבוצות של קישורים במצבים שונים.
זה בדיוק מה שנעשה בשיעור זה
תרגיל מס' 1
קודם כל, הבה נחשוב על קבוצות הקישורים השונות שיכולות להופיע בדף.
התשובות בתחתית, כרגיל.
בוחן פתע
מהם ארבעת בוררי המצב של הקישורים שראינו בקביעת הקישורים?
שילוב בוררי הקבוצה ובוררי הקישור
זה החלק המבלבל. עלינו לשלב את בוררי הקבוצה עם בוררי הקישור. בכדי לעשות זאת, נשתמש בצורה הבאה
A.class-name:link-state
לדוגמא:
A.ftp:link
תרגיל מס' 2
צרו את הבוררים הבאים:
- הבורר שבוחר קישורי e-mail במצב הפעיל שלהם.
- הבורר שבוחר קישורי ftp במצב הריחוף שלו.
- הבורר שבוחר קישורים לאתרים אחרים (offsite) שכבר ביקרתם בהם.
תרגיל מס' 3
הבנתם את זה? עכשיו אנו רוצים ליצור כללים לבחירה וליישום סגנון לכל אחת מקבוצות הקישורים האלה, בדף שלנו.
התשובות בתחתית, כמובן לאחר שיצרתם את הכללים שלכם.
תרגיל מס' 4
דבר אחרון, עלינו לסמן את הקבוצות הללו בדף האתר שלנו.
הדוגמאות נמצאות בסוף שיעור זה.
כעת, שימרו את ה- CSS ואת דף האתר. פיתחו את הדף בדפדפן שלכם (IE4 אם יש לכם אותו, רק כדי שתיהנו מאפקט הריחוף).
שלב הבא
בשיעור זה התחכמנו קצת, כששילבנו את בורר הקבוצות המדומה (בורר הקישור) עם בורר הקבוצות. התקדמנו מאוד.
בשלב הבא כעת נבחן נושא חשוב, כיצד להבטיח שאתרים המבוססים על CSSים ייראו בסדר בדפדפנים ישנים יותר.
תשובה לתרגיל מס' 1
- קישורי onsite שמכוונים לחלקים אחרים באותו אתר - זאת אומרת, קישורים יחסיים.
- קישורי offsite שמכוונים לאתרים אחרים מאתר זה - זאת אומרת, קישורים מוחלטים (absolute).
- קישורי ftp המכוונים לאתרי ftp להורדת קבצים.
- קישורי e-mail לשליחת דואר לקישורים.
בטוח שתוכלו לחשוב על קישורים נוספים.
תשובה לתרגיל מס' 2
- הבורר, כדי לבחור קישורי e-mail במצבם הפעיל, הוא
A.email:active
- הבורר, כדי לבחור קישורי ftp במצב הריחוף שלו, הוא
A.ftp:hover
- הבורר, כדי לבחור קישורי offsite שביקרו בהם, הוא
A.offsite:visited
תשובה לתרגיל מס' 3
A.onsite:link {background-color: #ccffcc}
A.onsite:visited {background-color: #99ffcc}
A.onsite:active {background-color: #66ffcc}
A.onsite:hover {background-color: #33ffcc}
A.offsite:link {background-color: #ffccff}
A.offsite:visited {background-color: #ff99ff}
A.offsite:active {background-color: #ff99ff}
A.offsite:hover {background-color: #ff66ff}
A.ftp:link {background-color: #ffffcc}
A.ftp:visited {background-color: #ffff99}
A.ftp:active {background-color: #ffff66}
A.ftp:hover {background-color: #ffff33}
A.email:link {background-color: #00ffff}
A.email:visited {background-color: #66ffff}
A.email:active {background-color: #99ffff}
A.email:hover {background-color: #ccffff}
תשובה לתרגיל מס' 4
<HTML>
<HEAD>
<TITLE>Choux</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="core-style.css">
</HEAD>
<BODY>
<H1>Classic Patisserie Recipes</H1>
<H2>Pastry Cream</H2>
<P>Also known as creme patissiere, this is the traditional filling
for <A class="onsite" HREF="fruit_tarts.html">fresh fruit tarts</A>. It is also used
to fill <A class="onsite" HREF="choux_puffs.html">choux puffs</A>.</P>
<H3>Ingredients</H3>
<P>2 cups milk</P>
<P>1 vanilla bean</P>
<P>6 egg yolks</P>
<P>175g castor sugar</P>
<P>50g cornflour</P>
<H3>Method</H3><
<P>Scald milk with vanilla bean. Beat egg yolks with cornflour until
thick. Pour in milk and whisk until quite smooth.</P>
<H1>More Information</H1>
<P>to contact the author, email me on
<A class="email" HREF="mailto:john@masterchef.org">john@masterchef.org</A></P>
<P>to download all my recipes in acrobat format,
<A class="ftp" HREF="ftp://ftp.masterchef.org/recipes.pdf">click here</A></P>
<P>for other recipes, see biodynamic recipes from
<A class="offsite" HREF="http://www.biodyn.nu">http://www.biodyn.nu</A></P>
</BODY>
</HTML> |
