သင္ခန္းစာ-၁
က်ေနာ္လည္းေဘမ႐ွိတာနဲ႔ မတင္ျဖစ္တာၾကာၿပီဗ်ာ
လာမယ့္၄ရက္ေန႔ကစၿပီးေတာ့ skillက်လာဖို႔ templateေတြစဆြဲၾကမယ္ဗ်ာ မ်ားမ်ားလုပ္မွမ်ားမ်ားကြၽမ္းက်င္လာမွာေလ
အဲ့ဒီေနက် က်ေနာ္တင္ေပးတာေတြစဆြဲႏိုင္ဖို႔ ခုcssသင္ခန္းစာေလးတင္မယ္ဗ်ာ ေသခ်ာေလးလိုက္လုပ္ပါခမွ် ဒါမွ ၄ရက္ေန႔မွာတင္မယ့္သင္ခန္းစာကိုလိုက္လုပ္ႏိုင္မွာျဖစ္ပါတယ္
CSSမွာselectorဆိုၿပီး႐ွိပါတယ္ဗ်
Selector{
Properties:value;
}
ဒီလိုေရးပါတယ္ selectorဆိုတာကေတာ့ေရြးခ်ယ္တာေပါ့
ကို styleထည့္ခ်င္တဲ့ေနရာကိုေရြးခ်ယ္လိုက္တာေပါ့
Properties ကေတာ့သတ္မွတ္ခ်က္ ေပါ့ ဥပမာစာအေရာင္သတ္မွတ္မယ္ဆိုcolor ေပါ့ ဒါကpropertiesပါ
valueကတန္ဖိုးပါ စာကိုgreenဆိုတဲ့အစိမ္းေရာင္သတ္မွတ္တယ္ဆိူgreenကvalueပါ
၁။ ။html tag selector
ပထမတစ္ခုအေနနဲ႔html tagကိုselectorအျဖစ္အသံုးျပဳႏိုင္ပါတယ္ခမွ်
body{
background-color:blue;
}
အဲ့မွာဆိုbodyကselectorေပါ့ html tagကိုselectorအျဖစ္အသံုးျပဳလိုက္တာပါ html tag selectorမွာtagေတြအားလံုးကိုတန္းစီေရးလို႔ရပါတယ္ အဲ့လိုတန္းစီေရးဖို႔ၾကားမွာေကာ္မာခံေပးရပါတယ္
body,h1,p,div{
font-size:20px;
color:green;
}
ဒီလိုေရးပါတယ္ ဒါကhtml tag selectorပါ
Css ႏွစ္မ်ိဳး႐ွိပါတယ္ internal cssနဲ႔ external cssဆိုၿပီး႐ွိပါတယ္ internal cssက html document ရဲ႕<head> </head> ၾကားမွာေရးရၿပီး externalကေတာ့ သီးသန္႔ဖိုင္အျဖစ္ေရးၿပီးလင့္နဲ႔ေခၚယူသံူးစြဲတာမ်ိဳးပါ
Css codeေတြကို<style> </style> ဆိုတဲ့tag ၾကားမွာေရးပါတယ္
<html>
<head>
<style type="text/css"rel="stylesheet">
body,p{
background-color:violet;
font-size:20px;
color:green;
}
</style>
</head>
<body>
<p>
type="text/css"ဆိုတာကဒီ
ဒီဖိုင္ေလးကို name.cssလို႔နာမည္ေပးၿပီးဖိုင္တစ္ခုအျဖစ္ save
လိုက္ပါ ပီးရင္ ကိုယ့္ရဲ႕htmlဖိုင္ထဲကိုေခၚယူရမယ့္ပံုစံက
<html>
<head>
<link rel="stylesheet"type="text/css"href="name.css"/>
</head>
<body>
<p>
လြယ္ပါတယ္ <link> ဆိုတဲ့tagကိုအသံုးျပဳၿပီး href=ရဲ႕ေနာက္မွာ css fileရဲ႕နာမည္ကိုထည့္လို္က္တာပါပဲ
hostingမွာဆိုရင္ေတာ့ linkအျပည့္အစံုထည့္ရမွာေပါ့ေနာ္
ဒါကေရးနည္းပါ ေနာက္ထပ္selectorႏွစ္ခုက်န္ပါေသးတယ္
Id selectorနဲ႔ class selectorပါ အဲ့ႏွစ္ခုကိုေနာက္ေန႔တင္ေပးပါမယ္ ပီးရင္ propertiesေတ လာပါမယ္ ပီးရင္ valueေတလာပါမယ္ ေက်းဇူးတင္ပါတယ္
</p>
</body>
</html>
အေပၚကcodeကိုrunၾကည့္လိုက္ပါဦး
No comments:
Post a Comment