מדריך לעיצוב קישורים (Links) בשפת CSS

קישורים (links) הם נשמת אפו של האינטרנט. הם הדבק המדביק את ים המידע העצום ורחב הידיים הזה והופך אותו ליצירה האנושית הגדולה ביותר בהיסטוריה. בפרק זה נעסוק בדרכים השונות להשפיע על צורת הקישורים ועיצובם בדף HTML בעזרת CSS ותכונותיו:

עיצוב קישורים באמצעות שימוש באירועים (Pseudo class selectors)

בצד המחלקות התקניות ב - CSS מתקיימות להן גם דמוי מחלקות המאפשרות פעילות דמוית אירועים (Events) באלמנטים שונים בדף ה - HTML. דמויי המחלקות (Pseudo class selectors) הבולטים ביותר בקבוצה זו הם אלו הקשורים לקישורים ומספרם ארבעה:

a:link {}
a:visited {}
a:hover {}
a:active {}

link - הקישור הבסיסי. כאן נגדיר את מראהו של הקישור כאשר הוא עומד בתוך הדף בלא כל אינטראקציה עם הגולש.

visited - כאן נגדיר את מראה הקישור לאחר שהמשתמש כבר השתמש בו.

hover - החשוב מבין ארבעת דמוי המחלקות. כאן נגדיר כיצד ייראה הקישור כאשר הגולש יעביר את העכבר שלו מעל הקישור.

active - כאן נגדיר כיצד ייראה הקישור כאשר הינו פעיל, קרי, כאשר המשתמש לוחץ עליו בעכברו.

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

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


עיצוב קישורים בעזרת תכונות דקורטיביות של טקסט (Text Decorations)

בתכונה text-decoration נשתמש כדי לעצב את הדקורציה של הטקסט המרכיב את הקישור. תכונה זו בצירוף התמיכה ב"אירועים" הקשורים לקישורים תאפשר לנו לעצב ולשנות כרצוננו את הדקורציה של הטקסט לאורך כל מחזור החיים הפונקציונאלי של הקישור. בטבלה הבאה נפרט מהם הערכים שתכונה זו יכולה לקבל ומה שימושיהם בעיצוב קישורים.

ערך הסבר
blink גורם לטקסט של הקישור להבהב. בדרך כלל נשתמש בתכונה דקורטיבית זו במצב של link ונעשה זאת כאשר נרצה להסב את תשומת ליבו של הגולש לקישור שלנו.
רצוי לא להשתמש בתכונה זו משום שאינה נתמכת במרבית הדפדפנים הגדולים מלבד ב - Firefox.
none כברירת מחדל כל קישור יוצג על ידי הדפדפן עם קו תחתי מתחת לטקסט. באם איננו רוצים בכך, אזי עלינו לציין none בערך לתכונה והדבר יגרום להסרת הקו התחתון. ברוב המקרים נשתמש בתכונה זו במצב דמוי המחלקה link. עמודת התוכן הימנית בדף זה עושה שימוש כזה בתכונה זו.
overline גורם להצגת קו עילי מעל הטקסט של הקישור. לא מקובל לעבוד עם ערך זה אולם לעתים יש העושים בקו העילי שימוש כדי להדגיש את השינוי בקישור בשעה שהמשתמש מעביר את העכבר שלו מעל הקישור. מומלץ להשתמש בערך זה רק בזמן האירוע hover.
underline גורם להצגת קו תחתי מתחת לטקסט בקישור. כברירת מחדל כל הקישורים מוצגים למשתמש עם קו תחתי. לעתים עושים מעצבים שימוש בערך זה במצב hover. במקרה זה יוסר הקו התחתי במצב link.

בדוגמה הבאה ניקח את שורות הקוד מדוגמת הקוד הקודמת וניצוק לתוכה הגדרות עיצוב העושות כולן שימוש בתכונה  text-decoration:


a:link{text-decoration:none}
a:visited{text-decoration:none}
a:hover{text-decoration:underline}
a:active{text-decoration:overline}

   

