CSS နဲ့အပိုဒ် Indent လုပ်နည်း

ယင်းစာသား-Indent အိမ်ခြံမြေနှင့်ကပ်လျက်မောင်နှမ selector အသုံးပြုခြင်း

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

ကြောင်းအပိုဒ်၏ပထမလိုင်းတဦးတည်းအသစ်မှာသည်အဘယ်မှာရှိသင်ပုံနှိပ်ထဲမှာမကြာခဏတွေ့မြင်ကြဘူးကြောင်း (နှင့်ကျွန်ုပ်တို့အွန်လိုင်းထပ်ဖွနိုငျသော) တစျဘုံအပိုဒ်စတိုင်ဖြစ်ပါတယ် tab ကိုအာကာသ ။ ဒီတစ်ခုအပိုဒ်ကစတင်ခဲ့သည်နှင့်အခြားစွန်းတိုင်အောင်ဘယ်မှာစာဖတ်သူများကိုမြင်ရဖို့ခွင့်ပြုပါတယ်။

သင်သည်ထိုသူတို့အောက်မှာအာကာသနှင့်အတူ browser များ, ပုံမှန်အားဖြင့်, display ကိုအပိုဒ်ဖြစ်သောကြောင့်တဦးတည်းကြီးစွန်းများနှင့်အခြားစတင်ခဲ့သည်ဘယ်မှာပြသနိုင်ဖို့နည်းလမ်းတခုအဖြစ်ဝဘ်စာမျက်နှာ၌ရှိသကဲ့သို့အများကြီးဒီအမြင်အာရုံစတိုင်မမြင်မိပါဘူး, ဒါပေမယ့်သင်ရှိသည်ဖို့စာမျက်နှာ style ချင်လျှင် print- အပိုဒ်အပေါ်ကုန်အမှာစာစတိုင်မှုတ်သွင်း, သင် text-ကုန်အမှာစာစတိုင်ပိုင်ဆိုင်မှုနှင့်အတူဒါလုပ်နိုင်ပါတယ်။

ဒီပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုများအတွက် syntax ရိုးရှင်းပါသည်။ ဒီနေရာတွင်တစ်ဦးစာရွက်စာတမ်းအပေါင်းတို့၌အပိုဒ်မှစာသား-ကုန်အမှာစာပေါင်းထည့်မယ်လို့မည်ကဲ့သို့ဖြစ်ပါသည်။

p {text-ကုန်အမှာစာ: 2em; }

အဆိုပါ Indent စိတ်ကြိုက်

သင်ပြီးအင်တင်းခဲ့သည်ချင်သောအပိုဒ်တစ်လူတန်းစား add နိုင်ပါတယ်, ဒါပေမယ့်သင်ကတစ်လူတန်းစားကိုထည့်သွင်းဖို့တိုင်းအပိုဒ်တည်းဖြတ်လိုအပ်သည်, Indent မှအတိအကျအပိုဒ်ကိုသတ်မှတ်နိုင်ပါတယ်တလမ်းတည်း။ ဒါကမတတ်နိုင်သောသည်နှင့်နောက်ကိုလိုက်ပါဘူး coding HTML ကို အကောင်းဆုံးအလေ့အကျင့်။

သငျသညျအပိုဒ် Indent သည့်အခါမယ့်အစား, သင်ထည့်သွင်းစဉ်းစားသင့်ပါတယ်။ သငျသညျကိုတိုက်ရိုက်အခြားအပိုဒ်အောက်ပါဖြစ်ကြောင်းအပိုဒ် Indent ။ ဒီလိုလုပ်ဖို့, သင်ကပ်လျက်မှေးခငျြး selector ကိုသုံးနိုင်သည်။ ဒီ selector နှင့်အတူ, သငျသညျခကျြခငျြးခငျြးခငျြးအပိုဒ်အားဖြင့်ရှေ့ပြေးသောအပိုဒ်ကိုရွေးချယ်ခြင်းနေကြသည်။

p + P {text-ကုန်အမှာစာ: 2em; }

သင်ပထမဦးဆုံးလိုင်း indenting နေကြသည်ကတည်းကသင်သည်လည်းသင်၏အအပိုဒ် (ထို browser ကို default အနေနဲ့ဖြစ်သော) သူတို့အကြားမည်သည့်အပိုအာကာသရှိသည်မဟုတ်ကြဘူးကြောင်းသေချာအောင်သင့်ပါတယ်။ stylist, သင်နှစ်ဦးစလုံးဖြစ်စေအပိုဒ်များအကြားအာကာသရှိသည်ဒါမှမဟုတ်ပထမဦးဆုံးလိုင်း Indent, ဒါပေမယ့်မပေးသင့်ပါတယ်။

p {margin-အောက်ခြေ: 0; padding ကို-အောက်ခြေ: 0; } p + P {margin-top: 0; padding ကို-top: 0; }

အနုတ်လက္ခဏာ Indent

သင်တို့သည်လည်းပုံမှန်ကုန်အမှာစာများကဲ့သို့လက်ျာဘက်ဆန့်ကျင်အဖြစ်လက်ဝဲသှားဖို့တစ်လိုင်းရဲ့ start စေတဲ့အနုတ်လက္ခဏာတန်ဖိုးကိုအတူ text-ကုန်အမှာစာပိုင်ဆိုင်မှုကိုသုံးနိုင်သည်။ ကိုးကားဇာတ်ကောင်အပိုဒ်၏လက်ဝဲဘက်နှင့်မိမိတို့ကိုယ်ကိုသေးတာပဲလက်ဝဲ alignment ကိုဖွဲ့စည်းရန်စာလုံးဖို့အနည်းငယ်အနားသတ်ထဲမှာပေါ်လာလိမ့်မယ်ဒါကြောင့်တစ်လိုင်းတစ် quotation သင်္ကေတနှင့်အတူစတင်လျှင်သင်ဤသို့ပြုလိမ့်မည်။

သင်တစ်ဦး blockquote တစ်ဆင်းသက်လာသောအပိုဒ်ရှိသည်နှင့်သင်ကအနုတ်လက္ခဏာပြီးအင်တင်းခဲ့သည်ဖြစ်ချင်သောဥပမာ, ပြောပါ။ သင်ဤ CSS ကိုရေးသားနိုငျခဲ့:

blockquote p {text-ကုန်အမှာစာ: -.5em; }

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

margin နဲ့ padding နှင့်စပ်လျဉ်း

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