စင်တာမှပုံများနှင့်အခြား HTML ကို္တုဖို့ CSS ကိုသုံးပါ

by ဂျနီဖာ Kyrnin

မြစင်တာပုံများ, စာသား, နှင့်ပိတ်ပင်တားဆီးမှုဒြပ်စင်က်ဘ်ဆိုက်များကိုတည်ဆောက်သည့်အခါ

သငျသညျနေတယ်ဆိုရင် က်ဘ်ဆိုက်များကိုတည်ဆောက်ဖို့ဘယ်လိုလေ့လာသင်ယူ , သင်ကျွမ်းကျင်ရန်လိုအပ်မည်အသုံးအများဆုံးလှည့်ကွက်များ၏တဦးတည်းကို browser window တွင်ပစ္စည်းများကိုအဓိကထားဖို့ဘယ်လိုဖြစ်ပါသည်။ ဒီအစာမကျြနှာပျေါမှာပုံရိပ်တစ်ခု ဗဟိုပြု. ဆိုလိုနိုင်, သို့မဟုတ်ပါကဒီဇိုင်း၏တစ်စိတ်တစ်ပိုင်းအဖြစ်ခေါင်းကြီးပိုင်းတွင်တူသောစင်တာ-ဖြောင့်မတ်သောစာသားဖြစ်နိုင်ပါတယ်။

ဗဟိုပြုပုံရိပ်တွေသို့မဟုတ်စာသားသို့မဟုတ်ပင်သင်၏အတစ်ခုလုံးကိုဝက်ဘ်စာမျက်နှာ၏ဤအမြင်ကြည့်ပြီးမြောက်ရန်သင့်လျော်သောလမ်းကို အသုံးပြု. ဖြစ်ပါတယ် ကက်စကိတ်ပုံစံ Sheet များ (CSS ကို) ။ Center များအတွက်ဂုဏ်သတ္တိများအများစုဟာဗားရှင်း 1.0 ကတည်းက CSS ကိုအတွက်ပါပြီ, သူတို့နှင့်အတူအကြီးအလုပ်မလုပ် CSS3 နှင့်ခေတ်သစ် ကို web browser များ ။

web design မှာများစွာသောရှုထောင့်လိုပဲ, ဝဘ်စာမျက်နှာမှာ element တွေကိုအဓိကထားဖို့ CSS ကိုသုံးစွဲဖို့နည်းလမ်းများစွာရှိပါတယ်။ ဒီအမြင်ကြည့်အောင်မြင်ရန် CSS ကိုသုံးစွဲဖို့အချို့သောကွဲပြားခြားနားတဲ့နည်းလမ်းတွေမှာကြည့်ကြရအောင်။

HTML မှာ Center က Element တွေကိုမှ CSS ကိုအသုံးပြုခြင်း၏အကျဉ်းချုပ်တွင်

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

မြင့်မားသောအဆင့်မှာသင် CSS ကိုသုံးနိုငျ:

ရေးစင်တာကစာသား
(ကဌာနခွဲကဲ့သို့) တစ်ဦးပိတ်ပင်တားဆီးမှု-Level ဒြပ်စင်ဗဟို
ပုံတစ်ပုံကိုအဓိကထား
ဒေါင်လိုက်တစ်ပိတ်ပင်တားဆီးမှုဒါမှမဟုတ် image ကိုအဓိကထား

အတော်များများက (အများအပြား) လွန်ခဲ့သောနှစ်ပေါင်းကို web ဒီဇိုင်နာများအတွက်

