* CSS ဆိုတာ Cascading Style Sheets ရဲ႕ အတိုေကာက္ပါ...။
* HTML elements (HTML ရဲ့အစိတ္အပိုင္းေတြ) ကို ကြန္ပ်ဴတာ Screen မွာဘယ္လို ေဖာ္ျပရမယ္ဆိုတာကို Style Sheet က ၫႊန္ျပပါတယ္..။
* Style ေတြဟာ ျဖစ္တတ္တဲ့ ျပသနာေတြကို ေျဖရွင္းဖို႔ HTML 4.0 ကေနစၿပီး ေပါင္းထည့္လာတာျဖစ္ပါတယ္...။
* External Style Sheet မ်ားဟာ HTML Code ေရးရတဲ့အလုပ္ကို အမ်ားႀကီးသက္သာေစတယ္...။
* Style ေတြရဲ့ အဓိပၸါယ္ဖြင့္ဆိုခ်က္ အေျမာက္အျမားဟာ ရလဒ္ (လွပတဲ့ Web Page) တခုကို ေပါင္းစည္းျဖစ္ေပၚေစတယ္...။
CSS syntax (၀ါက်ဖြဲ႕စည္းပံု/ေရးသားရန္သတ္မွတ္ခ်က
CSS ကို
tag ေတြၾကားထည့္ၿပီး HTML ရဲ့ အေရွ႕မွာ ထည့္ေရးရပါတယ္..
HTML Code:
CSS ကို အပိုင္း (၃) ပိုင္းနဲ႔ ဖြဲ႕စည္းထားပါတယ္...
A seletor = ေခါင္းစဥ္ပိုင္းလို႔အလြယ္ေခၚမယ္..
A property = ဂုဏ္သတၱိပိုင္းလို႔ အလြယ္ေခၚမယ္...
A value = တန္ဖိုးပိုင္းလို႔ အလြယ္ေခၚမယ္...
အဲဒီေတာ့ CSS ကို ဒီလိုဖြဲ႕စည္းတယ္...
HTML Code:
selector {property: value}
ေခါင္းစဥ္ {ဂုဏ္သတၱိ: တန္ဖိုး}
(Style ရဲ႕ေခါင္းစဥ္ကို ႐ိုက္မယ္.. ၿပီးရင္ Space တခ်က္ပုတ္မယ္ { ကို႐ိုက္မယ္။ သူ႕ရဲ့ဂုဏ္သတၱိ၊ ဥပမာ color/font အစရွိတဲ့ ဟာေတြ ႐ိုက္မယ္။ : ကို႐ိုက္မယ္။ ၿပီးရင္ Space တခ်က္ထပ္ပုတ္မယ္။ ကိုယ္လိုခ်င္တဲ့တန္ဖိုးကို ႐ိုက္မယ္..။ ၿပီးရင္ } ကို ႐ိုက္မယ္။ ဒါဆိုရင္ Style တစ္ခုကို ေရးၿပီးသြားၿပီေပါ့။)
ဥပမာ-
HTML Code:
body {background-color: green}
အလုပ္လုပ္ပံုေလးကေတာ့
Seletor က သင္ ပံုစံေျပာင္းခ်င္တဲ့ HTML element ဒါမွမဟုတ္ tag တခု ရဲ့အမည္ပါပဲ။ အေပၚမွာ body လို႔ျပထားေတာ့ သင့္ Web စာမ်က္ႏွာတိုင္းရဲ့ body ပိုင္းမွန္သမွ်ကို အက်ိဳးသက္ေရာက္ေစမွာပါ။ Property က ကိုယ္ျဖစ္ခ်င္တဲ့ ပံုစံပါ.. ဥပမာ background-color: ဆိုေတာ့ ေနာက္ခံအစိမ္းေရာင္ေျပာင္းခ်င္တဲ့သေဘာေပါ့ ။ Value ကေတာ့ ကိုယ္ထားခ်င္တဲ့တန္ဖိုးပါ။ ဥပမာ color: green ဆိုေတာ့ အစိမ္းေရာင္လို႔ သတ္မွတ္ေပးတာေပါ့။
မွတ္ခ်က္။ Value ဟာ စာလံုးတစ္လံုးထက္ပိုေနရင္ေတာ့ double Quote ႏွစ္ခုထဲ ထည့္ေရးပါ။
HTML Code:
p {font-family: "sans serif"}
မွတ္ခ်က္။ Property ပိုင္းမွာ တစ္ခုထက္ပိုၿပီးထည့္ခ်င္ရင္ေတာ့ ဆီမီးေကာ္လံ ( ; ) ေလး ထည့္ၿပီး ေရးရပါတယ္။
HTML Code:
p {text-align:center;color:red}
Style ေတြရဲ့ Code ေတြကိုေရးရာမွာ အမွားျပန္ရွာလို႔လြယ္ေအာင္ သပ္သပ္ရပ္ရပ္ စနစ္ကေလးထားၿပီး ေရးသင့္ပါတယ္.. Readable ျဖစ္ေအာင္ေပါ့ေနာ္... ဒီလိုေလးတေၾကာင္းခ်င္း ရွင္းရွင္းေရးဖို႔ ေျပာတာ -
HTML Code:
HTML Code:
h1,h2,h3,h4,h5,h6
{
color: green
}
Grouping
Selector ေတြကို Style တူရာစုကာ အုပ္စု (Group) တစ္ခု ဖြဲ႕ၿပီးေရးႏိုင္ပါတယ္..။ ဒီလိုေရးမယ္ဆိုရင္ေတာ့ Selector တစ္ခုစီကို ေကာ္မာ ( , ) ခံၿပီး ေရးေပးရမွာပါ။
ေအာက္က ဥပမာမွာ ကၽြန္ေတာ္တို႔ဟာ ေခါင္းစဥ္ (heading) အစိတ္အပိုင္းေတြကို အုပ္စု တစုအျဖစ္ ေရးလိုက္တာပါ။ ဒီလိုေရးလိုက္ျခင္းအားျဖင့္ ေခါင္းစဥ္အရြယ္အစားအားလံုးကို အစိမ္းေရာင္စာလံုးနဲ႔ ေဖာ္ျပေစမွာျဖစ္ပါတယ္။ Code ေတြ အမ်ားႀကီးေရးစရာမလိုေတာ့ပဲ ဒီတခ်က္ထဲနဲ႔ ေခါင္းစဥ္အားလံုးကို အညႇာကိုင္လိုက္တဲ့သေဘာပါ။
Class Selector (Selector ကို ပံုစံခြဲၿပီးေရးျခင္း)
Class Selector ကို သံုးျခင္းအားျဖင့္ HTML element (အစိတ္အပိုင္း) တခုထဲမွာကို Style ေတြ အမ်ိဳးမ်ိဳးခြဲေရးလို႔ ရပါေသးတယ္တဲ့...
ဆိုလိုတာက Web စာမ်က္ႏွာတစ္ခုထဲမွာပဲ စာပိုဒ္ေတြကို စတိုင္ ႏွစ္မ်ိဳးသံုးၿပီးေရးခ်င္တယ္... တမ်ိဳးက စာပိုဒ္ ဘယ္ညႇိ အေနအထား၊ ေနာက္တစ္မ်ိဳးက စာပိုဒ္ ညာညႇိအေနအထား .. ဒီလိုမ်ိဳးလိုခ်င္လာၿပီဆိုရင္ Class Seletor ကိုသံုးျခင္းျဖင့္ရႏိုင္ပါတယ္... ေအာက္မွာၾကည့္ပါ...
HTML Code:
p.right {text-align: right}
p.center {text-align: center}
Style ပိုင္းမွာ အဲဒီလို Class Selector ေရးခဲ့ၿပီးရင္ အဲဒီ Style ကို ျပန္ေခၚသံုးဖို႔အတြက္ Body ပိုင္းက်ေတာ့ ဒီလိုေလးေခၚသံုးရတယ္...
HTML Code:
This paragraph will be right-aligned.
This paragraph will be center-aligned.
မွတ္ခ်က္။ အဲဒါအျပင္ေပါ့ေလ.. element တခုစီအတြက္ ေရးထားတဲ့ class Selector ရဲ့ ဂုဏ္သတၱိအျပင္ ပိုၿပီးလိုခ်င္ေသးရင္ေတာ့...
ဒီလိုေလးေရးၾကည့္ပါအံုး...
HTML Code:
This is a paragraph.
အေပၚက ကုတ္ကေလးက Calss center ေၾကာင့္ အလယ္ညႇိစာပိုဒ္ကေလးရတဲ့အျပင္ Bold ေလးလည္း အပိုေဆာင္းတင္ေပးထားတာကို ေတြ႔ရမယ္ဗ်...
အခုေရးခဲ့ေပးတာကေတာ့ စာပိုဒ္ေတြအတြက္ class ေရးတာေပါ့ေနာ္.. ဆိုလိုတာက p.center လို႔ ေရးတဲ့အတြက္ စာပိုဒ္အတြက္ပဲ အလယ္ညႇိ သက္ေရာက္မႈ ရွိပါတယ္.. ကၽြန္ေတာ္တို႔က အဲဒီထက္ကို ပိုၿပီး သံုးခြင့္ရအံုးမလား ဆိုရင္... ရပါေသးတယ္..
အေပၚမွာေရးခဲ့တဲ့ Class Selector ထဲက Selector ကို ခ်န္ခဲ့ၿပီး Class သက္သက္ကိုပဲ ေရးလို႔ရွိရင္ ဘယ္လိုေနမလဲ...
HTML Code:
.center {text-align: center}
အဲဒီ ကုတ္ကေလးကို ေအာက္မွာျပထားတဲ့အတိုင္း body ကေနေခၚသံုးရင္.. heading ပိုင္းေရာ စာပိုဒ္ေရာ မတူတဲ့ element ႏွစ္ခုလံုး အလယ္ညႇိသြားတာကို ေတြ႔ရမယ္...
HTML Code:
This heading will be center-aligned
This paragraph will also be center-aligned.
တခုေတာ့ရွိတယ္ဗ်.. Class name ရဲ့အစကို ကိန္းဂဏန္းေပးထားလို႔မရဘူး.. ေပးထားရင္ Mozila Firefox မွာ အလုပ္မလုပ္ဘူး
၀န္ခံခ်က္.......................ကိုအာကာၿဖိဳး ဆိုဒ္မွေ၀မွ်သည္။
HtunKyawOo 09256375318
إرسال تعليق