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

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

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

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

Looking at Elements in Context

ဒီနေရာမှာ Context ကို နားလည်အောင် ပြောရရင်၊ ကျနော်တို့ အခုရေးနေတဲ့ ဆိုက်မှာ Site Title ပါတယ်၊ Tag line ပါတယ်၊ Menu ပါတယ်၊ Paragraph တွေပါတယ်။ သူတို့တွေမှာ သက်ဆိုင်ရာ အဓိပ္ပါယ်တွေ အသီးသီးရှိကျပါတယ်။ အဲဒါကိုပဲ Context (ဆက်စပ် အဓိပ္ပါယ်) လို့ပဲ မှတ်ထားလိုက်ပါ။ ကျနော်တို့တွေ CSS styling လုပ်ရာမှာ element context တွေကလဲ အများကြီးအရေးပါပါတယ်။ Element တစ်ခုထဲကိုပဲ သူ့ရဲ့ နေရာအနေအထားအလိုက် style အမျိုးမျိုး ပေးလို့ရပါတယ်။ ရှင်းသွားအောင် လေ့လာကြည့်မယ်။

အခုထိဆိုရင် ကျနော်တို့တွေ paragraph တွေကို navy blue, sans-serif တွေနဲ့ ပြထားပါတယ်။

body {
 font-family: Verdana, Helvetica, Arial, sans-serif;
 }
 p {
 font-size: small;
 color: navy;
 }

ဒါပေမယ့် ကျနော်တို့ဆိုက်မှာ တခြား paragraph တွေနဲ့ အဓိပ္ပါယ်ကွဲနေတဲ့ paragraph တစ်ခုပါပါတယ်။ အဲဒါ မြင်မိလားဗျာ။ Tag Line ပေါ့။ သူက document ရဲ့ content မဟုတ်ဘူး။ Site အကြောင်းကို အကျဉ်းပြောထားတဲ့ ပုံစံသုံးထားတယ်။ ပြီးတော့ သူ့ကို tagline id နဲ့ div သပ်သပ် ခွဲသုံးထားတယ်။ အဲအတွက် သူ့ကို ကွက်ပီး style ပြင်လို့ရတယ်။

ကျနော်တို့ရဲ့ style1.css ဖိုင်ကို ဖွင့်ပီး အောက်ဆုံးမှာ အောက်ပါ CSS code တွေ ထပ်ဖြည့်ရေးပါ။

#tagline p {
 font-style: italic;
 font-family: Georgia, Times, serif;
 }

save လုပ်ပြီး ကြည့်ကြည့်ပါ။ အောက်ကပုံလိုမျိုး မြင်ရပါမယ်။

Italic Text

id tagline လို့ ပေးထားတဲ့ element ထဲက paragraph တိုင်းကို italic, Georgia, Times (သို့) Serif font တစ်မျိုးမျိုးနဲ့ ပြပေးပါဆိုတဲ့ အဓိပ္ပါယ်ပါပဲ။ သဘောပေါက်ကြမှာပါ။

Contextual Selectors

#tagline p ကို contextual selector လို့ ခေါ်ပါတယ်။ အောက်ပါ နမူနာတွေကို ထပ်ကြည့်ပါ။

#navigation a {
 text-decoration: none;
 }

navigation area မှာ ရှိတဲ့ link တွေမှာ text decoration တွေ ဖြုတ်ပေးပါ။ (e.g: underline)

#footer p {
 line-height: 150%;
 }

(ဘာသာ ပြန်ပေးဖို့ မလိုတော့ဖူးထင်ပါတယ်)

h1 strong {
 color: red;
 }

h2 a {
 text-decoration: none;
 }

Grouping Styles

တူညီတဲ့ style တွေကို မတူညီတဲ့ element တွေမှာ ထည့်ဖို့ အတွက် ထပ်ခါထပ်ခါ ရေးနေစရာမလိုပါဘူး။ h1 ကနေ h3 ထိ အဝါရောင်နဲ့ အနက်ခံ ထည့်မယ်ဆိုရင် ဒီလိုရေးကြပါလိမ့်မယ်။

h1 {
 color: yellow;
 background-color: black;
 }
 h2 {
 color: yellow;
 background-color: black;
 }
 h3 {
 color: yellow;
 background-color: black;
 }

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

h1, h2, h3 {
 color: yellow;
 background-color: black;
 }

h1 (သို့) h2 (သို့) h3 ထဲက စာသားတွေကို အနက်ခံပေါ်မှာ အဝါရောင်နဲ့ ပြပေးပါ။ ဒီနေရာမှာ “,” (comma) က “OR” သဘောဆောင်ပါတယ်။

ကဲ.. ကျနော်တို့ CSS file (style1.css) မှာလဲ ထပ်ဖြည့်ကြဦးစို့ဗျာ။ အောက်ဆုံးမှာ ထပ်ထည့်ပေးပါ။

h1, h2, h3 {
 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
 background-color: navy;
 color: white;
 }

save လုပ်ပြီး refresh လုပ်ကြည့်ပါ။ အောက်ပါပုံလိုမျိုး တွေ့ရပါမယ်။

Heading Styles

ခဲတစ်လုံးထဲနဲ့ ငှက်အများကြီး ပစ်ချလိုက်သလိုပါပဲ။ ဆိုက်တစ်ခုလုံးအတွက် style ကို တစ်ဖိုင်ထဲကနေ သတ်မှတ်ပေးလို့ရတာအပြင် style တူချင်တဲ့ element တွေပါ ပေါင်းရေးလို့ ရတယ်ဗျာ။ ဒီလိုလုပ်လိုက်တဲ့ အတွက် ပြန်ပြင်ရတာလဲ လွယ်သွားသလို file size လဲ သေးသွားပါတယ်။ file size သေးတော့ download လုပ်ရတာ ပိုမြန်တာပေါ့။ ဆိုက်တက်တာ ပိုမြန်သွားမှာပေါ့။

Which Rule Wins?

ကျနော်တို့တွေ h1 to h3 ကို group လုပ်ပီး အောက်ဆုံးမှာ ထည့်လိုက်ပါတယ်။ ဒါပေမယ့် အပေါ်မှာ h2 ရဲ့ color ကို blue ပေးထားခဲ့ပါသေးတယ်။ h2 မှာ blue နဲ့ white ၂ ခုဖြစ်နေပါတယ်။ white ပေးထားတာက နောက်မှလာတာ ဖြစ်တဲ့အတွက် အပေါ်က blue ကို ဘေးချိတ်ထားလိုက်ပါတယ်။ အပေါ်ပိုင်းမှာ အကြောင်းတစ်ရာလောက် blue လို့ပေးထားခဲ့လဲ နောက်ဆုံး တစ်ကြောင်းမှာ white ဆိုရင် နောက်ဆုံးမှာပေးထားတဲ့ အတိုင်း အဖြူနဲ့ပဲ ပြပေးမှာပါ။

Styling Links

Web ပေါ်မှာတော့ နေရာတကာမှာ Link တွေကို တွေ့နေ မြင်နေကြရမှာပါပဲ။ သူတို့တွေဟာ Web ရဲ့ အခြေခံအကျဆုံး အပိုင်းတွေပါပဲ။ အခုခေတ်မှသာ link တွေကို image တွေ၊ တခြားပုံစံအမျိုးမျိုးနဲ့ လှလှပသုံးနိုင်ပေမယ့်၊ အရင်ကတော့ စာသားအနေနဲ့ပဲ သုံးခဲ့ကြပါတယ်။ Link မှန်းသိအောင် underline နဲ့ ပြကြပါတယ်။ အဲဒီပုံစံက ဒီနေ့ခေတ် browser တွေထိ default အနေနဲ့ ပါလာပါတယ်။ Browser တစ်ခုက default အနေနဲ့ link တွေအတွက်ကို အောက်ပါ color scheme ကို သုံးပါတယ်။

ဒီဖက်ခေတ်မှာ site တွေကို အရောင်အသွေး စုံစုံလင်လင်နဲ့ လုပ်လာကြတဲ့ အခါမှာ ဒီ default color scheme က ကိုယ့်ဆိုက်နဲ့ color scheme နဲ့ မကိုက်တာမျိုးရှိပါမယ်။ အဲတော့ ကျနော်တို့တွေ link တွေရဲ့ style ကို ပြင်ဖို့ လိုကို လိုအပ်ပါလိမ့်မယ်။

အခြေခံအကျဆုံး အနေနဲ့ link တွေကို အောက်က ပုံစံလိုမျိုး style ထည့်နိုင်ပါတယ်။

a {
 font-weight: bold;
 color: black;
 }

ဒီလိုဆိုရင် default အတိုင်း အပြာရောင် normal font weight ကနေ အနက်ရောင် bold link တွေ ဖြစ်သွားပါမယ်။ style1.css ထဲမှာ ထပ်ဖြည့်ပြီး ကြည့်ကြည့်ပါ။

Bold Black Link

Link States

ကျနော်တို့ ပေါ်မှာတွေ့ခဲ့ရသလောက် လင့်တွေမှာ အခြေအနေ ၃ မျိုးရှိပါတယ်။ (unvisited, visited, active) နောက်တစ်မျိုး ကျန်ပါသေးတယ်။ Hover လို့ခေါ်ပါတယ်။ Link ပေါ်မှာ mouse pointer တင်ထားတဲ့ အခြေအနေပါ။ ဒီလိုမတူညီတဲ့ link state တွေကို pseudo-class တွေသုံးပီး အလွယ်တစ်ကူပဲ style ထည့်နိုင်ပါတယ်။ နမူနာကြည့်ရအောင်။

a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}

အခုလို element တစ်ခုရဲ့နောက်မှာ “:” (full colon) နဲ့တွဲပြိး ကပ်ပါလာတဲ့ link, visited, hover, active စတာတွေကို pseudo-class တွေလို့ခေါ်ပါတယ်။ နောက်ပြီး link တွေကို style ထည့်တဲ့အခါမှာလဲ link, visited, hover, active (LVHA) ဆိုတဲ့ အစီအစဉ်အတိုင်းထည့်ပေးပါ။

ကျနော်တို့ ဆိုက်ရဲ့ link တွေကိုလဲ အပေါ်က style အတိုင်းပြောင်းလိုက်ပါ။ style1.css ထဲမှာ ထပ်ဖြည့်လိုက်ပါ။ ကြည့်ကြည့်မယ်။

Styling Links

နားဦးစို့…

3 Responses

1. Website ရေးကြမယ် (၄) (နောက်ဆက်တွဲ) | Myanmar Tutorials says:

   July 3, 2010 at 10:14 PM

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

   Reply
2. fokhwar says:

   July 25, 2010 at 4:19 AM

   Thanks,

   Reply
3. HTML နှင့် CSS လေ့လာနည်း လမ်းညွှန် | Myanmar Tutorials says:

   December 31, 2010 at 6:33 AM

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

   Reply