အခုမှ စဖတ်မယ့် သူတွေအတွက် အရင်ပို့စ်တွေကို ပြန်ညွှန်းလိုပါတယ်…

Website ရေးကြမယ် (၁)

Website ရေးကြမယ် (၂)

Website ရေးကြမယ် (၃)

Website ရေးကြမယ် (၄)

Class Selectors

အခု ဆိုရင် ကျွန်တော်တို့တွေ element အမျိုးမျိုကို style သတ်မှတ်ပေးပုံတွေ၊ id attribute သုံးပြီး unique ဖြစ်တဲ့ အပိုင်းတွေကို style တွေ ထည့်တာတွေ လေ့လာလို့ ပြီးပါပပြီ။ အခုတစ်ခါ Class Selectors တွေ အကြောင်းကို လေ့လာပါမယ်။

Class selector တွေကို သုံးပြီး style တစ်ခုထဲကိုပဲ element အမျိုးမျိုးမှာ ထပ်ခါထပ်ခါ သုံးနိုင်ပါတယ်။ ဥပမာ – စာသားတွေ အပြာရောင် ပြောင်းဖို့ blue ဆိုတဲ့ class တစ်ခု ဆောက်လိုက်မယ်။

.blue {
     color: blue;
     letter-spacing: 0.05em;
}

class ဆောက်ရတာ လွယ်ပါတယ်။ class name ရဲ့ရှေ့က “.” (period/dot) ထည့်ပေး လိုက်ရုံပါပဲ။ ဒီနေရာမှာ letter-spacing ဆိုတာ စာလုံးတွေကြားက အကွာအဝေးပါ။ နောက်က unit em ကတော့ 1 em ဆိုရင် စာလုံးအကြီး M ရဲ့ အမြင့် (height) နဲ့ တူညီပါတယ်။ အခု 0.05em ဆိုတော့ capital M ရဲ့ 5% ပါ။

ဒီ class ကို ပြန်သုံးဖို့ အတွက်ကတော့ သုံးချင်တဲ့ element ထဲမှာ ဆိုပီး attribute ထည့်ပေး လိုက်ရုံပါပဲ။

<h1 class="blue">This is heading 1 with class "blue".</h1>
<p class="blue">This is a sample paragraph with class "blue".</p>

ကဲ ကျွန်တော်တို့ရဲ့ project site မှာလဲ class တွေ လိုက်ထည့် ကြည့်ရအောင်။ style1.css ရဲ့ အောက်ဆုံးမှာ အောက်ပါ css rule ထပ်ထည့်ပီး save လုပ်ပေးပါ။

.fun {
     color: #339999;
     font-family: Georgia, Times, serif;
     letter-spacing: 0.05em;
}

about.html ကို ဖွင့်ပြီး blockquote ထဲက paragraph ကို fun class ထည့်ပေးပါ။ code က ဒီလိုဖြစ်ပါမယ်။

<blockquote>
     <p class="fun">"Happiness is a dip in the ocean followed by a
          pint or two of Old Speckled Hen. You can quote me on that!"</p>
</blockquote>

အခု ကျနော်တို့ class ထည့်လိုက်တာ paragraph level ဖြစ်ပါတယ်။ အဲဒီအတွက် blockquote ထဲမှာ ပါတဲ့ ကျန်တဲ့ paragraph တွေကို သက်ရောက်မှု မရှိပါဖူး။ ကျန်တာတွေ အတွက် လိုက်ထည့် ပေးရပါမယ်။

<blockquote>
     <p class="fun">"Happiness is a dip in the ocean followed by a
          pint or two of Old Speckled Hen. You can quote me on that!</p>
     <p class="fun">"Join us for a weekend away at some of our
          favorite dive spots and you'll soon be making new friends.</p>
     <p class="fun">"Anyway, about time I got on with some
          <em>proper</em> work!</p>
</blockquote>

အဲလို မဟုတ်ဘဲ blockquote မှာ fun class ထည့်လိုက်ရင်တော့ သူ့ထဲမှာ ပါတဲ့ paragraph တိုင်း fun class ရဲ့ style ဝင်သွားပါမယ်။

<blockquote class="fun">
     <p>"Happiness is a dip in the ocean followed by a
          pint or two of Old Speckled Hen. You can quote me on that!</p>
     <p>"Join us for a weekend away at some of our
          favorite dive spots and you'll soon be making new friends.</p>
     <p>"Anyway, about time I got on with some
          <em>proper</em> work!</p>
</blockquote>

class vs id

အခု class ပါလာပီဆိုတော့ id နဲ့ နည်းနည်း သွားရောချင် ရောနေပါလိမ့်မယ်။ class တွေက “.” (period) နဲ့စရေးရတယ်။ id တွေက “#” (pound sign) နဲ့ စရတယ်။ သူတို့တွေ အတွက် style သတ်မှတ်ပုံချင်းတော့ အတူတူ ပါပဲ။ အသုံးမှာတော့ နည်းနည်း ကွဲပြားပါတယ်။ id တွေကို page မှာ တစ်ခုထဲ ရှိတဲ့ နေရာမျိုးတွေမှာ သုံးရပါတယ်။ ဥပမာ – page တစ်ခုမှာ mainnavigation ဆိုတဲ့ id နဲ့ element က တစ်ခုပဲရှိမှာပါ။ header id နဲ့ အပိုင်းကလဲ တစ်ခုပဲ ရှိမှာပါ။ class တွေကတော့ အဲလို မဟုတ်ပါဖူး။ လိုရင် လိုသလောက် သုံးနိုင်ပါတယ်။

