Cascading Style Sheets - CSS

The World without CSS is Ugly

HTML Document တွေကို Web Application တွေရဲ့ အခြေခံအုတ်မြစ်လို့ ယူဆိုမယ်ဆိုရင် CSS ဆိုတာ Decoration လုပ်ပေးတဲ့ ပလာစတာနဲ့ သုတ်ဆေးဖြစ်လို့ ဆိုနိုင်ပါတယ်။ CSS ကို စတင်ဖန်တီးခဲ့တဲ့ ရည်ရွယ် ချက်ကလည်း Document Structure နဲ့ Style ကို ခွဲခြားချင်လို့ ဖြစ်ပါတယ်။ HTML ကို Data Structure တည်ဆောက်ဖို့ အသုံးပြုပြီး အဲ့ဒီ Data တွေကို ဘယ်လိုပုံစံ ဘယ်လို Style နဲ့ဖော်ပြ ရမလဲဆိုတာကို CSS နဲ့ သတ်မှတ်ရတဲ့ သဘော ဖြစ်ပါတယ်။

CSS Style Language ကို တီထွင်ဖန်တီးဖို့ ဆွေးနွေးကြတော့ Mailing List ထဲမှာ အဆိုပြုချက် Proposal (၉) မျိုးထိ ရရှိခဲ့ကြပါတယ်။ အဲ့ဒီထဲက (၂) မျိုးကို အခြေခံပြီး တီထွင်ဖို့ W3C က ဆုံးဖြတ်ခဲ့ပါတယ်။ Cascading HTML Style Sheets (CHSS) နဲ့ Stream-based Style Sheet Proposal (SSP) တို့ပဲ ဖြစ်ပါတယ်။ CHSS ကတော့ ကနေ့ တွင်တွင်ကျယ်ကျယ်အသုံးပြုနေကြတဲ့ CSS နဲ့ ပိုပြီးနီးစပ်ပါတယ်။ အမှန်တော့ CSS ကို HTML တင်မကပါဘူး၊ တစ်ခြား Markup Language တွေနဲ့လည်း တွဲဖက် အသုံးပြုနိုင်ပါတယ် (ဥပမာ - XML, SVG, XUL)။ ဒါကြောင့် CHSS ကနေ H ကို ဖယ်လိုက်ပြီး CSS လို့ အမည်တွင်စေခဲ့တာ ဖြစ်ပါတယ်။

မှတ်ချက် ။ ။Mailing List ဆိုတာ Online Forum တွေမပေါ်ခင်က အသုံးပြုကြတဲ့ Email အခြေပြု ဆွေးနွေးမှုပုံစံတစ်ရပ် ဖြစ်ပါတယ်။ ကနေ့အချိန်ထိလည်း တစ်ချို့ Project တွေအတွက် အသုံးပြုနေဆဲ ဖြစ်ပါတယ်။

အဲ့ဒီခေတ်က တစ်ခြား Style Language တွေနဲ့မတူပဲ CSS ရဲ့ တစ်မူထူးခြားချက်ကတော့ Document တစ်ခုအတွက် တစ်ခုထက်ပိုတဲ့ Style Sheets တွေ တွဲဖက်အသုံးပြုနိုင်ပြီး၊ Style Sheet တစ်ခုက အခြား Style Sheet တစ်ခုထဲမှာ သတ်မှတ်ထားချက်တွေကို Cascade လုပ်ယူပြီး ဆက်လက် အသုံးပြုနိုင်ခြင်းပဲ ဖြစ်ပါတယ်။ ဒါကြောင့်လည်း သူ့ကို Cascading Style Sheet လို့ ခေါ်တာ ဖြစ်ပါတယ်။

၁၉၉၆ ခုနှစ် ဒီဇင်ဘာလမှာ CSS ရဲ့ ပထမဆုံး Version ကို ကြေငြာခဲ့ပါတယ်။ အမှန်တော့ CSS မှာ Version လို့ မသုံးပါဘူး။ CSS Level 1 လို့ ခေါ်ကြပါတယ်။ အခုနောက်ဆုံး HTML5 နဲ့ တွဲဖက်ပါဝင်လာတဲ့ CSS3 ကိုတော့ CSS Level 3 လို့ခေါ်တာ ဖြစ်ပါတယ်။ ကျွန်တော်တို့ ကနေ့ တွင်တွင်ကျယ်ကျယ် အသုံးပြုနေကြ တာကတော့ ၂၀၀၄ ခုနှစ် ဖေဖော်ဝါရီမှာ ကြေငြာခဲ့တဲ့ CSS2.1 (Level 2 Revision 1) ဖြစ်ပါတယ်။

CSS Syntax

CSS ဟာ Programming Language တစ်ခုမဟုတ်သလို Markup Language တစ်ခုလည်း မဟုတ်ပါဘူး။ ကြေငြာချက်တွေ စုစည်းထားတဲ့ Language တစ်မျိုး ဖြစ်ပါတယ်။

"<h2> Element တွေကို စာလုံး အနီရောင်နဲ့ ဖော်ပြပါ။ Bold မလုပ်ပါနဲ့။"

"<p> Element တွေထဲက class='note' လို့သတ်မှတ်ထားတဲ့ Element တွေကို စာလုံး Size 12 Pixelsအသုံးပြုဖော်ပြပါ။"

စသဖြင့် ဘယ် Element ကို ဘယ်လို Style နဲ့ ဖော်ပြရမလဲဆိုတာကို သတ်မှတ်ကြေငြာထားတဲ့ ကြေငြာချက်များပဲ ဖြစ်ပါတယ်။ ရေးသားပုံ Syntax ကို ပုံ (၃-က) မှာ ကြည့်ပါ။

ပုံ (၃-က) CSS ရေးသားပုံ Syntax

Selector, Property, Values ဒီသုံးမျိုးပဲ ပါတာပါ။ Selector ဆိုတာ h1, p, img, liစတဲ့ HTML Element တွေကို ရွေးချယ်ခြင်း ဖြစ်ပါတယ်။ Property တွေကတော့ color, background, border, font-styleစတဲ့ Style Property တွေဖြစ်ပါတယ်။ Values တွေကတော့ blue, 20px, bold, center စတဲ့ Style Value တွေပဲ ဖြစ်ပါတယ်။ ဥပမာ - <p> Element တွေအားလုံးကို စာလုံးအစိမ်းရောင်နဲ့ ဖော်ပြပါလို့ CSS နဲ့ အခုလို ကြေငြာပေးနိုင်ပါတယ်။

p {
  color: green;
}

နမူနာမှာ p က Selector ဖြစ်ပါတယ်။ color က Property ဖြစ်ပြီး green ကတော့ Value ဖြစ်ပါတယ်။

CSS Selectors

CSS မှာ နံပါတ် (၁) အရေးအကြီးဆုံးက Selector ဖြစ်ပါတယ်။ Element ပေါင်းများစွာနဲ့ ဖွဲ့စည်းထားတဲ့ HTML Document တစ်ခုထဲက ကိုယ် Style သတ်မှတ်လိုတဲ့ Element ကို Select လုပ် ရွေးချယ်နိုင်ခြင်းဟာ ပထမဆုံး လိုအပ်ချက် ဖြစ်ပါတယ်။

Selector တွေထဲမှာ အခြေခံအကျဆုံးကတော့ Element Selector, ID Selector နဲ့ Class Selector တို့ပဲ ဖြစ်ပါတယ်။ Element Selector ကတော့ HTML Element Name နဲ့ Select လုပ်ခြင်းဖြစ်ပါတယ်။ မည်သည့် HTML Element ကိုမဆို Name အတိုင်း CSS နဲ့ Select လုပ်ယူနိုင်ပါတယ်။ နမူနာတစ်ချို့ ဖော်ပြပေးပါမယ်။

body {
  background: black;
  color: white;
}
h1 {
  font-size: 24px;
  margin-bottom: 20px;
}
ul {
  list-style: square;
  line-height: 20px;
}
a {
  color: yellow;
  text-decoration: none;
}

body, h1, ul, aစသဖြင့် Element Name အတိုင်း Select လုပ်ယူခြင်းဖြစ်တဲ့အတွက် သူတို့ကို Element Selector ခေါ်တာဖြစ်ပါတယ်။ ID Selector ကတော့ id Attribute သတ်မှတ်ပေးထားတဲ့ Element တွေကို id နဲ့ပဲ Select လုပ်ခြင်း ဖြစ်ပါတယ်။ ဥပမာ - ကျွန်တော်တို့ရဲ့ HTML Document ထဲမှာ ဒီလို Element Structure ပါဝင်တယ်ဆိုကြပါစို့။

<ul id="nav">
  <li id="key-nav"> … </li>
  <li> … </li>
  <li> … </li>
   …
</ul>
<p id="highlight"> … </p>
<ul id="sitemap">
  …
</ul>
<p id="foot-note"> … </p>

ul { background: pink; }လို့ ရေးသားမယ်ဆိုရင် ဒီ Structure မှာ ပါဝင်တဲ့ <ul> Element နှစ်ခုစလုံးရဲ့ Background က ပန်းရောင် ဖြစ်သွားမှာပါ။ ကျွန်တော်တို့က အပေါ်က <ul> Element တစ်ခုထဲအတွက် Style သတ်မှတ်ချင်တာဆိုရင်တော့ သူမှာပေးထားတဲ့ ID ကိုပါ ထည့်သွင်း Select လုပ်ပေးဖို့ လိုမှာ ဖြစ်ပါတယ်။

ul#nav {
  background: pink;
}

(သို့မဟုတ်)

#nav {
  background: pink;
}

# Sign လေးကို ID Selector လို့ခေါ်တာဖြစ်ပါတယ်။ ul#nav ရဲ့ အဓိပ္ပါယ်က "ID ကို nav လို့ပေးထားတဲ့ <ul> Element ကို Select လုပ်ပါ" ဆိုတဲ့ အဓိပ္ပါယ်ဖြစ်ပါတယ်။ #nav ရဲ့ အဓိပ္ပါယ်ကတော့ "ID navလို့ပေးထားတဲ့ မည်သည့် Element မဆို Select လုပ်ပါ" ဆိုတဲ့ အဓိပ္ပါယ် ဖြစ်ပါတယ်။ ဒါကြောင့် ဘယ်လိုရေးရေး ကျွန်တော်တို့ လိုချင်တဲ့ ရလဒ်ဖြစ်တဲ့ ID မှာ nav လို့ပေးထားတဲ့ <ul> Element ကို Background ပန်းရောင် သတ်မှတ်ခြင်း ရလဒ် ရရှိမှာပဲ ဖြစ်ပါတယ်။ ကွာခြားချက် အနည်းငယ်ရှိပေမယ့် လက်တွေ့ ရေးသားတဲ့အခါမှာ ရေးသားသူရဲ့ ရွေးချယ်မှုသာအဓိကဖြစ်လို့ နှစ်သက်ရာနည်းလမ်းနဲ့ ရေးသားနိုင်ပါတယ်။

ပေးထားတဲ့ Structure နမူနာမှာ <p> Element လည်း နှစ်ခုပါလို့ အဲ့ဒီထဲက id="highlight" လို့ပေး ထားတဲ့ Element ကိုပဲ ရွေးယူချင်ရင် p#highlight (သို့မဟုတ်) #highlight ဆိုတဲ့ ID Selector နည်းလမ်း နဲ့ ရွေးယူနိုင်မှာပဲ ဖြစ်ပါတယ်။

Class Selector ကတော့ ရေးသားပုံအားဖြင့် ID Selector ခပ်ဆင်ဆင်ပဲဖြစ်ပါတယ်။ Element တွေမှာ class Attribute ပေးထားဖို့လိုပါတယ်။ # Sign ကို ID Selector အဖြစ်အသုံးပြုရသလိုပဲ Dot ( . ) ကို Class Selector အဖြစ် အသုံးပြုရတာဖြစ်ပါတယ်။ ကျွန်တော်တို့မှာ ဒီလို Element Structure ရှိတယ်ဆိုကြပါစို့။

<p> … </p>
<p class="note"> … </p>
<p> … </p>
<p class="note"> … </p>

<p> Element လေးခုပါဝင်ပါတယ်။ ဒါပေမယ့် အဲ့ဒီထဲက class="note" လို့ပေးထားတဲ့ နှစ်ခုကိုပဲ ရွေးချယ် Select လုပ်ချင်ရင်တော့ ခုလိုရေးသားပေးရမှာ ဖြစ်ပါတယ်။

p.note {
  color: gray;
  font-size: 11px;
}

(သို့မဟုတ်)

.note {
  color: gray;
  font-size: 11px;
}

ID Selector မှာလိုပဲ p.note ရဲ့ အဓိပ္ပါယ်က "Class မှာ note လို့ပေးထားတဲ့ <p> Element ကို Select လုပ်ပါ" ဆိုတဲ့ အဓိပ္ပါယ်ဖြစ်ပြီး .note ရဲ့ အဓိပ္ပါယ်ကတော့ "Class မှာ note လို့ပေးထားတဲ့ မည်သည့် Element ကိုမဆို Select လုပ်ပါ" ဆိုတဲ့ အဓိပ္ပါယ်ပဲ ဖြစ်ပါတယ်။ နှစ်သက်ရာနည်းလမ်းနဲ့ ရေးသား နိုင်ပါတယ်။ တစ်ချို့က အဓိပ္ပါယ်ပိုမို ပေါ်လွင်တဲ့ p.note ရေးဟန်ကို အားပေးကြပေမယ့် တစ်ချို့ကလည်း စာလုံးတစ်လုံးနှစ်လုံး သက်သာလည်း မနည်း ဘူးဆိုတဲ့သဘောနဲ့ .note ရေးဟန်ကို အားပေးကြပါတယ်။

မှတ်ချက် ။ ။ HTML Document တစ်ခုမှာ ID တူတဲ့ Elements နှစ်ခု မရှိသင့်ပါဘူး။ CSS ကတော့ ID တူတဲ့ Element နှစ်ခုရှိနေလည်း နှစ်ခုလုံးအတွက် အလုပ်လုပ်သွားမှာပါပဲ။ ဒါပေမယ့် သဘာဝအရ ID ဆိုတာ Element တွေကို Identify လုပ်တာပါ။ Unique ဖြစ်ရပါတယ်။ CSS မှာ ပြဿနာမရှိပေမယ့် နောက်ပိုင်း Javascript နဲ့ Element တွေကို စီမံတဲ့အခါ ID တူတဲ့ Element တွေ ရှိနေရင် မလိုလားအပ်တဲ့ အခက်အခဲတွေနဲ့ တွေ့ရမှာဖြစ်ပါတယ်။ Class ကတော့ Element တွေကို Classify လုပ်တာပါ။ သဘာဝ အရကိုက အမျိုးတူရာစုဖို့ သုံးရတာဖြစ်လို့ ဖော်ပြပုံအမျိုးအစားတူတဲ့ Element တွေကို Class အတူတူ ပေးတာ လုပ်သင့်တဲ့ အလုပ်တစ်ခုပဲ ဖြစ်ပါတယ်။ Front-End Expert တွေကတော့ CSS အတွက် Element တွေကို ID မပေးပဲ Class ပေးတာက ပိုသင့်တော်တယ်လို့ အကြံပြုကြလေ့ ရှိပါတယ်။

Slightly Advanced CSS Selectors

အနည်းငယ်ထူးခြားပြီး များစွာအသုံးဝင်တဲ့ Selector တစ်ချို့ကို ထပ်မံဖော်ပြပါမယ်။ အဲ့ဒါတွေကတော့ Descendant Selector, Child Selector, Attribute Selector တို့ပဲ ဖြစ်ပါတယ်။

Descendant Selector ဆိုတာ Element တစ်ခုအတွင်းမှာ ထပ်ဆင့်ရှိနေတဲ့ Element တွေကို Select လုပ်ဖို့သုံးပါ တယ်။ Nested Selector လို့လည်းခေါ်ပါတယ်။ Document တစ်ခုမှာ ရှိသမျှ Element တိုင်းကို Class တွေ ID တွေ လိုက်ပေးနေစရာမလိုပဲ ရွေးချယ် Select လုပ်နိုင်တဲ့ နည်းလမ်းဖြစ်လို့ အလွန် အသုံးဝင်ပါတယ်။ HTML Element Structure လေးတစ်ခုနဲ့ တွဲကြည့်ချင်ပါတယ်။

<a href="#">Outside Link</a>
<p>
  <a href="#">Inside Link One</a>
  <strong><a href="#">Inside Link Two</a></strong>
</p>

ဒီနမူနာမှာ <a> Element သုံးခုပါဝင်ပါတယ်။ တစ်ခုက သီးခြားရှိနေတာပါ။ နှစ်ခုကတော့ <p> Element ထဲမှာ ရှိနေတာပါ။ <p> Element အတွင်းထဲက <a> တစ်ခုက <strong> Element တစ်ခုအတွင်းထဲကို ထပ်ရောက်နေပါသေးတယ်။ အဲ့ဒီ <a> Element တွေကို ဒီနည်းနဲ့ Select လုပ်ယူနိုင်ပါတယ်။

p a {
  color: gray;
}

p [space] aလို့ ရေးသားထားတာပါ။ အဲ့ဒီ [space] ကို Descendant Selector အနေနဲ့ သုံးလိုက်တာ ဖြစ်ပါတယ်။ အဓိပ္ပါယ်က "<p> Element အတွင်းထဲက <a> Element တွေကို Select လုပ်လိုက်ပါ" လို့ အဓိပ္ပါယ်ရပါတယ်။ ဒါကြောင့် <p> Element အတွင်းထဲက <a> Element နှစ်ခုလုံးကို ရွေးချယ်လိုက်တဲ့ သဘောလည်း ဖြစ်ပါတယ်။ ဒါပေမယ့် အပြင်ဘက်မှာ သီးခြားရှိနေတဲ့ <a> ကိုတော့ ထည့်သွင်း Select လုပ်မှာ မဟုတ်ပါဘူး။

