ကိုယ့်ငါးမိနစ်တစ် CSS ကိုစားပွဲပေါ်မှာနယ်စပ်ကိုဖန်တီးရန်မည်သို့မည်ပုံလေ့လာပါ
သငျသညျ CSS ကိုနဲ့ HTML စားပွဲရောထွေးမကြားသိကြပေမည်။ ဒါဟာရိုးရှင်းစွာစစ်မှန်သောမဟုတ်ပါဘူး။ ဟုတ်ပါတယ်, ကိုအသုံးပြုပြီး HTML ကို layout ကိုများအတွက်စားပွဲ, မဟုတ်တော့တဲ့ web design ကိုအကောင်းဆုံးအလေ့အကျင့်ဖြစ်ပါတယ် CSS ကို layout ကိုစတိုင်များဖြင့်အစားထိုးခံတော်မူပြီးမှ, ဒါပေမယ့်စားပွဲသေးဝက်ဘ်စာမျက်နှာမှ tabular data တွေအတွက်ထည့်သွင်းဖို့သုံးစွဲဖို့မှန်ကန်တဲ့ markup ဖြစ်ကြသည်။
ဤမျှလောက်များစွာသောကို web ပညာရှင်များကွာသူတို့အဆိပ်ဖြစ်ကြောင်းစဉ်းစားစားပွဲကနေစှ, ဘာဖြစ်လို့လဲဆိုတော့ကံမကောင်းစွာပဲအဲဒီပညာရှင်များအများအပြားကဒီဘုံက HTML element ကများနှင့်သူတို့တစ်တွေဝက်ဘ်စာမျက်နှာပေါ်သူတို့ကိုကိုင်တွယ်ရန်ရှိသည်အခါရုန်းကန်အတူလုပ်ကိုင်နည်းနည်းအတွေ့အကြုံရှိသည်။ ဥပမာအားဖြင့်, သင်တစ်ဦးစာမျက်နှာပေါ်တွင်စားပွဲတစ်ခုရှိပါကသင်စားပွဲပေါ်မှာဆဲလ်မှပြည်တွင်းရေးလိုင်းများ add ချင်တယ်။
CSS ကိုစားပွဲတင်နယ်ခြားမဲ့
သင်အသုံးပြုလိုက်တဲ့အခါ CSS ကို စားပွဲမှနယ်နိမိတ်ကိုထည့်သွင်းဖို့ပြုလုပ်မှသာ table ၏အပြင်ဘက်ဝန်းကျင်တွင်နယ်စပ်ကထပ်ပြောသည်။ သင်သည်ထိုစားပွဲ၏တစ်ဦးချင်းစီဆဲလ်မှပြည်တွင်းရေးလိုင်းများ add ချင်လျှင်, သင်အတွင်းပိုင်း CSS ကိုဒြပ်စင်မှနယ်နိမိတ်ကိုထည့်သွင်းဖို့လိုပါတယ်။ သင်တို့သည်လည်းတစ်ဦးချင်းစီဆဲလ်အတွင်း၌လိုင်းများကိုထည့်သွင်းဖို့ HR tag ကိုသုံးနိုင်သည်။
ဤဆောင်းပါး၌ဖုံးလွှမ်းစတိုင်များလျှောက်ထားနိုင်ရန်အတွက်, သင်သိသာထင်ရှားစွာပင်ရှိသင့် စားပွဲ သင်၏ဝဘ်စာမျက်နှာပေါ်မှာ။ သို့ဖြစ်လျှင်သင်သည်တစ်ခုအဖြစ်ကတော့ style sheet ဖန်တီးသင့်ပါတယ် ပြည်တွင်းရေးစတိုင်စာရွက် သင့်ရဲ့စာရွက်စာတမ်း၏ဦးခေါင်း၌ (သင်၏ "site ကို" တစ်ခုတည်းစာမျက်နှာဖြစ်ပါသည်လျှင်သင်ဖွယ်ရှိသာဤသို့ပြုပါလိမ့်မယ်) သို့မဟုတ်တစ်ဦးအဖြစ်စာရွက်စာတမ်းမှပူးတွဲ external style sheet ဒီသင်သည်အဘယ်သို့ဖြစ်ပါတယ် ( သင့်ရဲ့ site ကိုမျိုးစုံစာမျက်နှာများတွင်ပါလျှင်ပြုတော်မူမည် -) သင်တဦးတည်းပြင်ပစာရွက်ထဲကနေအပေါငျးတို့သစာမျက်နှာများ style လုပ်ဖို့ခွင့်ပြု။ သင်က style sheet သို့အတွင်းပိုင်းလိုင်းများကိုထည့်သွင်းဖို့စတိုင်များထားမည်။
သင်က Start ခင်မှာ
ပထမဦးစွာသင်လိုင်းများသင့်စားပွဲပေါ်လာချင်ဘယ်မှာဆုံးဖြတ်ဖို့လိုအပ်ပါတယ်။ : သင်အပါအဝင်အများအပြားရွေးချယ်စရာရှိသည်
- လူအပေါင်းတို့သည်ဆဲလ်တစ်ဇယားကွက်ဖွဲ့စည်းရန်ပတျဝနျးကငျြ;
- ရုံကော်လံအကြားလိုင်းများတည်နေရာအား;
- ရုံတန်းအကြား; သို့မဟုတ်
- တိကျတဲ့ကော်လံသို့မဟုတ်အတန်းအကြား။
သင်တို့သည်လည်းတစ်ဦးချင်းစီဆဲလ်သို့မဟုတ်အတွင်းတစ်ဦးချင်းစီဆဲလ်တွေပတ်လည်လိုင်းများနေရာချလို့ရပါတယ်။
တစ်ဦးဇယားအတွက်အားလုံးဆဲလ်ခန့် Lines ထည့်သွင်းနည်း
ကြောင်းဇယားကွက်ကဲ့သို့အကျိုးသက်ရောက်အတွက်သင့်ရဲ့ table ထဲမှာအားလုံးဆဲလ်တွေပတ်ပတ်လည်လိုင်းများကိုထည့်သွင်းဖို့, သင့်စတိုင်စာရွက်မှအောက်ပါ add:
td, ကြိမ်မြောက် {
နယ်စပ်: အစိုင်အခဲ 1px အနက်ရောင်;
}
တစ်ဦးဇယားထဲမှာရုံကော်လံကြားတွင်မျဉ်းများထည့်သွင်းနည်း
(ဒီစားပွဲရဲ့ကော်လံအပေါ်အောက်ခြေထိပ်မှပြေးကြောင်းဒေါင်လိုက်လိုင်းဖန်တီး) ကကော်လံအကြားလိုင်းများကိုထည့်သွင်းဖို့, သင့်စတိုင်စာရွက်မှအောက်ပါ add:
td, ကြိမ်မြောက် {
နယ်စပ်-လက်ဝဲ: အစိုင်အခဲ 1px အနက်ရောင်;
}
သူတို့ကိုသင်ပထမဦးဆုံးကော်လံပေါ်မှာပေါ်လာချင်ကြပါဘူးဖြစ်လျှင်, သငျသညျသူတို့အားကြိမ်မြောက်နှင့် td ဆဲလ်တစ်လူတန်းစား add ဖို့လိုအပ်ပါလိမ့်မယ်။ ဒီဥပမာမှာကျွန်တော်တို့ဟာသူတို့အားဆဲလ်တွေပေါ်မနယ်စပ်တစ်လူတန်းစားရှိသည်နှင့်ဤပိုပြီးတိကျတဲ့ CSS ကိုအုပ်စိုးမှုနှင့်အတူနယ်စပ်ကိုဖယ်ရှားယူဆ။ ဒီတော့ဒီမှာကျွန်တော်ကိုအသုံးပြုနိုင်မယ်လို့ HTML ကိုအတန်းအစားဖြစ်ပါသည်:
အတန်းအစား = "no-နယ်စပ်">
ပြီးတော့ကျွန်တော်တို့ရဲ့စတိုင်စာရွက်မှအောက်ပါအချက်များကိုစတိုင် add နိုင်:
.no-နယ်စပ် {
နယ်စပ်-လက်ဝဲ: none;
}
တစ်ဦးဇယားထဲမှာရုံတန်းအကြားလိုင်းထည့်သွင်းနည်း
အဆိုပါစစ်ကြောင်းများအကြားလိုင်းများထည့်သွင်းနှင့်ဝသကဲ့သို့, သင်သည်သင်၏စတိုင်စာရွက်မှဆက်ပြောသည်ရုံတစျခုရိုးရှင်းတဲ့စတိုင်နှင့်အတူဤလုပ်နိုင်ပါတယ်။ CSS ကိုအောက်ကကျွန်တော်တို့ရဲ့စားပွဲအသီးအသီးတန်းများအကြားဒေါင်လိုက်လိုင်းထပ်ထည့်မယ်လို့:
TR {
နယ်စပ်-အောက်ခြေ: အစိုင်အခဲ 1px အနက်ရောင်;
}
ထိုအခါစားပွဲ၏အောက်ခြေကနေနယ်စပ်ကိုဖယ်ရှားပစ်ရန်, သင်တစ်ဖန်ကြောင်း TR tag ကိုတစ်ဦးလူတန်းစား add မယ်လို့:
အတန်းအစား = "no-နယ်စပ်">
သင့်ရဲ့စတိုင်စာရွက်မှအောက်ပါအချက်များကိုစတိုင် Add:
.no-နယ်စပ် {
နယ်စပ်-အောက်ခြေ: none;
}
တစ်ဦးဇယားအတွက်သီးခြားကော်လံများသို့မဟုတ်အတန်းများအကြားလိုင်းထည့်သွင်းနည်း
သငျသညျကိုသာသတ်သတ်မှတ်မှတ်အတန်းသို့မဟုတ်ကော်လံအကြားလိုင်းများချင်တယ်ဆိုရင်, အဲဒီဆဲလ်သို့မဟုတ်အတန်းအပေါ်တစ်ဦးလူတန်းစားသုံးစွဲဖို့လိုအပ်ပါတယ်။ သင်သည်ထိုကော်လံထဲမှာရှိသမျှဆဲလ်မှအတန်းကိုထည့်သွင်းဖို့ရှိသည်ကြောင့်ကော်လံအကြားလိုင်းပေါင်းထည့်ခြင်းအနည်းငယ်ပိုပြီးခက်ခဲတန်းများအကြားထက်ဖြစ်ပါတယ်။ သင့်စားပွဲအလိုအလြောကျကနေထုတ်လုပ်လိုက်တဲ့လျှင် အချို့သောကြင်နာတဲ့ CMS သို့ , ဒီတတ်နိုင်သမျှမကျမည်အကြောင်း, ဒါပေမယ့်သင်ကစာမျက်နှာ coding လက်လျှင်လိုအပ်အဖြစ်, သင်သည်ဤအကျိုးသက်ရောက်အောင်မြင်ရန်သင့်လျော်သောအတန်း add နိုင်ပါတယ်။
အတန်းအစား = "ဘေးထွက်နယ်စပ်">
သင်ရုံသင်တို့အပေါ်မှာမျဉ်းချင်တဲ့အတန်းမှအတန်း add နိုင်ပါတယ်အဖြစ်အတန်းအကြားလိုင်းများပေါင်းထည့်ခြင်း, အများကြီးပိုလွယ်သည်။
အတန်းအစား = "border-အောက်ဆုံး">
သို့ပြုလျှင်သင်၏စတိုင်စာရွက်ဖို့ CSS ကို add:
.border-side {
နယ်စပ်-လက်ဝဲ: အစိုင်အခဲ 1px အနက်ရောင်;
}
.border-အောက်ခြေ {
နယ်စပ်-အောက်ခြေ: အစိုင်အခဲ 1px အနက်ရောင်;
}
တစ်ဦးဇယားအတွက်တစ်ဦးချင်းဆဲလ်ခန့် Lines ထည့်သွင်းနည်း
တစ်ဦးချင်းစီဆဲလ်တစ်ဝှမ်းလိုင်းများကိုထည့်သွင်းဖို့, သင်ပတ်လည်နယ်စပ်ချင်တဲ့ဆဲလ်တစ်လူတန်းစား add:
အတန်းအစား = "နယ်စပ်">
ပြီးတော့သင့်ရဲ့စတိုင်စာရွက်မှအောက်ပါ CSS ကို add:
.border {
နယ်စပ်: အစိုင်အခဲ 1px အနက်ရောင်;
}
တစ်ဦးဇယားအတွက် Lines အတွင်းပိုင်းတစ်ဦးချင်းဆဲလ်ထည့်သွင်းနည်း
သင်တစ်ဦးဆဲလ်ရဲ့ contents အတွင်းပိုင်းလိုင်းများကိုထည့်သွင်းချင်တယ်ဆိုရင်ဒီအလုပျဖို့အလွယ်ကူဆုံးနည်းလမ်းအလျားလိုက်အုပ်ချုပ်မှုကို tag ကို (
) နှငျ့အတူရှိ၏။
အသုံးဝင်သောသိကောင်းစရာများ
သင်သည်သင်၏ပြည်စွန်းပြည်နားမှာကွာဟချက်သတိထားမိလျှင်, သင်နယ်စပ်-ပြိုကျစတိုင်သင့်ရဲ့စားပွဲပေါ်တွင်သတ်မှတ်ထားကြောင်းသေချာအောင်သင့်ပါတယ်။ သင့်ရဲ့စတိုင်စာရွက်မှအောက်ပါ Add:
စားပွဲ {
နယ်စပ်-ပြိုကျ: ပြိုကျ;
}
သငျသညျအထကျပါ CSS ကိုအပေါငျးတို့သကိုရှောင်ရှားနှင့်သင့်စားပွဲ tag ထဲမှာနယ်စပ် attribute ကိုသုံးနိုင်သည်။ ကန့်ကွက်ခံထားမဟုတ်နေချိန်မှာသင်သာနယ်စပ်ရဲ့ width သတ်မှတ်နိုင်ပြီးမှသာစားပွဲပေါ်မှာသို့မဟုတ်တစုံတခုကိုမျှသူအပေါင်းတို့ဆဲလ်တွေပတ်ပတ်လည်ကရှိနိုင်ပါသည်အဖြစ်နားလည်သဘောပေါက်သို့သော်မိမိအ attribute ကကြောင်း, CSS ကိုထက်သိသိသာသာလျော့နည်းပြောင်းလွယ်ပြင်လွယ်သည်။