Limiting Classes to Specific Elements

ဒီလို စဉ်းစားကြည့်ရအောင်။ fun class ထည့်ထားတဲ့ blockquote ထဲက စာသားတွေကိုပဲ စာလုံးစောင်း ပြောင်းချင်တယ်။ ကျန်တဲ့ fun class ထည့်ထားတဲ့ paragraph စသည်မှာ မပြောင်းချင်ဘူး။ အဲလို လုပ်ဖို့လွယ်ပါတယ်။ css မှာ class တွေကို သူ့ element နဲ့သူ ကန့်ပေးလိုက်လို့ ရပါတယ်။

.fun {
     font-family: Georgia, Times, serif;
     color: #339999;
     letter-spacing: 0.05em;
}

blockquote.fun {
     font-style: italic;
}

ဒီလိုဆိုရင် <blockquote> ထဲက စာသားတွေဟာ စာလုံးစောင်းနဲ့ ပြပါတော့မယ်။

ပုံမှန် class selector ရဲ့ရှေ့ကနေ element name ထည့်ပေးလိုက်တာနဲ့ အဲဒီ class သုံးထားတဲ့ element မှာပဲ သက်ရောက်မှု သွားဖြစ်ပါမယ်။ element.class ပါ။ မှတ်ထားပ။ါ space ခြားလို့ မရပါ။

မှတ်ချက်။     ။အပေါ်က ဥပမာကို သေချာ စမ်းကြည့်ရင် blockquote မှာ fun class ထည့်လိုက်ပေးမယ့် font-family နဲ့ latter-spacing rule ၂ ခုပဲ effect ဖြစ်တာ တွေ့ရမှာပါ။ ဘာလို့လဲ ဆိုတော့ ကျွန်တော်တို့တွေက <p> ကို navy (color) ပေးခဲ့လို့ပါ။ အဲလို nested element တွေမှာ style ထည့်ပုံ နောက်ပိုင်းကျ ပါလာမှာပါ။

Styling Partial Text Using span

ကျွန်တော်တို့တွေ class တွေသုံးပြီး နေရာ တော်တော် များများမှာ style တွေထည့်လို့ရပီ။ ဒါပေမယ့် paragraph ထဲမှာပါတဲ့ စာလုံး တစ်လုံး၊ သုံးလေးလုံး လောက်ကို ကွက်ပြီး style ပြောင်းချင်ရင်တော့ span element ကို သုံးရပါတော့မယ်။

အရင် ပို့စ်တွေမှာ span ကို ဘယ်လိုသုံးတယ်ဆိုတာ သဘောလောက်တော့ ပါပြီးပါပီ။ span ဟာ element တစ်ခုဖြစ်တာကြောင့် class attribute ထည့်လို့ရပါတယ်။ ကျွန်တော်တို့ဆိုက်က about page မှာ ထည့်ကြည့်ရအောင်။

<p><span class="fun">Bubble Under</span> is a group of diving
     enthusiasts based in the south-west UK who meet up for diving
     trips in the summer months when the weather is good and the
     bacon rolls are flowing. We arrange weekends away as small
     groups to cut the costs of accommodation and travel and to
     ensure that everyone gets a trustworthy dive buddy.</p>

မှတ်ချက်။     ။ span element တွေကို များသောအားဖြင့် class နဲ့ တွဲသုံးကြပါတယ်။ ဒါပေမယ့် span မလုပ်ခင်မှာ ကိုယ်လုပ်ချင်တဲ့ ပုံစံနဲ့ တထပ်ထဲကျတဲ့ element ရှိနိုင်လား အရင် စဉ်းစားကြည့်ပါ။ ဥပမာ -

<p>Do it <span class="shouty">now</span>!</p>

ထက် ဒီဟာက ပိုပြီး သင့်တော်ပါတယ်။

<p>Do it <strong>now</strong>!</p>

ကိုယ် ဘာအဓိပ္ပါယ်နဲ့ ရေးသလဲ၊ ဘယ် element က သင့်တော်မလဲ စဉ်းစားပါ။ အဓိပ္ပါယ်ပေါ်မူတည်ပြီး em, cite, blockquote စတာတွေလဲ သုံးနိုင်ပါသေးတယ်။

ကဲ အခုဆိုရင် CSS text styling နဲ့ ပတ်သက်လို့ စုံသလောက် ရှိသွားပါပြီ။ နောက် သင်ခန်းစာမှာ Layout style အကြောင်းသွားပါမယ်။

3 Responses

1. Website ရေးကြမယ် (၅) | Myanmar Tutorials says:

   July 4, 2010 at 4:01 AM

   [...] Website ရေးကြမယ် (၄) (နောက်ဆက်တွဲ) [...]

   Reply
2. fokhwar says:

   July 25, 2010 at 4:25 AM

   အစ်ကို ပထမပို့စ်တွေမှာ About Us က အောက်က စာတွေ မပါသေးဘူးနော်

   Reply
   • Goo Goo says:

     July 25, 2010 at 2:29 PM

     ဟုတ်.. မေ့သွားလိုဗျ.. ကိုယ်ကြိုက်တာသာ ဖြည့်ရေးလိုက်တော့ဗျာ..

     Reply