CSS/קישורים

CSS

בעבר היה נהוג להשתמש בתג <body> על־מנת לשנות את צבעם של קישורים פעילים וקישורים שכבר נלחצו. התחביר הישן נראה פחות־או־יותר כך:

<body link="SomeColor" vlink="ADifferentColor" alink="AnotherColor">

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

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

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

a { }

כאשר בין הסוגריים המסולסלים ({ }) מזינים את המאפיינים המבוקשים (צבע, גופן, גודל וכד'). כתיבה כזאת הייתה משפיעה על כל הקישורים בדף, ואילו כתיבת הקטע הבא הייתה משפיעה אך ורק על קישורים מהצורה <a class="nav"...>:

a.nav { }

על כך דנו בפרק תחביר כללי. ניתן לשנות מאפיינים רבים על קישורים:

צבע: color
קו תחתון: text-decoration
קישורים שטרם נלחצו : a:link.

קישורים שהופעלו : a:visited.

קישור בעת לחיצה: a:active.

קישור כשהעכבר עובר עליו: a:hover (את מאפיין זה, כמו המאפיינים color, text-decortion ועוד רבים ניתן לכתוב גם על אלמנטים ותגים אחרים כמו div, span, p וכולי...).

קישורים ללא קו תחתי : text-decoration: none; .

דוגמא

<html dir="rtl">
 <head>
<style type="text/css">
a {text-decoration: none;}
a:link {color: red;}
a:visited {color: green;}
a:active {color: blue;}
a:hover {background-color: yellow;)
</style>
</head>
<body>
<a href="#">קישור</a>
</body>
</html>

הפרק הקודם:
טקסט

קישורים

הפרק הבא:
מיקום