CSS ကို selector ။ selector တွေကိုအမျိုးအစားများ

သင်တစ်ဦးသတ်သတ်မှတ်မှတ်အရောင်ကိုသတ်မှတ်ချင်တစ်ဦးချင်းစီ၏, ရှိပါတယ်။ ထိုသို့ပြုမှဘယ်လိုနေသလဲ? စံ CSS ကို selector တွေကိုသူတို့တခါမှာအားလုံးလုပ်ကွက်များအတွက် parameters တွေကိုညွှန်ပြ, tags များအဘို့အသင့်လျော်မရှိကြပေ။ ဒီဖြေရှင်းချက်ရိုးရှင်းပါသည်။ လူတန်းစားအဖွဲ့ဝင် assign ။ class = 'အပြာ' 'တတိယ - - အတန်းအစား =' အစိမ်းရောင် '' ဥပမာ, ပထမဦးဆုံး = 'အနီရောင်' 'ဒုတိယ div class ကိုလက်ခံရရှိခဲ့သည်။ အခုတော့သူတို့က CSS ကိုစားပွဲသုံးပြီးရှေးခယျြနိုငျသညျ။

အောက်မှာဖေါ်ပြတဲ့အတိုင်း syntax ဖြစ်ပါသည်: ( "။ ") တစ်ဦးပွိုင့်ညွှန်ပြ, အတန်း၏နာမကိုစာဖြင့်ရေးသားလိုက်ကြ၏။ ပထမဦးဆုံးယူနစ်ကိုစီမံခန့်ခွဲရန်, .red ဆောက်လုပ်ရေးသုံးပါ။ ဒုတိယအချက်မှာ - ဒါကြောင့်အပေါ် .blue နှင့်။

အရေးကြီး! ဒါဟာလူတန်းစား attribute က၏အဓိပ္ပာယ်ပြည့်တန်ဖိုးများကိုသုံးစွဲဖို့အကြံပြုသည်။ ဒါဟာ Transliteration (ဥပမာ krasiviy-Blok) သို့မဟုတ်အက္ခရာ / နံပါတ်များကို (ojfh834871) ၏ကျပန်းပေါင်းစပ်သုံးစွဲဖို့မကောင်းတဲ့ပုံစံကိုစဉ်းစားသည်။ ဒီကုဒ်အတွက်သင်ပြီးနောက်စီမံကိန်းအတွက်စေ့စပ်လိမ့်မည်တဲ့သူတွေကိုရင်ဆိုင်ရပါလိမ့်မယ်သောအခက်အခဲများမဖော်ပြ, စိတ်ရှုပ်ရမှခညျြနှောငျနေကြသည်။ အကောင်းဆုံးရွေးချယ်စရာ - ထိုသို့သော BEM အဖြစ်, မည်သည့်နည်းစနစ်ကိုအသုံးပြုပါရန်။

အားသာချက် - အတော်လေးမြင့်မားတဲ့ပြောင်းလွယ်ပြင်လွယ်။

အားနည်းချက် - ထိုမျိုးစုံ element တွေကိုသူတို့တစ်ပြိုင်နက်တည်း edited ပါလိမ့်မည်ဆိုလိုတာကတဦးတည်းနှင့်အတူတူပင်လူတန်းစား, ဖြစ်နိုင်ပါသည်။ အဆိုပါပြဿနာနည်းစနစ်အဖြစ် preprocessors ၏အမွေကိုသုံးပြီးဖြေရှင်းနေသည်။ သူတို့သည်အလွန်အလုပ်ရိုးရှင်း, သင်၏လက်လျော့နည်း, saßသို့မဟုတ်အချို့သောအခြား preprocessor ရဖို့သေချာပါစေ။

ID ကို selector

