CSS ရွေးချယ်မှုများ
CSS ရွေးချယ်မှုတစ်ခုသည် သင်စတိုင်ထုတ်လိုသော HTML အစိတ်အပိုင်း(များ) ကို ရွေးချယ်သည်။
CSS ရွေးချယ်မှုများ
သင်စတိုင်ထုတ်လိုသော HTML အစိတ်အပိုင်းများကို "ရှာရန်" (သို့မဟုတ်) ရွေးချယ်ရန် CSS ရွေးချယ်မှုများကို အသုံးပြုပါသည်။
ကျွန်ုပ်တို့သည် CSS ရွေးချယ်မှုများကို အမျိုးအစားငါးမျိုးဖြင့် ပိုင်းခြားနိုင်သည်-
- ရိုးရှင်းသောရွေးချယ်မှုများ (အမည်၊ အိုင်ဒီ၊ အတန်းကို အခြေခံ၍ အစိတ်အပိုင်းများကို ရွေးပါ)
- Combinator Selectors (သူတို့ကြားရှိ သီးခြားဆက်နွယ်မှုအပေါ် အခြေခံ၍ အစိတ်အပိုင်းများကို ရွေးပါ)
- Pseudo-class ရွေးချယ်မှု များ (အချို့သောအခြေအနေအပေါ်အခြေခံ၍ အစိတ်အပိုင်းများကိုရွေးချယ်ပါ)
- Pseudo-ဒြပ်စင်များ ရွေးချယ်မှုများ (ဒြပ်စင်တစ်ခု၏ အစိတ်အပိုင်းတစ်ခုကို ရွေးချယ်ပြီး ပုံစံပုံစံ)
- ရည်ညွှန်းချက် ရွေးချယ်သူများ ( attribute သို့မဟုတ် attribute တန်ဖိုးအပေါ် အခြေခံ၍ အစိတ်အပိုင်းများကို ရွေးပါ)
ဤစာမျက်နှာတွင် အခြေခံအကျဆုံး CSS ရွေးချယ်မှုများအား ရှင်းပြပါမည်။
CSS ဒြပ်စင် Selector
ဒြပ်စင်အမည်ရွေးချယ်သည့်ကိရိယာသည် ဒြပ်စင်အမည်ပေါ်အခြေခံ၍ HTML အစိတ်အပိုင်းများကို ရွေးချယ်သည်။
ဥပမာ
ဤတွင်၊ စာမျက်နှာပေါ်ရှိ <p> အစိတ်အပိုင်းအားလုံးကို အနီရောင် စာသားအရောင်ဖြင့် အလယ်တည့်တည့်တွင် ညှိပါမည်-
p
{
text-align: center;
color: red;
}
CSS id Selector
id ရွေးပေးသူသည် တိကျသောဒြပ်စင်ကိုရွေးချယ်ရန် HTML ဒြပ်စင်တစ်ခု၏ id attribute ကိုအသုံးပြုသည်။
ဒြပ်စင်တစ်ခု၏ id သည် စာမျက်နှာတစ်ခုအတွင်း တစ်မူထူးခြားသောကြောင့် ထူးခြားသောဒြပ်စင်တစ်ခုကို ရွေးချယ်ရန်အတွက် id ရွေးပေးသူကို အသုံးပြုပါသည်။
တိကျသော id တစ်ခုပါရှိသော ဒြပ်စင်ကို ရွေးချယ်ရန်၊ hash (#) စာလုံးကို ရေးပြီး ၎င်းနောက်တွင် ဒြပ်စင်၏ id ကို ရေးပါ။
ဥပမာ
အောက်ပါ CSS စည်းမျဉ်းကို id="para1" ဖြင့် HTML ဒြပ်စင်သို့ သက်ရောက်လိမ့်မည်-
#para1
{
text-align: center;
color: red;
}
မှတ်ချက်- ID အမည်သည် နံပါတ်တစ်ခုဖြင့် စတင်မရနိုင်ပါ။
CSS အတန်းရွေးချယ်မှု
class selector သည် သီးခြား class attribute ဖြင့် HTML အစိတ်အပိုင်းများကို ရွေးချယ်သည်။
သီးခြားအတန်းတစ်ခုရှိ အစိတ်အပိုင်းများကို ရွေးရန်၊ အပိုင်း (.) စာလုံးကို ရေးပါ၊ ထို့နောက် အတန်းအမည်ဖြင့် ရေးပါ။
ဥပမာ
ဤဥပမာတွင် class="center" ပါရှိသော HTML ဒြပ်စင်များအားလုံးသည် အနီရောင်ဖြစ်ပြီး အလယ်တည့်တည့်ရှိလိမ့်မည်-
.center {
text-align: center;
color: red;
}
အတန်းတစ်ခု၏ သီးခြား HTML အစိတ်အပိုင်းများကိုသာ သက်ရောက်မှုရှိသင့်သည်ဟုလည်း သင်သတ်မှတ်နိုင်ပါသည်။
ဥပမာ
ဤဥပမာတွင် class="center" ပါရှိသော <p> အစိတ်အပိုင်းများသာ အနီရောင်ဖြစ်ပြီး အလယ်တည့်တည့်တွင် ဖြစ်လိမ့်မည်-
p.center {
text-align: center;
color: red;
}
HTML အစိတ်အပိုင်းများသည် class တစ်ခုထက်ပို၍လည်း ရည်ညွှန်းနိုင်သည်။
ဥပမာ
ဤဥပမာတွင် <p> အစိတ်အပိုင်းကို class="center" နှင့် class="large" အရ ပုံစံချပါမည်။
<p class="center large">This paragraph refers to two classes.</p>
မှတ်ချက်- အတန်းအမည်တစ်ခုသည် နံပါတ်တစ်ခုဖြင့် စတင်မရနိုင်ပါ။
CSS Universal Selector
universal selector (*) သည် စာမျက်နှာပေါ်ရှိ HTML အစိတ်အပိုင်းအားလုံးကို ရွေးချယ်သည်။
ဥပမာ
အောက်ပါ CSS စည်းမျဉ်းသည် စာမျက်နှာရှိ HTML အစိတ်အပိုင်းတိုင်းအပေါ် သက်ရောက်မှုရှိလိမ့်မည်-
*
{
text-align: center;
color: blue;
}
CSS Grouping Selector
အုပ်စုဖွဲ့ခြင်းရွေးချယ်မှုစနစ်သည် တူညီသောပုံစံ အဓိပ္ပါယ်ဖွင့်ဆိုချက်များဖြင့် HTML ဒြပ်စင်အားလုံးကို ရွေးချယ်သည်။
အောက်ပါ CSS ကုဒ်ကိုကြည့်ပါ (h1၊ h2 နှင့် p ဒြပ်စင်များတွင် တူညီသောပုံစံ အဓိပ္ပါယ်ဖွင့်ဆိုချက်များရှိသည်)။
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}ကုဒ်ကို လျှော့ချရန် ရွေးချယ်သူများ အုပ်စုဖွဲ့ခြင်းသည် ပိုကောင်းပါသည်။
ရွေးချယ်သူများကို အုပ်စုဖွဲ့ရန်အတွက် ရွေးချယ်မှုတစ်ခုစီကို ကော်မာဖြင့် ပိုင်းခြားပါ။
ဥပမာ
ဤဥပမာတွင် ကျွန်ုပ်တို့သည် အထက်ဖော်ပြပါကုဒ်မှ ရွေးချယ်သူများကို အုပ်စုဖွဲ့လိုက်သည်-
h1, h2, p
{
text-align: center;
color: red;
}
CSS ရိုးရှင်းသောရွေးချယ်မှုများအားလုံး
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |