သင့္ကိုယ္သင္ Web Designer ေကာင္းတစ္ေယာက္ ၊ HTML & CSS Master တစ္ေယာက္လို႔ ခံယူထားၿပီလား?
CSS ကို သင္ေကာင္းစြာ နားလည္သေဘာေပါက္ေနၿပီလို႔ေကာ သင္ထင္ေနပါၿပီလား?

သင့္ကိုယ္သင္ အဲဒီ့လို ထင္ထားတာဟာ မွန္ေနမယ္ဆုိရင္ေတာ့ အခု ေၿပာမယ့္ အေၾကာင္းကို သင္ေကာင္းေကာင္း သိၿပီးသားၿဖစ္ေနမွာပါ။

သင့္အေနနဲ႔ HTML Attributes တုိင္းကို CSS က access လုပ္ခြင့္ရိွတယ္ဆုိတာ သင္ေကာင္းစြာ နားလည္သေဘာေပါက္ထားပါသလား? သေဘာေပါက္တယ္ဆုိ ဆက္မဖတ္ပါနဲ႔ေတာ့။ အခုေၿပာမယ့္အေၾကာင္းအရာေတြက သင္နားလည္ၿပီးသားေတြမို႔လို႔ပါ။

အမ်ားစုေသာ သူေတြဟာ CSS ကို ေလ့လာၾကတယ္။ အဲလို ေလ့လာၾကၿပီး တစ္ပတ္အတြင္းမွာတင္ သူတုိ႔ကိုယ္သူတုိ႔ CSS ဆုိတာကို သိသြားၿပီ ၊ နားလည္သြားၿပီလုိ႔လည္း မွတ္ယူေလ့ရိွၾကတယ္။ (HTML အေၿခခံပိုင္ထားတယ္ဆုိရင္ေပါ့)
အဲလိုထင္ၾကတာလည္း မွန္ပါတယ္။ ဘာလို႔လည္း ဆုိေတာ့ CSS က ရိုးရွင္းတယ္ ၊ လြယ္ကူတယ္ ၊ ေလ့လာတဲ့အခါမွာလည္း အခက္အခဲမရိွေလ့လာႏုိင္ေနလို႔ပါဘဲ။
ဒါေပမယ့္ တကယ္တမ္းက်ေတာ့ သူတို႔ဟာ CSS ရဲ႕ အဓိက Main Concept ေတြ ကို နားမလည္ၾကပါဘူး ၊ သေဘာမေပါက္ၾကေသးပါဘူး။ CSS ကို အၿပည့္အ၀ ကြ်မ္းကြ်မ္းက်င္က်င္နဲ႔ အသံုးၿပဳၿပီးေတာ့ Design တစ္ခုကို အမွန္တကယ္ implementation လုပ္ႏုိင္တဲ့သူကလည္း ေတာ္ေတာ္ကို ရွားပါတယ္။ ဘာလို႔လဲ? ဘာလုိ႔လဲဆုိေတာ့ ခုနကလိုဘဲ CSS ကို ေသခ်ာသေဘာမေပါက္လုိ႔လို႔ဘဲ ေၿပာခ်င္ပါတယ္။

ယေန႔ေခတ္မွာ HTML ဆုိတာကို Content အတြက္ဘဲသံုးသင့္ၿပီးေတာ့ ၊ Style အတြက္ကိုေတာ့ CSS ကိုသာ အသံုးၿပဳသင့္ေနပါၿပီ။ (HTML 5 ထြက္လာရင္ေတာ့ ပိုေကာင္းတဲ့ Feature ေတြကို CSS 3 နဲ႔တြဲသံုးလာႏုိင္ရင္ အရမ္းကိုၾကီးမားတဲ့ အေၿပာင္းအလဲေတြလည္း ၿဖစ္လာႏုိင္ပါတယ္)

