Saturday, November 12, 2016
Id & Class
တကယ္လက္ေတြ႔ ဒီဇိုင္းေရးလာရင္ သင္အသံုးျပဳမွာက HTML Tags Selector ေတြထက္ Id Selectors နဲ႔ Class Selectors ေတြကိုသံုးမွာပါ၊ ဆိုၾကပါစို႔
သင္က HTML tags ငါးမ်ိဳးပါတဲ့ စာေၾကာင္း ငါးေၾကာင္းကို Select မွတ္ခ်င္တယ္၊ HTML Tags က ငါးမ်ိဳးဆိုေတာ့ CSS Selectors အျဖစ္ HTML Tags
ငါးမ်ိဳးလံုးကိုသံုးေနရမယ္၊ ဒါကို Id Selector သံုးျပီး HTMl Document မွာ လိုခ်င္တဲ့အစိတ္အပိုင္းကို သတ္မွတ္ မွတ္သားႏိုင္တယ္၊
ID နဲ႔ Class Selector ေတြကို HTML ရဲ့ <div> tags ေတြနဲ႔ တြဲသံုးတယ္၊ ဥမာ သင္က “dog” ဆိုတဲ့ id နဲ႔ Selector တစ္ခုသတ္မွတ္ခ်င္တယ္ဆိုရင္ျဖင့္
<div id= “dog”> ဆိုျပီးေရးႏိုင္တယ္၊ ေရးပံုက အရင္ဆံုး <div ကိုေရးတယ္၊ အပိတ္ ျမားေလးရဲ့ေရွ႕မွာ id သတ္မွတ္ဖို႔အတြက္ id= “”
လို႔ထည့္တယ္၊ ျပီးရင္ ႏွစ္ထပ္ေကာ္မာ ၾကားမွာ သင္ သတ္မွတ္လိုတဲ့ id နာမည္ကိုသတ္မွတ္ႏိုင္တယ္၊ HTML ရဲ့ block Tags ေတြျဖစ္တဲ့ <div> </div>
တို႔နဲ႔ တြဲမွတ္တဲ့အတြက္ အပိတ္ကိုလဲ ထည့္ေပးရမယ္၊ ပိုျပီးနာမလည္သြားေအာင္ ေအာက္က HTML ဖိုင္ကိုၾကည့္လိုက္၊
<body>
<h1>Long time no see, how're you doing?</h1>
<h2>I am good, and how about ya? </h2>
<p><b> I am just taking one day after anogher, buddy! </b></p>
<p><i> hell of a long day today, isn't it?</i></p>
<br/> make yourself busy and try to pass the time
</body>
အထက္က HTML Code မွာ Element ေကာ Nested Element ေကာ အားလံုးေပါင္း 5 ခုေတာင္ပါတယ္၊ သူတို႔ ေတြကိုတစ္ခုစီ Selector
အျဖစ္မွတ္မယ္ဆိုရင္ 5 ခုေတာင္မွတ္ရမွာ၊ ဒါေပမယ့္ id selector ကိုသံုးျပီး သူတို႔ေတြကို တစ္ခုထဲျဖစ္ေအာင္မွတ္လို႔ရတယ္၊ အခု အေပၚ ဆံုးမွာရွင္းျပခဲ့တဲ့
<div id= “dog”> ဆိုတဲ့ id selector သံုးျပီးမွတ္ျပမယ္၊ ေအာက္မွာ
<body>
<div id= "dog" >
<h1>Long time no see, how're you doing?</h1>
<h2>I am good, and how about ya? </h2>
<p><b> I am just taking one day after anogher, buddy! </b></p>
<p><i> hell of a long day today, isn't it?</i></p>
<br/> make yourself busy and try to pass the time
</div>
</body>
အထကမွာေတာ့ စာေၾကာင္း ငါးေၾကာင္းလံုးကို dog ဆိုတဲ့နာမည္နဲ႔ id မွတ္လိုက္ပီ၊ မွတ္ပံုကို သတ္မွတ္လိုတဲ့ HTML elements ေတြအားလံုးရဲ့ ေရွ႕မွာ
<div id= “dog”> လို႔ေရးတယ္၊ ျပီးေတာ့ အဆံုးမွာ </div> ဆိုျပီး ဖြင့္လိုက္တဲ့ Dog id ကို ျပန္ပိတ္တယ္၊ ဒါကေတာ့ id selector မွတ္နည္းပါ၊
သူ႔ကိုေခၚသံုးမယ္ဆိုရင္လဲ dog ဆိုတဲ့နာမည္နဲ႔ ပဲ ေခၚသံုးႏိုင္ပါတယ္၊ တစ္ခုေတာ့ရွိတယ္ id ေတြကိုေခၚသံုးရာမွာ id နာမည္ရဲ့ေရွ႕မွာ # shash
ထည့္ေပးရတယ္၊ ေအာက္မွာၾကည့္၊
#dog{
color : red;
font-style : italic;
}
အထက္မွာေတာ့ dog လို႔သတ္မွတ္ထားတဲ့ id ကိုေခၚသံုးလိုက္တာ၊ သူ႕ကို HTML ဖိုင္နဲ႔ ခ်ိတ္ျပီး။ Run လုိက္ရင္ id
သတ္မွတ္ထားတဲ့စာေၾကာင္းငါးေၾကာင္းလံုး စာလံုးအနီ နဲ႔ စာလံုး တစ္ေစာင္းေတြအျဖစ္ေျပာင္းသြားမယ္၊ ေအာက္မွာၾကည့္ပါ။
အခု class selector ကိုေလ့လာၾကပါမယ္၊ ေရးပံုကေတာ့ id selector ကိုေရးပံုနဲ႔ အတူတူပါပဲ၊ အသံုးျပဳတဲ့အခါမွာေတာ့ class selector ကအုပ္စုတူတဲ့
element ေတြမွာသံုးတယ္၊ ေအာက္က ဥပမာ ကိုၾကည့္ပါ၊ ရွင္းသြားေအာင္
<ul>
<li class = "change">Landcruiser </li>
<li > Parjedo </li>
<li class = "change">Prado </li>
<li >Surf </li>
<li class = "change">Vigo </li>
<li>Jeep</li>
<li class = "change">Fortuna </li>
<li> Toyota </li>
<li class = "change"> BMW </li>
</div>
အထက္ က စာရင္းမွာ အားလံုးေပါင္း ကားအမ်ိဳးအစား 9 မ်ိဳးရွိပါတယ္၊ သင္ က စာရင္းေတြထဲက တစ္ခုေက်ာ္ ကားအမ်ိဳး အစားေတြကို Select
မွတ္ခ်င္တယ္၊ ဒါဆိုရင္ေတာ့ အုပ္စု တူတဲ့ element ေတြကို Select မွတ္တဲ့နည္း သံုးလို႔ရပါတယ္၊ အားလံုးမွတ္လဲ ရတယ္ေနာ္ အခုေတာ့ တစ္ခုေက်ာ္ကို
class = “change” ဆိုျပီး Select မွတ္ျပလိုက္တာ၊ change ဆိုတဲ့ class ကိုေခၚသံုးခ်င္ရင္ change လို႔ေခၚသံုးရံုပဲ တစ္ခုေတာ့သတိထားရမယ္ class
ကိုေခၚသံုးမွာ ျဖစ္တဲ့အတြက္ သတ္မွတ္ထားတဲ့ class နာမည္ေရွ႕မွာ dot (.) အစက္ေလးထည့္ေပးရမယ္၊ ေအာက္က အတိုင္း
.change{
color : red;
font-style : italic;
}
အထက္က ကုတ္ကို HTML Doucment နဲ႔ ခ်ိတ္ျပီး Run ၾကည့္လိုက္ရင္ေအာက္က အေျဖမ်ိဳးကိုရမယ္၊
ဒီသင္ခန္းစာရဲ့ ရည္ရြယ္ခ်က္ကေတာ့ id နဲ႔ class selector ေတြကိုကိုတိုင္မွတ္သတ္ေအာင္ သင္ၾကားေပးတာပါ၊ ေနာက္ပိုင္း တကယ့္ကို
အသံုးမ်ားမွာျဖစ္တဲ့အတြက္ေသခ်ာေလး နားလည္ေအာင္ေလ့လာပါ၊ ေနာက္အခန္းမွာ HTML Document ေတြနဲ႔ CSS တို႔ ဘယ္လို
ခ်ိတ္ဆက္အသံုးျပဳမလဲဆိုတာကိုသင္ျပေပးမယ္၊
Thank You !
ေရာင္ျပန္ေလး(နည္းပညာ)
www.yplitshare.org