မှတ်ချက် ။ ။ နမူနာ Element Structure မှာ <a> Element တွေအတွက် href Attribute မှာ URL အစစ်အမှန်မပေးထားပဲ # Sign လေးကို ပေးထားပါတယ်။ အဲ့ဒါ ဘာအဓိပ္ပါယ်မှ မဟုတ်ပါဘူး။ နမူနာ သက်သက်ဖော်ပြချင်တာဖြစ်လို့ URL အစစ်အမှန်မထည့်တော့ပဲ ခပ်လွယ်လွယ် # Sign လေးတစ်ခုတည်း ထည့်ထားလိုက်တာ ဖြစ်ပါတယ်။ # Sign လေးဟာ URL Pattern မှာ ထည့်သွင်းအသုံးပြုနိုင်တဲ့ Valid Sign ဖြစ်လို့ တစ်ခြား သင်္ကေတတွေအစား # Sign ကို နမူနာအနေနဲ့ အသုံးပြုတာပါ။

p strong a {
  color: gray;
}

p [space] strong [space] aလို့ သုံးထားပါတယ်။ အဓိပ္ပါယ်က "<p> Element အတွင်းထဲက၊ <strong> Element အတွင်းမှာ ရှိနေတဲ့ <a> ကို Select လုပ်ပါ" ဆိုတဲ့ အဓိပ္ပါယ်ဖြစ်လို့ ပေးထားတဲ့ Structure ထဲက Inside Link Twoတစ်ခုတည်းကိုပဲ ရွေးချယ်သွားမှာ ဖြစ်ပါတယ်။ ဒီနည်းနဲ့ Element တစ်ခုအတွင်းမှာ ထပ်ဆင့်ရှိနေတဲ့ Element တွေကို Select လုပ်သွားနိုင်ပါတယ်။ လက်တွေ့ Project တွေမှာ ရေးသားအသုံးပြုလေ့ရှိတဲ့ နမူနာတစ်ချို့ ထပ်မံ ဖော်ပြလိုက်ပါတယ်။

#header a {
  text-decoration: none;
  color: black;
}
#nav li a.active {
  background: black;
  color: white;
}
.note strong {
  font-weight: normal;
  color: red;
}
#footer p {
  font-size: 11px;
  color: gray;
}
a img {
  border: 0 none;
}

Child Selector ကတော့ Descendant နဲ့သဘောတရား ဆင်ပါတယ်။ Element တစ်ခုအတွင်းမှာ ထပ်ဆင့်ရှိနေတဲ့ Element ကိုပဲ Select လုပ်တာပါ။ ကွာခြားချက်ကတော့ Descendant Selector က Element တစ်ခုအတွင်းမှာ ရှိသမျှ ကိုက်ညီတဲ့ Element တွေအားလုံးကို Selector လုပ်သွားမှာပါ။ Child Selector ကတော့ Direct Child ဖြစ်တဲ့ Element တွေကိုသာ ရွေးချယ်ပေးမှာပါ။ ထပ်ဆင့် Element တွေနဲ့ ရှိနေတဲ့ အခြား Element တွေကို ထည့်သွင်း Select လုပ်ပေးမှာ မဟုတ်ပါဘူး။ Descendant Selector လေ့လာဖို့ သုံးခဲ့တဲ့ Element Structure ကိုပဲ ပြန်လည် အသုံးပြုချင်ပါတယ်။

<a href="#">Outside Link</a>
<p>
  <a href="#">Inside Link One</a>
  <strong><a href="#">Inside Link Two</a></strong>
</p>

<p> Element အတွင်းထဲက <a> Element ကို ဒီနည်းနဲ့လည်း Select လုပ်ယူနိုင်ပါတယ်။

p > a {
  color: gray;
}

Arrow သင်္ကေတလေးက ( > ) Child Selector ပဲဖြစ်ပါတယ်။ အဓိပ္ပါယ်က "<p> Element အတွင်းထဲက Direct Child ဖြစ်တဲ့ <a> Element ကို Select လုပ်လိုက်ပါ" ဆိုတဲ့ အဓိပ္ပါယ်ဖြစ်ပါတယ်။ ဒီ Selector က Inside Link Oneဆိုတဲ့ <a> Element တစ်ခုတည်းကိုသာ ရွေးချယ်ပေးသွားမှာပါ။ Inside Link Twoဆိုတဲ့ <a> Element ကိုတော့ Direct Child မဟုတ်ပဲ <strong>Element အတွင်းထဲမှာ ထပ်ဆင့် ရှိနေတာဖြစ်လို့ ထည်းသွင်း ရွေးချယ် သွားမှာ မဟုတ်ပါဘူး။ ဒါက Child Selector နဲ့ Descendant Selector တို့ရဲ့ ကွာခြားချက်ပဲ ဖြစ်ပါတယ်။

နောက်တစ်ခုကတော့ Attribute Selector ပဲဖြစ်ပါတယ်။ Element မှာပေးထားတဲ့ Attribute နဲ့ Select လုပ်တာဖြစ် ပြီး သူလည်းပဲ အတော်အသုံးဝင်တဲ့ Selector ဖြစ်ပါတယ်။ လေးဒေါင့်ကွင်းအတွင်းမှာ ရေးပေးရပါတယ်။ ဥပမာ - [title] ဆိုတာ title Attribute ရှိတဲ့ Element အားလုံးကို Select လုပ်လိုက်တာ ဖြစ်ပါတယ်။ img[alt] ဆိုရင်တော့ <img> Element တွေထဲကမှ alt Attribute ရှိတဲ့ Element တွေကို Select လုပ်လိုက်တာ ဖြစ်ပါ တယ်။ img[alt="Feature Image"]ဆိုရင်တော့ <img> Element တွေထဲကမှ alt="Feature Image"လို့ သတ်မှတ်ထားတဲ့ Element တွေကို Select လုပ်တာ ဖြစ်ပါတယ်။ အထူးသဖြင့် <input> Element ဟာ သူ့တစ်ခုတည်းနဲ့ text, radio, buttonစသဖြင့် Type အမျိုးမျိုး သတ်မှတ်နိုင်တဲ့အတွက် အဲ့ဒီ type Attribute ကို အခြေခံပြီး Select လုပ်ပေးဖို့ လိုအပ်တက်ပါတယ်။ နမူနာတစ်ချို့ ဖော်ပြလိုက်ပါတယ်။

input[type=text] {
  background: yellow;
  border: 1px solid gray;
}

input[type=submit] {
  padding: 5px 15px;
}

input[type=radio] {
  margin-right: 5px;
}

အခုဖော်ပြခဲ့တဲ့ Descendant Selector, Child Selector နဲ့ Attribute Selector တို့ကို ထိရောက်အောင် အသုံးချနိုင် မယ်ဆိုရင် Element တွေကို Select လုပ်ရတာ များစွာ ထိရောက်လွယ်ကူသွားမှာပဲ ဖြစ်ပါတယ်။

Pseudo-classes

Pseudo-class တွေဟာ CSS Selector ရဲ့အစိတ်အပိုင်းတစ်ရပ် ဖြစ်ပါတယ်။ Element ရဲ့"အခြေအနေ" ပေါ်မူတည်ပြီး Select လုပ်တဲ့ နည်းလမ်းတွေ ဖြစ်ပါတယ်။ အခြေအနေဆိုတာက၊ အသုံးပြုသူက Element ကို Mouse နဲ့ ထောက်လိုက်တဲ့အခါ၊ အသုံးပြုသူက Element ကို Click လုပ်လိုက်တဲ့အခါ၊ Element က Focus ဖြစ်သွားတဲ့အခါ၊ Element က နောက်ဆုံး Element ဖြစ်နေတဲ့အခါ စသဖြင့် Element တွေရဲ့ ဘယ်လို အခြေအနေမှာ ဘယ်လို Style ဖော်ပြလိုက်ပါလို့ သတ်မှတ်နိုင်ဖို့ Select လုပ်ယူတဲ့ Selector တွေပဲ ဖြစ်ပါတယ်။

:hover Pseudo-class က Element ကို Mouse နဲ့ ထောက်လိုက်တဲ့အခါ ဖော်ပြစေလိုတဲ့ Style တွေသတ်မှတ်ဖို့ သုံးပါတယ်။ အသုံးပြုပုံကတော့ -

a:hover {
  color: red;
}

ဒီလိုရေးသားမယ်ဆိုရင် <a> Element တွေကို Mouse နဲ့ထောက်လိုက်တဲ့အခါ စာလုံးအနီရောင် ပြောင်းပေးမှာ ဖြစ်ပါတယ်။ :hoverအပါအဝင် Pseudo-class အများစုကို မည်သည့် Element နဲ့မဆို တွဲဖက် အသုံးပြုနိုင် ပါတယ်။ ဖော်ပြခဲ့ပြီးဖြစ်တဲ့ Selector တွေနဲ့လည်း တွဲဖက် အသုံးပြုနိုင်ပါတယ်။ ဥပမာ -

#nav li:hover {
  background: green;
}
p:hover a {
  color: lightblue;
}

:visited Pseudo-class ကိုတော့ <a> Element နဲ့သာ တွဲဖက်အသုံးပြုနိုင်ပါတယ်။ တစ်ကြိမ်သွားဖူးတဲ့ URL ကို ညွန်းထားတဲ့ Link တွေကို တစ်ကြိမ်မှ မသွားဖူးသေးတဲ့ URL ကို ညွန်းဆိုထားတဲ့ Link တွေနဲ့ မတူကွဲပြားအောင် Style တွေ သတ်မှတ်ဖို့အတွက် သုံးနိုင်ပါတယ်။ Google Search တို့ Wikipedia တို့လို Website တွေမှာ လေ့လာ ကြည့်ရင်လည်း တွေ့နိုင်ပါလိမ့်မယ်။ မသွားဖူးသေးတဲ့ Link တွေက အရောင် တစ်မျိုး၊ တစ်ကြိမ်သွားဖူးပြီးသား Link တွေက အရောင်တစ်မျိုး ခွဲခြားဖော်ပြတက်ကြပါတယ်။ အမှန်တော့ ဒီလိုခွဲခြားဖော်ပြတာဟာ အသုံးပြုသူအတွက် များစွာအထောက်အကူဖြစ်လို့ ကျွန်တော်တို့ကလည်း Link တွေကို :visited Pseudo-class သုံးပြီး ကွဲပြားအောင် Style တွေ သတ်မှတ်ပေးထားသင့်ပါတယ်။

a {
  color: blue;
}
a:visited {
  color: gray;
}

ဒီလိုခွဲခြားသတ်မှတ်ပေးလိုက်ရင် မသွားဖူးသေးတဲ့ Link တွေကို စာလုံးအပြာနဲ့ ပြပေးပြီး သွားဖူးပြီးသား Link တွေကိုတော့ ခဲရောင်စာလုံးနဲ့ ပြသပေးမှာပဲ ဖြစ်ပါတယ်။

:active Pseudo-class ကတော့ Element ကို Click နှိပ်လိုက်တဲ့အခါ ဖော်ပြစေလိုတဲ့ Style ကို သတ်မှတ်ဖို့ အသုံးပြုနိုင်ပါတယ်။ သူလည်းပဲ မည်သည့် Element နဲ့မဆို တွဲဖက်အသုံးပြုနိုင်ပါတယ်။ ဒါပေမယ့် အသုံးပြုသူ Click နှိပ်လို့ရမယ့် Element တွေနဲ့သာ တွဲဖက်အသုံးပြုသင့်ပါတယ်။

button:active {
  background: gray;
}

:focus Pseudo-class ကို Form Input Element တွေဖြစ်တဲ့ <input> <textarea> <select> တို့နဲ့ တွဲဖက် အသုံးပြုနိုင်ပါတယ်။ Element ကို Focus ဖြစ်တဲ့အချိန်မှာ ဘယ်လိုဖော်ပြရမလဲ သတ်မှတ်ဖို့ အသုံးပြုနိုင် ပါတယ်။

input[type=text] {
  background: white;
}

input[type=text]:focus {
  background: yellow;
}

ဒီလို ရေးသားပေးလိုက်ခြင်းအားဖြင့် <input type="text"> Element တွေဟာ မူလက နောက်ခံ အဖြူရောင် နဲ့ဖော်ပြနေပြီး Input Element ကို Cursor ရောက်လာပြီး Focus ဖြစ်သွားတဲ့အခါ နောက်ခံ အရောင် အဝါရောင်နဲ့ ပြောင်းလဲဖော်ပြပေးမှာ ဖြစ်ပါတယ်။ နမူနာမှာ Pseudo-class ကို Attribute Selector နဲ့ တွဲဖက်အသုံးပြုထားတာ ကိုလည်း သတိပြုသင့်ပါတယ်။ ဒီလိုတွဲဖက်အသုံးပြုလို့ ရပါတယ်။

:first-child Pseudo-class ကိုတော့ Select လုပ်ထားတဲ့ Element တွေထဲက ပထမဆုံး Element တစ်ခု တည်းကို ထူးခြားဖော်ပြစေလို့တဲ့ Style တွေသတ်မှတ်ဖို့ သုံးပါတယ်။ :last-child Pseudo-class လည်း သဘောတရား အတူတူပါပဲ။ :last-child က Select လုပ်ထားတဲ့ Element တွေထဲက နောက်ဆုံး Element တစ်ခုတည်းကို ထူးခြားဖော်ပြစေလို့တဲ့ Style တွေသတ်မှတ်ဖို့ သုံးရတာ ဖြစ်ပါတယ်။

#nav li:last-child {
  border: 0 none;
}
#page p:first-child {
  font-weight: bold;
}

Grouping Selectors

ဖော်ပြခဲ့တဲ့ Selector တွေကို Group လုပ်ပြီးတော့လည်း အသုံးပြုနိုင်ပါတယ်။ ဖော်ပြစေလိုတဲ့ Style တူတဲ့အခါ CSS Rule တွေကို ထပ်ခါထပ်ခါ ပြန်မရေးပဲ တစ်ကြိမ်တည်း ရေးလို့ရနိုင်မှာ ဖြစ်ပါတယ်။

p.note {
  background: #efefef;
  font-size: 12px;
}
#footer .copyright {
  background: #efefef;
  font-size: 12px;
}
code {
  background: #efefef;
  font-size: 12px;
}

ပေးထားတဲ့ နမူနာမှာ Rules တွေက တူနေတာကို တွေ့နိုင်ပါတယ်။ အမှန်တော့ အဲ့ဒီလိုတူနေပြီဆိုရင် ခုလို တစ်ကြိမ်တည်းရေးလိုက်လို့ ရပါတယ်။

p.note, #footer .copyright, code {
  background: #efefef;
  font-size: 12px;
}

Selector တွေကို Comma (,) နဲ့ တွဲပြီး Group လုပ်လိုက်တာပဲ ဖြစ်ပါတယ်။

HTML5 နဲ့အတူ တွဲဖက်ပါဝင်လာတဲ့ CSS3 မှာဆိုရင် Selector တွေရော Pseudo-class တွေပါ အခုထက် ပိုပြီး စုံစုံလင်လင် ပါဝင်လာပါသေးတယ်။ ထည့်သွင်းလေ့လာသင့်တဲ့ CSS3 Selector တွေကို အခန်း (၁၄) HTML5မှာ ထပ်မံဖော်ပြပေးပါမယ်။ Selector တွေဟာ CSS မှာ အရေးအကြီးဆုံးဖြစ်သလို တစ်ခြားနေရာ တွေမှာလည်း အသုံး ဝင်ပါသေးတယ်။ ဒီ Selector တွေကိုပဲ jQuery လို Javascript Framework တွေက ပြန်လည်အသုံးပြုပါတယ်။ ပြီးတော့ Emmet (a.k.a Zen Coding) လို အသုံးဝင်တဲ့ Developer Tool တွေကလည်း CSS Selector တွေကိုပဲ ထိရောက်အောင် အသုံးချထားပါသေးတယ်။ jQuery အကြောင်းကို အခန်း (၆) jQueryမှာ ဖော်ပြပေးမှာဖြစ်ပြီး Emmet အကြောင်းကိုတော့ အခန်း (၂၀) Tools and Utilities မှာ ဖော်ပြပေးမှာပဲ ဖြစ်ပါတယ်။

Background

Layout နဲ့ ပက်သက်တဲ့ ကိစ္စတွေ မလေ့လာခင် အခြေခံကျတဲ့ CSS Property တစ်ချို့ကို အရင်ကြည့်လိုက် ချင်ပါတယ်။ Element တွေရဲ့ Background သတ်မှတ်ဖို့အတွက် CSS Background Property (၅) ခု ရှိပါတယ်။ အဲ့ဒါတွေကတော့ background-color, background-image, background-repeat,background-attachment နဲ့ background-position တို့ပဲ ဖြစ်ပါတယ်။

ဒီ Background Property တွေဟာ တစ်ခုချင်းစီသုံးလေ့ရှိသလို တွဲဖက်ပြီးတော့လည်း သုံးလေ့ ရှိပါတယ်။ Element တွေရဲ့ နောက်ခံအရောင်သက်သက် သတ်မှတ်လိုရင် background-color Property ကို သုံးနိုင်ပါတယ်။

p {
  background-color: yellow;
}

background-color Property နဲ့ တွဲဖက်အသုံးပြုရတဲ့ Color Value အမျိုးမျိုး ရှိပါတယ်။ black, white, red, green, blue, yellow, cyan, brown, grayစသဖြင့် Color Name တွေကို အသုံးပြုနိုင် ပါတယ်။ ဒါပေမယ့် လက်တွေ့မှာ တစ်ကယ့်အသေးစိတ်အရောင်တွေ သတ်မှတ်လိုရင် ဒီ Color Name တွေနဲ့ မလုံ လောက်တော့ပါဘူး။ ဒါကြောင့် black နဲ့ white ကလွဲရင် ကျန်တဲ့ Name တွေကို လက်တွေ့အသုံးနည်းပါတယ်။

နောက်ထပ် Color Value အနေနဲ့ အသုံးပြုနိုင်တာကတော့ RGB Function ဖြစ်ပါတယ်။ ကျွန်တော်တို့ တွေ့မြင် နေရတဲ့ ဆိုပြေပြည့်စုံတဲ့ အရောင်တွေကို ဖော်ပြဖို့ ကျွန်ပျူတာ Screen တွေက Red, Green, Blue ဆိုတဲ့ အရောင်သုံး ရောင်ကို လိုသလိုပေါင်းစပ်ပြီးတော့ ဖော်ပြပေးတာ ဖြစ်ပါတယ်။ CSS မှာလည်း RGB Value တွေသတ်မှတ်ပြီး လိုချင်တဲ့အရောင်ကို ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။

p {
  background-color: rgb(255, 255, 0);
}

ဒါလည်းပဲ <p> Element တွေကို နောက်ခံအဝါရောင် သတ်မှတ်လိုက်တာပဲ ဖြစ်ပါတယ်။ rgb() Function ကို အသုံးပြုထားပြီး အထဲမှာ Parameter သုံးခုက Red, Green, Blue အစဉ်အလိုက် ဖြစ်ပါတယ်။ သတ်မှတ် ပေးနိုင်တဲ့ ဂဏန်းတန်ဖိုးတွေကတော့ 0 ကနေ 255 အထိဖြစ်ပါတယ်။ rgb(255, 0, 0) ဆိုရင် Solid Red ကို ရမှာပါ။ Red နေရာမှာ 255 အပြည့်ပေးထားပြီး ကျန် Green နဲ့ Blue အတွက် 0 သတ်မှတ်ထားလို့ ဖြစ်ပါတယ်။ အလားတူပဲ rgb(0, 255, 0)ဆိုရင် Solid Green, rgb(0, 0, 255) ဆိုရင်တော့ Solid Blue အရောင်ကို ရရှိမှာပဲ ဖြစ်ပါတယ်။ rgb(0, 0, 0) က အနက်ရောင်ဖြစ်ပါတယ်။ ကွန်ပျူတာ Screen အတွက် အရောင်မရှိတာက အနက်ရောင် ဖြစ်ပါတယ်။ rgb(255, 255, 255)ဆိုရင်တော့ အဖြူရောင် ဖြစ်ပါတယ်။ သုံးခုလုံး အပြည့် ပေါင်းစပ်လိုက်ရင် ရနိုင်တဲ့အလင်းဆုံးအရောင်ဖြစ်တဲ့ အဖြူရောင် ကို ရရှိတာဖြစ်ပါတယ်။ rgb(200, 0, 0) ဆိုရင်တော့ အနီရင့်ရောင်ကို ရရှိမှာပါ။ Red ကို အပြည့် မပေးပဲ 200 လို့ပေးထားပြီး Green နဲ့ Blue က 0 ဖြစ်နေတဲ့အတွက် အနက်ရောင်ဘက်ကိုပါတဲ့အနီ (အနီရင့်) ကိုရရှိမှာဖြစ်ပါတယ်။ နမူနာမှာတော့ rgb(255, 255, 0)လို့ ရေးထားပါတယ်။ rgb() မှာ Primary Color တစ်ခုဖြစ်တဲ့ အဝါအတွက် အရောင်မပါပေမယ့် အနီနဲ့ အစိမ်းကို ရောစပ်လိုက်ရင် အဝါရောင်ရရှိတာပဲ ဖြစ်ပါတယ်။

ပုံ (၃-ခ) CSS RGB Color

နောက်ထပ်အသုံးပြုနိုင်တဲ့ Color Value ကတော့ Hex Value ပဲဖြစ်ပါတယ်။ Hexadecimal ဂဏန်း စနစ်နဲ့ ရေးသားရပါတယ်။

p {
  background-color: #FFFF00;
}

Hex Value ကို ရှေ့ဆုံးက # Sign နဲ့စရေးပေးရပါတယ်။ နောက်မှာတော့ (၆) လုံးတွဲ Hexadecimal တန်ဖိုးကို ပေးရပါတယ်။ ကျွန်တော်တို့ နေစဉ်သုံးနေကြ Decimal Number system မှာ 0 ကနေ 9 အထိ ဂဏန်း (၁၀) လုံးပါဝင်ပါတယ်။ Hexadecimal မှာတော့ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, Fဆိုပြီး ဂဏန်း (၁၆) လုံးပါဝင်တာဖြစ်ပါတယ်။ Number System တွေအကြောင်း ကိုတော့ ဒီနေရာမှာ အသေးစိတ် မပြောနိုင်တော့ပါဘူး။ အကြမ်းဖျင်းအားဖြင့် Hex တန်ဖိုး FF ဟာ Decimal တန်ဖိုး 255 နဲ့ ညီတယ်လို့ပဲ မှတ်ထား စေချင်ပါတယ်။ ဒါကြောင့် Hex Value မှာ အနိမ့်ဆုံးက 00 ဖြစ်ပြီး အမြင့်ဆုံးက FF ဖြစ်ပါတယ်။ နမူနာမှာပေးထားတဲ့ (၆) လုံးတွဲ FFFF00 ဟာ R = FF,G = FFနဲ့ B = 00ဆိုတဲ့ အဓိပ္ပါယ်ဖြစ်ပါတယ်။ Red နဲ့ Green အတွက် အမြင့်ဆုံး လက်ခံနိုင်တဲ့ FF လို့ သတ်မှတ်ထားပြီး Green ကို 00 သတ်မှတ်ထားတဲ့အတွက် သူလည်းပဲ အဝါရောင်ကိုပဲ ရရှိမှာဖြစ်ပါတယ်။

ပုံ (၃-ဂ) CSS Hex Color

မှတ်ချက် ။ ။ Hax Value တွေဟာ အပြည့်အစုံဆိုရင် (၆)လုံးတွဲ ရေးရပေမယ့် အတိုကောက်အနေနဲ့ (၃) လုံးပဲ ရေးလို့လည်း ရပါတယ်။ ဥပမာ - #FFFF00 အစား #FF0 လို့ ရေးနိုင်ပါတယ်။ #88AADD အစာ #8AD လို့ရေး နိုင်ပါတယ်။ #FFFFFF အစား #FFF လို့ ရေးနိုင်ပါတယ်။ #000000 အစား #000 လို့ ရေးနိုင် ပါတယ်။ ပြီးတော့ စာလုံးအကြီးအသေးလည်း ပြဿနာမရှိပါဘူး။ နှစ်သက်ရာ သုံးနိုင်ပါတယ်။ #ffff00 လို့ ရေးသားရင်လည်း အလုပ်လုပ်မှာပဲ ဖြစ်ပါတယ်။

Color Value တွေအကြောင်းသိပြီဆိုရင် Background Color သတ်မှတ်တာက လွယ်သွားပါပြီ။ ဖော်ပြခဲ့တဲ့ Color Name, RGB နဲ့ Hex Value တို့ကို background-color အတွက်တင် မကပါဘူး စာလုံး အရောင်တွေ၊ Border အရောင်တွေ စသဖြင့် Color Value ပေးလို့ရတဲ့နေရာတိုင်းမှာ အသုံးပြုနိုင်မှာပဲ ဖြစ်ပါတယ်။

သိရှိအောင် RGB Color တွက်ချက်အလုပ်လုပ်ပုံကို ထည့်သွင်းဖော်ထားပေမယ့် လက်တွေ့မှာ အရောင်တွေ ကို ကိုယ်တိုင်တွက်ပြီး စပ်နေဖို့ မလိုပါဘူး။ မျက်စိနဲ့မြင်နေတဲ့အရောင်ကို ထောက်ယူလိုက်ယုံနဲ့ Color Code တွေ ပြန်ထုပ်ပေးတဲ့ Color Pick Tool တွေ အများကြီး ရှိပါတယ်။ ဒီနေရာမှာ အဆင်အပြေဆုံး ကတော့ ColorZilla ဆိုတဲ့ Firefox Addon ပဲ ဖြစ်ပါတယ်။ ဒီ Addon ထည့်သွင်းလိုက်ရင် Website တွေပေါ်က မြင်နေရတဲ့အရောင်ကို ထောက်ယူနိုင်သလို Color Circle ပေါ်မှာ အရောင်တွေပေါင်းစပ်ပြီးတော့လည်း Color Code တွေ ရယူနိုင်ပါတယ်။ Color Code ကိုလည်း Hex, RGB, CSS3 Color Function တွေထဲမှာ တစ်ခုအပါအဝင်ဖြစ်တဲ့ HSL, Print Design မှာသုံးတဲ့ CMYK စသဖြင့် အမျိုးမျိုးကို ပြန်ပေးနိုင်တာဖြစ်ပါတယ်။ အကယ်၍ စပ်ထားတဲ့ အရောင်က Color Name အနေနဲ့ ရှိခဲ့ရင်လည်း တွဲဖက်ဖော်ပြပေးပါတယ်။ Web Developer တွေအတွက် မရှိမဖြစ် Browser Addon ထဲမှာ တစ်ခုအပါအဝင်ဖြစ်ပါတယ်။

ပုံ (၃-ဃ) ColorZilla Firefox Addon

Link: http://www.colorzilla.com

Google Chrome နဲ့ တစ်ခြား Browser တွေအတွက်လည်း အလားတူ Extension တွေရှိပါတယ်။ Install လုပ်ပုံနဲ့ အသုံးပြုပုံအသေးစိတ်ကိုတော့ စာဖတ်သူကိုယ်တိုင် ရှာဖွေလေ့လာပြီး စမ်းသပ်ကြည့်စေချင်ပါတယ်။

ကျွန်တော်တို့လေ့လာလက်စ CSS Background Property တွေအကြောင်း ပြန်သွားပါမယ်။ Background Image တွေ ထည့်သွင်းဖို့အတွက် background-image Property ကို သုံးနိုင်ပါတယ်။ Background Image နဲ့ပက်သက်ပြီး အကန့်အသတ်နှစ်ခု ရှိပါတယ်။ တစ်ခုက Element တွေမှာ Background Image တစ်ခုပဲ ရှိနိုင်ပါတယ်။ Element တစ်ခုအတွက် Background Image နှစ်ခုသုံးခု ပေါင်းစပ် သတ်မှတ်လို့ မရပါဘူး။ နောက်တစ်ချက်ကတော့၊ Background Image ရဲ့ Size ကို CSS နဲ့ သတ်မှတ်လို့ ရမှာမဟုတ် ပါဘူး။ ဒါကြောင့် Web Developer တွေကို Background အနေနဲ့ Image ကို အသုံးပြု လိုတယ်ဆိုရင် အသုံးပြုလိုတဲ့ Size ရအောင် ကြိုတင်ပြင်ဆင်ပေးထား ရမှာဖြစ်ပါတယ်။ ပုံက Element ထက် ကြီးနေလို့ "နည်းနည်းသေးပြီး Background အဖြစ်သုံးလိုက်ပါ" ဆိုတဲ့ သတ်မှတ်ချက်မျိုး CSS နဲ့ မသတ်မှတ် နိုင်ပါဘူး။

မှတ်ချက် ။ ။CSS3 မှာတော့ အခုပြောနေတဲ့ Multiple-Background ရော Background-Size ပါ သတ်မှတ် လို့ ရလာပါပြီ။ ဒါပေမယ့် ဒီစာရေးနေချိန်ထိ Browser Support ပိုင်းမှာ အားနည်းနေသေးသလို့ အသုံးပြုမှုလည်း သိပ်မတွင်ကျယ်သေးပါဘူး။

ကျွန်တော်တို့မှာ alert.png ဆိုတဲ့ Image လေးတစ်ခု ရှိတယ်ဆိုကြပါစို့။

alert.png

ဒီ Image လေးကို <p class="alert"> Element အတွက် Background အဖြစ် အသုံးပြုလိုရင် အခုလို ရေးသားနိုင်ပါတယ်။

p.alert {
  background-image: url("alert.png");
}

background-image Property အတွက် Value ကို url() Function နဲ့ သတ်မှတ်ပေးရတာဖြစ်ပါတယ်။ url() အတွင်းမှာ Image File ရှိနေတဲ့ Path လမ်းကြောင်းကို ညွန်းဆိုပေးရတာ ဖြစ်ပါတယ်။ ရလဒ်အနေနဲ့ အခုလိုမျိုး ရရှိမှာပဲ ဖြစ်ပါတယ်။

ပုံ (၃-င) CSS Background Image Property

<p> Element က ကြီးနေပြီး alert.png Image က သေးနေတဲ့အတွက် Browser ကို Repeat လုပ်ပြီးဖော်ပြ သွားတဲ့အတွက် ဒီလိုရလဒ်ရရှိတာဖြစ်ပါတယ်။ အဲ့ဒီ Repeat လုပ်ဆောင်ချက်ကိုတော့ background-repeat Property နဲ့ ပြုပြင်နိုင်ပါတယ်။ ကျွန်တော်တို့ရေးထားတဲ့ CSS ကို ဖြည့်စွက်ပြင်ဆင်လိုက်ပါမယ်။

p.alert {
  background-image: url("alert.png");
  background-repeat: no-repeat;
}

background-repeat Property နဲ့ တွဲဖက်အသုံးပြုနိုင်တဲ့ Value (၄) မျိုး ရှိပါတယ်။ repeat, repeat-x, repeat-yနဲ့ no-repeat တို့ပဲ ဖြစ်ပါတယ်။ repeat ကတော့ Default Value ဖြစ်ပါတယ်။ repeat-x ကတော့ Image Repeat ကို အလျှားလိုက် (Horizontal) ပဲ လုပ်လိုတဲ့အခါ သုံးပါတယ်။ repeat-y ကိုတော့ Image Repeat ကို ဒေါင်လိုက် (Vertical) ပဲ လုပ်လိုတဲ့အခါ သုံးပါတယ်။ လက်ရှိအသုံးပြုထားတဲ့ no-repeat ကတော့ Repeat မလုပ်ပါနဲ့လို့ သတ်မှတ်လိုက်ခြင်းပဲ ဖြစ်ပါတယ်။ ရလဒ်ကတော့ အခုလို ရရှိမှာ ဖြစ်ပါတယ်။

ပုံ (၃-စ) CSS Background Repeat

ပုံကို အရှိအတိုင်းပဲ သုံးပေးထားပြီး Repeat မလုပ်တော့တာကို တွေ့ရမှာဖြစ်ပါတယ်။ ဆက်လက်ပြီး Background Image ရဲ့ Position ကို background-position Property သုံးပြီး သတ်မှတ်ပေးနိုင်ပါတယ်။

p.alert {
  background-image: url("alert.png");
  background-repeat: no-repeat;
  background-position: top right;
}

background-position Property အတွက် Value ကို နှစ်ခုပေးရပါတယ်။ Vertical Position နဲ့ Horizontal Position ဖြစ်ပါတယ်။ top နေရာမှာ bottom သို့မဟုတ် center နဲ့ လိုအပ်သလို အစားထိုး အသုံးပြုနိုင်ပါတယ်။ right နေရာမှာတော့ left သို့မဟုတ် center နဲ့ လိုအပ်သလို အစားထိုး အသုံးပြုနိုင် ပါတယ်။ top rightလို့ သုံးထားတဲ့အတွက် လက်ရှိရလဒ်ကတော့ အခုလို ပြောင်းသွားမှာဖြစ်ပါတယ်။

ပုံ (၃-ဆ) CSS Background Position

မှတ်ချက် ။ ။Position Name တွေနဲ့ မဟုတ်ပဲ နေရာအတိအကျလည်း သတ်မှတ်ပေး နိုင်ပါတယ်။ ဥပမာ - background-position: 10px 20px; လို့ကြေငြာအသုံးပြုနိုင်ပါတယ်။ ဒါဆိုရင် Position ကို Element Left ကနေ 10px နဲ့ Element Top ကနေ 20px ခွာပြီး နေရာချထားပေးမှာဖြစ်ပါတယ်။

Background Property (၅) မျိုးမှာ (၄) မျိုးဖော်ပြခဲ့ပါပြီ။ ကျန်တစ်မျိုးဖြစ်တဲ့ background-attachment ကတော့ Background Image ကို Screen Viewpoint နဲ့ Attach ဖြစ်နေစေလိုတဲ့အခါ အသုံးပြုရပါတယ်။ background-attachment: fixed;လို့ ကြေငြာအသုံးပြုရတာ ဖြစ်ပါတယ်။ ပုံမှန်ဆိုရင် Background က Document နဲ့ Attach ဖြစ်နေတာဖြစ်ပါတယ်။ အသုံးပြုသူက Scrollbar ဆွဲလိုက်လို့ ဖော်ပြတဲ့ Content နေရာရွေ့သွားရင် Background လည်း လိုက်ရွေ့သွားမှာပါ။ background-attachment: fixed; လို့ သတ်မှတ်ထားရင်တော့ Scroll လုပ်လိုက်ရင်လည်း Background Image က မြင်ကွင်းကနေ ပျောက်ကွယ်မသွားပဲ ဆက်လက်တည်ရှိနေမှာဖြစ်ပါတယ်။

CSS မှာ Shorthand လို့ခေါ်တဲ့ အတိုကောက်ရေးနည်း ရှိပါတယ်။ Background Property အားလုံးကို တစ်ကြောင်းစီ လေးငါးကြောင်း ခွဲရေးမနေပဲ အတိုကောက်ရေးလို့ရပါတယ်။

p.alert {
  background: #FFFFDD url(alert.png) no-repeat top right;
}

နမူနာမှာ background-color, background-image, background-repeatနဲ့ background-position လေးမျိုးလုံးအစား background ဆိုတဲ့ Property တစ်ခုတည်းနဲ့ Value တွေ အားလုံးကို တန်းစီ ထည့်ပေးလိုက်တာ ဖြစ်ပါတယ်။ ဒီနည်းနဲ့ အတိုကောက်ရေးလို့ ရပါတယ်။ ဒါပေမယ့် Value တွေက Color → Image → Repeat → Attachment → Position အစီအစဉ်အတိုင်း မှန်အောင်ပေးရပါတယ်။ စလိုတဲ့ Value နဲ့စနိုင်ပါတယ်။ နမူနာမှာ Color နဲ့ စထားပါတယ်၊ ဆန္ဒရှိရင် Position ကနေစလည်း ရပါတယ်။ ဒါပေမယ့် နောက်ကဆက်လိုက်တဲ့ Value ကတော့ အစီအတိုင်း မှန်အောင် ပေးရမှာ ဖြစ်ပါတယ်။ အစီအစဉ်မမှန်ရင် အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။ မထည့်လိုတဲ့ Value ရှိရင်လည်း ချန်ထားခဲ့လို့ ရပါတယ်။ နမူနာမှာဆိုရင် Attachment ကိုချန်ထားခဲ့ပါတယ်။

ကျွန်တော်တို့ရဲ့ နမူနာကို အားလုံး ပြည့်စုံသွားအောင် Property တစ်ချို့ ထပ်ဖြည့်လိုက်ပါမယ်။

p.alert {
  background: #FFD
  url(book-project/res/alert.png) no-repeat 10px center;
  border: 2px solid #DDA;
  padding: 10px 10px 10px 50px;
  border-radius: 5px;
}

border, padding, border-radius Property တွေ ထပ်ဖြည့်လိုက်တာပါ။ ဒီ Property တွေအကြောင်းကို မကြာခင်မှာ အသေးစိတ် ရှင်းပြပေးမှာပါ။ လက်ရှိရလဒ်ကတော့ အခုလို ရရှိမှာ ဖြစ်ပါတယ်။

ပုံ (၃-ဇ) CSS Alert

အခုဆိုရင် <p> Element တစ်ခုကို Application Interface တွေမှာ တွေ့မြင်နေကြ Warning Message အသွင်နဲ့ ဖော်ပြပေးအောင် CSS နဲ့ ဖန်တီးလိုက်တာပဲ ဖြစ်ပါတယ်။

Text and Font

စာလုံးအရောင် (Text Color) CSS နဲ့ သတ်မှတ်ဖို့အတွက် color Property ကို သုံးရပါတယ်။ Value အနေနဲ့ကတော့ Background Color မှာ ဖော်ပြခဲ့တဲ့ နည်းလမ်းတွေအတိုင်းပဲ ပေးရမှာဖြစ်ပါတယ်။ စာပိုဒ် တွေကို ဘယ်ဘက်ကိုအညီယူမယ် (သို့မဟုတ်) ညာဘက်ကို အညီယူမယ် စသဖြင့် Alignment လုပ်ဖို့အတွက် text-align Property ကို သုံးရပါတယ်။ Value အနေနဲ့ left, right, center, justifyလေးမျိုး အသုံးပြု နိုင်ပါတယ်။

h1 {
  color: #224477;
  text-align: center;
}
p {
color: #555;
  text-align: justify;
}

ကျွန်တော်တို့ စာရွက်ပေါ်မှာ လက်နဲ့စာတွေရေးတဲ့အခါ စာပိုဒ်တိုင်းရဲ့ ပထမလိုင်းကို ဘေးမျဉ်း ကနေ လက်မဝက်ခွာပြီး ရေးကြလေ့ရှိပါတယ်။ ဒီ သဘောကို Web မှာတော့ အသုံးနည်းပါတယ်။ ဘေးမျဉ်းကနေ လက်မဝက်ခွာတာက စာရွက်ပေါ်မှာ ဖတ်လို့ကောင်းပေမယ့်၊ Screen ပေါ်မှာဆိုရင် ဖတ်ရတာ သိပ်အဆင် မပြေပါဘူး။ ဒါကြောင့် အသုံးနည်းပါတယ်။ ဒါပေမယ့် သုံးလိုတယ်ဆိုရင် text-indent Property ကို သုံး နိုင်ပါတယ်။

p {
  text-indent: 50px;
}

စာလုံးတွေကို Underline တားပြီး ဖော်ပြလိုတဲ့အခါ text-decoration Property ကို အသုံးပြုနိုင်ပါတယ်။ လက်တွေ့မှာ text-decoration Property ကို Underline တွေဖြုတ်ဖို့အတွက် ပိုအသုံးများပါတယ်။ <a> Element တစ်ခု ထည့်သွင်းလိုက်ရင် Browser တွေက အလိုအလျှောက် Underline တားပြီး ဖော်ပြလေ့ ရှိပါတယ်။ အဲ့ဒီလို Underline တားထားတာကို မလိုချင်တဲ့အခါ text-decoration Property မှာ Value ကို none လို့သတ်မှတ်ပေးနိုင်ပါတယ်။

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

none နဲ့ underline အပြင် text-decoration Property နဲ့ တွဲဖက်အသုံးပြုလို့ရတဲ့ Value တွေကတော့ overline, line-through, blinkတို့ပဲ ဖြစ်ပါတယ်။ overline ကတော့ အတော်ကြီးကို အသုံးနည်း ပါတယ်။ blink ကတော့ စာလုံးမှိတ်တုံ့မှိတ်တုံ့ ဖြစ်စေချင်ရင် သုံးရတာပါ။ 90' ခေတ်များက အသုံးများခဲ့ပေမယ့် ကနေ့ခေတ်မှာတော့ လုံးဝမသုံးတော့သလောက် အသုံးနည်းသွားပါပြီ။ line-through တစ်ချို့နေရာတွေမှာ အသုံးဝင်ပါတယ်။ တစ်ကယ့်လက်တွေ့မှာတော့ none နဲ့ underline သာ အသုံးအများဆုံးဖြစ်ပါတယ်။

စာလုံးအသွင်အပြင် (Font) သတ်မှတ်ဖို့အတွက် font-family Property ကို သုံးရပါတယ်။ Value အနေနဲ့ အသုံးပြုလိုတဲ့ Font အုပ်စုကို တ်မှတ်ပေးရပါတယ်။

p {
  font-family: Arial, Helvetica, sans-serif;
}

ဒီလို အုပ်စုလိုက်သတ်မှတ်တာက Fall Back အတွက် အသုံးဝင်ပါတယ်။ ပေးထားတဲ့ နမူနာအရ အသုံးပြုသူ စက်ထဲမှာ Arial Font ရှိရင် Browser က <p> Element တွေကို Arial နဲ့ ဖော်ပြမှာဖြစ်ပါတယ်။ မရှိရင်တော့ Helvetica ကို အသုံးပြုဖော်ပြပါလိမ့်မယ်။ Helvetica လည်း မရှိဘူးဆိုရင်တော့ sans-serif Font နဲ့ ဖော်ပြပေးမှာဖြစ်ပါတယ်။ သတ်မှတ်ပေးထားတဲ့ Font တွေ တစ်ခုမှ အသုံးပြုသူစက်ထဲမှာ မရှိဘူးဆိုရင်တော့ Browser Default Font နဲ့ပဲ ဖော်ပြပေးမှာ ဖြစ်ပါတယ်။

Document ထဲမှာ မြန်မာစာတွေ ထည့်သွင်းရေးသားထားလို့ မြန်မာ Font တွေ သတ်မှတ်ချင်ရင်လည်း အခုလို သတ်မှတ်နိုင်ပါတယ်။

p {
  font-family: Padauk, Maynamr3, "Myanmar Text";
}

"Myanmar Text"ကို Quote အဖွင့်အပိတ်နဲ့ ရေးတာကို သတိပြုပါ။ သူက Font Name မှာ Space ပါနေလို့ Quote အဖွင့်အပိတ်နဲ့ရေးပေးဖို့ လိုအပ်တာဖြစ်ပါတယ်။ Myanmar Text Font ဆိုတာ Windows 8 မှာ Default ပါဝင်လာတဲ့ Myanmar Font ဖြစ်ပါတယ်။

မှတ်ချက် ။ ။ ဒီစာရေးနေချိန်မှာ မြန်မာစာရေးဖို့အင်တာနက်မှာ တွင်တွင်ကျယ်ကျယ်အသုံးပြုနေတာက Zawgyi Font ဖြစ်ပါတယ်။ Zawgyi Font ကို အသုံးပြုလိုရင်တော့ font-family: zawgyi-one; လို့ သတ်မှတ်ပေးရမှာပါ။ Zawgyi နဲ့ နည်းပညာတူတဲ့ တစ်ခြား တွဲဖက်သတ်မှတ်စရာ Font တစ်ခုမှမရှိလို့ တစ်ခုတည်းပဲ သတ်မှတ်ပေးရလေ့ရှိပါတယ်။ Web Standards ကို အညီအညွတ်မလိုက်နာနိုင်ခင်က Web နည်းပညာမှာ အဆင်မပြေတာတွေ ရှိခဲ့သလိုပဲ လက်ရှိ ကွန်ပျူတာသုံး မြန်မာစာမှာလည်း Font တွေမတူတဲ့အတွက် အဆင်မပြေတာတွေ ရှိပါတယ်။ ဒါပေမယ့် အခုနောက်ပိုင်းတော့ မြန်မာစာအတွက်လည်း Unicode Consortium က သတ်မှတ်ထားတဲ့ ကွန်ပျူတာသုံးဘာသာ စကားဆိုင်ရာ နည်းပညာစံတွေကို ကျယ်ကျယ် ပြန့်ပြန့် လိုက်နာလာကြပါပြီ။ Microsoft, Apple တို့လို့ အဓိက Operating System ထုပ်လုပ်သူတွေက Unicode စံလိုက်နာတဲ့ မြန်မာ Font တွေကို သူတို့ OS တွေမှာ တစ်ပါတည်း ထည့်သွင်း ပေးလာသလို၊ Google, Wikipedia အစရှိတဲ့ အဓိက Website တွေကလည်း သူတို့ Website တွေမှာ မြန်မာစာတွေဖော်ပြဖို့အတွက် Unicode စံအတိုင်း ဖော်ပြ အသုံးပြုလာကြပြီဖြစ်ပါတယ်။ မကြာတော့တဲ့ ကာလမှာ အခုကြုံတွေ့နေရတဲ့ အဆင်မပြေမှုတွေ ပြေလည်သွားတော့မယ်လို့ မျှော်လင့်ပါတယ်။ ဒီအကြောင်းက စိတ်ဝင်စားဖို့ကောင်းသလို Web Developer တွေ သိရှိထားသင့်လို့ အသေးစိတ်ဖော်ပြချင်ပါတယ်။ ဒါပေမယ့် ကျွန်တော်တို့ လေ့လာလက်စကနေ လမ်းလွဲသွားမှာစိုးလို့ ချန်ခဲ့လိုက်ပါတော့မယ်။

စာလုံးတွေကို Bold လုပ်လိုတဲ့အခါ (သို့မဟုတ်) Bold လုပ်ထားတဲ့စာလုံးတွေကနေ Bold ပြန်ဖြုတ်လိုတဲ့ အခါ font-weight Property ကို သုံးနိုင်ပါတယ်။ font-weight: bold; ဆိုရင် စာလုံးတွေကို Bold လုပ်ပေးမှာ ဖြစ်ပြီး၊ font-weight: normal;ဆိုရင် Bold လုပ်ထားတာကို ပြန်ဖြုတ်ပေးမှာ ဖြစ်ပါတယ်။ <h1> <h2> <h3> အစရှိတဲ့ Heading Element တွေဟာ မူလဖော်ပြပုံအရ Bold လုပ်ဖော်ပြကြလေ့ ရှိပါတယ်။ မလိုချင်ဘူးဆိုရင် font-weight: normal; နဲ့ ပြန်ဖြုတ်ပေးရမှာ ဖြစ်ပါတယ်။

စာလုံးတွေကို Italic လုပ်လိုတဲ့အခါ (သို့မဟုတ်) Italic လုပ်ထားတဲ့စာလုံးတွေကနေ Italic ပြန်ဖြုတ်လိုတဲ့ အခါ font-style Property ကို သုံးနိုင်ပါတယ်။ font-style: italic; ဆိုရင် စာလုံးတွေကို Italic လုပ်ပေးမှာ ဖြစ်ပြီး၊ font-style: normal; ဆိုရင် Italic လုပ်ထားတာကို ပြန်ဖြုတ်ပေးမှာ ဖြစ်ပါတယ်။

မှတ်ချက် ။ ။ စာရွက်ပေါ်မှာ ရိုက်နှိပ်ဖော်ပြတဲ့စာပဲဖြစ်ဖြစ်၊ Web Document ပေါ်မှာ ဖော်ပြတဲ့စာပဲဖြစ်ဖြစ် Typography လို့ခေါ်တဲ့ စာလုံးစီစဉ်နေရာချထားမှု အတက်ပညာကို သိရှိထားမှသာ ဖတ်ရှု့သူက ဖတ်ရတာ ရှင်းလင်း ချောမွေ့ပြီး အဆင်ပြေတာဖြစ်ပါတယ်။ ဒီစာအုပ်ဟာ Design ထက်စာရင် Development ဘက်ကို ပိုပြီးအသားပေးချင်လို့ Typography အကြောင်း တစ်ခန်းကဏ္ဍယူပြီး မဖော်ပြနိုင်ပါဘူး။ ဒါပေမယ့် မဖြစ်မနေ သိသင့်တဲ့ကိစ္စတွေကိုတော့ သင့်သလို ထည့်သွင်းဖော်ပြပေးသွားပါမယ်။

စာလုံးတွေကို Bold လုပ်တယ် Italic လုပ်တယ်ဆိုတာ ယေဘုယျအားဖြင့် ပိုမြင်သာအောင် Emphasis လုပ်လိုက် တာပါပဲ။ နှစ်သက်တဲ့နည်းလမ်းကို အသုံးပြုနိုင်ပေမယ့် Bold လုပ်ပြီး အလွန်အမင်း Emphasis လုပ်ထားတဲ့စာတွေက ဖတ်ရှု့သူအတွက် ဖတ်ရတာ ထောက်စေပါတယ်။ ပုံ (၃-ဈ) မှာ နှိုင်းယှဉ်ကြည့် နိုင်ပါတယ်။

ပုံ (၃-ဈ) Emphasis in Typography

စာလုံး Size တွေ သတ်မှတ်ဖို့အတွက်တော့ font-size Property ကို သုံးနိုင်ပါတယ်။ CSS မှာ font-size အပါအဝင် Size ပမာဏတန်ဖိုး သတ်မှတ်ဖို့ အသုံးပြုနိုင်တဲ့ Unit အမျိုးမျိုး ရှိပါတယ်။ px, pt, in, mm, em,% စသဖြင့် ရှိကြပါတယ်။ ဒါပေမယ့် pt, in, mm အစရှိတဲ့ Unit တွေက Screen အတွက် သိပ်အဆင်မပြေ ပါဘူး။ Screen Resolution ကွာခြားချက်ကြောင့် 1in ဟာ တစ်ကယ့် 1 inch နဲ့ Screen ပေါ်မှာ Size အမြဲတမ်းတူညီဖို့ မသေချာပါဘူး။ ဒါကြောင့် အသုံးနည်းပါတယ်။ အသုံးများတဲ့ (၃) မျိုးက px, emနဲ့ % တို့ပဲ ဖြစ်ကြပါတယ်။ px Unit ကတော့ သတ်မှတ်လိုတဲ့ Size ကို "အတိအကျ" သတ်မှတ်လိုက်တာ ဖြစ်ပါတယ်။ font-size: 13px;လို့ သတ်မှတ်လိုက်ရင် 13px ပမာဏရှိတဲ့ စာလုံးအရွယ်အစားနဲ့ ဖော်ပြပေးသွား မှာပဲ ဖြစ်ပါတယ်။

em နဲ့ % ကိုတော့ Relative Unit လို့ ခေါ်ပါတယ်။ Size ကို အတိအကျ သတ်မှတ်တာမျိုး မဟုတ်ပဲ font-size: 200%;လို့ သတ်မှတ်လိုက်တာဟာ "ပုံမှန်သုံးရမယ့် Size ထက် နှစ်ဆကြီးတဲ့ Size ကို သုံးလိုက်ပါ" ဆိုတဲ့အဓိပ္ပါယ် ဖြစ်ပါတယ်။ font-size: 80%;ဆိုတာဟာ "ပုံမှန်သုံးရမယ့် Size ထက် နည်းနည်းသေးပြီး သုံးလိုက်ပါ" ဆိုတဲ့ အဓိပ္ပါယ်ပဲ ဖြစ်ပါတယ်။ နည်းနည်းသေးလို့ ပြောလိုက်တာဖြစ်လို့ ဘယ်လောက်သေးမလဲဆိုတာ Parent Element ပေါ် မူတည်နေ ပါတယ်။ ဥပမာလေးနဲ့ ကြည့်နိုင်ပါတယ်။ ကျွန်တော်တို့မှာ ဒီလို Element Structure ရှိတယ်ဆိုပါစို့...

<body>
  <p>
    …
    <b> … </b>
    …
  </p>
</body>

<body> Element အတွက် Fix Size တစ်ခု သတ်မှတ်ပေးပြီး ကျန် Element တွေကို Relative Unit ဖြစ်တဲ့ % သုံးပါမယ်။

body {
  font-size: 16px;
}
p {
  font-size: 200%; /* Generally equal to 32px */
}
p b {
  font-size: 40%; /* Approximately 12px (40% of 32px) */
}

မှတ်ချက် ။ ။CSS ထဲမှာ မှတ်ချက်တွေ ထည့်သွင်းရေးသားလိုရင် /* အဖွင့်နဲ့ */ အပိတ်ကြားထဲမှာ ရေးသားနိုင်ပါတယ်။ လက်တွေ့အလုပ် လုပ်တဲ့အခါ /* */ကြားထဲမှာ ရေးသားထားတာတွေကို ထည့်သွင်းအလုပ်လုပ်မှာ မဟုတ်ပါဘူး။

em Unit ရဲ့သဘောက % နဲ့ ဆင်ပါတယ်။ 1.5em ဆိုတာ "တစ်လုံးခွဲစာ" ဆိုတဲ့ အဓိပ္ပါယ်ဖြစ်ပြီး၊ 3em ဆိုတာ "သုံးလုံးစာ" ဆိုတဲ့ အဓိပ္ပါယ်ဖြစ်ပါတယ်။ မူလဖော်ပြရမယ့်စာလုံးရဲ့ "သုံးလုံးစာသုံးပြီး ဖော်ပြပါ" ဆိုတော့ "သုံးဆကြီး ပြီး ဖော်ပြပါ" လို့ ပြောလိုက်တာနဲ့ အတူတူပဲလို့ ဆိုနိုင်ပါတယ်။ ဒါပေမယ့် ဒါက font-size မို့လို့ပါ။ တစ်ခြား Size တွေမှာတော့ နည်းနည်း စဉ်းစားစရာရှိပါတယ်။ width: 30em; ဆိုတာ Element ရဲ့ အကျယ်ကို စာလုံး အလုံး (၃၀) စာပေးလိုက်ပါလို့ ဆိုလိုတာ ဖြစ်ပါတယ်။ width: 50%; ဆိုတာက သတ်မှတ်ရမယ့်အကျယ်ရဲ့ ထက်ဝက်ပဲသတ်မှတ်လိုက်ပါ လို့ ဆိုလိုတာပါ။ အဓိပ္ပါယ်ခြင်း သိပ်မတူ တော့ပါဘူး။ ဒါကြောင့်၊ em နဲ့ % ဟာ font-size အတွက်တော့ သဘောတရားအတူတူပါပဲ။ ဒါပေမယ့် တစ်ခြား Size တွေဖြစ်တဲ့ Border Size, Width, Height, Margin, Padding အစရှိတဲ့ နေရာတွေမှာတော့ မတူတော့ပါဘူး။

px လို့ Fixed Unit သုံးသင့်လား % နဲ့ em လို့ Relative Unit သုံးသင့်လားဆိုတဲ့ အငြင်းအခုန်က ကနေ့ထိ Web Developer တွေကြားထဲမှာ ရှိနေဆဲ ဖြစ်ပါတယ်။ တစ်ချို့ကတော့ Relative Unite တွေဟာ တစ်ခါ တစ်ရံ ခန့်မှန်းရခက်ပြီး User Setting ကို မှီခိုနေလို့ Design ရဲ့ အသေးစိတ် Detail ကို ထိခိုက်စေတယ်လို့ ဆိုကြပါတယ်။ တစ်ချို့ကတော့ Fixed Unit တွေသုံးမယ်ဆိုရင် အသုံးပြုသူက Browser Function တွေဖြစ်တဲ့ Zoom-In/Zoom-Out တွေ အလုပ်မလုပ်တော့လို့ Accessibility ရှု့ဒေါင့်အရ Relative Unit တွေသာ သုံးသင့်တယ်လို့ ဆိုကြပြန်ပါတယ်။

မှတ်ချက် ။ ။ ဒုတိယအဆိုက သိပ်မမှန်တော့ပါဘူး။ တစ်ချိန်က လူသုံးများခဲ့တဲ့ Internet Explorer 6 မှာ Font Size တွေကို px နဲ့ သတ်မှတ်ခဲ့ရင် Browser Zoom-Out လုပ်လည်း စာလုံးတွေက ကြီးမလာတာမျိုး ဖြစ်ခဲ့ပါတယ်။ ဒါပေမယ့် ဒီစာရေးနေချိန်မှာ တစ်ကမ္ဘာလုံး အတိုင်းအတာနဲ့ Internet Explorer 6 အသုံးပြုသူ 1% တောင် မရှိတော့ပါဘူး။ လက်ရှိအဓိက Browser အားလုံးက px နဲ့ပေးထားလည်း အဆင်ပြေအောင် Zoom-In/Zoom-Out လုပ်ပေးနိုင်ကြပါတယ်။

အားသာချက် အားနည်းချက်ဟာ နှစ်မျိုးလုံးမှာရှိလို့ အသုံးပြုသူ Developer ရဲ့ ရွေးချယ်မှုကသာ အဓိက ဖြစ်ပါတယ်။ ကိုယ့်ရဲ့ Design Decision ပေါ်မူတည်အသုံးပြုရမှာဖြစ်လို့ ဘာတော့သုံးသင့်တယ်၊ ဘာကို မသုံးသင့်ဘူးလို့ အသေ မှတ်လို့ ရနိုင်မှာ မဟုတ်ပါဘူး။ သင့်တော်တယ်လို့ ယူဆတဲ့ Unit ကိုသာ အသုံးပြု ပါလို့ ဆိုချင်ပါတယ်။ ကျွန်တော်က တော့ ဒီအခန်းမှာ ဖော်ပြမယ့် နမူနာအများစုမှာ px Unit ကိုသာ သုံးပါမယ်။ အခန်း (၁၇) Mobile Webကျရင်တော့ em နဲ့ % နှစ်ခုလုံးကို အသုံးပြုပြီး နမူနာတွေကို ဖော်ပြပေးမှာ ဖြစ်ပါတယ်။

Typography အနေနဲ့ သတိပြုသင့်တာတစ်ခုက၊ စာလုံးတွေကို Size ရွေးချယ်သတ်မှတ်တဲ့အခါ Balance လို့ခေါ်တဲ့ ညီညွတ်မျှတမှုရှိစေဖို့ အချိုးလိုက် အသုံးပြုသင့်ပါတယ်။ စိတ်ကူးနဲ့ ကောင်းမယ်ထင်သလို သတ်မှတ်ရင် Balance အဖြစ်လို့ ဖတ်ရတာ မချောမွေ့တာမျိုး ဖြစ်တက်ပါတယ်။ ပုံ (၃-ည) မှာ နမူနာ အချိုးတစ်ခုကို လေ့လာကြည့်ရှု့ နိုင်ပါတယ်။

ပုံ (၃-ည) – Typographic Scale

Text တွေနဲ့ပက်သက်ပြီး နောက်ထပ်အသုံးဝင်တဲ့ Property ကတော့ line-height ဖြစ်ပါတယ်။ စာကြောင်း တစ်ကြာင်းရဲ့ အမြင့် ဘယ်လောက်ရှိရမလဲ သတ်မှတ်ဖို့အတွက် အသုံးပြုနိုင်ပါတယ်။ ဥပမာ - font-size က 16px ဖြစ်ပြီး စာကြောင်းအမြင့်ကလည်း 16px ဖြစ်နေရင် စာကြောင်းတွေဟာ တစ်ခုနဲ့တစ်ခု ကွက်တိကပ်နေမှာ ဖြစ်ပါတယ်။ ဖတ်လို့သိပ်အဆင်မပြေပါဘူး။ Typography ရှု့ဒေါင့်ကနေ ပညာရှင်တွေ အကြံပြုကြတာကတော့ line-height ကို စာလုံး Size ရဲ့ တစ်ဆခွဲသတ်မှတ်ခြင်းဟာ ဖတ်ရှု့ရ အဆင်အပြေ ဆုံး ဖြစ်တယ်လို့ ဆိုကြပါ တယ်။ ဒါကြောင့် ကျွန်တော်ကတော့ အမြဲဒီလို သုံးလေ့ ရှိပါတယ်။

body {
  font-size: 16px;
  line-height: 1.5em;
}

line-height ကို 1.5em လို့ ပြောလိုက်တော့ နောက်ပိုင်း font-size ပြောင်းလည်း line-height ကို လိုက်ပြောင်းစရာ မလိုတော့ဘူးပေါ့။ line-height က အမြဲတမ်း စာလုံးတစ်လုံးခွဲစာ နေရာယူနေမှာပဲ ဖြစ်ပါတယ်။ အတိအကျသတ်မှတ်ချင်ရင်လည်း ဥပမာအားဖြင့် line-height: 22px;ဆိုပြီး အတိအကျ သတ်မှတ်နိုင် ပါတယ်။

ပုံ (၃-ဋ) – Line Height in Typography

ပုံ (၃-ဋ) မှာ သင့်တော်တဲ့ Line Height က ဖတ်ရှု့ချောမွေ့မှုကို ထောက်အကူဖြစ်စေပုံကို ဖော်ပြပေးထား ပါတယ်။ Line Height နဲ့ပက်သက်ရင် နောက်ထပ် သတိပြုသင့်တာကတော့ Vertical Rhythm ဖြစ်ပါတယ်။ တစ်ချို့စာပိုဒ် တွေမှာ သုံးထားတာက Line Height တစ်မျိုး တစ်ချို့စာပိုဒ်တွေမှာ နောက်တစ်မျိုးဆိုရင်လည်း ဖတ်ရှု့ရ မချောမွေ့ တာမျိုး ဖြစ်တက်ပါတယ်။ ပုံ (၃-ဌ) မှာ နှိုင်းယှဉ် လေ့လာကြည့်နိုင်ပါတယ်။

ပုံ (၃-ဌ) – Vertical Rhythm in Typography

ဒီကဏ္ဍမှာ ဖြည့်စွက်မှတ်သားသင့်တဲ့ Property နှစ်ခုကတော့ letter-spacing နဲ့ word-spacing တို့ပဲ ဖြစ်ပါတယ်။ စာလုံးတစ်လုံးနဲ့တစ်လုံးကြား အကွာအဝေးကိုသတ်မှတ်ဖို့ letter-spacing ကို သုံးနိုင်ပါတယ်။ စကားစုတစ်စုနဲ့တစ်စုကြား အကွာအဝေးကို သတ်မှတ်ချက်ရင်တော့ word-spacing ကို သုံးနိုင်ပါတယ်။

p {
  letter-spacing: -1px;
  word-spacing: 4px;
}

နမူနနာမှာ letter-spacing ကို -1px လို့ပြောလိုက်တော့ စာလုံးတစ်လုံးနဲ့တစ်လုံး ကွာမသွားတဲ့အပြင် ပိုပြီးကပ်သွားမှာဖြစ်ပါတယ်။ Minus နဲ့လည်း ပေးလို့ရတယ်ဆိုတာ သတိပြုမိအောင် ဖော်ပြပေးတာပါ။ စာလုံးတွေအကြောင်း ပြောလက်စနဲ့ Typography မှာ ထည့်သွင်းသတိပြုသင့်တဲ့ အချက်တစ်ချက်ကို ဖြည့်စွက် ချင်ပါတယ်။ အဲ့ဒါကတော့ Measure လို့ခေါ်တဲ့ စာပိုဒ် အကျယ်ဖြစ်ပါတယ်။ သိပ်ကျယ်လွန်းရင် ဖတ်ရခက်သလို၊ သိပ်ကျဉ်းလွန်းရင်လည်း ဖတ်ရခက်ပါတယ်။ မျှတတဲ့အကျယ်ကတော့ စာလုံး (၃၀) စာလောက် ဖြစ်တယ်လို့ ဆိုကြပါတယ်။ ဒါကြောင့် ကျွန်တော်ကတော့ စာပိုင်းတိုင်းကို width Property သုံးပြီး ဒီလိုသတ်မှတ်လေ့ ရှိပါတယ်။

p {
  font-size: 14px;
  width: 30em;
}

ပုံ (၃-ဍ) မှာ နှိုင်းယဉ်လေ့လာကြည့်ပါ။

ပုံ (၃-ဍ) – Measure in Typography

Styling Lists and Tables

<ul> <ol> Element တွေနဲ့ Document ထဲမှာ ထည့်သွင်းထားတဲ့ List တွေရဲ့ Bullet နဲ့ Number Style သတ်မှတ်ပုံတွေကို ဖော်ပြပေးချင်ပါတယ်။ list-style-type Property ကိုသုံးပြီး Marker အဖြစ်ဖော်ပြစေ လိုတဲ့ Number သို့မဟုတ် Bullet ကို သတ်မှတ်နိုင်ပါတယ်။ တွဲဖက်အသုံးပြုနိုင်တဲ့ Value တွေကတော့ circle(○), disc(●), square(■), decimal (1-2-3), lower-alpha (a-b-c), lower-roman (i-ii-iii), upper-alpha (A-B-C), upper-roman (I-II-III) တို့ပဲ ဖြစ်ပါတယ်။ armenian, georgian, greekစတဲ့ Value တွေလည်း ရှိသေးပေမယ့် အသုံးနည်းပါတယ်။ list-style-type မသတ်မှတ်ထားရင် <ul> အတွက် disc ကို Default အနေနဲ့ အသုံးပြုပြီး <ol> အတွက် decimal ကို Default အနေနဲ့ အသုံးပြု ဖော်ပြပေးမှာ ဖြစ်ပါတယ်။ Bullet တွေ Number တွေ မလိုချင်လို့ ဖြုတ်ပြစ်ချင်ရင်တော့ none ကို သုံးရပါတယ်။ List ဆိုတိုင်း Bullet နဲ့ဖော်ပြချင်တာမဟုတ်လို့ none ကလည်း အသုံးများပါတယ်။

နောက်ထပ်အသုံးဝင်တဲ့ List Property ကတော့ list-style-image ဖြစ်ပါတယ်။ List Marker ဖြစ်တဲ့ Bullet တွေ Number တွေအစား Icon Image လေးတွေ နဲ့ Marker အဖြစ် အသုံးပြုဖော်ပြလိုရင် အသုံပြုနိုင်ပါတယ်။

ul {
  list-style-image: url(arrow.png);
}

list-style-image အတွက် Value ကို background-image မှာလိုပဲ url() နဲ့ သတ်မှတ်ပေး ရပါတယ်။

<table> Element ကို Style တွေသတ်မှတ်ဖို့ ဖြည့်စွက်လေ့လာရမယ့် Property နှစ်ခုရှိပါတယ်။ border-spacing နဲ့ border-collapse တို့ပဲဖြစ်ပါတယ်။ border-spacing Property ကို Table Cell တွေ တစ်ခုနဲ့တစ်ခုကြားက အကွာအဝေးသတ်မှတ်ဖို့ အသုံးပြုရပါတယ်။ border-collapse ကိုတော့ Table Cell တွေမှာ ဘယ်လို Border Style ကိုအသုံးပြုရမလဲ သတ်မှတ်ဖို့အသုံးပြုရပါတယ်။

ပုံ (၃-ဎ) မှာဖော်ပြပေးထားတဲ့ Table Style ရအောင် ဒီလိုရေးသား ပေးရမှာဖြစ်ပါတယ်။

table {
  border-spacing: 1px;
  background: #247;
}
td {
  background: white;
  border-collapse: collapse;
}
th {
  color: white;
}

ပုံ (၃-ဎ) CSS Table Style

နမူနာမှာ border-spacing: 1px;ကို table အတွက် သတ်မှတ်ပေးပြီး border-collapse: collapse;ကိုတော့ td အတွက် သတ်မှတ်ပေးထားတာ ဖြစ်ပါတယ်။ အမှန်တော့ Cell တွေကြားထဲမှာ တွေ့နေရ တဲ့ Border ပုံစံလိုင်းတွေက Border မဟုတ်ပါဘူး။ Table Background Color ကို Cell တွေကြားထဲမှာ ရှိနေတဲ့ Space ကနေ မြင်တွေ့နေရလို့ Border လိုင်းလေးတွေလို့ ထင်စရာဖြစ်နေတာ ဖြစ်ပါတယ်။ ဒီနည်းလမ်းက Table တွေကို Border လိုင်းတွေနဲ့ ဖော်ပြလိုတဲ့အခါ အသုံးပြုလေ့ရှိတဲ့ နည်းလမ်းပဲ ဖြစ်ပါတယ်။

အခုဆိုရင် CSS အခြေခံ Property တွေ စုံသလောက်ရှိသွားပါပြီ။ ဒါပေမယ့် CSS ကို ဘယ်နားမှာရေးပြီး HTML Document နဲ့ဘယ်လိုချိတ်ဆက်ရလဲ မပြောရသေးပါဘူး။ ဆက်ကြည့်ချင်ပါတယ်။

External CSS

CSS Rule ထည့်သွင်းရေးသားထားတဲ့ File တွေကို css Extension နဲ့ သိမ်းဆည်းပေးရပါတယ် (ဥပမာ - style.css, layout.css, widget.css)။ ပြီးခဲ့တဲ့ HTML အခန်းမှာ ပြောခဲ့သလိုပဲ File တစ်ခုဟာ ဘာ File လဲဆိုတာကို ကွန်ပျူတာက ဆုံးဖြတ်ဖို့ File ရဲ့ Content-Type Attribute က အဓိက ဖြစ်ပါတယ်။ ဒါပေမယ့် File Extension ကို css သိမ်းဆည်း ပေးလိုက်ရင် Content-Type Attribute ကို သီးခြားသတ်မှတ်နေစရာ မလို တော့ပဲ ကွန်ပျူတာက CSS Style File မှန်း သိရှိသွားစေမှာဖြစ်ပါတယ်။

CSS File တွေကို Web Document ထဲမှာ ချိတ်ဆက်အသုံးပြုလိုရင် <link> Element ကို အသုံးပြု ချိတ်ဆက် ရပါတယ်။ ဥပမာ -

<link rel="stylesheet" href="style.css">

<link> Element ကို Favicon, RSS အစရှိတဲ့ တစ်ခြား Resource တွေနဲ့ ချိတ်ဆက်ဖို့လည်း သုံးသေးတဲ့ အတွက် rel Attribute မှာ stylesheet လို့ သတ်မှတ်ပေးဖို့ အပ်ပါတယ်။ href Attribute မှာတော့ CSS File ရှိနေတဲ့ URL ကို ထည့်သွင်းပေးရပါတယ်။ ဒီလိုချိတ်ဆက်ပေးလိုက်ခြင်းဟာ ဒီ Document ကိုဖော်ပြတဲ့အခါ style.css ထဲမှာ သတ်မှတ်ထားတဲ့အတိုင်း ဖော်ပြပေးပါလို့ ကြေငြာလိုက် ခြင်းလည်း ဖြစ်ပါတယ်။

<link> Element ကို နှစ်သက်ရာနေရာမှာ ထည့်သွင်းနိုင်ပေမယ့်၊ ကြေငြာချက်တစ် မျိုးဖြစ်လို့ <head> Element အတွင်းမှာထည့်သွင်းပေးမှ ပိုမိုထိရောက်မှာ ဖြစ်ပါတယ်။ ဥပမာ - Browser က <body> Element ထဲက အချက် အလက်တွေကို မဖော်ပြခင် ဘယ်လို Style နဲ့ ဖော်ပြရမလဲ ကြိုတင်ပြင်ဆင်နိုင်လို့ ဖော်ပြတဲ့အခါ ပိုမိုချောမွေ့အဆင် ပြေစေမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် <link> Element ကို <head> Element အတွင်းမှာပဲ ထည့်သွင်းသင့်ပါတယ်။

ဒီလို css Extension နဲ့ သိမ်းဆည်းထားတဲ့ CSS Style File တွေဟာ HTML Document နဲ့ မသက်ဆိုင်ပဲ သီးခြားဖြစ်နေစေတဲ့အတွက် External CSS လို့ ခေါ်ပါတယ်။ External CSS ရဲ့အားသာချက် နှစ်ချက်ရှိပါတယ်။ နံပါတ် (၁) ကတော့ Style တွေကို ခွဲထုတ်လိုက်တဲ့ အတွက် HTML Document ဟာ Semantic Data Structure အဖြစ် သီးခြားရပ်တည်နိုင်သွားမှာပဲ ဖြစ်ပါတယ်။ CSS ကို ဖန်တီးတီထွင်ရတဲ့ ရည်ရွယ်ချက်ကလည်း ဒီရည်ရွယ် ချက်နဲ့ပဲ တီထွင်ခဲ့တာ ဖြစ်ပါတယ်။

နံပါတ် (၂) ကတော့ CSS Style File တစ်ခုကို HTML Document ပေါင်းများစွာက ချိတ်ဆက်ရယူ အသုံးပြုနိုင်လို့ တူညီတဲ့ Style တွေကို ထပ်ခါထပ်ခါ ပြန်ရေးစရာမလိုတော့တဲ့ Reusable အားသာချက် ရရှိသွားစေပါတယ်။ ဒီလို Style File တစ်ခုကို ဝေမျှသုံးတဲ့အတွက် အသွင်အပြင်ပိုင်း ပြင်ဆင်မှုတွေ ပြုလုပ်ဖို့ လိုအပ်လာရင်လည်း Style File မှာ ပြင်လိုက်ယုံနဲ့ ချိတ်ဆက်ရယူပြီး ဝေမျှသုံးထားတဲ့ Document အားလုံးကို တစ်ပြိုင်တည်း Effect ဖြစ်စေမှာဖြစ်လို့ ပြင်ဆင်မှုတွေ ပြုလုပ်ရတာလည်း များစွာလွယ်ကူ သွားစေမှာဖြစ်ပါတယ်။ ပြီးတော့ Cache အားသာချက်ကလည်း ရှိပါသေးတယ်။ Document တစ်ခုကို ရယူလိုက်တဲ့အခါ သက်ဆိုင်ရာချိတ်ဆက်ထားတဲ့ Style File ကိုပါ Browser က Cache လုပ်ထားနိုင်မှာ ဖြစ်ပါတယ်။ အဲ့ဒီ Style File ကိုပဲ သုံးထားတဲ့ နောက် Document တစ်ခုကို ရယူတဲ့ အခါမှာ Style File က အတူတူပဲဖြစ်လို့ ထပ်ယူစရာမလိုတော့ပဲ Cache လုပ်ထားတာကို အသုံးပြုနိုင်တဲ့အတွက် Performance ပိုင်းမှာ ပိုမိုကောင်းမွန်သွားမှာပဲ ဖြစ်ပါတယ်။ ဒါကြောင့် နည်းလမ်းအမျိုးမျိုးရှိတဲ့အနက်က ဒီ External CSS နည်းကိုပဲ လက်တွေ့မှာ အသုံးပြုသင့်တာ ဖြစ်ပါတယ်။

Internal CSS

နောက်ထပ်နည်းလမ်းတစ်ခုအနေနဲ့ CSS တွေကို HTML Document အတွင်းမှာ <style> Element သုံးပြီး ထည့်သွင်းရေးသားနိုင်ပါတယ်။ HTML Document ထဲမှာ ရေးသားထားလို့ Internal CSS လို့ခေါ်ပါတယ်။ Document တစ်ခုတည်းအတွက် သီးခြား သတ်မှတ်ဖို့လိုအပ်တဲ့ Style တွေ ရေးသားဖို့ အသုံးဝင်ပါတယ်။ External CSS ကရတဲ့ Style တွေသီးခြားခွဲထုတ်နိုင်ခြင်းနဲ့ Reusable အားသာချက် တွေတော့ Internal CSS မှာ ရရှိမှာမဟုတ် ပါဘူး။ သူလည်းပဲ နှစ်သက်ရာနေရာမှာ ရေးသားနိုင်ပေမယ့် <head> Element အတွင်းမှာ ရေးသားသင့်ပါတယ်။

<style>
  body {
    font-size: 16px;
    line-height: 1.5em;
    color: #222;
  }
  h1 {
    font-size: 21px;
    font-weight: normal;
  }
  …
</style>

<style> Element အတွက် အရင်က type="text/css" ဆိုတဲ့ Attribute ထည့်သွင်းပေးရလေ့ ရှိပါတယ်။ ဒါပေမယ့် လက်တွေ့မှာ CSS အပြင် တစ်ခြားတွင်တွင်ကျယ်ကျယ်သုံးတဲ့ Style Language မရှိသလို type Attribute မရှိတဲ့အခါ Browser တွေက အလိုအလျှောက် CSS လို့ နားလည်ပေးသွားမှာ ဖြစ်လို့ ထည့်စရာ မလိုအပ်တော့ပါဘူး။

Inline CSS

နောက်တစ်နည်းကတော့ သက်ဆိုင်ရာ Element မှာ style Attribute ကိုသုံးပြီး ရေးသားခြင်းပဲဖြစ်ပါတယ်။ Element နဲ့အတူတွဲဖက်သတ်မှတ်ထားလို့ Inline CSS လို့ ခေါ်ပါတယ်။ သက်ဆိုင်ရာ Element နဲ့အတူ တွဲဖက်ရေးသားတာဖြစ်လို့ သူ့မှာ Selector တော့မလိုတော့ပါဘူး။ Property နဲ့ Value တွေချည်းပဲရေးသား ပေးရမှာဖြစ်ပါတယ်။

<p style="color:red; font-style:italic;"> … </p>

Inline CSS ကိုတော့ အတက်နိုင်ဆုံး ရှောင်ရမှာဖြစ်ပါတယ်။ မသုံးလေ ကောင်းလေပါပဲ။ Style တွေကိုသာ HTML Element တွေနဲ့ တွဲရေးချင်ရင် CSS တောင် ကျွန်တော်တို့ သုံးမနေပါပါဘူး။ HTML မှာလည်း <font> <center>တို့လို Style သတ်မှတ်တဲ့ Element တွေ bgcolor, borderတို့လို Style သတ်မှတ်တဲ့ Attribute တွေ ရှိနေလို့ စကတည်းက ဒီ Element နဲ့ Attribute တွေ အသုံးပြုလိုက်ယုံပါပဲ။

Inline CSS အသုံးဝင်တဲ့နေရာတော့ ရှိပါတယ်။ အဲ့ဒါကတော့ Javascript နဲ့ Interactive User Interface တွေ တည်ဆောက်တဲ့နေရာမှာပဲ ဖြစ်ပါတယ်။ Javascript ကနေ လိုအပ်တဲ့ Interface Interaction ကိုရရှိဖို့ Inline CSS ကို သင့်တော်သလို အသုံးပြု သွားမှာ ဖြစ်ပါတယ်။ နောက်တစ်ခန်းမှာ Javascript လေ့လာတဲ့ အခါ တွေ့ရမှာပဲ ဖြစ်ပါတယ်။

လိုရင်းကတော့ Inline CSS ဟာ Javascript နဲ့ တွဲဖက်အသုံးပြုဖို့ အသုံးဝင်ပေမယ့် Document Style သက်မှတ်ဖို့သက်သက်အတွက်ဆိုရင် အသုံးမပြုသင့်တဲ့ နည်းလမ်းတစ်မျိုးပဲ ဖြစ်ပါတယ်။

Multiple Stylesheets and Cascading Order

Browser က Style နဲ့ပက်သက်ပြီး အလုပ်လုပ်တဲ့အခါ Default → External Style → Internal Style → Inline Style ဆိုတဲ့ အစီအစဉ်အတိုင်း လုပ်သွားလေ့ရှိပါတယ်။ ဒါကို Cascading Order လို့လည်း ခေါ်ပါတယ်။ ရှိသမျှ Style တွေအားလုံးကို အစီအစဉ်အတိုင်း အလုပ်လုပ်ပေးသွားတာ ဖြစ်ပါတယ်။

Element တစ်ခုအတွက် External Style အနေနဲ့ ရေးထားတဲ့ Rule နဲ့ Internal Style အနေနဲ့ ရေးသားထားတဲ့ Rule ထပ်နေခဲ့ရင်၊ နောက်မှအလုပ်လုပ်တဲ့ Internal Rule က External Rule ကို Overwrite လုပ်သွားလို့ Internal Rule ကသာ အတည်ဖြစ်နေစေမှာ ဖြစ်ပါတယ်။ Inline Style တွေကို တော့ နောက်ဆုံးမှ အလုပ်လုပ်လို့ Inline Style သာ သတ်မှတ်ထားရင် ကျန်အားလုံးကို Overwrite လုပ်သွားမှာဖြစ်ပါတယ်။

လက်တွေ့မှာ HTML Document တစ်ခုနဲ့ ချိတ်ဆက်အသုံးပြုတဲ့ External Style တွေလည်း တစ်ခုထက် ပိုရှိတက် ပါတယ်။ ဒီ External Style တွေထဲမှာကို တစ်ခုနဲ့တစ်ခု ပြန်ထပ်နေတဲ့ Rule တွေလည်း ရှိတက် ပါတယ်။ အရိုးရှင်း ဆုံး နားလည်ထားစေချင်တာက Browser တွေက CSS Rule တွေကို အခြေခံအားဖြင့် တစ်လိုင်းချင်း (Line-by -Line) အစီအစဉ်အတိုင်း အလုပ်လုပ်သွားတယ်လို့ နားလည်စေချင်ပါတယ်။ ဒါကြောင့် Rule တွေ ထပ်လာတဲ့အခါ အရင်သတ်မှတ်ခဲ့တဲ့ Rule ကို နောက်မှသတ်မှတ်တဲ့ Rule က Overwrite လုပ်သွားမှာပဲ ဖြစ်ပါတယ်။ <link> Element နဲ့ ချိတ်ဆက်တဲ့အခါ နောက်မှချိတ်ဆက်တဲ့ CSS File ထဲက Style တွေက အရင်ချိတ်ဆက်ထားတဲ့ File ထဲက Style တွေကို (ထပ်နေခဲ့ရင်) Overwrite လုပ်သွားမှာပဲ ဖြစ်ပါတယ်။

/* First Declaration for <h3> */
h3 {
  font-size: 18px;
  text-align: center;
  color: red;
}

…

/* Another Declaration for <h3> again */
h3 {
  font-size: 21px;
  text-align: left;
}

ပေးထားတဲ့ နမူနာမှာ h3 Selector သုံးပြီး ရေးထားတဲ့ CSS Rule က နှစ်ကြိမ်ဖြစ်နေပါတယ်။ ပထမတစ်ကြိမ်မှာ font-size, text-alignနဲ့ color တို့ သတ်မှတ်ထားပြီး နောက်တစ်ကြိမ် မှာတော့font-size နဲ့ text-align ကို ထပ်သတ်မှတ်ထားပါတယ်။ နှစ်ခါရေးထားပေမယ့် တစ်ကယ်ပြန်ထပ်တာက font-size နဲ့ text-align သာဖြစ်ပါတယ်။ color ကို နောက်တစ်ခါ ထပ်မကြေငြာလို့ ပြန်မထပ်တော့ပါဘူး။ h3 အတွက် ပေါင်းစပ်လိုက်တဲ့ နောက်ဆုံးရလဒ် ကတော့ အခုလိုဖြစ်သွားမှာပါ။

h3 {
  font-size: 21px;
  text-align: left;
  color: red;
}

Rule တွေထပ်လာတဲ့အခါ အခြေခံအားဖြင့် ဒီနည်းနဲ့ အလုပ်လုပ်ပါတယ်။ ဒါပေမယ့် Priority လို့ခေါ်တဲ့ ဦးစားပေးတွေတော့ ရှိပါတယ်။ ဥပမာ Element တစ်ခုမှာ ID ရော Class ပါ သတ်မှတ်ထားတယ် ဆိုပါစို့။

[HTML]
<p id="note" class="note"> … </p>

[CSS]
#note {
  background-color: #FFFFDD;
}
.note {
  background-color: yellow;
}

Element တစ်ခုတည်းကိုပဲ ID နဲ့ တစ်ခါ Class နဲ့တစ်ခါ Select လုပ်ပြီး ရေးထားတာဖြစ်ပါတယ်။ Class နဲ့ Select လုပ်ပြီးရေးတာက နောက်မှဖြစ်ပေမယ့် ဒီနေရာမှာ ID နဲ့ Select လုပ်ပြီးရေးထားတဲ့ background-color: #FFFFDD;ကိုပဲ အတည်ယူသွားမှာ ဖြစ်ပါတယ်။ ID Selector ဟာ Class Selector ထက် Priority မြင့်လို့ဖြစ် ပါတယ်။ Priority က ပိုပြီးတိကျတဲ့ Selector တွေကို ဦးစားပေးတာ ဖြစ်ပါတယ်။

#nav li a {
  text-decoration: underline;
}
li a {
  text-decoration: none;
}

ဒီနှစ်မှာဆိုရင်လည်း li a Selector က နောက်မှရေးပေမယ့် ပိုပြီးတိကျတဲ့ #nav li a Selector နဲ့ ရေးသား ထားတဲ့ text-decoration: underline;ကိုသာ အတည်ယူအသုံးပြုပေးသွားမှာပဲ ဖြစ်ပါတယ်။ Priority ကို !important Marker သုံးပြီး Force လုပ်လို့တော့ ရပါတယ်။ ဥပမာ -

#nav li a {
  text-decoration: underline;
}

li a {
  text-decoration: none !important;
}

Priority အရ #nav li aက မြင့်ပေမယ့် li aထဲက text-decoration: noneမှာ !important Marker ပါနေတဲ့အတွက် အဲ့ဒီ text-decoration: noneကို ဦးစားပေးပြီး အတည်ယူပေးသွားမှာပဲ ဖြစ်ပါတယ်။

Display Types

HTML Element တွေကို Display Type ပေါ်မူတည်ပြီး အဓိကအားဖြင့် နှစ်အုပ်စုခွဲလို့ရပါတယ်။ Block နဲ့ Inline ဖြစ်ပါတယ်။

Block Element တွေဟာ Parent Element ရဲ့အကျယ် (width) ရှိသလောက် နေရာအပြည့်ယူတဲ့ Element အမျိုးအစားတွေ ဖြစ်ပါတယ်။ လိုအပ်ရင် width နဲ့ height Property တွေသုံးပြီး အကျယ်နဲ့အမြင့်ကို လိုသလို သတ်မှတ်နိုင် ပါတယ်။ ထူးခြားတာကတော့ သူတို့ရဲ့ဘေးမှာ တစ်ခြား Element တွေကို နေရာ မပေးပဲ၊ နောက်တစ် လိုင်းကို ဆင်းပြီး ဖော်ပြစေတာပဲ ဖြစ်ပါတယ်။ <h1> ကနေ <h6> <p> <ul> <li> Element တွေဟာ Block Element တွေပဲဖြစ်ပါတယ်။

Inline Element တွေကတော့ Block နဲ့ ပြောင်းပြန်ဖြစ်ပါတယ်။ Element Content ရှိသလောက်ပဲ အမြဲနေရာယူ ပါတယ်။ အကျယ်နဲ့အမြင့်ကို ပြုပြင်သတ်မှတ်လို့ မရပါဘူး။ အမြဲတမ်း Element Content ရှိသလောက်သာ နေရာယူတဲ့ Element တွေပဲဖြစ်ပါတယ်။ Inline ဆိုတဲ့အတိုင်း လိုင်းတစ်ခုအတွင်းက အစိတ်အပိုင်းတစ်ခုဖြစ်လို့ တစ်ခြား Inline Element တွေနဲ့ ဘေးချင်းယှဉ်လျက် ဖော်ပြပေးမှာ ဖြစ်ပါတယ်။ ဘေးချင်းယှဉ်ဖော်ပြပေးဖို့ နေရာမဆန့် တော့မှသာ နောက်တစ်လုံးကိုဆင်းပြီး ဖော်ပြလေ့ရှိတဲ့ Element များပဲ ဖြစ်ပါတယ်။ <b> <i> <em> <strong>အပါအဝင် Formatting Element တွေနဲ့ <a> Element တို့ဟာ Inline Element များပဲဖြစ်ပါတယ်။

Element တွေရဲ့ Display Type ကို display Property နဲ့ ပြောင်းလဲသတ်မှတ်လို့ရပါတယ်။ ဥပမာ - Inline Element ဖြစ်တဲ့ <a> Element ကို Block ပြောင်းလိုရင် အခုလို သတ်မှတ်နိုင်ပါတယ်။

a {
  display: block;
}

အလားတူပဲ Block Element တွေကို Inline အဖြစ် ပြောင်းလဲသတ်မှတ်လိုရင်လည်း display: inline; လို့ ကြေငြာသတ်မှတ် နိုင်ပါတယ်။ ဒါပေမယ့် Block ကို Inline ပြောင်းဖို့ လိုခဲပါတယ်။ အများအားဖြင့် Inline Element တွေကိုသာ Block ပြောင်းကြလေ့ရှိပါတယ်။ ပြောင်းတဲ့ ရည်ရွယ်ချက်က width, height Property တွေနဲ့ အမြင့်အကျယ်ကို သတ်မှတ်လိုလို့ ပြောင်းကြတဲ့သဘော ဖြစ်ပါတယ်။ Inline Element တွေက သဘာဝအရ အမြင့်နဲ့အကျယ်ကို ကျွန်တော်တို့ သတ်မှတ်ပေးလို့မရတဲ့အတွက် သူတို့ကို Block ပြောင်းပြီးမှ သတ်မှတ်ရတာ ဖြစ်ပါတယ်။ ဥပမာ <a> Element တစ်ခုအတွက် အခုလို့ သတ်မှတ်ရေးသားနိုင်ပါတယ်။

a {
  display: block;
  width: 200px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  background-color: #519B7E;
  color: #FFF;
  border-radius: 20px;
}

ဒီလိုရေးသားသတ်မှတ်လိုက်ရင် ရရှိမယ့်ရလဒ်ကတော့ ဒီလိုပုံစံရရှိမှာ ဖြစ်ပါတယ်။

ရိုးရိုး Link တစ်ခုကို Button တစ်ခုနဲ့တူအောင် လုံးဝပြောင်းလဲပြစ်လိုက်တာပါ။ ဒီနေရာမှာ display: block;သတ်မှတ်ခဲ့လို့သာ ဆက်လက်သတ်မှတ်ထားတဲ့ width နဲ့ height အလုပ်လုပ် သွားတာဖြစ် ပါတယ်။ နမူနာမှာ ကျွန်တော်တို့မလေ့လာရသေးတဲ့ Property ကborder-radius တစ်ခုသာ ပါဝင် ပါတယ်။ ကျန် Property အားလုံးကို လေ့လာခဲ့ပြီးသားတွေကိုသာ ပေါင်းစပ်အသုံးပြုလိုက်တာပါ။ ထူးခြားချက်အနေနဲ့ line-height ကို height နဲ့အတူတူပေးထားကို သတိထားပါ။ height နဲ့ line-height ညီနေတဲ့အတွက် စာလုံးကလည်း အပေါ်အောက်အကွာအဝေးညီပြီး အလယ်ရောက် နေတာပါ။ CSS မှာ Element နဲ့ စာတွေကို Horizontal Align အတွက်ကတော့ text-align Property သုံးပြီး သတ်မှတ်လို့ရပါတယ်။ ဒါပေမယ့် Vertical Align က နည်းနည်း ခေါင်းစားပါတယ်။ Vertical Align ကို center လုပ်လိုတဲ့အခါ အသုံးပြုလေ့ရှိတဲ့ နည်းလမ်း တစ်ခုကို တပါတည်း ထည့်သွင်းဖော်ပြ လိုက်တာ ဖြစ်ပါတယ်။

Layouts

Web Document တွေအတွက် Layout တွေ ဖန်တီးတဲ့အခါ Block Element တွေကိုပဲ အသုံးပြုရပါတယ်။ အသုံးပြုကြလေ့ရှိတဲ့ Element ကတော့ <div> Element ပဲဖြစ်ပါတယ်။ <div> Element ဟာ Block Element တစ်မျိုးဖြစ်ပြီး Generic Element လို့ခေါ်ကြပါတယ်။ သူ့ကို ဘယ်နေရာမှာသုံးရမယ်လို့ အတိအကျသတ်မှတ်ထား ခြင်းမရှိပဲ Block တစ်ခုလိုအပ်တဲ့ နေရာတိုင်းမှာ သုံးနိုင်တဲ့ Element ပဲ ဖြစ်ပါတယ်။ Block တစ်ခုလိုအပ်ပြီး တစ်ခြားသင့်တော်တဲ့ Element မရှိတဲ့အချိန်မှာ <div> ကို အသုံးပြုရတာဖြစ်ပါတယ်။

မှတ်ချက် ။ ။<div> လိုပဲ အသုံးများတဲ့ နောက် Generic Element တစ်ခုက <span> ဖြစ်ပါတယ်။ သူကတော့ Inline Element ပါ။ Inline Element တစ်ခုလိုအပ်ပြီး တစ်ခြားသင့်တော်တဲ့ Element မရှိရင် <span> Element ကို အသုံးပြုနိုင်ပါတယ်။

Layout တွေဖန်တီးဖို့အတွက် float Property ကို အသုံးပြုကြရပါတယ်။ float Property ဟာ Block တွေကို ဘယ်ဘက် (သို့မဟုတ်) ညာဘက်ကပ် ဖော်ပြဖို့ သတ်မှတ်ရတဲ့ Property ဖြစ်ပါတယ်။ ပုံမှန်ဆိုရင် Block Element တွေဟာ နေရာအပြည့်ယူပြီး သူတို့ဘေးမှာ တစ်ခြား Element ကို လက်မခံပါဘူး။ ဒါပေမယ့် float လုပ်လိုက်တဲ့အခါ မှာတော့ တစ်ဘက်ကပ်ပြီး လမ်းဖယ်ပေးလိုက်တဲ့သဘော ဖြစ်သွား ပါတယ်။ လမ်းဖယ်ပေးလိုက်တဲ့အတွက် တစ်ခြား Element တွေက ဘေးမှာ နေရာဝင်ယူမယ်ဆို ဝင်ယူလို့ ရသွားတဲ့ သဘော ဖြစ်ပါတယ်။ ပုံ (၃-ဏ) မှာ နှိုင်းယှဉ် လေ့လာကြည့်ပါ။

ပုံ (၃-ဏ) CSS Layout

ပုံ (၃-ဏ) မှာ (A) နဲ့ (B) ဆိုပြီး နမူနာနှစ်ခု ပါဝင်ပါတယ်။ A မှာ Block Element (၄) ခုကို width, height, background-color ကိုယ်စီသတ်မှတ်ပေးထားပါတယ်။ Block တွေဖြစ်လို့ width ဘယ်လိုပဲ သတ်မှတ်ပေး ထားထား တစ်ခုပေါ်တစ်ခုဆင့်ပြီးတော့သာ ဖော်ပြပေးနေတာကို တွေ့ရမှာပါ။

(B) မှာတော့ float Property တွေဖြည့်စွက်အသုံးပြုပြထားပါတယ်။ width: 600px သတ်မှတ်ထားတဲ့ Main Content ကို float: left ပြောလိုက်တော့ သူကဘေးကပ်ပြီးလမ်းဖယ်ပေးပါတယ်။ ဒါပေမယ့် width: 200px ပေးထား Element ကလည်း Block ဖြစ်နေတော့ သူက သူများဘေးကို မဝင်ချင်ပါဘူး။ ဒါကြောင့် သူ့ကိုလည်း float: leftထည့်ပေးလိုက်ရပါတယ်။ အဲ့ဒီတော့မှ လွတ်နေတဲ့နေရာမှာ ဝင်ပြီးကပ်ပြီး နေရာယူ သွားမှာ ဖြစ်ပါတယ်။

ထူးခြားချက်ကတော့ အောက်ဆုံး Element မှာ clear: bothဆိုတဲ့ ကြေငြာချက် ထည့်သွင်းထားခြင်းပဲ ဖြစ်ပါတယ်။ ဆိုလိုတာက float လုပ်ပြီး လမ်းဖယ်ထားတဲ့ Element တွေနဲ့ မပက်သက်နဲ့ ဆိုတဲ့ သဘော ဖြစ်ပါတယ်။ ဒီတော့မှ သူ့အထက်က float လုပ်ထားတဲ့ Element တွေနဲ့လွတ်ကင်းတဲ့ နေရာမှာ ဖော်ပြ ပေးမှာ ဖြစ်ပါတယ်။

float နဲ့ clear ဆက်စပ်မှုလိုရင်းကိုပြောရရင် "Block တွေကို ဘေးချင်းကပ်လိုရင် float လုပ်ပါ။ မကပ်လို တော့တဲ့ Element မှာ clear ပြန်လုပ်ပေးပါ။" ဆိုတဲ့ သဘောပဲ ဖြစ်ပါတယ်။ ဒီနည်းနဲ့ လိုချင်တဲ့ Layout Design အတွက် Block တွေကို နေရာသတ်မှတ် ချထားပေးနိုင်မှာပဲဖြစ်ပါတယ်။

ပုံ (၃-ဏ) မှာ (B) ဖော်ပြထားတဲ့ Layout နမူနာအပြည့်အစုံကို ကိုယ်တိုင်စမ်းသပ်ကြည့်နိုင်ဖို့ အပြည့်အစုံ ရေးသားဖော်ပြလိုက်ပါတယ်။

<!doctype html>
<html>
<head>
  <title>CSS Layout</title>
  <style>
    .wrap {
      width: 800px;
      margin: 20px auto;
    }
    .header {
      height: 100px;
      background: #cb1212;
    }
    .content {
      width: 600px;
      height: 400px;
      background: #519b7e;
      float: left;
    }
    .sidebar {
      width: 200px;
      height: 400px;
      background: #1635a6;
      float: left;
    }
    .footer {
      height: 60px;
      background: #333;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="header"></div>
    <div class="content"></div>
    <div class="sidebar"></div>
    <div class="footer"></div>
  </div>
</body>
</html>

လက်တွေ့စမ်းသပ်ကြည့်တဲ့အခါ File တစ်ခုတည်းနဲ့ အားလုံးစမ်းနိုင်အောင်လို့ CSS ကို Internal <style> Element အသုံးပြုပြီး ရေးသားထားပါတယ်။ ကူးယူပြီး တစ်ချို့ Property တွေကို ပြင်ဆင်စမ်းသပ် ကြည့်စေချင်ပါတယ်။

မှတ်ချက် ။ ။.wrap အတွက် ထည့်သွင်းရေးသားထားတဲ့ margin: 20 auto;ရဲ့ အဓိပ္ပါယ်ကို မကြာခင် ဆက်လက် ရှင်းပြပေးပါမယ်။ .wrap ကို width: 800px ပေးထားတဲ့အတွက် .header နဲ့ .footer မှာ ပုံ (၃-ဏ) မှာ width ထပ်မံသတ်မှတ်မပေးတောတာ ကိုလည်းသတိပြုပါ။ Block Element တွေဟာ width သတ်မှတ်မထားရင် Parent Width ရှိသလောက် အလိုလိုနေရာယူမှာ ဖြစ်ပါတယ်။

ပုံ (၃-တ) CSS Layout – Another method to clear floats

ပုံ (၃-တ) မှာ float တွေကို clear လုပ်နည်း နောက်တစ်မျိုးကို ဖော်ပြပေးထားပါတယ်။ Parent Element မှာ overflow: hidden; လို့ ထည့်သွင်းပေးလိုက်ခြင်းက သူ့အတွင်းထဲက Child Element တွေမှာ သတ်မှတ် ထားတဲ့ float တွေကို အလိုလို clear လုပ်ပေးသွားပါတယ်။ ဒါကြောင့် အောက်ဆုံးက Element မှာ clear: bothလို့ ထပ်ကြေငြာစရာ မလိုအပ်တော့ပါဘူး။ ဒီနည်းကလည်း Layout ဖန်တီးတဲ့နေရာမှာ အတော်အသုံး ဝင်တဲ့ နည်းလမ်းတစ်ခုပဲ ဖြစ်ပါတယ်။

Box Model

Block Element တွေကို width နဲ့ height အပြင် border, marginနဲ့ padding လည်းသတ်မှတ်လို့ ရပါ တယ်။ margin ဆိုတဲ့ Element border အပြင်မှာ နေရာလွတ်ကို သတ်မှတ်တာဖြစ်ပြီး padding ကတော့ Element နဲ့ Element Content တို့ကြားက နေရာလွတ်ကို သတ်မှတ်တာပဲ ဖြစ်ပါတယ်။ပုံ (၃-ထ) မှာကြည့်ပါ။

ပုံ (၃-ထ) Box Model

Block တစ်ခုအတွက် Box Property တွေ အပြည့်အစုံသတ်မှတ်ထားတဲ့ ဥပမာ ဖော်ပြပါမယ်။

#content {
  width: 600px;
  height: 380px;
  border: 4px solid #519b7e;
  margin: 20px;
  padding: 10px;
  background: #ffd;
}

width နဲ့ height Property တွေအတွက် အထူးအထွေ ထပ်ပြောဖို့မလိုတော့ပါဘူး။ border Property မှာတော့ အနည်းငယ်ထူးခြားပါတယ်။ Element တစ်ခုအတွက် Border သတ်မှတ်တဲ့အခါ (၃)မျိုး သတ်မှတ် ရလေ့ ရှိပါတယ်။ border-size, border-styleနဲ့ border-color တို့ပဲဖြစ်ပါတယ်။ ဒီသုံးမျိုး မပြည့်စုံရင် Border လည်း မပြည့်စုံပါဘူး။ ဒါကြောင့် Border Property တွေကို သုံကြောင်းခွဲပြီး မရေးကြ ပါဘူး။ border ဆိုပြီး အတိုကောက် တစ်ကြောင်းတည်းပဲ ရေးကြလေ့ ရှိပါတယ်။ Value နေရာမှာသာ Size, Style, Color သုံးမျိုးလုံး အစဉ်လိုက် တန်းစီသတ်မှတ်ပေးပါတယ်။ Size နေရာမှာ နှစ်သက်တဲ့ Unit ကိုသုံးပြီး သတ်မှတ်လိုတဲ့ ပမာဏ ကို ပေးနိုင်ပါတယ်။ Style နေရာမှာတော့ (၃) မျိုး သုံးနိုင်ပါတယ်။ solid ( ___ ), dotted ( ..... ) နဲ့ dashed ( ----- ) တို့ပဲ ဖြစ်ပါတယ်။ ကျန်တဲ့ Style တွေ ရှိသေးပေမယ့် အတော်လေး အသုံးနည်းပါတယ်။ Color နေရာမှာလည်း နှစ်သက်ရာ အရောင် သတ်မှတ်ပေးနိုင်ပါတယ်။

Border အပြင်ဘက်က နေရာလွတ်ဖြစ်တဲ့ Margin သတ်မှတ်ဖို့အတွက် margin Property ကိုပဲ သုံးရ ပါတယ်။ Block တစ်ခုမှာ Top, Right, Bottom, Left ဆိုပြီး မျက်နှာစာလေးဘက်ရှိလို့ margin: 20px; ဆိုတာ လေးဘက်စလုံးအတွက် 20px အကျယ်ရှိတဲ့နေရာလွတ် ယူပါလို့ သတ်မှတ်လိုက်တာပါပဲ။ တစ်ဘက်စီ သတ်မှတ်လိုရင် margin-top, margin-right, margin-bottom, margin-left ဆိုပြီး သီးခြားစီ သတ်မှတ် ပေးနိုင်ပါတယ်။ margin ကိုပဲ အတိုကောက်သဘောမျိုး သုံးပြီး လေးဘက်လုံး အတွက် Value တွေ တန်းစီ ပေးနိုင်ပါတယ်။

ဥပမာ - margin: 10px 20px 0 5px; ရဲ့ အဓိပ္ပါယ်က margin-top: 10px; margin-right: 20px; margin-bottom: 0; margin-left: 5px; နဲ့ အတူတူပဲ ဖြစ်ပါတယ်။ Value ကို Top, Right, Bottom, Left အစီအစဉ်အတိုင်း သတ်မှတ်ပေးရတာ ဖြစ်ပါတယ်။ margin: 10px 20px; ဆိုပြီး Value မှာ နှစ်ခုတည်းပေးပြီးတော့လည်း သတ်မှတ်နိုင်ပါတယ်။ အဓိပ္ပါယ်က Top/Bottom အတွက် 10px စီ နေရာလွတ်ယူပြီး Left/Right အတွက် 20px စီနေရာလွတ် ယူလိုက်ပါလို့ သတ်မှတ်တာဖြစ်ပါတယ်။

ထူးခြားချက်တစ်ခုရှိပါတယ်။ margin-left နဲ့ margin-right အတွက် Value ကို တန်ဖိုးတွေ မသတ်မှတ်ပဲ auto လို့ သတ်မှတ်နိုင်ပါတယ်။ ဒါဆိုရင် ဘယ်ဘက်ကနေရာလွတ်နဲ့ ညာဘက်ကနေရာလွတ် ညီအောင် အလိုလို ညှိပြီးယူပေးသွားမှာဖြစ်လို့ Element က အလယ်တည့်တည့်ကို ရောက်ရှိသွားမှာ ဖြစ်ပါတယ်။ Layout အတွက် နမူပေးခဲ့တုန်းက အသုံးပြုခဲ့တဲ့ margin: 20px auto;ဆိုတာ margin Top/Bottomကို 20px လို့ သတ်မှတ် ပြီး Left/Right ကို auto လို့ သတ်မှတ်လိုက်တာပဲ ဖြစ်ပါတယ်။ ဒါကြောင့် အဲ့ဒီနမူနာ Layout ကို စမ်းသပ်ကြည့်ရင် အလယ်မှာဖော်ပြနေတာကို တွေ့ရမှာဖြစ်ပါတယ်။

မှတ်ချက် ။ ။ တန်ဖိုးတွေသတ်မှတ်တဲ့အခါ 0 ဆိုရင် နောက်ကယူနစ်တွေက မထည့်ရင်လည်း ရပါတယ်။

Border နဲ့ Element Content ကြားကနေရာလွတ်ဖြစ်တဲ့ padding ကြေငြာသတ်မှတ်ပုံဟာ Margin နဲ့ သဘောတရား အတူတူပဲဖြစ်ပါတယ်။ margin Property အစား padding Property သုံးလိုက်တာပဲ ကွာပါတယ်။ သူလည်းပဲ padding-top, padding-right, padding-bottom, padding-leftဆိုပြီး တစ်ဘက်စီခွဲပြီး သတ်မှတ်နိုင်သလို margin လို့ပဲ Value လေးမျိုးလုံး တန်းစီ ပေးပြီး အတိုကောက်လည်း သတ်မှတ်နိုင်ပါတယ်။

မှတ်ချက် ။ ။margin အတွက်တန်ဖိုးတွေကို Minus Value တွေ လိုအပ်ရင် သတ်မှတ်ပေးလို့ရပါတယ်။ ဥပမာ - margin-top: -5px;ဒါပေမယ့် padding မှာတော့ Minus Value တွေ သတ်မှတ်ပေးလို့ မရပါဘူး။

CSS Box Model မှာ မှတ်သားစရာ ထူးခြားချက်တစ်ခု ရှိပါတယ်။ အပေါ်မှာ ပေးခဲ့တဲ့ နမူနာကို နောက်တစ်ခါ ထပ်ဖော်ပြပေးလိုက်ပါတယ်။

#content {
  width: 600px;
  height: 380px;
  border: 4px solid #519b7e;
  margin: 20px;
  padding: 10px;
}

နမူနာမှာ Element အတွက် width: 600px; လို့ ကြေငြာသတ်မှတ်ပေးထားပါတယ်။ ဒါကြောင့် လက်ရှိ Document ပေါ်မှာ 600px အကျယ်ရှိတဲ့ နေရာ ယူလိုက်ပါလိမ့်မယ်။ ဆက်လက်ပြီး border: 4px solid #519b7e; လို့ သတ်မှတ်ထားပါသေးတယ်။ Browser က Border အတွက်နေရာကို width: 600px ထဲက နှုတ်မယူပါဘူး။ Document ပေါ်မှာ ထပ်တိုးယူပါတယ်။ အလားတူပဲ margin: 20px; နဲ့ padding: 10px; အတွက်လည်း Document ပေါ်မှာပဲ တိုးချဲ့နေရာယူပါတယ်။ ဒါကြောင့် နမူနာမှာ ပေးထားတဲ့ Element ဟာ width: 600px;လို့ပြောထားပေမယ့် အမှန်တစ်ကယ်နေရာယူမှာကတော့ 668px ဖြစ်ပါတယ် - 600 (width) + 8 (border left/right) + 40 (margin left/right) + 20 (padding left/right)။ အလားတူပဲ height: 380px လို့ပြောထားပေမယ့် အမှန်တစ်ကယ် နေရာယူမှာက 448px ဖြစ်ပါတယ် - 380 (height) + 8 (border left/right) + 40 (margin left/right) + 20 (padding left/right)။

ဒီအချက်ဟာ Layout တွေဖန်တီးတဲ့အခါ ထည့်သွင်းစဉ်းစားရမယ့်အချက်ဖြစ်ပါတယ်။ Element တစ်ခုရဲ့ နေရာယူမှု့ဟာ width နဲ့ height ဟာ ကြေငြာထားတဲ့အတိုင်း အတိအကျရှိနေမှာမဟုတ်ပါဘူး။ border, margin, paddingတို့အတွက် တိုးချဲ့ယူရတဲ့အတွက် အားလုံးကို ပေါင်းစပ်တွက်ချက်မှသာ တစ်ကယ် နေရာယူထားတဲ့ ပမာဏကို သိရမှာဖြစ်ပါတယ်။

ပုံ (၃-ဒ) – Content Width vs. Actual Width

အခုဖော်ပြခဲ့ပြီးဖြစ်တဲ့ Layout နဲ့ Box Property တွေကိုအသုံးပြုပြီး နောက်ထပ်စမ်းသပ်ကြည့်စရာ နမူနာတစ်ခု ရေးပေးချင်ပါတယ်။ ကျွန်တော်တို့ Website တွေမှာတွေ့နေကြ Drop Down Menu လေးတစ်ခုလောက် လုပ်ကြည့်ချင်ပါတယ်။

<!doctype html>
<html>
<head>
  <title>CSS Drop-Down Navigation</title>
  <style>
    .nav, .sub {
      font-family: Arial, Helvetica, sans-serif;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav li {
      background: #cb1212;
      height: 40px;
      line-height: 40px;
      text-align: center;
      width: 160px;
    }
    .nav li a {
      display: block;
      text-decoration: none;
      color: #fff;
    }
    .nav li a:hover {
      background: #f00;
    }
    .nav > li {
      border-right: 1px solid #f00;
      float: left;
    }
    .sub {
      display: none;
    }
    .nav > li:hover .sub {
      display: block;
    }
    .sub li {
      border-top: 1px solid #f00;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li>
      <a href="#">Services &raquo;</a>
      <ul class="sub">
        <li><a href="#">Social Media</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">Products</a></li>
  </ul>
</body>
</html>

ရေးသားပုံအသေးစိတ်ကိုတော့ စာဖတ်သူကိုယ်တိုင် ကူးယူစမ်းသပ်ပြီး လေ့လာကြည့်ပါ။ ထူးခြားချက်တစ်ချို့ ကိုတော့ ရှင်းပြချင်ပါတယ်။ HTML Structure ကို လေ့လာကြည့်ပါ။ <ul> Element ကို Menu List အတွက် အသုံးပြု ထားပါတယ်။ <li> Element တစ်ခုအတွင်းမှာ နောက်ထပ် <ul> Element တစ်ခုကို Sub-Menu အနေနဲ့ ထည့်ထားပါသေးတယ်။ Services နောက်က &raquo; ဆိုတာ HTML နဲ့ Right Arrow Symbol ( » ) လေးတစ်ခု ထည့်လိုက်တာပါ။

CSS မှာ .nav, .sub လို့ Select လုပ်ပြီး <ul> နှစ်ခုလုံးအတွက် list-style: none နဲ့ margin: 0; padding: 0; သတ်မှတ်ထားပါတယ်။ Bullet ဖြုတ်ပြစ်ပြီး ရှိနေနေရာလွတ်အပိုယူထားတာတွေအကုန် ဖြုတ်ပြစ်လိုက်တာ ပါ။ <li> ဟာ Block Element ဖြစ်ပါတယ်။ ဒါကြောင့် ဘေးချင်းကပ်ဖော်ပြစေချင်တဲ့ <li> တွေကို .sub > liလို့ Select လုပ်ပြီး float: left; လို့ သတ်မှတ်ထားပါတယ်။ ဒီနေရာမှာ Child Selector သုံးရတာက Direct Child ဖြစ်တဲ့ <li> တွေကိုသာ float လုပ်ချင်ပြီး နောက်တစ်ဆင့်ရှိနေတဲ့ <ul class="sub"> ထဲက <li> တွေကို မလုပ်ချင်လို့ ဖြစ်ပါတယ်။

နောက်တစ်ခုကတော့ .sub ကို display: none; လို့ အောက်နားမှာ သတ်မှတ်လိုက်ပါတယ်။ display Property တွေ Inline/Block ပြောင်းယုံမက လုံးဝဖြောက်ပြစ်ဖို့ none ကို Value အနေနဲ့ ပေးနိုင်ပါတယ်။ display: none လိုပ သတ်မှတ်ထားတဲ့အတွက် Sub Menu ဟာ ပျောက်နေမှာဖြစ်ပါတယ်။ နောက်တစ်ဆင့် ကျတော့မှ .nav > li:hover .subမှာ display: block;လို့ ပြန်ပေးထားပါတယ်။ အဓိပ္ပါယ်က li ကို Mouse နဲ့ ထောက် လိုက်တော့မှသာ သူ့အတွင်းထဲက Sub Menu ကို ပြန်ဖော်ပြခိုင်းလိုက်တာပဲ ဖြစ်ပါတယ်။ ဒီနည်းနဲ့ Javascript တွေပါတွေမလိုပဲ Dorp-Down Menu တစ်ခုကို ရရှိသွားစေမှာပဲ ဖြစ်ပါတယ်။ ရလဒ်က ဒီလိုပုံစံဖြစ်မှာ ဖြစ်ပါတယ်။

ပုံ (၃-ဓ) CSS Drop-Down Menu

Menu တစ်ခုနဲ့တစ်ခုကြား လိုင်းလေးတွေထည့်ဖို့ Main Menu အတွက် border-left နဲ့ Sub Menu အတွက် border-top တို့ သတ်မှတ် ပေးထားတာကိုလည်း သတိပြုကြည့်ပါ။

Position Properties

Element တွေဖော်ပြတဲ့အခါမှာ အခြေခံအားဖြင့် အပေါ်ကနေအောက် Document ထဲမှာ ထည့်သွင်းထားတဲ့ အစီအစဉ် အတိုင်း ဖော်ပြလေ့ရှိပါတယ်။ ဒါကို Regular Flow လို့ ခေါ်ပါတယ်။ Element တွေကို Regular Flow အတိုင်းမ ဟုတ်ပဲ ဖော်ပြစေလိုတဲ့ နေရာအတိအကျ သတ်မှတ်ပေးချင်ရင်လည်း CSS နဲ့ သတ်မှတ်ပေး လို့ ရပါတယ်။ position Property မှာ absolute လို့ သတ်မှတ်ပြီး ဖော်ပြစေချင်တဲ့ နေရာကို top/bottom, right/left Property တွေနဲ့ သတ်မှတ်ပေးရတာ ဖြစ်ပါတယ်။

#box {
  position: absolute;
  top: 100px;
  left: 150px;
}

ဒီလိုသတ်မှတ်လိုက်မယ်ဆိုရင် တစ်ခြား Element တွေ ဘယ်နေရာမှာ ဘယ်လိုပဲရှိနေပါစေ၊ #box ကို Document Border ကနေ top: 100px; left: 150px; အကွာအဝေးမှာပဲ အတိအကျဖော်ပြပေးမှာ ဖြစ်ပါတယ်။

HTML Element တွေရဲ့ Default Position Value က static ဖြစ်ပါတယ်။ position Property နဲ့အတူ တွဲဖော်သုံးနိုင်တဲ့ နောက်ထပ် Value တစ်ခုကတော့ relative ဖြစ်ပါ တယ်။ ပုံမှန်အားဖြင့် position: absolute; သတ်မှတ်ထားတဲ့ Element တွေ ဖော်ပြရမယ့် နေရာကို Document Border ကနေသာ တွက်ချက် ဖော်ပြပါတယ်။ လိုအပ်လို့ Document Border ကနေ တွက်ချက် မဖော်ပြပဲ Parent Element ကနေ တွက်ချက်ဖော်ပြ စေလိုရင် Parent Element မှာ position: relative;လို့ သတ်မှတ်ပေးနိုင်ပါတယ်။

[HTML]
<div id="out">
  <div id="in"> … </div>
</div>

[CSS]
#out {
  position: relative;
}
#in {
  position: absolute;
  top: 100px;
  left: 100px;
}

ဖော်ပြထားတဲ့ နမူနာမှာ #in Element အတွက် top: 100px; left: 100px; အကွာအဝေးကို #out ရဲ့ Border ကနေ တွက်ချက်ပြီး ဖော်ပြပေးမှာ ဖြစ်ပါတယ်။

ပုံ (၃-န) Static vs. Relative Position

နောက်ထပ်အသုံးပြုနိုင်တဲ့ Position Value တစ်ခုကတော့ fixed ဖြစ်ပါတယ်။ fixed နဲ့ absolute က အခြေခံ အားဖြင့် အတူတူပဲဖြစ်ပါတယ်။ ကွာခြားချက်ကတော့ absolute Position က Element ကို Document နဲ့ Attach လုပ်ထားပြီး fixed Position က Screen View Point နဲ့ Attach လုပ်ထားခြင်း ပဲဖြစ်ပါတယ်။ background-attachment နဲ့ သဘောတရားတူပါတယ်။

ဒီ position Property ကို Layout တွေဖန်တီးတဲ့နေရာမှာတော့ သုံးကြလေ့မရှိပါဘူး။ နေရာအသေ သတ်မှတ် တာဖြစ်လို့ Layout အတွက်ဆိုရင် သိပ် Flexible မဖြစ်တဲ့အတွက်ကြောင့်ဖြစ်ပါတယ်။ ဟိုနားဒီနား လိုအပ်သလောက် ပဲ ထည့်သွင်းအသုံးပြုကြပါတယ်။ position တစ်ကယ်အသုံးဝင်တာကတော့ Javascript နဲ့ တွဲဖက်ပြီး User Interface Element တွေတည်ဆောက်တဲ့ နေရာမှာပဲဖြစ်ပါတယ် (ဥပမာ - Popup Calendar, Modal Dialog, Tabbed Panel, etc...)။ နောက်အခန်းမှာ Javascript လေ့လာတဲ့အခါ လက်တွေ့ အသုံးပြုကြရမှာဖြစ်ပါတယ်။ User Interface Element တွေတည်ဆောက်တဲ့အခါ အသုံးဝင်နဲ့ နောက်ထပ် Property နှစ်ခုကို ဖြည့်စွက် လေ့လာထားသင့်ပါသေးတယ်။

z-index Property ကို Element တွေ တစ်ခုနဲ့တစ်ခုထပ်ပြီး Overlap ဖြစ်တဲ့အခါ၊ ဘယ် Element ကို အပေါ်က ဖော်ပြရမလဲ သတ်မှတ်ဖို့အတွက် အသုံးပြုရပါတယ်။ တန်ဖိုးမြင့်တဲ့သူက အပေါ်မှာရှိမှာ ဖြစ်ပါ တယ်။

#box-one {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 400px;
  height: 280px;
  background: #ff0;
  z-index: 2;
}

#box-two {
  position: absolute;
  top: 150px;
  left: 150px;
  width: 400px;
  height: 280px;
  background: #8a5;
  z-index: 1;
  opacity: 0.8;
}

နမူနာမှာ #box-one က z-index: 2ဖြစ်ပြီး #box-two က z-index: 1ဖြစ်တဲ့အတွက် တန်ဖိုးမြင့်တဲ့ #box-one ကို အပေါ်က ဖော်ပြမှာပဲဖြစ်ပါတယ်။

opacity Property ကို Element တွေရဲ့ Transparency Level သတ်မှတ်ဖို့ အသုံးပြုနိုင်ပါတယ်။ အမြင့်ဆုံး တန်ဖိုး 1 သတ်မှတ်ထားရင် ပုံမှန်အတိုင်း ဖော်ပြမှာဖြစ်ပြီး၊ အနိမ့်ဆုံးတန်ဖိုး 0 သတ်မှတ်ထား ရင်တော့ Element က မမြင်ရတော့ပဲ လုံးဝ ပျောက်ကွယ်နေမှာပဲဖြစ်ပါတယ်။ 0 နဲ့ 1 ကြား သတ်မှတ်လိုတဲ့ Transparency Level ကို ဒဿမကိန်းနဲ့ သတ်မှတ်အသုံးပြုနိုင်ပါတယ်။

Conclusion

အခုဆိုရင် CSS နဲ့ ပက်သက်ပြီး သိသင့်တာအားလုံး လေ့လာခဲ့ပါပြီ။ ဆက်လက်လေ့လာသင့်တဲ့ CSS3, CSS Framework, Grid System နဲ့ Responsive Web Design တို့အကြောင်းကို သက်ဆိုင်ရာအခန်း အလိုက် ဆက်လက် ဖော်ပြပေးသွားမှာပဲ ဖြစ်ပါတယ်။

လက်တွေ့စမ်းသပ်ကြည့်နိုင်ဖို့နဲ့ ရေးသားပုံနမူနာ ရရှိစေဖို့ ဒီစာအုပ်တဲ့အတူ တွဲဖက်ပါလာတဲ့ CD ထဲမှာ Design Template တစ်ချို့ ထည့်သွင်းပေးထားပါတယ်။ လေ့လာကြည့်ရှု့ပြီး တစ်ချို့ကို ကိုယ်တိုင်လည်း စမ်းသပ်ဖန်တီး ကြည့်ဖို့ အကြံပြုလိုပါတယ်။