ကဲ အခု ကြ်န္ေတာ့္အေနနဲ႔ CSS က HTML ရဲ႕ Attribute တုိင္းကို ထိန္းခ်ဳပ္ႏုိင္စြမ္းရိွတယ္ဆုိတာ ေၿပာၿပေပးပါမယ္။ အဲဒါက တကယ့္ကို CSS ကို နားလည္သေဘာေပါက္ေစမယ့္ အေကာင္းဆုံးနည္းၿဖစ္ပါတယ္။
(အခု စာဖတ္သူအေနနဲ႔ လုိအပ္တာကေတာ့ CSS အေၿခခံနဲ႔ HTML အေၿခခံေလာက္ေတာ့ရိွရမွာေပါ့ေနာ္။ ကြ်န္ေတာ္က Coding ရွင္းၿပမွာမဟုတ္ပါ၊ concept ရွင္းၿပမွာၿဖစ္ပါတယ္။)

အခု စာဖတ္သူအေနနဲ႔ Image တစ္ခုနဲ႔ Link တစ္ခုကို HTML နဲ႔ ေရးထားၿပီဆုိပါေတာ့၊ ပံုမွန္အားၿဖင့္ စာဖတ္သူတုိ႔ ေရးမယ့္ပံုစံက

Code:

< img src="http://www.myanmaritresource.info/picture.gif" >

Code:

< a href="http://www.myanmaritresource.info/portal.htm" >MITR Portal Page< /a >

src နဲ႔ href ဆုိတာေတြက HTML attribute ေတြၿဖစ္တယ္ဆုိတာေတာ့ သိၾကမွာပါ။
ကဲ အခု အဲဒီ့ Attribute ၂ ခုကို CSS ကို အသံုးၿပဳၿပီးေတာ့ accessible လုပ္လို႔ရတယ္ဆုိတာ ၿပပါမယ္။ (CSS 2 ကစၿပီးေတာ့ accessible လုပ္လို႔ရလာတာၿဖစ္ပါတယ္။)

စာဖတ္သူအေနနဲ႔ အေပၚမွာေရးခဲ့တဲ့ image တစ္ခုထဲကိုဘဲ outset border တစ္ခုထည့္ခ်င္တယ္ဆုိပါေတာ့ ၊ အဲဒါဆုိရင္ စာဖတ္သူတုိ႔ေရးရမယ့္ CSS code ကေတာ့

Code:

