CSS နဲ့ကျဘျဆိုကျစာလုံးအရောင်များပြောင်းလဲနည်း

ကောင်းသောသတ်ပုံဒီဇိုင်းကိုအောင်မြင်တဲ့က်ဘ်ဆိုက်၏အရေးပါသောအစိတ်အပိုင်းတစ်ခုဖြစ်ပါတယ်။ CSS ကို သင် web စာမျက်နှာများတွင်သင်တည်ဆောက်ဝဘ်စာမျက်နှာများပေါ်တွင်စာသားရဲ့ရုပ်ဆင်းသဏ္ဌာန်ကိုကျော်ကြီးမြတ်ထိန်းချုပ်မှုကိုပေးသည်။ ဒါဟာသင်အသုံးပြုမဖောင့်များ၏အရောင်ကိုပြောင်းလဲနိုင်စွမ်းပါဝင်သည်။

font အရောင်များတစ်ခုသုံးပြီးပြောင်းလဲသွားနိုင်ပါတယ် external style sheet တစ်ခု ပြည်တွင်းရေး style sheet , သို့မဟုတ်ပါက အသုံးပြု. ပြောင်းလဲသွားတယ်စေခြင်းငှါ inline ပုံစံ က HTML document အတွင်း။ အကောင်းဆုံးအလေ့အကျင့်ကသင့် CSS ကိုစတိုင်များများအတွက်အနေနဲ့ external style sheet ကိုအသုံးပြုဖို့သင့်ကြောင်း dictate ။ သင့်ရဲ့စာရွက်စာတမ်း၏ "ဦးခေါင်း" ထဲမှာတိုက်ရိုက်ကျမ်းစာ၌ရေးထားစတိုင်များနေသောအနေနဲ့ပြည်တွင်းရေး style sheet, ယေဘုယျအားဖြင့်သာသေးငယ်တဦးတည်း-စာမျက်နှာဆိုက်များအတွက်အသုံးပြုကြသည်။ သူတို့ကျနော်တို့ကိုနှစ်ပေါင်းများစွာအကြာဆက်ဆံသောအသက်ကြီး "font ကို" tags များကဲ့သို့ပင်နိုင်ငံရေးပါတီများကင်းမဲ့နေကြသည်ကတည်းက inline စတိုင်များရှောင်ကြဉ်ရပါမည်။ သင် inline style ကိုအမှုအမျိုးမျိုးရှိသမျှဥပမာအားဖြင့်မှာသူတို့ကိုပြောင်းပေးဖို့လိုမယ်လို့ကတည်းကသူများသည် inline စတိုင်များကြောင့်အလွန်ခက်ခဲ font ကိုစတိုင်စီမံခန့်ခွဲဖို့ပါစေ။

ဤဆောင်းပါး၌, သင်အနေနဲ့ external style sheet နှင့်အပိုဒ် tag ကိုအတွက်အသုံးပြုသည်တစ်ဦးစတိုင်သုံးပြီးစာလုံးအရောင်ကိုပြောင်းလဲဖို့ဘယ်လိုလေ့လာသင်ယူရပါလိမ့်မယ်။ သငျသညျ tag ကိုအပါအဝင်စာသား, ဝန်းရံသည်ဟုမဆို၎င်း tag ပေါ်တွင်စာလုံးအရောင်ကိုပြောင်းလဲတူညီစတိုင်ပိုင်ဆိုင်မှုလျှောက်ထားနိုင်ပါသည်။

ပြောင်းလဲခြင်းစာလုံးအရောင်မှ Styles ထည့်သွင်းခြင်း

ဒီဥပမာအဘို့, သင်သည်သင်၏စာမျက်နှာ markup နှင့်စာရွက်စာတမ်းမှပူးတွဲပါကြောင်းသီးခြား CSS ကိုဖိုင်တစ်ခုက HTML document ရှိသည်ဖို့လိုအပ်လိမ့်မယ်။ က HTML document ဖွယ်ရှိအထဲတွင်ဒြပ်စင်နံပါတ်စေလိမ့်မယ်။ ကြှနျုပျတို့သညျဤဆောင်းပါး၏ရည်ရွယ်ချက်နှင့်အတူသက်ဆိုင်ရာနေသောတအပိုဒ်ဒြပ်စင်ဖြစ်သည်။

