List style နဲ.ပတ္သတ္ျပီး HTML Chapter 7 မွာ အေသးစိတ္ ရွင္းျပထားပါတယ္။ ၄င္းမွာေတာ့ HTML အေၾကာင္းကို အဓိကထား ေျပာထားတဲ့ အတြက္ inline style ကိုပဲအဓိကထားျပီး ေရးျပခဲ့ပါတယ္။ က်ေနာ္က HTML ကိုအရင္ေလ့လာျပီးမွ CSS ကိုေလ့လာဖို. တိုက္တြန္းထားပါတယ္။ ဒါေၾကာင့္ ယခု List နဲ.ပတ္သတ္ျပီး အက်ဥ္းခ်ဳပ္ျပန္ေျပာျပျပီး List ေတြကို HTML အခန္းမွာေျပာျပထားတဲ့ style ေတြအျပင္ ယခု CSS မွာ list style ေတြကို မိမိစိတ္ၾကိဳက္ ပံုေတြ နဲ.အစားထိုး ေရးသားနည္းကို အဓိကထားျပီး ေျပာျပေပးသြားမွာပါ။
List မွာ အဓိက ႏွစ္မ်ိဳးရွိပါတယ္။ ၄င္းတုိ.မွာ
Unordered Lists ႏွင့္
Ordered Lists တို.ျဖစ္ၾကပါတယ္။
ေအာက္ပါ Example တြင္ CSS မွာ Lists style ႏွစ္မ်ိဳး အတြက္ class selector ကိုအသံုးျပဳျပီး ေရးျပထားပါတယ္။
<!DOCTYPE html>
<html>
<head>
<style>
ul.c {list-style-type:circle;}
ul.s {list-style-type:square;}
ol.r {list-style-type:upper-roman;}
ol.a {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="c">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<ul class="s">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="r">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ol class="a">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
</body>
</html>
<Style> tag ထဲမွ upper-roman ေနရာမွာ lower-roman ႏွင့္ lower-alpha ေနရာမွာ upper-alpha အျဖစ္ေျပာင္းေရးလို. လဲရပါတယ္။
ဒီတစ္ခါေတာ့ က်ေနာ္တို.ကိုယ္တိုင္ ဖန္တီးထားတဲ့ image နဲ. Bullet ေနရာေတြမွာ ထည့္သံုးၾကည့္္ပါမယ္။ က်ေနာ္ကေတာ့ ေအာက္ပါပံုေလးကို အသံုးျပဳပါမယ္။ name ကိုေတာ့ arrow လို.ေပးထားျပီး .png file အမ်ိဳးအစားျဖစ္ပါတယ္။
Thursday, September 5, 2013
Wednesday, September 4, 2013
CSS Chapter 7 – Link
CSS မွာ Link နဲ.ပတ္သတ္ျပီး ေလးမ်ိဳး ေရးရပါတယ္။ ၄င္းတို.မွာ
<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>
- 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>
Subscribe to:
Posts (Atom)