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>
Thursday, July 25, 2013
CSS Chapter 6 _ Styling fonts
CSS ၏ font properties မ်ားမွာ ေအာက္ပါအတိုင္းျဖစ္ပါတယ္။
Computer မွာအသံုးျပဳတဲ့ Basic font (၂) မ်ိဳးရွိပါတယ္။ ၄င္းတို.မွာ Sans-Serif ႏွင့္ Serif တို.ပဲျဖစ္ပါတယ္။ ေအာက္တြင္ Sans-serif ႏွင့္ Serif fonts တို.ရဲ့ ျခားနားျခင္းကိုေဖာ္ျပထားပါတယ္။
Computer screens မွာေတာ့ Sans-serif font က Serif font ထက္ ဖက္ရတာ ရွင္းလင္းျပီး အဆင္ေျပလို. Sans-serif font ကိုပဲေရြးခ်ယ္အသံုး ျပဳၾကပါတယ္။
font-family အတြက္ value ေရးတဲ့ အခါမွာ မိမိအသံုးျပဳခ်င္တဲ့ font အမည္ကို အရင္ေရးရျပီး ေနာက္ဆံုးမွာေတာ့ generic family name (sans-serit or serif) နဲ. အဆံုးသတ္ေရးရပါတယ္။ က်ေနာ္တို. သတ္မွတ္ေပးတဲ့ font အမ်ိဳးအမည္ေတြ ကို user ရဲ့ browser က support မလုပ္ႏိုင္တဲ့အခါမွာ ၄င္း၏ base font အမ်ိဳးအစား တစ္ခုနဲ.အစားထိုးျပီးျပသြားေပးဖို.အတြက္ generic family name ကို ေနာက္ဆံုးမွာေရးသားရျခင္းျဖစ္ပါတယ္။
ေအာက္က example မွာ font-family အသံုးျပဳျပီး ေရးသားပံုကို ေလ့လာၾကည့္ပါ။
- font-family
- font-size
- font-style
- font-variant
- font-weight
- font
Computer မွာအသံုးျပဳတဲ့ Basic font (၂) မ်ိဳးရွိပါတယ္။ ၄င္းတို.မွာ Sans-Serif ႏွင့္ Serif တို.ပဲျဖစ္ပါတယ္။ ေအာက္တြင္ Sans-serif ႏွင့္ Serif fonts တို.ရဲ့ ျခားနားျခင္းကိုေဖာ္ျပထားပါတယ္။
 |
