စိုင္းသီဟစိုး ဆိုက္မွအားလံုးကို လိႈက္လွဲေႏြးေထြးစြာနဲ႕ႀကိဳဆိုပါတယ္။ ကၽြန္ေတာ္ဆိုက္ကို လာေရာက္သူအားလံုး ကိုယ္စိတ္ႏွစ္ပါး က်န္းမာခ်မ္းသာပါေစလို႕ ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္.....
စိုင္းသီဟစိုး ဆိုက္မွအားလံုးကို လိႈက္လွဲေႏြးေထြးစြာနဲ႕ႀကိဳဆိုပါတယ္။ ကၽြန္ေတာ္ဆိုက္ကို လာေရာက္သူအားလံုး ကိုယ္စိတ္ႏွစ္ပါး က်န္းမာခ်မ္းသာပါေစလို႕ ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္.....
စိုင္းသီဟစိုး ဆိုက္မွအားလံုးကို လိႈက္လွဲေႏြးေထြးစြာနဲ႕ႀကိဳဆိုပါတယ္။ ကၽြန္ေတာ္ဆိုက္ကို လာေရာက္သူအားလံုး ကိုယ္စိတ္ႏွစ္ပါး က်န္းမာခ်မ္းသာပါေစလို႕ ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္.....
စိုင္းသီဟစိုး ဆိုက္မွအားလံုးကို လိႈက္လွဲေႏြးေထြးစြာနဲ႕ႀကိဳဆိုပါတယ္။ ကၽြန္ေတာ္ဆိုက္ကို လာေရာက္သူအားလံုး ကိုယ္စိတ္ႏွစ္ပါး က်န္းမာခ်မ္းသာပါေစလို႕ ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္.....
စိုင္းသီဟစိုး ဆိုက္မွအားလံုးကို လိႈက္လွဲေႏြးေထြးစြာနဲ႕ႀကိဳဆိုပါတယ္။ ကၽြန္ေတာ္ဆိုက္ကို လာေရာက္သူအားလံုး ကိုယ္စိတ္ႏွစ္ပါး က်န္းမာခ်မ္းသာပါေစလို႕ ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္.....
Showing posts with label WEB နည္းပညာ. Show all posts
Showing posts with label WEB နည္းပညာ. Show all posts

Sunday, May 19, 2013

Blog လုပ္ရန္



မာတိကာ
􀀀
Aပိုင္း ၁ (Blog လုပ္ရန္ လိုAပ္တာမ်ား ျပင္ဆင္ျခင္း)
o Font Download And Install
o Keyboard Download And Install
o Type Zawgyi-one font
o Zawgyi-one font Aား Eot လုပ္ျခင္း
o Upload EOT
􀀀
Aပိုင္း ၂ (Blog လုပ္ျခင္း)
o ျမန္မာစာေပၚရန္ variable မ်ားေျပာင္းျခင္း
o Post တင္ျခင္း
􀀀
Aပိုင္း ၃ (လိုAပ္တာမ်ား ျဖည့္စြက္ျခင္း)
o User Online
o Hit Counter
o Cbox ထည့မ္ ယ္
o Cbox Background ေျပာင္းမယ္
o Recent Post
o Customizable recent comments widget (using JSON feed)
o Peek-a-boo Post (Read More)
􀀀
Appendix
o FAQ
o Useful Link
Aပိုင္း ၁
Blog လုပ္ရန္ လိုAပ္တာမ်ား ျပင္ဆင္ျခင္း
ျမန္မာ blog တစ္ခုလုပ္ေတာ့မယ္ဆိုရင္ Aရင္ဆံုး… ကၽြန္ေတာ္တို႕ blogger ေတြ Aသံုးမ်ားတဲ့ zawgyi-one ကေတာ့ AဓိကလုိAပ္ပါတယ္..
ေဇာ္ဂ်ီ keyboard နဲ႕ font ကို ဒီမွာ download ခ်လိုက္ပါ…
Font Download And Install
http://www.mysteryzillion.com/mmglite/font/Zawgyi-One.ttf
မွာ download Aရင္ခ်လိုက္ပါ…
C:\WINDOWS\Fonts ေAာက္ထဲသို႕ download ခ်ထားေသာ zawgyi-one.ttf ကို past လုပ္လိုက္ပါ…
ျပီးရင္ font active ျဖစ္၇န္Aတြက္ zawgyi-one ကို double-click လုပ္ျပီးဖြင့္ၾကည့္ပါ.. ပြင့္လာျပီးလွ်င္ ျပန္ပိတ္လိုက္ပါ..
Keyboard Download And Install
http://www.mediafire.com/?6wodgmczyhg
မွာ download Aရင္ခ်လိုက္ပါ..
Zawgyi Keyboard Installer ပါ...
ပိုလြယ္ေAာင္လုပ္ထားပါတယ္....
install.bat ကိုႏိွပ္လိုက္ရင္ရျပီ....
ျပီးရင္ Logout လုပ္လိုက္...
ျပန္၀င္လိုက္ရင္ရျပီ...
taskbar မွာ Keyboard icon မတက္လာဘူးဆိုရင္
run-> intl.cpl -> Language -> Detail ကိုႏိွပ္လိုက္ပါ...
ေနာက္ထပ္ dialog box တက္လာပါမယ္...
Advance -> Turn off advanced text services က check ျဖစ္ေနပါမယ္...
uncheck လုပ္လိုက္ပါ...
keyboard icon ေလး taskbar မွာေပၚလာပါမယ္..


