CSS ပုံစံများ
HTML ဖောင်တစ်ခု၏အသွင်အပြင်ကို CSS ဖြင့် အလွန်တိုးတက်စေနိုင်သည်။
ထည့်သွင်းမှုအကွက်များကို ပုံစံရေးဆွဲခြင်း။
widthထည့်သွင်းအကွက်၏ အကျယ်ကို ဆုံးဖြတ်ရန် ပိုင်ဆိုင်မှု ကို အသုံးပြုပါ -
ဥပမာ
input
{
width: 100%;
}
အထက်ဖော်ပြပါ ဥပမာသည် <input> ဒြပ်စင်အားလုံးနှင့် သက်ဆိုင်ပါသည်။ တိကျသောထည့်သွင်းမှုအမျိုးအစားတစ်ခုကိုသာ ပုံစံသွင်းလိုပါက၊ attribute ရွေးချယ်မှုများကို သင်အသုံးပြုနိုင်သည်-
input[type=text]- စာသားအကွက်များကိုသာ ရွေးချယ်ပါမည်။input[type=password]- စကားဝှက်အကွက်များကိုသာ ရွေးချယ်ပါမည်။input[type=number]- နံပါတ်ကွက်လပ်များကိုသာ ရွေးချယ်ပါမည်။- စတာတွေ။
Padded ထည့်သွင်းမှုများ
paddingစာသားအကွက်အတွင်း နေရာထည့်ရန် ပိုင်ဆိုင်မှု ကို အသုံးပြု ပါ။
အကြံပြုချက်-margin တစ်ခုနှင့်တစ်ခုပြီးနောက် သင့်တွင်ထည့်သွင်းမှုများများစွာရှိသောအခါ ၊ ၎င်းတို့အပြင်ဘက်တွင် နေရာပို ထည့်ရန် အချို့ကိုလည်း ထည့်ချင်ဖြစ်နိုင်သည် -
ဥပမာ
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
box-sizingကျွန်ုပ်တို့သည် ပိုင်ဆိုင်မှုကို
သတ်မှတ်ထားကြောင်း သတိပြုပါ border-box။ ၎င်းသည် padding နှင့် နောက်ဆုံးတွင် ဘောင်များကို အစိတ်အပိုင်းများ၏ စုစုပေါင်းအကျယ်နှင့် အမြင့်တွင် ထည့်သွင်းထားကြောင်း သေချာစေသည်။ ကျွန်ုပ်တို့၏ CSS Box Sizing အခန်း တွင် ပိုင်ဆိုင်မှု
အကြောင်း ပိုမိုဖတ်ရှုပါ ။box-sizing
နယ်ခြားထားသော သွင်းအားစုများ
borderနယ်နိမိတ်အရွယ်အစားနှင့် အရောင်ပြောင်းလဲရန် ပိုင်ဆိုင်မှုကို အသုံးပြုပြီး လုံး border-radiusဝန်းသောထောင့်များထည့်ရန် ပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
ဥပမာ
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
အောက်ခြေဘောင်တစ်ခုသာလိုလျှင် border-bottomပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
ဥပမာ
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
ရောင်စုံထည့်သွင်းမှုများ
background-colorထည့်သွင်းမှုတွင် နောက်ခံအရောင်တစ်ခုထည့်ရန်နှင့် colorစာသားအရောင်ပြောင်းရန် ပိုင်ဆိုင်မှုကို အသုံးပြု ပါ -
ဥပမာ
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
အာရုံစူးစိုက်မှု သွင်းအားစုများ
မူရင်းအားဖြင့်၊ အချို့သောဘရောက်ဆာများသည် ထည့်သွင်းမှုကို အာရုံစိုက်လာသောအခါတွင် ထည့်သွင်းမှုတစ်ဝိုက်တွင် အပြာရောင်ကောက်ကြောင်းကို ထည့်သွင်းလိမ့်မည် (အပေါ်ကိုကလစ်နှိပ်ပါ)။ ထည့်သွင်းမှုတွင် ထည့်သွင်းခြင်းဖြင့် သင်သည် ဤအပြုအမူကို ဖယ်ရှားနိုင်သည် outline: none;။
:focusအာရုံစူးစိုက်မှုရလာသောအခါ ထည့်သွင်းမှုအကွက်နှင့်အတူ တစ်ခုခုပြုလုပ်ရန် ရွေးချယ် ကိရိယာကို အသုံးပြု ပါ-
ဥပမာ
input[type=text]:focus
{
background-color: lightblue;
}
ဥပမာ
input[type=text]:focus
{
border: 3px solid #555;
}
အိုင်ကွန်/ပုံဖြင့် ထည့်သွင်းပါ။
ထည့်သွင်းမှုအတွင်း အိုင်ကွန်တစ်ခုကို လိုချင်ပါက ပိုင်ဆိုင်မှုကို အသုံးပြုပြီး ၎င်းကို background-imageပိုင်ဆိုင်မှုနှင့် နေရာချထားပါ background-position။ အိုင်ကွန်၏နေရာလွတ်ကို သိမ်းဆည်းရန် ကြီးမားသော ဘယ်ဘက်အကွက်ကို ထည့်ထားကြောင်းလည်း သတိပြုပါ။
ဥပမာ
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
သက်ဝင်လှုပ်ရှားရှာဖွေမှု ထည့်သွင်းခြင်း။
ဤနမူနာတွင် transitionကျွန်ုပ်တို့သည် ရှာဖွေမှုထည့်သွင်းမှု၏ အကျယ်ကို အာရုံစိုက်ရန် CSS ပိုင်ဆိုင်မှုကို အသုံးပြုပါသည်။ ကျွန်ုပ်တို့၏ CSS Transitions အခန်း
transitionတွင် နောက်ပိုင်းတွင် ပိုင်ဆိုင်မှု အကြောင်း ပိုမိုလေ့လာနိုင်ပါမည် ။
ဥပမာ
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Textareas ပုံစံရေးဆွဲခြင်း။
အကြံပြုချက်- စာသားဧရိယာများကို အရွယ်အစားမပြောင်းစေရန် ပိုင်ဆိုင်မှု ကို အသုံးပြုပါ resize(အောက်ခြေညာဘက်ထောင့်ရှိ "grabber" ကို ပိတ်ပါ)။
ဥပမာ
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Styling Menus ကို ရွေးပါ။
ဥပမာ
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
ပုံစံထည့်သွင်းခြင်းခလုတ်များ
ဥပမာ
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
CSS နှင့် ခလုတ်များကို စတိုင်လ်ပုံစံလုပ်ပုံအကြောင်း နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ CSS Buttons Tutorial ကို ဖတ်ရှုပါ ။
တုံ့ပြန်မှုပုံစံ
အကျိုးသက်ရောက်မှုမြင်ရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ။ မျက်နှာပြင်သည် 600px ထက်နည်းသောအခါ၊ ကော်လံနှစ်ခုကို တစ်ခုနှင့်တစ်ခု ဘေးတွင်မဟုတ်ဘဲ ကော်လံနှစ်ခု၏အပေါ်တွင် စီထားပါ။
အဆင့်မြင့်- အောက်ပါဥပမာ သည် တုံ့ပြန်မှုပုံစံတစ်ခုဖန်တီးရန် မီဒီယာမေးမြန်းချက်များကို အသုံးပြုသည်။ ဤအကြောင်းကို နောက်အခန်းတွင် သင်ပိုမိုလေ့လာနိုင်ပါမည်။