CSS (Cascading Style Sheet)
Page 1 of 1
CSS (Cascading Style Sheet)
web development တစ္ေယာက္ျဖစ္ဖို ့အတြက္မရွိမျဖစ္အလိုအပ္ဆုံးကေတာ့ CSS ကိုလဲ သိဖို ့လိုအပ္ပါတယ္ မန္ဘာမ်ားအေနနဲ ့ကလဲ မိမိတို ့သိသမွ်ေလးေတြ
ေ၀မွ်ေပးဖို ့ဖိတ္ေခၚပါတယ္....
အျမည္းေလးေကၽြးမယ္..ဟဲဟဲ CSS မွာသုံးနည္းကမ်ားၾကီးမရွိပါဘူး...
Internal CSS
External CSS
Inline
Class & ID
အဲ့လိုေရးနည္းေလးေတြရွိပါတယ္....
INTERNAL CSS
ဆိုတာ ၀က္ေပ့ထဲမွာ ရိွတဲ့ head ထဲမွာ ထည့္ၿပီးသံုးရတာပါ။
head ထဲမွာ <style>{}</style> ဆိုၿပီးေတာ့ ထည့္ၿပီးေရးတာပါ
EXTERNAL CSS
ဆိုတာ CSS ေတြေရးထားတဲ့ ကုဒ္ေတြကို တစ္ၿခား notepad တစ္ခုနဲ ့ HTML ၀က္ေပ့ကို ခ်ိတ္ေပးတာၿဖစ္ပါတယ္။
CSS ေတြေရးထားတဲ့ကုဒ္ေတြ ရိွတဲ့ notepad တစ္ခုတည္းက အလုပ္မလုပ္ပါဘူး
CSS အတြက္ေရးထားတဲ့ကုဒ္ေတြကို notepad မွာမွတ္ရတဲ့အခါ .css နဲ ့မွတ္ရပါမယ္
ေမာစ္တင္လိုက္တဲ့အခ်ိန္မွာ စာလံဳးပံုစံေၿပာင္းသြားတာတို ့ ေမာစ္ကိုဖိထားလို ့ရိွရင္ တစ္ပံု ေမာစ္ကိုလြတ္လိုက္ရင္ တစ္ပံု ပံုစံအမ်ိဳးမ်ိဳးေၿပာင္းေစရန္အတြက္ ဒီ Css code ၄ ခုလံဳးကိုသံုးရပါတယ္
.aa:link:ဒါကေတာ့ ၀က္ေပ့ေပၚမွာမူလရီွေနတဲ့ စာလံုးသို ့မဟုတ္ ပံုရဲ့ အေနအထားကို ခ်ိတ္ဆက္ဖို ့အတြက့္ code ၿဖစ္ပါတယ္
.aa:visited: ဒါကေတာ့ ေမာစ္ ႏွိပ္ထားတဲ့ အေၿခအေန မွာ ၿဖစ္ပါတယ္
.aa:hover: စာလံုးသို ့မဟုတ္ ပံုေပၚတင္လိုက္တဲ့အခ်ိန္မွာ ခ်ိတ္ဆက္တဲ့လင့္ၿဖစ္ပါတယ္
.aa:active:လင့္တစ္ခုအလုပ္လုပ္ၿပီးတဲ့အခ်ိန္မွာေပၚတဲ့လင့္ၿဖစ္ပါတယ္
HTML ဆို <html> စၿပီး</html>နဲ႕ ဆံုးသလို CSS မွာလဲ <style>CSS</style>ဆိုၿပီးေရးပါတယ္။ ေနာက္တစ္ခု
မွတ္ထားရမွာကေတာ ႔ CSS Style code ဟာ head tag အတငြ ္းမွာပ ဲ ရိွရပါမယ။္ CSS စေရးမယ္ဆိုၿပီး
ဒီလိုေၾကာ္ျငာရပါတယ္။ </title> ၿပီးေတာ႔ </head> မဆံုးမီ ၾကားမွာေရးရမယ္။ဆိုလုိတာက </title> နဲ႕ </head>
ၾကားမွာ CSS style code ကိုေၾကာ္ျငာေပးရမွာပါ။ ဒီလိုေလးပါ ။
<head><title>My Test</title>
<style type=text/css>
<style>
</head>
CSS ကုိေရးမယ္ဆိုရင္ သူ႕ ရဲ႕ ေရးထံုးစည္းမ်ဥ္းကေတာ့
selector {property: value} ပါ။ အဲဒါကုိ ေရးမယ္ဆိုရင္
body {background-color: black}
ဒီေနရာမွာ
body -- > selector
property-- > backgroun-color
value -- > black
ျဖစ္ပါတယ္။ ေနာက္ပိုင္း အေခၚအေ၀ၚေတြ သံုးရင္ selector ၊ property ၊ value ေတြနဲ႕ သံုးမွာမို႕လို႕
ဘာကုိဆိုလိုတယ္သိေအာင္ မွတ္ထားဖို႕ လိုပါတယ္။
body {backgroun-color: black} အလုပ္လုပ္ပံုကေတာ့ body လို႕ ေရးထားတဲ့အတြက္ web pages တိုင္းရဲ႕ body
တိုင္းကို ေနာက္ခံအေရာင္ အမဲေရာင္အေနနဲ႕ သက္ေရာက္မွာ ျဖစ္ပါတယ္။
အစိမ္းေရာင္ထည့္ခ်င္တယ္ဆိုရင္ body {backgroun-color: green} ေပါ့။
တကယ္လို႕ value တန္ဖိုးဟာ စာလံုးတစ္လံုးထက္ပိုေနရင္ Double Quote အတြင္းထည့္ေရးပါတယ္။
P {font-family: “sans serif”}
ထို႕ နည္းအတူပဲ property မွာလဲ တစ္ခုထက္ပိုၿပီးထည့္ခ်င္ရင္ ( ; ) ေလး ထည့္ေရးရပါတယ္။
P {text-align:center; color: red}
ေ၀မွ်ေပးဖို ့ဖိတ္ေခၚပါတယ္....
အျမည္းေလးေကၽြးမယ္..ဟဲဟဲ CSS မွာသုံးနည္းကမ်ားၾကီးမရွိပါဘူး...
Internal CSS
External CSS
Inline
Class & ID
အဲ့လိုေရးနည္းေလးေတြရွိပါတယ္....
INTERNAL CSS
ဆိုတာ ၀က္ေပ့ထဲမွာ ရိွတဲ့ head ထဲမွာ ထည့္ၿပီးသံုးရတာပါ။
head ထဲမွာ <style>{}</style> ဆိုၿပီးေတာ့ ထည့္ၿပီးေရးတာပါ
EXTERNAL CSS
ဆိုတာ CSS ေတြေရးထားတဲ့ ကုဒ္ေတြကို တစ္ၿခား notepad တစ္ခုနဲ ့ HTML ၀က္ေပ့ကို ခ်ိတ္ေပးတာၿဖစ္ပါတယ္။
CSS ေတြေရးထားတဲ့ကုဒ္ေတြ ရိွတဲ့ notepad တစ္ခုတည္းက အလုပ္မလုပ္ပါဘူး
CSS အတြက္ေရးထားတဲ့ကုဒ္ေတြကို notepad မွာမွတ္ရတဲ့အခါ .css နဲ ့မွတ္ရပါမယ္
ေမာစ္တင္လိုက္တဲ့အခ်ိန္မွာ စာလံဳးပံုစံေၿပာင္းသြားတာတို ့ ေမာစ္ကိုဖိထားလို ့ရိွရင္ တစ္ပံု ေမာစ္ကိုလြတ္လိုက္ရင္ တစ္ပံု ပံုစံအမ်ိဳးမ်ိဳးေၿပာင္းေစရန္အတြက္ ဒီ Css code ၄ ခုလံဳးကိုသံုးရပါတယ္
.aa:link:ဒါကေတာ့ ၀က္ေပ့ေပၚမွာမူလရီွေနတဲ့ စာလံုးသို ့မဟုတ္ ပံုရဲ့ အေနအထားကို ခ်ိတ္ဆက္ဖို ့အတြက့္ code ၿဖစ္ပါတယ္
.aa:visited: ဒါကေတာ့ ေမာစ္ ႏွိပ္ထားတဲ့ အေၿခအေန မွာ ၿဖစ္ပါတယ္
.aa:hover: စာလံုးသို ့မဟုတ္ ပံုေပၚတင္လိုက္တဲ့အခ်ိန္မွာ ခ်ိတ္ဆက္တဲ့လင့္ၿဖစ္ပါတယ္
.aa:active:လင့္တစ္ခုအလုပ္လုပ္ၿပီးတဲ့အခ်ိန္မွာေပၚတဲ့လင့္ၿဖစ္ပါတယ္
HTML ဆို <html> စၿပီး</html>နဲ႕ ဆံုးသလို CSS မွာလဲ <style>CSS</style>ဆိုၿပီးေရးပါတယ္။ ေနာက္တစ္ခု
မွတ္ထားရမွာကေတာ ႔ CSS Style code ဟာ head tag အတငြ ္းမွာပ ဲ ရိွရပါမယ။္ CSS စေရးမယ္ဆိုၿပီး
ဒီလိုေၾကာ္ျငာရပါတယ္။ </title> ၿပီးေတာ႔ </head> မဆံုးမီ ၾကားမွာေရးရမယ္။ဆိုလုိတာက </title> နဲ႕ </head>
ၾကားမွာ CSS style code ကိုေၾကာ္ျငာေပးရမွာပါ။ ဒီလိုေလးပါ ။
<head><title>My Test</title>
<style type=text/css>
<style>
</head>
CSS ကုိေရးမယ္ဆိုရင္ သူ႕ ရဲ႕ ေရးထံုးစည္းမ်ဥ္းကေတာ့
selector {property: value} ပါ။ အဲဒါကုိ ေရးမယ္ဆိုရင္
body {background-color: black}
ဒီေနရာမွာ
body -- > selector
property-- > backgroun-color
value -- > black
ျဖစ္ပါတယ္။ ေနာက္ပိုင္း အေခၚအေ၀ၚေတြ သံုးရင္ selector ၊ property ၊ value ေတြနဲ႕ သံုးမွာမို႕လို႕
ဘာကုိဆိုလိုတယ္သိေအာင္ မွတ္ထားဖို႕ လိုပါတယ္။
body {backgroun-color: black} အလုပ္လုပ္ပံုကေတာ့ body လို႕ ေရးထားတဲ့အတြက္ web pages တိုင္းရဲ႕ body
တိုင္းကို ေနာက္ခံအေရာင္ အမဲေရာင္အေနနဲ႕ သက္ေရာက္မွာ ျဖစ္ပါတယ္။
အစိမ္းေရာင္ထည့္ခ်င္တယ္ဆိုရင္ body {backgroun-color: green} ေပါ့။
တကယ္လို႕ value တန္ဖိုးဟာ စာလံုးတစ္လံုးထက္ပိုေနရင္ Double Quote အတြင္းထည့္ေရးပါတယ္။
P {font-family: “sans serif”}
ထို႕ နည္းအတူပဲ property မွာလဲ တစ္ခုထက္ပိုၿပီးထည့္ခ်င္ရင္ ( ; ) ေလး ထည့္ေရးရပါတယ္။
P {text-align:center; color: red}
emolay- Posts : 114
Join date : 2011-06-12
Age : 29
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|