ပုံရိပ်တွေဗဟိုမှဒြပ်စင်နှင့်စာသားကိုသုံးပေမယ့်နိုင် က HTML element က ယခုကန့်ကွက်ခံထားနှင့်မဟုတ်တော့ခေတ်သစ်ကို web browser များအတွက်ထောက်ခံသည်။ ဒါဟာသင့်ရဲ့စာမျက်နှာများကိုစနစ်တကျပြသခြင်းနှင့်ခေတ်မီစံချိန်စံညွှန်းများနှင့်ကိုက်ညီရန်လိုလျှင်သင်ဤ HTML ကိုဒြပ်စင်သုံးပြီးရှောင်ရှားရပါမည်ကိုဆိုလိုသည်! ခေတ်သစ်ဝက်ဘ်ဆိုက်များဖွဲ့စည်းပုံနှင့်စတိုင်တစ်ခုရှင်းရှင်းလင်းလင်းခွဲခြာရှိသင့်သောကွောငျ့ဒီဒြပ်စင်ကန့်ကွက်ခံထားခဲ့အကြောင်းပြချက်, ကြီးမားတဲ့အစိတ်အပိုင်းအတွက်ဖြစ်ပါသည်။ HTML ကို CSS ကိုစတိုင်ဆိုထားသည်စဉ်ဖွဲ့စည်းပုံကိုဖန်တီးရန်အသုံးပြုသည်။ စင်တာ (ကမဟုတ်ဘဲကြောင့်သည်အဘယ်အရာထက်မြင်တွေ့ရပုံ) က Element တစ်ခုအမြင်အာရုံဝိသေသဖြစ်ပါတယ်ကြောင့်, စတိုင် CSS ကိုမဟုတျဘဲက HTML နှင့်အတူကိုင်တွယ်နေပါတယ်။ တစ်ဦး ထည့်သွင်းအဘယ်ကြောင့်ဤအ HTML ကိုဖွဲ့စည်းပုံမှာမှ tag ကိုခေတ်သစ်ကို web စံချိန်စံညွှန်းများနှင့်အညီမမှန်ကန်ကြောင်းဖြစ်ပါတယ်။ အဲဒီအစားကျွန်တော်တို့ဟာကောင်းတဲ့နှင့်ဗဟိုပြုကျွန်တော်တို့ရဲ့ဒြပ်စင်ရဖို့ CSS ကိုမှဖွင့်ပါလိမ့်မယ်။

CSS နဲ့ ဗဟိုပြု. စာသား

တစ်ဦးဝက်ဘ်စာမျက်နှာအပေါ်အဓိကထားဖို့အလွယ်ကူဆုံးအရာကစာသားဖြစ်ပါတယ်။ text-align: သင်ဒီလိုလုပ်ဖို့ကိုသိရန်လိုအပ်ပါတစ်ဦးတည်းသာစတိုင်ပိုင်ဆိုင်မှုရှိပါသည်။ ဥပမာအားဖြင့်, အောက်က CSS ကိုစတိုင်ကိုယူ:

p.center {text-align: စင်တာ; }

CSS ကို၏ဤလိုင်းနှင့်အတူဗဟိုလူတန်းစားနှင့်အတူတိကျမ်းစာ၌လာသည်တိုင်းအပိုဒ်က၎င်း၏မိဘဒြပ်စင်အတွင်းပိုင်းရေပြင်ညီဗဟိုပြုမည်ဖြစ်သည်။ အဆိုပါအပိုဒ်တစ်ဌာနခွဲအတွင်းပိုင်းခဲ့မယ်ဆိုရင်ဥပမာ, ကအချင်းချင်းကွဲပြားခြင်း၏ကလေးတစ်ဦးဖြစ်ခဲ့သည်အဓိပ္ပာယ်တစ်ခုကို

အတွင်းအပြင်အလျားလိုက်ဗဟိုပြုမည်ဖြစ်သည်။

ဒီနေရာတွင်က HTML document အတွက်လျှောက်ထားဒီလူတန်းစားများ၏ဥပမာတစ်ခုဖွင့်:

ဤသည်ကိုစာသားဗဟိုပြုနေသည်။

အဆိုပါ text-align နှင့်အတူစာသားကို ဗဟိုပြု. သောအခါ, ယင်း၏်ဒြပ်စင်အတွင်းဗဟိုပြုနှင့်သေချာပေါက်အပြည့်အဝစာမျက်နှာကိုယ်တိုင်ကအတွင်းဗဟိုပြုမခံကြပါလိမ့်မယ်ဆိုတာသတိရပါ။ ဒါ့အပြင်ကြောင်းစင်တာ-တရားမျှတစာသားကိုအကြောင်းအရာကြီးမားလုပ်ကွက်များအတွက်ဖတ်ပါ, ဒါကြောင့်စပါးအနည်းငယ်သာဒီစတိုင်သုံးစွဲဖို့ခက်ခဲနိုင်ပါတယ်သတိရပါ။ ခေါင်းစီးသတင်းနှင့်စာသား၏သေးငယ်တဲ့လုပ်ကွက်တစ်ခုဆောင်းပါးသို့မဟုတ်အခြားအကြောင်းအရာများအတွက်ကြော်ငြာတိုစာသားကိုကဲ့သို့မကြာခဏဗဟိုပြုသည့်အခါဖတ်ပါနှင့်ဒဏ်ငွေရန်လွယ်ကူသော်လည်း, အကြောင်းအရာအပြည့်အဝစင်တာကြီးလျှင်စာသားပိုကြီးတဲ့လုပ်ကွက်, အပြည့်အဝဆောင်းပါးသူ့ဟာသူကဲ့သို့လောင်ဖို့စိန်ခေါ်မည်ဖြစ်ကြောင်း တရားမျှတ။ သတိရပါ ဖတ်နိုင်တဲ့အမြဲသော့ချက် က website ကိုစာသားမမှကြွလာသောအခါ,

