CSS (Cascading Style Sheet)

View previous topic View next topic Go down

CSS (Cascading Style Sheet)

Post  emolay on Mon Jun 13, 2011 4:30 am

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}

emolay

Posts : 114
Join date : 2011-06-12
Age : 22

View user profile

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum