Saturday, November 12, 2016
CSS တည္ေဆာက္ပံု
ဒီအခန္းမွာေတာ့ CSS ရဲ့ တည္ေဆာက္ပံုကို ရွင္းျပပါမယ္၊ ေအာက္မွာ CSS ရဲ့တည္ေဆာက္ပံုပါ၊
Selector {property:value;}
အထက္က တည္ေဆာက္ပံုကို အစိတ္အပိုင္းႏွစ္ပိုင္းခြဲလိုက္မယ္၊ Selector က တစ္ပိုင္း {property:value;} တို႔က တစ္ပိုင္း၊ အခု ပထမအပိုင္းျဖစ္တဲ့
Selector ကိုရွင္းျပမယ္၊
Selector
ွSelect ဆိုတာက မွတ္တာပါ၊ Selector ဆိုေတာ့ မွတ္တဲ့သူေပါ့၊ ဘာေတြကိုမွတ္မွာလဲ ၊ CSS က HTML Document ေတြကို
အလွဆင္ဖို႔အတြက္သံုးမွာဆိုေတာ့ HTML Tags ေတြကိုမွတ္ရပါမယ္၊ ဥပမာ အားျဖင့္ ေအာက္က HTML စာေၾကာင္းကိုၾကည့္ပါ၊
<html>
<body>
<h1>Long time no see, how're you doing?</h1>
</body>
</html>
အထက္က HTML စာေၾကာင္းကို Run ၾကည့္လိုက္ရင္ အေျဖ က ေအာက္ပါအတိုင္း ရမယ္၊
အထက္က စာသားကိုပဲ ပိုျပီးလွသြားေအာင္ CSS သံုးျပီး အလွဆင္ခ်င္ေသးတယ္၊ ဒါဆိုရင္ေတာ့ သင္အလွဆင္ခ်င္တဲ့ အစိတ္အပိုင္းကို မွတ္သားဖို႔လိုပါပီ၊
ဒီေတာ့ အခု အထက္က Long time no see, how’re you doing? ဆိုတဲ့ စာေၾကာင္းကို ဘယ္ HTML Tags က ၀ိုင္းထားလဲဆိုတာကိုၾကည့္လိုက္၊
<h1>Long time no see, how're you doing?</h1>
<h1> ဆိုတဲ့ HTML Tags နဲ႔ ၀ိုင္းထားတယ္၊ ဒီေတာ့ အဲ့ဒီ့ HTML Tag ကို Css မွာ အသံုးျပဳလိုက္မယ္၊ အသံုးျပဳလိုက္မယ္ဆိုတာ CSS ရဲ့ Selector
အျဖစ္သတ္မွတ္လိုက္မယ္လို႔ဆိုလိုတယ္၊ ေအာက္က အတိုင္း
h1 {property:value;}
လို႔မွတ္လိုက္၊ ဒါဆိုရင္ CSS ရဲ့ တည္ေဆာက္ပံုျဖစ္တဲ့ selector { property:value;} ဆိုတဲ့ တည္ေဆာက္ပံုထဲက selector ရဲ့ အစိတ္အပိုင္းမွာ h1 လုိ႔
သတ္မွတ္လိုက္ျပီ၊ အဲ့ဒီ့ h1 က သင္အလွဆင္လိုတဲ့ html Doucment ထဲက Long time no see, how’re you doing? ဆိုတဲ့ စာေၾကာင္းကို ၀ိုင္းထားတဲ့
Tags ကိုညြန္းပါတယ္၊
ဒါကေတာ့ CSS ရဲ့ Selector ကိုအသံုးျပဳပံုပါ၊ သင္အလုပ္လုပ္ အလွဆင္လိုတဲ့ HTML Doucment ထဲက အစိတ္အပိုင္းမွန္သမွ်ကို အဲ့ဒီ့ အစိတ္အပိုင္းေတြကို
၀ိုင္းထားတဲ့ Tags ေတြရဲ့ နာမည္ေတြကိုယူျပီး CSS ရဲ့ Selector အျဖစ္အသံုးျပဳႏိုင္ပါတယ္၊
Property & Value
အခု {property:value;} ဆိုတဲ့ အစိတ္အပိုင္းကိုရွင္းပါမယ္၊ Property ဆိုတာက ပိုင္ဆိုင္မူျဖစ္ျပီး Value က ေတာ့ တန္ဖိုးကို ဆိုလိုပါတယ္၊ Property
တစ္ခုနဲ႔ သူ႔ရဲ့ တန္ဖိုးေတြကို သတ္မွတ္ရာမွာသံုးဖို႔ပါ၊ ဆိုၾကပါစို႔ အေရာင္ လို႔ေျပာရင္ ဘာအေရာင္လဲ၊ အ၀ါလား အနီလား ဆိုတဲ့ တန္ဖိုး
အမ်ိဳးအစားကိုထည့္ေျပာဖို႔လိုပါတယ္၊ အေရာင္တစ္ခုအေနနဲ႔ ဥပမာ ေပးရမယ္ဆိုရင္၊ Property က အေရာင္ ျဖစ္ျပီး value က အဲ့ဒီ့ အရာင္ရဲ့တန္ဖိုး
(ဘာအေရာင္လဲ ) ျဖစ္ပါတယ္၊ အခု အ၀ါအေရာင္ကိုေရးျပမယ္၊
{color : yellow;}
အထက္က css ကုတ္မွာ color က propetiy ျဖစ္ျပီး yellow က value ျဖစ္ပါတယ္၊ ဒီလို အေရာင္တစ္ခု နဲ႔ သူ႔ရဲ့တန္ဖိုးတစ္ခုကိုေပါင္းလိုက္ျပီးေရးတာကို
Decleration တစ္ခုလုပ္တယ္လို႔ေခၚတယ္၊ ေအာက္က ဥပမာ ကိုၾကည့္ပါ၊
h1{color : yellow;}
အထက္က လိုေရးလိုက္ရင္ေတာ့ h1 ဆိုတဲ့ Selector ရဲ့ အေရာင္က အ၀ါေရာင္ျဖစ္တယ္လို႔သတ္မွတ္လိုက္တာပါ၊ အဲ့ဒီ့ Css ကုတ္ကို အထက္က HTMl
ထဲမွာထည့္လိုက္ရင္ Long time no see, how’re you doing? ဆိုတဲ့စာသားက အ၀ါေရာင္ျဖစ္သြားမယ္၊ အေၾကာင္းကေတာ့ သူကို၀ိုင္းထားတဲ့ h1 ကို CSS
နဲ႔ မွတ္ျပီး အ၀ါေရာင္ေျပာင္းထားလို႔၊ ေအာက္မွာၾကည့္။
TMl Doucment ထဲက အစိတ္အပိုင္းတစ္ခုကို CSS သံုးျပီး အလွဆင္ေတာ့မယ္ ဆိုရင္ျဖင့္ အဲ့ဒီ့ အလွဆင္လိုတဲ့ အစိတ္အပိုင္း ရဲ့ HTML Tag ကိုသံုးရမယ္၊
CSS ကိုသံုးရာမွာ အလုပ္လုပ္မယ့္ အစိတ္အပိုင္းကို သတ္မွတ္ရတယ္၊ အဲ့ဒီ့လို အလုပ္လုပ္မယ့္ အစိတ္အပိုင္းကိုသတ္မွတ္တာကို Select
လုပ္တယ္လို႔ေခၚတယ္၊ CSS မွာ Select လုပ္ထားတဲ့ Selector တစ္ခုကို အလွဆင္ရာမွာ အလုပ္လုပ္ရာမွာ property: value ဆိုျပီး သက္ဆိုင္တဲ့အလုပ္ရဲ့
ပိုင္ဆိုင္မူ နဲ႔ တန္ဖိုးကိုသတ္မွတ္ရတယ္၊ အဲ့ဒီ့လို ပိုင္းဆိုင္မူနဲ႔ တန္ဖိုးကို သတ္မွတ္တာကိုDeclar လုပ္တယ္လို႔ေခၚတယ္၊
သတ္မွတ္ထားတဲ့ Selector တစ္ခုကို Declaration လုပ္တဲ့အခါ တစ္ခုပဲ မလုပ္ပဲ ၾကိဳက္သေလာက္ Declar လုပ္လို႔ရတယ္၊ ေအာက္မွာၾကည့္ပါ၊
h1{ color : red;
font-style : italic;
}
အထက္မွာေတာ့ Select လုပ္ထားတဲ့ h1 ကို Declaration ႏွစ္ခုလုပ္ထားတယ္၊ တစ္ခုက စာလံုးအေရာင္ color အနီေရာင္ red နဲ႔ ေနာက္တစ္ခုက စာလံုး
စတိုင္း font-style တစ္ေစာင့္ italic; တို႔ပါ၊
color : red; က တစ္ခု
font-style : italic; က တစ္ခုပါ၊
အထက္က ဥပမာ မွာ Delar ႏွစ္ခုပဲလုပ္ထားတယ္၊ တကယ္ေတာ့ ဘယ္ႏွစ္ခုလုပ္လုပ္ရပါတယ္၊ အေရးတၾကီး သတိထားရမွာကေတာ့ Declare
တစ္ခုလုပ္ပီးတုိင္း ေနာက္က simicolon(;) ထည့္ေပးဖို႔ပါပဲ၊ မပါရင္ေတာ့ မွားကုန္မယ္၊
အထက္က Delcare ႏွစ္ခုလုပ္ထားတဲ့ CSS ကို HTML Document နဲ႔ ခ်ိတ္ျပီး Run လိုက္ရင္ ေအာက္က အတိုင္းစာမ်က္ႏွာကိုေတြ႔ရမယ္၊
ဒီသင္ခန္းစာရဲ့ ရည္ရြယ္ခ်က္က selector {property:value;} တို႔ကိုနာလည္ဖို႔၊ HTML Document ေတြနဲ႔ CSS
ဖိုင္ေတြဘယ္လိုခ်ိတ္မလဲဆိုတာကို ေနာက္အခန္းေတြမွာရွင္းျပမယ္၊ Selector {property: value;} တို႔ကို နာလည္ေအာင္ေလ့လာပါ။
(72 Coder)
Thank You !
ေရာင္ျပန္ေလး(နည္းပညာ)
www.yplitshare.org
