ရိုးရှင်းတဲ့ကော်မာ coding ရိုးရှင်းစွာအဘယ်ကြောင့်
CSS ကို, ဒါမှမဟုတ်ကက်စကိတ်ပုံစံစာရွက်များတစ်ဦး site ကိုမှအမြင်အာရုံစတိုင်များကိုထည့်သွင်းဖို့ web design မှာစက်မှုလုပ်ငန်းရဲ့လက်ခံခဲ့သည်နည်းလမ်းဖြစ်သည်။ CSS ကိုနှင့်အတူသငျသညျ, အရောင်များ, စာမျက်နှာ layout ကိုထိန်းချုပ်နိုင်သည် စာစီစာရိုက် , နောက်ခံပုံရိပ်နှင့်အများကြီးပို။ ကအမြင်အာရုံစတိုင်လျှင်အခြေခံအားဖြင့်, ထို့နောက် CSS ကိုသင့်ရဲ့ website မှာအဲဒီစတိုင်များဆောင်ကြဉ်းပေးဖို့နည်းလမ်းဖြစ်ပါတယ်။
သင်တစ်ဦးစာရွက်စာတမ်းမှ CSS ကိုစတိုင်များကိုထည့်သွင်းထားသကဲ့သို့, သင်စာရွက်စာတမ်းမဟုတ်တော့ရဖို့ကစတင်ခဲ့သည်နှင့်မဟုတ်တော့ကြောင်းသတိထားမိပေမည်။ စာမကျြနှာသာလက်တဆုပ်စာနှင့်အတူပင်သေးငယ်တဲ့ site ကိုတစ်ဦးသာရှိပြီး CSS ကိုဖိုင်နှင့်အတူတက်အဆုံးသတ်နိုင်သည် - နှင့်ထူးခြားသောအကြောင်းအရာစာမျက်နှာများကိုအများကြီးနှင့်စာရေးတံနှင့်အတူတစ်ဦးသည်အလွန်ကြီးမား site ကိုအလွန်ကြီးမားတဲ့ CSS ကိုဖိုင်တွေရှိနိုင်ပါသည်။ ဤသည်အားဖြင့်ပိုဆိုးသည်ကို တုံ့ပြန်မှုက်ဘ်ဆိုက်များ အများကြီးရှိသည်သော မီဒီယာမေးမြန်းချက် ယင်းပုံရိပ်ယောင်များကြည့်ရှုခြင်းနှင့်စာမကျြနှာကွဲပြားခြားနားသော screen များအတွက်ထွက်ရေးသားထားပါတယ်ဘယ်လိုပြောင်းလဲစတိုင်စာရွက်များတွင်ထည့်သွင်း။
ဟုတ်ပါတယ်, CSS ကိုဖိုင်တွေရှည်ရနိုင်သည်။ က site ကိုစွမ်းဆောင်ရည်နှင့် download speed ကိုမှကြွလာသောအခါတောင်ရှည် CSS ကိုဖိုင် (တကယ့့်စာသားကိုစာရွက်စာတမ်းဖြစ်ပါတယ်ကတည်းက) တော်တော်သေးသေးဖြစ်ဖွယ်ရှိသောကွောငျ့ဤအဓိကပြဿနာမဟုတ်ပါဘူး။ သို့သော်တိုင်းနည်းနည်းရေတွက်သင်သည်သင်၏စတိုင်စာရွက် leaner လုပ်နိုင်မယ်ဆိုရင်ဒါကြောင့်, စာမျက်နှာမြန်နှုန်းမှကြွလာသောအခါ, ထိုကောင်းတစ်ဦးအယူအဆဖြစ်ပါတယ်။ က "ကော်မာ" သင်၏စတိုင်စာရွက်အတွက်အလွန်အသုံးအတွက်လာနိုငျရှိရာဤသည်ပါ!
ကော်မာနဲ့ CSS
သင်ကကော်မာထဲမှာကစားသောအရာကိုအခန်းကဏ္ဍသိချင်ကြပေမည် CSS ကို selector syntax ။ စာကြောင်းထဲမှာရှိသကဲ့သို့, ထိုကော်မာရှင်းလင်းပြတ်သားမကုဒ်မှလွတ်လပ်သောတတ်၏။ တစ်ဦးအတွက်ကော်မာ CSS ရွေး အတူတူစတိုင်များအတွင်းမျိုးစုံ selector တွေကိုခွဲခြား။
ဥပမာအားဖြင့်, ရဲ့အောက်တွင်ဖော်ပြထားသောအချို့သော CSS ကိုအကြည့်အရှုကြကုန်အံ့။
ကြိမ်မြောက် {color: red; }
td {color: red; }
p.red {color: red; }
div # {အရောင် firstred: red; }
ဒီ syntax နှင့်အတူသင်အတန်းနှင့်အတူကြိမ်မြောက် tags များ, TD tags များ, အပိုဒ် tags များအနီရောင်ချင်သောပြောနေကြသည်ကို၎င်း, ID ကိုအတူ div tag ကိုစတိုင်အရောင်အနီရောင်ရှိသည်ဖို့အားလုံး firstred ။
ဤသည်ဿုံလက်ခံနိုင်ဖွယ် CSS ကိုဖြစ်တယ်, ဒါပေမဲ့နှစ်ခုသိသိသာသာအားနည်းချက်များကြောင့်ဤလမ်းကိုရေးသားဖို့ရှိပါတယ်:
- သငျသညျအပြာဤဂုဏ်သတ္တိ၏ font ကိုအရောင်ပြောင်းလဲပစ်ရန်ဆုံးဖြတ်လျှင်အနာဂတ်ကာလ၌, သင်သည်သင်၏စတိုင်စာရွက်ထဲမှာအပြောင်းအလဲလေးကြိမ်စေရန်ရှိသည်။
- ဒါဟာသင်မလိုအပ်ပါဘူးကြောင်းကိုသင်၏စတိုင်စာရွက်မှအပိုဇာတ်ကောင်တွေအများကြီးထပ်ပြောသည်။ အများကြီးပိုကြီးကြောင့်ဖြစ်ရန်လိုအပ်သည်ထက်အဲဒီ 4 စတိုင်များ overkill နဲ့တူမထင်စေခြင်းငှါ, ဒါပေမယ့်သင့်တစျခုလုံးကိုက style sheet ကိုဖြတ်ပြီးဤသို့ပြုတည်လျှင်, ထိုလိုင်းများတက် add မည်ကြောင်းစာရွက်အများကြီးဖြစ်လိမ့်မည်။
ဤအအားနည်းချက်များရှောငျနိုငျမှ, သင်၏ CSS ကိုဖိုင်ကိုချောမွေ့ရန်, ငါတို့ကော်မာကို အသုံးပြု. ကြိုးစားပါလိမ့်မည်။
သီးခြား selector မှကော်မာအသုံးပြုခြင်း
အဲဒီအစား 4 သီးခြား CSS ကို selector တွေကို 4 စည်းမျဉ်းစည်းကမ်းတွေကိုရေးသားခြင်း၏, သင်ကကော်မာနှင့်အတူတစ်ဦးချင်းစီ selector တွေကိုခွဲထုတ်ခြင်းဖြင့်တဦးတည်းအုပ်ချုပ်မှုကိုအိမ်ခြံမြေသို့သမျှသောဤစတိုင်များပေါင်းစပ်နိုင်ပါတယ်။ ဤတွင်အတိုင်းပြုမည်ဖြစ်ကြောင်းကိုဘယ်လိုဖြစ်ပါသည်:
ကြိမ်မြောက်, td, p.red, div # {အရောင် firstred: red; }
အဆိုပါကော်မာဇာတ်ကောင်အခြေခံအားဖြင့် selector အတွင်းရှိစကားလုံးအဖြစ်ပြုမူ "နှင့်" ။ ဒါကြောင့်ဒီအနီရောင်အတန်းနှင့်အတူဇ tags များနှင့် td tags များနှင့်အပိုဒ် tags များ T သက်ဆိုင်နှင့်ယင်း ID ကိုအတူ div tag ကို firstred ။ ဒါကကျနော်တို့မတိုင်မီခဲ့အတိအကျကဘာလဲ, ဒါပေမယ့်အစား 4 CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေကိုလိုအပ်နေ၏, ငါတို့မျိုးစုံ selector တွေကိုနှင့်အတူတစ်ခုတည်းသောစည်းမျဉ်းရှိသည်။ ဒါကကော်မာပု selector အတွက်မကြောင့်တဦးတည်းစိုးမိုးရေးအတွက်မျိုးစုံ selector တွေကိုရှိသည်ဖို့ကျွန်တော်တို့ကိုခွင့်ပြုရာဖြစ်တယ်။
ဒီချဉ်းကပ်မှုကြောင့်လည်းအနာဂတ် updates များကိုဤမျှလောက်ပိုမိုလွယ်ကူစေသည်, leaner, သန့်စင် CSS ကိုဖိုင်တွေအဘို့ဖြစ်စေခြင်းငှါပေသာ။ သငျသညျအပြာမှအနီရောင်ကနေအရောင်ကိုပြောင်းလဲချင်တယ်ဆိုရင်အခုကိုသင်တစ်ဦးတည်းသာတည်နေရာအတွက်အစားကျွန်တော်တို့ဟာခဲ့မူရင်း 4 စတိုင်စည်းမျဉ်းစည်းကမ်းတွေကိုဖြတ်ပြီးပြောင်းလဲမှုလုပ်ဖို့ရှိသည်! တစ်ခုလုံးကို CSS ကိုဖိုင်တစ်ဝှမ်းကဤအချိန်ငွေစုစဉျးစားကွညျ့နှငျ့သငျဒီရှည်လျား Rune ၌သင်တို့ကိုအချိန်နှင့်အာကာသနှစ်ဦးစလုံးကယ်တင်မည်ကိုမည်သို့တွေ့နိုင်ပါသည်!
syntax မူကွဲ
အချို့လူများကအစားအထက်အဖြစ်တဦးတည်းလိုင်းပေါ်မှာအားလုံးရေးသားခြင်း၏, ကိုယ်ပိုင်လိုင်းပေါ်တစ်ဦးချင်းစီ selector ခွဲထုတ်အားဖြင့် CSS ကိုပိုပြီးရှင်းလင်းပြသားသောအောင်ကိုရွေးချယ်ပါ။ ဤသည်အတိုင်းပြုမည်ဖြစ်ကြောင်းကိုဘယ်လိုဖြစ်ပါသည်:
ကြိမ်မြောက်,
td,
p.red,
div # firstred
{
color: red;
}
သငျသညျအသီးအသီး selector ပြီးနောက်ကော်မာနေရာ, ပြီးတော့သူ့ရဲ့ကိုယ်ပိုင်လိုင်းပေါ်သို့နောက်တစ်နေ့ selector ကိုချိုးဖျက်ဖို့ "ဝင်" ကိုအသုံးပြုသတိပြုပါ။ သငျသညျနောက်ဆုံး selector ပြီးနောက်ကော်မာ add မဟုတ်ပါဘူး။
သင့်ရဲ့ selector တွေကိုအကြားကော်မာကို အသုံးပြု. ဖြင့်, သင်သည်အနာဂတျမှာ update လုပ်ဖို့ပိုမိုလွယ်ကူရဲ့ယနေ့ဖတ်ရှုဖို့ပိုမိုလွယ်ကူကြောင်းပိုမိုကျစ်လစ်သိပ်သည်းစတိုင်စာရွက်ဖန်တီး!
ဂျနီဖာ Krynin ခြင်းဖြင့်မူရင်းဆောင်းပါး။ 5/8/17 အပေါ်ဂျယ်ရမီ Girard တည်းဖြတ်