အတန်းနှင့် IDs သင့် CSS ကို Extend ကိုကူညီပါ
ဒီနေ့ရဲ့ Web ပေါ်ရှိအဆောက်အဦးဝက်ဘ်ဆိုက်များ CSS ကိုတစ်ဦးနက်ရှိုင်းသောနားလည်မှု (ကက်စကိတ်ပုံစံ Sheet များ) လိုအပ်သည်။ ဤရွေ့ကားသငျသညျကဘရောက်ဇာကိုပြတင်းပေါက်အတွက် layout ပါလိမ့်မယ်ဘယ်လိုဆုံးဖြတ်ရန် website တစ်ခုပေးသောညွှန်ကြားချက်ဖြစ်ကြသည်။ သင်သည်သင်၏ဝက်ဘ်စာမျက်နှာ၏အသွင်အပြင်နှင့်ခံစားဖန်တီးတံ့သောသင်၏အက HTML document ဖို့ "စတိုင်များ" ၏တစ်ဦးစီးရီးသက်ဆိုင်ပါသည်။
အဲဒီမှာနေတဲ့စာရွက်စာတမ်းကိုဖြတ်ပြီးသူတို့အားဖျောပွစတိုင်များလျှောက်ထားရန်နည်းလမ်းများစွာရှိပါတယ်, ဒါပေမယ့်မကြာခဏဆိုသလိုသင်တစ်ဦးစာရွက်စာတမ်းအတွက် element တွေကိုသာအချို့အပေါ်တစ်ဦးစတိုင်ဒါပေမယ့်ဒြပ်စင်များ၏အားလုံးမဟုတ်သာဓကအသုံးပြုချင်။
သင်တစ်ဦးချင်းစီတဦးချင်းဥပမာစတိုင်အုပ်ချုပ်မှုကိုပြန်လုပ်စရာမလိုဘဲတစ်ဦးစာရွက်စာတမ်းများတွင်အများအပြားဒြပ်စင်ဖို့လျှောက်ထားနိုင်ပါသည်တဲ့စတိုင်ကိုဖန်တီးရန်လိုပေမည်။ ဤအတပ်မက်လိုချင်သောအစတိုင်များအောင်မြင်ရန်, သငျသညျအတနျးမြားနှငျ့ ID ကို HTML ကို attribute တွေကိုသုံးပါလိမ့်မယ်။ ဤရွေ့ကား attribute တွေနီးပါးတိုင်းမှလျှောက်ထားနိုင်ပါသည်ကြောင့်ကမ္ဘာလုံးဆိုင်ရာ attribute တွေရှိပါတယ် HTML ကို tag ကို သငျသညျကွဲပြားမှု, အပိုဒ်, link စာရင်းများသို့မဟုတ်သင့်စာရွက်စာတမ်းအတွက် HTML ကို၏အခြားအပိုင်းပိုင်းမဆို styling နေကြသည်ဖြစ်စေ, သငျသညျအတနျးမှဖွင့်နိုင်သည်ကိုဆိုလိုတယ်မိုးကြိုးနှင့် ID ကိုမှ attributes သင်ဤတာဝန်ပြီးမြောက်ကူညီရန်!
class selector
အတန်း selector သင်တစ်ဦးစာရွက်စာတမ်းအတွက်တူညီတဲ့ဒြပ်စင်သို့မဟုတ် tag ကိုမှမျိုးစုံစတိုင်များကိုတင်ထားရန်ခွင့်ပြုပါတယ်။ ဥပမာအားဖြင့်, သင်သည်စာရွက်စာတမ်းအတွက်စာသား၏ကျန်နေတဲ့မတူညီတဲ့အရောင်ထွက်ကိုခေါ်သင်၏စာသားအချို့ကဏ္ဍများရှိချင်ပေလိမ့်မည်။ ဤရွေ့ကားကဏ္ဍများကိုသင်စာမျက်နှာပေါ်တွင် setting ဖြစ်ကြောင်းတစ်ဦး "တပ်လှန့်" ဖြစ်နိုင်ပါတယ်မီးမောင်းထိုးပြ။ သငျသညျဤကဲ့သို့သောအတန်းနှင့်သင်၏အပိုဒ် assign နိုင်:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
ဤရွေ့ကားစတိုင်များအပြာ (# 0000ff) အားလုံးကိုအပိုဒ်၏အရောင်ကိုသတ်မှတ်မယ်လို့ပေမယ့် "တပ်လှန့်" ၏တစ်ဦးလူတန်းစား attribute ကိုနှင့်အတူမည်သည့်အပိုဒ်အစားအားဖြင့်အနီရောင် (# ff0000) တွင် style အမျိုးမျိုးလိမ့်မယ်။ အတန်း attribute ကိုသာ tag ကို selector ကိုအသုံးပြုထားသည့်ပထမဦးဆုံး CSS ကိုအုပ်စိုးမှုထက်မြင့်မားသတ်သတ်မှတ်မှတ်ရှိပါတယ်လို့ဖြစ်ပါတယ်။
CSS ကိုအတူလုပ်ကိုင်သည့်အခါ, တစ်ဦးထက်ပိုသောတိကျသောစည်းမျဉ်းတစ်လျော့နည်းသတ်သတ်မှတ်မှတ်တဦးတည်းဖျက်ရေးသွားမည်။ ဒီတော့ဒီဥပမာထဲမှာ, ပိုပြီးယေဘုယျစည်းမျဉ်းအားလုံးအပိုဒ်၏အရောင်သတ်မှတ်ပေမယ့်မှသာအချို့အပိုဒ်အပေါ် setting ကြောင့်ပဓာနထက်ဒုတိယပိုတိကျတဲ့စည်းမျဉ်း။
ဤတွင်ဒီအချို့ HTML ကို markup များတွင်အသုံးပြုနိုင်ပုံကိုသည်:
ဤသည်အပိုဒ်စာမျက်နှာများအတွက် default အနေနဲ့ဖြစ်သော, အပြာထဲမှာဖော်ပြပါတယ်မည်ဖြစ်သည်။
ဤသည်အပိုဒ်တွင်လည်းအပြာအတွက်ဖြစ်လိမ့်မယ်။
အတန်း attribute ကဒြပ်စင် selector ပုံစံကနေစံအပြာအရောင် overwrite မယ်လို့ကတည်းကနှင့်ဤအပိုဒ်အနီရောင်တွင်ပြသမည်ဖြစ်သည်။
ကြောင်းဥပမာထဲမှာ, "p.alert" ၏စတိုင်လ်သာ "သတိပေးချက်" class.If သင်မျိုးစုံက HTML element တွေကိုဖြတ်ပြီးကြောင်းလူတန်းစားကိုအသုံးပြုဖို့လိုအသုံးပွုသောအပိုဒ်ဒြပ်စင်လျှောက်ထားမည်ဖြစ်ကြောင်း, သင်ရိုးရှင်းစွာ၏အစအဦးအနေဖြင့် HTML ကိုဒြပ်စင်ဖယ်ရှားပစ်မယ်လို့ ဤကဲ့သို့သော (အရပ်၌ရှိရုံကာလအတွင်းစွန့်ခွာရန်သေချာစေပါ () ။ ) စတိုင်ခေါ်ဆိုခ:
.alert {background-color: # ff0000;}
ဤသည်မှာအတန်းအစားအခုလိုမဆိုဒြပ်စင်မှရရှိနိုင်ပါသည်။ "တပ်လှန့်" ၏တစ်ဦးလူတန်းစား attribute တန်ဖိုးရှိပါတယ်ကြောင်းကိုသင်၏ HTML ကိုမဆိုအပိုင်းအစယခုစတိုင်ရပါလိမ့်မယ်။ အောက်က HTML မှာကျနော်တို့က "သတိပေးချက်" အတန်းအစားအသုံးပြုသည့်အပိုဒ်နှင့်ခေါငျးစဉျအောကျအဆင့်ကို 2 နှစ်ဦးစလုံးရှိသည်။ ဤအရာနှစ်ဦးစလုံးကျနော်တို့ပြ CSS ကိုအပေါ်အခြေခံပြီးအနီရောင်တစ် background-color ကိုရှိလိမ့်မယ်။
ဤသည်အပိုဒ်အနီရောင်၌ရေးထားလျက်ရှိ၏မည်ဖြစ်သည်။
ဤ h2 လည်းအနီရောင်ပါလိမ့်မယ်။
သူတို့၏ ID ဖြစ်ကြောင်းတိကျတဲ့ရှုထောင့်ကနေနှင့်အတူအလုပ်လုပ်ရန်ပိုမိုလွယ်ကူကြောင့်ဝက်ဘ်ဆိုက်များယနေ့တွင်, လူတန်းစား attribute တွေမကြာခဏအများဆုံးဒြပ်စင်ပေါ်တွင်အသုံးပြုကြသည်။ သငျသညျအမြားဆုံးလက်ရှိ HTML စာမျက်နှာတစ်ခါသာထင်ရှားစေခြင်းငှါအရာတစ်ဦးစာရွက်စာတမ်းနှင့်အခြားသူများအတွက်အကြိမ်ပေါင်းများစွာထပ်ခါတလဲလဲနေကြသည်အချို့သောလူတန်းစား attribute တွေ, နှင့်ပြည့်စုံစေခြင်းငှါရှာတွေ့ပါလိမ့်မယ်။
ID ကို selector
အဆိုပါ ID ကို selector သင်တစ်ဦး tag ကိုသို့မဟုတ်အခြားနှင့်အတူကပေါင်းသင်းမပါဘဲတစ်ဦးသတ်သတ်မှတ်မှတ်စတိုင်မှနာမည်တစ်ခုပေးခွင့်ပြု HTML ကိုဒြပ်စင် ။ သငျသညျဖြစ်ရပ်တစ်ခုအကြောင်းကိုသတင်းအချက်အလက်များပါဝင်သည်ကြောင်းကိုသင်၏ HTML ကို markup အတွက်ဌာနခွဲခဲ့ဟုဆိုသည်။
သင်ဤဌာနခွဲ "ဖြစ်ရပ်" တစ်ခု ID ကို attribute ကိုပေးနိုင်ကြောင်း, သင်တစ်ဦး 1-pixel ကျယ်ပြန့်အနက်ရောင်နယ်စပ်နဲ့ဌာနခွဲဖျောပွခငျြတယျဆိုရငျထို့နောက် အကယ်. သင်ဤကဲ့သို့သော် ID code ကိုရေးဖို့:
#event {နယ်စပ်: 1px အစိုင်အခဲ # 000; }
အတူစိန်ခေါ်မှု ID ကို selector တွေကို သူတို့အနေနဲ့က HTML document အတွက်ထပ်ခါတလဲလဲမရနိုငျသောကွောငျ့ဖွစျသညျ။ သူတို့က (သင်သင့် site ၏မျိုးစုံစာမျက်နှာများပေါ်တွင်အတူတူ ID ကိုသုံးပေမယ့်တစ်ခါသာတစ်ဦးချင်းစီတဦးချင်းက HTML document အတွက်နိုင်သည်) ထူးခြားသောဖြစ်ရမည်။ သငျသညျဤအမှုအလုံးစုံတို့ကိုနယ်စပ်လိုအပ်ကြောင်း 3 ဖြစ်ရပ်များရှိခဲ့ပါလျှင်ဒီတော့သူတို့ကိုသင် ID ကို "EVENT1", "event2" ၏ဂုဏ်တော်နှင့် "event3" နှင့်စတိုင်သူတို့ထဲကတစ်ဦးချင်းစီပေးရနျလိုအပျလိမ့်မယ်။ ဒါဟာထို့ကြောင့် "ဖြစ်ရပ်" ၏အပေါ်မှာဖော်ပြထားတဲ့လူတန်းစား attribute ကိုသုံးပါနှင့်တပြိုင်နက်ထိုသူအပေါင်းတို့ style လုပ်ဖို့အများကြီးပိုမိုလွယ်ကူပါလိမ့်မယ်။
အတူနောက်ထပ်စိန်ခေါ်မှု ID ကို attributes သူတို့အတန်းအစား attribute တွေထက်မြင့်မားတဲ့ specification ရှိသည်ဆိုသောအချက်ဖြစ်ပါသည်။ ဒါဟာသင်ယခင်ကထူထောင်စတိုင်ပြောင်းလဲသတ်မှတ်လိုက်သည်ကြောင်း CSS ကိုရှိသည်ဖို့လိုအပ်လျှင်သင်၏ ID အပေါ်လည်းအကြီးအကျယ်မှီခိုကြလျှင်, အဲဒီလိုလုပ်ဖို့ခက်ခဲဖြစ်နိုင်သည်ကိုဆိုလိုသည်။ ဒါဟာအများအပြားက web developer များသူတို့ကတစ်ခါသာကြောင်းတန်ဖိုးကိုသုံးစွဲဖို့ရည်ရွယ်လျှင်ပင်ကွယ်ပျောက်သူတို့ရဲ့ markup အတွက်၏ ID ကိုအသုံးပြုပြီးထံမှပြောင်းရွှေ့ခဲ့ကြခြင်း, အစားအားလုံးနီးပါးစတိုင်များများအတွက်လျော့နည်း-တိကျတဲ့လူတန်းစား attribute တွေလှည့်ပြီဒီအကြောင်းပြချက်အဘို့ဖြစ်၏။
သငျသညျ In-စာမျက်နှာကျောက်ဆူးလင့်များရှိပါတယ်တဲ့စာမျက်နှာကိုဖန်တီးရန်လိုတဲ့အခါ ID ကို attribute တွေကစားသို့လာကြပါရှိရာတဦးတည်းဧရိယာဖြစ်ပါတယ်။ ဥပမာ, သင်စာမျက်နှာ၏အမျိုးမျိုးသောအစိတ်အပိုင်းများဖို့ "ခုန်" အဲဒီ links များနှင့်အတူတစ်ခုတည်းစာမျက်နှာပေါ်တွင်ရှိသမျှသောအကြောင်းအရာများပါဝင်သည်တစ် Parallax စတိုင်က်ဘ်ဆိုက်ရှိပါက။ ဤသည် ID ကို attribute တွေနှင့်ဤကျောက်ဆူးလင့်များအသုံးပြုစာသားကိုလင့်များသုံးပြီးပြုမိသည်။
သငျသညျရိုးရှင်းစွာဤကဲ့သို့သော, link ကို၏ href attribute ကငှါ, # သင်္ကေတအားဖြင့်ရှေ့ပြေးသော attribute ကို၏တန်ဖိုးပေါင်းထည့်မယ်လို့:
ဤ link ကို ဖြစ်ပါသည်
နှိပ်လိုက်သို့မဟုတ်ထိမိတဲ့အခါ, ဒီ link ကဒီ ID ကို attribute ကိုရှိတယ်လို့စာမျက်နှာ၏အစိတ်အပိုင်းတစ်ရပ်မှခုန်လိမ့်မယ်။ စာမကျြနှာပျေါတှငျမပါဒြပ်စင်ဒီ ID ကိုတနျဖိုးကိုအသုံးပြုလျှင်, link ကိုဘာမှမလုပ်ပါဘူး။
သငျသညျ In-စာမျက်နှာတစ်ခုက site ပေါ်တွင်ချိတ်ဆက်ဖန်တီးချင်တယ်ဆိုရင်ကိုသတိရပါ, ID ကို attribute တွေ၏အသုံးပြုမှုကိုမလိုအပ်ပါလိမ့်မည်, ဒါပေမယ့်သင်ဆဲယေဘုယျ CSS ကိုပုံစံရည်ရွယ်ချက်များအတွက်အတန်းမှဖွင့်နိုင်ပါတယ်။ ဤသည်ယနေ့ငါစာမကျြနှာကိုတက်အထိမ်းအမှတ်ဘယ်လိုဖြစ်တယ် - ငါလူတန်းစား selector တွေကိုတတ်နိုင်သမျှအသုံးပြုသောနဲ့ကျွန်မ CSS ကိုတစ်ချိတ်အဖြစ်ဒါပေမယ့်လည်းတစ်ခု In-စာမျက်နှာလင့်ခ်အတိုင်းသာပြုမူဖို့ attribute ကိုလိုအပ်သည့်အခါသာ၏ ID မှလှည့်။
ဂျနီဖာ Krynin ခြင်းဖြင့်မူရင်းဆောင်းပါး။ 8/9/17 အပေါ်ဂျယ်ရမီ Girard တည်းဖြတ်