Intro
CSS ဆိုတာကတော့ Web Essential ပိုင်းမှာ မသိမဖြစ် လိုအပ်ပါတယ်။ Web ပိုင်းမှာ HTML တစ်ခုတည်းတတ်နေရုံနဲ့ မရပါဘူး။ HTML က သင့် site တစ်ခုလုံးကို လှသွားအောင် ဆောက်ရွက်ပေးနိုင်မှာမဟုတ်ဘူး။ CSS ကို HTML တတ်ပြီးတဲ့သူတိုင်း အလွယ်တကူ လေ့လာနိုင်ပါတယ်။ ကျွန်တော်တို့တွေ Internet website တွေမှာ မြင်နေရတဲ့ site တွေ အားလုံးဟာ CSS ကို အသုံးပြုထားပါတယ်။ HTML နဲ့ တည်ဆောက်ပြီး လှပအောင် တန်ဆာဆင်ဖို့ CSS ကို လေ့လာထားဖို့လိုအပ်ပါတယ်။
ကျွန်တော့်အနေနဲ့လည်း ဘယ်လိုရေးရလဲဆိုတဲ့ အခြေခံနဲ့ ဘာတွေ ရှိတယ်။ ဘာတွေ သုံးလို့ရလဲဆိုတော့ ကိုပဲ ရှင်းပြပေးနိုင်ပါတယ်။ CSS ဟာကျယ်ပြန့်ပြီးတော့ ကိုယ့် အတွေးအခေါ် ကိုယ့် design ပေါ်မှာ မူတည်ပြီး site ရဲ့ design ကလည်း ပြောင်းလဲသွားတာပါ။
Chapter 1: CSS Basic
CSS Syntax
CSS ကို ရေးသားပုံက HTML နဲ့ မတူတော့ ပဲ ရေးသားပုံတွေ ကွာခြားသွားပါတယ်။ css code လေးကို ကြည့်ရအောင်။
Selector ကတော့ ကိုယ် ဘာဟာကို CSS အသုံးပြုမလဲဆိုတာကို ပြောတာပါ။ အခု h1 ဆိုတဲ့ tag ကို select လုပ်ထားလိုက်တာပါ။ Declaration က တစ်ခုထက် ပိုထည့်နိုင်ပါတယ်။ တစ်ခု ဆုံးတိုင်း ; လေး ထည့်ပေးရပါတယ်။ Property နဲ့Value ရှိပါတယ်။ ကျွန်တော်တို့ HTML မှာတုန်းက attribute နဲ့ value ထည့်သလိုပေါ့။ property နဲ့ value ကို : လေး ခံပြီး ထည့်ပါတယ်။
color:blue; font-size:12px;
ဆိုတဲ့ သဘောက စာလုံးအပြောရောင် စာလုံးအရွယ် 12 px လို့ဆိုလိုက်တာပါ။
ဥပမာ။ အောက်က code လေးကို notepad မှာ ရေးပြီး စမ်းကြည့်လိုက်ပါ။
<html><head><title>CSS</title>
<style type="text/css">
p { color: red;}
</style>
</head>
<p>Hi! I am red.</p>
</html>
အဲဒါလေးကို save သိမ်းပြီး firefox နဲ့ ဖွင့်လိုက်ရင် အောက်ကပုံလို မြင်ရပါလိမ့်မယ်။
CSS ရေးမယ်ဆိုရင် နဲ့ စပြီး နဲ့ ဆုံးတဲ့ ကြားထဲမှာ ရေးရပါတယ်။ အများအားဖြင့်တော့ နဲ့ ကြားထဲမှာ ရေးရပါတယ်။
Comment
HTML မှာတုန်းကလည်း comment လုပ်ပုံပြောခဲ့ပါတယ်။ HTML comment ဆိုရင် နဲ့ရေးခဲ့တာ မှတ်မိအုံးမယ်ထင်ပါတယ်။ CSS မှာလည်း comment ရေးလို့ရပါတယ်။ သူကိုတော့ ဒီလိုရေးပါတယ်။
/* This is comment */
/* နဲ့ စပြီး */ ဆုံး ပါတယ်။ ကြားထဲမှာ comment ရေးရတာပါ။
Selector
အပေါ်မှာ ကျွန်တော် ပြောခဲ့ဘူးပါတယ်။ Selector အကြောင်းပါ။ Select မှာ HTML element တွေ ဖြစ်တဲ့ p , h3 စတာတွေ သုံးလို့ရသလို id နဲ့class ကိုလည်း သုံးလို့ရပါတယ်။ HTML attribute မှာ id နဲ့class ဆိုတာ ရှိပါတယ်။
ID Selector
ကျွန်တော်တို့ html attribute id ဆိုတာကို ထည့်ပြီး အဲဒါကို css မှာ တွဲသုံးနိုင်ပါတယ်။ ဥပမာကို အောက်က code ကို လေ့လာကြည့်လို်က်ပါ။
<html>
<head>
<title>CSS</title>
<style type="text/css">
#red_id { color: red;}
</style>
</head>
<p id="red_id">Hi! I am red id.</p>
<p >Hi! I am normal.</p>
</html>
အဲဒါလေးကို browser နဲ့ဖွင့် လိုက်ရင် အောက်ကလို မြင်ရပါမယ်။
id မှာ red_id ဆိုပြီးရေးထားပါတယ်။ အဲဒါကို ပြန်ခေါ်ဖို့ CSS မှာ #red_id နဲ့ပြန်ခေါ်ထားတာကို တွေ့မှာပါ။ အရင်တုန်းကတော့ p ဆိုတဲ့ html tag ကို ခေါ်ခဲ့ပေမယ့် အခု တစ်ခုထဲကို သီးသန့်ခေါ်ချင်တော့ id ပေးပြီး ခေါ်လိုက်တာပါ။
Class Selector
id လိုပဲ HTML attribute တစ်ခုဖြစ်တဲ့ class ဆိုတာကို သုံးနိုင်ပါတယ်။ id ကတော့ အများအားဖြင့် တစ်ခုတည်းကို နာမည်သဘောမျိုး identify သဘောမျိုးနဲ့ပေးတတ်ကြပြီး class ကတော့ အများကို ကိုယ်စားပြုတဲ့အနေနဲ့ပေးပါတယ်။ class ကိုလည်း id လိုမျိုးပဲ အသုံးပြုနိုင်ပါတယ်။ အောက်က code လေးကို ကြည့်လိုက်ပါ။
<html>
<head>
<title>CSS</title>
<style type="text/css">
.red_class { color: red;}
</style>
</head>
<p class="red_class">Hi! I am red class.</p>
<p> Hi! I am normal.</p>
<p class="red_class">Hi! I am red class.</p>
</html>
အဲဒါဆိုရင် Hi! I am red class ဆိုတဲ့ စာလုံးတွေက နီနေတာကို တွေ့မှာပါ။ ဒါလေးကိုတော့ ကိုယ်တိုင် စမ်းကြည့်နိုင်ပါတယ်။ ပုံလေးတော့ မပြတော့ဘူး။ အတူတူပဲမို့ပါ။ class ကို dot(.) ရှေ့မှာ ထားပြီး ရေးပါတယ်။ class ကို နောက်တစ်မျိုးရေးလို့ရပါတယ်။ ဥပမာ p tag မှာ သုံးထားတဲ့ class ဆိုရင်
p.red_class { color: red;}
ဆိုပြီး ရေးလို့ရပါတယ်။ h3 မှာ သုံးထားရင်
h3.red_class { color: red;}
ဆိုပြီးရေးလိုက်ရုံပါပဲ။ အောက်က code လေးကို ကြည့်လိုက်ပါ။
<html>
<head>
<title>CSS</title>
<style type="text/css">
h3.red_class { color: red;}
</style>
</head>
<h3 class="red_class">Hi I am H3</h3>
<p class="red_class">Hi! I am red id.</p>
<p> Hi! I am normal.</p>
<p class="red_class">Hi! I am red id.</p>
</html>
အဲဒါကို ဒီလိုလေး ထွက်လာမှာပါ။
p မှာ red_class လို့ထည့်ထားပေမယ့် css မှာ h3.red_class လို့ရေးထားပါတယ်။ red_class လို့ ကြေငြာထားတဲ့ h3 ကိုပဲ select လုပ်မယ်လို့ ဆိုလိုတာပါ။
CSS ဘယ်လိုထည့်မလဲ။
အပေါ်မှာတုန်းက ကျွန်တော် ပြောခဲ့ပါတယ်။ CSS ဘယ်လို ထည့်သွင်းရမယ်ဆိုတာကိုပေါ့။
နဲ့ ကြားမှာ style tag နဲ့ ထည့်တယ်လို့။ အဲဒါအပြင် အခြား ၂ နည်းရှိပါသေးတယ်။ စုစုပေါင်း ၃ မျိုးထည့်သွင်းလို့ရပါတယ်။- Internal Style Sheet
- Inline Stye Sheet
- External Style Sheet
Internal Style Sheet
ကျွန်တော်တို့ internal Style Sheet အကြောင်းပြောခဲ့ပြီးပါပြီ။ အပေါ်မှာ သုံးခဲ့တာတွေ အားလုံးက Internal style sheet သဘောတရားတွေပါ။
Inline Style Sheet
ကျွန်တော်တို့တွေအနေနဲ့ တစ်ခါတစ်လေမှာ style sheet တစ်ခုတည်းကို html tag ထဲတွဲသုံးချင်တဲ့အခါမှာ သုံးလို့ရအောင်ပါ။သူ့ကို ဒီလိုရေးပါတယ်။
<p style="color:red"> Hi! I am red.</p>
အဲဒါဆိုရင် Hi! I am red က အနီရောင်လေး ဖြစ်သွားတာကို တွေ့မှာပါ။ ကျွန်တော်တို့တွေအနေနဲ့ အချို့အခါတွေမှာ class တို့ id တို့ မကြေငြာပဲ ရေးချင်တဲ့အခါတွေ မှာ အသုံးပြုနိုင်ပါတယ်။
External Style Sheet
Internal Style Sheet က page တစ်ခုတည်းအတွက် အဆင်ပြေပေမယ့် page တွေက တစ်ခုထက်မက သုံးမယ်။ ဒီ style ပဲ သုံးမယ်ဆိုရင် Internal Style Sheet က အဆင်မပြေတော့ပါဘူး။ HTML အသစ် တစ်ခုဆောက်တိုင်း copy paste လိုက်လုပ်ရမယ်။ တစ်နေရာမှာ ပြောင်းလိုက်တိုင်း HTML files အားလုံးမှာ လိုက်ပြောင်းရမယ်။ အဲလို အခါ အဆင်မပြေတော့ဘူး။ ဒါကြောင့် HTML files တွေ တစ်ခုထက် မက သုံးမယ်ဆိုရင် External Style Sheet ကိုသုံးနိုင်ပါတယ်။ External Style Sheet ကို ခေါ်မယ်ဆိုရင် အောက်ကလို ခေါ်သုံးပါတယ်။
<head> <link rel="stylesheet" type="text/css" href="external.css"> </head>
external.css ကတော့ သီးသန့် file ပါ။ file path တွေကိုတော့ HTML တုန်းက ပြောခဲ့ပြီးပါပြီ။ image path တွေ ခေါ်တဲ့နေရာမှာတုန်းက ရှင်းပြခဲ့ပါတယ်။ external.css ကိုလည်း အဲလို ခေါ်တာပါပဲ။
external.css ထဲမှာတော့ ဒီလိုရေးထားပါတယ်။
.red_class { color: red;}
တစ်ခြား ဘာမှ မပါပဲ css တွေ ချရေးထားရုံပါပဲ။ တခြား html tag တွေ ထည့်စရာလည်း မလိုပါဘူး။
အခု အခြေခံအချက်တွေနားလည်ပြီဆိုရင်တော့ CSS styling အကြောင်းတွေ စပြီးလေ့လာလို့ရပါပြီ။ property က color တစ်ခုတည်း မဟုတ်ပဲနဲ့ အခြား property အကြောင်းတွေကို နောက် chapter မှာ စပါမယ်။