Selector
CSS မွာ HTML အတြက္ style ေတြေရးလ်င္ ၄င္းတို. ၏ p, body, h1 စသည္ျဖင့္ tagname ကိုသာသံုးျပီး ေရးပါတယ္။ ဥပမာ က်ေနာ္တို. <p> tag အတြက္ CSS မွာ color style အနီေရာင္ ကို ေရးထားတယ္ ဆိုပါေတာ့၊ HTML မွာ ရွိတဲ့ <p> tag ျဖင့္ ေရးထားတဲ့ element ေတြအားလံုး တညီတည္း အနီေရာင္ေတြ ျဖစ္ကုန္ပါတယ္။ ဒီလို problem ေတြမျဖစ္ေအာင္ html tagname ေတြမပာုတ္ပဲ ကိုယ္တိုင္ နာမည္ေပးသတ္မွတ္ ျပီး HTML မွာ Style setting မ်ား ေပါင္းထည့္ လုပ္ေဆာင္ျခင္းကို selection လို.ေခၚပါတယ္။ အဲဒီလို လုပ္ေဆာင္ႏိုင္ဖို. Selector ပံုစံ ၂ မ်ိုဳးကို css က ဖန္တီးေပးထားပါတယ္။ ၄င္းတို.မွာ id selector ႏွင့္ class selector တို.ျဖစ္ပါတယ္။The id Selector
- Each element can have one ID
- Each page can have only one element with that ID
Example:
<!DOCTYPE html><html>
<head>
<style>
#center
{
text-align:center;
color:red;}
</style>
</head>
<body>
<p id="center">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
The class Selector
- Can use the same class on multiple elements
Example:
<!DOCTYPE html><html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This is heading</h1>
<p class="center">This is paragraph </p>
</body>
</html>
HTML elements ေတြကို class selector ျဖင့္ တိက်တဲ့သတ္မွတ္ခ်က္ေတြလုပ္လို. ရပါတယ္။
ဥပမာ p.center {text-align: center:} လို. Style ကို ေရးထားတယ္ဆိုပါစို. တစ္ျခား tag တစ္ခုကေန class="center" ျဖင့္ ယူသံုးလ်င္ affect အျဖစ္ပါဘူး။ <p> tag ကေန class=”center” အေနနဲ.သံုးမွတာ အက်ိဳးသက္ေရာက္ပါတယ္။ ေအာက္က example ေလးကို ေလ့လာၾကည့္ပါ။
Example:
<!DOCTYPE html><html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>
Note: HTML element တစ္ခုတည္းအတြက္ဆိုလ်င္ id selector ကိုသံုးျပီး HTML element မ်ားအၾကိမ္ၾကိမ္ အသံုးျပဳခ်င္လ်င္္ class selector ကိုသံုးရပါတယ္။
No comments:
Post a Comment