CSS ရှိ အစိတ်အပိုင်းများ၏ အတန်းများ

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် tag အမည်အလိုက် စာမျက်နှာ၏အစိတ်အပိုင်းများကို ရွေးချယ်ခဲ့ကြပြီး ဥပမာအားဖြင့် စာပိုဒ်အားလုံးကို တစ်ပြိုင်နက် style သတ်မှတ်ပေးခဲ့ကြသည်။ သို့သော် စာမျက်နှာတွင် style အမျိုးမျိုးသုံးရန် လိုအပ်သည့် စာပိုဒ်အမျိုးအစားများ ရှိနိုင်သည်။ ထိုပြဿနာကို ဖြေရှင်းရန်အတွက် စာပိုဒ်အမျိုးမျိုးကို CSS အတန်း အမျိုးမျိုးသို့ သတ်မှတ်နိုင်သည်။

Tag တစ်ခုကို အတန်းတစ်ခုခုသို့ သတ်မှတ်ရန် ထို tag တွင် class attribute ကိုရေးပြီး ယင်းအတွင်း၌ သင့်အတွက် စာလုံး၊ ဂဏန်း၊ မျဉ်းသားများနှင့် hyphen များပါဝင်သည့် အတန်းအမည်ကို ပေးရန် လိုအပ်သည်။

ဥပမာတစ်ခုကြည့်ကြပါစို့။ အတန်း နှစ်မျိုးဖြင့် စာပိုဒ်များ ဖန်တီးကြမည် - eee နှင့် zzz:

html<p class="eee">
  paragraph with class eee
</p>
<p class="eee">
  paragraph with class eee
</p>
<p class="zzz">
  paragraph with class zzz
</p>
<p class="zzz">
  paragraph with class zzz
</p>

ယခု CSS တွင် အတန်းအမျိုးမျိုးရှိသော စာပိုဒ်များကို ကိုယ်စားပြုပြီး ၎င်းတို့အား style အချို့ သတ်မှတ်ကြပါစို့။ ဥပမာအားဖြင့်၊ အတန်း zzz ရှိသော စာပိုဒ်များကို အနီရောင်၊ အတန်း eee ရှိသော စာပိုဒ်များကို အစိမ်းရောင် သတ်မှတ်ကြမည်။

�သို့ပြုလုပ်ရန် CSS ဖိုင်တွင် ကျွန်ုပ်တို့၏ အတန်းများကို ကိုယ်စားပြုရန် လိုအပ်သည်။ ကိုယ်စားပြုခြင်း၏ syntax မှာ အောက်ပါအတိုင်းဖြစ်သည်- ပထမဦးစွာ dot သင်္ကေတ၊ ထို့နောက် ကျွန်ုပ်တို့ရွေးချယ်ထားသော အတန်းအမည်။ ဆိုလိုသည်မှာ အတန်း eee အတွက် ကိုယ်စားပြုရန် .eee ကိုရေးရမည်၊ အတန်း zzz အတွက် ကိုယ်စားပြုရန် .zzz ကိုရေးရမည်။

ထို့ကြောင့် အထက်တွင်ဖော်ပြထားသည့်အတိုင်း လုပ်ဆောင်ကြပါစို့။ ကျွန်ုပ်တို့၏ HTML သို့ ကျွန်ုပ်တို့မိတ်ဆက်ထားသော အတန်းများအတွက် CSS style များ ထပ်မံထည့်သွင်းကြမည်:

css.eee {
  color: green;
}
.zzz {
  color: red;
}

ကျွန်ုပ်တို့၏ code ကို run ပါက ရလဒ်အနေဖြင့် အောက်ပါအတိုင်း ဖြစ်လာမည်:

html<ul>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
</ul>

html<h2 class="eee">Title</h2>
<p class="eee">
  paragraph
</p>
<p class="eee">
  paragraph
</p>
<p>
  paragraph without class
</p>

<ul class="eee">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>