שיעור 6: קישורים
את מה שכבר למדת בשיעורים הקודמים אתה יכול ליישם בכל הנוגע לקישורים (למשל: שינוי צבעים, גופנים, קו תחתי וכו'). החידוש הוא ש-CSS מאפשרת לך להגדיר תכונות אלו כתלויות במצבים שונים של הקישור. למשל, כשהקישור טרם הופעל, לאחר שהקישור הופעל, ברגע הפעלת הקישור וכשסמן העכבר נמצא מעל לקישור. יכולת זו מאפשרת לך להוסיף אפקטים שימושיים וססגוניים לאתר האינטרנט שלך. כדי לשלוט באפקטים אלו אתה צריך להשתמש במה שנקרא דמה-מחלקות (Pseudo-Classes).
מה זה דמה-מחלקה (Pseudo-Class)?
דמה-מחלקה מאפשרת לך להתייחס למצבים או אירועים שונים בהגדרת תכונה לתג HTML.
בוא ונראה דוגמה. כפי שאתה יודע, קישורים מסומנים בשפת
HTML בתג
<a>.
מכאן שאנחנו יכולים להשתמש ב-a
כ-selector
בגיליון CSS:
a {
color: blue;
}
לקישור יכולים להיות מצבים שונים. למשל, מצב בו הקישור טרם הופעל או מצב בו הקישור הופעל. אתה יכול להשתמש בדמה-מחלקות כדי להגדיר סגנונות שונים לקישור שהופעל ולקישור שטרם הופעל.
a:link {
color: blue;
}
a:visited {
color: red;
}
השתמש ב-a:link
ו-a:visited
לקישור שטרם הופעל ולקישור שהופעל בהתאמה. קישור שמופעל יקבל את דמה-מחלקה
a:active
ו-a:hover
כאשר סמן העכבר מצביע עליו.
נעבור עתה על כל אחד מארבעת הדמה-מחלקות עם דוגמאות והסברים נוספים.
דמה מחלקה: link
הדמה מחלקה
link: מגדירה קישורים
לדפים שהמשתמש טרם הופנה אליהם.
בדוגמת הקוד שלמטה, קישור שטרם הופעל יהיה בצבע כחול בהיר:
a:link {
color: #6699CC;
}
דמה מחלקה: visited
הדמה מחלקה
visited: מגדירה
קישורים לדפים שהמשתמש הופנה אליהם.
בדוגמת הקוד שלמטה, קישור שהופעל יהיה בצבע סגול כהה:
a:visited {
color: #660099;
}
דמה מחלקה: active
הדמה מחלקה
active: מגדירה
קישורים לדפים ברגע שהמשתמש מופנה אליהם.
בדוגמת הקוד שלמטה, קישור שמופעל יהיה בצבע רקע צהוב:
a:active {
background-color: #FFFF00;
}
דמה מחלקה: hover
הדמה מחלקה
hover: מגדירה
קישורים לדפים שהמשתמש מצביע עליהם.
בדוגמת הקוד שלמטה, אם תרצה שקישור יצבע בכתום והכיתוב שלו יהיה נטוי כשהסמן מצביע עליו, קוד ה-CSS יראה כך:
a:hover {
color: orange;
font-style: italic;
}
דוגמה 1: אפקטים כשהסמן מצביע על הקישור
בעיצוב אתרים מקובל ליצור אפקטים שונים למצב שהסמן ממוקם מעל לקישור.
בדוגמאות הבאות נראה מספר דוגמאות נוספות המתייחסות לדמה מחלקה
hover:.
דוגמה 1.1: ריווח בין אותיות
כפי שאתה לבטח זוכר משיעור 5, רווח בין
אותיות ניתן להגדרה באמצעות התכונה
letter-spacing.
ניתן ליישם תכונה זו לקבלת אפקטים מיוחדים לקישור:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
דוגמה 1.2: אותיות גדולות ואותיות קטנות
בשיעור 5 ראינו את התכונה
text-transform
שמאפשרת בחירה בין אותיות גדולות לאותיות קטנות. ניתן ליישם תכונה זו גם לקבלת אפקט
לקישור:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
שתי הדוגמאות שהצגנו נותנות לך מושג על האפשרויות הכמעט בלתי מוגבלות שקיימות לשילוב תכונות שונות. אתה יכול ליצור אפקטים משלך - נסה זאת!.
דוגמה 2: הסרת הקו התחתי מקישורים
שאלה שכיחה היא - כיצד ניתן לבטל את הקו התחתי מקישורים?.
חשוב מאוד: שקול בזהירות האם זה חיוני להסיר את הקו התחתי מקישורים מאחר וזה מוריד משמעותית את תאימות האתר שלך.
גולשים רגילים לקישורים בצבע כחול עם קו תחתי באתרי אינטרנט ויודעים שהם יכולים להפעילם בהקשה. אפילו אמא שלי יודעת זאת! לכן, אם תשנה את הצבע ותסיר את הקו התחתון קיים סיכוי גדול שגולשים יתבלבלו וכתוצאה מכך לא ייהנו מכל התכנים שאתר האינטרנט שלך מציע.
ואם בכל זאת החלטת לעשות זאת, הסרת הקו התחתי מקישורים היא פשוטה
מאוד. כפי שהראינו בשיעור 5, התכונה
text-decoration
יכולה לקבוע אם טקסט יהיה עם קו תחתי או לא. להסרת הקו התחתי, פשוט קבע את הערך של
text-decoration
ל-none (ללא).
a {
text-decoration:none;
}
לחילופין, אתה יכול לקבוע
text-decoration
יחד עם תכונות אחרות לכל ארבע הדמה-מחלקות.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
סיכום
בשיעור זה למדת על דמה-מחלקות (Pseudo-Classes) תוך שימוש בחלק מהתכונות שנלמדו בשיעורים הקודמים. זה אמור לתת לך מושג על כמה מהאפשרויות הגלומות ב-CSS.
בשיעור הבא נלמד כיצד להגדיר תכונות לאלמנטים מסוימים וקבוצות של אלמנטים.