Type Zawgyi-one font
စာရိုက္ရန္Aတြက္ ျမန္မာစာ လက္ကြက္ကေတာ့ ေAာက္ပါAတိုင္းျဖစ္ပါတယ္..
ျမန္မာလိုရိုက္လိုပါက Ctrl+Shift တြဲႏိွပ္လိုက္ပါ… ဒါဆို ျမန္မာ လက္ကြက္ေျပာင္းသြားပါမယ္…
English လုိျပန္ေျပာင္းလိုပါက Ctrl+Shift တြဲႏိွပ္လိုက္ပါ.. English လက္ကြက္ ျပန္ေျပာင္းသြားပါမယ္…
ျမန္မာ လက္ကြက္တြင္ Ctrl+Alt ႏိွပ္ျပီး စာရိုက္ပါက keyboard လက္ကြက္ပံုတြင္ျပထားေသာ Aျပာေရာင္စာလံုး ေAာက္ဘက္ ျဖစ္ျပီး
Ctrl+Alt+Shfit ႏိွပ္ျပီး စာရို္က္ပါက keyboard လက္ကြက္ပံုတြင္ ျပထားေသာ Aျပာေရာင္စာလံုးAေပၚဘက္ျဖစ္ပါတယ္..
Zawgyi-one font Aား Eot လုပ္ျခင္း ( REF: ကိုေမာင္လွ http://mghla.blogspot.com/)
http://download.microsoft.com/download/8/a/1/8a1be03f-f7fc-4504-af9a-7b9230775284/WEFTIII2b1.exe
ကို download Aရင္ခ်ပါ… ျပီးရင္ install လုပ္လိုက္ပါ..
D: ေAာက္မွ eot ဆိုတဲ့ folder ေလးေဆာက္လိုက္ပါ…
ျပီးရင္ notepad ထဲမွာ..
<font face=”Zawgyi-one”><strong>1. Bold </strong>2. <em>Italic </em>3. <strong><em>Bold+Italic </em></strong>4.
Normal </font>
Aဲလိုေလးရိုက္ျပီး D:\eot ေAာက္မွာ eot.htm နဲ႕သိမ္းလိုက္ပါ..
WEFT program ကိုဖြင့္ပါ.. ျပီးရင္ box တက္လာလွ်င္ next ႏိွပ္ပါ… နာမည္နဲ႕ email ထည့္ခိုင္းရင္ ထည့္ျပီး next လုပ္ပါ..
ခုေပၚလာတဲ့ dialog box က Aေရးႀကီးတယ္ေနာ္... ေရွ႕က list boxထဲမွာ ခုက်ေတာ္က ကြန္ပ်ဴတာထဲမွာ ရွိတဲ့ ဖုိင္ကို သုံးမွာဆုိေတာ့ file://
ကိုေရြးတယ္...Internet ေပၚက ဖုိင္ကို ညႊန္းမယ္ ဆုိရင္ေတာ့ http:// (or) https:// (or) ftp://တစ္ခုခုကို ေရြးေပးစရာ လုိပါတယ္...ခုေရြးခဲ့တဲ့ list
box ရဲ႕ ညာဘက္ ၁-ခုေက်ာ္မွာရွိတဲ့ ... button ေလးကို ကလစ္ႏွိပ္ၿပီး ကၽြန္ေတာ္တို႕ လုပ္ထားတဲ့ eot.htm ရွိတဲ့ဖုိင္ေလးကို ညႊန္ျပလုိက္ပါတယ္...
ၿပီးရင္ Next ကို ကလစ္လုပ္ပါ...
Next ထပ္လိုက္ပါ… Do you want to continuous? ဆိုတာ ေပၚလာလည္း next လုပ္ပါ..
Font to Embed box ကိုေရာက္ရင္...subsetting ကို 7. No subsettingထားလုိက္ပါတယ္... Zawgyi-one Aျပင္ တျခား font ေတြပါလာရင္
don’t embed လုပ္လိုက္ပါ..
Create Font Objects ဆုိတဲ့ box ေပၚလာရင္ Edit button ကိုႏွိပ္ၿပီး eot သုံးမယ့္ web site ေတြရဲ႕ address ကို ထည့္းေပးရပါတယ္...
ထည့္တဲ့Aခါသိထားရမွာက http://mghla.blogspot.comလုိ႔ပဲထည့္ထား ခဲ့မိရင္ http://www.mghla.blogspot.comလုိ႔ ၀င္ၾကည့္တဲ့လူေတြ
Aဆင္မေျပပါဘူး... Aဲဒါေၾကာင့္ လိပ္စာထည့္တဲ့Aခါ wwwပါတာတဲ့ လိပ္စာေေရာ ၊ မပါတဲ့ လိပ္စာပါ ထည့္ေပးစရာ လုိပါတယ္...
ၿပီးရင္ ပုံထဲမွာ ျပထားတဲ့Aတုိင္း Aေပၚက check box ၂-ခုကိုAမွန္ျခစ္ ျခစ္ေပးပါUီး... ၿပီးၿပီဆုိရင္ေတာ့ Next ကို
ႏွိပ္ေတာ့ဗ်ာ...ခဏေတာ့ေစာင့္ေနာ္...ေဟာ ေပၚလာပါၿပီ... CSS Style dialog box ဆုိၿပီး ေပၚလာပါၿပီ...Aဲဒီထဲက ေAာက္မွာျပထားတဲ့ code
ေတြကို က်ေတာ္ copy ကူးထားလုိက္တယ္...
@font-face {
font-family: Zawgyi-One;
font-style: normal;
font-weight: 700;
src: url(ZAWGYIO3.eot)
}
@font-face {
font-family: Zawgyi-One;
font-style: oblique;
font-weight: normal;
src: url(ZAWGYIO2.eot);
}
@font-face {
font-family: Zawgyi-One;
font-style: oblique;
font-weight: 700;
src: url(ZAWGYIO1.eot);
}
@font-face {
font-family: Zawgyi-One;
font-style: normal;
font-weight: normal;
src: url(ZAWGYIO0.eot);
}
ၿပီးရင္ေတာ့ Close ကိုႏွိပ္တယ္... Next ကိုႏွိပ္တယ္...
You all are done.... ဘာညာလာျပေတာ့ Finish ကို ႏွိပ္လုိက္တယ္... D:\eot\ folder ထဲသြား ၾကည့္ေတာ့ ZAWGYIO0.eot, ZAWGYIO1.eot,
ZAWGYIO2.eot, ZAWGYIO3.eot ဆုိၿပီး ဖိုင္ ၄-ဖုိင္ ထြက္လာတာ ေတြ႕ရတယ္... ဘာျဖစ္လုိ႔ ၄-ဖုိင္ ထြက္တာလဲဆုိေတာ့ eot.htm ဖုိင္ထဲမွာ့
Bold, Italic, Bold+Italic, Normal ဆုိၿပီး စာ ၄-မ်ဳိး ထည့္ထားမိလုိ႔ ခင္ဗ်...
Upload EOT
တင္ဖို႕Aတြက္… မိမိႏွစ္သက္ရာ web hosting မွာတင္လို႕ရပါတယ္.. တကယ္လို႕ ဘယ္မွာ တင္ရမွန္းမသိဘူး.. Aလုပ္လည္း ရႈပ္တယ္ထင္ရင္
google page ကလည္းသံုးလို႕ရပါတယ္..
http://pages.google.com/ ကိုသြားပါ.. google account ၇ိွရင္ ရပါတယ္..
Upload တင္တာေလးကို ခဏေလာက္ေစာင့္လိုက္ပါ…
Upload တင္ထားတဲ့ File ကို right click ေထာက္ျပီး copy shortcut ယူျပီးမွတ္ထားပါ..
ျပီးရင္ notepad ထဲမွာ ျဖစ္ျဖစ္ ခဏမွတ္ထားပါ… ၄ ခုလံုးကို copy ကူးျပီးရင္ Aေပၚက ရထားတဲ့ eot CSS မွာ ေျပာင္းထည့္ရပါမယ္..
တင္ထားတဲ့ eot address ကို ေAာက္ကAတိုင္းေျပာင္းလိုက္ပါမယ္…
@font-face {
font-family: Zawgyi-One;
font-style: normal;
font-weight: 700;
src: url(http://saturngod.googlepages.com/ZAWGYIO3.eot)
}
@font-face {
font-family: Zawgyi-One;
font-style: oblique;
font-weight: normal;
src: url(http://saturngod.googlepages.com/ZAWGYIO2.eot);
}
@font-face {
font-family: Zawgyi-One;
font-style: oblique;
font-weight: 700;
src: url(http://saturngod.googlepages.com/ZAWGYIO1.eot);
}
@font-face {
font-family: Zawgyi-One;
font-style: normal;
font-weight: normal;
src: url(http://saturngod.googlepages.com/ZAWGYIO0.eot);
}
ကဲ Blog စလုပ္ရေAာင္….
Aပိုင္း ၂
Blog လုပ္ျခင္း
www.blogger.com မွာ Aရင္ဆံုး register လုပ္လိုက္ပါ…
Create Your Blog Now ဆိုတာေလးကို ႏိွပ္လိုက္ပါ..
Google Account ရိွျပီးသူေတြကေတာ့ account ကို register လုပ္တဲ့ေနရာမွာ google account sign in လုပ္လိုက္ပါ..
Display name မွာ ကိုယ့္ blog နာမည္ေလးေပးခဲ့ပါ…
ကိုယ့္ blog address ေလးကိုၾကိဳက္ရာေပးေပါ့..
ျပီးရင္ ႏွစ္သက္ရာ theme ေလးေရြးလိုက္ပါ..
ကဲ… register ျပီးသြားရင္ေတာ့ စေရးလို႕ရျပီ…
Log in မ၀င္ရေသးရင္ ၀င္လိုက္ပါ…
ျပီးရင္ layout ကို ၀င္လိုက္ပါ..
Edit HTML ကို ၀င္လိုက္ပါ..
Edit HTML တြင္ body { ဆိုတာေလးကိုရွာလိုက္ပါ..
သူ႕Aေပၚတြင္ Aေပၚကရထားေသာ eot css ေလးကို past လုပ္လိုက္ပါ…
( Aေပၚက search bar ကိုျဖဳတ္လိုပါက )
ထုိ႕ေနာက္ ေAာက္ တြင္
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
ဆိုတာထည့္လိုက္ပါ.. ထိုAခါ
@font-face {
font-family: Zawgyi-One;
font-style: normal;
font-weight: 700;
src: url(http://saturngod.googlepages.com/ZAWGYIO3.eot)
}
@font-face {
font-family: Zawgyi-One;
font-style: oblique;
font-weight: normal;
src: url(http://saturngod.googlepages.com/ZAWGYIO2.eot);
}
@font-face {
font-family: Zawgyi-One;
font-style: oblique;
font-weight: 700;
src: url(http://saturngod.googlepages.com/ZAWGYIO1.eot);
}
@font-face {
font-family: Zawgyi-One;
font-style: normal;
font-weight: normal;
src: url(http://saturngod.googlepages.com/ZAWGYIO0.eot);
}
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
body {
ျဖစ္သြားပါမည္။
ျမန္မာစာေပၚရန္ variable မ်ားေျပာင္းျခင္း
Edit Html တြင္
<Variable Name= ႏွင့္ စကာ type="font" ျဖစ္ေသာ စာမ်ားကိုရွာပါ.. % ေနာက္တြင္ Zawgyi-one, ထည့္လိုက္ပါ..
Example :
<Variable name="bodyFont" description="Text Font" type="font"
default="normal normal 100% Zawgyi-one,'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="pageTitleFont" description="Blog Title Font" type="font"
default="normal bold 200% Zawgyi-one,'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="descriptionFont" description="Description Font" type="font"
default="normal normal 100% Zawgyi-one,'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="headerFont" description="Sidebar Title Font" type="font"
default="normal bold 100% Zawgyi-one,'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="postTitleFont" description="Post Title Font" type="font"
default="normal bold 135% Zawgyi-one,'Trebuchet MS',Verdana,Arial,Sans-serif">
Aကုန္လံုးထည့္လို႕ျပီးပါက Save လုပ္လိုက္ပါ…
ကဲ ျမန္မာလိုေရးလို႕ရပါျပီ…
Post တင္ျခင္း
Posting ေAာက္က Create New Post ကို သြားလိုက္ပါ…
Aဲဒီမွာ rich text box ေပၚလာပါမယ္… Edit HTML ကိုေျပာင္းရိုက္ပါ..
Aေကာင္းဆံုးကေတာ့ Aရင္ဆံုး notepad မွာ Aရင္ရိုက္… ျပီးမွ past လုပ္ျပီးတင္ေပါ့… ဒါမွ ျမန္မာလိုရိုက္ထားတာကို ျမင္ရမွာပါ…
Notepad မွာ ေဇာ္ဂ်ီ font ကိုေကာင္းေကာင္းရိုက္လို႕ေAာင္…
ကၽြန္ေတာ္တို႕ zawgyi-one ကုိ notepad မွာ စာရိုက္ရင္ စာေသေသခ်ာခ်ာမေပၚဘူးဗ်...
တျခားစက္ေတြမွာေတာ့ မသိဘူး..
ကၽြန္ေတာ္သံုးတဲ့ စက္မွာေတာ့ Aေပၚက --္ တို႕ --ါ တို႕ဆိုမေပၚဘူး...
Aေပၚပိုင္းက --ီ တို႕ --ိ တို႕ဆို မေပၚဘူး...
ေရးရတာ နည္းနည္း feel ပ်က္တာေပါ့...
word နဲ႕ေရးျပန္ေတာ့လည္း ဖြင့္ရတာရႈပ္တယ္...
ဒါနဲ႕ နည္းလမ္းေလးရွာၾကည့္ေတာ့...
တနည္းေတာ့ေတြ႕တယ္...
Notepad ကိုဖြင့္ဖြင့္လိုက္တယ္...
enter တခ်က္ေခါက္လိုက္တယ္...
ျပီးေတာ့ space ေလးတခ်က္ေလာက္ ပုတ္ေလာက္ေပါ့...
ျပီးမွ Aေပၚဆံုးကေန စေရးၾကည့္...
--္ တို႕ --ိ တို႕ေကာင္းေကာင္းေပၚတယ္...
notepad မွာေရးရတာ ပိုေကာင္းသြားတယ္...
ျပီးရင္ ေတာ့ publish post လုပ္လိုက္ရံုပဲေပါ့…
Aပိုင္း ၃
လိုAပ္တာမ်ား ျဖည့္စြက္ျခင္း…
User Online
User online ကေတာ့ ကိုယ့္ blog ကို လူဘယ္ႏွစ္ေယာက္ Aခုၾကည့္ေနလဲဆိုတာကို ေဖာ္ျပဖို႕ပါ…
ျပီးရင္ blogger ထဲကို၀င္
Template ေAာက္က Page Elements ကို၀င္... Side bar မွာ Add a Page Elements ကို ႏိွပ္…
HTML / Javascript ကို ႏိွပ္ပါ… Aဲဒီ Aထဲမွာ ဒါေလးထည့္လိုက္ပါ…
<script src="http://fastonlineusers.com/on2.php?d=yourblog.blogspot.com" type="text/javascript"></script> User Online
Aနီေရာင္စာေနရာမွာ ကိုယ့္ရဲ႕ blog address ထည့္လိုက္ပါ…
Hit Counter
ကိုယ့္ site ကို လူဘယ္ႏွစ္ေယာက္၀င္သလဲဆိုတာ သိဖို႕Aတြက္…
http://www.ultimate-counter.com/
ကိုသြားပါ…
Your Web Address (URL): တြင္ ကိုယ့္ blog လိပ္စာထည့္ပါ..
Start Counter at: ကေတာ့ စခ်င္တဲ့ counter ေပါ့..
Email: ကေတာ့ ကိုယ့္ email ထည့္ေပါ့…
ျပီးရင္ design ေရြးလိုက္…
Sign Up ဆိုတာေလးကို ႏိွပ္လိုက္ပါ..
ျပီးရင္ textbox ထဲမွာ HTML code ေတြေပၚလာပါမယ္…
ဒီAတိုင္း ကူးလိုက္ရင္ ရပါတယ္.. ကၽြန္ေတာ္ကေတာ့ တျခား Aပိုေတြ ပါလာတာမၾကိဳက္တဲ့Aတြက္.. တကယ့္ Aေရးၾကီးလုတိ ဲ့ image ေလးပဲ
ကူးပါမယ္..
<img src="http://www.ultimate-counter.com/counter/?id=3055734&style=8" width="83" height="19" border="0" alt="Cabo
Yachts">
Aဲဒါေလးကိုသာ ကူးပါမယ္.. Aနီေရာင္နဲ႕ ျပထားတဲ့Aပိုင္းကေတာ့ တစ္ေယာက္နဲ႕ တစ္ေယာက္ မတူပါဘူး..
ျပီးရင္ blogger ထဲကို၀င္
Template ေAာက္က Page Elements ကို၀င္... Side bar မွာ Add a Page Elements ကို ႏိွပ္…
HTML / Javascript ကို ႏိွပ္ပါ… Aဲဒီ Aထဲမွာ ခုနက ကူးထားတဲ့ code ေလးထည့္လိုက္ေပါ့…
ျပီးရင္ Save Changes လုပ္လိုက္ပါ… ဒါဆိုရင္ ရပါျပီ…
Cbox ထည့္မယ္.. (ကိုရန္ေAာင္ http://yanaung.blogspot.com )
ဒီတစ္ခါေတာ႔ ဆီဗုံးလုိ႔ Aမ်ားစုက ခ်စ္စႏုိးေျပာင္ေခၚေနၾကတဲ႔ Cbox နဲ႔ ပတ္သက္တာ ေလးေတြ ကၽြန္ေတာ္သိသေလာက္ ေရးေပးပါမယ္.
Cbox ဆုိတာကေတာ႔ ဘေလာ႔ဂ္ေတြ ေတာ္ေတာ္မ်ားမ်ားမွာ ေတြ႔ေနရတဲ႔ ဘေလာ႔ဂ္ေရးသူနဲ႔ လာလည္သူေတြၾကားက communication tool
ေလးတစ္ခု ပါပဲ. လာလည္သူေတြ ကလည္း သူတုိ႔ေျပာခ်င္တဲ႔ Message ေတြကုိ Cbox မွာ ထားခဲ႔တယ္။ ဘေလာ႔ဂ္ပုိင္ရွင္ကလည္း ျပန္ေျပာမယ္။
မွန္တာကုိ ေျပာစတမ္းဆုိရင္ ကုိယ္႔ရဲ႔ Cbox မွာ လာလည္သူေတြ မ်ားတာကို ဘေလာ႔ဂ္ပိုင္ရွင္တုိင္း ၀မ္းသာAားရ ျဖစ္မိၾကပါတယ္။
ခုေနာက္ပုိင္းဆုိရင္ တစ္ေယာက္နဲ႔တစ္ေယာက္ Aျပန္Aလွန္ေနာက္ေျပာင္တာ ေလးေတြကို ဆီဗုံးမွာ ေရးခဲ႔ၾကတယ္။ Aျပင္က ေမာေမာနဲ႔
ျပန္လာျပီးေနာက္ ကၽြန္ေတာ္ပထမဆုံး လုပ္တာကေတာ႔ Email စစ္တာ မဟုတ္ပါဘူး။ ကုိယ္႔ရဲ႔ ဆီဗုံးမွာ ဘယ္သူေတြ ၀င္ေရးသြားလဲ၊ ဘယ္သူေတြ
၀င္ဖြသြားလဲ ဆုိတာကုိ Aရင္ၾကည္႔တာပါပဲ။
ကဲ. စလုိက္ၾကရေAာင္လားဗ်ာ.
ပထမဆုံး http://www.cbox.ws/ ကုိသြားပါ။ Account တစ္ခု Sign Up လုပ္ပါ။ See all styles မွာ ကုိယ္ၾကိဳက္တဲ႔ Color ေလးေတြ ေရြးယူလုိ႔
ရပါတယ္။
ျပီးရင္ ကုိယ္႔ Account ထဲကုိ ၀င္ပါ။ Admin Tab ကုိသြားပါ။ Aဲဒီ႔ေနရာကေန ကုိယ္႔ရဲ႔ Cbox ကုိ Aမ်ိဳးမ်ိဳး manage လုပ္လုိ႔ ရပါတယ္။
Width ေတြ Height ေတြလည္း ေျပာင္းလုိ႔ရပါတယ္။ Default ေပးထားတဲ႔ Width က ေတာ္ေတာ္က်U္းပါတယ္။ ၁၆၀ ပဲ ေပးထားပါတယ္။ ၂၀၀
(သုိ႔) ၂၂၀ ေလာက္ ေျပာင္း ၾကည္႔လုိက္ပါ။ ဒါဆုိရင္ ကုိယ္႔ရဲ႔ Cbox မွာ စာေတြ ေကာင္းေကာင္းျမင္ရတဲ႔ Aဆင္႔ထိ ေရာက္သြားပါလိမ႔္မယ္။
စိတ္ၾကိဳက္ေျပာင္းယူပါ။ ကုိယ္႔ရဲ႔ Template က ေပးထားတဲ႔ Column Width နဲ႔ ကုိက္ညီေAာင္ ေျပာင္းယူပါ။
Form Layout မွာေတာ႔ Cbox ရဲ႔ Design ကုိ ေျပာင္းယူလုိ႔ရပါတယ္။ Message ေရးတာကုိ Aေပၚမွာ ထားလုိ႔ရသလုိ ေAာက္မွာလည္း
ထားလုိ႔ရပါတယ္။ ကိုယ္႔ စိတ္ၾကိဳက္ ေျပာင္းၾကည္႔ပါခင္ဗ်ာ။
Messages တုိ႔၊ Message Length တုိ႔မွာလည္း ကုိယ္လုိသလုိ Setting ကုိထားႏိုင္ ပါတယ္။
Cbox ကုိ မိတ္ဆက္တဲ႔ Aပုိင္းကေတာ႔ ျပီးပါျပီ။ ခုေျပာမွာကေတာ႔ Aေရးၾကီးတဲ႔ Aပုိင္းပါ။ Cbox မွာ ျမန္မာလုိ စာေကာင္းေကာင္းေပၚေAာင္
ဘယ္လုိလုပ္ရမလဲ ဆုိတဲ႔ ျပႆနာပါ။
Colors & Fonts ကုိ သြားပါ။ Fonts ဆုိတာကုိ သြားပါ။ သူ႔ရဲ႔ Default က Arial Font ကုိ ေပးထားပါတယ္။ Aဲဒီ႔ Box ေလးေနရာမွာ Zawgyi-One
လုိ႔ ေျပာင္းရုိက္ေပးလုိုက္ပါ။ ျပီးရင္ Apply Button ေလးကုိ ႏွိပ္လုိက္ပါ။ ဒါဆုိရင္ ကုိယ္႔ရဲ႔ Cbox မွာ ျမန္မာလုိ စာေကာင္းေကာင္း ေပၚပါျပီ။
ေနာက္တစ္ခုကေတာ႔ Smilies Tab ပါ။ Aေပၚခပ္က်က်ေနရာေလးက Preset Smilies ဆုိတာေလးကုိ ႏွိပ္လုိက္ရင္ ခုလုိ ပုံမွာ ျမင္ရပါလိမ္႔မယ္။
Aဲဒီ႔ေနရာမွာ ကုိယ္႔ Cbox ထဲမွာ ေပၚေစခ်င္တဲ႔ Smilies Color ေလးေတြကုိ ေျပာင္းလုိ႔ရပါတယ္။ Default Blue, Default Orange, Default
Yellow လုိ႔ ေပးထားပါတယ္။ ၾကိဳက္ရာေျပာင္းယူႏုိင္ပါတယ္။
Customize Smilies ကုိ ျပန္သြားပါ။ ခုေျပာမွာကေတာ႔ ကုိယ္ၾကိဳက္တဲ႔ Smilies ပုံေလးေတြကုိ ဘယ္လုိထည္႔လုိ႔ ရႏိုင္မလဲ ဆုိတာပါပဲ။
New Row ကုိ ယူလုိက္ပါ။ URL Address ေနရာမွာ ကုိယ္ထည္႔ခ်င္တဲ႔ Smilies ပုံေလးရဲ႔ URL ကုိ ရုိက္ထည္႔ေပးလုိက္ပါ။ Code ေနရာမွာေတာ႔
ကုိယ္႔ရဲ႔ Smilies ေလးAတြက္ သီးသန္႔ သေကၤတေလးတစ္ခု ကုိယ္႔ဖာသာကိုယ္ လုပ္ေပးလုိက္ပါ။ Uပမာ ဟားတုိက္ရီေနတဲ႔ ပုံေလးထည္႔ထားမိရင္
:)) လုိ႔ ရုိက္ထည္႔ျပီး မွတ္ခုိင္းထားတဲ႔ ပုံစံမ်ိဳးေပါ႔။
My Users Tab ကေတာ႔ Diabled ျဖစ္ေနပါတယ္။ သူကေတာ႔ ပုိက္ဆံသြင္းထားတဲ႔ Registered Users ေတြAတြက္ပဲ ရပါတယ္။ Blocked Users
ကေတာ႔ ကုိယ္႔ဘက္က Block လုပ္ထားတဲ႔ User ေတြနဲ႔ ပတ္သက္တဲ႔ Information ေတြ ျပထားတာပါ။
Messages မွာကေတာ႔ ကုိယ္႔ Cbox မွာ ေရးထားတဲ႔ Messages ေတြကုိ Manage လုပ္လုိ႔ရပါတယ္။
ကုိယ္ဖ်က္ခ်င္တဲ႔ Message ကုိ Tick လုပ္ျပီး ဖ်က္ပစ္လုိ႔ရပါတယ္။ ကုိယ္ Ban လုပ္ခ်င္တဲ႔ User ကုိလည္း Tick လုပ္ျပီး Ban ဆုိတာကုိ
ႏွိပ္လုိက္လုိ႔ရပါတယ္။ ဒါဆုိရင္ Aဲဒီ႔ user ကုိယ္႔ Cbox မွာ စာလာေရးလုိ႔ မရေတာ႔ပါဘူး။ IP Address ကုိလည္း Tracking လုိက္လုိ႔ ရပါတယ္။
ဘယ္ေနရာကေန စာလာရုိက္တယ္ဆုိတာကုိ သိႏုိင္တာေပါ႔။ ကၽြန္ေတာ္သုံးတဲ႔ IP Tracking Tool ကေတာ႔ IP Hacker ပါ။
Cbox Aေၾကာင္းကေတာ႔ ဒီမွာ ျပီးပါျပီ။
ကုိယ္႔ရဲ႔ဘေလာ႔ဂ္မွာ Cbox တင္ဖုိ႔Aတြက္ Quick Setup ကုိ ျပန္သြားပါ။ သူေပးထားတဲ႔ Codes ေတြကုိ ကူးယူပါ။
ျပီးရင္ Blogger ထဲကုိ Sign in ၀င္ျပီးေတာ႔ Template>Add Page Element မွာ HTML/JavaScript ကုိ ေရြးလုိုက္ပါ။ ျပီးရင္ ကူးယူလာတဲ႔ Code
ေလးေတြ ကုိ ထည္႔ေပးလုိက္ရုံပါပဲ။
Add a Page Element ကုိႏွိပ္လုိက္လွ်င္ ျမင္ရမည္႔ပုံ
Aားလုံး Aဆင္ေျပ ေခ်ာေမြ႔ၾကပါေစ ခင္ဗ်ာ။ မရွင္းတာရွိရင္လည္း Comments ထဲမွာ ၀င္ေရာက္ ေမးျမန္းႏုိင္ပါတယ္။
မွတ္ခ်က္။
၁. Cbox တြင္ Aေကာင္းAဆုိးေရာေနသည္။ Cbox ထည္႔ထားျခင္းေၾကာင္႔ မိတ္ေဆြမ်ားတုိးပြားလာႏုိင္သကဲ႔သုိ႔ Aမည္မေဖာ္ဘဲ
၀င္ေရာက္ေႏွာင္႔ယွက္ တတ္သူမ်ားေၾကာင္႔လည္း စိတ္Aေႏွာင္႔Aယွက္ ျဖစ္ရတတ္ပါသည္။
၂. Blogger Aသစ္မ်ားAေနျဖင္႔ Cbox ရွိထားျခင္းသည္ မိမိဘေလာ႔ဂ္Aတြက္ လာလည္သူမ်ားထံမွ AၾကံUာဏ္ေကာင္းမ်ား ပုိမုိ၍
ရလာေစႏုိင္ပါသည္။ မိတ္ေဆြ မ်ားလည္း ပုိမုိတုိးပြားလာေစႏိုင္ပါသည္။
၃. Cbox မရွိေသာ ဘေလာ႔ဂ္သို႔ ၀င္လွ်င္ မရင္းႏွီးေသးေသာ သူစိမ္းAိမ္သုိ႔ Aလည္သြား ရသည္ႏွင္႔ တူပါသည္။ ထုိ႔ျပင္ မိမိAား ေAးစက္စက္ႏွင္႔
ဆက္ဆံေနသကဲ႔သုိ႔ ခံစားရပါသည္။
( ကိုရန္ေAာင္ Aာေဘာ္ျဖစ္သည္ ၊ ကၽြန္ေတာ္လည္း ေထာက္ခံပါ၏ )
Cbox Background ေျပာင္းမယ္
Cbox ရဲ႕ Main BG နဲ႕ Alt BG တို႕ကို ဘာမွ မထည့္ခဲ့ပါနဲ႕.. ရိွတာကို ဖ်က္လိုက္ပါ…
ျပီးရင္ Cbox ထည့္ထားေသာ Page Element ကို Edit လုပ္ပါ
id="cboxmain"
ကိုရွာၾကည့္ပါ… ပါရင္ ကိစၥမရိွပါဘူး…
မပါရင္ေတာ့ name="cboxmain" ကိုရွာပါ… သူ႕ေနာက္မွာ id="cboxmain" ကိုထည့္ပါ… ျပီးရင္ save လုပ္လိုက္ပါ…
Aသစ္ရတဲ့ Code ကို ျပန္ကူးထည့္ဖို႕လိုပါတယ္..
Template ေAာက္က Edit HTML သြားပါ
body {
ကိုရွာပါ
သူ႕Aေပၚတြင္
#cboxmain{
background:url(http://i117.photobucket.com/albums/o74/zwel/Avril-Lavigne-Photograph-C11800763c.jpg) center no-repeat;
font-family: 'ZawGyi-One', ZawgyiOne, Zawgyi1, Trebuchet MS, Trebuchet, arial, verdana, sans-serif;
}
#cboxdiv{
font-family: 'ZawGyi-One', ZawgyiOne, Zawgyi1, Trebuchet MS, Trebuchet, arial, verdana, sans-serif;
}
Aဲဒါေလးထည့္လိုက္ပါ… Aနီနဲ႕ ျပထားတာကေတာ့ ကိုယ့္ရဲ႕ ပံုပတ္လမ္းေၾကာင္းပါ… ပံုကိုေတာ့ http://www.imageshack.us/
မွာတင္လို႕ရပါတယ္… ျပီးရင္ save လုပ္လို္က္ပါ…
Recent Post
Side Bar တြင္ Add a Page Element ကို Click လုပ္ပါ… HTML/Javascript ေရြးပါ…
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/showrecentposts2.js"></script><script
style="text/javascript">var numposts = 10;var showpostdate = true;var showpostsummary = true;var numchars = 100;var
standardstyling = true;</script><script src="http://saturngod.blogspot.com/feeds/posts/default?orderby=published&alt=jsonin-
script&callback=showrecentposts"></script>
Aဲဒါေလးကို ထည့္ျပီး save လုပ္လို္က္ပါ… numposts ကေတာ့ ေဖာ္ျပခ်င္တဲ့ post AေရAတြက္ပါ.. numchars ကေတာ့ character
AေရAတြက္ပါ…
Customizable recent comments widget (using JSON feed)
Blog မွာ.. ကၽြန္ေတာ္တို႕ေတြ recent comment ေလးေတြကို side bar မွာ ေဖာ္ျပဖို႕ Aတြက္ပါ…
Template ေAာက္က Edit HTML ကိုသြားပါ…
</head>
ကိုရွာပါ…
Aဲ့ဒီေAာက္တြင္
<script type='text/javascript'
src='http://saturngod.googlepages.com/peek.js' />
Aဲဒါေလး ျဖည့္လိုက္ပါ…
ဒါဆိုရင္
</head>
<script type='text/javascript'
src='http://saturngod.googlepages.com/peek.js' />
ဆိုျပီးျဖစ္သြားပါမယ္..
ျပီးရင္ save လုပ္လိုက္ပါ…
ျပီးရင္ Template ေAာက္က page elements ကိုသြားပါ…
Add a page element ကိုသြားပါ…
HTML / Java Script ကိုေရြးပါ..
<br/><script language="javascript">
var numcomments = 10;
var numchars = 100;
</script>
<script src="http://yourblog.blogspot.com/feeds/comments/default?
alt=json-in-script&callback=commentDisplay"></script>
10 ကေတာ့ blog မွာ ျပ ဖို႕AေရAတြက္နဲ႕ 100 ကေတာ့ comment မွာ Aမ်ားဆံုး ေဖာ္ျပခ်င္တဲ့ စာလုံးAေရAတြက္ပါ..
Peek-a-boo Post (Read More)
Blog မွာ.. ကၽြန္ေတာ္တို႕ေတြ Read More ေလးေတြကို post ေတြမွာ လုပ္ဖို႕Aတြက္ပါ..
(Template ေAာက္က Edit HTML ကိုသြားပါ…
</head>
ကိုရွာပါ…
Aဲ့ဒီေAာက္တြင္
<script type='text/javascript'
src='http://saturngod.googlepages.com/peek.js' />
Aဲဒါေလး ျဖည့္လိုက္ပါ…
ဒါဆိုရင္
</head>
<script type='text/javascript'
src='http://saturngod.googlepages.com/peek.js' /> ) Aထက္က Customizable recent comments widget (using JSON feed)
Aတို္င္းျပင္ထားျခင္း္ျဖစ္သည္ ။ ထည့္ထားျပီးက ထည့္ရန္မလိုပါ..
expand-widget ကို check လုပ္ထားပါ…
id='post' ကိုရွာပါ…
ျပီးလွ်င္ ေAာက္က Aတိုင္းျပင္လိုက္ပါ… Aနီေရာင္နဲ႕ စာမ်ားသည္ မူရင္း code ကိုထပ္ျဖည့္ထားျခင္းမ်ားျဖစ္သည္.. က်န္ code မ်ားသည္ မူရင္း
code ျဖစ္သည္…
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read
More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary
only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
ျပီးပါက save လုပ္လိုက္ပါ..
Setting ေAာက္က Formatting ကို သြားပါ… ေAာက္နားတြင္ Post Template ဆိုေသာ text box ေလးေတြ႕ရပါမယ္..
Type your summary here
<span id="fullpost">
Type rest of the post here
</span>
Aဲဒီစာေလးကို copy/paste လုပ္လိုက္ပါ… ျပီးရင္ save လုပ္လိုက္ပါ…
Post Aတြက္ compose လုပ္ေသာAခါမွာ… Aက်U္းကို Type your summary here တြင္ Aစားထိုးျပီး… က်န္ေသာ စာမ်ားကို Type rest of
the post here တြင္ ထည့္ပါ….
Example:
Aက်U္းAားျဖင့့္
<span id="fullpost">
ဒါကေတာ့ Aျပည့္Aစုံ post ေလးေပါ့…
</span>
Aရင္က တင္ထားေသာ post မ်ားကိုေတာ့ သြားျပီး effect ျဖစ္မွာမဟုတ္ပါဘူး.. Aခုမွ စတင္ေသာ post မ်ားကိုသာ စတင္ effect ျဖစ္မွာပါ…
Appendix
FAQ
၁. Blog မွာ သီခ်င္းေတြ ထည့္ဖို႕ ဘယ္မွာ flash player ရႏိုင္သလဲ။
http://www.myflashfetish.com မွာ mp3 player လုိ႕ေျပာင္းလိုက္ျပီး… ႏွစ္သက္ရာ Design နဲ႕ ရယူႏိုင္ပါတယ္… သီခ်င္းေတြကိုေတာ့
webhosting တစ္ခုမွာ တင္ထားဖို႕လိုပါတယ္..
၂. WebHosting ေတြ ဘယ္လိုရႏိုင္သလဲ။
http://pages.google.com မွာ eot Aတြက္ Aျပင္ File ေတြကို direct Aေနနဲ႕ သံုးႏိုင္ပါတယ္… www.awardspace.com ,
www.freewebtown.com တို႕ကလည္း freewebhosting ေတြပါ…
၃. File Sharing ေပးခ်င္ရင္ webhosting နဲ႕ေပးသင့္လား။
ေပးလို႕ရပါတယ္… ဒါေပမယ့္ file sharing Aတြက္ဆိုရင္ www.mediafire.com တို႕လို file hosting ကေန ေပးရင္ပိုေကာင္းပါတယ္…
ဘာျဖစ္လို႕လည္းဆို register လုပ္စရာမလိုပဲ… file ကို တင္လို႕ရလို႕ပါတယ္…
၄. Zawgyi-one သြင္းလို႕မရဘူး… computer သံုးရတာ user lever Aဆင့္ပဲ၇ိွတယ္… ဘာမွ လုပ္ပိုင္ခြင့္မရိွရင္ စာဘယ္လိုရိုက္မလဲ ။
မပူပါနဲ႕… စာ၇ိုက္ဖို႕Aတြက္ zawgyi-one web text editor ရိွပါတယ္… http://www.mysteryzillion.com/project/webtext/ ကို IE
နဲ႕ Aသံုးျပဳျပီး စာရိုက္ႏိုင္ပါတယ္…
၅. Blog မွာတိုက္ရုိက္စာရိုက္ရင္ စာမေပၚဘူး… notepad ကေနမွ ေပၚတယ္.. တိုက္ရိုက္သံုးခ်င္တယ္။
Browser တစ္ခုလံုးကို Zawgyi-one ေျပာင္းလိုက္ရင္ ရပါတယ္..
IE မွာဆိုရင္
Aရင္ဆံုး notepad ဖြင့္
body
{
font-family:Zawgyi-one;
}
input, select , textarea
{
font-family:Zawgyi-one;
}
ဆိုျပီးရိုက္လိုက္ပါ.... ျပီးရင္ notepad မွာရိုက္ျပီ... D:\ie.css နဲ႕သိမ္းလိုက္....
ျပီးေတာ့ IE ကိုဖြင့္...
Tool -> Folder option -> Accessibility ကို ႏိွပ္ပါ...
Ignore Font Style specified...pages ကို check လုပ္ပါ...
Format documents using my style sheet ကို check လုပ္ပါ..
Browse လုပ္လိုက္ပါ...
D:\ie.css ကိုေရြးလိုက္ပါ...
ျပီးရင္ OK လုပ္လိုက္ပါ... OK ထပ္လုပ္ပါ..
ကဲရပါျပီ... ျမန္မာလို... IE တစ္ခုလံုး ေဇာ္ဂ်ီ font ျဖစ္သြားပါျပီ...
Firefox မွာဆိုရင္
Firefox ကိုဖြင့္....
Tool-> Content ကို ၀င္လိုက္ပါ..
Font And Color တြင္ Advanced ကို၀င္ပါ...
Font ေတြကို Zawgyi-one လုိ႕ေျပာင္းလိုက္ပါ...
Font Size ကိုလည္း သင့္ေတာ္ရာျပင္လိုက္ပါ....
UTF-8 ကိုသံုးပါ...
ျပီးရင္ OK OK ေပါ့...
ကဲရပါျပီ... ျမန္မာလို... Firefox တစ္ခုလံုး ေဇာ္ဂ်ီ font ျဖစ္သြားပါျပီ...
Aဲဒါဆိုရင္ blogger မွာလည္း တုိက္ရိုက္ေရးလို႕ရပါျပီ..
၆. နာရီထည့္ခ်င္ရင္ေကာ ဘယ္ကေန ယူရမလဲ။
http://www.clocklink.com/ မွာရႏိုင္ပါတယ္…
၇. တျခားဟာ ထူးထူးဆန္းဆန္းေလးေတြ sidebar မွာထည့္ခ်င္ရင္ ဘယ္ကယူရမလဲ။ ေနာက္ျပီး Gtalk ကိုလည္းထည့္ခ်င္တယ္။
Site ေတြကေတာ့ Aမ်ားၾကီးပါ… http://www.google.com/ig/directory?synd=open&cat=all မွာေတာ့ ေတာ္ေတာ္စံုပါတယ္..
google က ေပးထားတာပါ.. Gtalk ကိုလည္း Aဲဒီမွာ code ယူျပီးထည့္လို႕ရပါတယ္..
http://www.thefreedictionary.com/ ကလည္း ရႏိုင္ပါတယ္..
၈. Blogger ကေပးထားတဲ့ design မဟုတ္ပဲ တျခား design နဲ႕ Three Column ထည့္ခ်င္ရင္ ဘယ္လိုလုပ္ရမလဲ။
http://hoctro.blogspot.com/search/label/Free%20Templates မွာ Three column ေတြရႏိုင္ပါတယ္…
http://www.templatepanic.com/ မွာလည္း ရႏိုင္ပါတယ္…
http://myanmarbloggers.forum5.com/index.php မွာလည္း သြားေရာက္ေမးျမန္းႏိုင္ပါေသးတယ္..
၉. Dropdown menu လုပ္ခ်င္ရင္ ဘယ္လိုလုပ္ရမလဲ။
http://www.anniyalogam.com/widgets/dropdown.html မွာသြားလုပ္ႏိုင္ပါတယ္...
Useful Link
Blog Hack
http://beautifulbeta.blogspot.com/
http://hackosphere.blogspot.com/
Myanmar Blog Directory
http://mmblogdirectory.blogspot.com/
Myanmar Blogger Forum
http://www.myanmarbloggers.co.nr/
Myanmar Blogger
သိသေလာက္ ၾကားဘူးနား၀ ေပါ့.. Aကုန္ေတာ့္ ကၽြန္ေတာ္လည္း သိဘူး.. ေတာ္ေတာ္ေလးကို မ်ားတယ္… ကိုမင္းေက်ာ္ blog မွာဆို
blog Aတြက္ လိုAပ္တာေတြကို ၾကည့္ရႈႏိုင္ပါတယ္..
Oosoo http://www.tartarlay.blogspot.com/
Tesla http://teslanetblog.blogspot.com/
ကိုစစ္Aိမ္ http://sisain.blogspot.com/
ကိုစိုးေဇယ် http://www.soezeya.blogspot.com/
ကိုဆန္းUီး http://www.sannoo.blogspot.com/
ကိုညီလင္းဆက္ http://nyilynnseck.blogspot.com/
ကိုမင္းေက်ာ္ http://kminnkyaw.blogspot.com/
ကိုမိုးတိမ္ http://shwemoetain.blogspot.com/
ကိုမ်က္လံုး http://www.myatlone.blogspot.com/
ကိုပြတ္ http://myanmaroa6.blogspot.com/
ကိုရန္ေAာင္ http://www.yanaung.blogspot.com/
ကိုသန္႕ဇင္ http://mgthantzin.blogspot.com/
ကိုေမာင္လွ http://mghla.blogspot.com/
ကိုေ၀ၿဖိဳးေက်ာ္ http://edwardwitten.blogspot.com/
ကေဒါင္းညင္သာ http://kadaung.blogspot.com/
ညေလး http://www.ainmetdiary.blogspot.com/
မယ္လိုဒီေမာင္ http://melodymaungmm.blogspot.com/
Aစ္မသUၨာ http://thinzar00.blogspot.com/
Aိမြန္စိုး http://www.ems-dailydiary.blogspot.com/
ေမာင္Uေပကၡာ http://mgequanimity.blogspot.com/
ေက်းဇူးတင္လ်က္
Saturngod

Friday, January 25, 2013

CSS အေၾကာင္း တေစ့တေစာင္း


www.phoelapyae.com 1
1 ရာမညဖိုးလျပည့္

CSS ဆိုတာ Cascading Style Sheets ရဲ႕ အတိုေကာက္ပါ။
CSS အေၾကာင္းကို ေဆြးေႏြးမယ္ဆိုေတာ့ HTML ကုိနည္းနည္းပါးပါး နားလည္မွ ရပါမယ္။ HTML Tag ေတြကုိ
အနည္းအက်ဥ္း ေလ့လာေစလိုပါတယ္။ ဥပမာ <p>This is a paragraph</p> မွာ p ဆိုတာ paragraph ျဖစ္ပါတယ္။
အဲလိုမ်ိဳးေပါ့ ။ အနည္းအက်ဥ္းသိရင္ ပိုေကာင္းပါတယ္။
HTML ဆို <html> စၿပီး</html>နဲ႕ ဆံုးသလို CSS မွာလဲ <style>CSS</style>ဆိုၿပီးေရးပါတယ္။ ေနာက္တစ္ခု
မွတ္ထားရမွာကေတာ ႔ CSS Style code ဟာ head tag အတငြ ္းမွာပ ဲ ရိွရပါမယ။္ CSS စေရးမယ္ဆိုၿပီး
ဒီလိုေၾကာ္ျငာရပါတယ္။ </title> ၿပီးေတာ႔ </head> မဆံုးမီ ၾကားမွာေရးရမယ္။ဆိုလုိတာက </title> နဲ႕ </head>
ၾကားမွာ CSS style code ကိုေၾကာ္ျငာေပးရမွာပါ။ ဒီလိုေလးပါ ။
<head><title>My Test</title>
<style type=text/css>
<style>
</head>
CSS ကုိေရးမယ္ဆိုရင္ သူ႕ ရဲ႕ ေရးထံုးစည္းမ်ဥ္းကေတာ့
selector {property: value} ပါ။ အဲဒါကုိ ေရးမယ္ဆိုရင္
body {background-color: black}
ဒီေနရာမွာ
body -- > selector
property-- > backgroun-color
value -- > black
www.phoelapyae.com 2
2 ရာမညဖိုးလျပည့္
ျဖစ္ပါတယ္။ ေနာက္ပိုင္း အေခၚအေ၀ၚေတြ သံုးရင္ selector ၊ property ၊ value ေတြနဲ႕ သံုးမွာမို႕လို႕
ဘာကုိဆိုလိုတယ္သိေအာင္ မွတ္ထားဖို႕ လိုပါတယ္။
body {backgroun-color: black} အလုပ္လုပ္ပံုကေတာ့ body လို႕ ေရးထားတဲ့အတြက္ web pages တိုင္းရဲ႕ body
တိုင္းကို ေနာက္ခံအေရာင္ အမဲေရာင္အေနနဲ႕ သက္ေရာက္မွာ ျဖစ္ပါတယ္။
အစိမ္းေရာင္ထည့္ခ်င္တယ္ဆိုရင္ body {backgroun-color: green} ေပါ့။
တကယ္လို႕ value တန္ဖိုးဟာ စာလံုးတစ္လံုးထက္ပိုေနရင္ Double Quote အတြင္းထည့္ေရးပါတယ္။
P {font-family: “sans serif”}
ထို႕ နည္းအတူပဲ property မွာလဲ တစ္ခုထက္ပိုၿပီးထည့္ခ်င္ရင္ ( ; ) ေလး ထည့္ေရးရပါတယ္။
P {text-align:center; color: red}
ဒီေနရာမွာ p ဆုိတာက HTML Browser နားလည္တဲ ့pre defined fomatter tag လို႕ေခၚပါတယ္။ ဒါေၾကာင့္ p ဆိုရင္
paragraph ျဖစ္ၿပီး ၊ h1 ဆိုရင္ Header ျဖစ္ပါတယ္။ ဒီ့အတြက္ HTML Tag အခ်ိဳ႕ နားလည္ဖို႕ လိုပါတယ္။ ေစာေစာက
style ေတြ ရွင္းလင္းေအာင္ စုလုိက္မယ္ဆိုရင္
<style>
P
{
text-align: center;
color: red;
font-family: “sans serif”
}
</style>
www.phoelapyae.com 3
3 ရာမညဖိုးလျပည့္
Grouping
CSS မွာ selector ေတြကုိ style တူရာ အုပ္စုေလးေတြဖြဲ႕ နိုင္ပါတယ္။
h1,h2,h3,h4,h5,h6
{
color: red
}
h ဆိုတာ header ျဖစ္ၿပီး ဒီလိုေရးလုိက္ျခင္းအားျဖင့္ header အားလံုး အနီေရာင္
ေျပာင္းသြားမွာပါ။ကုတ္အမ်ားႀကီးေရးစရာ မလိုေတာ့ပဲ တူရာကိုစုစည္းလုိက္ျခင္းျဖင့္ တစ္ခါတည္းျဖင့္
အလုပ္ၿပီးေျမာက္ပါတယ္။
အခုသိၿပီးသား ကုတ္အနည္းငယ္နဲ႕ web page တစ္ခုဖန္တီးရေအာင္
<html>
<head><title>Example 1</title>
<style type="text/css">
body {background-color: yellow}
h1 {color: blue}
h2 {color: black}
h3 {color: red}
h4 {color: green}
P
{
text-align: center;
color: red;
www.phoelapyae.com 4
4 ရာမညဖိုးလျပည့္
font-family: Zawgyi-one
}
</style>
</head>
<body>
<h1>This header is 36 pt and color is blue</h1>
<h2>This header is black</h2>
<h3>This header is red</h3>
<h4>This header is green</h4>
<p>This paragraph is center of webpage and color is red and also font is
zaw gyi</p>
</body>
</html>
အထက္ပါကုတ္ကုိ notepad တြင္ save ၿပီး Save as type ကုိ All file ကိုေရြးၿပီး File name ကုိ example.html နဲ႕
ေပးလုိက္ပါ။ HTML ေရးထားေသာ page မ်ားကုိ .html နွင့္ .htm လို႕ ေပးမွသာ brower တြင္ ေပၚပါလိမ့္မည္။ ဒီလိုေလး
ရပါလိမ့္မယ္ ။
www.phoelapyae.com 5
5 ရာမညဖိုးလျပည့္
class Selector
class selector ကုိ web page တစ္ခုထဲမွာ style အမ်ိဳးမ်ိဳးသံုးခ်င္ရင္ ေရးပါတယ္။ ဥပမာ စာပိုဒ္ ၂ ပုဒ္ရွိရင္ ၁ ပုဒ္ကုိ
ဘယ္ဘက္ ၊ က်န္ ၁ ပုဒ္ကို အလယ္ထားခ်င္တာမ်ိဳးေပါ့။
p.right {text-align: right}
p.center {text-align: center}
ဒါဆိုရင္ style ကုိေၾကာ္ျငာယံုပဲရွိေသးတယ္။ ဘယ္စာပုဒ္ကုိ ဘယ္လက္၊ ဘယ္စာပုဒ္ကို အလယ္ဆိုတာ ေရးေပးရပါမယ္။
ဒါကို body မွာ ဒီလိုေခၚသံုးရပါတယ္။
<p class=”right”>
This paragraph will be right-aligned.
</p>
<p class=”center”>
This paragraph will be center-aligned.
</p>
ဒီေနရာမွာ ေျပာလုိတာက p.right {text-align: right} ဆိုတဲ့ေနရာမွာ p.right အစား p.yamanya {text-align: right}
ဆိုၿပီးေရးလုိ႕ ရပါတယ္ ။ ဒါဆိုေခၚသံုးရင္ေတာ့ ဒီလိုေလးမွရမွာေပါ့။
www.phoelapyae.com 6
6 ရာမညဖိုးလျပည့္
<p class=”yamanya”>
This paragraph will be right-aligned.
</p>
ဆိုလုိတာက class ကို ႀကိဳက္တဲ့နာမည္နဲ႕ assign လုပ္လို႕ ရတာကိုပါ။ ဒါေပမ ့ဲ Class name ရ့ဲအစကို
ကိန္းဂဏန္းေပးထားလို႔မရဘူး.. ေပးထားရင္ Mozila Firefox မွာ အလုပ္မလုပ္ပါဘူး။ဆက္ရေအာင္ ..
ဒီေနရာမွာ class selector ကုိ ထပ္တိုးေရးခ်င္ေသးတယ္ဆိုရင္ ေရးလို႕ ရပါေသးတယ္။
<p class=”center bold”>
This is a paragraph.
</p>
ေရးခဲ့တဲ့ class selector ထဲက selector ကိုခ်န္ၿပီး class သီးသန္႕ ပဲေရးၾကည့္ရေအာင္။ဒီလိုဆိုလိုတာပါ။
.center {text-align: center}
ဒါဆုိဘာထူးျခားသြားလဲ ?
Style မွာ အဲလို ေၾကာ္ျငာၿပီးသြားရင္ class=”center” ကုိေခၚသံုးတဲ့ အရာတိုင္း center ျဖစ္သြားေရာ။ေစာေစာကလို h1 ၊
h2 ၊ p စသည္တို႕ ကို center ထားခ်င္ရင္ တစ္ေၾကာင္းခ်င္းလိုက္ေရးရလိမ့္မယ္ ။ ဒါဆိုရင္ တစ္ေၾကာင္းတဲ့နဲ႕ ေရးခ်င္တဲ့
selector ကုိေခၚသံုးယံုပါပဲ။ ဒီလိုေလးပါ။
<h1 class=”center”>This heading will be center-align</h1>
<p class=”center”>This paragraph will also be center-aligned.</p>
www.phoelapyae.com 7
7 ရာမညဖိုးလျပည့္
Class selector နဲ႕ ပက္သက္ၿပီး web page တစ္ခုေရးၾကည့္ရေအာင္။
<html>
<head><title>Football</title>
<style type="text/css">
body {background-color: yellow}
p.left
{
text-align: left;
color: blue
}
p.yamanya
{
text-align: right;
color: red
}
.center
{
text-align: center;
color: green
www.phoelapyae.com 8
8 ရာမညဖိုးလျပည့္
}
</style>
</head>
<body>
<h1 class="center">Football Teams</h1>
<p class="center">Arsenal</p>
<p class="left">ManU</p>
<p class="yamanya">Chelsea</p>
</body>
</html>
အဲဒါကို result ထုတ္လုိုက္ရင္ ဒီလိုေလးပါ။
www.phoelapyae.com 9
9 ရာမညဖိုးလျပည့္
ဒီေနရာမွာ center ၂ ခုျဖစ္တဲ့ Football Teams နဲ႕ Arsenal တို႕ ကို .center {text-align: center}
တစ္ေၾကာင္းတည္းနဲ႕ ေၾကာ္ျငာနိုင္တာရယ္၊ class selector မွာ မိမိစိတ္ႀကိဳက္နာမည္ p.yamanya နဲ႕ ေရးထားတာကုိ
ျမင္ေစလိုပါတယ္။
id selector
ေစာေစာက သံုးခဲ့တဲ့ class selector ဆိုတာ HTML Tag ေတြကုိသာ apply လုပ္ပါတယ္။ ဒါေၾကာင့္လဲ selector ေရးရင္
(p, td, tr, h1, h2, …..) နဲ႕ ေရးရပါတယ္။ တကယ္လို႕ မိမိက မိမိစိတ္ႀကိဳက္နာမည္နဲ႕ assign လုပ္ခ်င္ရင္ id selector
ကုိသံုးပါတယ္။ id selecotr ကုိ define လုပ္ဖို႕ အတြက္ # ကုိထည့္ရပါတယ္။
#para
{
text-align: center;
color: blue
}
www.phoelapyae.com 10
10 ရာမညဖိုးလျပည့္
Tag အမည္ေတြျဖစ္တဲ့ (p, td, tr, h1, h2,…) စတာေတြကုိ အမည္မသံုးခ်င္လို႕ မိမိစိတ္ႀကိဳက္အမည္ကို id selector
သံုးၿပီးေရးထားတာပါ။ အဲလိုေၾကာ္ျငာၿပီးရင္ ေခၚသံုးရပါမယ္။
<p id=para>
This is paragraph.It will be centerd align and red color.
</p>
class selector လိုပဲ id selector လဲ အမည္နာမေတြကုိ ကိန္းဂဏန္းနဲ႕ စေပးလို႕ မရပါဘူး။
Comment
Comment ဆိုတာ မိမိေရးခဲ့တဲ့ကုတ္ဟာ ဘာအတြက္ေရးခဲ့တယ္ဆိုတာ မွတ္သားထားတာပါ။ေနာက္တစ္ခ်ိန္က်ရင္ မိမိက
ကုတ္ေတြျပန္ျပင္ရင္ မိမိေရးခဲ့တဲ့ comment ကိုၾကည့္ၿပီး ဒီကုတ္ဟာ ဘာအတြက္ေရးထားတယ္ဆိုတာ သိနုိင္ပါတယ္။
အဲလိုေရးထားတဲ့ comment က browser ေပၚမွာ ေပၚေနမွာမဟုတ္ပါဘူး။ ေရးၾကည့္ရေအာင္ ….
/* This is comment */
မိမိေရးခ်င္တဲ့စာသားကုိ /* နဲ႕ */ ၾကားမွာေရးရမွာပါ။
နမူနာၾကည့္ရေအာင္ ….
<html>
<head>
<title>My Love</title>
/* Styles are starting here */
<style>
/* This is codes for paragraph */
p
{
text-align: center;
color: white
www.phoelapyae.com 11
11 ရာမညဖိုးလျပည့္
}
</style>
</head>
<body bgcolor=black>
<p>I always remember u</p>
</body>
</html>
Browser မွာ comment ေရးထားတာ မေပၚတာကို ေတြ႕ ရပါမယ္။
Applying CSS
CSS style sheet နဲ႕ web pages ေတြကုိ format ခ်တဲ့ေနရာမွာ အၾကမ္းဖ်င္းအားျဖင့္ (၃)မ်ိဳး format ခ်လို႕ ရပါတယ္။
Inline , Internal , External ဆိုၿပီးေပ့ါ ။ Inline ဆိုတဲ့အတိုင္း HTML Tag တိုင္းမွာ CSS ကုိထည့္မွာ ၊ Internal ကေတာ့
ကြ်န္ေတာ္အေပၚမွာ ေရးခဲ့တဲ့ ကုတ္ေတြလို </title> နဲ႕ </head> ၾကားမွာေရးတာပါ၊ External ကေတာ့ style sheet
ေရးၿပီး web page တစ္ခုစီမွာ Link tag ေတြ ခ်ိတ္ၿပီး အဲဒီ style sheet ကုိေခၚသံုးမွာပါ။ဥပမာ wordpress
မွာသံုးထားတာလိုမ်ိဳးေပါ့။ style.css ကုိ ျပင္လိုက္တာနဲ႕ website တစ္ခုလံုးေျပာင္းလဲသြားနုိင္ပါတယ္ ။
အေသးစိတ္တစ္ခုခ်င္းေလ့လာရေအာင္ …..
In Line
In Line နဲ႕ ေရးမယ္ဆိုရင္ သက္ဆုိင္ရာ tag တစ္ခုထဲမွာပဲေရးပါတယ္။ဒီလိုပါ။
<p style=”color=blue; text-align: ceneter”>This is a paragraph</p>
ဒါဆိုရင္ သူ specify လုပ္ထားတဲ့ ဒီ tag တစ္ေၾကာင္းတည္းကိုသာ သက္ေရာက္မွာပါ။
အမ်ားအားျဖင့္ေတာ့ CSS ေရးေနမွေတာ့ ဒီလို inline ျဖစ္တဲ့ tag တစ္ေၾကာင္းအတြက္နဲ႕ သံုးက်တာ နည္းပါတယ္။
www.phoelapyae.com 12
12 ရာမညဖိုးလျပည့္
Internal
Embedded or Internal style ကေတာ့ စာမ်က္နွာတစ္ခုလံုးအတြက္ သံုးတာပါ ။ ဥပမာ blog လိုမ်ိဳးေပါ့။ အေပၚမွာ
ကြ်န္ေတာ္ေရးခဲ့တဲ့ example web page ေတြဟာ internal style နဲ႕ apply ေပးထားတာပါ။ Internal နဲ႕ ေရးၿပီးဆိုရင္
style sheet code ေတြက </title> နဲ႕ </head> ၾကားမွာ ေရးပါတယ္။ဒီလိုပါ။
<head><title>CSS Example</title>
<style type=”text/css”>
p {color: red; font-family: Zawgyi-one, Arial}
body {background-color: black}
</style>
</head>
External
External ကေတာ့ အေကာင္းဆံုးနည္းလမ္းပါ။ သူက ေရးၿပီးသား style sheet ကို link tag သံုးလွမ္းခ်ိတ္ၿပီး
ယူသံုးတဲ့နည္းပါ။ လွမ္းခ်ိတ္ဖို႕ အတြက္ အဲဒီ CSS file ကုိ <head> နဲ႕ </head> ၾကားမွာ Link tag
ကုိေၾကာ္ျငာေပးရမွာပါ ။ ဒီလိုေလးပါ ..
<head>
<link rel=”stylesheet” type=”text/css” href=”urfilename.css”/>
</head>
www.phoelapyae.com 13
13 ရာမညဖိုးလျပည့္
ေၾကာ္ျငာၿပီးရင္ ေခၚသံုးဖို႕ အတြက္ css ဖိုင္ကို ေရးပါမယ္။ ဥပမာ..
P
{
text-align: center;
color: white
}
A {color: blue}
အဲဒါကုိ notepad မွာ urfilename.css ဆိုတဲ့ *.css extension နဲ႕ save ရပါတယ္။ ဒါဆို urfilename.css ဆိုတဲ့ CSS
file တစ္ခုရပါမယ္။
ဒါဆိုရင္ browser က urfilename.css က ို သြားဖတ္ပါတယ္ ။ အဒဲ ီ urfilename.css ထဲကေရးထားတ့ဲအတိုင္း webpage
ေတြကုိ format ခ်ပါတယ္။ ပုိရွင္းသြားေအာင္ နမူနာ လုပ္ၾကည့္ရေအာင္ …
<html>
<head><title>Testion External Style</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
<body>
<h1>This is a header</h1>
<h2>This is also header with blue color</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
အဲဒါကို notedpad တြင္ example.html နဲ႕ save ပါ။
ဒါက styel sheet file(CSS) file ပါ။
www.phoelapyae.com 14
14 ရာမညဖိုးလျပည့္
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
ဒါကုိ mystyle.css ဆိုတဲ့ နာမည္နဲ႕ save ပါ။ ၿပီးရင္ example.html ဖိုင္နဲ႕ mystyle.css ဖိုင္တို႕ ကုိ ဖိုဒါတစ္ခုထဲ
ထည့္ၿပီး example.html ဖိုင္ကုိ ဖြင့္ၾကည့္ပါက ဒီလိုိေလးေတြ႕ ရပါမယ္။
ဒါဟာဆိုရင္ example.html ဖိုင္ကုိ mystyle.css ဖိုင္က format ခ်လိုက္တာပါ။ မိမိကိုယ္တိုင္ေရးၾကည့္ၿပီး လုပ္ၾကည့္ပါ ။
သိလာပါလိမ့္မယ္။
ေနာက္ထပ္ နမူနာတစ္ခုေလာက္ ေလ့က်င့္ရေအာင္..
www.phoelapyae.com 15
15 ရာမညဖိုးလျပည့္
<html>
<head><title>Example</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>This is header<h1>
<p>This is a paragraph and this is a <a href="http://phoepyae.co.cc"
target="_blank">Phoe La Pyae Website</a></p>
<body>
<html>
ဒါကုိ example.html ဖိုင္နာမည္နဲ႕ save လိုက္ပါ။
body
{
background-color: black;
color: white;
}
p
{
font-size: 11pt;
font-family: Zawgyi-one, Arial;
www.phoelapyae.com 16
16 ရာမညဖိုးလျပည့္
}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:green}
a:active {color:blue}
ဒါကုိ test.css ဖိုင္နာမည္နဲ႕ save လုိက္ပါ။ ၿပီးရင္ example.html ဖိုင္ကိုေခၚၾကည့္ပါ။ ဒီလိုေလးပါ။
ဒီေနရာမွာ a tag တစ္ခုပါလာပါတယ္။ မိမိရဲ႕ webpage မွာ link ထည့္မယ္ဆိုရင္ <a></a>tag ကို anchor
အျဖစ္တစ္ခုႏွင့္တစ္ခု ခ်ိတ္ဆက္အသုံးျပဳရန္အတြက္ အသုံးျပဳပါတယ္။လင့္ခ်ိတ္ခ်င္ရင္ <a href=” website
address”>Name</a> ဆိုတဲ့ ပံုစံနဲ႕ ေရးရတာပါ။ website address ဆိုတာ မိမိခ်ိတ္ခ်င္တဲ့ ဆုိက္ address ေပါ့။
ဒီေနရာမွာ <a href=”http://phoepyae.co.cc” target=”_blank”>Phoe La Pyae</a> ဆိုတဲ့ ေနရာမွာ
target=”_blank” ဆိုတာ new tag window အေနနဲ႕ အဲဒီဆိုက္ကုိ ေပၚေစမွာ ျဖစ္ပါတယ္။ test.css မွာေရးထာတဲ့ a
tag ကုိလဲ မႏွိပ္ခင္ ဘာအေရာင္၊ ႏွိပ္ရင္ ဘာအေရာင္ စသျဖင့္ ေလ့လာၾကည့ပါ။
CSS Division
www.phoelapyae.com 17
17 ရာမညဖိုးလျပည့္
အခု ကြ်န္ေတာ္တို႕ class and id selector ေတြအေၾကာင္း ေတာ္ေတာ္မ်ားမ်ား သိၿပီးျဖစ္ပါတယ္။ အခုဆက္လက္ၿပီး
အဲလို secelctor မ်ိဳးျဖစ္တဲ့ div and span ေတြကို နည္းနည္းေလ့လာၾကည့္ရေအာင္ …
Divisions
Division ကအမ်ားအားျဖင့္ html file ေတြကုိ define လုပ္ေလ့ရွိတယ္။ သူသည္လဲ class and id selector လိုပါပဲ ။
သံုးနည္းကုိၾကည့္လိုက္ရင္ ပုိရွင္းသြားမွာပါ။
<div id=”container”>
Site contents go here
</div>
အဲဒါကုိ CSS မွာက်ရင္ ဒီလိုေရးပါတယ္။
#container
{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #600;
background: #ffffff;
}
အဲလိုေလးပါ။ id selector လိုမ်ိဳးေပါ့ ။ အဲဒီထဲမွာ ပါတဲ့ ကုတ္အခ်ိဳ႕ ေတြကုိ သက္ဆိုင္ရာ ေခါင္းစဥ္ေရာက္မွ အေသးစိတ္
ရွင္းပါ့မယ္။
Span
www.phoelapyae.com 18
18 ရာမညဖိုးလျပည့္
Spans ဟာ division tag လုိပါပဲ ။ ဒါေပမဲ့ span က Inline နဲ႕ apply လုပ္တဲ့ေနရာမွာပဲ အသံုးမ်ားပါတယ္။
တစ္ေၾကာင္းတည္းဆိုရင္ အသံုးမ်ားတာေပါ့ ။
<span class=”italic”>This text is italic</span>
အဲဒါကုိ CSS မွာ ဒီလိုေရးရပါတယ္။
.italic {font-style: italic;}
CSS Background
Web page တစ္ခုရဲ႕ background ကုိ အေရာင္ သို႕ မဟုတ္ ပံုနဲ႕ ထည့္သြင္းျခင္းကုိ ဒီေနရာမွာေလ့က်င့္မွာပါ။
Web page ရဲ႕ background color ကုိ မထည့္ခင္ color ရဲ႕ ေရးတတ္ပံုေတြကုိ ေဆြးေႏြးပါ့မယ္။ color ကုိအေရာင္နဲ႕
ေဖာ္ျပျခင္း color: green; အေရာင္ကုတ္နဲ႕ ေဖာ္ျပျခင္း color: #ffffff; နဲ႕ အေျခခံအေရာင္ သံုးေရာင္စပ္ထားျခင္းျဖင္း
color: rgb(106,251,146); ဆိုၿပီးရွိပါတယ္။
ဒီေနရာမွာ color: rgb(106,251,146); မွာ rgb ဆိုတာက red, green, blue ကို ဆိုလိုျခင္းျဖစ္ပါတယ္။ (106,251,146)
ဆိုတာက အေရာင္သုံးေရာင္ေပါင္းစပ္ထားျခင္းပါ။ သူ႔ အေရာင္တစ္ခုျခင္းစီအတြက္ limit ကေတာ့ 0-255 ျဖစ္ပါတယ္။ 0
ကေတာ့ ၄င္းအေရာင္ရဲ႕ light အျဖစ္ဆုံးအဆင့္ပါ။ 255 ကေတာ့ dark အျဖစ္ဆုံးပါ။ ဥပမာ
အျပာေရာင္တစ္ေရာင္ပဲလိုခ်င္တယ္ဆိုရင္ color: rgb(0,0,255); လို႔ေရးလို႔ရပါတယ္။ ေနာက္တစ္ခုက အေရာင္ကုတ္ဖြဲ႕
စည္းမႈ ။ ာ။ အေရာင္ကုဒ္ေတြမွာဆိုရင္ # ေနာက္မွာ ဂဏန္း၆လုံးကို ေတြ႔ရပါလိမ့္မယ္။ အဲဒီဂဏန္း ၆ လုံးက
hexadeicmal code ေတြျဖစ္ျပီးေတာ့ ၂ လုံးတစ္တြဲယူရပါတယ္။ ဂဏန္း၂ လုံးက အေျခခံအေရာင္ ၁ ေရာင္ကို
ကိုယ္စားျပဳပါတယ္။ red, green, blue ျဖစ္တဲ့အတြက္ အေရာင္ကိုေဖာ္ျပတဲ့ ဂဏန္း ၆လုံးရွိျခင္းျဖစ္ပါတယ္။ သူ႔ format
ကေတာ့ # rrggbb ေပါ့ဗ်ာ။ အဲဒီမွာ သုံးတဲ့ အေရာင္ကုဒ္ရဲ႕ ရည္ညြန္းမႈကေတာ့ ...
FF သည္ full brightness
CC သည္ 80 % brightness
99 သည္ 60 % brightness
66 သည္ 40 % brightness
33 သည္ 20 % brightness
www.phoelapyae.com 19
19 ရာမညဖိုးလျပည့္
00 ကေတာ့ သူနဲ႔ဆိုင္တဲ့ အေရာင္မပါ၀င္ေႀကာင္းကို ေဖာ္ျပျခင္းျဖစ္ပါတယ္။
ဥပမာ..bright red သည္ #FF0000 ၊ dark blue သည္ #000033၊ medium-gray ကေတာ့ #999999 ျဖစ္ပါတယ္။
ဒါကေတာ့ သိရံုသက္သက္ပါပဲ ။ ထပ္ေျပာရင္ ရႈပ္သြားပါလိမ့္မယ္။ ဒီေတာ့ ကြ်န္ေတာ္တို႕ နမူနာ web page
တစ္ခုေရးၾကည့္လုိက္လုိက္ရင္ ပိုရွင္းမယ္ထင္ပါတယ္။ ေရးရေအာင္ ….
<html>
<head>
<title>this is the title of the web page</title>
<style type="text/css">
body {background-color: yellow;}
h1 {background-color: #00ff00;}
h2 {background-color: red;}
p {background-color: rgb(250,0,255);}
</style>
</head>
<body>
<h1>
This is a level 1 header
</h1>
<h2>
This is a level 2 header
</h2>
www.phoelapyae.com 20
20 ရာမညဖိုးလျပည့္
<p>
This is a paragraph
</p>
</body>
</html>
How to set an image as the background
ဒီတစ္ခါ မိမိရဲ႕ web page မွာ ေနာက္ခံအေရာင္ကုိအသံုးမျပဳပဲ ဓါတ္ပံုတစ္ခုခုကို အသံုးျပဳမဲ့နည္းလမ္းပါ ။
အဲလိုထည့္ခ်င္ရင္ ဒီလိုေလးေရး၇ပါတယ္။
body {background-image: url(‘image address’)}
image address ေနရာမွာ မိမိထည့္မဲ့ image ရဲ႕ link ကုိယူရပါမယ္။ နမူနာတစ္ခုေရးရေအာင္ …
မေရးခင္ ဒီပံုေလးကို အရင္ save ထားလိုက္ပါ။ ရွင္းျပတာ တသမတ္တည္းျဖစ္ေအာင္လို႕ ပါ။
DOWNLOAD PHOTO
http://yamanya.mlm.googlepages.com/yamanya.jpg
www.phoelapyae.com 21
21 ရာမညဖိုးလျပည့္
yamanya.jpg နဲ႕ save ထားလိုက္ပါ။ ကဲ .. စေရးၿပီး ..
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg')
}
</style>
</head>
<body>
</body>
</html>
အဲဒီကုတ္ကုိ html file အေနနဲ႕ save ၿပီး ေစာေစာက ပံု yamanya.jpg ပံုနဲ႕ ဖိုဒါတစ္ခုအတြင္းထားၿပီး html tile
ကုိဖြင့္လိုက္ပါ။ဒီလိုေလးပါ…
www.phoelapyae.com 22
22 ရာမညဖိုးလျပည့္
ဒီေနရာမွာ ဘာကုိသတိထားမိက်သလဲ ။ ရာမညဖိုးလျပည့္ဆိုတဲ့ ပံု ထပ္ခါထပ္ခါ repeat ျဖစ္ေနတာ ေတြ႕ ရပါမယ္။
ဒီေတာ့ body {background-image: url(‘yamanya.jpg’)} နဲ႕ body {background-image: url(‘yamanya.jpg’);
background-repeat: repeat} နဲ႕ တူပါတယ္။ ဒိေနရာမွာ repeat ပါလာပါၿပီး။တယ္။background-repeat:repeat
ဆိုတာကေတာ့
မိမိေနာက္ခံဓါတ္ပုံကိုဘယ္လိုပုံစံေဖာ္ျပမလဲဆိုတာကို သတ္မွတ္ျခင္းျဖစ္ပါတယ္။အဒဲ ီလိုေဖာ္ျပဖို႔အတြက္ backgroundrepeat:
attribute မွာသတ္မွတ္ခ်က္style ေလးခုရွိပါတယ္။ repeat, repeat-x,repeat-y , no-repeat တုိ႔ျဖစ္ပါတယ္။
repeat ကေတာ့ မိမိဓါတ္ပုံကို webpage မွာ tile ပုံစံျဖင့္အျပည့္ေဖာ္ျပေစရန္အတြက္ျဖစ္ပါတယ္။tile ပုံစံ ဆိုတာကေတာ့
မိမိရဲ႕ webpage တစ္ခုလုံးမွာ ေနာက္ခံဓါတ္ပုံကိုနဂုိမူလအတိုင္းတစ္ခုႏွင့္တစ္ခုဆက္စပ္ျပီး
အျပည့္ေပၚေစျခင္းျဖစ္ပါတယ္။ ဥပမာအေနနဲ႔ျပရရင္ computer desktop ရဲ႕ ေနာက္ခံပုံတင္တဲ့အခါမွာ user
ကိုေရြးခ်ယ္ခြင့္ သုံးမ်ိဳးေပးထားပါတယ္။tile, center, stretch ဆိုျပီးသုံးမ်ိဳးရွိတဲ့အနက္ tile
ကမိမိဓါတ္ပုံအရြယ္အစားေသးေနတဲ့အခါ တစ္ပုံနဲ႔တစ္ပုံဆက္စပ္ျပီး အျပည့္ေဖာ္ျပတာပါ။center ဆိုတာကေတာ့
မိမိဓါတ္ပုံကို အလယ္မွာနဂိုအရြယ္အစားအတိုင္း တစ္ပုံတည္းေဖာ္ျပတာျဖစ္ပါတယ္။stretch ကေတာ့ ဓါတ္ပုံရဲ႕
resolution ကို screen တစ္ျပင္လုံးအျပည့္ခ်ဲ႔ျပီးေဖာ္ျပတာပါ။ဒီေနရာမွာေတာ့ tile
ပုံစံေဖာ္ျပျခင္းပဲအသုံးျပဳမွာျဖစ္ပါတယ္။repeat-x ကေတာ့ ေနာက္ခံပုံကို
အလ်ားလိုက္တစ္၀က္ပဲေဖာ္ျပျခင္းျဖစ္ပါတယ္။အေပၚတစ္ျခမ္းပဲပါျပီး ေအာက္တစ္ျခမ္းကေတာ့
ပုံပါမွာမဟုတ္ပါဘူး။repeat-y ဆိုတာကေတာ့ ေနာက္ခံပုံက ဘယ္၊ညာ တစ္ျခမ္းပဲပါမွာျဖစ္ပါတယ္။ဒီေနရာမွာ x နဲ႔ y
www.phoelapyae.com 23
23 ရာမညဖိုးလျပည့္
ဆိုတာက computer screen ကို coordinate system အရ x ၀င္ရုိး y ၀င္ရုိး ခြဲျခားျပီး horizontal / vertical
ပုံစံနဲ႔ေဖာ္ျပတာျဖစ္ပါတယ္။
no-repeat ကို အသုံးျပဳရင္ေတာ့ မိမိရဲ႕ပုံဟာ ေနာက္ခံအေနနဲ႔ေပၚမွာမဟုတ္ပဲ webpage ရဲ႕ဘယ္ဘက္အေပၚေထာင့္မွာ
တစ္ပုံတည္း တစ္ႀကိမ္သာေပၚမွာျဖစ္ပါတယ္။
ကဲ .. နမူနာေရးၾကည့္တာက ပုိ၇ွင္းပါတယ္ .. ၾကည့္ရေအာင္ ။
How to repeat a background image
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
background-repeat: repeat
}
</style>
</head>
<body>
</body>
</html>
www.phoelapyae.com 24
24 ရာမညဖိုးလျပည့္
ဒါကေတာ့ အေပၚမွာ ေဆြးေႏြးၿပီးျဖစ္တဲ့အတိုင္း repeat က မိမိဓါတ္ပုံကို webpage မွာ tile
ပုံစံျဖင့္အျပည့္ေဖာ္ျပေစရန္အတြက္ျဖစ္ပါတယ္။
How to repeat a background image only horizontally
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
background-repeat: repeat-x
www.phoelapyae.com 25
25 ရာမညဖိုးလျပည့္
}
</style>
</head>
<body>
</body>
</html>
repeat-x ကေတာ့ ေနာက္ခံပုံကို အလ်ားလိုက္တစ္၀က္ပဲေဖာ္ျပျခင္းျဖစ္ပါတယ္။အေပၚတစ္ျခမ္းပဲပါျပီး
ေအာက္တစ္ျခမ္းကေတာ့ ပုံပါမွာမဟုတ္ပါဘူး။
www.phoelapyae.com 26
26 ရာမညဖိုးလျပည့္
How to repeat a background image only vertically
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
www.phoelapyae.com 27
27 ရာမညဖိုးလျပည့္
repeat-y ဆိုတာကေတာ့ ေနာက္ခံပုံက ဘယ္၊ညာ တစ္ျခမ္းပဲပါမွာျဖစ္ပါတယ္။ဒီေနရာမွာ x နဲ႔ y ဆိုတာက computer
screen ကို coordinate system အရ x ၀င္ရုိး y ၀င္ရုိး ခြဲျခားျပီး horizontal / vertical ပုံစံနဲ႔ေဖာ္ျပတာျဖစ္ပါတယ္။
How to display a background image only one time
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
www.phoelapyae.com 28
28 ရာမညဖိုးလျပည့္
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>
www.phoelapyae.com 29
29 ရာမညဖိုးလျပည့္
no-repeat ကို အသုံးျပဳရင္ေတာ့ မိမိရဲ႕ပုံဟာ ေနာက္ခံအေနနဲ႔ေပၚမွာမဟုတ္ပဲ webpage ရဲ႕ဘယ္ဘက္အေပၚေထာင့္မွာ
တစ္ပုံတည္း တစ္ႀကိမ္သာေပၚမွာျဖစ္ပါတယ္။
အခုဆုိရင္ background နဲ႕ ပက္သက္ၿပီး background-color, background-image, background-repeat တို႕
ကုိေကာင္းေကာင္းသေဘာေပါက္ေလာက္ၿပီးထင္ပါတယ္။ ေနာက္ထပ္ background အေနနဲ႕ က်န္တာက backgroundattachement
နဲ႕ background-position တို႕ ပဲ ျဖစ္ပါတယ္။
How to position a background image
ေနာက္ခံဓါတ္ပံုကို ေနရာခ်ရမွာ ေအာက္ပါအတိုင္းေရးေလ့ရွိပါတယ္။
body
{
background-position: top left;
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;
x% y%
xpos ypos;
background-attachement: scroll;
fixed;
}
ဒီေနရာမွာ backgroun-position နဲ႕ ပက္သက္ၿပီး နမူနာ ကိုယ့္ဘာသာကိုယ္ေရးၾကည့္ပါ ။ ေရးျပေနရင္ စာမ်က္နွာ
ေဖာင္းပြသြားမွာပါ။ top left ဆို အေပၚဆံုးရဲ႕ ဘယ္ဘက္အစြန္ဆံုးေပါ့ ။ တစ္ခုပဲ ရွိတယ္ % နဲ႕ px ။ သူတို႕ကုိ
ဒီလိုေရးပါတယ္ ။
www.phoelapyae.com 30
30 ရာမညဖိုးလျပည့္
background-position: 30% 20%;
50px 100px;
အဲလိုေရးေလ့ရွိပါတယ္။ ဒီေနရာမွာ အတိုင္းအတာေတြကို center ကေနစယူတာၿပိးအရင္ အရင္ဆံုးက x ၀င္ရုိးျဖစ္ၿပီး
ေနာက္ဆံုးက y ၀င္ရုိးကိုျဖစ္ပါတယ္။ မိမိဘာသာနမူနာေရးၾကည့္ရင္ သေဘာေပါက္သြားပါလိမ့္မယ္။
CSS Text
အခုဆက္လက္ၿပီး Text အပိုင္းဆက္လက္ေလ့လာက်မယ္ …text အပိုင္းမွာ အေရာင္တို႕ ၊ စာလံုးတစ္လံုးနဲ႕ တစ္လံုး
အကြာအေ၀း စသျဖင့္ text နဲ႕ ဆိုင္တာေတြ အားလံုးကိုေဆြးေႏြးပါ့မယ္။ ရွင္းလင္းေအာင္ နမူေလးေတြနဲ႕ ျပမွ
မ်က္စိထဲျမင္မွာျဖစ္ပါတယ္။ တစ္ခုခ်င္းအေသးစိတ္ေလ့လာရေအာင္ …..
How to set the color of text
Web page ေတြမွာ စာသားေတြကုိ မိမိထည့္ခ်င္တဲ့ အေရာင္ထည့္ရေအာင္ …နမူနာၾကည့္တာ ပုိရွင္းပါတယ္..
<html>
<head><title>this is the title of the web page</title>
<style type="text/css">
h1 {color: #00ff00;}
h3 {color: #dda0dd;}
p {color: rgb(0,0,255);}
</style>
</head>
<body>
<h1>
This is a level 1 header
</h1>
www.phoelapyae.com 31
31 ရာမညဖိုးလျပည့္
<h3>
This is a level 3 header
</h3>
<p>
This is a paragraph
</p>
</body>
</html>
ဒီေနရာမွာ color တန္ဖိုးေတြျဖစ္တဲ့
color: green;
color: #ffffff;
color: rgb(0,0,255);
တို႕ ကုိ ကြ်န္ေတာ္ရွင္းျပၿပီးသားပါ ။ decimal ျဖစ္တဲ့ color: #ffffff မ်ိဳးကို ေအာက္ပါဆိုက္မွာ ကုတ္ေတြကုိ
ရွာနိုင္ပါတယ္။
Text Background Color
Webpage ေတြရဲ႕ စာသားအခ်ိဳ႕ ကုိ ကြ်န္ေတာ္တို႕ High Light အေနနဲ႕ လုပ္ခ်င္ရင္ ဒီလိုလုပ္လို႕ ရပါတယ္…
www.phoelapyae.com 32
32 ရာမညဖိုးလျပည့္
နမူနာၾကည့္လုိက္ပါ။
<html>
<head>
<style type="text/css">
body {background-color: black; color: red;}
p {text-align: center}
span.highlight
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span class="highlight">I Will Love You Forever</span><br><br>
I love you so deeply,<br>
I love you so much,<br>
I love the sound of your voice<br>
And the way that we touch.<br>
I love your warm smile<br>
And your kind, thoughtful way,<br>
www.phoelapyae.com 33
33 ရာမညဖိုးလျပည့္
The joy that you bring<br>
To my life every day.<br>
I love you today<br>
As I have from the start,<br>
<span class="highlight">And I'll love you forever<br>
With all of my heart.</span>
</p>
</body>
</html>
ဒီေနရာမွာ span.highlight ဆိုတဲ့ span class ကုိသံုးထားတာေတြ႕ ရပါမယ္။ အဲဒီ span ကုိလဲ အရင္ပို႕ စ္ေတြမွာ
ရွင္းျပၿပီးသားျဖစ္လို႕ ထပ္မရွင္းေတာ့ပါဘူး။ နားလည္မယ္လို႕ ထင္ပါတယ္။
www.phoelapyae.com 34
34 ရာမညဖိုးလျပည့္
Specify the space between characters
စာလံုးအစိပ္အက်ဲကုိ ဆက္ေလ့လာရေအာင္ ….. ဒီလိုေရးပါတယ္။
<style type=”text/css”>
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
ဒီေနရာမွာ letter-spacing ရဲ႕ တန္ဖိုးကုိ px , cm တို႕ နဲ႕ ျပတာကုိေတြ႕ ရပါမယ္။ အဲဒီတန္ဖိုးေတြ သတ္မွတ္ခ်က္ကုိ
ေနာက္ပုိင္းေဆြးေႏြးမဲ့ font အပိုင္းမွာ ေဆြးေႏြးေပးပါ့မယ္။ကဲ .. နမူနာတစ္ခုေရးၾကည့္ရေအာင္ ….
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>
</html>
www.phoelapyae.com 35
35 ရာမညဖိုးလျပည့္
Specify the space between lines
စာလံုးအစိပ္အက်ဲၿပီးေတာ့ ဒီတစ္ခါ စာေၾကာင္းအစိပ္အက်ဲကုိ ေဆြးေႏြးပါ့မယ္ …သူ႕ကုိေရးေတာ့ ဒီလိုေလးပါ …
<style type=”text/css>
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
ဘယ္လိုသက္ေရာက္မႈ ရွိသလဲဆိုတာ ေအာက္မွာ စာပုဒ္သံုးပုဒ္နဲ႕ ရွင္းျပပါ့မယ္ …. ၾကည့္ရေအာင္ ..
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
www.phoelapyae.com 36
36 ရာမညဖိုးလျပည့္
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
www.phoelapyae.com 37
37 ရာမညဖိုးလျပည့္
ေရးထားတာကို ၾကည့္ရင္ ရွင္းပါတယ္ ။ တန္ဖိုးဘယ္ေလာက္သတ္မွတ္ရင္ ဘယ္ေလာက္ ကြာျခားသလဲဆိုတာ ….
Text Align
ဒါကေတာ့ ထပ္ခါထပ္ခါေရးၿပီးသားဆိုေတာ့ အထူးတလည္ရွင္းျပစရာေတာင္မလုိပါဘူး .. နမူနာေရးၾကည့္မယ္..
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
www.phoelapyae.com 38
38 ရာမညဖိုးလျပည့္
<h3>This is header 3</h3>
</body>
</html>
Decorate the text
Decorate ဆိုတာ စာသားေတြကုိ မ်ဥ္းသားခ်င္တာမ်ိဳး .. လင့္ေတြကို ေအာက္မွာ မ်ဥ္းေၾကာင္းမထည့္ခ်င္တာမ်ိဳး..
မွိတ္တုတ္မွိတ္တုတ္ေပၚတာမ်ိဳး လုပ္ေဆာင္နိုင္ပါတယ္ …ဘယ္လိုေရးနုိင္သလဲ ဆိုတာ ၾကည့္ရေအာင္ …
<style type=”text/css”>
h1 {text-decoration: underline}
</style>
အဲလိုမ်ိဳး text-decoration နဲ႕ ေရးပါတယ္ … သူရဲ႕ တန္ဖိုးအားလံုးကေတာ့ ….
www.phoelapyae.com 39
39 ရာမညဖိုးလျပည့္
text-decoration: overline;
text-decoration: underline;
text-decoration: line-through;
text-decoration: blink;
text-decoration: none;
ဒါဟာ text-decoration နဲ႕ ေရးလုိ႕ ရတဲ့တန္ဖိုး အကုန္ပါပဲ ။ ဒီေနရာမွာ overline ဟာ စာသားေပၚမွာ
မ်ဥ္းသားတာျဖစ္ၿပီး underline က်ေတာ့ စာသားေအာက္က မ်ဥ္းသားတာပါ။ line-through ကေတာ့ စာသားကုိ မ်ဥ္းနဲ႕
ျဖတ္ထားတာပါ။ blink ကေတာ့ စာသားကုိ မွိတ္တုတ္မွိတ္တုတ္ေဖာ္ျပေပးပါတယ္ … none ကေတာ့ ဘာ effect မွမပါ
စာသားသက္သက္ပါ … သာမာန္ text ရဲ႕ default ကေတာ့ none ပါ။ ဒီေတာ့ မ်က္စိထင္ျမင္သြားေအာင္ ေအာက္က
ဥပမာေရးထားတာေလးကုိ ၾကည့္ၾကည့္လိုက္ပါ။
<html>
<head>
<style type="text/css">
h1 {text-decoration: underline}
h2 {text-decoration: overline}
h3 {text-decoration: line-through}
a {text-decoration: blink}
p {text-decoration: none; font-family: Zawgyi-one}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
www.phoelapyae.com 40
40 ရာမညဖိုးလျပည့္
<h3>This is header 3</h3>
<p><a
href="http://www.phoepyae.co.cc">ရာမညဖိုးလျပည့္ဘေလာ့မွ…</a><br><br>
လႈိုက္လွဲစြာ ၾကိဳဆိုပါ၏ ...</p>
</body>
</html>
ရာမညဖိုးလျပည့္ဘေလာ့မွ .. ဆိုတဲ့ စာသားက မွိတ္တုတ္မွိတ္တုတ္ျဖစ္ေနမွာပါ … ဒီေနရာမွာ ဓါတ္ပံုျဖစ္လို႕
ရုပ္ေသႀကီးျဖစ္ေနတာပါ ။
www.phoelapyae.com 41
41 ရာမညဖိုးလျပည့္
Indent Text
စာပုဒ္ေရးလို႕ ရွိရင္ ပထမစာေၾကာင္းကုိ မာဂ်င္ကေန ေနရာအနည္းငယ္ခ်န္ၿပီးေရးေလ့ရွိပါတယ္ .. ဒါမ်ိဳးဆိုရင္ indent
style နဲ႕ ေရးလို႕ ရပါတယ္ .. သူ႕ ရဲ႕ ေရးတဲ့ပံုစံေလးကေတာ့ ….
<style>
P {text-indent: 2cm}
</style>
သူ႕ ရဲ႕ properties ေတြက
text-indent: length;
%;
တို႕နဲ႕ ေဖာ္ျပေလ့ရွိပါတယ္ …..ဒီေနရာမွာ px , em , % တို႕ နဲ႕ ေဖာ္ျပနိုင္ပါတယ္ ….. သူတို႕ ရဲ႕ အတိုင္းအတာေတြကုိ 1
px မွာ em ဘယ္ေလာက္၊ % ဘယ္ေလာက္ ဆိုတာခန္႕ မွန္းလို႕ ရေအာင္ ေအာက္မွာ ေဖာ္ျပလုိက္ပါတယ္ .. ဒီေနရာမွာ
em -- > the ‘font-size’ of the relevant font
ex -- >the ‘x-height’ of the relevant font
px -- >pixels, relative to the viewing device
ျဖစ္ပါတယ္….. သူတို႕ ရဲ႕ အဓိပၸါယ္ဖြင့္ဆိုခ်က္ေတြကုိ ေအာက္ကလင့္မွာ အေသးစိတ္ေလ့လာနုိင္ပါတယ္ …
http://www.bigbaer.com/css_tutorials/css_font_size.htm
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
http://www.explainth.at/en/css/units.shtml
www.phoelapyae.com 42
42 ရာမညဖိုးလျပည့္
ဒါကေတာ့ em ,px , % . ex တို႕ ရဲ႕ နွိုဳင္းယွဥ္ခ်က္ေတြပါ …
www.phoelapyae.com 43
43 ရာမညဖိုးလျပည့္
ပုိရွင္းေအာင္ နမူနာတစ္ခုၾကည့္လုိက္ပါ …
<html>
<head>
<style type="text/css">
body {background-color: black; color: white;}
p {text-indent: 1cm; font-family: Zawgyi-one;}
</style>
</head>
<body>
<p>
ကြ်န္ေတာ္ကေတာ့ ရာမညဖိုးလျပည့္ပါ ။ ရာမညဆိုေတာ့ မြန္ကလား ? ဟုတ္ပါတယ္ ။ ကြ်န္ေတာ္ ေမာ္လၿမိဳင္ဇာတိပါ
။ကြ်န္ေတာ္ကေတာ့ 2005 မွာ BE ( Electronic ) နဲ႕ ေက်ာင္းၿပီးပါတယ္ ။ ေက်ာင္းၿပီးကတည္းက အီလက္ထရြန္းနဲ႕
အလွမ္းေ၀းေနတာပါ ။ ဟိုစပ္စပ္ သည္စပ္စပ္ အားႀကီး လုပ္တယ္ ။ တစ္ခုမွ ေကာင္းေကာင္းကန္းကန္း မသိဘူး ။
ေမြးရာပါ အားနည္းခ်က္တစ္ခုကေတာ့ ရုပ္ေခ်ာ၊ သေဘာေကာင္း ပါ။
</p>
</body>
</html>
www.phoelapyae.com 44
44 ရာမညဖိုးလျပည့္
Control the letters in a text
ဒါကေတာ့ စာလံုးေတြကုိ Uppercase , Lowercase , စာလံုးအႀကီး ေျပာင္းတာေတြလုပ္ရင္ text-transform ဆိုတဲ့ style
tag ကိုအသံုျပဳပါတယ္… ေရးပံုကေတာ့ ..
<style>
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
နမူနာကိုေတာ့ ေရးမျပေတာ့ပါဘူး … uppercase ဆို စာလံုးအႀကီးေပါ့ .. class selector ကရွင္းျပၿပီးသားပါ .. ဒါေၾကာင့္
p.uppercase ဆိုတာလဲ သေဘာေပါက္မယ္ထင္ပါတယ္ ....
www.phoelapyae.com 45
45 ရာမညဖိုးလျပည့္
Set the text direction of an element
ဒါကေတာ့ စာသားေတြကုိ ဘယ္ဘက္ကေနပဲစေရးခ်င္တာမ်ိဳး၊ ဒါမွမဟုတ္ ညာဘက္ကေနပဲ စေရးခ်င္တဲ့ေနရာမ်ိဳးမွာ
အသံုးျပဳပါတယ္…ေရးနည္းထံုးစံကေတာ့
<style>
div.one {direction: rtl}
div.two {direction: ltr}
</style>
အဲလိုပါ …. ဒီေနရာမွာ div class ကုိရွင္းျပစရာမလိုေတာ့ဘူးလို႕ ထင္ပါတယ္ .. မိမိကိုယ္တိုင္သာေရးၾကည့္လိုက္ပါ …
Word-spacing Property
ဒါကေတာ့ စာလံုးတစ္လံုးေနရာျခားခ်င္ရင္ အသံုးျပဳတာပါ …. ေရးတာကေတာ့ ဒီလိုေလးပါ ..
<html>
<head>
<style type="text/css">
p
{
word-spacing: 30px
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
www.phoelapyae.com 46
46 ရာမညဖိုးလျပည့္
</p>
</body>
</html>
ဒါဟာဆိုရင္ စာပိုဒ္မွာရွိတဲ့ စာလံုးတစ္လံုးန႕ဲ တစ္လံုးကုိ 30px ျခားေပးမွာျဖစ္ပါတယ္ .. px ဆိုတာဘာဆိုလိုတာဆိုတာ
ကြ်န္ေတာ္အေပၚမွာ ရွင္းျပၿပီးသားပါ ….
White-space Property in Text
နမူနာတစ္ခု ၾကည့္လုိက္ပါ .. ျပန္ေျပာျပဖို႕ ေတာ္ေတာ္ခက္လိမ့္မယ္ ျဖစ္ေနလို႕ ပါ …
<html>
<head><title>white-space Demonstration</title>
<style type="text/css">
p.normal
{
white-space:normal;
}
p.pre
{
white-space:pre;
}
p.nowrap
{
www.phoelapyae.com 47
47 ရာမညဖိုးလျပည့္
white-space:nowrap;
}
</style>
</head>
<body>
<h1><p>white-space demonstration</p></h1>
<p class="normal">This is the normal value for the white-space property. This is
the normal value for the white-space property. This is the normal value for the
white-space property. This is the normal value for the white-space
property.</p><br/>
<p class="pre">This is the pre value for the white-space
property.</p><br/>
<p class="nowrap">This is the nowrap value for the white-space property. This
is the nowrap value for the white-space property. This is the nowrap value for
the white-space property. This is the nowrap value for the white-space
property.</p>
www.phoelapyae.com 48
48 ရာမညဖိုးလျပည့္
</body>
</html>
ဒီေနရာမွာ
p.normal {white-space: normal} ဆိုတာက စာသားေတြကုိ အဆံုးထိေရာက္ရင္ ေအာက္တစ္ေၾကာင္းကူးသြားတာပါ ။
wrap ဆိုတဲ့ အတုိင္း စာသားေတြကို ေဘာင္အတြင္းမွာထည့္သြင္းေဖာ္ျပတာပါ ..… သူကေတာ့ white-space တန္ဖိုးရဲ႕
default တန္ဖိုးပါပဲ … notepad မွာပါတဲ့ Word Wrap လိုေပါ့ …
p.nowrap {white-space: nowrap} ကေတာ့ nowrap ဆိုတဲ့အတုိင္း ေနာက္တစ္ေၾကာင္းမဆင္းမခ်င္း စာသားေတြက
ေဘာင္ေက်ာ္ၿပီးဆက္သြားေနမွာပဲ …. ေနာက္တစ္ေၾကာင္းဆင္းမွ <br> tag သံုးမွသာ ဆင္းမွာပါ …
p.pre {white-space: pre} ကေတာ့ HTML tag မွာပါတဲ့ <pre> နဲ႕ တူပါတယ္ .. သူက စာတစ္ေၾကာင္းနဲ႕
တစ္ေၾကာင္းကုိ ျခားေပးတာပါ …
CSS Font
အခုဆိုရင္ ကြ်န္ေတာ္ေဆြးေႏြးခဲ့တာဟာ
CSS ေရးထံုးေရးနည္း ၊
www.phoelapyae.com 49
49 ရာမညဖိုးလျပည့္
CSS ကုိ webpage မွာ apply လုပ္နည္း၊
ေနာက္ခံ အေရာင္၊ ပံုထည့္ျခင္း၊
စာသားေရးျခင္း အမ်ိဳးမ်ိဳး တို႕ ကို ေဆြးေႏြးၿပီး ျဖစ္ပါတယ္ …
အခုဆက္လက္ၿပီး Font အပိုင္းကို ဆက္လက္ေဆြးေႏြးပ့ါမယ္ ….
CSS Font မွာ စာလံုးဆိုက္ ၊ အေရာင္ ၊ စတိုင္ စသျဖင့္ မ်ားစြာေျပာင္းလဲနိုင္ပါတယ္ … သူ႕ ရဲ႕ property ေတြကေတာ့
font-style
font-family
font-size
font-size-adjust
font-stretch
font-variant
font-weight တို႕ ျဖစ္က်ပါတယ္ …
Font Color
ပထမဦးဆံုး ဖြန္႕ ကာလာကုိ အရင္ဆံုးလုပ္ၾကည့္ရေအာင္ ..
h4 {color: red}
h5 {color: #9000A1}
h6 {color: rgb(0,220,98)}
www.phoelapyae.com 50
50 ရာမညဖိုးလျပည့္
ဒါကေတာ့ အေထြအထူး ရွင္းျပစရာမလုိဘူးထင္ပါတယ္ …. အေရာင္ထည့္တာက ရွင္းျပၿပီးသားပါ ..
CSS font family
Web page ေတြကုိ မိမိစိတ္ႀကိဳက္ font ေတြနဲ႕ သတ္မွတ္ခ်င္ရင္ သံုးနုိင္ပါတယ္ …ေရးသားပံုကေတာ့ ..
font-family: Arial;
တကယ္လို႕ ဖြန္႕ တစ္မ်ိဳးထက္ပိုလာရင္ ေကာ္မာ ခံေရးပါတယ္ ..
font-family: Zawgyi-one, Arial, Pussycat;
ေနာက္တစ္ခုက ဖြန္႕ နာမည္က စာလံုး တစ္လံုးထက္ပုိရင္ရင္ အဖြင့္အပိတ္ နဲ႕ ေရးပါတယ္..
font-family: Zawgyi-one, Arial, “ludida console”,sans-serif;
ps: font-family တြင္ အရင္ဆံုးလာေသာဖြန္႕ မွစ၍ ဖြန္႕ အားလံုးကုိ format ခ်ပါသည္ …
အေပၚကေရးထားေသာ style တြင္ Zawgyi-one ကိုအရင္ဆံုး format ခ်ပါတယ္ .. မရွိမွ ေနာက္ဒုတိယျဖစ္တဲ့ Arial ကုိ
format ခ်ပါတယ္…
<style>
p
{
font-family: Zawgyi-one, Arial;
color: red;
}
</style>
ဒါဟာဆိုရင္ စာပုဒ္တစ္ခုလံုးက ဖြန္႕ ေဇာ္ဂ်ီျဖစ္ၿပီး စာသားအေရာင္က အနီေရာင္ အျဖစ္ format ခ်ေပးမွာ ျဖစ္ပါတယ္ ….
Font-size
စာလံုးဆိုက္သတ္မွတ္ခ်င္ရင္သံုးတာပါ ….. property ေတြကေတာ့ေအာက္ပါအတိုင္းပါ ..
www.phoelapyae.com 51
51 ရာမညဖိုးလျပည့္
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
ေရးသားပံုကေတာ့ …
<style>
font-size: xx-small;
</style>
စသျဖင့္ အဲလုိမ်ိဳး ေရးသားပါတယ္ … သူရဲ႕ ဖြန္႕ တန္ဖိုးသတ္မွတ္ခ်က္ေတြကေတာ့ ေအာက္ကလင့္မွာ
ဖတ္ၾကည့္စမ္းသပ္နုိင္ပါတယ္ …
http://htmlhelp.com/reference/css/font/font-size.html
http://www.fonttester.com/
xx-small ဆိုရင္ ဘယ္လိုဆိုက္၊ medium ဆိုရင္ ဘယ္လိုဆိုက္ စသျဖင့္ ေလ့လာၾကည္ပါ ….
http://www.w3.org/TR/REC-CSS2/fonts.html#propdef-font-size ဒါကေတာ့ ဖြန္႕ ဆိုက္သတ္မွတ္ခ်က္ပါ …
Font Size Adjust
တကယ္လို႕ မိမိစိတ္ႀကိဳက ္ ဖြန္႕ ဆိုက္ကို ထည့္ခ်င္တယ္ဆိုရင ္ number ေတြန႕ဲ ေရးလို႕ ရပါတယ ္ …
<style>
www.phoelapyae.com 52
52 ရာမညဖိုးလျပည့္
font-size-adjust: 0.50;
</style>
မိမိစိတ္ႀကိဳက္ ဖြန္႕ Length သတ္မွတ္ခ်င္းကုိလဲ ရွင္းျပၿပီးသားပါ … em, ex, px တို႕ နဲ႕ ေရးနုိင္ပါတယ္ ..
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
ျပန္ေလ့လာၾကည့္ပါ …
Font style
Font style ကေတာ့ သံုးမ်ိဳးရွိပါတယ္ ….. normal , italic , oblique ဆိုၿပီး .. ေရးသားပံုကေတာ့ ..
<style type="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
Output ကုိထုတ္ၾကည့္ပါက ဘယ္လို result ထြက္လဲဆိုတာ ၾကည့္ၿပီး သိနုိင္ပါတယ္ ... က်န္တာကိုေတာ့
ထပ္အေသးစိတ္မေဆြးေႏြးေတာ့ပါဘူး ... Font အပုိင္းကို ဒီေလာက္ပဲေဆြးေႏြးပါ့မယ္ .. လြယ္ပါတယ္ ...


www.phoelapyae.com 1
1 ရာမညဖိုးလျပည့္
CSS အေၾကာင္း တေစ့တ့တ့တေစာင္း္း္း
CSS ဆိုတာ Cascading Style Sheets ရဲ႕ အတိုေကာက္ပါ။
CSS အေၾကာင္းကို ေဆြးေႏြးမယ္ဆိုေတာ့ HTML ကုိနည္းနည္းပါးပါး နားလည္မွ ရပါမယ္။ HTML Tag ေတြကုိ
အနည္းအက်ဥ္း ေလ့လာေစလိုပါတယ္။ ဥပမာ <p>This is a paragraph</p> မွာ p ဆိုတာ paragraph ျဖစ္ပါတယ္။
အဲလိုမ်ိဳးေပါ့ ။ အနည္းအက်ဥ္းသိရင္ ပိုေကာင္းပါတယ္။
HTML ဆို <html> စၿပီး</html>နဲ႕ ဆံုးသလို CSS မွာလဲ <style>CSS</style>ဆိုၿပီးေရးပါတယ္။ ေနာက္တစ္ခု
မွတ္ထားရမွာကေတာ ႔ CSS Style code ဟာ head tag အတငြ ္းမွာပ ဲ ရိွရပါမယ။္ CSS စေရးမယ္ဆိုၿပီး
ဒီလိုေၾကာ္ျငာရပါတယ္။ </title> ၿပီးေတာ႔ </head> မဆံုးမီ ၾကားမွာေရးရမယ္။ဆိုလုိတာက </title> နဲ႕ </head>
ၾကားမွာ CSS style code ကိုေၾကာ္ျငာေပးရမွာပါ။ ဒီလိုေလးပါ ။
<head><title>My Test</title>
<style type=text/css>
<style>
</head>
CSS ကုိေရးမယ္ဆိုရင္ သူ႕ ရဲ႕ ေရးထံုးစည္းမ်ဥ္းကေတာ့
selector {property: value} ပါ။ အဲဒါကုိ ေရးမယ္ဆိုရင္
body {background-color: black}
ဒီေနရာမွာ
body -- > selector
property-- > backgroun-color
value -- > black
www.phoelapyae.com 2
2 ရာမညဖိုးလျပည့္
ျဖစ္ပါတယ္။ ေနာက္ပိုင္း အေခၚအေ၀ၚေတြ သံုးရင္ selector ၊ property ၊ value ေတြနဲ႕ သံုးမွာမို႕လို႕
ဘာကုိဆိုလိုတယ္သိေအာင္ မွတ္ထားဖို႕ လိုပါတယ္။
body {backgroun-color: black} အလုပ္လုပ္ပံုကေတာ့ body လို႕ ေရးထားတဲ့အတြက္ web pages တိုင္းရဲ႕ body
တိုင္းကို ေနာက္ခံအေရာင္ အမဲေရာင္အေနနဲ႕ သက္ေရာက္မွာ ျဖစ္ပါတယ္။
အစိမ္းေရာင္ထည့္ခ်င္တယ္ဆိုရင္ body {backgroun-color: green} ေပါ့။
တကယ္လို႕ value တန္ဖိုးဟာ စာလံုးတစ္လံုးထက္ပိုေနရင္ Double Quote အတြင္းထည့္ေရးပါတယ္။
P {font-family: “sans serif”}
ထို႕ နည္းအတူပဲ property မွာလဲ တစ္ခုထက္ပိုၿပီးထည့္ခ်င္ရင္ ( ; ) ေလး ထည့္ေရးရပါတယ္။
P {text-align:center; color: red}
ဒီေနရာမွာ p ဆုိတာက HTML Browser နားလည္တဲ ့pre defined fomatter tag လို႕ေခၚပါတယ္။ ဒါေၾကာင့္ p ဆိုရင္
paragraph ျဖစ္ၿပီး ၊ h1 ဆိုရင္ Header ျဖစ္ပါတယ္။ ဒီ့အတြက္ HTML Tag အခ်ိဳ႕ နားလည္ဖို႕ လိုပါတယ္။ ေစာေစာက
style ေတြ ရွင္းလင္းေအာင္ စုလုိက္မယ္ဆိုရင္
<style>
P
{
text-align: center;
color: red;
font-family: “sans serif”
}
</style>
www.phoelapyae.com 3
3 ရာမညဖိုးလျပည့္
Grouping
CSS မွာ selector ေတြကုိ style တူရာ အုပ္စုေလးေတြဖြဲ႕ နိုင္ပါတယ္။
h1,h2,h3,h4,h5,h6
{
color: red
}
h ဆိုတာ header ျဖစ္ၿပီး ဒီလိုေရးလုိက္ျခင္းအားျဖင့္ header အားလံုး အနီေရာင္
ေျပာင္းသြားမွာပါ။ကုတ္အမ်ားႀကီးေရးစရာ မလိုေတာ့ပဲ တူရာကိုစုစည္းလုိက္ျခင္းျဖင့္ တစ္ခါတည္းျဖင့္
အလုပ္ၿပီးေျမာက္ပါတယ္။
အခုသိၿပီးသား ကုတ္အနည္းငယ္နဲ႕ web page တစ္ခုဖန္တီးရေအာင္
<html>
<head><title>Example 1</title>
<style type="text/css">
body {background-color: yellow}
h1 {color: blue}
h2 {color: black}
h3 {color: red}
h4 {color: green}
P
{
text-align: center;
color: red;
www.phoelapyae.com 4
4 ရာမညဖိုးလျပည့္
font-family: Zawgyi-one
}
</style>
</head>
<body>
<h1>This header is 36 pt and color is blue</h1>
<h2>This header is black</h2>
<h3>This header is red</h3>
<h4>This header is green</h4>
<p>This paragraph is center of webpage and color is red and also font is
zaw gyi</p>
</body>
</html>
အထက္ပါကုတ္ကုိ notepad တြင္ save ၿပီး Save as type ကုိ All file ကိုေရြးၿပီး File name ကုိ example.html နဲ႕
ေပးလုိက္ပါ။ HTML ေရးထားေသာ page မ်ားကုိ .html နွင့္ .htm လို႕ ေပးမွသာ brower တြင္ ေပၚပါလိမ့္မည္။ ဒီလိုေလး
ရပါလိမ့္မယ္ ။
www.phoelapyae.com 5
5 ရာမညဖိုးလျပည့္
class Selector
class selector ကုိ web page တစ္ခုထဲမွာ style အမ်ိဳးမ်ိဳးသံုးခ်င္ရင္ ေရးပါတယ္။ ဥပမာ စာပိုဒ္ ၂ ပုဒ္ရွိရင္ ၁ ပုဒ္ကုိ
ဘယ္ဘက္ ၊ က်န္ ၁ ပုဒ္ကို အလယ္ထားခ်င္တာမ်ိဳးေပါ့။
p.right {text-align: right}
p.center {text-align: center}
ဒါဆိုရင္ style ကုိေၾကာ္ျငာယံုပဲရွိေသးတယ္။ ဘယ္စာပုဒ္ကုိ ဘယ္လက္၊ ဘယ္စာပုဒ္ကို အလယ္ဆိုတာ ေရးေပးရပါမယ္။
ဒါကို body မွာ ဒီလိုေခၚသံုးရပါတယ္။
<p class=”right”>
This paragraph will be right-aligned.
</p>
<p class=”center”>
This paragraph will be center-aligned.
</p>
ဒီေနရာမွာ ေျပာလုိတာက p.right {text-align: right} ဆိုတဲ့ေနရာမွာ p.right အစား p.yamanya {text-align: right}
ဆိုၿပီးေရးလုိ႕ ရပါတယ္ ။ ဒါဆိုေခၚသံုးရင္ေတာ့ ဒီလိုေလးမွရမွာေပါ့။
www.phoelapyae.com 6
6 ရာမညဖိုးလျပည့္
<p class=”yamanya”>
This paragraph will be right-aligned.
</p>
ဆိုလုိတာက class ကို ႀကိဳက္တဲ့နာမည္နဲ႕ assign လုပ္လို႕ ရတာကိုပါ။ ဒါေပမ ့ဲ Class name ရ့ဲအစကို
ကိန္းဂဏန္းေပးထားလို႔မရဘူး.. ေပးထားရင္ Mozila Firefox မွာ အလုပ္မလုပ္ပါဘူး။ဆက္ရေအာင္ ..
ဒီေနရာမွာ class selector ကုိ ထပ္တိုးေရးခ်င္ေသးတယ္ဆိုရင္ ေရးလို႕ ရပါေသးတယ္။
<p class=”center bold”>
This is a paragraph.
</p>
ေရးခဲ့တဲ့ class selector ထဲက selector ကိုခ်န္ၿပီး class သီးသန္႕ ပဲေရးၾကည့္ရေအာင္။ဒီလိုဆိုလိုတာပါ။
.center {text-align: center}
ဒါဆုိဘာထူးျခားသြားလဲ ?
Style မွာ အဲလို ေၾကာ္ျငာၿပီးသြားရင္ class=”center” ကုိေခၚသံုးတဲ့ အရာတိုင္း center ျဖစ္သြားေရာ။ေစာေစာကလို h1 ၊
h2 ၊ p စသည္တို႕ ကို center ထားခ်င္ရင္ တစ္ေၾကာင္းခ်င္းလိုက္ေရးရလိမ့္မယ္ ။ ဒါဆိုရင္ တစ္ေၾကာင္းတဲ့နဲ႕ ေရးခ်င္တဲ့
selector ကုိေခၚသံုးယံုပါပဲ။ ဒီလိုေလးပါ။
<h1 class=”center”>This heading will be center-align</h1>
<p class=”center”>This paragraph will also be center-aligned.</p>
www.phoelapyae.com 7
7 ရာမညဖိုးလျပည့္
Class selector နဲ႕ ပက္သက္ၿပီး web page တစ္ခုေရးၾကည့္ရေအာင္။
<html>
<head><title>Football</title>
<style type="text/css">
body {background-color: yellow}
p.left
{
text-align: left;
color: blue
}
p.yamanya
{
text-align: right;
color: red
}
.center
{
text-align: center;
color: green
www.phoelapyae.com 8
8 ရာမညဖိုးလျပည့္
}
</style>
</head>
<body>
<h1 class="center">Football Teams</h1>
<p class="center">Arsenal</p>
<p class="left">ManU</p>
<p class="yamanya">Chelsea</p>
</body>
</html>
အဲဒါကို result ထုတ္လုိုက္ရင္ ဒီလိုေလးပါ။
www.phoelapyae.com 9
9 ရာမညဖိုးလျပည့္
ဒီေနရာမွာ center ၂ ခုျဖစ္တဲ့ Football Teams နဲ႕ Arsenal တို႕ ကို .center {text-align: center}
တစ္ေၾကာင္းတည္းနဲ႕ ေၾကာ္ျငာနိုင္တာရယ္၊ class selector မွာ မိမိစိတ္ႀကိဳက္နာမည္ p.yamanya နဲ႕ ေရးထားတာကုိ
ျမင္ေစလိုပါတယ္။
id selector
ေစာေစာက သံုးခဲ့တဲ့ class selector ဆိုတာ HTML Tag ေတြကုိသာ apply လုပ္ပါတယ္။ ဒါေၾကာင့္လဲ selector ေရးရင္
(p, td, tr, h1, h2, …..) နဲ႕ ေရးရပါတယ္။ တကယ္လို႕ မိမိက မိမိစိတ္ႀကိဳက္နာမည္နဲ႕ assign လုပ္ခ်င္ရင္ id selector
ကုိသံုးပါတယ္။ id selecotr ကုိ define လုပ္ဖို႕ အတြက္ # ကုိထည့္ရပါတယ္။
#para
{
text-align: center;
color: blue
}
www.phoelapyae.com 10
10 ရာမညဖိုးလျပည့္
Tag အမည္ေတြျဖစ္တဲ့ (p, td, tr, h1, h2,…) စတာေတြကုိ အမည္မသံုးခ်င္လို႕ မိမိစိတ္ႀကိဳက္အမည္ကို id selector
သံုးၿပီးေရးထားတာပါ။ အဲလိုေၾကာ္ျငာၿပီးရင္ ေခၚသံုးရပါမယ္။
<p id=para>
This is paragraph.It will be centerd align and red color.
</p>
class selector လိုပဲ id selector လဲ အမည္နာမေတြကုိ ကိန္းဂဏန္းနဲ႕ စေပးလို႕ မရပါဘူး။
Comment
Comment ဆိုတာ မိမိေရးခဲ့တဲ့ကုတ္ဟာ ဘာအတြက္ေရးခဲ့တယ္ဆိုတာ မွတ္သားထားတာပါ။ေနာက္တစ္ခ်ိန္က်ရင္ မိမိက
ကုတ္ေတြျပန္ျပင္ရင္ မိမိေရးခဲ့တဲ့ comment ကိုၾကည့္ၿပီး ဒီကုတ္ဟာ ဘာအတြက္ေရးထားတယ္ဆိုတာ သိနုိင္ပါတယ္။
အဲလိုေရးထားတဲ့ comment က browser ေပၚမွာ ေပၚေနမွာမဟုတ္ပါဘူး။ ေရးၾကည့္ရေအာင္ ….
/* This is comment */
မိမိေရးခ်င္တဲ့စာသားကုိ /* နဲ႕ */ ၾကားမွာေရးရမွာပါ။
နမူနာၾကည့္ရေအာင္ ….
<html>
<head>
<title>My Love</title>
/* Styles are starting here */
<style>
/* This is codes for paragraph */
p
{
text-align: center;
color: white
www.phoelapyae.com 11
11 ရာမညဖိုးလျပည့္
}
</style>
</head>
<body bgcolor=black>
<p>I always remember u</p>
</body>
</html>
Browser မွာ comment ေရးထားတာ မေပၚတာကို ေတြ႕ ရပါမယ္။
Applying CSS
CSS style sheet နဲ႕ web pages ေတြကုိ format ခ်တဲ့ေနရာမွာ အၾကမ္းဖ်င္းအားျဖင့္ (၃)မ်ိဳး format ခ်လို႕ ရပါတယ္။
Inline , Internal , External ဆိုၿပီးေပ့ါ ။ Inline ဆိုတဲ့အတိုင္း HTML Tag တိုင္းမွာ CSS ကုိထည့္မွာ ၊ Internal ကေတာ့
ကြ်န္ေတာ္အေပၚမွာ ေရးခဲ့တဲ့ ကုတ္ေတြလို </title> နဲ႕ </head> ၾကားမွာေရးတာပါ၊ External ကေတာ့ style sheet
ေရးၿပီး web page တစ္ခုစီမွာ Link tag ေတြ ခ်ိတ္ၿပီး အဲဒီ style sheet ကုိေခၚသံုးမွာပါ။ဥပမာ wordpress
မွာသံုးထားတာလိုမ်ိဳးေပါ့။ style.css ကုိ ျပင္လိုက္တာနဲ႕ website တစ္ခုလံုးေျပာင္းလဲသြားနုိင္ပါတယ္ ။
အေသးစိတ္တစ္ခုခ်င္းေလ့လာရေအာင္ …..
In Line
In Line နဲ႕ ေရးမယ္ဆိုရင္ သက္ဆုိင္ရာ tag တစ္ခုထဲမွာပဲေရးပါတယ္။ဒီလိုပါ။
<p style=”color=blue; text-align: ceneter”>This is a paragraph</p>
ဒါဆိုရင္ သူ specify လုပ္ထားတဲ့ ဒီ tag တစ္ေၾကာင္းတည္းကိုသာ သက္ေရာက္မွာပါ။
အမ်ားအားျဖင့္ေတာ့ CSS ေရးေနမွေတာ့ ဒီလို inline ျဖစ္တဲ့ tag တစ္ေၾကာင္းအတြက္နဲ႕ သံုးက်တာ နည္းပါတယ္။
www.phoelapyae.com 12
12 ရာမညဖိုးလျပည့္
Internal
Embedded or Internal style ကေတာ့ စာမ်က္နွာတစ္ခုလံုးအတြက္ သံုးတာပါ ။ ဥပမာ blog လိုမ်ိဳးေပါ့။ အေပၚမွာ
ကြ်န္ေတာ္ေရးခဲ့တဲ့ example web page ေတြဟာ internal style နဲ႕ apply ေပးထားတာပါ။ Internal နဲ႕ ေရးၿပီးဆိုရင္
style sheet code ေတြက </title> နဲ႕ </head> ၾကားမွာ ေရးပါတယ္။ဒီလိုပါ။
<head><title>CSS Example</title>
<style type=”text/css”>
p {color: red; font-family: Zawgyi-one, Arial}
body {background-color: black}
</style>
</head>
External
External ကေတာ့ အေကာင္းဆံုးနည္းလမ္းပါ။ သူက ေရးၿပီးသား style sheet ကို link tag သံုးလွမ္းခ်ိတ္ၿပီး
ယူသံုးတဲ့နည္းပါ။ လွမ္းခ်ိတ္ဖို႕ အတြက္ အဲဒီ CSS file ကုိ <head> နဲ႕ </head> ၾကားမွာ Link tag
ကုိေၾကာ္ျငာေပးရမွာပါ ။ ဒီလိုေလးပါ ..
<head>
<link rel=”stylesheet” type=”text/css” href=”urfilename.css”/>
</head>
www.phoelapyae.com 13
13 ရာမညဖိုးလျပည့္
ေၾကာ္ျငာၿပီးရင္ ေခၚသံုးဖို႕ အတြက္ css ဖိုင္ကို ေရးပါမယ္။ ဥပမာ..
P
{
text-align: center;
color: white
}
A {color: blue}
အဲဒါကုိ notepad မွာ urfilename.css ဆိုတဲ့ *.css extension နဲ႕ save ရပါတယ္။ ဒါဆို urfilename.css ဆိုတဲ့ CSS
file တစ္ခုရပါမယ္။
ဒါဆိုရင္ browser က urfilename.css က ို သြားဖတ္ပါတယ္ ။ အဒဲ ီ urfilename.css ထဲကေရးထားတ့ဲအတိုင္း webpage
ေတြကုိ format ခ်ပါတယ္။ ပုိရွင္းသြားေအာင္ နမူနာ လုပ္ၾကည့္ရေအာင္ …
<html>
<head><title>Testion External Style</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
<body>
<h1>This is a header</h1>
<h2>This is also header with blue color</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
အဲဒါကို notedpad တြင္ example.html နဲ႕ save ပါ။
ဒါက styel sheet file(CSS) file ပါ။
www.phoelapyae.com 14
14 ရာမညဖိုးလျပည့္
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
ဒါကုိ mystyle.css ဆိုတဲ့ နာမည္နဲ႕ save ပါ။ ၿပီးရင္ example.html ဖိုင္နဲ႕ mystyle.css ဖိုင္တို႕ ကုိ ဖိုဒါတစ္ခုထဲ
ထည့္ၿပီး example.html ဖိုင္ကုိ ဖြင့္ၾကည့္ပါက ဒီလိုိေလးေတြ႕ ရပါမယ္။
ဒါဟာဆိုရင္ example.html ဖိုင္ကုိ mystyle.css ဖိုင္က format ခ်လိုက္တာပါ။ မိမိကိုယ္တိုင္ေရးၾကည့္ၿပီး လုပ္ၾကည့္ပါ ။
သိလာပါလိမ့္မယ္။
ေနာက္ထပ္ နမူနာတစ္ခုေလာက္ ေလ့က်င့္ရေအာင္..
www.phoelapyae.com 15
15 ရာမညဖိုးလျပည့္
<html>
<head><title>Example</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>This is header<h1>
<p>This is a paragraph and this is a <a href="http://phoepyae.co.cc"
target="_blank">Phoe La Pyae Website</a></p>
<body>
<html>
ဒါကုိ example.html ဖိုင္နာမည္နဲ႕ save လိုက္ပါ။
body
{
background-color: black;
color: white;
}
p
{
font-size: 11pt;
font-family: Zawgyi-one, Arial;
www.phoelapyae.com 16
16 ရာမညဖိုးလျပည့္
}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:green}
a:active {color:blue}
ဒါကုိ test.css ဖိုင္နာမည္နဲ႕ save လုိက္ပါ။ ၿပီးရင္ example.html ဖိုင္ကိုေခၚၾကည့္ပါ။ ဒီလိုေလးပါ။
ဒီေနရာမွာ a tag တစ္ခုပါလာပါတယ္။ မိမိရဲ႕ webpage မွာ link ထည့္မယ္ဆိုရင္ <a></a>tag ကို anchor
အျဖစ္တစ္ခုႏွင့္တစ္ခု ခ်ိတ္ဆက္အသုံးျပဳရန္အတြက္ အသုံးျပဳပါတယ္။လင့္ခ်ိတ္ခ်င္ရင္ <a href=” website
address”>Name</a> ဆိုတဲ့ ပံုစံနဲ႕ ေရးရတာပါ။ website address ဆိုတာ မိမိခ်ိတ္ခ်င္တဲ့ ဆုိက္ address ေပါ့။
ဒီေနရာမွာ <a href=”http://phoepyae.co.cc” target=”_blank”>Phoe La Pyae</a> ဆိုတဲ့ ေနရာမွာ
target=”_blank” ဆိုတာ new tag window အေနနဲ႕ အဲဒီဆိုက္ကုိ ေပၚေစမွာ ျဖစ္ပါတယ္။ test.css မွာေရးထာတဲ့ a
tag ကုိလဲ မႏွိပ္ခင္ ဘာအေရာင္၊ ႏွိပ္ရင္ ဘာအေရာင္ စသျဖင့္ ေလ့လာၾကည့ပါ။
CSS Division
www.phoelapyae.com 17
17 ရာမညဖိုးလျပည့္
အခု ကြ်န္ေတာ္တို႕ class and id selector ေတြအေၾကာင္း ေတာ္ေတာ္မ်ားမ်ား သိၿပီးျဖစ္ပါတယ္။ အခုဆက္လက္ၿပီး
အဲလို secelctor မ်ိဳးျဖစ္တဲ့ div and span ေတြကို နည္းနည္းေလ့လာၾကည့္ရေအာင္ …
Divisions
Division ကအမ်ားအားျဖင့္ html file ေတြကုိ define လုပ္ေလ့ရွိတယ္။ သူသည္လဲ class and id selector လိုပါပဲ ။
သံုးနည္းကုိၾကည့္လိုက္ရင္ ပုိရွင္းသြားမွာပါ။
<div id=”container”>
Site contents go here
</div>
အဲဒါကုိ CSS မွာက်ရင္ ဒီလိုေရးပါတယ္။
#container
{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #600;
background: #ffffff;
}
အဲလိုေလးပါ။ id selector လိုမ်ိဳးေပါ့ ။ အဲဒီထဲမွာ ပါတဲ့ ကုတ္အခ်ိဳ႕ ေတြကုိ သက္ဆိုင္ရာ ေခါင္းစဥ္ေရာက္မွ အေသးစိတ္
ရွင္းပါ့မယ္။
Span
www.phoelapyae.com 18
18 ရာမညဖိုးလျပည့္
Spans ဟာ division tag လုိပါပဲ ။ ဒါေပမဲ့ span က Inline နဲ႕ apply လုပ္တဲ့ေနရာမွာပဲ အသံုးမ်ားပါတယ္။
တစ္ေၾကာင္းတည္းဆိုရင္ အသံုးမ်ားတာေပါ့ ။
<span class=”italic”>This text is italic</span>
အဲဒါကုိ CSS မွာ ဒီလိုေရးရပါတယ္။
.italic {font-style: italic;}
CSS Background
Web page တစ္ခုရဲ႕ background ကုိ အေရာင္ သို႕ မဟုတ္ ပံုနဲ႕ ထည့္သြင္းျခင္းကုိ ဒီေနရာမွာေလ့က်င့္မွာပါ။
Web page ရဲ႕ background color ကုိ မထည့္ခင္ color ရဲ႕ ေရးတတ္ပံုေတြကုိ ေဆြးေႏြးပါ့မယ္။ color ကုိအေရာင္နဲ႕
ေဖာ္ျပျခင္း color: green; အေရာင္ကုတ္နဲ႕ ေဖာ္ျပျခင္း color: #ffffff; နဲ႕ အေျခခံအေရာင္ သံုးေရာင္စပ္ထားျခင္းျဖင္း
color: rgb(106,251,146); ဆိုၿပီးရွိပါတယ္။
ဒီေနရာမွာ color: rgb(106,251,146); မွာ rgb ဆိုတာက red, green, blue ကို ဆိုလိုျခင္းျဖစ္ပါတယ္။ (106,251,146)
ဆိုတာက အေရာင္သုံးေရာင္ေပါင္းစပ္ထားျခင္းပါ။ သူ႔ အေရာင္တစ္ခုျခင္းစီအတြက္ limit ကေတာ့ 0-255 ျဖစ္ပါတယ္။ 0
ကေတာ့ ၄င္းအေရာင္ရဲ႕ light အျဖစ္ဆုံးအဆင့္ပါ။ 255 ကေတာ့ dark အျဖစ္ဆုံးပါ။ ဥပမာ
အျပာေရာင္တစ္ေရာင္ပဲလိုခ်င္တယ္ဆိုရင္ color: rgb(0,0,255); လို႔ေရးလို႔ရပါတယ္။ ေနာက္တစ္ခုက အေရာင္ကုတ္ဖြဲ႕
စည္းမႈ ။ ာ။ အေရာင္ကုဒ္ေတြမွာဆိုရင္ # ေနာက္မွာ ဂဏန္း၆လုံးကို ေတြ႔ရပါလိမ့္မယ္။ အဲဒီဂဏန္း ၆ လုံးက
hexadeicmal code ေတြျဖစ္ျပီးေတာ့ ၂ လုံးတစ္တြဲယူရပါတယ္။ ဂဏန္း၂ လုံးက အေျခခံအေရာင္ ၁ ေရာင္ကို
ကိုယ္စားျပဳပါတယ္။ red, green, blue ျဖစ္တဲ့အတြက္ အေရာင္ကိုေဖာ္ျပတဲ့ ဂဏန္း ၆လုံးရွိျခင္းျဖစ္ပါတယ္။ သူ႔ format
ကေတာ့ # rrggbb ေပါ့ဗ်ာ။ အဲဒီမွာ သုံးတဲ့ အေရာင္ကုဒ္ရဲ႕ ရည္ညြန္းမႈကေတာ့ ...
FF သည္ full brightness
CC သည္ 80 % brightness
99 သည္ 60 % brightness
66 သည္ 40 % brightness
33 သည္ 20 % brightness
www.phoelapyae.com 19
19 ရာမညဖိုးလျပည့္
00 ကေတာ့ သူနဲ႔ဆိုင္တဲ့ အေရာင္မပါ၀င္ေႀကာင္းကို ေဖာ္ျပျခင္းျဖစ္ပါတယ္။
ဥပမာ..bright red သည္ #FF0000 ၊ dark blue သည္ #000033၊ medium-gray ကေတာ့ #999999 ျဖစ္ပါတယ္။
ဒါကေတာ့ သိရံုသက္သက္ပါပဲ ။ ထပ္ေျပာရင္ ရႈပ္သြားပါလိမ့္မယ္။ ဒီေတာ့ ကြ်န္ေတာ္တို႕ နမူနာ web page
တစ္ခုေရးၾကည့္လုိက္လုိက္ရင္ ပိုရွင္းမယ္ထင္ပါတယ္။ ေရးရေအာင္ ….
<html>
<head>
<title>this is the title of the web page</title>
<style type="text/css">
body {background-color: yellow;}
h1 {background-color: #00ff00;}
h2 {background-color: red;}
p {background-color: rgb(250,0,255);}
</style>
</head>
<body>
<h1>
This is a level 1 header
</h1>
<h2>
This is a level 2 header
</h2>
www.phoelapyae.com 20
20 ရာမညဖိုးလျပည့္
<p>
This is a paragraph
</p>
</body>
</html>
How to set an image as the background
ဒီတစ္ခါ မိမိရဲ႕ web page မွာ ေနာက္ခံအေရာင္ကုိအသံုးမျပဳပဲ ဓါတ္ပံုတစ္ခုခုကို အသံုးျပဳမဲ့နည္းလမ္းပါ ။
အဲလိုထည့္ခ်င္ရင္ ဒီလိုေလးေရး၇ပါတယ္။
body {background-image: url(‘image address’)}
image address ေနရာမွာ မိမိထည့္မဲ့ image ရဲ႕ link ကုိယူရပါမယ္။ နမူနာတစ္ခုေရးရေအာင္ …
မေရးခင္ ဒီပံုေလးကို အရင္ save ထားလိုက္ပါ။ ရွင္းျပတာ တသမတ္တည္းျဖစ္ေအာင္လို႕ ပါ။
DOWNLOAD PHOTO
http://yamanya.mlm.googlepages.com/yamanya.jpg
www.phoelapyae.com 21
21 ရာမညဖိုးလျပည့္
yamanya.jpg နဲ႕ save ထားလိုက္ပါ။ ကဲ .. စေရးၿပီး ..
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg')
}
</style>
</head>
<body>
</body>
</html>
အဲဒီကုတ္ကုိ html file အေနနဲ႕ save ၿပီး ေစာေစာက ပံု yamanya.jpg ပံုနဲ႕ ဖိုဒါတစ္ခုအတြင္းထားၿပီး html tile
ကုိဖြင့္လိုက္ပါ။ဒီလိုေလးပါ…
www.phoelapyae.com 22
22 ရာမညဖိုးလျပည့္
ဒီေနရာမွာ ဘာကုိသတိထားမိက်သလဲ ။ ရာမညဖိုးလျပည့္ဆိုတဲ့ ပံု ထပ္ခါထပ္ခါ repeat ျဖစ္ေနတာ ေတြ႕ ရပါမယ္။
ဒီေတာ့ body {background-image: url(‘yamanya.jpg’)} နဲ႕ body {background-image: url(‘yamanya.jpg’);
background-repeat: repeat} နဲ႕ တူပါတယ္။ ဒိေနရာမွာ repeat ပါလာပါၿပီး။တယ္။background-repeat:repeat
ဆိုတာကေတာ့
မိမိေနာက္ခံဓါတ္ပုံကိုဘယ္လိုပုံစံေဖာ္ျပမလဲဆိုတာကို သတ္မွတ္ျခင္းျဖစ္ပါတယ္။အဒဲ ီလိုေဖာ္ျပဖို႔အတြက္ backgroundrepeat:
attribute မွာသတ္မွတ္ခ်က္style ေလးခုရွိပါတယ္။ repeat, repeat-x,repeat-y , no-repeat တုိ႔ျဖစ္ပါတယ္။
repeat ကေတာ့ မိမိဓါတ္ပုံကို webpage မွာ tile ပုံစံျဖင့္အျပည့္ေဖာ္ျပေစရန္အတြက္ျဖစ္ပါတယ္။tile ပုံစံ ဆိုတာကေတာ့
မိမိရဲ႕ webpage တစ္ခုလုံးမွာ ေနာက္ခံဓါတ္ပုံကိုနဂုိမူလအတိုင္းတစ္ခုႏွင့္တစ္ခုဆက္စပ္ျပီး
အျပည့္ေပၚေစျခင္းျဖစ္ပါတယ္။ ဥပမာအေနနဲ႔ျပရရင္ computer desktop ရဲ႕ ေနာက္ခံပုံတင္တဲ့အခါမွာ user
ကိုေရြးခ်ယ္ခြင့္ သုံးမ်ိဳးေပးထားပါတယ္။tile, center, stretch ဆိုျပီးသုံးမ်ိဳးရွိတဲ့အနက္ tile
ကမိမိဓါတ္ပုံအရြယ္အစားေသးေနတဲ့အခါ တစ္ပုံနဲ႔တစ္ပုံဆက္စပ္ျပီး အျပည့္ေဖာ္ျပတာပါ။center ဆိုတာကေတာ့
မိမိဓါတ္ပုံကို အလယ္မွာနဂိုအရြယ္အစားအတိုင္း တစ္ပုံတည္းေဖာ္ျပတာျဖစ္ပါတယ္။stretch ကေတာ့ ဓါတ္ပုံရဲ႕
resolution ကို screen တစ္ျပင္လုံးအျပည့္ခ်ဲ႔ျပီးေဖာ္ျပတာပါ။ဒီေနရာမွာေတာ့ tile
ပုံစံေဖာ္ျပျခင္းပဲအသုံးျပဳမွာျဖစ္ပါတယ္။repeat-x ကေတာ့ ေနာက္ခံပုံကို
အလ်ားလိုက္တစ္၀က္ပဲေဖာ္ျပျခင္းျဖစ္ပါတယ္။အေပၚတစ္ျခမ္းပဲပါျပီး ေအာက္တစ္ျခမ္းကေတာ့
ပုံပါမွာမဟုတ္ပါဘူး။repeat-y ဆိုတာကေတာ့ ေနာက္ခံပုံက ဘယ္၊ညာ တစ္ျခမ္းပဲပါမွာျဖစ္ပါတယ္။ဒီေနရာမွာ x နဲ႔ y
www.phoelapyae.com 23
23 ရာမညဖိုးလျပည့္
ဆိုတာက computer screen ကို coordinate system အရ x ၀င္ရုိး y ၀င္ရုိး ခြဲျခားျပီး horizontal / vertical
ပုံစံနဲ႔ေဖာ္ျပတာျဖစ္ပါတယ္။
no-repeat ကို အသုံးျပဳရင္ေတာ့ မိမိရဲ႕ပုံဟာ ေနာက္ခံအေနနဲ႔ေပၚမွာမဟုတ္ပဲ webpage ရဲ႕ဘယ္ဘက္အေပၚေထာင့္မွာ
တစ္ပုံတည္း တစ္ႀကိမ္သာေပၚမွာျဖစ္ပါတယ္။
ကဲ .. နမူနာေရးၾကည့္တာက ပုိ၇ွင္းပါတယ္ .. ၾကည့္ရေအာင္ ။
How to repeat a background image
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
background-repeat: repeat
}
</style>
</head>
<body>
</body>
</html>
www.phoelapyae.com 24
24 ရာမညဖိုးလျပည့္
ဒါကေတာ့ အေပၚမွာ ေဆြးေႏြးၿပီးျဖစ္တဲ့အတိုင္း repeat က မိမိဓါတ္ပုံကို webpage မွာ tile
ပုံစံျဖင့္အျပည့္ေဖာ္ျပေစရန္အတြက္ျဖစ္ပါတယ္။
How to repeat a background image only horizontally
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
background-repeat: repeat-x
www.phoelapyae.com 25
25 ရာမညဖိုးလျပည့္
}
</style>
</head>
<body>
</body>
</html>
repeat-x ကေတာ့ ေနာက္ခံပုံကို အလ်ားလိုက္တစ္၀က္ပဲေဖာ္ျပျခင္းျဖစ္ပါတယ္။အေပၚတစ္ျခမ္းပဲပါျပီး
ေအာက္တစ္ျခမ္းကေတာ့ ပုံပါမွာမဟုတ္ပါဘူး။
www.phoelapyae.com 26
26 ရာမညဖိုးလျပည့္
How to repeat a background image only vertically
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
www.phoelapyae.com 27
27 ရာမညဖိုးလျပည့္
repeat-y ဆိုတာကေတာ့ ေနာက္ခံပုံက ဘယ္၊ညာ တစ္ျခမ္းပဲပါမွာျဖစ္ပါတယ္။ဒီေနရာမွာ x နဲ႔ y ဆိုတာက computer
screen ကို coordinate system အရ x ၀င္ရုိး y ၀င္ရုိး ခြဲျခားျပီး horizontal / vertical ပုံစံနဲ႔ေဖာ္ျပတာျဖစ္ပါတယ္။
How to display a background image only one time
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
www.phoelapyae.com 28
28 ရာမညဖိုးလျပည့္
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>
www.phoelapyae.com 29
29 ရာမညဖိုးလျပည့္
no-repeat ကို အသုံးျပဳရင္ေတာ့ မိမိရဲ႕ပုံဟာ ေနာက္ခံအေနနဲ႔ေပၚမွာမဟုတ္ပဲ webpage ရဲ႕ဘယ္ဘက္အေပၚေထာင့္မွာ
တစ္ပုံတည္း တစ္ႀကိမ္သာေပၚမွာျဖစ္ပါတယ္။
အခုဆုိရင္ background နဲ႕ ပက္သက္ၿပီး background-color, background-image, background-repeat တို႕
ကုိေကာင္းေကာင္းသေဘာေပါက္ေလာက္ၿပီးထင္ပါတယ္။ ေနာက္ထပ္ background အေနနဲ႕ က်န္တာက backgroundattachement
နဲ႕ background-position တို႕ ပဲ ျဖစ္ပါတယ္။
How to position a background image
ေနာက္ခံဓါတ္ပံုကို ေနရာခ်ရမွာ ေအာက္ပါအတိုင္းေရးေလ့ရွိပါတယ္။
body
{
background-position: top left;
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;
x% y%
xpos ypos;
background-attachement: scroll;
fixed;
}
ဒီေနရာမွာ backgroun-position နဲ႕ ပက္သက္ၿပီး နမူနာ ကိုယ့္ဘာသာကိုယ္ေရးၾကည့္ပါ ။ ေရးျပေနရင္ စာမ်က္နွာ
ေဖာင္းပြသြားမွာပါ။ top left ဆို အေပၚဆံုးရဲ႕ ဘယ္ဘက္အစြန္ဆံုးေပါ့ ။ တစ္ခုပဲ ရွိတယ္ % နဲ႕ px ။ သူတို႕ကုိ
ဒီလိုေရးပါတယ္ ။
www.phoelapyae.com 30
30 ရာမညဖိုးလျပည့္
background-position: 30% 20%;
50px 100px;
အဲလိုေရးေလ့ရွိပါတယ္။ ဒီေနရာမွာ အတိုင္းအတာေတြကို center ကေနစယူတာၿပိးအရင္ အရင္ဆံုးက x ၀င္ရုိးျဖစ္ၿပီး
ေနာက္ဆံုးက y ၀င္ရုိးကိုျဖစ္ပါတယ္။ မိမိဘာသာနမူနာေရးၾကည့္ရင္ သေဘာေပါက္သြားပါလိမ့္မယ္။
CSS Text
အခုဆက္လက္ၿပီး Text အပိုင္းဆက္လက္ေလ့လာက်မယ္ …text အပိုင္းမွာ အေရာင္တို႕ ၊ စာလံုးတစ္လံုးနဲ႕ တစ္လံုး
အကြာအေ၀း စသျဖင့္ text နဲ႕ ဆိုင္တာေတြ အားလံုးကိုေဆြးေႏြးပါ့မယ္။ ရွင္းလင္းေအာင္ နမူေလးေတြနဲ႕ ျပမွ
မ်က္စိထဲျမင္မွာျဖစ္ပါတယ္။ တစ္ခုခ်င္းအေသးစိတ္ေလ့လာရေအာင္ …..
How to set the color of text
Web page ေတြမွာ စာသားေတြကုိ မိမိထည့္ခ်င္တဲ့ အေရာင္ထည့္ရေအာင္ …နမူနာၾကည့္တာ ပုိရွင္းပါတယ္..
<html>
<head><title>this is the title of the web page</title>
<style type="text/css">
h1 {color: #00ff00;}
h3 {color: #dda0dd;}
p {color: rgb(0,0,255);}
</style>
</head>
<body>
<h1>
This is a level 1 header
</h1>
www.phoelapyae.com 31
31 ရာမညဖိုးလျပည့္
<h3>
This is a level 3 header
</h3>
<p>
This is a paragraph
</p>
</body>
</html>
ဒီေနရာမွာ color တန္ဖိုးေတြျဖစ္တဲ့
color: green;
color: #ffffff;
color: rgb(0,0,255);
တို႕ ကုိ ကြ်န္ေတာ္ရွင္းျပၿပီးသားပါ ။ decimal ျဖစ္တဲ့ color: #ffffff မ်ိဳးကို ေအာက္ပါဆိုက္မွာ ကုတ္ေတြကုိ
ရွာနိုင္ပါတယ္။
Text Background Color
Webpage ေတြရဲ႕ စာသားအခ်ိဳ႕ ကုိ ကြ်န္ေတာ္တို႕ High Light အေနနဲ႕ လုပ္ခ်င္ရင္ ဒီလိုလုပ္လို႕ ရပါတယ္…
www.phoelapyae.com 32
32 ရာမညဖိုးလျပည့္
နမူနာၾကည့္လုိက္ပါ။
<html>
<head>
<style type="text/css">
body {background-color: black; color: red;}
p {text-align: center}
span.highlight
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span class="highlight">I Will Love You Forever</span><br><br>
I love you so deeply,<br>
I love you so much,<br>
I love the sound of your voice<br>
And the way that we touch.<br>
I love your warm smile<br>
And your kind, thoughtful way,<br>
www.phoelapyae.com 33
33 ရာမညဖိုးလျပည့္
The joy that you bring<br>
To my life every day.<br>
I love you today<br>
As I have from the start,<br>
<span class="highlight">And I'll love you forever<br>
With all of my heart.</span>
</p>
</body>
</html>
ဒီေနရာမွာ span.highlight ဆိုတဲ့ span class ကုိသံုးထားတာေတြ႕ ရပါမယ္။ အဲဒီ span ကုိလဲ အရင္ပို႕ စ္ေတြမွာ
ရွင္းျပၿပီးသားျဖစ္လို႕ ထပ္မရွင္းေတာ့ပါဘူး။ နားလည္မယ္လို႕ ထင္ပါတယ္။
www.phoelapyae.com 34
34 ရာမညဖိုးလျပည့္
Specify the space between characters
စာလံုးအစိပ္အက်ဲကုိ ဆက္ေလ့လာရေအာင္ ….. ဒီလိုေရးပါတယ္။
<style type=”text/css”>
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
ဒီေနရာမွာ letter-spacing ရဲ႕ တန္ဖိုးကုိ px , cm တို႕ နဲ႕ ျပတာကုိေတြ႕ ရပါမယ္။ အဲဒီတန္ဖိုးေတြ သတ္မွတ္ခ်က္ကုိ
ေနာက္ပုိင္းေဆြးေႏြးမဲ့ font အပိုင္းမွာ ေဆြးေႏြးေပးပါ့မယ္။ကဲ .. နမူနာတစ္ခုေရးၾကည့္ရေအာင္ ….
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>
</html>
www.phoelapyae.com 35
35 ရာမညဖိုးလျပည့္
Specify the space between lines
စာလံုးအစိပ္အက်ဲၿပီးေတာ့ ဒီတစ္ခါ စာေၾကာင္းအစိပ္အက်ဲကုိ ေဆြးေႏြးပါ့မယ္ …သူ႕ကုိေရးေတာ့ ဒီလိုေလးပါ …
<style type=”text/css>
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
ဘယ္လိုသက္ေရာက္မႈ ရွိသလဲဆိုတာ ေအာက္မွာ စာပုဒ္သံုးပုဒ္နဲ႕ ရွင္းျပပါ့မယ္ …. ၾကည့္ရေအာင္ ..
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
www.phoelapyae.com 36
36 ရာမညဖိုးလျပည့္
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
www.phoelapyae.com 37
37 ရာမညဖိုးလျပည့္
ေရးထားတာကို ၾကည့္ရင္ ရွင္းပါတယ္ ။ တန္ဖိုးဘယ္ေလာက္သတ္မွတ္ရင္ ဘယ္ေလာက္ ကြာျခားသလဲဆိုတာ ….
Text Align
ဒါကေတာ့ ထပ္ခါထပ္ခါေရးၿပီးသားဆိုေတာ့ အထူးတလည္ရွင္းျပစရာေတာင္မလုိပါဘူး .. နမူနာေရးၾကည့္မယ္..
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
www.phoelapyae.com 38
38 ရာမညဖိုးလျပည့္
<h3>This is header 3</h3>
</body>
</html>
Decorate the text
Decorate ဆိုတာ စာသားေတြကုိ မ်ဥ္းသားခ်င္တာမ်ိဳး .. လင့္ေတြကို ေအာက္မွာ မ်ဥ္းေၾကာင္းမထည့္ခ်င္တာမ်ိဳး..
မွိတ္တုတ္မွိတ္တုတ္ေပၚတာမ်ိဳး လုပ္ေဆာင္နိုင္ပါတယ္ …ဘယ္လိုေရးနုိင္သလဲ ဆိုတာ ၾကည့္ရေအာင္ …
<style type=”text/css”>
h1 {text-decoration: underline}
</style>
အဲလိုမ်ိဳး text-decoration နဲ႕ ေရးပါတယ္ … သူရဲ႕ တန္ဖိုးအားလံုးကေတာ့ ….
www.phoelapyae.com 39
39 ရာမညဖိုးလျပည့္
text-decoration: overline;
text-decoration: underline;
text-decoration: line-through;
text-decoration: blink;
text-decoration: none;
ဒါဟာ text-decoration နဲ႕ ေရးလုိ႕ ရတဲ့တန္ဖိုး အကုန္ပါပဲ ။ ဒီေနရာမွာ overline ဟာ စာသားေပၚမွာ
မ်ဥ္းသားတာျဖစ္ၿပီး underline က်ေတာ့ စာသားေအာက္က မ်ဥ္းသားတာပါ။ line-through ကေတာ့ စာသားကုိ မ်ဥ္းနဲ႕
ျဖတ္ထားတာပါ။ blink ကေတာ့ စာသားကုိ မွိတ္တုတ္မွိတ္တုတ္ေဖာ္ျပေပးပါတယ္ … none ကေတာ့ ဘာ effect မွမပါ
စာသားသက္သက္ပါ … သာမာန္ text ရဲ႕ default ကေတာ့ none ပါ။ ဒီေတာ့ မ်က္စိထင္ျမင္သြားေအာင္ ေအာက္က
ဥပမာေရးထားတာေလးကုိ ၾကည့္ၾကည့္လိုက္ပါ။
<html>
<head>
<style type="text/css">
h1 {text-decoration: underline}
h2 {text-decoration: overline}
h3 {text-decoration: line-through}
a {text-decoration: blink}
p {text-decoration: none; font-family: Zawgyi-one}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
www.phoelapyae.com 40
40 ရာမညဖိုးလျပည့္
<h3>This is header 3</h3>
<p><a
href="http://www.phoepyae.co.cc">ရာမညဖိုးလျပည့္ဘေလာ့မွ…</a><br><br>
လႈိုက္လွဲစြာ ၾကိဳဆိုပါ၏ ...</p>
</body>
</html>
ရာမညဖိုးလျပည့္ဘေလာ့မွ .. ဆိုတဲ့ စာသားက မွိတ္တုတ္မွိတ္တုတ္ျဖစ္ေနမွာပါ … ဒီေနရာမွာ ဓါတ္ပံုျဖစ္လို႕
ရုပ္ေသႀကီးျဖစ္ေနတာပါ ။
www.phoelapyae.com 41
41 ရာမညဖိုးလျပည့္
Indent Text
စာပုဒ္ေရးလို႕ ရွိရင္ ပထမစာေၾကာင္းကုိ မာဂ်င္ကေန ေနရာအနည္းငယ္ခ်န္ၿပီးေရးေလ့ရွိပါတယ္ .. ဒါမ်ိဳးဆိုရင္ indent
style နဲ႕ ေရးလို႕ ရပါတယ္ .. သူ႕ ရဲ႕ ေရးတဲ့ပံုစံေလးကေတာ့ ….
<style>
P {text-indent: 2cm}
</style>
သူ႕ ရဲ႕ properties ေတြက
text-indent: length;
%;
တို႕နဲ႕ ေဖာ္ျပေလ့ရွိပါတယ္ …..ဒီေနရာမွာ px , em , % တို႕ နဲ႕ ေဖာ္ျပနိုင္ပါတယ္ ….. သူတို႕ ရဲ႕ အတိုင္းအတာေတြကုိ 1
px မွာ em ဘယ္ေလာက္၊ % ဘယ္ေလာက္ ဆိုတာခန္႕ မွန္းလို႕ ရေအာင္ ေအာက္မွာ ေဖာ္ျပလုိက္ပါတယ္ .. ဒီေနရာမွာ
em -- > the ‘font-size’ of the relevant font
ex -- >the ‘x-height’ of the relevant font
px -- >pixels, relative to the viewing device
ျဖစ္ပါတယ္….. သူတို႕ ရဲ႕ အဓိပၸါယ္ဖြင့္ဆိုခ်က္ေတြကုိ ေအာက္ကလင့္မွာ အေသးစိတ္ေလ့လာနုိင္ပါတယ္ …
http://www.bigbaer.com/css_tutorials/css_font_size.htm
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
http://www.explainth.at/en/css/units.shtml
www.phoelapyae.com 42
42 ရာမညဖိုးလျပည့္
ဒါကေတာ့ em ,px , % . ex တို႕ ရဲ႕ နွိုဳင္းယွဥ္ခ်က္ေတြပါ …
www.phoelapyae.com 43
43 ရာမညဖိုးလျပည့္
ပုိရွင္းေအာင္ နမူနာတစ္ခုၾကည့္လုိက္ပါ …
<html>
<head>
<style type="text/css">
body {background-color: black; color: white;}
p {text-indent: 1cm; font-family: Zawgyi-one;}
</style>
</head>
<body>
<p>
ကြ်န္ေတာ္ကေတာ့ ရာမညဖိုးလျပည့္ပါ ။ ရာမညဆိုေတာ့ မြန္ကလား ? ဟုတ္ပါတယ္ ။ ကြ်န္ေတာ္ ေမာ္လၿမိဳင္ဇာတိပါ
။ကြ်န္ေတာ္ကေတာ့ 2005 မွာ BE ( Electronic ) နဲ႕ ေက်ာင္းၿပီးပါတယ္ ။ ေက်ာင္းၿပီးကတည္းက အီလက္ထရြန္းနဲ႕
အလွမ္းေ၀းေနတာပါ ။ ဟိုစပ္စပ္ သည္စပ္စပ္ အားႀကီး လုပ္တယ္ ။ တစ္ခုမွ ေကာင္းေကာင္းကန္းကန္း မသိဘူး ။
ေမြးရာပါ အားနည္းခ်က္တစ္ခုကေတာ့ ရုပ္ေခ်ာ၊ သေဘာေကာင္း ပါ။
</p>
</body>
</html>
www.phoelapyae.com 44
44 ရာမညဖိုးလျပည့္
Control the letters in a text
ဒါကေတာ့ စာလံုးေတြကုိ Uppercase , Lowercase , စာလံုးအႀကီး ေျပာင္းတာေတြလုပ္ရင္ text-transform ဆိုတဲ့ style
tag ကိုအသံုျပဳပါတယ္… ေရးပံုကေတာ့ ..
<style>
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
နမူနာကိုေတာ့ ေရးမျပေတာ့ပါဘူး … uppercase ဆို စာလံုးအႀကီးေပါ့ .. class selector ကရွင္းျပၿပီးသားပါ .. ဒါေၾကာင့္
p.uppercase ဆိုတာလဲ သေဘာေပါက္မယ္ထင္ပါတယ္ ....
www.phoelapyae.com 45
45 ရာမညဖိုးလျပည့္
Set the text direction of an element
ဒါကေတာ့ စာသားေတြကုိ ဘယ္ဘက္ကေနပဲစေရးခ်င္တာမ်ိဳး၊ ဒါမွမဟုတ္ ညာဘက္ကေနပဲ စေရးခ်င္တဲ့ေနရာမ်ိဳးမွာ
အသံုးျပဳပါတယ္…ေရးနည္းထံုးစံကေတာ့
<style>
div.one {direction: rtl}
div.two {direction: ltr}
</style>
အဲလိုပါ …. ဒီေနရာမွာ div class ကုိရွင္းျပစရာမလိုေတာ့ဘူးလို႕ ထင္ပါတယ္ .. မိမိကိုယ္တိုင္သာေရးၾကည့္လိုက္ပါ …
Word-spacing Property
ဒါကေတာ့ စာလံုးတစ္လံုးေနရာျခားခ်င္ရင္ အသံုးျပဳတာပါ …. ေရးတာကေတာ့ ဒီလိုေလးပါ ..
<html>
<head>
<style type="text/css">
p
{
word-spacing: 30px
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
www.phoelapyae.com 46
46 ရာမညဖိုးလျပည့္
</p>
</body>
</html>
ဒါဟာဆိုရင္ စာပိုဒ္မွာရွိတဲ့ စာလံုးတစ္လံုးန႕ဲ တစ္လံုးကုိ 30px ျခားေပးမွာျဖစ္ပါတယ္ .. px ဆိုတာဘာဆိုလိုတာဆိုတာ
ကြ်န္ေတာ္အေပၚမွာ ရွင္းျပၿပီးသားပါ ….
White-space Property in Text
နမူနာတစ္ခု ၾကည့္လုိက္ပါ .. ျပန္ေျပာျပဖို႕ ေတာ္ေတာ္ခက္လိမ့္မယ္ ျဖစ္ေနလို႕ ပါ …
<html>
<head><title>white-space Demonstration</title>
<style type="text/css">
p.normal
{
white-space:normal;
}
p.pre
{
white-space:pre;
}
p.nowrap
{
www.phoelapyae.com 47
47 ရာမညဖိုးလျပည့္
white-space:nowrap;
}
</style>
</head>
<body>
<h1><p>white-space demonstration</p></h1>
<p class="normal">This is the normal value for the white-space property. This is
the normal value for the white-space property. This is the normal value for the
white-space property. This is the normal value for the white-space
property.</p><br/>
<p class="pre">This is the pre value for the white-space
property.</p><br/>
<p class="nowrap">This is the nowrap value for the white-space property. This
is the nowrap value for the white-space property. This is the nowrap value for
the white-space property. This is the nowrap value for the white-space
property.</p>
www.phoelapyae.com 48
48 ရာမညဖိုးလျပည့္
</body>
</html>
ဒီေနရာမွာ
p.normal {white-space: normal} ဆိုတာက စာသားေတြကုိ အဆံုးထိေရာက္ရင္ ေအာက္တစ္ေၾကာင္းကူးသြားတာပါ ။
wrap ဆိုတဲ့ အတုိင္း စာသားေတြကို ေဘာင္အတြင္းမွာထည့္သြင္းေဖာ္ျပတာပါ ..… သူကေတာ့ white-space တန္ဖိုးရဲ႕
default တန္ဖိုးပါပဲ … notepad မွာပါတဲ့ Word Wrap လိုေပါ့ …
p.nowrap {white-space: nowrap} ကေတာ့ nowrap ဆိုတဲ့အတုိင္း ေနာက္တစ္ေၾကာင္းမဆင္းမခ်င္း စာသားေတြက
ေဘာင္ေက်ာ္ၿပီးဆက္သြားေနမွာပဲ …. ေနာက္တစ္ေၾကာင္းဆင္းမွ <br> tag သံုးမွသာ ဆင္းမွာပါ …
p.pre {white-space: pre} ကေတာ့ HTML tag မွာပါတဲ့ <pre> နဲ႕ တူပါတယ္ .. သူက စာတစ္ေၾကာင္းနဲ႕
တစ္ေၾကာင္းကုိ ျခားေပးတာပါ …
CSS Font
အခုဆိုရင္ ကြ်န္ေတာ္ေဆြးေႏြးခဲ့တာဟာ
CSS ေရးထံုးေရးနည္း ၊
www.phoelapyae.com 49
49 ရာမညဖိုးလျပည့္
CSS ကုိ webpage မွာ apply လုပ္နည္း၊
ေနာက္ခံ အေရာင္၊ ပံုထည့္ျခင္း၊
စာသားေရးျခင္း အမ်ိဳးမ်ိဳး တို႕ ကို ေဆြးေႏြးၿပီး ျဖစ္ပါတယ္ …
အခုဆက္လက္ၿပီး Font အပိုင္းကို ဆက္လက္ေဆြးေႏြးပ့ါမယ္ ….
CSS Font မွာ စာလံုးဆိုက္ ၊ အေရာင္ ၊ စတိုင္ စသျဖင့္ မ်ားစြာေျပာင္းလဲနိုင္ပါတယ္ … သူ႕ ရဲ႕ property ေတြကေတာ့
font-style
font-family
font-size
font-size-adjust
font-stretch
font-variant
font-weight တို႕ ျဖစ္က်ပါတယ္ …
Font Color
ပထမဦးဆံုး ဖြန္႕ ကာလာကုိ အရင္ဆံုးလုပ္ၾကည့္ရေအာင္ ..
h4 {color: red}
h5 {color: #9000A1}
h6 {color: rgb(0,220,98)}
www.phoelapyae.com 50
50 ရာမညဖိုးလျပည့္
ဒါကေတာ့ အေထြအထူး ရွင္းျပစရာမလုိဘူးထင္ပါတယ္ …. အေရာင္ထည့္တာက ရွင္းျပၿပီးသားပါ ..
CSS font family
Web page ေတြကုိ မိမိစိတ္ႀကိဳက္ font ေတြနဲ႕ သတ္မွတ္ခ်င္ရင္ သံုးနုိင္ပါတယ္ …ေရးသားပံုကေတာ့ ..
font-family: Arial;
တကယ္လို႕ ဖြန္႕ တစ္မ်ိဳးထက္ပိုလာရင္ ေကာ္မာ ခံေရးပါတယ္ ..
font-family: Zawgyi-one, Arial, Pussycat;
ေနာက္တစ္ခုက ဖြန္႕ နာမည္က စာလံုး တစ္လံုးထက္ပုိရင္ရင္ အဖြင့္အပိတ္ နဲ႕ ေရးပါတယ္..
font-family: Zawgyi-one, Arial, “ludida console”,sans-serif;
ps: font-family တြင္ အရင္ဆံုးလာေသာဖြန္႕ မွစ၍ ဖြန္႕ အားလံုးကုိ format ခ်ပါသည္ …
အေပၚကေရးထားေသာ style တြင္ Zawgyi-one ကိုအရင္ဆံုး format ခ်ပါတယ္ .. မရွိမွ ေနာက္ဒုတိယျဖစ္တဲ့ Arial ကုိ
format ခ်ပါတယ္…
<style>
p
{
font-family: Zawgyi-one, Arial;
color: red;
}
</style>
ဒါဟာဆိုရင္ စာပုဒ္တစ္ခုလံုးက ဖြန္႕ ေဇာ္ဂ်ီျဖစ္ၿပီး စာသားအေရာင္က အနီေရာင္ အျဖစ္ format ခ်ေပးမွာ ျဖစ္ပါတယ္ ….
Font-size
စာလံုးဆိုက္သတ္မွတ္ခ်င္ရင္သံုးတာပါ ….. property ေတြကေတာ့ေအာက္ပါအတိုင္းပါ ..
www.phoelapyae.com 51
51 ရာမညဖိုးလျပည့္
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
ေရးသားပံုကေတာ့ …
<style>
font-size: xx-small;
</style>
စသျဖင့္ အဲလုိမ်ိဳး ေရးသားပါတယ္ … သူရဲ႕ ဖြန္႕ တန္ဖိုးသတ္မွတ္ခ်က္ေတြကေတာ့ ေအာက္ကလင့္မွာ
ဖတ္ၾကည့္စမ္းသပ္နုိင္ပါတယ္ …
http://htmlhelp.com/reference/css/font/font-size.html
http://www.fonttester.com/
xx-small ဆိုရင္ ဘယ္လိုဆိုက္၊ medium ဆိုရင္ ဘယ္လိုဆိုက္ စသျဖင့္ ေလ့လာၾကည္ပါ ….
http://www.w3.org/TR/REC-CSS2/fonts.html#propdef-font-size ဒါကေတာ့ ဖြန္႕ ဆိုက္သတ္မွတ္ခ်က္ပါ …
Font Size Adjust
တကယ္လို႕ မိမိစိတ္ႀကိဳက ္ ဖြန္႕ ဆိုက္ကို ထည့္ခ်င္တယ္ဆိုရင ္ number ေတြန႕ဲ ေရးလို႕ ရပါတယ ္ …
<style>
www.phoelapyae.com 52
52 ရာမညဖိုးလျပည့္
font-size-adjust: 0.50;
</style>
မိမိစိတ္ႀကိဳက္ ဖြန္႕ Length သတ္မွတ္ခ်င္းကုိလဲ ရွင္းျပၿပီးသားပါ … em, ex, px တို႕ နဲ႕ ေရးနုိင္ပါတယ္ ..
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
ျပန္ေလ့လာၾကည့္ပါ …
Font style
Font style ကေတာ့ သံုးမ်ိဳးရွိပါတယ္ ….. normal , italic , oblique ဆိုၿပီး .. ေရးသားပံုကေတာ့ ..
<style type="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
Output ကုိထုတ္ၾကည့္ပါက ဘယ္လို result ထြက္လဲဆိုတာ ၾကည့္ၿပီး သိနုိင္ပါတယ္ ... က်န္တာကိုေတာ့
ထပ္အေသးစိတ္မေဆြးေႏြးေတာ့ပါဘူး ... Font အပုိင္းကို ဒီေလာက္ပဲေဆြးေႏြးပါ့မယ္ .. လြယ္ပါတယ္ ...