עיצוב קישור - שינוי גופן, צבע ורקע

מצבים אפשריים לקישור

קישור (מסומן באמצעות התגית a ב-HTML) יכול להיות באחד מ-4 מצבים אפשריים:

• a:link - קישור שעדין לא "ביקרו" בו, כלומר, עדין לא הקליקו עליו כדי להכנס לכתובת היעד אליה הוא מפנה
• a:visited - קישור שביקרו בו
• a:hover - קישור שהעכבר מצביע עליו
• a:active - קישור שברגע זה מקליקים עליו

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

דוגמה:

a:link {
	color:black;
}

a:visited {
	color:purple;
}

a:hover {
	color:blue;
}

a:active {
	color:orange;
}

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

ניתן להגדיר עיצוב כללי לקישור שיתאים לכל המצבים שלו, באמצעות הגדרת עיצוב ישירות לתגית a.

דוגמה:

a {
	color:#0000ff; // blue
}

בדוגמה זו, קבענו שקישור (בכל מצב מ-4 המצבים האפשריים) יהיה בצבע כחול.

עיצוב קישורים ב-CSS

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

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

דוגמה:

a {
	color:#0000ff; // blue
}

a:hover {
	text-decoration:underline;
}

בדוגמה זו קבענו שקישור (בכל מצב מ-4 המצבים האפשריים) יהיה בצבע כחול. קישור שמסמנים עליו עם העכבר יהיה עם קו תחתי (בנוסף על הצבע הכתום).

ניתן לקבוע הגדרות גם לקישורים פנימיים יותר בהיררכיה של ה-HTML.

דוגמה:

a {
	color:#ff9c00; // orange
}

.article {
	font-size:18px;
}

.article a {
	font-size:20px;
}

.article a:hover {
	text-decoration:underline;
}

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

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

סדרי עדיפויות במצבי הקישורים

נשים לב כי קישור במצב hover (כלומר, העכבר מצביע עליו) הוא בו זמנית גם במצב link או visited (כלומר, או שביקרו בו או שלא). לכן, אם נרצה להגדיר עיצוב לקישורים במצב link או visited ועיצוב מעט שונה לקישורים במצב hover, נשים את הגדרת העיצוב של המצב hover לאחר הגדרת העיצוב של המצבים link ו-visited, כיוון שההגדרה האחרונה היא שקובעת.

דוגמה:

a:link, a:visited {
	color:blue;
}

a:hover {
	color:orance;
}

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

דוגמה:

a:hover {
	color:#ff0000; // red
}

a:active {
	color:#ffff00; // yellow
}