Get Adobe Flash player
דף הבית כללי עיצוב מאפייני קישורים

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

עיצוב הקישור משתנה לפי ארבעה מצבים:

קישור חדש שעדיין לא הופעל (link)

קישור שכבר הופעל והמידע הזה נמצא עדיין ב"היסטוריה" של המחשב אצל הגולש. בדרך כלל - 21 ימים (visited)

קישור בעת שהעכבר עומר מעליו (hover)

קישור בעת שהוא פועל (active)

מאפייני הקישור

כללי ה CSS נבנים בהתאם בהתאם לשינויים אלו.

a:link - הבורר לקישור חדש

a:visited - הבורר לקישור שכבר הופעל

a:hover - הבורר לקישור בעת שהעכבר עובר מעליו

a:active - הבורר לקישור בעת הפעלתו

הערה חשובה. לסדר הבוררים יש חשיבות גבוהה:

a:hover חייב להיות אחרי a:link ו-a:visited.

a:active יבוא תמיד אחרי a:hover

ערכי הבוררים

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

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

דוגמא לכללי קישור:

<style type="text/css">
  a:link, a:visited 
      {
       text-decoration: none;
       color: #555;
       font-size: 0.9em;
       }
  a:hover
       {
       text-decoration: underline;
       color: #888;
       }
a:active:
      {
       text-decoration: underline;
       color: #red;
       }
</style>

קישורים עם עיצוב שונה באותו דף

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

<style type="text/css">
a.new:link, a.new:visited
      {
       text-decoration: none;
       color: #555;
       font-size: 0.9em;
       }
</style>
</head>
<body>
<a href="#"
class="new">לחץ כאן</a>

 

אל השיעור הקודם אל השיעור הבא