CSS နဲ့အကြောင်းအရာ၏ ဗဟိုပြု. လုပ်ကွက်

လုပ်ကွက်တစ်သတ်မှတ်အကျယ်ရှိသည်နှင့်တစ်ဦးပိတ်ပင်တားဆီးမှု-Level ဒြပ်စင်အဖြစ်ထူထောင်ကြသည်ကြောင်းကိုသင်၏စာမျက်နှာပေါ်တွင်မဆိုဒြပ်စင်ဖြစ်ပါသည်။ မကြာခဏဆိုသလိုအဲဒီလုပ်ကွက်က HTML

element ကသုံးပြီးအသုံးပြုနေသူများကဖန်တီးနေကြသည်။ CSS နဲ့လုပ်ကွက်ဗဟိုမှအသုံးအများဆုံးလမ်းအော်တိုမှလက်ဝဲနှင့်လက်ယာမာဂျင်နှစ်မျိုးလုံးကိုသတ်မှတ်ဖို့ဖြစ်ပါတယ်။ ဒီနေရာတွင်ကလျှောက်ထား "center" တဲ့လူတန်းစား attribute ကိုရှိတယ်လို့ဌာနခွဲများအတွက် CSS ကိုဖြစ်ပါသည်:

div.center {
margin: 0 အော်တို;
အကျယ်: 80em;
}

လက်ဝဲနှင့်လက်ယာကိုသုံးပါလိမ့်မယ်နေစဉ်အနားသတ်အိမ်ခြံမြေအဘို့ဤ CSS ကိုအတိုကောက် 0 ၏တန်ဖိုးထိပ်နဲ့အောက် margin ကိုသတ်မှတ်မယ်လို့ "အော်တို။ " ဒါဟာမရှိမဖြစ်လိုအပ်တဲ့ရရှိနိုင်ပါသည်နှင့်ထိထိရောက်ရောက်စာမျက်နှာပေါ်မှဒြပ်စင် ဗဟိုပြု. , အ viewport window ၏နှစ်ဖက်အကြားအညီအမျှကအပိုင်းသုံးပိုင်းဆိုအာကာသကြာပါသည်။

ဒီနေရာတွင်က HTML မှာလျှောက်ထားတာဖြစ်ပါတယ်:

ဒါကတစ်ခုလုံးကိုပိတ်ပင်တားဆီးမှုဗဟိုပြုနေပါသည်,
ဒါပေမယ့်အထဲမှာစာသား aligned ကျန်ရစ်ရ၏။

နေသမျှကာလပတ်လုံးသင်၏အပိတ်ပင်တားဆီးမှုတစ်သတ်မှတ်အကျယ်ရှိပြီးအဖြစ်ကပါဝင်တဲ့ဒြပ်စင်အတွင်းပိုင်းကိုယ်တိုင်ကဗဟိုလိမ့်မယ်။ ကြောင်းလုပ်ကွက်တွင်ပါရှိသောစာသားမကအတွင်းဗဟိုပြုမည်မဟုတ်ပါ, ဒါပေမယ့် left-တရားမျှတလိမ့်မည်။ စာသားကို left-တရားမျှတဖြစ်ပါတယ် becaus ကို web browser များအတွက် default အနေနဲ့၌ဤဖြစ်ပါတယ်။ သင်ကစာသားအဖြစ်ကောင်းစွာဗဟိုပြုလိုချင်ပါကသင်သည်ကျနော်တို့အစောပိုင်းကအဆိုပါဌာနခွဲမှဗဟိုမှဒီနည်းလမ်းကိုနှင့် တွဲဖက်. ဖုံးလွှမ်း text-align အသုံးပြုနိုင်တယ်။

