Back to the topics list

cascading စတိုင်စာရွက်များ

Web Development တွင် Cascading Style Sheets (CSS)

Cascading Style Sheets (သို့) CSS သည် ဝဘ်စာမျက်နှာကို မည်သို့ကြည့်ရှုရမည်ကို ပြောပြသည့် ဘာသာစကားတစ်ခုဖြစ်သည်။ CSS သည် ဝဘ်ဆိုဒ်တစ်ခု၏ ရိုးရိုးဖွဲ့စည်းပုံသို့ အရောင်၊ စတိုင်နှင့် အပြင်အဆင်ကို ပေါင်းထည့်သည်။ သင့်အဝတ်အစားများကို သပ်ရပ်စွာကြည့်ကောင်းစေရန်အတွက် CSS သည် ဝဘ်စာမျက်နှာကို ၀တ်ဆင်ပြီး ဆွဲဆောင်မှုရှိစေရန် ကူညီပေးပါသည်။ ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုတွင်၊ ကျွန်ုပ်တို့သည် စာမျက်နှာရှိ စာသားနှင့် အကွက်များ၏ အရောင်၊ အရွယ်အစားနှင့် အနေအထားကို ပြောင်းလဲရန် CSS ကို အသုံးပြုသည်။ ဤသင်ခန်းစာတွင် CSS ၏ အခြေခံများကို ရိုးရှင်းသောဘာသာစကားဖြင့် မိတ်ဆက်ပေးပါမည်။ CSS က ဘာလဲဆိုတာ၊ ဘာကြောင့် အရေးကြီးသလဲ၊ HTML နဲ့ ဘယ်လိုအလုပ်လုပ်လဲဆိုတာကို လေ့လာသွားမှာပါ။

CSS ကို မိတ်ဆက်ခြင်း။

CSS သည် Cascading Style Sheets ကို ကိုယ်စားပြုသည်။ ဝဘ်စာမျက်နှာများကို ပုံစံချရန် အသုံးပြုသည့် အထူးဘာသာစကားတစ်ခုဖြစ်သည်။ CSS ကို အဆောက်အဦတစ်ခုအတွက် ဆေးသုတ်ခြင်းနှင့် အလှဆင်ခြင်းအဖြစ် စဉ်းစားပါ။ အဆောက်အအုံကို HTML ဖြင့်ပြုလုပ်ထားပြီး CSS သည် လှပစေသည်။ CSS ကို အသုံးပြု၍ သင့်ဝဘ်စာမျက်နှာရှိ အစိတ်အပိုင်းများအနီးရှိ နောက်ခံအရောင်၊ ဖောင့်ပုံစံများနှင့် နေရာလွတ်များကို ပြောင်းလဲနိုင်သည်။ CSS သည် ဝဘ်ဒီဇိုင်နာများကို ဝဘ်ဆိုဒ်များကို ပိုကောင်းစေပြီး ပိုပျော်စရာကောင်းအောင် ကူညီပေးသည့် ကိရိယာတစ်ခုဖြစ်သည်။

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

ဘာကြောင့် CSS ကိုသုံးတာလဲ။

ဝဘ်ဆိုဒ်များကို ဆွဲဆောင်မှုရှိပြီး အသုံးပြုရလွယ်ကူစေရန်အတွက် CSS ကို အသုံးပြုသည်။ ၎င်းသည် စတိုင်လ်ကို အကြောင်းအရာနှင့် သီးခြားခွဲထားသည်။ ဆိုလိုသည်မှာ စာမျက်နှာရှိ စကားလုံးများနှင့် ရုပ်ပုံများ (HTML မှ ပံ့ပိုးပေးသည်) သည် တူညီနေမည်ဖြစ်ပြီး CSS က ၎င်းတို့ပုံသဏ္ဍာန်ကို ထိန်းချုပ်ထားစဉ်။ စတိုင်လ်ကို အပ်ဒိတ်လုပ်သောအခါတွင် သင်သည် အကြောင်းအရာကို ပြောင်းလဲရန် မလိုအပ်ပါ။ ဤခြားနားမှုသည် ဝဘ်ဆော့ဖ်ဝဲရေးသားသူများကို ပိုမိုမြန်ဆန်စွာ လုပ်ဆောင်နိုင်စေပြီး ဝဘ်ဆိုက်များကို လည်ပတ်ရန် ပိုကောင်းစေသည်။

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

