HTML,CSS,JS,PHP

Friday, October 21, 2016

CSS'using

CSS(cascading style sheet)

Css ကိုအသံုးျပဳနည္း ၃နည္း႐ွိပါတယ္။
1.In line
2.internal use
3.external use
တို႔ပဲျဖစ္ပါတယ္။
ကြၽန္ေတာ္အဓိက ေျပာခ်င္တာက External use နဲ႔ internal use တို႔ပဲျဖစ္ပါတယ္။inline ကစာေၾကာင္းတေၾကာင္းစီပဲအသံုးျပဳတာမို႔ မေျပာေတာ့ပါဘူးး။

Internal use

Css ကို html ရဲ႕ head tags အတြင္းမွာပဲေရးရမယ္ဆိုတာ ေလ့လာေနသူေတြအသိပါ။
Internal use ကိုဒီလိုေရးရပါတယ္..အမ်ားစုက ဒီနည္းကိုသံုးၾကတယ္၊
<!DOCTYPE html>
          <html>
           <head>
<title>example</title>
   <style type="text/css">
....
....
....
</style>
       </head>

<style> နဲ႔ </style> ၾကားမွာ css codes ေတြထည့္ရပါတယ္။
Example: <style type="text/css">
                  Body {background-color:black;}
                  </style>
Body-selector
Background-color:-properties
Black-value
၃မ်ိဳး႐ွိပါတယ္။
        Internal use က laptop မ႐ွိလဲရပါတယ္။
အခုဟာက body ကို selector ေပးသြားတာပါ။
<style type="text/css">
P
{
color:red;
}
a
{text-decoration:blink;
}
H3
{
Text-align:center;
Background-color:gold;
font-family:Arial;
}
</style>

ၿပီးရင္ေတာ့ body ပိုင္းဆက္ေရးေပါ့။

External use
 သူကက်ေတာ့ <style type....> နဲ႔မစေတာ့ဘူး။
ေရးၿပီးသား css code ေတြကို link ခ်ိတ္ၿပီးသံုးရတာပါ။ကြၽန္ေတာ္ကေတာ့ အဲ့နည္းကိုႀကိဳက္တယ္။
မိမိ pc ထဲမွာ
Notepad open ၿပီး...ပထမဦးဆံုး css codes ေတြေရးပါ။
မေရးျပေတာ့ဘူး။ၿပီးသြားရင္ save as ဆိူၿပီး
example.css နဲ႔သိမ္းပါ။
ေနာက္တခါ notepad open ပါ။
Doctype ကစၿပီး (css မလိုေတာ့) body ပိုင္းေရးပါ။
သို႔ေသာ့္ head tag အတြင္းမွာ လင့္ခ်ိတ္ရမယ္။ခ်ိတ္ပံုက
<link rel="stylesheet" type="text/css" href="example.css">
Example.css ကခုနသိမ္းခဲ့တဲ့ နာမည္ပါ။
အဲ့ဒီ လင့္ကို သင္ေရးမဲ့ html only <head> ၾကားမွာထည့္ပါ။ၿပီးသြားရင္ example2.html နဲ႔ျပန္သိမ္းပါ။ၿပီးရင္ RUN ၾကည့္ပါ။
အားလံုးအဆင္ေျပပါေစ။။👌👌👌

No comments:

Post a Comment