CSS နဲ့ ဗဟိုပြု. ပုံများ

အများဆုံး browser များပုံရိပ်တွေကိုပြသပါလိမ့်မယ်နေချိန်မှာကျနော်တို့ထားပြီးအပိုဒ်များအတွက်ကြည့်ရှုသောအားဖွငျ့အကြံပြုမပြုလုပ်, ထိုသို့ technique ကိုမှီခိုအားကိုးဖို့ကောင်းတစ်ဦးအယူအဆမဟုတ်ပါဘူးတူညီတဲ့ text-align သုံးပြီးဗဟိုပြု သည့် W3C ။ ကအကြံပြုသည်မဟုတ်ကတည်းက browser များ၏အနာဂတ်ဗားရှင်းဒီနည်းလမ်းကိုလျစ်လျူရှုရန်ရွေးချယ်တင်မြှောက်နိုင်မယ့်အခွင့်အလမ်းကအမြဲတမ်းရှိပါတယ်။

အဲဒီအစားပုံတစ်ပုံကိုအဓိကထားဖို့ text-align အသုံးပြုခြင်း၏, သင်ရှင်းရှင်းလင်းလင်း image ကိုတစ်ဦးပိတ်ပင်တားဆီးမှု-level element ဖြစ်ပါတယ်သောဘရောက်ဇာကိုပြောပြသင့်ပါတယ်။ ဤနည်းကိုသင်မဆိုအခြားဘလောက်ကိုသင်အလိုတခုတည်းအဖြစ်အဓိကထားနိုင်ပါတယ်။ ဤတွင်ဒီလိုဖြစ်စေရန်အ CSS ကိုဖြစ်ပါသည်:

img.center {
display: block ကို;
margin-လက်ဝဲ: အော်တို;
margin-ညာဘက်: အော်တို;
}

ဒီမှာကျနော်တို့လိုချင်ပါတယ်သောပုံရိပ်ကိုဗဟိုပြုခံရဖို့အတှကျအသောက HTML ဖြစ်ပါသည်:

သင်တို့သည်လည်း (အောက်တွင်ကြည့်ပါ) In-line ကို CSS ကိုသုံးပြီးအရာဝတ္ထုဗဟိုနိုင်ပါတယ်, ဒါပေမယ့်သူကသင့်ရဲ့ HTML ကို markup သို့အမြင်အာရုံစတိုင်များဖြည့်စွက်ပြီးကတည်းကဒီချဉ်းကပ်နည်းအကြံပြုသည်မဟုတ်။ ကိုသတိရပါကျနော်တို့ဒါခွဲခြာနှင့်ထိုကဲ့သို့သောအဖြစ်ပြုလုပ်အခါတိုင်းတတ်နိုင်သမျှရှောင်ကြဉ်သင့်ကြောင်းချိုးနှင့်သင်၏ HTML code တွေဟာဖို့ CSS ကိုစတိုင်များဖြည့်စွက်, စတိုင်နဲ့ဖွဲ့စည်းပုံမှာခွဲခြားချင်ပါတယ်။

CSS နဲ့ Element တွေကိုဒေါင်လိုက် ဗဟိုပြု.

ဗဟိုပြု. အရာဝတ္ထုဒေါင်လိုက်အစဉ်အမြဲ web design မှာစိန်ခေါ်မှုခဲ့ပေမယ့် CSS3 အတွက် CSS ကို Flexible Box ကို Layout Module များလွှတ်ပေးရေးနှင့်အတူထိုသို့ပြုမှတစ်လမ်းယခုလည်းမရှိ။

ဒေါင်လိုက် alignment ကိုအထက်ဖုံးလွှမ်းအလျားလိုက် alignment ကိုမှအလားတူအလုပ်လုပ်ပါတယ်။ အဆိုပါ CSS ကိုပိုင်ဆိုင်မှုအလယ်မှာတန်ဖိုး-align ဒေါင်လိုက်ဖြစ်ပါတယ်။

.vcenter {
ဒေါင်လိုက်-align: အလယ်တန်း;
}