ဒီဗားရှင်းထင်မြင်ချက် coder တွေနှင့် programmer တွေအကြောင်းစိတ်မကောင်းစရာဝေဝါးဖြစ်ကြသည်။ CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. တိလျှောက်လွှာအတွက်သူတို့အမွေဥစ္စာနှင့်အတူပြဿနာများဖြစ်ပေါ်စေနိုင်သောကြောင့်အခြို့သော CSS ကိုလဲ tutorial, ID ကိုအသုံးပြုခြင်းအကြံပြုကြပါဘူး။ သို့သော်များစွာသောကျွမ်းကျင်သူများကတက်ကြွစွာ layout ကိုတစ်လျှောက်လုံးသူတို့ကိုစီစဉ်နေကြသည်။ သင်ဆုံးဖြတ်။ # »), затем имя блока. ထို့နောက်ပေါင်နိမိတ်လက္ခဏာ ( "#"), ပိတ်ပင်တားဆီးမှု၏နာမတော်ကိုအောက်ပါအတိုင်းအဖြစ် syntax ဖြစ်ပါတယ်။ #red. ဥပမာအားဖြင့်, #red ။

отличается от класса по нескольким параметрам. ID ကိုနည်းလမ်းများစွာအတွက်လူတန်းစားကနေကွဲပြားခြားနားသည်။ ID. ပထမဦးစွာစာမျက်နှာနှစ်ခုတူညီ ID ကိုမဖွစျနိုငျသညျ။ သူတို့ကတစ်မူထူးခြားသောနာမကိုအမှီတာဝန်ပေးအပ်ထားပါသည်။ ဒုတိယအချက်မှာထိုသို့သော selector မြင့်မားကိုဦးစားရှိပါတယ်။ red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. ဤသူသည်သင်တို့အနီတစ်ယူနစ်လူတန်းစားသတ်မှတ်နှင့် CSS ကိုစားပွဲများတွင်အနီရောင်သတ်မှတ်လျှင်ဆိုလိုသည် နောက်ခံအရောင်, ပြီးတော့တူညီတဲ့အိုင်ဒီအပြာက assign နှင့်အရောင်အပြာကိုသတ်မှတ်သည့်ယူနစ်အပြာကိုဖွင့်ပါလိမ့်မယ်။

အားသာချက် - သင် tags များနှင့်စာသင်ခန်းများစတိုင်များလျစ်လျူရှု, တိကျသောဒြပ်စင်ကိုထိန်းချုပ်နိုင်ပါတယ်။

ID и class. အားနည်းချက် - ID နှင့်လူတန်းစား၏ကြီးမားသောအရေအတွက်ဆုံးရှုံးခဲ့ရရရန်မလွယ်ကူ။

အရေးကြီး! ID вам, в общем-то, не нужны. သငျသညျ BEM နည်းစနစ် (သို့မဟုတ်ယင်း၏ Analogues) ကိုအသုံးပြုနေလျှင်, သင်ဖို့ ID ကိုယေဘုယျအားဖြင့်မလိုအပ်လျက်ရှိသည်။ ဒီနည်းပညာကြောင့်အများကြီးပိုမိုအဆင်ပြေ layout ကိုထူးခြားတဲ့အတန်း၏အသုံးပြုမှုကိုပါဝင်ပတ်သက်။

တစ်လောကလုံး selector

{}. syntax: Starlet နိမိတ်လက္ခဏာ ( "*") နှင့်မသန်စွမ်းပဲ, ဆိုလိုသည်မှာ {*} ...

စာမကျြနှာပေါငျးတို့သ element တွေကိုတစ်ချိန်ကအချို့ attribute တွေ assign လေ့ရှိတယ်။ ဘယ်အချိန်မှာဒီအသုံးဝင်သောနိုင်သနည်း box-sizing: border-box. ဥပမာအားဖြင့်, သင်သည်စာမျက်နှာပိုင်ဆိုင်မှု box ကို-sizing သတ်မှတ်ထားဖို့လိုလျှင်: နယ်စပ်-box ကို။ div *{}. မသာနိုင်သလားစာရွက်စာတမ်းအပေါငျးတို့သအစိတ်အပိုင်းများကိုစီမံခန့်ခွဲဖို့အသုံးပြုရမည်, ဒါပေမယ့်လည်းသတ်မှတ်ထားသောပိတ်ပင်တားဆီးမှုအမျိုးသားအပေါင်းတို့ကိုထိန်းချုပ်ရန်ဥပမာ, div * {} ။

အားသာချက် - သင်တစ်ကြိမ်ပစ္စည်းအမြောက်အများကိုထိန်းချုပ်နိုင်ပါတယ်။

