CSS ကို Styles ၏ 3 အမျိုးအစားများကိုနားလည်ခြင်း

inline, ပါဝင်သောနှင့်ပြင်ပစတိုင်စာရွက်များ: ဒီနေရာတွင်သိထားရန်လိုအပ်ပါတယ်ဘာလဲ

front-အဆုံးဘ်ဆိုဒ်ဖှံ့ဖွိုးတိုးတမကြာခဏ 3-အတော်များများကမျက်စိမစင်အဖြစ်ကိုယ်စားပြုသည်။ အောက်မှာဖေါ်ပြတဲ့အတိုင်းဤသူတို့သည်ခြေထောက်နေသောခေါင်းစဉ်:

• HTML ကို site တစ်ခု၏ဖွဲ့စည်းပုံသည် ဖြစ်. ,
• CSS ကို ၎င်းအမြင်အာရုံစတိုင်များသည် ဖြစ်. ,
• အပြုအမူများအတွက် Javascript ကို။

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

1. inline စတိုင်များ
2. embedded စတိုင်များ
3. ပြင်ပစတိုင်များ

CSS ကိုစတိုင်များဤအမျိုးမျိုးတစ်ခုချင်းစီဒါရဲ့တစ်ဦးချင်းစီကသူတို့ကိုတစ်ဦးချင်းစီမှာပိုမိုနက်ရှိုင်းကြည့်ယူပါစေ, သူတို့ရဲ့အကြိုးခံစားခှငျ့မြားနှငျ့အားနည်းချက်များရှိနေသည်။

inline Styles

inline စတိုင်များက HTML document အတွက် tag ကိုတိုက်ရိုက်ရေးထားလျက်ရှိ၏ကြောင်းစတိုင်များဖြစ်ကြသည်။ inline စတိုင်များသူတို့အသုံးချနေကြသည်ကိုသာသတ်သတ်မှတ်မှတ် tag ကိုအကျိုးသက်ရောက်စေသည်။ ဒီနေရာမှာတစ်ဦးစံ link ကို, ဒါမှမဟုတ်ကျောက်ဆူး, tag ကိုအသုံးချမှာ inline style ကို၏ဥပမာတစ်ခုဖြစ်ပါသည်:

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

ဤသည်ကတခြား, Non-inline စတိုင်များနှင့်အတူ overwrite သူတို့ကိုအလွန်ခက်ခဲစေသည်။ သငျသညျ site တစ်ခုတုံ့ပြန်မှုလုပ် Element တစ်ခုရဲ့ အသုံးပြု. အချို့သော breakpoints အားကြည့်ရှုပုံကိုပြောင်းချင်တယ်ဆိုရင်ဥပမာအားဖြင့် မီဒီယာမေးမြန်းချက် , Element တစ်ခုရဲ့အပေါ် inline စတိုင်များလုပ်ဖို့ကဒီကအရမ်းခဲယဉ်းစေမည်။

အလွန်အနည်းငယ်သာအသုံးပြုသောအခါ, နောက်ဆုံးတွင် inline စတိုင်များကိုတကယ်သာသင့်လျော်သောဖြစ်ကြသည်။

တကယ်တော့ကျွန်မခဲအစဉ်အဆက်အကြှနျုပျ၏ကွန်ရက်စာမျက်နှာတွေပေါ်မှာ inline စတိုင်များကိုအသုံးပြုပါ။

embedded Styles

embedded စတိုင်များစာရွက်စာတမ်း၏ဦးခေါင်း၌ embedded ဖြစ်ကြောင်းစတိုင်များဖြစ်ကြသည်။ embedded စတိုင်များသူတို့အတွက် embedded နေသောစာမျက်နှာပေါ်တွင်သာ tags များအကျိုးသက်ရောက်စေသည်။ နောက်တကြိမ်, ဒီချဉ်းကပ်နည်း CSS ကို၏အားသာချက်တွေထဲက negates ။ တိုင်းစာမျက်နှာထဲမှာစတိုင်များရှိသည်မယ်လို့ကတည်းက

သင်တစ်ဦး sitewide အပြောင်းအလဲလုပ်ချင်တယ်ဆိုရင်တိုင်းစာမျက်နှာတစ်ခု embedded style sheet ကိုအသုံးပြုချိန် မှစ. , အနီရောင်ကနေအစိမ်းရောင်မှလင့်များများ၏အရောင်ကိုပြောင်းလဲကဲ့သို့သင်, တိုင်းစာမျက်နှာပေါ်မှာဤပြောင်းလဲမှုကိုလုပ်ဖို့လိုအပ်လိမ့်မယ်။ ဒါကအင်လိုင်းစတိုင်များထက် သာ. ကောင်း၏, ဒါပေမယ့်နေဆဲပြဿနာအများအပြားသာဓကဖြစ်သည်။

အဆိုပါထည့်သွင်းကြသည်ကို Stylesheets

တစ်ဦးစာရွက်စာတမ်းများ၏လည်းအနာဂတ်၌စီမံခန့်ခွဲရန်စာမျက်နှာခက်ခဲစေနိုင်သည်ဖြစ်သောကြောင့်စာမကျြနှာ markup ကုဒ်တစ်ခုသိသာထင်ရှားသောပမာဏကိုထည့်ပါ။

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

external style sheet

အများစုမှာဝက်ဘ်ဆိုက်များယနေ့ပြင်ပစတိုင် sheets.External စတိုင်များကိုသုံးပါကသီးခြားစာရွက်စာတန်း၌ရေးထားလျက်ရှိ၏, ပြီးတော့အမျိုးမျိုးသောက်ဘ်စာရွက်စာတမ်းများမှပူးတွဲဖြစ်ကြောင်းစတိုင်များဖြစ်ကြသည်။ external style စာရွက်များ ကိုသင်တစ်ဦးချင်းစီစာမျက်နှာတူညီစတိုင်စာရွက် (ဒီကပြုပုံကိုပုံမှန်အားဖြင့်ဖြစ်ပါသည်) ကိုအသုံးပြုသည်ဘယ်မှာ 20 စာမျက်နှာက်ဘ်ဆိုက်ရှိပါက, သင်တိုင်းတဦးတည်းဖို့အမြင်အာရုံပြောင်းလဲမှုဖြစ်စေနိုင်ပါတယ်ဆိုလိုတာကသူတို့တွဲနေကြမဆိုစာရွက်စာတမ်းထိခိုကျနိုငျ ရိုးရှင်းစွာပြုလုပ် style sheet ကိုတည်းဖြတ်သဖြင့်သူတို့အားစာမျက်နှာများ။

ဒါကရေရှည် site ကိုစီမံခန့်ခွဲမှုအများကြီးပိုမိုလွယ်ကူစေသည်။

ပြင်ပစတိုင်စာရွက်များဖို့အဆင်မပြေသူတို့ကဤပြင်ပဖိုင်တွေ fetch နှင့် load မှစာမျက်နှာများကိုလိုအပ်သောကွောငျ့ဖွစျသညျ။ မရတိုင်းစာမျက်နှာအမှန်တကယ်လိုအပ်ဤမျှလောက်များစွာသောစာမျက်နှာများထက်အများကြီးပိုကြီးတဲ့ CSS ကိုစာမျက်နှာ load မည်ဟု CSS ကိုစာရွက်၌ရှိသောစတိုင်ကိုသုံးပါလိမ့်မယ်။

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

ဒါဟာအချို့ရှိလညျပတျပထမဦးဆုံးစာမျက်နှာပေါ်တွင်အနည်းငယ်စွမ်းဆောင်ရည်ကိုထိခိုက်ဖြစ်နိုင်ပါတယ်, ဒါပေမယ့်နောက်ဆက်တွဲစာမျက်နှာများ cached CSS ကိုဖိုင်ကိုသုံးပါမည်ဟုဆိုလိုသည်, ဒါကြောင့်မဆိုထိခိုက် negated မည်ဖြစ်သည်။ ပြင်ပ CSS ကိုဖိုင်တွေငါငါ့အလိုရှိသမျှကွန်ရက်စာမျက်နှာတွေတည်ဆောက်ပုံကိုဖြစ်ကြသည်။