ဒီချဉ်းကပ်မှုမှအဆင်မပြေပိုပိုပြီးအသစ် CSS ကို layout ကိုနည်းလမ်းမှန်းကျင်လာကြပေမယ့်အားလုံးမဟုတ် browser များ, CSS ကို FlexBox ကိုထောက်ပံ့သောပါ! တကယ်တော့အားလုံးခေတ်သစ် browser များယနေ့ယခု CSS ကိုစတိုင်ထောက်ခံပါတယ်။ ဤသည် Flexbox နှင့်သင်၏သာစိုးရိမ်ပူပန်မှုများအများကြီးအဟောင်းတွေကို browser ဗားရှင်းဖြစ်လိမ့်မယ်လို့ဆိုလိုတယ်။

သငျသညျအဟောင်းများကို browser များနှင့်အတူကိစ္စများရှိပါက W3C သင်တစ်ဦးကွန်တိန်နာအတွက်ဒေါင်လိုက်စင်တာစာသားကိုအောက်ပါနည်းလမ်းကိုသုံးပြီးကြောင်းအကြံပြု:

ထိုကဲ့သို့သော div အဖြစ်တစ်ဦးပါဝင်သောဒြပ်စင်အတွင်းပိုင်းဗဟိုပြုခံရဖို့ဒြပ်စင်ထားပါ။
element ရဲ့အပေါ်နိမ့်ဆုံးအမြင့်သတ်မှတ်မည်။
စားပွဲတစ်ခုကလာပ်စည်းအဖြစ်ဒြပ်စင်များကြောင့်ဘော်ပြကြလော့။
ရန်ဒေါင်လိုက် alignment ကို Set "အလယ်တန်း။ "

ဥပမာအားဖြင့်, ဒီမှာ CSS ကိုဖြစ်ပါသည်:

.vcenter {
မိ-အမြင့်: 12em;
display: စားပွဲပေါ်မှာ-ဆဲလ်;
ဒေါင်လိုက်-align: အလယ်တန်း;
}

ထိုအဒီမှာက HTML ဖြစ်ပါသည်:

ဒါကစာသားကိုဒေါင်လိုက်သေတ္တာထဲတွင်ဗဟိုပြုနေသည်။

ဒေါင်လိုက် Center နဲ့ Internet Explorer ၏အသက်ကြီးဗားရှင်း

အဲဒီမှာဗဟိုပြီးတော့သာ IE ကိုပုစတိုင်များကိုမြင်သောကြောင့်ခြွင်းချက်မှတ်ချက်များကိုအသုံးပြုရန် Internet Explorer (IE) ကိုအတင်းအချို့နည်းလမ်းတွေရှိပါတယ်, ဒါပေမဲ့သူတို့အနည်းငယ် verbose နှင့်ရုပ်ဆိုးဖြစ်ကြသည်။ ကောင်းမွန်သောသတင်း IE ကို၏ဗားရှင်းအဟောင်းအဘို့အထောက်ခံမှုကျဆင်း Microsoft ရဲ့မကြာသေးခင်ကဆုံးဖြတ်ချက်နှင့်အတူထို unsupporting browser များမကြာမီသူတို့လမ်းအပေါ်ဖြစ်သင့်ကြောင်း, ဒါကြောင့်ပိုမိုလွယ်ကူက်ဘ်ဆိုက်ဒီဇိုင်းခေတ်သစ်အပြင်အဆင်သုံးစွဲဖို့အတှကျအောင်, ရှိသမျှ CSS ကို layout ကိုစေမည်ဖြစ်သော CSS ကို FlexBox တူသောချဉ်းကပ်နေသည် ရုံ, ရှိသမျှကို web ဒီဇိုင်နာများအတွက်ပိုမိုလွယ်ကူစေရန် ဗဟိုပြု. မဟုတ်ပါဘူး။

HTML မှာ Center က Element တွေကိုမှ CSS ကိုအသုံးပြုခြင်း၏အကျဉ်းချုပ်တွင်

CSS နဲ့ ဗဟိုပြု. စာသား

CSS နဲ့အကြောင်းအရာ၏ ဗဟိုပြု. လုပ်ကွက်

CSS နဲ့ ဗဟိုပြု. ပုံများ

CSS နဲ့ Element တွေကိုဒေါင်လိုက် ဗဟိုပြု.

ဒေါင်လိုက် Center နဲ့ Internet Explorer ၏အသက်ကြီးဗားရှင်း

Alike posts

See Newest

Sapid posts