သင့်ရဲ့ဝက်ဘ်ဆိုက်၏မျှော် Improve ဖို့သင်ယူပါ
အတူပုံစံများ style ဖို့ဘယ်လိုလေ့လာသင်ယူ CSS ကို သင့်ရဲ့ website ၏အသွင်အပြင်တိုးတက်လာဖို့အကောင်းဆုံးနည်းလမ်းဖြစ်ပါတယ်။ HTML ကိုပုံစံများကိုအများဆုံးဝက်ဘ်စာမျက်နှာများပေါ်တွင် ugliest အမှုအရာတို့တွင်အပွဲတစ်ပွဲရှိပါတယ်။ သူတို့ဟာမကြာခဏငြီးငွေ့စရာနှင့် utilitarian ဖြစ်ကြပြီးစတိုင်၏လမ်းအများကြီးမပူဇော်ကြဘူး။
CSS နဲ့, ထိုပြောင်းလဲနိုင်သည်။ ပိုအဆင့်မြင့်ပုံစံ tags များနှင့်အတူ CSS ကိုပေါင်းစပ်ပြီးအချို့ကောင်းတဲ့-ရှာဖွေနေပုံစံများကိုကယ်မနှုတ်နိုင်။
ယင်းအရောင်များကိုပြောင်းလဲ
ရုံစာသားကိုနှင့်ဝသကဲ့သို့, သင်ပုံစံဒြပ်စင်များ၏ foreground နှင့်နောက်ခံအရောင်တွေပြောင်းလဲနိုင်သည်။
နီးပါးတိုင်းပုံစံဒြပ်စင်၏နောက်ခံအရောင်ကိုပြောင်းလဲရန်လွယ်ကူသောနည်းလမ်း input ကို tag ကိုအပေါ် background-color property ကိုသုံးစွဲဖို့ဖြစ်ပါတယ်။ ဥပမာ, ဒီ code ကိုလူအပေါင်းတို့သည်ဒြပ်စင်ပေါ်တွင်အပြာနောက်ခံအရောင် (# 9cf) နှင့်သက်ဆိုင်သည်။
input ကို {
background-color: # 9cf;
အရောင်: # 000;
}
သာအချို့သောပုံစံဒြပ်စင်၏နောက်ခံအရောင်ကိုပြောင်းလဲရုံ textarea add နှင့်စတိုင်မှရွေးချယ်ပါ။ ဥပမာ:
input ကို, textarea {ကို select
background-color: # 9cf;
အရောင်: # 000;
}
သင်သည်သင်၏နောက်ခံအရောင်မိုက်စေမယ်ဆိုရင်စာသားအရောင်ပြောင်းလဲပစ်ရန်သေချာစေပါ။ နှိုငျးယှဉျသောအရောင်အဆင်း ပုံစံဒြပ်စင်ကိုပိုမိုရှင်းလင်းပြသားသောအောင်ကူညီပေးပါတယ်။ ဥပမာအားဖြင့်, မှောင်မိုက်အနီရောင်နောက်ခံအရောင်အပေါ်စာသားကိုစာသားအရောင်အဖြူလျှင်ဖတ်ပါအများကြီးပိုပြီးလွယ်လွယ်ကူကူဖြစ်ပါတယ်။ ဥပမာ, ဒီ code ကိုအနီရောင်နောက်ခံပေါ်တွင်အဖြူစာသားကိုနေရာ။
input ကို, textarea {ကို select
background-color: # c00;
အရောင်: #fff;
}
သင်ပင်ပုံစံ tag ကိုသူ့ဟာသူအပေါ်တစ်ဦးနောက်ခံအရောင်ထားနိုင်ပါတယ်။ ပုံစံ tag ကိုတစ်ကြောင်းကိုသတိရပါ ပိတ်ပင်တားဆီးမှုဒြပ်စင် , ဒါကြောင့်အရောင်တစ်ခုလုံးကိုစတုဂံ, မဒြပ်စင်ရုံနေရာများတွင်ဖြည်။
သငျသညျထိုဒေသတွင်ဤကဲ့သို့သောထွက်မတ်တပ်ရပ်စေတဲ့ပိတ်ပင်တားဆီးမှုဒြပ်စင်တစ်ခုအဝါရောင်နောက်ခံ add နိုင်သည်
ပုံစံ {
background-color: #ffc;
}
နယ်ခြားမဲ့ Add
အဆင်းအရောင်နှင့်အမျှ, သင်အမျိုးမျိုးသောပုံစံဒြပ်စင်များ၏နယ်နိမိတ်ပြောင်းလဲနိုင်သည်။ သငျသညျတပြင်လုံးကိုပုံစံန်းကျင်တစ်ခုတည်းနယ်စပ်ထည့်သွင်းနိုင်ပါတယ်။ padding ကိုထည့်သွင်းဖို့သေချာပါစေ, သို့မဟုတ်သင့်ပုံစံဒြပ်စင်လာမယ့်နယ်စပ်မှလက်ျာဘက်တက်ကုိုကြည့်ပါလိမ့်မည်။
ဤတွင် padding ကို 5 pixels ကိုအတူ 1-pixel အနက်ရောင်နယ်စပ်များအတွက်ကုဒ်၏ဥပမာတစ်ခုဖွင့်:
ပုံစံ {
နယ်စပ်: 1px အစိုင်အခဲ # 000;
padding ကို: 5px;
}
သင်ရုံပုံစံသူ့ဟာသူထက်ပိုန်းကျင်နယ်နိမိတ်ထားနိုင်ပါတယ်။ သူတို့ကိုထွက်မတ်တပ်ရပ်စေရန် input ကိုပစ္စည်းများနယ်စပ်ကိုပြောင်း:
input ကို {
နယ်စပ်: 2px dashed # c00;
}
သူတို့ပြီးတော့ input ကိုသေတ္တာများနှင့်တူလျော့နည်းကြည့်နှင့်အချို့သောလူတွေကသူတို့ပုံစံဖြည့်နိုင်ပါတယ်နားလည်သဘောပေါက်နိုင်မည်မဟုတ်ပါသကဲ့သို့သင်တို့ input ကိုသေတ္တာပေါ်မှာနယ်နိမိတ်ထားသည့်အခါသတိထားပါ။
စတိုင်အင်္ဂါရပ်များပေါင်းစပ်
အတွေးနှင့်အချို့သော CSS နဲ့သင့်ရဲ့ပုံစံဒြပ်စင်အတူတကွချပြီးအသုံးပြုပုံသင်သည်သင်၏ site ၏ဒီဇိုင်းနှင့် layout ကိုဖြည့်မယ့်ကောင်းတဲ့ရှာဖွေနေပုံစံကို set up နိုင်ပါတယ်။