Cons - ပြောင်းလွယ်ပြင်လွယ် option ကိုလုံလောက်အောင်မရ။ ထို့အပြင်ခုနှစ်, အချို့ကိစ္စ၌ဤ selector များအသုံးပြုခြင်း, စာမျက်နှာအလုပ်နှေးကွေးသွားနိုင်ပါတယ်။

attribute တွေအားဖြင့်

တိကျတဲ့ attribute ကိုအတူဒြပ်စင်ကိုထိန်းချုပ်ကတတ်နိုင်သမျှလုပ်ပါ။ ဥပမာအားဖြင့်, သင်တစ်ဦးကွဲပြားခြားနားသော attribute ကိုအမျိုးအစားနှင့်အတူ input ကို tags များများစွာရှိသည်။ သူတို့ထဲကတစ်ခုမှာ - စာသား, ဒုတိယ - password ကို, တတိယ - အရေအတွက်သည်။ ဟုတ်ပါတယ်, သငျသညျအသီးအသီးလူတန်းစားသို့မဟုတ် ID ကိုသတ်မှတ်နိုင်သည်, ဒါပေမယ့်အမြဲတမ်းအဆင်ပြေမဟုတ်ပါဘူး။ attribute တွေ၏ CSS ကို selector တွေကိုဖြစ်နိုင်အများဆုံးတိနှင့်အတူအချို့သော tags များအဘို့တန်ဖိုးများကိုသတ်မှတ်ပါစေ။ ဥပမာအားဖြင့်, ဤကဲ့သို့သော:

input ကို [အမျိုးအစား = 'စာသားကို'] {}

ဤသည် selector input ကိုကစာသားအမျိုးအစားအားလုံးကို attribute တွေကို select ပါလိမ့်မယ်။

ဒီ tool အတော်လေးပြောင်းလွယ်ပြင်လွယ်နှင့် tags များမဆိုနှင့်အတူအသုံးပြုရနိုငျသညျ, attribute တွေရှိစေခြင်းငှါအရာပါ။ သို့သော်ရှိသမျှသောမဟုတ်ဘူး! အဆိုပါ CSS ကိုသတ်မှတ်ချက် ပို. ပင်အဆင်ပြေစေရန်နှင့်အတူ element တွေကိုထိန်းချုပ်နိုင်စွမ်းရှိပါတယ်!

သင့်ရဲ့ page ကို attribute မှာအမှတ်အသား = "နာမည်တစ်ခုရိုက်ထည့်ပါ" နှင့် input ကိုအမှတ်အသား = "password ကိုရိုက်ထည့်ပါ" နဲ့ input ကိုရှိတယ်လို့ဆိုပါစို့။ သူတို့ကအစ selector သုံးပြီးမရွေးနိုင်ပါသည်! ဒီလိုလုပ်ဖို့အောက်ပါဖွဲ့စည်းပုံကိုသုံးပါ:

input ကို [အမှတ်အသား = "နာမတော်ကိုအမှီ ပြု. Enter"] {} သို့မဟုတ် input ကို [အမှတ်အသား = "စကားဝှက်ကိုရိုက်ထည့်ပါ"]

attribute တွေနှင့်အတူဖြစ်ကောင်းဖြစ်နိုင်ပိုပြီးပြောင်းလွယ်ပြင်လွယ်အလုပ်။ သင်ဟာအလားတူ attribute တွေခေါင်းစဉ် (ဥပမာ, "ကက်စပီယန်" နှင့် "ကက်စပီယန်") နှင့်အတူ tags များတဲ့အရေအတွက်ရှိသည်ဆိုပါစို့။ နှစ်ဦးစလုံးကို select, အောက်ပါရွေးချယ်မှုကိုသုံးပါ:

[ခေါင်းစဉ် * = "Kaspiysk"]

CSS ကို "ကက်စပီယန်", ဆိုလိုသည်မှာ။ အီး၎င်း, "ကက်စပီယန်" နှင့် "ကက်စပီယန်" ၏သင်္ကေတများရှိပါသည်ရာ၏ခေါင်းစဉ်တွင်ရှိသမျှသောပစ္စည်းကိုရွေးချယ်ပါလိမ့်မယ်။

