שלום.
היום אני אלמד אותכם עלa:hover,a:active, a:link, a:visited בCSS
אז בוא נתחיל.
דבר ראשון נפתח תוכנה לעריכת טקסט ונעשה מסמך xHtml רגיל.
קוד HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he" dir="rtl">
<head>
<title>include - iatraf.co.il</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1255" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
עכשיו ניצור Div חדש בשם link
קוד HTML:
<div id="link">
</div>
אחרי שיצרנו את הדיב נכניס אליו קישור.
קוד HTML:
<a href="#">text</a>
נכניס את הקישור הזה לתוך הDiv.
קוד HTML:
<div id="link">
<a href="#">text</a>
</div>
זה שלב הHTML.
עכשיו נעבור לCSS.
דבר ראשון נפתח קובץ חדש בשם style.css ובו נכתוב את הקוד הבא:
שזה אומר שיעברו על הלינק מה יקרה.
יש כמה כמו:
קוד PHP:
text-decoration:
color:
background:
עכשיו נשים בa:hover את הקוד הבא:
]עכשיו שימו לב שנעבור על הקישור הצבע יהיה אפור.
ואם נרצה קו תחתון?
קוד PHP:
text-decoration: underline;
תוסיפו את זה ושתעברו על הלינק יהיה קו תחתון.
יש עוד אפשרויות עליהן לא נפרט.
עכשיו אם נרצה שהa:hover יהיה פעיל רק לדיב שאנחנו רוצים.
איך עושים את זה?
הנה התשובה.
במקום הקוד:
נעשה:
קוד PHP:
#link a:hover {
}
שמנו את השם של הדיב עם סולמית ולאחר מכן a:hover.
עכשיו נסביר על a:link
a:link זה לינק שלא ביקרנו בו.
שלא נכנסו אליו.
נגיד נרצה שלינק שלא נכנסנו אליו יהיה צבע כחול.
אז נעשה.
קוד PHP:
קוד PHP:
a:link {
color: blue;
}
ואם נרצה שזה יהיה רק לדיב אחד אז נעשה.
קוד PHP:
קוד PHP:
#link a:link {
color: blue;
}
זה המאפיין a:link.
עכשיו
מה זה בעצם a:visited?
a:visited זה לינק שביקרנו בו.
שנכנסו אליו.
נגיד נרצה שלינק שנכנסנו אליו יהיה צבע כחול.
אז נעשה.
קוד PHP:
a:visited {
color: blue;
}
ואם נרצה שזה יהיה רק לדיב אחד אז נעשה.
קוד PHP:
#link a:visited {
color: blue;
}
זה המאפיין a:visited.
זה מה שאנחנו לוחצים על הלינק איך זה יראה.
שאנחנו לוחצים נגיד ולא עוזבים אז זה יהיה צבע מסויים שנבחר.
נגיד נרצה שזה יהיה צבע כחול.
אז נעשה
קוד PHP:
a:active {
color: grey;
}
ולדיב אחד.
קוד PHP:
#link a:active {
color: grey;
}
זה המאפיין a:active.
עד כאן היה המדריך שלי.
מקוווה שנהנתם.
המשך יום נעים,
--include--
מדריך על a:hover, a:link, a:visited,a:active
ציטוט ההודעה