img[src="http://www.myanmaritresource.info/picture.gif"] {border:2px outset #808080;}

စာဖတ္သူအေနနဲ႔ သိပ္မရင္းႏွီးတဲ့ CSS ပံုစံမ်ိဳးၿဖစ္ေနမယ္ထင္တယ္ေနာ္။

ေနာက္တစ္ခုအေနနဲ႔ အေပၚက Link ေလးတစ္ခုထဲကိုဘဲ တၿခား Font ေတြထက္ ေသးေစခ်င္ရင္ေတာ့

Code:

a[href="http://www.myanmaritresource.info/portal.htm"] {font-size:9px;}

ဘယ္ေလာက္ လွသလဲ။ အကုန္လုံးကို ထိန္းခ်ဳပ္ခြင့္ရိွေနတယ္ေနာ္။

ေနာက္ထပ္ တစ္ခု လက္ေဆာင္ေပးခ်င္တာက အခု ကြ်န္ေတာ္တုိ႔ Myanmar IT Resource Forum လိုမ်ိဳး ၊ ပံုစံတူ Forum ေတြအတြက္ပါ။ (အခု Forum လုပ္ခ်င္တဲ့သူ ေတာ္ေတာ္မ်ားမ်ားက ကြ်န္ေတာ္တို႔ ယူထားတဲ့ Host ကေန ယူလာၾကတာေတြ႔ရလို႔ပါ။ သူတုိ႔အတြက္ Tricks ေလးအေနနဲ႔ လက္ေဆာင္ေပးတာပါ။)
Online Status ကို Member ေတြက သူတုိ႔ကိုယ္တုိင္ ေဖ်ာက္မွာကို မလိုလားရင္ ေအာက္က Code ေလးနဲ႔ ကန္႔သတ္လိုက္ေပါ့။

Code:

input[name="hideonline"] {display: none;}

အဲဒါဆုိရင္ေတာ့ Profile Page က radio button ေလး ကို သင့္ရဲ႕ Member ေတြ ၿမင္ရေတာ့မွာ မဟုတ္ဘူးေပ့ါ။

ေနာက္တစ္ခုလက္ေဆာင္ေပးခ်င္ေသးတာက ကြ်န္ေတာ္တို႔ဆီမွာဆုိ Nav Bar မွာ သူတို႔ရဲ႕ Default FAQ icon/link မပါဘူးေလ။ အဲဒါ ဘယ္လိုလုပ္ထားလဲဆုိေတာ့ ေအာက္က Code ေလးနဲ႔ဘဲလုပ္ထားတာပါ

Code:

a[href="/faq.htm"] {display: none;}

သင္ မ်က္စိ ေနာက္ေနတဲ့ Faq Icon ၾကီး ေပ်ာက္သြားၿပီေပါ့ေနာ္။

ကဲ ဒါကေတာ့ CSS က HTML ရဲ႕ attribute တိုင္းကို accessible လုပ္လို႔ရတယ္ဆုိတဲ့ သက္ေသဘဲၿဖစ္ပါတယ္။
အေပၚဆုံးမွာ ေၿပာခဲ့သလို သင့္ကိုယ္သင္ ထင္ထားသလို မဟုတ္ေသးရင္ေတာ့ CSS ကို ေသခ်ာၿပန္ေလ့လာၿပီး ၊ နားလည္သေဘာေပါက္ေအာင္ ထပ္ၾကိဳးစားပါဦး။

ေအာ္ အခု codes အားလုံး IE6 မွာ အလုပ္မလုပ္ဖူးေနာ္။ IE 7 နဲ႔ အထက္ကိုဘဲ သံုး။ (ၿဖစ္ႏိုင္ရင္ IE ကို သံုးမေနပါနဲ႔။ ဒါေပမယ့္ IE 9 ထြက္လာရင္ေတာ့ သံုးၾကည့္ၾကေပါ့။ )

အားလုံး ေပ်ာ္ရႊင္ပါေစဗ်ာ
$ƴǩǾ

စာၾကြင္း ။ ။ အိမ္မွာ စာက်က္ရာက စိတ္မၿငိမ္လို႔ ၊ စိတ္ေၿပလက္ေပ်ာက္ Tutorial တစ္ခုလာေရးေပးတာပါ။ ကြ်န္ေတာ္လည္း CSS Beginner တစ္ေယာက္ပါဘဲ။ ကဲ ၊ အားလုံးဘဲ ေပ်ာ္ရႊင္ပါေစ။ စာေမးပြဲေၿဖႏုိင္ဖို႔ စာ ၿပန္က်က္လိုက္ဦးမယ္ဗ်ာ။

CSS ရဲ႕ Attribute Selector ေတြက ေတာ္ေတာ္ စိတ္၀င္စားဖို႔ေကာင္းၿပီးေတာ့ ၊ အားလုံးက ေတာ္ေတာ္ေလး powerful ၿဖစ္ပါတယ္။ သင္လိုခ်င္တာကိုလည္း အၿမန္ဆုံးရေစပါတယ္။

css3 selectors ေတြဆုိ ပိုၿပီးေတာ့ စိတ္၀င္စားဖို႔ေကာင္းပါေသးတယ္။ (Browser ေတြသာ support လုပ္လာမယ္ဆုိရင္ေပါ့။)

ဆက္လက္ ေလ့လာၾကည့္ၾကဖို႔ တုိက္တြန္းလိုပါတယ္။

သင့္ရဲ႕ User ေတြထဲမွာ IE6 user ေတြရိွရင္ Warning Message ေပးဖို႔ေပါ့။

Code:

http://www.myanmaritresource.info/cascading-style-sheet-f30/create-your-own-warning-message-for-ie6-users-t2849.htm#14197

Its really fun to learn CSS. Its easy to learn but not easy to code.

When you start making a template you'll face lots of browser compatibility problems, position problems, float problems, box-model problems Crazy?

Its easy to edit but hard to develop full templates. Its even more difficult to make the templates fully standard compliant, cross-browser compatible and flexible for editing.