သငျသညျလညျးအခြို့သောဇာတ်ကောင် attribute တွေနှင့်အတူစတင်ကြောင်း tags များကိုရွေးချယ်နိုင်သည်

[ခေါင်းစဉ် ^ = "သင်လိုချင်သောဇာတ်ကောင်"] {}

သို့မဟုတ်သူတို့ကိုအဆုံးသတ်ခြင်း:

[ခေါင်းစဉ် $ = "ညာဘက်ဇာတ်ကောင်"] {} ။

အားသာချက် - အများဆုံးပြောင်းလွယ်ပြင်လွယ်။ သင့်အနေဖြင့်အတန်းနှင့်အတူ messing မပါဘဲမည်သည့်တည်ဆဲစာမျက်နှာ element တွေကိုရွေးနိုင်သည်။

အားနည်းချက် - သာတိကျသောကိစ္စများတွင်, အတော်လေးခဲကိုအသုံးပြုခဲ့သည်။ အမှတ်လူတန်းစားမြောက်မြားစွာစီစဉ်ဖို့ထက်လွယ်ကတည်းကအတော်များများကို web ဒီဇိုင်နာများ, နည်းစနစ်မှကြိုက်တတ်တဲ့ စတုရန်းကွင်းခတ် "တန်းတူညီမျှ" နှင့်ဆိုင်းဘုတ်များ။ ထို့အပြင်ဤ selector တွေကိုအောက်တွင်ဖော်ပြထားသောက Internet Explorer ဗားရှင်း 7 နဲ့အလုပ်လုပ်ကြပါဘူး။ သို့သျောလညျး, အဘယ်သူသည်ယခုအဟောင်းက Internet Explorer လိုအပ်လဲ?

Pseudo-class ကို selector တွေကို

တစ်ဦး Pseudo-status ကိုဒြပ်စင်ဆိုလိုသညျ။ ဥပမာအား ,: မောက်စ်တင် - သင်ပျံဝဲလာသောအခါအဘယျသို့စာမျက်နှာ၏အစိတ်အပိုင်းတစ်ခုဖွစျသှား ,: သွားရောက်ခဲ့ပြီး - ထိုသွားရောက်ခဲ့ပြီး link ကို။ ပထမဦးဆုံးအ-ကလေးနှင့်: နောက်ဆုံးကလေးကိုလည်းကဲ့သို့သောဒြပ်စင်များပါဝင်သည်။

ကကျေးဇူးတင်သင်သည် JavaScript ကိုအသုံးပြုခြင်းမရှိဘဲ "တိုက်ရိုက်" စာမျက်နှာတစ်ခုဖြစ်စေနိုင်ပါတယ်ဘာလို့လဲဆိုတော့ selector ၏ဤအမျိုးအစားတက်ကြွစွာခေတ်သစ်အပြင်အဆင်အတွက်အသုံးပြုသည်။ ဥပမာအားဖြင့်, သင်သည်သေချာသငျသညျ၎င်းငျး၏အရောင်ကိုပြောင်းလဲ btn ၏အတန်းနှင့်အတူခလုတ်ကိုကျော်ပျံဝဲသောအခါဖြစ်စေချင်တယ်။ ဒီလိုလုပ်ဖို့, ငါတို့အောက်ပါဖွဲ့စည်းပုံကိုသုံးပါ:

.btn: မောက်စ်တင် {

background-color: red;

}

အလှအပခလုတ်ကို၏အခြေခံဂုဏ်သတ္တိများအတွက်သတ်မှတ်ထားသောနိုင်ပြီးအကူးအပြောင်းပိုင်ဆိုင်မှုဥပမာ, 0.5s - ဤအမှု၌, ခလုတ်ကိုချက်ချင်းမျက်နှာမပျက်မည်မဟုတ်, တဝက်တစ်စက္ကန့်အတွင်း။

သီလ - ကျယ်ပြန့်စာမျက်နှာများ၏ "ပြန်လည်ရှင်သန်မှု" ကိုအသုံးပြုကြသည်။ အသုံးပြုရလွယ်ကူတယ်။

အားနည်းချက် - သူတို့မရှိကြပေ။ ဒါကတကယ့်နေရာလေးကိုကိရိယာတခုဖြစ်တယ်။ သို့သော်အတွေ့အကြုံရှိသော web designer Pseudo-အတန်း၏များစွာသောပျောက်ဆုံးသွားရနိုင်ပါတယ်။ အဆိုပါပြဿနာကိုလေ့လာမှုနှင့်အလေ့အကျင့်ဖြေရှင်းနေသည်။

Pseudo-selector တွေကို

"Pseudo" - ဤ HTML မှာမဟုတ်စာမျက်နှာ၏အစိတ်အပိုင်းများဖြစ်ကြောင်း, ဒါပေမဲ့သူတို့နေဆဲစီမံခန့်ခွဲနိုင်ပါတယ်။ သငျသညျနားမလညျခဲ့တာလဲ ဒါဟာပုံရသည်ထက်အများကြီးပိုလွယ်ပါတယ်။ ဥပမာအားဖြင့်, သင်သည်အခြားအသေးစားနှင့်အနက်ရောင်စာသားကိုထွက်ခွာကြီးတွေနဲ့အနီရောင် string ကိုအတွက်ပထမဦးဆုံးအစာဖြစ်စေချင်တယ်။ ဟုတ်ပါတယ်, တယောလူတန်းစားနှင့်အတူတစ်ထွာအတွက်စာတစ်စောင်ကောက်ချက်ချနိုင်ပါတယ်, ဒါပေမယ့်ဒါဟာရှည်လျားငြီးငွေ့စရာပါပဲ။ ဒါဟာပထမဦးဆုံးအက္ခရာ :: တစ်ခုလုံးကိုအပိုဒ်ကို select နှင့်ကြားဖြတ်သုံးစွဲဖို့အများကြီးပိုလွယ်သည်။ ဒါဟာပထမဦးဆုံးအက္ခရာ၏အသွင်အပြင်ကိုထိန်းချုပ်ဖို့အခွင့်အလမ်းကိုပေးတော်မူ၏။

Pseudo-ဒြပ်စင်၏အတော်လေးကြီးမားတဲ့အရေအတွက်ကိုရှိပါတယ်။ အောင်မြင်ဖို့မဖြစ်နိုင်ဖြစ်ပါတယ်တစ်ခုတည်းဆောင်းပါး၌သူတို့ကိုစာရင်းပြုစုပါ။ သင်သည်သင်၏အကြိုက်ဆုံးကို search engine အတွက်သက်ဆိုင်ရာသတင်းအချက်အလက်ရှာတွေ့နိုင်ပါသည်။

အားသာချက် - စာမျက်နှာ၏ကြည့်စိတ်ကြိုက်ဖို့ပြောင်းလွယ်ပြင်လွယ်သည်။

အားနည်းချက် - သူတို့ကိုအသစ်မကြာခဏရောထွေးနေကြသည်။ သာအချို့သော browser များအတွက်အလုပ်၏ဤအမျိုးအစားအတော်များများရွေးချယ်မှု။

အနှစ်ချုပ်ရန်

selector - စာရွက်စာတမ်းစီးဆင်းမှုထိန်းချုပ်ရေးများအတွက်အစွမ်းထက်ကိရိယာတခုဖြစ်တယ်။ သူ့ကိုမှကျေးဇူးတင်ပါသည်, သင်စာမကျြနှာအမှုအမျိုးမျိုးရှိသမျှတစ်ခုတည်းအစိတ်အပိုင်းရွေးနိုင်သည် (တောင်သာတစ်စိတ်တစ်ပိုင်းရှိပါတယ်) ။ ရရှိနိုင်ပါအပေါငျးတို့သ options များလေ့လာသင်ယူ, ဒါမှမဟုတ်သူတို့ကိုပင်ရေးချဖို့သေချာပါစေ။ သငျသညျအပြန်အလှန်ဒြပ်စင်၏ခေတ်မီဒီဇိုင်းနှင့်စာရေးတံနှင့်အတူရှုပ်ထွေးစာမကျြနှာကိုဖနျတီးလျှင်ဒီအထူးအရေးကြီးပါသည်။