צור קשר
מאמרים אחרונים
פרק זה עוסק בהגדרת תכונות העיצוב של קישורים (links) באמצעות CSS.
תכונות קישורים
בדומה לכל סוג אחר של טקסט, גם עבור קישורים (לינקים) ניתן להגדיר את כל התכונות, כמו סוג פונט, צבא ומאפייני רקע. מה שמייחד את הקישורים הוא שיש להם ארבעה מצבים שונים וניתן להגדיר מאפייני עיצוב בנפרד עבור כל אחד מארבעת המצבים:
- a:link - לינק רגיל שעדיין לא ביקרנו בו (unvisited link)
- a:visited - לינק שכבר ביקרנו בו (visited link)
- a:hover - קישור שעומדים עליו עם העכבר
- a:active - קישור ברגע שבו לוחצים עליו
עיצוב קישורים
ישנן כמה דרכים מקובלות לעיצוב קישורים, למשל, שינויי צבע הקישור או צבע הרקע, הדגשה, שינוי גודל ועוד. נסקור כמה מן הדרכים הללו להלן.
- הקישור משנה את צבעו בכל אחד מן המצבים השונים - למשל:
a:link {
color:#ff1111;
}
a:visited {
color:#00gg00;
}
a:hover {
color:#aabbaa;
}
a:active {
color:#00ffff;
}
color:#ff1111;
}
a:visited {
color:#00gg00;
}
a:hover {
color:#aabbaa;
}
a:active {
color:#00ffff;
}
- הוספה או הסרה של קו תחתון או הדגשה לפי מצב הקישור - בדוגמה הבאה הפונט יהיה מודגש במצב visited ובמצב active. ניתן לשנות גם תכונות אחרות של הפונט, כמו גודל וכדומה:
a:link {
text-decoration:underline;
}
a:visited {
text-decoration:underline;
font-weight:bold;
}
a:hover {
text-decoration:none;
text-decoration:underline;
}
a:visited {
text-decoration:underline;
font-weight:bold;
}
a:hover {
text-decoration:none;
font-size:16px;
}
a:active {
text-decoration:underline;
}
a:active {
text-decoration:underline;
font-weight:bold;
}
}
- שינוי צבע הרקע של הקישור - בכדי לעשות זאת, משתמשים בתכונה background-color. למשל, אם נרצה שבזמן מעבר על הקישור עם העכבר יופיע רקע צבעוני מאחוריו, נגדיר זאת כך ב-CSS. גם כאן ניתן לשלב כמה תכונות שונות בעיצוב הקישור:
a:link {
background-color:#a1ff88;
background-color:#a1ff88;
font-size:14px;
}
a:visited {
background-color:#a2ff74;
}
a:visited {
background-color:#a2ff74;
font-size:14px;
}
a:hover {
background-color:#gg11gg;
}
a:hover {
background-color:#gg11gg;
font-size:16px;
background-image:url('cloud.webp');
}
a:active {
background-color:#aa45ee; font-size:14px;
}
background-image:url('cloud.webp');
}
a:active {
background-color:#aa45ee; font-size:14px;
}
- ניתן כמובן להגדיר את התכונות של כל מצבי הקישורים בבת-אחת, ללא הבדלים ביניהם, למשל כך:
a {
color:#ee0000;
}
#menu a {
font-size:14px;
font-weight:bold;
}
color:#ee0000;
}
#menu a {
font-size:14px;
font-weight:bold;
}
בדוגמה זו כל הקישורים באתר יהיו בצבע ee0000 (גוון של אדום), ורק הקישורים בתוך התפריט יהיו (בנוסף לאדום) בגודל 14 ומודגשים. ההגדרות הללו נכונות לכל מצבי הקישורים (link,visited,hover,active).
חוקים לשימוש בקישורים
ישנם שני חוקים לסדר הכתיבה של הגדרות העיצוב של לינקים:
- a:hover יבוא תמיד אחרי a:link ו- a:visited
- a:active יבוא תמיד אחרי a:hover
תגיות: CSS | מדריך בניית אתרים
