CSS ကိုအိမ်ခြံမြေ၏အဓိပ္ပာယ်

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

သင်တစ်ဦး CSS ကိုဖိုင်ကိုကြည့်လျှင်သင်မည်သည့် markup သို့မဟုတ်နိုင်တဲ့ coding ဘာသာစကားကဲ့သို့မြင်ရပါလိမ့်မည်, ဤဖိုင်တွေသူတို့ကိုတိကျတဲ့ syntax ရှိသည်။ တစ်ခုချင်းစီကိုစတိုင်စာရွက် CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေကိုတစ်အရေအတွက်တက်လုပ်ဖြစ်ပါတယ်။ အပြည့်အဝယူသည့်အခါဤအစည်းမျဉ်းစည်းကမ်းတွေ, အဘယျသို့စတိုင်များဆိုက်ဖြစ်ကြသည်။

တစ်ဦး CSS Rule ၏အစိတ်အပိုင်းများ

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

p {
အရောင်: # 000;
}

ဒါက CSS ကိုအုပ်စိုးမှုဖြစ်ပါတယ်။ အဆိုပါ selector တစ်စိတ်တစ်ပိုင်း "အပိုဒ်" အတွက် Element တစ်ခုရဲ့ selector သော "p" ဖြစ်ပါတယ်။ ဒါဟာထို့ကြောင့် site တစ်ခုအတွက်အားလုံးအပိုဒ်ကို select နှင့် (တခြားနေရာသင့်ရဲ့ CSS ကိုစာရွက်စာတမ်းပိုမိုတိကျတဲ့စတိုင်များအားဖြင့်ပစ်မှတ်ထားနေသောအပိုဒ်ရှိပါတယ်မဟုတ်လျှင်) ဒီစတိုင်နှင့်အတူသူတို့ကိုပေးလိမ့်မယ်။

ပြောပါတယ်သောစည်းမျဉ်းများ၏အစိတ်အပိုင်းတစ်ရပ် "အရောင်: # 000;" အဆိုပါကြေငြာအဖြစ်လူသိများသည်အရာဖြစ်တယ်။ အိမ်ခြံမြေနှင့်တန်ဖိုး - ဒါကကြေငြာနှစ်ခုအပိုင်းပိုင်း၏ဖွင့်ထားခြင်းဖြစ်ပါသည်။

အဆိုပါပိုင်ဆိုင်မှုဒီကြေငြာ၏ "အရောင်" အပိုင်းအစဖြစ်ပါတယ်။ ဒါဟာ selector ၏ရှုထောင့်အမြင်ပြောင်းလဲသွားပါလိမ့်မည်သည့်ဆိုထားသည်။

တန်ဖိုးကိုရွေးချယ် CSS ကိုပိုင်သောမြေကိုပြောင်းလဲလိမ့်မည်အရာဖြစ်တယ်။ ကျွန်တော်တို့ရဲ့ဥပမာမှာကျွန်တော်တို့ဟာ "အနက်ရောင်" အတွက် CSS ကိုအတိုကောက်ဖြစ်သော, # 000 ၏ hex တန်ဖိုးကိုအသုံးပြုနေသည်။

ဒါကြောင့်ဒီအ CSS ကိုစည်းမျဉ်းကိုအသုံးပြုပြီးကျွန်တော်တို့ရဲ့ page ကိုအနက်ရောင်တစ် font-အရောင်ထဲမှာဖော်ပြပါတယ်အပိုဒ်ရှိလိမ့်မယ်။

CSS ကိုအိမ်ခြံမြေအခြေခံ

သငျသညျ CSS ကိုဂုဏ်သတ္တိများကိုရေးတဲ့အခါသင်မထိုက်မတန်မြင်သည်အတိုင်း, သင်ရိုးရှင်းစွာသူတို့ကိုထစေနိုင်ပါတယ်။ သာဓကအဘို့, "အရောင်" တစ်ခုအမှန်တကယ် CSS ကိုပိုင်ဆိုင်မှုဖြစ်တယ်, ဒါသင်ကသုံးနိုင်သည်။ ဤသည်ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု Element တစ်ခုရဲ့စာသားအရောင်ဆုံးဖြတ်သည်အရာဖြစ်တယ်။ သငျသညျ CSS ကိုဂုဏ်သတ္တိများအဖြစ် "text-အရောင်" သို့မဟုတ် "font-အရောင်" ကိုအသုံးပြုရန်ကြိုးစားခဲ့တယ်ဆိုရင်သူတို့က CSS ကိုဘာသာစကား၏အမှန်တကယ်အစိတ်အပိုင်းများမဟုတ်အဘယ်ကြောင့်ဆိုသော်ထိုအကျရှုံးလိမ့်မယ်။

နောက်ထပ်ဥပမာအိမ်ခြံမြေ "background-image ကို" ဖြစ်ပါတယ်။ ဤသည်ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုဤကဲ့သို့သောတစ်နောက်ခံအတှကျအသုံးပွုနိုငျသောပုံရိပ်တစ်ခုသတ်မှတ်:

.logo {
နောက်ခံ-image: url (/images/company-logo.png);
}

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

တချို့က CSS ကို Properties ကို

သငျသညျ site တစ်ခု style မှအသုံးပွုနိုငျကွောငျးကို CSS ကိုဂုဏ်သတ္တိများ၏နံပါတ်ရှိပါသည်။ တချို့ကဥပမာနေသောခေါင်းစဉ်:

• (border-style, နယ်စပ်-အရောင်နှင့်နယ်စပ်-width ကိုအပါအဝင်) နယ်စပ်
• (padding ကို-ထိပ်, padding ကိုညာ, padding ကို-အောက်ခြေနှင့် padding ကို-လက်ဝဲအပါအဝင်) padding
• (margin-top, margin-ညာဘက်, margin-အောက်ခြေနှင့် margin-လက်ဝဲအပါအဝင်) မာဂျင်
• font-family
• font-size
• နောက်ခံအရောင်
• width
• အမြင့်

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

သင်သည်သူတို့၏အမည်များအပေါ်အခြေခံပြီးသူတို့အလုပ်လုပ်ပုံကိုအဖြစ်သိသာမကျမည်အကြောင်းအရာအဖြစ်ကောင်းစွာကြုံတွေ့ရပါလိမ့်မယ်အခြား CSS ကိုဂုဏ်သတ္တိများရှိပါတယ်:

• မြော
• ရှင်းလင်းသော
• ပွညျ့လြှံ
• text-transform
• Z-အညွှန်းကိန်း

သငျသညျကို web ဒီဇိုင်းသို့ပိုမိုနက်ရှိုင်း get အဖြစ်, သင်ကြုံတွေ့ရ (အသုံးပြု) ဦးမည်ဤအရာအလုံးစုံဂုဏ်သတ္တိများနှင့်ပိုပြီး!

Properties ကိုတန်ဖိုးများလိုအပ်

သင်တစ်ဦး property ကိုသုံးအခါတိုင်း, သင်ကတန်ဖိုးပေးရမည် - အခြို့ဂုဏ်သတ္တိများသာအချို့သောတန်ဖိုးများကိုလက်ခံနိုင်ပါတယ်။

သည် "အရောင်" property ကကျွန်တော်တို့ရဲ့ပထမဦးဆုံးဥပမာမှာကျွန်တော်တို့ဟာအရောင်တန်ဖိုးကိုသုံးစွဲဖို့လိုအပ်ပါတယ်။ ဒါကဖြစ်နိုင်ပါတယ် hex တန်ဖိုးကို , RGBA တန်ဖိုးကို, ဒါမှမဟုတ်ပင် အရောင်သော့ချက်စာလုံးများ ။ သူတို့အားတန်ဖိုးများကိုမဆိုအလုပ်လုပ်မယ်ဆိုတာသို့သော် အကယ်. သင်ဤပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုနှင့်အတူစကားလုံး "တွေများ" ကိုအသုံးပြုလျှင်စကားလုံးအဖြစ်ဖော်ပြရန်ကဲ့သို့ဖြစ်ရစေခြင်းငှါ, ဘာဖြစ်လို့လဲဆိုတော့, ကဘာမျှမလုပ်ပေးမယ်လို့က CSS ကိုတစ်ဦးအသိအမှတ်ပြုတန်ဖိုးကိုမဟုတ်ပါဘူး။

"background-image ကို" ၏ကျွန်ုပ်တို့၏ဒုတိယဥပမာလမ်းကြောင်းကိုအသုံးပြုပုံရိပ်တစ်ခုလိုအပ်ပါတယ် အနေနဲ့အမှန်တကယ် image ကိုဆွဲယူ သင့်ရဲ့ site ရဲ့ဖိုင်တွေထဲက။ ဒါဟာလိုအပ်ကြောင်းတန်ဖိုးကို / syntax ဖြစ်ပါတယ်။

အားလုံး CSS ကိုဂုဏ်သတ္တိများသူတို့မျှော်လင့်ထားကြောင်းတန်ဖိုးများရှိသည်။ ဥပမာ:

• border-color အရောင်တန်ဖိုးကိုမျှော်လင့်
• border-size ကို pixels ကိုသို့မဟုတ်ရာခိုင်နှုန်းလိုပဲတစ်ဆိုက်တန်ဖိုးကိုမျှော်လင့်
• နယ်စပ်ရေးရာစတိုင်များ "အစိုင်အခဲ" နဲ့တူ, ဒီပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုအတွက်အသုံးပြုယူထားတဲ့စတိုင်များတစ်ဦးမျှော်လင့်

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

ဂျယ်ရမီ Girard တည်းဖြတ်