| This example is from www.w3schools.com |
Computer screens မွာေတာ့ Sans-serif font က Serif font ထက္ ဖက္ရတာ ရွင္းလင္းျပီး အဆင္ေျပလို. Sans-serif font ကိုပဲေရြးခ်ယ္အသံုး ျပဳၾကပါတယ္။
The font-family property
Font-family ကို အသံုးျပဳမယ့္ font အမ်ိဳးအစား ကို declaration လုပ္ဖို.သံုးပါတယ္။ font-family မွာ fallback system အေနနဲ. Several font ကိုသံုးျပီးလုပ္ေဆာင္ႏိုင္ပါတယ္။ တစ္ခါတေလက်ေနာ္တို.သံုးလုိက္တဲ့ font အမ်ိဳးအစားကို browser က support မလုပ္ေပးႏိုင္တဲ့အခါမ်ိဳးမွာ ေနာက္တစ္ခုကို choice လုပ္ျပီး ေဖာ္ျပေပးသြားပါတယ္။ ဆိုလိုတာက ပထမ ဦးစားေပး declaration လုပ္ထားတာ ကို support မလုပ္ႏိုင္ရင္ ေနာက္တစ္ခု declaration လုပ္ထားတာကို အစားထိုးေဖာ္ျပေပးသြားမွာပါ။font-family အတြက္ value ေရးတဲ့ အခါမွာ မိမိအသံုးျပဳခ်င္တဲ့ font အမည္ကို အရင္ေရးရျပီး ေနာက္ဆံုးမွာေတာ့ generic family name (sans-serit or serif) နဲ. အဆံုးသတ္ေရးရပါတယ္။ က်ေနာ္တို. သတ္မွတ္ေပးတဲ့ font အမ်ိဳးအမည္ေတြ ကို user ရဲ့ browser က support မလုပ္ႏိုင္တဲ့အခါမွာ ၄င္း၏ base font အမ်ိဳးအစား တစ္ခုနဲ.အစားထိုးျပီးျပသြားေပးဖို.အတြက္ generic family name ကို ေနာက္ဆံုးမွာေရးသားရျခင္းျဖစ္ပါတယ္။
ေအာက္က example မွာ font-family အသံုးျပဳျပီး ေရးသားပံုကို ေလ့လာၾကည့္ပါ။
Monday, July 22, 2013
CSS Chapter 5 _ Styling Text
CSS text နဲ.ပတ္သတ္ျပီးေတာ့ အသံုးမ်ားတဲ့ text properties ေတြကိုပဲ ရွင္းျပသြားပါမယ္။ ၄င္းတို.မွာ
Example of color property:
<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is paragraph</p>
<p class="ex">This is paragraph using class attribute of CSS.</p>
</body>
</html>
This is paragraph မွာ အနီေရာင္ ျဖစ္ေနရျခင္းမွာ body {color:red;} လို.ေရးထားလို.ျဖစ္ပါတယ္။ body ထဲမွာရွိေသာ text color မွန္သမ်ွ အနီေရာင္လို. Style သတ္မွတ္ေပးလိုက္ျခင္း ျဖစ္ပါတယ္။ ဒါေၾကာင့္ ေနာက္ထပ္ <p> element ကိုေတာ့ အနီေရာင္ မသံုးျခင္လို. p.ex ဆိုျပီး style တစ္ခုေရးသားျခင္းျဖစ္ပါတယ္။
အကယ္၍ p ကိုပဲ p {color:rgb(0,0,255);} လို. Style ေရးလိုက္လ်င္ <p> tag နဲ.ေရးလိုက္တိုင္း အားလံုး အျပာေရာင္ေတြျဖစ္ကုန္မွာပါ။ ဒါေၾကာင့္ ေျပာင္းခ်င္တဲ့ <p> element အတြက္ပဲ class နဲ. Style ယူသံုးလို.ရေအာင္ p.ex ျဖင့္ style ေရးသားျခင္း ျဖစ္ပါတယ္။
- color
- text-align
- text-decoration
- text-transform
- text-indent
- letter-spacing
- line-height
- word-spacing
Text Color
Text color အတြက္ color porperty ကိုသံုးပါတယ္။Example of color property:
<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is paragraph</p>
<p class="ex">This is paragraph using class attribute of CSS.</p>
</body>
</html>
This is paragraph မွာ အနီေရာင္ ျဖစ္ေနရျခင္းမွာ body {color:red;} လို.ေရးထားလို.ျဖစ္ပါတယ္။ body ထဲမွာရွိေသာ text color မွန္သမ်ွ အနီေရာင္လို. Style သတ္မွတ္ေပးလိုက္ျခင္း ျဖစ္ပါတယ္။ ဒါေၾကာင့္ ေနာက္ထပ္ <p> element ကိုေတာ့ အနီေရာင္ မသံုးျခင္လို. p.ex ဆိုျပီး style တစ္ခုေရးသားျခင္းျဖစ္ပါတယ္။
အကယ္၍ p ကိုပဲ p {color:rgb(0,0,255);} လို. Style ေရးလိုက္လ်င္ <p> tag နဲ.ေရးလိုက္တိုင္း အားလံုး အျပာေရာင္ေတြျဖစ္ကုန္မွာပါ။ ဒါေၾကာင့္ ေျပာင္းခ်င္တဲ့ <p> element အတြက္ပဲ class နဲ. Style ယူသံုးလို.ရေအာင္ p.ex ျဖင့္ style ေရးသားျခင္း ျဖစ္ပါတယ္။
Subscribe to:
Posts (Atom)