ဤတွင်သင့်ရဲ့ external style sheet ကို အသုံးပြု. အပိုဒ် tags များအတွင်းမှစာသားရဲ့ font ကိုအရောင်ကိုပြောင်းလဲဖို့ဘယ်လိုဖြစ်ပါသည်။

အရောင်တန်ဖိုးများကိုအရောင်သော့ချက်စာလုံးများ, RGB color ကိုနံပါတ်များ, ဒါမှမဟုတ် hexadecimal အရောင်နံပါတ်များအဖြစ်ထုတ်ဖော်ပြောဆိုနိုင်ပါသည်။

1. အဆိုပါအပိုဒ် tag ကိုများအတွက်စတိုင် attribute ကို Add:
   1. p {}
2. စတိုင်အတွက်အရောင်ပိုင်ဆိုင်မှုချထားပါ။ ကြောင်းအိမ်ခြံမြေပြီးနောက်အူမကြီး Place:
   1. p {color:}
3. သို့ပြုလျှင်သင်၏အရောင်တန်ဖိုးပိုင်ဆိုင်မှုပြီးနောက်ထည့်ပါ။ တစ်ဦး Semi-colon နဲ့တန်ဖိုးကိုအဆုံးသတ်ရန်သေချာပါစေ:
   1. p {color: အနက်ရောင်;}

သင့်စာမျက်နှာထဲမှာအပိုဒ်ယခုအနက်ရောင်ဖြစ်လိမ့်မည်။

"အနက်ရောင်" - ဒီဥပမာဟာအရောင် keyword ကိုအသုံးပြုသည်။ အဲဒီ CSS ကိုအတွက်အရောင်ကိုထည့်သွင်းဖို့တလမ်းတည်းဖြင့်ဖြစ်ပါသည်, သို့သော်အလွန်ကန့်သတ်ထားပါသည်။ "အပြာ" သို့မဟုတ် "အစိမ်းရောင်" အဲဒီနှစ်ခုကိုအရောင်များကိုအလွန်တိကျသောရှိပါတယ်, ဒါပေမယ့်သင် "အနီရောင်" ကဲ့သို့သော့ချက်စာလုံးများကိုသုံးပါလျှင်ဘာဖြစ်သွားကတည်းက "အနက်ရောင်" နှင့် "အဖြူ" အတွက်သော့ချက်စာလုံးများကိုသုံးပြီးရိုးရှင်းတဲ့ပါသလဲ အနီ, အပြာ, ဒါမှမဟုတ်အစိမ်းရောင်၏အတိအကျဘာကိုအရိပ်သင်ရရှိလိမ့်မည်နည်း သင်သော့ချက်စာလုံးများနှင့်အတူလုပ်ချင်သောအရောင်အရိပ်အတိအကျသတ်မှတ်လို့မရပါဘူး။ hexadecimal တန်ဖိုးများကိုမကြာခဏအရောင်သော့ချက်စာလုံးများ၏အရပျ၌အသုံးပြုကြသည်အဘယ်ကြောင့်ဒီအဖြစ်ပါတယ်။