עיצוב קישורים תוך שימוש בתכונות של גופנים (Fonts)

כאמור, בעזרת ארבעת דמויי האירועים במחזור החיים של קישור ביכולתנו להשפיע על עיצובם של קישורים בדף ה - HTML שלנו. שפת CSS מעמידה לרשותנו מספר תכונות הקשורות לגופנים (Fonts) שביכולתנו לגייס לטובת עיצוב קישורים. להלן טבלה המרכזת תכונות אלו ומפרטת מתי מומלץ להשתמש בכל תכונה:

תכונה  הסבר
font-family באמצעות תכונה זו נגדיר את משפחת סוגי הגופנים של הקישור.
בדרך כלל לא מקובל לשנות את סוג הגופן בקישור אלא
להשתמש בפונטים שהוגדרו לאותו אלמנט בדף שבתוכו יושביםהקישורים.
במידה ובכל זאת אתם מחליטים לעשות שימוש בתכונה זו אזי
רצוי להגדירה במצב link בלבד.
font-size בבאמצעות תכונה זו נגדיר את גודל הגופנים בקישור. בדרך כלל מקובל
שגודל האות בקישור יהיה זהה לזה שבאלמנט שבתוכו הקישור נמצא.
אם בכל זאת אתם מחליטים על שימוש בתכונה זו אזי רצוי להשתמש
בה במצבים: link ו/או hover. בדרך כלל נגדיר את גודל הגופן כך שיהיה
גדול מסביבתו במטרה להבליטו. אם בחרתם להשתמש
בתכונה זו במצב hover אזי יש לשים לב שהגדלת הגופן אינה גורמת לדחיקת
אלמנטים אחרים בדף בצורה שתקלקל את העיצוב הכללי שלו.
font-style בדרך כלל נשתמש בתכונה זו כדי להגדיר שהגופן שלנו יהיה במצב נורמלי
או במצב של נטיה (italic). גם כאן מקובל להשתמש בתכונה זו במצבים
link ו/או hover.
font-weight באמצעות תכונה זו נגדיר את עוביו של הגופן בקישור שלנו. נשתמש
בתכונה זו במצב link כדי להדגיש את הקישור יחסית לסביבתו ובמצב hover
כדי להמחיש למשתמש שהוא עומד על קישור.

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

a:link{text-decoration:none;font-weight:120%;}
a:visited{text-decoration:none;font-size:inherit;}
a:hover{text-decoration:underline;font-style:italic;}
a:active{text-decoration:underline;font-weight:120%;}

   


עיצוב קישורים תוך שימוש בשינויי צבע

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


a:link{text-decoration:none;background-color:blue;color:white;}
a:visited{text-decoration:none;background-color:blue;color:white;}
a:hover{text-decoration:underline;background-color:red;color:yellow;}
a:active{text-decoration:none;background-color:blue;color:white;}

   


הגדרת מספר עיצובים לקישורים שונים באותו דף

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


a.textdeco:link{text-decoration:none;font-weight:120%;}
a.textdeco:visited{text-decoration:none;font-size:inherit;}
a.textdeco:hover{text-decoration:underline;font-style:italic;}
a.textdeco:active{text-decoration:underline;font-weight:120%;}

a.clr:link{background-color:blue;color:white;}
a.clr:visited{background-color:blue;color:white;}
a.clr:hover{background-color:red;color:yellow;}
a.clr:active{background-color:blue;color:white;}

בדוגמה למעלה הגדרנו שני עיצובים שונים לקישורים. לאחד קראנו textdeco ואילו לאחר קראנו clr. כעת נדגים כיצד ליצור שני קישורים שכל אחד מהם ישאב את עיצובו ממחלקת עיצוב אחרת:

<a class="textdeco" href="target.aspx" target="_blank">This is a text deco link</a>
<a class="clr" href="target.aspx" target="_blank">This is a clr link</a>

   


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש