Load မြန်နှုန်းပိုမိုကောင်းမွန်စေမမှ Group မှအကွိမျမြားစှာ CSS ကို selector
ထိရောက်မှုအောင်မြင်တဲ့က်ဘ်ဆိုက်အတွက်အရေးပါသောအချက်တစ်ချက်ဖြစ်ပါတယ်။ အဲဒီ site ကိုအတွက်အကျိုးရှိစွာဖြစ်သင့် ပါကအွန်လိုင်းပုံရိပ်တွေကိုဘယ်လိုအသုံးပြုတယ်ဆိုတာကို ။ ဒါဟာ site ကိုဧည့်သည်များနှင့်များအတွက်ကောင်းစွာလုပ်ဆောင်ကြောင်းသေချာစေရန်ကူညီပေးပါမည် လျင်မြန်စွာဝန် မိမိတို့၏ Device များပေါ်မှာ။ ထိရောက်မှုလည်းအချိန်ပေါ်နှင့်ဘတ်ဂျက်အပေါ်တစ်ဦး site ရဲ့တိုးတက်မှုကိုစောင့်ရှောက်ရန်သင့်အားကူညီပေးနေ, သင့်ခြုံငုံလုပ်ငန်းစဉ်၏အစိတ်အပိုင်းတစ်ခုဖြစ်သင့်တယ်။
အဆုံး၌, ထိရောက်မှုကြောင်း site ရဲ့ CSS ကိုစာရွက်များအဘို့ကျမ်းစာ၌ရေးထားလျက်ရှိသတည်းသောစတိုင်များအပါအဝင် website တစ်ခုဖွင့်ဖန်ဆင်းခြင်းနှင့်ရေရှည်အောင်မြင်မှုအားလုံးရှုထောင့်တစ်ဦးအဖြစ်သရုပ်ဆောင်ပါတယ်။ leaner, သန့်စင် CSS ကိုဖိုင်များကိုဖန်တီးနိုင်ဖြစ်ခြင်းစံပြဖြစ်ပြီး, အကယ်. သင်ဤအောင်မြင်ရန်နိုငျသညျ့နညျးလမျးတစျခုအတူတကွမျိုးစုံ CSS ကို selector တွေကိုအုပ်စုဖွဲ့ဖွငျ့ဖွစျသညျ။
အုပ်စုခွဲ selector
အခါသင်အုပ်စုကို CSS ကို selector တွေကို , သင်သည်သင်၏စတိုင်စာရွက်ထဲတွင်စတိုင်များထပ်ကျော့ခြင်းမရှိဘဲအတော်ကြာကွဲပြားခြားနားသောဒြပ်စင်မှတူညီစတိုင်များသက်ဆိုင်ပါသည်။ အဲဒီအစား (အနီရောင်ဖို့တစ်ခုခုများ၏အရောင်ကိုသတ်မှတ်ဥပမာ,) တူညီသောအရာကိုပြုသမျှသောအရာနှစ်ခုသို့မဟုတ်သုံးခုသို့မဟုတ် ပို. ပင် CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေ, ရှိခြင်း၏, သင်သည်သင်၏စာမျက်နှာအဘို့ဖွစျမွောကျရာတစ်ခုတည်း CSS ကိုအုပ်စိုးမှုရှိသည်။
ဒီ "selector တွေကို၏အုပ်စုဖွဲ့" စာမျက်နှာတစ်ခုအကျိုးအဘယ်ကြောင့်အကြောင်းပြချက်များစွာရှိပါတယ်။ ပထမဦးစွာ offt, သင့်စတိုင်စာရွက်ငယ်များဖြစ်နှင့်ပိုပြီးလျင်မြန်စွာ load ပါလိမ့်မယ်။ ဒါကြောင့်တင်ဆိုဒ်များကိုနှေးကွေးမှကြွလာသောအခါဝန်ခံရမည်, စတိုင်စာရွက်များအဓိကတရားခံတဦးမဟုတ်ပါ။ CSS ကိုဖိုင်တွေ unoptimized ပုံရိပ်တွေနဲ့နှိုင်းယှဉ်တဲ့အခါမှာကစာသားဖိုင်များ, ဒါကြောင့်ပင်တကယ်ရှည်လျား CSS ကိုစာရွက်များ, ဖိုင်အရွယ်အစားသည်ပညာရှိသောအလွန်သေးငယ်သောဖြစ်ကြသည်။ သို့သော်တိုင်းနည်းနည်းအရေအတွက်နှင့်သင့် CSS ကိုအချို့အရွယ်အစားရိတ်ခြင်းနှင့်ထိုမျှလောက်ပိုမြန်စာမျက်နှာများ load နိုင်လျှင်, ထိုအစဉ်အမြဲပြုပါရန်ကောင်းတစ်ဦးအရာဖြစ်၏။
ယေဘုယျအားဖြင့်ပျှမ်းမျှဝန်အထက်တွင်ဆိုက်များအတွက်အမြန်နှုန်းထက်နည်း 3 စက္ကန့် ဖြစ်. , 7 စက္ကန့် 3 ပျမ်းမျှအားအကြောင်း, ကျော် 7 စက္ကန့်ပဲလွန်းနှေးကွေးသည်။ ဤရွေ့ကားအနိမ့်နံပါတ်များကိုသင့်ရဲ့ site ကိုသူတို့နှင့်အတူအောင်မြင်ရန်သင်တတ်နိုင်သမျှအရာအားလုံးလုပ်ဖို့လိုအပ်ပါတယ်ဆိုလို! သငျသညျအုပ်စုဖွဲ့ CSS ကို selector တွေကိုသုံးပြီးသင့်ရဲ့ site ကိုမြန်ဆန်စောင့်ရှောက်ကူညီပေးနိုင်ပါသည်အဘယ်ကြောင့်ဒီအဖြစ်ပါတယ်။
ဘယ်လို Group မှ CSS ကို selector မှ
သင့်ရဲ့စတိုင်စာရွက်ထဲမှာအတူတူအုပ်စုသည် CSS ကို selector တွေကိုစေရန်, သငျသညျ မျိုးစုံအုပ်စုဖွဲ့ selector တွေကိုခွဲခြားရန်ကော်မာသုံးပါ စတိုင်ပါ။ အောက်ကဥပမာထဲမှာ, စတိုင်ဟာ p လို့ div element တွေကိုအကျိုးသက်ရောက်:
div, p {color: # f00; }အဆိုပါကော်မာအခြေခံအားဖြင့်ကိုဆိုလိုသည် "နှင့်" ။ ဒါကြောင့်ဒီ selector အားလုံးအပိုဒ်ဒြပ်စင်နှင့်အားလုံးဌာနခွဲ element တွေကိုသက်ဆိုင်သည်။ အဆိုပါကော်မာပျောက်ဆုံးခဲ့သည်ဆိုပါကအစားဌာနခွဲတစ်ခုကလေးသည်ရှိသမျှသောအပိုဒ် element တွေကိုပါလိမ့်မယ်။ ဒါက selector ၏အလွန်ကွဲပြားခြားနားသောမျိုးဖြစ်တယ်, ဒါဒီကော်မာတကယ် selector ရဲ့အဓိပ္ပာယ်ကိုပြောင်းလဲသွားတတ်!
selector မဆိုပုံစံကိုအခြား selector နှင့်အတူအုပ်စုဖွဲ့နိုင်ပါတယ်။ ဒီဥပမာမှာတစ်လူတန်းစား selector တစ်ခု ID ကို selector နှင့်အတူအုပ်စုဖွဲ့သည်:
p.red, #sub {color: # f00; }ဒါကြောင့်ဒီစတိုင် "ခွဲ" ၏တစ်ဦး၏ ID attribute ကိုရှိပါတယ် "အနီရောင်" ၏အတန်း attribute ကို, နှင့်မဆိုဒြပ်စင် (ကြှနျုပျတို့အရာမျိုးကိုသတ်မှတ်မရကတည်းက) နဲ့မဆိုအပိုဒ်သက်ဆိုင်သည်။
သငျသညျအုပျစုတစ်ခုတည်းစကားလုံးများနှင့် compund selector တွေကိုဖြစ်ကြောင်း selector တွေကိုအပါအဝင်အတူတကွ selector တွေကိုမဆိုနံပါတ်, လို့ရတယ်။ ဒီဥပမာလေးကွဲပြားခြားနားသော selector တွေကိုလည်းပါဝင်သည်:
p, .red, #sub, div တစ်ခု: link ကို {color: # f00; }ဒါကြောင့်ဒီအ CSS ကိုအုပ်စိုးမှုကိုအောက်ပါလျှောက်ထားမည်ဟု:
- မဆိုအပိုဒ်ဒြပ်စင်
- "အနီရောင်" ၏အတန်းနှင့်အတူမည်သည့်ဒြပ်စင်
- "ခွဲ" ၏တစ်ဦး၏ ID နှင့်အတူမည်သည့်ဒြပ်စင်
- အဆိုပါ "link ကို" ဟုဌာနခွဲများ၏ decendents သောကျောက်ဆူးဒြပ်စင်၏ကြားဖြတ်လူတန်းစား။
ဒါကနောက်ဆုံး selector တစ်ဦးဝင်း selector ဖြစ်ပါတယ်။ သင်ကအလွယ်တကူဒီ CSS ကိုစည်းမျဉ်းအတွင်းကတခြား selector တွေကိုနှင့်အတူပေါင်းစပ်ဖြစ်ပါတယ်မြင်နိုင်ပါသည်။ ကြောင်းစိုးမိုးရေးနှင့်အတူကျနော်တို့အတူတူရလဒ်အောင်မြင်ရန် 4 သီးခြား selector တွေကိုရေးသားဖို့ဦးစားပေးမည်ဖြစ်သည့်ဤ 4 selector တွေကိုအပေါ် (အနီရောင်ဖြစ်သော) # f00 ၏အရောင် setting နေကြသည်။
အာဆီယံ selector တွေကိုနောက်ထပ်အကျိုးကျေးဇူးသင်တစ်ဦးအပြောင်းအလဲလုပ်ဖို့လိုအပ်တယ်ဆိုရင်, သင်တဦးတည်းတစ်ခုတည်း CSS ကိုအုပ်စိုးမှုအစားမျိုးစုံသူတွေကိုတည်းဖြတ်နိုင်သည်, သောကွောငျ့ဖွစျသညျ။ ဒါဟာအနာဂတ်မှာဆိုက်ကိုဆက်လက်ထိန်းသိမ်းထားဖို့ကြွလာသောအခါဒီချဉ်းကပ်နည်းကိုသင်စာမျက်နှာအလေးချိန်နှင့်အချိန်ချွေဆိုလိုသည်။
မဆိုရွေးအုပ်စုလိုက်နိုင်
သငျသညျအထကျပါဥပမာအနေဖြင့်တွေ့မြင်နိုင်သည်နှင့်အမျှမဆိုခိုင်လုံသော selector အုပ်စုတစုထဲမှာထည့်ထားနိုင်ပြီးအပေါငျးတို့အုပ်စုဖွဲ့ဒြပ်စင်ကိုက်ညီသောစာရွက်စာတမ်းအားလုံးကိုဒြပ်စင်ကြောင့်စတိုင်ပိုင်ဆိုင်မှုအပေါ်အခြေခံပြီးတူညီစတိုင်ရပါလိမ့်မယ်။
အချို့လူများက code ကိုအတွက်ရှင်းလင်းပြသားသောအဘို့သီးခြားလိုင်းများပေါ်တွင်အုပ်စုဖွဲ့ element တွေကိုစာရင်းပြုစုရန်ပိုနှစ်သက်။ ဝက်ဘ်ဆိုက်နှင့်ဝန်မြန်နှုန်းအပေါ်သဏ္ဌာန်တူနေဆဲဖြစ်သည်။ ဥပမာအားဖြင့်, သင်သည်ကုဒ်တွေထဲကလိုင်းအတွက်တဦးတည်းစတိုင်အိမ်ခြံမြေသို့ကော်မာကွဲကွာစတိုင်များပေါင်းစပ်နိုင်သည်
ကြိမ်မြောက်, td, p.red, div # {အရောင် firstred: red; }
သို့မဟုတ်သင်ရှင်းလင်းပြတ်သားမှုအတွက်တစ်ဦးချင်းစီလိုင်းများပေါ်စတိုင်များစာရင်းပြုစုနိုင်သည်
ကြိမ်မြောက်,
td,
p.red,
div # firstred
{
color: red;
}
သငျသညျအုပျစုမျိုးစုံ CSS ကို selector တွေကိုအသုံးပြုနည်းလမ်းသင့်ရဲ့ site ကိုဖွင့်အမြန်နှုန်းကပိုမိုလွယ်ကူစတိုင်များရေရှည်စီမံခန့်ခွဲရန်လုပ်ဖြစ်စေ။
ဂျနီဖာ Krynin ခြင်းဖြင့်မူရင်းဆောင်းပါး။ 5/8/17 အပေါ်ဂျယ်ရမီ Girard တည်းဖြတ်။