CSS ကောင်တာများ
ပီဇာ
ဟမ်ဘာဂါ
ဟော့ဒေါ့
CSS ကောင်တာများသည် တန်ဖိုးများကို CSS စည်းမျဉ်းများဖြင့် တိုးမြှင့်နိုင်သည် (၎င်းတို့ကို အသုံးပြုသည့်အကြိမ်အရေအတွက်ကို ခြေရာခံရန်) CSS မှ ထိန်းသိမ်းထားသော "ကိန်းရှင်များ" ဖြစ်သည်။ Counters များသည် စာရွက်စာတမ်းရှိ ၎င်း၏နေရာချထားမှုအပေါ်အခြေခံ၍ အကြောင်းအရာ၏အသွင်အပြင်ကို ချိန်ညှိနိုင်စေပါသည်။
ကောင်တာများဖြင့် အလိုအလျောက်နံပါတ်တပ်ခြင်း။
CSS ကောင်တာများသည် "ကိန်းရှင်များ" နှင့်တူသည်။ ပြောင်းလဲနိုင်သောတန်ဖိုးများကို CSS စည်းမျဉ်းများဖြင့် တိုးမြှင့်နိုင်သည် (၎င်းတို့ကို အသုံးပြုသည့်အကြိမ်အရေအတွက်ကို ခြေရာခံမည်)။
CSS ကောင်တာများနှင့် လုပ်ဆောင်ရန်အတွက် အောက်ပါဂုဏ်သတ္တိများကို အသုံးပြုပါမည်။
counter-reset
- ကောင်တာတစ်ခုကို ဖန်တီးပါ သို့မဟုတ် ပြန်လည်သတ်မှတ်ပါ။counter-increment
- တန်ပြန်တန်ဖိုးကို တိုးပေးပါ။content
- ထုတ်လုပ်ထားသော အကြောင်းအရာကို ထည့်သွင်းပါ။counter()
သို့မဟုတ်counters()
လုပ်ဆောင်မှု - ကောင်တာတစ်ခု၏တန်ဖိုးကို ဒြပ်စင်တစ်ခုသို့ ပေါင်းထည့်သည်။
CSS တန်ပြန်ကို အသုံးပြုရန်၊ ၎င်းကို ဦးစွာ ဖန်တီးရပါမည် counter-reset
။
အောက်ဖော်ပြပါ ဥပမာသည် စာမျက်နှာအတွက် ကောင်တာတစ်ခု ဖန်တီးပေးသည်၊ ထို့နောက် <h2> ဒြပ်စင်တစ်ခုစီအတွက် ကောင်တာတန်ဖိုးကို တိုးကာ <h2> ဒြပ်စင်တစ်ခုစီ၏ အစသို့ "အပိုင်း < တန်ဖိုး >:" ပေါင်းထည့်သည်-
ဥပမာ
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Nesting ကောင်တာများ
အောက်ပါဥပမာသည် စာမျက်နှာ (အပိုင်း) အတွက် ကောင်တာတစ်ခုနှင့် <h1> ဒြပ်စင် (အပိုင်းခွဲ) တစ်ခုစီအတွက် ကောင်တာတစ်ခု ဖန်တီးသည်။ "ပုဒ်မခွဲ" ကောင်တာအား "အပိုင်း < တန်ဖိုး၏အပိုင်းကောင်တာ >" ပါရှိသော <h1> ဒြပ်စင်တစ်ခုစီအတွက် ကောင်တာအား ရေတွက်မည်ဖြစ်ပြီး၊ အပိုင်းခွဲ၏ <h2> ဒြပ်စင်တစ်ခုစီအတွက် ကောင်တာအား "< အပိုင်းတန်ဖိုး " ဖြင့် ရေတွက်မည်ဖြစ်သည်။ >.< အပိုင်းခွဲတန်ပြန်၏တန်ဖိုး >":
ဥပမာ
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
}
ကောင်တာ၏ နမူနာအသစ်ကို ကလေးဒြပ်စင်များတွင် အလိုအလျောက် ဖန်တီးထားသောကြောင့် ကောင်တာသည် အကြမ်းဖျင်းစာရင်းများပြုလုပ်ရန် အသုံးဝင်ပါသည်။ ဤနေရာတွင်
counters()
ကျွန်ုပ်တို့သည် မတူညီသော nested ကောင်တာများ၏ အဆင့်များကြားတွင် စာကြောင်းတစ်ခုကို ထည့်သွင်းရန် လုပ်ဆောင်ချက်ကို အသုံးပြုသည်-
ဥပမာ
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
CSS ကောင်တာ ဂုဏ်သတ္တိများ
Property | Description |
---|---|
content | Used with the ::before and ::after pseudo-elements, to insert generated content |
counter-increment | Increments one or more counter values |
counter-reset | Creates or resets one or more counters |
counter() | Returns the current value of the named counter |