Building(14), 4th Floor, ,
MICT Park, Hlaing, Yangon.

+95-9-954354445
info@myitedu4u.com

CSS တည္ေဆာက္ပံု

css p04ဒီအခန္းမွာေတာ့ CSS ရဲ့ တည္ေဆာက္ပံုကို ရွင္းျပပါမယ္၊ ေအာက္မွာ CSS ရဲ့တည္ေဆာက္ပံုပါ။

Selector {property:value;}

အထက္က တည္ေဆာက္ပံုကို အစိတ္အပိုင္းႏွစ္ပိုင္းခြဲလိုက္မယ္၊ Selector က တစ္ပိုင္း {property:value;} တို႔က တစ္ပိုင္း၊ အခု ပထမအပိုင္းျဖစ္တဲ့

Selector ကိုရွင္းျပမယ္။

Selector

Select ဆိုတာက မွတ္တာပါ၊ Selector ဆိုေတာ့ မွတ္တဲ့သူေပါ့၊ ဘာေတြကိုမွတ္မွာလဲ ၊ CSS က HTML Document ေတြကို

အလွဆင္ဖို႔အတြက္သံုးမွာဆိုေတာ့ HTML Tags ေတြကိုမွတ္ရပါမယ္၊ ဥပမာ အားျဖင့္ ေအာက္က HTML စာေၾကာင္းကိုၾကည့္ပါ။ 

<html>

<body>

<h1>Welcome to MyITEdu4u, how're you doing?</h1>

</body>

</html>

အထက္က HTML စာေၾကာင္းကို Run ၾကည့္လိုက္ရင္ အေျဖ က ေအာက္ပါအတိုင္း ျမင္ေတြ႔ရပါမည္။

css p01

 

အထက္က စာသားကိုပဲ ပိုျပီးလွသြားေအာင္ CSS သံုးျပီး အလွဆင္ခ်င္ေသးတယ္ ဆိုရင္ေတာ့ သင္အလွဆင္ခ်င္တဲ့ အစိတ္အပိုင္းကို မွတ္သားဖို႔လိုပါၿပီ။

ဒီေတာ့ အခု အထက္က Welcome to MyITEdu4u, how’re you doing? ဆိုတဲ့ စာေၾကာင္းကို ဘယ္ HTML Tags က ၀ိုင္းထားလဲဆိုတာကိုၾကည့္လိုက္ဆိုတဲ့ HTML Tags နဲ႔ ၀ိုင္းထားတယ္၊ ဒီေတာ့ အဲ့ဒီ့ HTML Tag ကို Css မွာ အသံုးျပဳလိုက္မယ္၊ အသံုးျပဳလိုက္မယ္ဆိုတာ CSS ရဲ့ Selector အျဖစ္သတ္မွတ္လိုက္မယ္လို႔ဆိုလိုတယ္။

ေအာက္က အတိုင္း

h1 {property:value;} လို႔မွတ္လိုက္၊ ဒါဆိုရင္ CSS ရဲ့ တည္ေဆာက္ပံုျဖစ္တဲ့ selector { property:value;} ဆိုတဲ့ တည္ေဆာက္ပံုထဲက selector ရဲ့ အစိတ္အပိုင္းမွာ h1 လုိ႔

သတ္မွတ္လိုက္ျပီ၊ အဲ့ဒီ့ h1 က သင္အလွဆင္လိုတဲ့ html Doucment ထဲက Welcome to MyITEdu4u, how’re you doing? ဆိုတဲ့ စာေၾကာင္းကို ၀ိုင္းထားတဲ့ Tags ကိုညြန္းပါတယ္၊

ဒါကေတာ့ CSS ရဲ့ Selector ကိုအသံုးျပဳပံုပါ၊ သင္အလုပ္လုပ္ အလွဆင္လိုတဲ့ HTML Doucment ထဲက အစိတ္အပိုင္းမွန္သမွ်ကို အဲ့ဒီ့ အစိတ္အပိုင္းေတြကို

၀ိုင္းထားတဲ့ Tags ေတြရဲ့ နာမည္ေတြကိုယူျပီး CSS ရဲ့ Selector အျဖစ္အသံုးျပဳႏိုင္ပါတယ္၊

Property & Value

အခု {property:value;} ဆိုတဲ့ အစိတ္အပိုင္းကိုရွင္းပါမယ္၊ Property ဆိုတာက ပိုင္ဆိုင္မူျဖစ္ျပီး Value က ေတာ့ တန္ဖိုးကို ဆိုလိုပါတယ္၊ Property

တစ္ခုနဲ႔ သူ႔ရဲ့ တန္ဖိုးေတြကို သတ္မွတ္ရာမွာသံုးဖို႔ပါ၊ ဆိုၾကပါစို႔ အေရာင္ လို႔ေျပာရင္ ဘာအေရာင္လဲ၊ အ၀ါလား အနီလား ဆိုတဲ့ တန္ဖိုး

အမ်ိဳးအစားကိုထည့္ေျပာဖို႔လိုပါတယ္၊ အေရာင္တစ္ခုအေနနဲ႔ ဥပမာ ေပးရမယ္ဆိုရင္၊ Property က အေရာင္ ျဖစ္ျပီး value က အဲ့ဒီ့ အရာင္ရဲ့တန္ဖိုး

(ဘာအေရာင္လဲ ) ျဖစ္ပါတယ္၊ အခု အနီေရာင္ကိုေရးျပမယ္။

{color : red;}

အထက္က css ကုတ္မွာ color က propetiy ျဖစ္ျပီး red က value ျဖစ္ပါတယ္၊ ဒီလို အေရာင္တစ္ခု နဲ႔ သူ႔ရဲ့တန္ဖိုးတစ္ခုကိုေပါင္းလိုက္ျပီးေရးတာကို

Decleration တစ္ခုလုပ္တယ္လို႔ေခၚတယ္၊ ေအာက္က ဥပမာ ကိုၾကည့္ပါ၊

h1{color : red;}

အထက္က လိုေရးလိုက္ရင္ေတာ့ h1 ဆိုတဲ့ Selector ရဲ့ အေရာင္က အ၀ါေရာင္ျဖစ္တယ္လို႔သတ္မွတ္လိုက္တာပါ၊ အဲ့ဒီ့ Css ကုတ္ကို အထက္က HTMl

ထဲမွာထည့္လိုက္ရင္ Long time no see, how’re you doing? ဆိုတဲ့စာသားက အနီေရာက္ျဖစ္သြားမယ္၊ အေၾကာင္းကေတာ့ သူကို၀ိုင္းထားတဲ့ h1 ကို CSS

နဲ႔ မွတ္ျပီး အနီေရာင္ေျပာင္းထားလို႔၊ ေအာက္မွာၾကည့္လိုက္ပါ ~

<html>

<body>

<Style>

h1 { color: red; }

</Style>

<h1>Welcome to MyITEdu4u, how're you doing?</h1>

</body>

</html>

 css p02

HTML 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 လိုက္ရင္ ေအာက္က အတိုင္းစာမ်က္ႏွာကိုေတြ႔ရမယ္၊

 css p03

ဒီသင္ခန္းစာရဲ့ ရည္ရြယ္ခ်က္က selector {property:value;} တို႔ကိုနာလည္ဖို႔၊ HTML Document ေတြနဲ႔ CSS

ဖိုင္ေတြဘယ္လိုခ်ိတ္မလဲဆိုတာကို ေနာက္အခန္းေတြမွာရွင္းျပမယ္၊ Selector {property: value;} တို႔ကို နားလည္ေအာင္ေလ့လာပါ၊