သငျသညျဒြပ်စင်နှုန်းတစ်ခုတည်း CSS ကိုအတန်းအစားကန့်သတ်မဟုတ်ပါဘူး။
ကက်စကိတ်ပုံစံ Sheet များ (CSS ကို) သင်ကြောင်းဒြပ်စင်လျှောက်ထားသောဂုဏ်တော်သို့ hooking အားဖြင့်က Element ရဲ့ရုပ်ဆင်းသဏ္ဌာန်သတ်မှတ်ခွင့်ပြုပါ။ ဤရွေ့ကား attribute တွေအားလုံး attribute တွေလိုပဲသူတို့မှပူးတွဲပါသောဒြပ်စင်မှအထောက်အကူဖြစ်စေသတင်းအချက်အလက်ကို add, တစ်ခုခုဖြစ်နှင့် ID ကိုတစ်ခုသို့မဟုတ်လူတန်းစားနှင့်နိုင်ပါတယ်။ သငျသညျ Element တစ်ခုရဲ့မှ add attribute အရာပေါ် မူတည်. သင်ကြည့်အောင်မြင်ရန်နှင့်ဒြပ်စင်များနှင့်တစ်ဖွဲ့လုံးက website အတွက်ခံစားရရန်လိုအပ်သည်ဟုလိုအပ်သောအမြင်အာရုံစတိုင်များလျှောက်ထားဖို့ CSS ရွေးရေးလိုက်နိုင်ပါတယ်။
၏ ID သို့မဟုတ်အတန်းဖြစ်စေ CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေကိုသူတို့နှင့်အတူသို့ hooking ၏ရည်ရွယ်ချက်အတွက်အလုပ်လုပ်နေချိန်တွင်သူတို့လျော့နည်းတိကျတဲ့နှင့်ခြုံငုံနှင့်အတူအလုပ်လုပ်ရန်ပိုမိုလွယ်ကူကြောင့်, ခေတ်သစ်ကို web ဒီဇိုင်းနည်းလမ်းများ, တစ်စိတ်တစ်ပိုင်းထဲမှာ၏ ID ကျော်အတန်းမျက်နှာသာ။ ဟုတ်ကဲ့, သင်ဆဲ၏ ID အသုံးပြုအများအပြားက်ဘ်ဆိုက်များကိုရှာဖွေပါလိမ့်မယ်, ဒါပေမယ့်အတန်းခေတ်သစ် web စာမျက်နှာများကိုကျော်ယူကြပြီနေချိန်မှာသူတို့အား attribute တွေပိုပြီးအနည်းငယ်သာအတိတ်ကာလထက်လျှောက်ထားလျက်ရှိသည်။
CSS ကိုအတွက်လူပျိုသို့မဟုတ်အကွိမျမြားစှာ Classes ရဲ့?
ကိစ္စအများစု၌သငျ Element တစ်ခုရဲ့ဖို့တစ်ခုတည်းလူတန်းစား attribute ကို assign မယ်လို့ပေမယ့်သင်အမှန်တကယ်သူတို့လမ်းကိုသင်၏ ID နှင့်အတူနေကြသည်ရုံတစျခုအတန်းအစားကန့်သတ်မရှိကြပေ။ Element တစ်ခုရဲ့သာတစ်ခုတည်း ID ကို attribute ကရှိနိုင်ပါသည်နေစဉ်, သငျသညျလုံးဝ Element တစ်ခုရဲ့မျိုးစုံအတန်းကိုပေးနိုင်ပါသည်နှင့်အချို့ကိစ္စများတွင်, ဒါလုပ်နေတာသင့်စာမျက်နှာစတိုင်ဖို့ပိုလွယ်ကူပြီးအများကြီးပိုပြောင်းလွယ်ပြင်လွယ်စေမည်!
သငျသညျ Element တစ်ခုရဲ့မှမျိုးစုံအတန်းသတ်မှတ်ဖို့လိုအပ်ခဲ့လျှင်, သင်နောက်ထပ်အတန်းကိုထည့်သွင်းခြင်းနှင့်ရိုးရှင်းစွာသင့်ရဲ့ attribute ကိုတစ်ဦးအာကာသသူတို့နှင့်အတူခွဲခြားနိုင်ပါတယ်။
ဥပမာ, ဒီအပိုဒ်သုံးအတန်းရှိပြီး:
ဒါကစာပိုဒ်၏စာသားပါလိမ့်မယ်
"pullquote
featured left">
ဒါကစာပိုဒ် tag ကိုအပေါ်ကိုအောက်ပါသုံးခုအတန်းသတ်မှတ်:
- Pullquote
- အသားပေး
- လက်ဝဲ
ဤအလူတန်းစားတန်ဖိုးများကိုအသီးအသီးအကြားနေရာလပ်များသတိပြုပါ။ သူများသည်နေရာများကွဲပြားခြားနားသော, တစ်ဦးချင်းစီအတန်းကဲ့သို့သူတို့ကိုတက်သတ်မှတ်အရာဖြစ်တယ်။ လူတန်းစားအမည်များသူတို့ကိုနေရာများရှိသည်မဟုတ်နိုင်ပါတယ်အဘယ်ကြောင့်ဤမျှလောက်လုပ်နေတာသီးခြားအတန်းကဲ့သို့သူတို့ကိုခန့်ထားမည်ဟုဘာဖြစ်လို့လဲဆိုတော့ဒါကလည်းဖြစ်ပါတယ်။
ဤသုံးပါးစကားအာကာသနှင့်အတူကွဲကွာနေကြဘယ်မှာဥပမာသင်ကအာကာသမပါဘဲ "pullquote-featured-left" ကိုသုံးလျှင်, ဒါကြောင့်တဦးတည်းအတန်းအစားတန်ဖိုးကိုပါလိမ့်မယ်, ဒါပေမယ့်အပေါ်ကဥပမာ, တစ်ဦးချင်းစီတန်ဖိုးများအဖြစ်ထိုသူတို့သတ်မှတ်။ သငျသညျအတနျးတန်ဖိုးများကိုသင့်ရဲ့ကွန်ရက်စာမျက်နှာတွေပေါ်မှာသုံးစွဲဖို့ရာပေါ်မှာဆုံးဖြတ်အဖြစ်ဒီအယူအဆကိုနားလည်သဘောပေါက်ရန်အရေးကြီးပါသည်။
သငျသညျ HTML မှာသင့်ရဲ့လူတန်းစားတန်ဖိုးများများတပြိုင်နက်, သင်ထို့နောက်သင့် CSS ကိုအတွက်အတန်းအတိုင်းဤ assign နှင့်သင်ပေါင်းထည့်ရန်လိုသည့်စတိုင်များလျှောက်ထားနိုင်ပါသည်။ ဥပမာ။
.pullquote { ... }
{ ... } .featured
p.left { ... }
ဤဥပမာ၌, CSS ကိုကြေညာချက်များနှင့်တန်ဖိုးများအားလုံးသူတို့အားစတိုင်များသင့်လျော်သော selector မှလျှောက်ထားမည်ဖြစ်ကြောင်းကိုဘယ်လိုအရာက, curly မသန်စွမ်းပဲအထဲမှာပါလိမ့်မယ်။
မှတ်ချက် - သင်လျှင် တစ်ဦးသတ်သတ်မှတ်မှတ်ဒြပ်စင်တစ်ခုလူတန်းစား set (ဥပမာ, p.left), သင်ဆဲအတန်းများစာရင်းကို၏တစ်စိတ်တစ်ပိုင်းအဖြစ်အသုံးပွုနိုငျ; သို့သော်သူကသာအ CSS ကိုအတွက်သတ်မှတ်ထားသောလျက်ရှိသောသူတို့ကို element တွေကိုအကျိုးသက်ရောက်စေပါလိမ့်မယ်ကိုသတိထားပါ။ သင့်ရဲ့ selector အမှန်တကယ် "left '' တစ်ဦးလူတန်းစားတန်ဖိုးအပိုဒ်" ကလျှောက်ထားရန်ပြောနေကတည်းကတစ်နည်းမှာ p.left စတိုင်သာဒီလူတန်းစားနှင့်အတူအပိုဒ်လျှောက်ထားပါလိမ့်မယ်။ ဆန့်ကျင်ဘက်အားဖြင့်, ထိုဥပမာထဲမှာအခြားနှစ်ဦးကို selector တွေကိုတစ်အချို့ဒြပ်စင်ကိုသတ်မှတ်ပါဘူး, ဒါကြောင့်သူတို့အတန်းအစားတန်ဖိုးများကိုအသုံးပြုမဆိုဒြပ်စင်လျှောက်ထားမည်ဖြစ်သည်။
အကွိမျမြားစှာ Classes ရဲ့များ၏အားသာချက်များ
အကွိမျမြားစှာအတန်းကပိုမိုလွယ်ကူသည်ဟုဒြပ်စင်အဘို့အတစ်ခုလုံးသစ်ကိုစတိုင်ကိုဖန်တီးရန်မလိုဘဲ element တွေကိုအထူးသက်ရောက်မှုကိုထည့်သွင်းဖို့စေနိုင်သည်။
ဥပမာအားဖြင့်, သင်သည်နိုင်စွမ်းရှိသည်ဖို့လိုပေမည် လက်ျာဘက်လက်ဝဲသို့မဟုတ်ဒြပ်စင် float လျင်မြန်စွာ။ သင်ရုံ float နှင့်အတူနှစ်ဦးကို left အတန်းနှင့်ညာဘက်ကိုရေးလိမ့်မယ်: left; နှင့် float: ခွင့်, သူတို့ကို၌တည်၏။ သင် left float ဖို့လိုအပ် Element တစ်ခုရဲ့ခဲ့အခါတိုင်းထိုအခါ, သငျသညျရိုးရိုးက၎င်း၏လူတန်းစားစာရင်းကိုဖို့ "left" အတန်း add လိမ့်မယ်။
ဤနေရာတွင်လမ်းလျှောက်ဖို့ဒဏ်ငွေလိုင်းသို့သော်ရှိပါသည်။ ကို web စံချိန်စံညွှန်းစတိုင်နဲ့ဖွဲ့စည်းပုံမှာ၏ခွဲခြာ dictate ဆိုတာသတိရပါ။ စတိုင် CSS ကို၌တည်ရှိ၏စဉ်ဖွဲ့စည်းပုံက HTML ကနေတဆင့်ကိုင်တွယ်နေပါတယ်။
သင့်ရဲ့ HTML ကိုစာရွက်စာတမ်းအားလုံးဒြပ်စင်မဟုတ်ဘဲသူတို့တွေဘာတွေရှိတယ်ဆိုတာထက်ကိုကြည့်သင့်တယ်ဘယ်လို dictate ကြောင်းအမည်များဖြစ်သော "အနီရောင်" သို့မဟုတ် "left" နဲ့တူလူတန်းစားအမည်များ, ရှိသည်သောဒြပ်စင်များနှင့်ပြည့်စုံသည်ဆိုပါကသင်သည်ဖွဲ့စည်းပုံနှင့်စတိုင်အကြားကြောင်းလိုင်းဖြတ်ကူးနေကြသည်။ ငါသည်ဤအကြောင်းပြချက်များအတွက်တတ်နိုင်သမျှငါ၏အ Non-semantic လူတန်းစားအမည်များကိုကန့်သတ်ရန်ကြိုးစားပါ။
အကွိမျမြားစှာ Classes ရဲ့, ဝေါဟာရအသုံးအနှုံးများနှင့် JavaScript ကို
မျိုးစုံအတန်းကို အသုံးပြု. ရန်နောက်ထပ်အားသာချက်ကသင်သည်များစွာသောပိုပြီးအပြန်အလှန်ဆက်သွယ်ဖြစ်နိုင်ခြေပေးသည်သောကွောငျ့ဖွစျသညျ။
သငျသညျကနဦးအတန်းမဆိုဖယ်ရှားခြင်းမရှိဘဲ JavaScript ကို အသုံးပြု. လက်ရှိဒြပ်စင်အသစ်အတန်းလျှောက်ထားနိုင်ပါသည်။ သငျသညျကိုလည်းသတ်မှတ်မှအတန်းကိုသုံးနိုင်သည် Element တစ်ခုရဲ့ semantic ။ ဒီအသင်သည်ထိုဒြပ်စင်ဝေါဟာရအသုံးအနှုံးဘာကိုဆိုလိုသလဲဆိုတာသတ်မှတ်ဖို့နောက်ထပ်အတန်းအပေါ် add နိုင်ပါတယ်ဆိုလိုသည်။ ဤသည် Microformats ဘယ်လိုအလုပ်လုပ်တယ်ဆိုတာကိုဖြစ်ပါတယ်။
အကွိမျမြားစှာ Classes ရဲ့များ၏အားနည်းချက်များကို
သင့်ရဲ့ဒြပ်စင်အပေါ်မျိုးစုံအတန်းကို အသုံးပြု. ဖို့အကြီးမားဆုံးအားနည်းချက်ကမှာကြည့်ရှုခြင်းနှင့်အချိန်ကြာလာတာနဲ့အမျှစီမံခန့်ခွဲရန်သူတို့ကိုနည်းနည်း unwieldy စေနိုငျသောကွောငျ့ဖွစျသညျ။ ဒါဟာ Element တစ်ခုရဲ့ထိခိုက်ကြသည်နှင့်မည်သည့် script များကြောင့်ထိခိုက်နေကြပါလျှင်အဘယျသို့စတိုင်များကိုဆုံးဖြတ်ရန်ခက်ခဲဖြစ်လာပေမည်။ ယနေ့ရရှိနိုင်သောမူဘောင်အများတို့သည်လည်း Bootstrap ကဲ့သို့မျိုးစုံအတန်းနှင့်အတူဒြပ်စင်၏လေးလံသောအသုံးပြုမှုပါစေ။ အဲဒီကုဒ်လက်မှရရှိရန်နှင့်သင်သတိထားမဟုတ်ပါလျှင်အလွန်လျှင်မြန်စွာနှင့်အတူအလုပ်လုပ်ရန်ခက်ခဲနိုင်ပါတယ်။
သငျသညျမျိုးစုံအတန်းအသုံးပြုသောအခါသင်တို့သည်လည်းတဦးတည်းအတန်းအစားတွေအတွက်စတိုင်ငျသညျဤအဘို့ရည်ရွယ်ခဲ့ပါဘူးလျှင်ပင်အခြားများ၏စတိုင်လ် override ရှိခြင်း၏အန္တရာယ်ကို run ။ ဤသည်ထို့နောက်၎င်းတို့သည်သင့်ကြောင်းပေါ်လာသည်လျှင်ပင်သင်၏အစတိုင်များလျှောက်ထားလျက်ရှိကြသည်မဟုတ်အဘယ်ကြောင့်ခက်ခဲထွက်တွက်ဆစေနိုင်ပါတယ်။
သင်က attribute တွေကြောင့်တဦးတည်းဒြပ်စင်မှလျှောက်ထားပင်နှင့်အတူ, သတ်သတ်မှတ်မှတ်သတိထားရောက်ထားရန်လိုအပ်ပါတယ်
Chrome ကိုအတွက် Webmaster tools များကဲ့သို့သော tool ကိုသုံးခြင်းအားဖြင့်သင်ပိုမိုလွယ်ကူစွာသင့်အတန်းကသင်၏စတိုင်များထိခိုက်ကြသည်ကိုဘယ်လိုမြင်ပဋိပက္ခဖြစ်စတိုင်များနှင့် attribute တွေ၏ဤပြဿနာကိုရှောင်ရှားနိုင်ပါတယ်။
ဂျနီဖာ Krynin ခြင်းဖြင့်မူရင်းဆောင်းပါး။ 8/7/17 အပေါ်ဂျယ်ရမီ Girard တည်းဖြတ်