p {color: # 000000; }

# 000000 ၏ hex code ကိုအနက်ရောင်ဖို့ဘာသာဘာဖြစ်လို့လဲဆိုတော့ဒါက CSS ကိုစတိုင်လ်လည်း, အနက်ရောင်ရန်သင့်အပိုဒ်၏အရောင်ကိုသတ်မှတ်လိမ့်မယ်။ သင်ပင်ကြောင်း hex တန်ဖိုးအတိုကောက်သုံးရုံ # 000 အဖြစ်ကရေးနှငျ့သငျနဲ့အတူတူပါပဲရလိမ့်မယ်နိုင်ဘူး။

ကျနော်တို့ပြီးသားဖော်ပြခဲ့တဲ့သကဲ့သို့သငျရိုးရှင်းစွာအနက်ရောင်သို့မဟုတ်အဖြူမဟုတ်သောအရောင်လိုအပ်ပါတယ်အခါ, hex တန်ဖိုးများကိုကောင်းစွာအလုပ်လုပ်ကြသည်။ ဒီနေရာတွင်ဥပမာတစ်ခုဖြစ်ပါသည်:

p {color: # 2f5687; }

ဤသည် hex တန်ဖိုးကိုပြာအရောင်ဖို့အပိုဒ်ကိုသတ်မှတ်မယ်လို့, ဒါပေမယ့် keyword ကို "အပြာ" မတူပဲ, ဒီ hex code ကိုသငျသညျအပြာတစ်ဦးအလွန်တိကျတဲ့အရိပ်တင်ထားရန်စွမ်းရည်ပေးသည် - သူတို့အဘို့အ interface ကိုကိုခံခဲ့ရသည်အခါဒီဇိုင်နာကိုရွေးချယ်ကြောင်းဖွယ်ရှိတ ဒီ website မှာ။ ဤကိစ္စတွင်ခုနှစ်, အရောင်တစ် Mid-range ကို, slate ကဲ့သို့အပြာပါလိမ့်မယ်။

နောက်ဆုံးအနေနဲ့သင်ကဲ့သို့ကောင်းစွာ font ကိုအရောင်အဆင်းအဘို့အ RGBA အရောင်တန်ဖိုးများကိုသုံးနိုင်သည်။ RGCA ယခုအားလုံးခေတ်သစ် browser များအတွက်ထောက်ခံသည်, ဒါကြောင့်သင်ကတစ်ဦးကို web browser မှာထောက်ခံမည်မဟုတ်ကြောင်းနည်းနည်းစိုးရိမ်ဤတန်ဖိုးများကိုအသုံးပွုနိုငျသျောလညျးသငျလှယျကူ fallback လည်းသတ်မှတ်နိုင်သည်။

p {color: RGBA (47,86,135,1); }

ဤသည် RGBA တန်ဖိုးကိုအစောပိုင်းကသတ်မှတ်ထားသော slate အပြာအရောင်အဖြစ်အတူတူပင်ဖြစ်ပါသည်။ ပထမဦးဆုံး 3 တန်ဖိုးများကိုနီ, အစိမ်းရောင်နှင့်အပြာရောင်တန်ဖိုးများသတ်မှတ်ထားခြင်းနှင့်နောက်ဆုံးနံပါတ်ကို alpha setting ကိုဖြစ်ပါတယ်။ ဒါဟာ "100%" ကိုဆိုလိုသည်, ဒါကြောင့်ဒီအရောင်မျှမင့်လင်းမြင်သာရှိသည်မယ်လို့အရာ, "1" ဟုသတ်မှတ်ထားသည်။ သငျသညျ .85 ကဲ့သို့သောဒဿမနံပါတ်, ရန်သတ်မှတ်ထားပါက 85% opacity ကိုမှဘာသာပြန်ဆိုမယ်လို့နှင့်အရောင်အနည်းငယ်ပွင့်လင်းပါလိမ့်မည်။

သင်သည်သင်၏အရောင်တန်ဖိုးများ bulletproof ချင်လျှင်, သင်သည်ဤလုပျဆောငျမညျ:

p {
အရောင်: # 2f5687;
အရောင်: RGBA (47,86,135,1);
}

ဤသည် syntax ပထမဦးဆုံး hex code ကိုသတ်မှတ်။ ဒါဟာထို့နောက် RGBA အရေအတွက်ကိုနဲ့တန်ဖိုးကို overwrites ။ ဤသည် RGBA ထောကျပံ့ပေးမထားဘူးဆိုအဟောင်းတွေ browser ကိုပထမဦးဆုံးတန်ဖိုးကိုရရှိရန်နှင့်ဒုတိယလျစ်လျူရှုမည်ဟုဆိုလိုသည်။ ခေတ်သစ် browser များအတွက် CSS ကိုအဆငျ့ဆငျ့နှုန်းဒုတိယကိုအသုံးပြုဖို့လိမ့်မယ်။