Link Properties
CSS ကိုအသံုးျပဳျပီး HTML Document ထဲက လင့္ေတြကို CSS အသံုးျပဳျပီး
လင့္ေတြမွာသံုးထားတဲ့ စာလံုးအရြယ္အစား၊ စာလံုးအေရာင္ နဲ႔ ေနာက္ခံအေရာင္ေတြကိုေျပာင္းလဲႏိုင္ပါတယ္၊
မေျပာင္းထားတဲ့လင့္ေတြက Default ပံုစံပျဖစ္ အျပာေရာင္ နဲ႔
လင့္ရဲ့ေအာက္မွာ မ်ဥ္းတားထားပါတယ္၊ အခု အဲ့ဒီ့လင့္ေတြကို ေသခ်ာ
အလွဆင္ျပီးေျပာင္းလဲမယ္၊
လင့္ေတြကိုေျပာင္းလဲေတာ့မယ္ အလွဆင္ေတာ့မယ္ဆိုရင္ျဖင့္
အေျခအေနေလးမ်ိဳးေပၚမွာ မူတည္ျပီး ေျပာင္းလဲႏိုင္တယ္၊ ေအာက္မွာ
အေျခအေနေလးမ်ိဳးကိုရွင္းမယ္၊
- a:link - ပံုမွန္ သင့္၀က္ဆိုက္မွာေပၚေနမယ့္လင့္၊ ဘာမွ အလွမဆင္ရေသးဘူး၊ ခလစ္မႏွိပ္ရေသးဘူး၊
- a:visited - အသံုးျပဳသူ သင့္၀က္ဆိုက္လာလည္သူ ခလစ္ႏွိပ္ျပီးသြားတဲ့ လင့္
- a:hover - အသံုးျပဳသူ သင့္၀က္ဆိုက္လာလည္သူက Mouser (pointer) ကိုလင့္ေပၚမွာ တင္လိုက္တဲ့အခ်ိန္၊ မႏွိပ္ဘူး လင့္ေပၚမွာတင္လိုက္တာ၊
- a:active - လင့္ေပၚမွာ ခလစ္ႏွိပ္လိုက္တဲအခ်ိန္၊
ဥပမာ အေနနဲ႔ <li> Tag နဲ႔
မွတ္သားထားတဲ့ HTML document ထဲက လင့္ေတြကိုေရာင္ေျပာင္းခ်င္တယ္ဆိုပါစို႔
ဒါဆိုရင္ေအာက္က အတိုင္းေရးႏိုင္တယ္၊
ံHTML Document
<html>
<head>
<link href= "coder.css"
rel="stylesheet" type="text/css">
</head>
<body>
<a href="72coder.com">ဒါကလင့္</a><br/>
<a href="72coder.com">ဒါကလင့္</a><br/>
<a href="72coder.com"
target="_blank">ဒါကလင့္</a><br/>
</body>
</html>
CSS File
a {color:red;}
a:visited {color:blue;}
a:hover {color:yellow;}
a:active {color:brown;}
အထက္က ဖိုင္ႏွစ္ခုကို Run လိုက္ရင္ေအာက္ကလို လင့္သံုးခု
ပါတဲ့စာမ်က္ႏွာကိုေတြ႔ရမယ္၊
အထက္က လိုလင့္သံုးခုကိုေတြ႔ရင္ျဖင့္ အဲ့းဒီ့လင့္ေတြရဲ့ေပၚမွာ
သင့္ကြန္ျပဴတာရဲ့ pointer ကိုတင္လိုက္ပါ၊ မႏွိပ္နဲ႔ တင္ရံုတင္တင္လိုက္၊
ဒါဆိုရင္ေတာ့ အ၀ါေရာင္ေျပာင္းသြားမယ္၊ CSS ဖိုင္မွာ a:hover {color:yellow;}
ဆိုျပီး လင့္ေပၚကို cursor (pointer) တင္လိုက္ရင္ အ၀ါေရာင္ကိုေျပာင္းလို႔
အမိန္႔ေပးထားလို႔၊ ခလစ္ႏွိပ္လိုက္ ရင္ေတာ့ ႏွိပ္ေနဆဲ အခ်ိန္ခဏေလးအေတြင္း မွာ
အညိဳေရာင္ေျပာင္းသြားမယ္၊ CSS ဖိုင္မွာ a:active {color:brown;} ဆိုျပီး
ခလစ္ႏွိပ္ခံရရင္ျဖင့္ အညိဳေရာင္ေျပာင္းလို႔ အမိန္႔ေပးထားလို႔၊
ခလစ္ႏွိပ္ျပီးသြားရင္ေတာ့ ခလစ္ႏွိပ္ျပီးသြားတဲ့ အရာင္ကို
အျပာေရာင္အျဖစ္ေျပာင္းေပးလိမ့္မယ္၊ CSS ဖိုင္မွာ a:visited {color:blue;} ဆိုျပီး
ခလစ္ႏွိပ္ျပီးသား လည္ပတ္ျပီးသား လင့္ကို အျပာေရာင္ေျပာင္းလို႔ သတ္မွတ္ထားလို႔၊
အထက္က ဥပမာ ကိုေသခ်ာေလ့လာျပီး လင့္ေတြကို အေျခအေန
အမ်ိဳးအမ်ိဳးမွာ အေရာင္အမ်ိဳးမ်ိဳးထည့္ျပီးစမ္းသပ္ၾကည့္ပါ၊
လင့္ေတြအားလံုးကို သံုးထည့္သံုးရင္ေတာ့
အစီအစဥ္တစ္က်သံုးဖို႔လိုပါတယ္၊ (တစ္ခုစီကိုပဲ ေခၚသံုးရင္ေတာ့ ကိစၥမရွိဘူး)
အားလံုးကိုေခၚသံုးမယ္ဆိုရင္ျဖင့္ ပထမဆံုး a:link လိုက္ရမယ္၊ ဒုတိယ a:visited
လင့္လိုက္ရမယ္၊ တတိယ a:hover လင့္လိုက္ရမယ္၊ စတုတၳ a:active လင့္လိုက္ရမယ္၊
ေနာက္ထပ္ေလ့လာစရာတစ္ခုကေတာ့ လင့္မွာပါတဲ့ စာလံုးေတြကို
အလွဆင္မူပါ၊ ဒီ့အတြက္ သံုးတာကေတာ့ text decoration ကိုသံုးတယ္၊ သူ႔ကိုေတာ့
အမ်ားဆံုးသံုးတာက လင့္ေတြရဲ့ေအာက္မွာ underline ဆိုတဲ့ ေအာက္မ်ဥ္း မပါေစလိုတဲ့အခါ
အသံုးမ်ားတယ္၊ အထက္မွာ သံုးခဲ့တဲ့ HTML Document နဲ႔ CSS ဖိုင္တို႔ကေန CSS
ဖိုင္ထဲကို ေအာက္ကစာေၾကာင္းထပ္ထည့္လိုက္ပါ၊
a:link {text-decoration:none;}
အထက္က အတိုင္းစာေၾကာင္းကို CSS
ဖိုင္ထဲကိုထပ္ျဖည့္လိုက္ရင္ျဖင့္ Run လိုက္တဲ့အခါ လင့္ခ်ိတ္ထားတဲ့စာသားေတြကို
underline ေအာက္ခံစာေၾကာင္းမပါပဲ ေတြ႔ျမင္ရမွာပါ၊ ေအာက္မွာဥပမာ ၾကည့္ပါ၊
အထက္က လင့္ေတြမွာ တားထားတဲ့ေအာက္က မ်ဥ္းေၾကာင္းေတြကိုျဖဳတ္တဲ့
နည္းပါ၊ တကယ္လို႔ လင့္နဲ႔ ပတ္သတ္တဲ့အျခား အေျခအေနေတြမွာ ေအာက္က
မ်ဥ္းေၾကာင္းပါခ်င္ရင္လဲ မ်ဥ္းေၾကာင္းပါလိုတဲ့ အေျခအေနမွာ ေအာက္က အတိုင္း
ေရးႏိုင္ပါတယ္၊ (ေအာက္ကေတာ့ဥပမာပါ၊ သင့္လက္ေတြ႔အလုပ္လုပ္တဲ့အခါေတာ့ ၾကိဳက္တဲ့
အေျခအေနကိုေရြးျပီးလုပ္ႏိုင္ပါတယ္၊)
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
လင့္ေတြရဲ့ background အေရာင္ကိုလဲ သင္ၾကိဳက္တဲ့အေရာင္ေျပာင္းႏိုင္ပါတယ္၊ link, visited, hover, active
ဆိုတဲ့အေျခအေနေလးမ်ိဳးလံုးမွာ ၾကိဳက္တဲ့အေရာင္ကို အျခအေနတစ္ခုစီတိုင္းမွာ
တပ္ဆင္ႏိုင္ပါတယ္၊ သံုးရမွာကေတာ့ Background-color ဆိုတဲ့ Property ပါ၊
ေအာက္မွာဥပမာၾကည့္ပါ၊
ံHTML Document
<html>
<head>
<link href= "coder.css"
rel="stylesheet" type="text/css">
</head>
<body>
<a href="72coder.com"
target="_blank">ဒါကလင့္</a><br/>
</body>
</html>
CSS file
a:link {background-color:green;}
a:visited {background-color:red;}
a:hover {background-color:brown;}
a:active {background-color:black;}
အထက္က အတိုင္း HTML Doucment ေကာ CSS ဖိုင္ေကာကိုေရးျပီးသြားရင္ျဖင့္ေအာက္က
အတိုင္း ၀က္ဆိုက္စာမ်က္ႏွာေပၚမယ္၊
အထက္က အတိုင္း၀က္ဆိုက္စာမ်က္ႏွာကိုရရင္ျဖင့္၊
အစိမ္းေရာင္ေနာက္ခံထည့္ထားတဲ့လင့္ကို အရင္ေတြ႔မယ္၊ CSS ဖိုင္မွာ a:link
{background-color:green;} ဆိုျပီး ပံုမွန္လင့္ရဲ့ ေနာက္ခံ အေရာင္ကို အစိမ္းလို႔
အမိန္႔ေပးထားလို႔၊ အဲ့ဒီ့ပံုမွန္လင့္ေပၚမွာ pointer ေထာက္လိုက္ရင္ ေနာက္ခံအေရာင္
အညိဳေရာင္ေျပာင္းသြားမယ္၊ CSS ဖိုင္မွာ a:hover {background-color:brown;} ဆိုျပီး
hover (pointer) ေထာက္ရင္ အညိဳေရာင္ေျပာင္းလို႔ အမိန္႔ေပးထားလို႔၊
ခလစ္ႏွိပ္လိုက္ရင္ျဖင့္ ႏွိပ္ေနဆဲ အခ်ိန္ မွာ အနက္ေရာင္ေျပာင္းသြားမယ္၊ CSS
ဖိုင္မွာ a:active {background-color:black;} ဆိုျပီး ႏွိပ္ေနဆဲ အေျခအေနကို
အနက္ေရာင္ေျပာင္းေပးလို႔ အမိန္႔ေပးထားလို႔၊ ႏွိပ္ျပီးသြားရင္ေတာ့ Visited
ျဖစ္သြားတဲ့ အနီေရာင္ျဖစ္သြားမယ္၊
No comments:
Post a Comment