CSS ဘယ်လိုအလုပ်လုပ်သလဲ။

CSS သည် HTML နှင့် တွဲဖက်အလုပ်လုပ်သည်။ HTML သည် ဝဘ်စာမျက်နှာတစ်ခုပေါ်တွင် အရာများရောက်ရှိသွားသည့်နေရာကို သတ်မှတ်ပေးသည့် အခြေခံအုတ်မြစ်ဖြစ်သည်။ ထို့နောက် အရောင်များ၊ ဖောင့်များနှင့် စတိုင်လ်များကို ထည့်ရန် CSS သည် ဝင်လာပါသည်။ ဘရောက်ဆာတစ်ခုသည် ဝဘ်စာမျက်နှာတစ်ခုကို တင်သောအခါ၊ ၎င်းသည် HTML ဖြင့် ဖွဲ့စည်းတည်ဆောက်ပုံကို ဦးစွာတည်ဆောက်ပြီးနောက် CSS တွင် သတ်မှတ်ထားသော စတိုင်များကို အသုံးပြုသည်။

CSS ကို စည်းမျဥ်းများအဖြစ် ရေးထားသည်။ စည်းမျဉ်းတစ်ခုစီတွင် အပိုင်းနှစ်ပိုင်းပါသည်- ရွေးချယ်သူနှင့် ကြေငြာပိတ်ဆို့ခြင်းတစ်ခု။ ရွေးချယ်သူသည် ဘရောက်ဆာအား မည်သည့် HTML အစိတ်အပိုင်းကို ပုံစံသွင်းရမည်ကို ပြောပြသည်။ ကြေငြာချက် ဘလောက်တွင် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော ကြေငြာချက်များပါရှိသည်။ ကြေငြာချက်တစ်ခုစီတွင် ပိုင်ဆိုင်မှုနှင့် တန်ဖိုးတစ်ခုရှိသည်။ ပိုင်ဆိုင်မှုသည် သင်ပြောင်းလဲလိုသည့်အရာဖြစ်ပြီး တန်ဖိုးက ၎င်းကို မည်သို့ပြောင်းလဲရမည်ကို ပြောပြသည်။

ဥပမာအားဖြင့်၊ စာမျက်နှာ၏ နောက်ခံအရောင်ကို အပြာဖျော့ဖျော့အဖြစ် သတ်မှတ်ရန်၊ သင်သည် ဤကဲ့သို့သော စည်းမျဉ်းတစ်ခုကို ရေးနိုင်သည်-

 <code>ကိုယ်ထည် {
    နောက်ခံအရောင်- အပြာနုရောင်၊
</code>

ဤရိုးရှင်းသောစည်းမျဉ်းသည် စာမျက်နှာတစ်ခုလုံး၏ နောက်ခံကို ပြောင်းလဲစေသည်။

CSS ၏ အခြေခံ Syntax

အခြေခံ CSS စည်းမျဉ်းသည် ရိုးရှင်းသောပုံစံကို လိုက်နာသည်။ ၎င်းသည် ရွေးချယ်သူနှင့် ဂုဏ်သတ္တိများနှင့် တန်ဖိုးများကို ဘလောက်တစ်ခုကို ပြသသည်။ ပုံစံသည် ဤကဲ့သို့ဖြစ်သည်-

 <code>ရွေးချယ်ရေး{
    ပိုင်ဆိုင်မှု: တန်ဖိုး;
</code>

ဤတွင်၊ ရွေးချယ်သူသည် ပစ်မှတ်ထားရမည့် HTML အစိတ်အပိုင်းကို ရွေးချယ်သည်။ ပိုင်ဆိုင်မှု သည် သင်ပြောင်းလဲလိုသည့်အရာဖြစ်ပြီး တန်ဖိုးသည် သင်ပြောင်းလဲလိုသည့်ပုံစံဖြစ်သည်။

ဥပမာ၊ စာပိုဒ်အားလုံးကို အပြာရောင်ဖြစ်အောင် ရေးချင်ရင်၊

 <code>p {
    အရောင်: အပြာ;
</code>

ဤစည်းမျဉ်းသည် <p> (စာပိုဒ်) ဒြပ်စင်တိုင်းတွင် အပြာရောင်စာသားရှိသင့်သည်ဟု ဝဘ်ဘရောက်ဆာက ပြောပြသည်။

CSS ရွေးချယ်မှုများ

CSS ရွေးချယ်သူများသည် သင့်ဝဘ်စာမျက်နှာရှိ စတိုင်စည်းမျဉ်းများကြောင့် မည်သည့်အရာများကို ရွေးချယ်နိုင်စေမည်နည်း။ Selector အမျိုးအစားများစွာရှိပြီး တစ်ခုချင်းစီသည် အနည်းငယ်ကွဲပြားစွာ အလုပ်လုပ်ပါသည်။

• အမျိုးအစားရွေးချယ်မှု- ဤရွေးချယ်မှုစနစ်သည် အချို့သောအမျိုးအစားတစ်ခု၏ အစိတ်အပိုင်းအားလုံးကို ပစ်မှတ်ထားသည်။ ဥပမာအားဖြင့်၊ <code>p {}</code> သည် စာမျက်နှာပေါ်ရှိ စာပိုဒ်တိုင်းကို ရွေးချယ်သည်။
• အတန်းရွေးချယ်မှု- ၎င်းသည် သီးခြားအတန်းရည်ညွှန်းချက်ပါရှိသော အစိတ်အပိုင်းများကို ပစ်မှတ်ထားသည်။ သင်၏ HTML တွင် သင်သည် <code><p class="greeting"></code> ဟုရေးပြီး CSS တွင် ၎င်းကို <code>.greeting {}</code> ဖြင့် ပစ်မှတ်ထားသည်။
• ID ရွေးချယ်မှု- ၎င်းကို စာမျက်နှာရှိ ထူးခြားသောဒြပ်စင်တစ်ခုအတွက် အသုံးပြုသည်။ ဒြပ်စင်တစ်ခုတွင် <code><h1 id="header"></code> ကဲ့သို့သော ID ရည်ညွှန်းချက်တစ်ခု ရှိနိုင်ပါသည်။ CSS တွင်၊ သင်သည် ထိုဒြပ်စင်ကို <code>#header {}</code> ဖြင့် ပုံစံဆင်နိုင်သည်။

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

CSS Properties နှင့် Values ​​များ

CSS သည် သင့်ဝဘ်စာမျက်နှာကို ပုံစံသတ်မှတ်ရန် သင်အသုံးပြုနိုင်သည့် မတူညီသော ဂုဏ်သတ္တိများစွာကို ပေးဆောင်သည်။ ပစ္စည်းတစ်ခုစီသည် ဒြပ်စင်တစ်ခု၏ အသွင်အပြင်တစ်ခုစီ၏ အသွင်အပြင်ကို ပြောင်းလဲနိုင်စေပါသည်။ အချို့သော ဘုံဂုဏ်သတ္တိများမှာ-

• အရောင်- စာသား၏အရောင်ကို သတ်မှတ်သည်။
• နောက်ခံအရောင်- ဒြပ် စင်တစ်ခု၏ နောက်ခံအရောင်ကို သတ်မှတ်သည်။
• ဖောင့်အရွယ်အစား- စာသားအရွယ်အစားကို ပြောင်းသည်။
• အနားသတ်- ဒြပ်စင်တစ်ခု၏ အပြင်ဘက်တွင် နေရာလွတ်ကို ထည့်သည်။
• padding- အကြောင်းအရာတစ်ဝိုက်၊ ဒြပ်စင်တစ်ခုအတွင်း နေရာလွတ်ကို ပေါင်းထည့်သည်။

CSS ပိုင်ဆိုင်မှုတစ်ခုစီသည် တန်ဖိုးတစ်ခုဖြင့် နောက်တွင် လိုက်နေပါသည်။ ဥပမာအားဖြင့်၊ စာသားကို အနီရောင်ဖြစ်စေရန်၊ သင်သည် ရေးနိုင်သည်-

 <code>p {
    အရောင်: အနီရောင်;
</code>

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

CSS ရှိ Cascade နှင့် Inheritance

CSS တွင် “cascading” ဟူသော စကားလုံးသည် ပုံစံများသည် စည်းမျဉ်းတစ်ခုမှ အခြားတစ်ခုကို စီးဆင်းနိုင်သည်ဟု ဆိုလိုသည်။ စည်းမျဉ်းနှစ်ခုသည် တူညီသောဒြပ်စင်တွင် သက်ရောက်နိုင်လျှင် အမိန့်သည် မည်သည့်အရာအနိုင်ရသည်ကို ဆုံးဖြတ်နိုင်သည်။ ၎င်းသည် တစ်ခါတရံတွင် ဘလောက်တစ်ခုမှ အခြားအစိတ်အပိုင်းကို ဖုံးအုပ်ထားသည့် အတုံးများကို တန်းစီခြင်းနှင့် ဆင်တူသည်။

ယေဘူယျစည်းမျဉ်းတစ်ခုမှာ HTML ဒြပ်စင်တစ်ခုအတွင်း တိုက်ရိုက်ရေးသားထားသော စတိုင်များ (inline styles ဟုခေါ်သည်) သည် သင့် CSS ဖိုင်ရှိ စတိုင်များကို အစားထိုးမည် ဖြစ်သည်။ အခြားစည်းမျဉ်းတစ်ခုမှာ ပင်မဒြပ်စင်ကို ပုံစံချပါက၊ ၎င်း၏ ကလေးအစိတ်အပိုင်းများကို အခြားနည်းဖြင့် မပြောပြပါက ထိုစတိုင်ကို အမွေဆက်ခံနိုင်မည်ဖြစ်သည်။

ဥပမာအားဖြင့်၊ သင်သည် <div> ၏ စာသားအရောင်ကို အစိမ်းရောင်အဖြစ် သတ်မှတ်ပါက၊ <div> အတွင်းရှိ စာသားများသည် အမွေဆက်ခံခြင်းကြောင့် မကြာခဏ အစိမ်းရောင်ပေါ်နေမည်ဖြစ်သည်။ ၎င်းသည် ဝဘ်စာမျက်နှာပေါ်တွင် တသမတ်တည်း ဒီဇိုင်းကို ထိန်းသိမ်းရန် ကူညီပေးသည်။

CSS အရောင်များနှင့် ဖောင့်များ

CSS ဖြင့် သင်သည် အရောင်များကို ပုံစံအမျိုးမျိုးဖြင့် ပြောင်းလဲနိုင်သည်။ အနီရောင် ၊ အပြာ နှင့် အစိမ်း ကဲ့သို့သော ဘုံအရောင်အမည်များကို သင်သုံးနိုင်သည်။ အနီရောင်အတွက်၊ သို့မဟုတ် <code>rgb(255, 0, 0)</code> ကဲ့သို့သော RGB တန်ဖိုးများအတွက် <code>#FF0000</code> ကဲ့သို့သော hexadecimal ကုဒ်များကို သင်အသုံးပြုနိုင်ပါသည်။

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

 <code>p {
    ဖောင့်-မိသားစု- Arial၊ sans-serif;
</code>

ဤစည်းမျဉ်းသည် ရနိုင်ပါက Arial ဖောင့်တွင် စာသားကိုပြသရန်နှင့် ၎င်းမဟုတ်ပါက အခြား အလားတူဖောင့်ကို အသုံးပြုရန် ဘရောက်ဆာအား ပြောထားသည်။

CSS ဖြင့် အရောင်များနှင့် ဖောင့်များကို ပြောင်းလဲခြင်းသည် စာသားကို ဖတ်ရှုရန် ပိုမိုလွယ်ကူစေပြီး သင့်ဝဘ်စာမျက်နှာကို ကြည့်ရှုရန် ပိုမိုစိတ်ဝင်စားစေသည်။

CSS Box မော်ဒယ်

CSS Box Model သည် စာမျက်နှာတစ်ခုပေါ်တွင် ဒြပ်စင်တစ်ခု၏ မတူညီသောအစိတ်အပိုင်းများကို မည်သို့စီစဉ်ထားကြောင်း နားလည်ရန်နည်းလမ်းတစ်ခုဖြစ်သည်။ ဒြပ်စင်တိုင်းသည် သေတ္တာတစ်လုံးနှင့်တူသည်။ Box Model တွင် အပိုင်းလေးပိုင်းပါရှိသည်။

• အကြောင်းအရာ- ဤသည်မှာ သင့်စာသားနှင့် ပုံများရှိရာ နေရာဖြစ်သည်။
• Padding- ဤအရာသည် ဘောက်စ်အတွင်းရှိ အကြောင်းအရာပတ်လည် နေရာလွတ်ဖြစ်သည်။
• ဘောင်- ဤသည်မှာ အကွက်များနှင့် အကြောင်းအရာကို ပတ်ထားသော မျဉ်းဖြစ်သည်။
• အနားသတ်- ဤအရာသည် အခြားဒြပ်စင်များနှင့် အစိတ်အပိုင်းကို ပိုင်းခြားသည့် နယ်နိမိတ်အပြင်ဘက်တွင် နေရာလွတ်ဖြစ်သည်။

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

CSS Layouts နှင့် Positioning

CSS သည် အရောင်များနှင့် ဖောင့်များအကြောင်းသာမက၊ ၎င်းသည် ဝဘ်စာမျက်နှာပေါ်တွင် အစိတ်အပိုင်းများကို စီစဉ်ရာတွင်လည်း ကူညီပေးသည်။ ဒါကို layout နဲ့ positioning လို့ခေါ်တယ်။ CSS ဖြင့် စာမျက်နှာပေါ်ရှိ ဒြပ်စင်တစ်ခုစီသည် မည်သည့်နေရာတွင် ပေါ်လာသည်ကို သင်ဆုံးဖြတ်နိုင်သည်။

ဝဘ်စာမျက်နှာ၏ အပြင်အဆင်ကို ထိန်းချုပ်ရန် နည်းလမ်းများစွာ ရှိပြီး၊

• ပြသမှု- ဤပိုင်ဆိုင်မှုသည် အပြင်အဆင်တွင် အစိတ်အပိုင်းတစ်ခု ပေါ်လာပုံကို သတ်မှတ်သည်။ ဥပမာအားဖြင့်၊ <code>display: block;</code> သည် ဒြပ်စင်တစ်ခုအား ၎င်း၏ကိုယ်ပိုင်လိုင်းကို ပြုလုပ်စေပြီး <code>display: inline;</code> သည် အစိတ်အပိုင်းများကို တူညီသောမျဉ်းပေါ်တွင် ရှိနေစေရန် ခွင့်ပြုပေးပါသည်။
• ရာထူး- ဤပိုင်ဆိုင်မှုသည် ဒြပ်စင်တစ်ခုအတွက် အသုံးပြုသည့် နေရာချထားမှုနည်းလမ်း အမျိုးအစားကို သတ်မှတ်ပေးသည်။ တန်ဖိုးများသည် အငြိမ် ၊ ဆွေမျိုး ၊ အကြွင်းမဲ့ သို့မဟုတ် ပုံသေ ဖြစ်နိုင်သည်။ ဥပမာအားဖြင့်၊ <code>position-relative;</code> သည် ဒြပ်စင်တစ်ခုအား ၎င်း၏ပုံမှန်အနေအထားသို့ ရွှေ့သည်။
• Flexbox- Flexbox သည် အတန်းများ သို့မဟုတ် ကော်လံများတွင် အရာများကို စီစဉ်ရန် ခေတ်မီနည်းလမ်းတစ်ခုဖြစ်သည်။ ၎င်းသည် အစိတ်အပိုင်းများကို ချိန်ညှိခြင်းကို ပိုမိုလွယ်ကူစေသည်။

ဤအပြင်အဆင်နည်းပညာများကိုအသုံးပြုခြင်းသည် စင်ပေါ်တွင် အရုပ်များကိုစီစဉ်ခြင်းနှင့်တူသည်။ အရုပ်တစ်ခုစီသည် နေရာလွတ်နှင့် သပ်သပ်ရပ်ရပ်ရှိစေရန် အရုပ်တစ်ခုစီကို မည်သည့်နေရာသို့သွားသည်ကို သင်ဆုံးဖြတ်ပါ။ ၎င်းသည် သင့်ဝဘ်စာမျက်နှာကို ပိုမိုဖွဲ့စည်းပြီး ဖိတ်ခေါ်စေသည်။

ဥပမာ CSS ကုဒ်

ဤသည်မှာ HTML နှင့် CSS မည်ကဲ့သို့ အတူတကွ လုပ်ဆောင်ပုံ ဥပမာ။ ဤနမူနာကုဒ်သည် အချို့သောပုံစံဖြင့် ရိုးရှင်းသော ဝဘ်စာမျက်နှာကို ပြသသည်-

 <code><!DOCTYPE html>
<html>
<head>
  <style>
    ခန္ဓာကိုယ် {
      နောက်ခံအရောင်- အပြာနုရောင်၊
    }
    h1 {
      အရောင်: ရေတပ်;
      ဖောင့်အရွယ်အစား- 24px;
    }
    p {
      အရောင်: အစိမ်း;
      ဖောင့်အရွယ်အစား- 18px;
    }
  </style>
</head>
<body>
  <h1>ကျွန်ုပ်၏ ပထမဆုံး ဝဘ်စာမျက်နှာ</h1>
  <p>၎င်းသည် CSS ကို အသုံးပြု၍ ပုံစံထုတ်ထားသော ရိုးရှင်းသော ဝဘ်စာမျက်နှာဖြစ်သည်။</p>
</body>
</html></code>

ဤကုဒ်သည် အပြာနုရောင် နောက်ခံအရောင်ဖြင့် ဝဘ်စာမျက်နှာကို ဖန်တီးသည်။ ခေါင်းစီးစာသားသည် ရေတပ်ဖြစ်ပြီး စာပိုဒ်သည် အစိမ်းရောင်ဖြစ်သည်။ <code><style></code> tag အတွင်းရှိ CSS သည် စည်းမျဉ်းများကို မည်သို့ရေးသားပြီး အသုံးချသည်ကို ပြသသည်။

CSS ကို HTML နှင့် ချိတ်ဆက်နည်း

သင်၏ HTML တွင် CSS ကို အဓိက နည်းလမ်းသုံးမျိုးဖြင့် ထည့်နိုင်သည်။ နည်းလမ်းတစ်ခုစီသည် အခြေအနေပေါ်မူတည်၍ ၎င်း၏ကိုယ်ပိုင်အသုံးပြုမှု ရှိသည်။

• Inline CSS- CSS ကို <code>style</code> attribute ကို အသုံးပြု၍ HTML ဒြပ်စင်တစ်ခုတွင် တိုက်ရိုက်ရေးသားထားသည်။ ဥပမာ- <code><p style="color: blue;">မင်္ဂလာပါ</p></code> ဤစာပိုဒ်၏ စာသားအရောင်ကို အပြာရောင်သို့ ပြောင်းသည်။
• အတွင်းပိုင်း CSS- CSS စည်းမျဉ်းများကို သင်၏ HTML စာရွက်စာတမ်း၏ ခေါင်းပိုင်းအပိုင်းရှိ <code><style></code> တဂ်တစ်ခုအတွင်း ရေးထားသည်။ ဝဘ်စာမျက်နှာတစ်ခုနဲ့ အလုပ်လုပ်တဲ့အခါ ဒီနည်းလမ်းက အသုံးဝင်ပါတယ်။
• ပြင်ပ CSS- CSS စည်းမျဉ်းများကို အများအားဖြင့် <code>style.css</code> ဟု အမည်ပေးထားသော သီးခြားဖိုင်တစ်ခုတွင် ထည့်သွင်းထားသည်။ သင်သည် CSS ဖိုင်ကို <code><link></code> တဂ်ဖြင့် သင်၏ HTML နှင့် ချိတ်ဆက်ထားသည်။ ဥပမာ- <code><link rel="stylesheet" href="style.css"></code> ၎င်းသည် စာမျက်နှာများစွာတွင် တူညီသောပုံစံကို အသုံးပြုရန် လွယ်ကူစေသည်။

ပြင်ပနည်းလမ်းသည် HTML ကို သပ်ရပ်စွာ ထိန်းသိမ်းထားသောကြောင့် ကျွမ်းကျင်သော ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုတွင် အသုံးအများဆုံးဖြစ်ပြီး စာမျက်နှာများစွာတွင် စတိုင်များကို တစ်ပြိုင်နက် အပ်ဒိတ်လုပ်နိုင်ပါသည်။

CSS ကိုအသုံးပြုခြင်း၏အကျိုးကျေးဇူးများ

CSS သည် နည်းလမ်းများစွာဖြင့် အလွန်အသုံးဝင်သည်။ ဤသည်မှာ ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုတွင် CSS ကိုအသုံးပြုခြင်း၏ အကျိုးကျေးဇူးအချို့ဖြစ်သည်။

• အကြောင်းအရာနှင့် စတိုင်ကို ပိုင်းခြားခြင်း- HTML သည် အကြောင်းအရာနှင့် ဖွဲ့စည်းပုံကို ကိုင်ဆောင်ထားပြီး CSS သည် ရုပ်ပုံနှင့် ဒီဇိုင်းကို စီမံခန့်ခွဲသည်။ ဤခြားနားမှုသည် သင့်ဝဘ်ဆိုဒ်ကို အပ်ဒိတ်လုပ်ရန် ပိုမိုလွယ်ကူစေသည်။
• ပြန်သုံးနိုင်မှု- CSS စည်းမျဉ်းကို သင်ဖန်တီးပြီးသည်နှင့်၊ မတူညီသောစာမျက်နှာများရှိ ဒြပ်စင်များစွာတွင် ၎င်းကို အသုံးပြုနိုင်သည်။ ၎င်းသည် အချိန်ကုန်သက်သာစေပြီး အရာအားလုံးကို တသမတ်တည်းဖြစ်စေသည်။
• ပိုမိုကောင်းမွန်သောဝဘ်ဆိုဒ်စွမ်းဆောင်ရည်- သီးခြားဖိုင်များတွင် CSS ဖြင့်၊ ဘရောက်ဆာများသည် ပုံစံများကို လျင်မြန်စွာတင်နိုင်ပြီး သင့်ဝဘ်စာမျက်နှာကို ပိုမိုမြန်ဆန်စွာပြသနိုင်သည်။
• တစ်သမတ်တည်း ဒီဇိုင်း- CSS သည် သင့်ဝဘ်ဆိုက်ရှိ စာမျက်နှာတိုင်းကို ဆင်တူကြောင်း သေချာစေရန် ကူညီပေးသည်။ ၎င်းတို့သည် သင့်ဆိုက်ကို အလွယ်တကူ နားလည်နိုင်ပြီး လမ်းညွှန်နိုင်သောကြောင့် သုံးစွဲသူများအတွက် ပိုမိုကောင်းမွန်သော အတွေ့အကြုံကို ဖန်တီးပေးပါသည်။
• ပြုပြင်ထိန်းသိမ်းမှု လွယ်ကူခြင်း- စတိုင်တစ်ခုပြောင်းရန် လိုအပ်သည့်အခါ၊ HTML ဖိုင်များစွာထက် CSS ဖိုင်တစ်ခုသာ အပ်ဒိတ်လုပ်ရန် လိုအပ်သည်။ ၎င်းသည် ဝဘ်ဆိုက်တစ်ခုကို စီမံခန့်ခွဲရာတွင် ပိုမိုလွယ်ကူစေသည်။

CSS ကိုအသုံးပြုခြင်းသည် အထူး toolbox တစ်ခုရှိခြင်းနှင့်တူသည်။ ကိရိယာပုံးရှိ ကိရိယာတစ်ခုစီသည် သင့်ဝဘ်စာမျက်နှာ၏အသွင်အပြင်ကို လွယ်ကူစွာ တိုးတက်စေရန် ကူညီပေးသည်။ သင်လေ့ကျင့်နေစဉ်၊ ဝဘ်ဆိုဒ်များကို လှပပြီး အသုံးပြုရအဆင်ပြေစေမည့် CSS သည် မည်မျှအစွမ်းထက်သည်ကို သင်တွေ့မြင်ရပါလိမ့်မည်။

Real World ရှိ CSS

သင်ဝင်ရောက်ကြည့်ရှုသည့် ဝဘ်ဆိုက်တိုင်းသည် CSS ကို တစ်နည်းနည်းဖြင့် အသုံးပြုသည်။ သင်အကြိုက်ဆုံး ကာတွန်းဆိုက်များမှ ကျောင်းပရောဂျက်စာမျက်နှာများအထိ၊ CSS သည် ပျော်စရာနှင့် ဖတ်ရလွယ်ကူသော အပြင်အဆင်ကို ဖန်တီးပေးပါသည်။ သပ်ရပ်သော အကွာအဝေးနှင့် ရှင်းရှင်းလင်းလင်း စာသားပါရှိသော ရောင်စုံဝဘ်စာမျက်နှာကို သင်မြင်သောအခါ ၎င်းသည် အလုပ်တွင် CSS ဖြစ်သည်။

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

နေ့စဉ်ဘ၀တွင် CSS သည် အခန်းအလှဆင်ခြင်းနှင့် ဆင်တူသည်။ သင့်အခန်းအတွက် အပြင်အဆင်ကို ရွေးချယ်နိုင်ပြီး ရောင်စုံရုပ်ပုံများကို ချိတ်ဆွဲကာ သင့်ပရိဘောဂများကို သပ်ရပ်စွာ စီစဉ်နိုင်သည်။ CSS သည် ဝဘ်ဆိုဒ်များအတွက် အလားတူလုပ်ဆောင်သည်။ ၎င်းသည် ဒစ်ဂျစ်တယ်အာကာသထဲသို့ စည်းစနစ်ကျမှုနှင့် လှပမှုကို ယူဆောင်လာကာ လာရောက်လည်ပတ်သူများအတွက် နှစ်သက်ဖွယ်ဖြစ်စေသည်။

အဓိကအချက်များ အကျဉ်းချုပ်

ဤသည်မှာ CSS နှင့် ပတ်သက်သော အဓိကအချက်များဖြစ်သည် ။

• အဓိပ္ပါယ်ဖွင့်ဆိုချက်- CSS သည် Cascading Style Sheets အတွက်ဖြစ်ပြီး ဝဘ်စာမျက်နှာများကို ပုံစံသတ်မှတ်ရန် အသုံးပြုသည်။
• Web Development တွင် အခန်းကဏ္ဍ- CSS သည် အရောင်များ၊ ဖောင့်များနှင့် အပြင်အဆင်များကို ပေါင်းထည့်ခြင်းဖြင့် ဝဘ်ဆိုဒ်များကို ဆွဲဆောင်မှုဖြစ်စေသည်။
• အခြေခံအထားအသို- CSS စည်းမျဉ်းတစ်ခုသည် ရွေးချယ်မှုတစ်ခုနှင့် ဂုဏ်သတ္တိများကို တန်ဖိုးများသတ်မှတ်ထားသည့် ကြေငြာချက်ပိတ်ဆို့ခြင်းကို အသုံးပြုသည်။
• ရွေးချယ်သူများ- အမျိုးအစား၊ အတန်းအစား၊ နှင့် အိုင်ဒီရွေးချယ်သူများသည် သီးခြား HTML ဒြပ်စင်များကို ပစ်မှတ်ထားရန် ကူညီပေးသည်။
• ဂုဏ်သတ္တိများနှင့် တန်ဖိုးများ- CSS သည် ဝဘ်စာမျက်နှာဒီဇိုင်း၏ ရှုထောင့်အမျိုးမျိုးကို ထိန်းချုပ်ရန် အရောင်၊ နောက်ခံအရောင်နှင့် အနားသတ်များကဲ့သို့ ဂုဏ်သတ္တိများကို အသုံးပြုသည်။
• Cascade နှင့် အမွေဆက်ခံခြင်း- စည်းကမ်းများသည် တစ်ခုနှင့်တစ်ခု လွှမ်းမိုးနိုင်ပြီး ပုံစံများကို ပင်မဒြပ်စင်များမှ ကလေးဒြပ်စင်များသို့ လွှဲပြောင်းနိုင်ပါသည်။
• ဘောက်စ်ပုံစံ- HTML ဒြပ်စင်တိုင်းကို အကြောင်းအရာ၊ အကွက်၊ ဘောင်နှင့် အနားသတ်များပါရှိသော အကွက်တစ်ခုအဖြစ် သတ်မှတ်သည်။
• Layouts နှင့် Positioning- CSS သည် display၊ position နှင့် Flexbox ကဲ့သို့သော ဂုဏ်သတ္တိများကို အသုံးပြု၍ စာမျက်နှာပေါ်ရှိ အစိတ်အပိုင်းများကို စီစဉ်ရန် နည်းလမ်းများကို ပံ့ပိုးပေးပါသည်။
• CSS ကိုအသုံးပြုရန်နည်းလမ်းများ- CSS ကို inline၊ အတွင်းပိုင်း၊ head section တွင်၊ သို့မဟုတ် သီးခြား stylesheet တစ်ခုမှတဆင့် ပြင်ပတွင်အသုံးပြုနိုင်ပါသည်။
• အကျိုးကျေးဇူးများ- CSS သည် အကြောင်းအရာများကို တင်ပြခြင်းမှ ပိုင်းခြားပြီး ပြန်လည်အသုံးပြုနိုင်အောင် လုပ်ဆောင်ပေးပြီး ဝဘ်စာမျက်နှာများတစ်လျှောက် တသမတ်တည်း ဒီဇိုင်းကို သေချာစေသည်။

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

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