- a:link (unvisited link)
- a:visited (visited link)
- a:hover (mouse over link)
- a:active (selected link)
Example
<!DOCTYPE html><html>
<head>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="">This is a link</a></b></p>
</body>
</html>
Browser မွာ run ၾကည့္ျပီး This is a link ေပၚမွာ Pointer ကိုတင္ၾကည့္ပါ။ ေျပာင္းလဲမွဳေတြကိုေတြ.ရ ပါမယ္။ a:visited လုပ္ေဆာင္မွဳကေတာ့ ဒီေနရာမွာ မသိတာပါဘူး။ a:hover ကေတာ့ pointer တင္လိုက္ရင္ CSS မွာေရးထားတဲ့ အေရာင္ေျပာင္းသြားမွာျဖစ္ျပီး a:active ကေတာ့ link ရွိေသာစာကို click ႏွိပ္လိုက္တဲ့ အခ်ိန္မွာ အျပာေရာင္ေျပာင္းသြားမွာျဖစ္ပါတယ္။
က်ေနာ္တို. အမွန္တကယ္ Web page ေတြဖန္တီးတဲ့ အခါမွာ ေတာ့ ဒီ link ေရးနည္း ေပၚမွာပဲ အေျခခံျပီး မိမိလိုခ်င္တဲ့ Link ပံုစံကို CSS မွာ selector ေတြနဲ. စိတ္ၾကိဳက္ျပန္ဖန္တီးယူပါတယ္။ ဒါကိုသိထားမွလည္း ဖန္တီးလို.ရမွာျဖစ္တဲ့ အတြက္ link အတြက္ေရးရတဲ့ အေျခခံကို နားလည္ဖို.လိုပါတယ္။
အထက္ပါ Example မွာ This is a link ဆိုတဲ့ link စာေၾကာင္းမွာ underline ပါေနတာေတြ.ရပါမယ္။ link ရွိတယ္ဆိုတာကို သိတာေစဖို. Underline က default အေနနဲ. ပါေနတာပါ။ က်ေနာ္တို. ဒါကို ျဖတ္လို.ရပါတယ္။ အထက္ပါ Example ရဲ့ style မွာ ေအာက္မွာ ေရးျပထားတဲ့ အတိုင္း text-decoration:none ကို ထည့္ေရးလိုက္ပါ။ Browser မွာေဖာ္ျပတဲ့ အခါ underline မပါေတာ့ပါဘူး။
<style>
a:link {color:#FF0000;text-decoration:none;} /* unvisited link */
a:visited {color:#00FF00;text-decoration:none;} /* visited link */
a:hover {color:#FF00FF;text-decoration:none;} /* mouse over link */
a:active {color:#0000FF;text-decoration:none;} /* selected link */
</style>
link မွာ background color ေတြထည့္ခ်င္လ်င္လည္း ထပ္ထည့္လို.ရပါေသးတယ္။ ေအာက္က example မွာေလ့လာၾကည့္ပါ။
<style>
a:link {color:#FF0000; text-decoration:none; background-color:#BBFF00;}
a:visited {color:#00FF00; text-decoration:none; background-color:#BBFF00;}
a:hover {color:#FF00FF; text-decoration:none; background-color:#FF7744;}
a:active {color:#0000FF; text-decoration:none; background-color:#FF7744;}
</style>
ထို.ျပင္ Link ကို CSS မွာမိမိ ဒီဇိုင္းအျမင္ရွိလ်င္ရွိသလို၊ ဒီဇိုင္းအရ မ်ားစြား ျပဳျပင္ႏိုင္ပါတယ္။ font ေတြရဲ့ color, အရြယ္အစား စသည္ျဖင့္ မိမိ၏ web page ဒီဇိုင္းအရ လုပ္ေဆာင္ႏိုင္ပါတယ္။
--------------------------------***------------------------------------
No comments:
Post a Comment