class attribute

class attribute သည် အစိတ်အပိုင်း (tag) တစ်ခုအတွက် အတန်းတစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော အတန်းများကို သတ်မှတ်ပေးသည်။

ဤသို့ပြုလုပ်ရခြင်းမှာ တူညီသော အတန်းသတ်မှတ်ထားသည့် အစိတ်အပိုင်းများအုပ်စုကို CSS မှတဆင့် ရည်ညွှန်းကာ ၎င်းအတွက် သတ်သတ်မှတ်မှတ် ဂုဏ်သတ္တိများ (ဥပမာ၊ စာသားအရောင် ပြောင်းရန်၊ စာလုံးအရွယ်အစား စသည်ဖြင့်) ကို အသုံးချရန် ဖြစ်သည်။

class attribute ကဲ့သို့ပင် HTML စာမျက်နှာပေါ်ရှိ အစိတ်အပိုင်းများကို ရွေးချယ်ခွင့်ပြုသည့် id attribute လည်း ရှိပါသည်။

class attribute နှင့် id attribute အကြား ကွာခြားချက်မှာ class သည် အစိတ်အပိုင်းများ၏အုပ်စုကို ရွေးချယ်သည် (၎င်းကို အစိတ်အပိုင်းတစ်ခုတည်းအတွက်ပေးထားသည်ဖြစ်စေ - နောက်ပိုင်းတွင် အခြားအစိတ်အပိုင်းကိုလည်း ပေးနိုင်သည်)။ id ကမူ ထူးခြားသော အစိတ်အပိုင်းကို ရွေးချယ်သည် (၎င်းကဲ့သို့သော id ရှိသည့် အခြားအစိတ်အပိုင်းများ စာမျက်နှာပေါ်တွင် ရှိမနေသင့်ပါ၊ သို့မဟုတ်ပါက ပဋိပက္ခဖြစ်လိမ့်မည်)။

အစိတ်အပိုင်းတစ်ခုအတွက် class ပေးရမလား id ပေးရမလား မည်သို့နားလည်နိုင်မည်နည်း။ Class ကို ဝဘ်စာမျက်နှာပေါ်တွင် ထပ်ခါထပ်ခါပေါ်လာသည့် အစိတ်အပိုင်းများအတွက် ပေးသည် (တူညီသော CSS code ကို အကြိမ်ကြိမ်မရေးရလေအောင်)။ သင့်တွင် လက်ရှိအစိတ်အပိုင်းတစ်ခုတည်းရှိသော်လည်း နောက်ပိုင်းတွင် ဆင်တူသော အစိတ်အပိုင်းများ ပေါ်လာနိုင်သည်ဟု သင် ခံစားမိပါက - ထိုအစိတ်အပိုင်းအတွက် class ပေးပါ။ ထိုကဲ့သို့သော အစိတ်အပိုင်းသည် ထူးခြားသည်ဟု သင်သေချာပါက - ၎င်းအတွက် id ပေးပါ။ သို့သော် လက်ရှိအချိန်တွင် အစိတ်အပိုင်းအားလုံးကို class ပေးပြီး id ကို JavaScript အတွက်သာ ချန်ထားရန် ရေစီးကြောင်းရှိသော်လည်း ၎င်းမှာ လူအများလက်ခံထားသော ရေစီးကြောင်းမဟုတ်ပါ။

အစိတ်အပိုင်းတစ်ခုအတွက် အတန်းအများအပြား သတ်မှတ်ပေးနိုင်ပြီး ဤသို့ဖြစ်လျှင် ၎င်းတို့ကို ကြားခံ space ဖြင့် စာရင်းပြုစုရမည်။

အတန်းအမည်များကို အင်္ဂလိပ်စာလုံးများ၊ နံပါတ်များဖြင့် ရိုက်ထည့်ရမည်၊ space မပါရ (space သည် အတန်းများကို တစ်ခုနှင့်တစ်ခု ခွဲခြားသည်၊ ၎င်းအစား underscore သို့မဟုတ် hyphen ကို အသုံးပြုနိုင်သည်)။ အတန်းများသည် နံပါတ်တစ်လုံးဖြင့် စတင်ခြင်းမရှိသင့်ပါ (HTML5 တွင် ယခုအခါ ခွင့်ပြုထားသော်လည်း ရှေးဟောင်းဘရောက်ဆာများတွင် အလုပ်မလုပ်ပါ)။

အတန်းများအတွက် အမည်များကို အင်္ဂလိပ်ဘာသာစကားဖြင့် ပေးသင့်သည် (ရုရှားဘာသာစကားဖြင့် မဟုတ်ပါ၊ ရိုးရိုးအင်္ဂလိပ်စာလုံးများဖြင့်သာ!)။ အမည်များသည် အဓိပ္ပာယ်ရှိပြီး အတန်း၏အနှစ်သာရကို ထင်ဟပ်စေသင့်သည်။

ဥပမာ

test class ရှိသော အားလုံးသော အတန်းခွဲများကို စာသားအရောင် အနီရောင်သတ်မှတ်ကြပါစို့:

<p class="test">test class ရှိသော အတန်းခွဲ။</p>
<p>class မရှိသော ထိန်းချုပ်အတန်းခွဲ။</p>

.test {
	color: red;
}

ဥပမာ . အစိတ်အပိုင်းအတွက် အတန်းများစွာ

ဤနေရာတွင် ပထမအတန်းခွဲအတွက် အတန်းအများအပြား - test1 နှင့် test2 (space ဖြင့် ရေးသားထားသည်) ကို သတ်မှတ်ကြပါစို့။ test1 class သည် အနီရောင် စာသားအရောင်ကို သတ်မှတ်ပြီး test2 class သည် 20px စာလုံးအရွယ်အစားကို သတ်မှတ်သည်။ ဒုတိယအတန်းခွဲအတွက် test1 class သာပေးထားသည် (ဤအတန်းခွဲသည် အနီရောင်ဖြစ်လာမည်)၊ တတိယအတန်းခွဲအတွက် test2 class ပေးထားသည် (ဤအတန်းခွဲသည် စာလုံးအရွယ်အစား 20px ရှိမည်)။ အတန်းနှစ်ခုရှိသော ပထမအတန်းခွဲသည် တပြိုင်နက်တည်းတွင် အနီရောင်အရောင်နှင့် စာလုံးအရွယ်အစား 20px ရှိမည်:

<p class="test1 test2">test1 နှင့် test2 class နှစ်ခုရှိသော အတန်းခွဲ။</p>
<p class="test1">test1 class ရှိသော အတန်းခွဲ။</p>
<p class="test2">test2 class ရှိသော အတန်းခွဲ။</p>
<p>class မရှိသော ထိန်းချုပ်အတန်းခွဲ။</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

ဤအကြောင်းကိုလည်း ကြည့်ပါ

id attribute,
အစိတ်အပိုင်းများအတွက် ထူးခြားသော အတည်ပြုချက်များကို သတ်မှတ်ပေးသည်