မာတိကာမှာ နံပါတ်စဉ်အလိုအလျောက် တက်လာအောင်ပြုလုပ်နည်း
ပုံမှာ မြင်ရတဲ့အတိုင်းပါပဲ။ ဒီလို ဖြစ်ဖို့အတွက် 1 တိုက်ကြီးများအကြောင်း လို့ရိုက်ထည့်ဖို့ မလိုပါဘူး။ တိုက်ကြီးများအကြောင်း လို့ပဲ ရိုက်ထည့်ရမှာပါ။ ဒီနေရာမှာ :before selector ကို သုံးထားပါတယ်။ ဥပမာ p:before{ content:”Read this: “;} ဆိုရင် စာပိုဒ်တိုင်းရဲ့ရှေ့ကနေ Read this: လို့ပေါ်မှာဖြစ်ပါတယ်။ ကိုယ်ပေါ်စေချင်တဲ့စာလုံးကို Read this: နေရာမှာ အစာထိုးရမှာ ဖြစ်ပါတယ်။ ဥပမာ <p>My name is Donald</p> ဆိုရင် Read this: My name is Donald လို့ပေါ်မှာဖြစ်ပါတယ်။ နောက်နှစ်ခုကတော့ counter-reset နဲ့ counter-increment ပါ။ 2 ရဲ့နောက်မှာ 2.1 လို့ပေါ်စေဖို့အတွက် counter-reset ကိုသုံးပါတယ်။ သူမပါရင် 2.3 လို့ဖြစ်နေမှာပါ။1 ကနေ 2 ကိုပြောင်းတဲ့အချိန်မှာ counter တွေကို reset လုပ်ပေးဖို့လိုပါတယ်။ counter-increment ကို နံပါတ်တစ်ခုချင်းစီ တိုးသွားဖို့ အတွက်သုံးပါတယ်။
<style type=”text/css”>
a.R1 { counter-reset:R2;}
a.R2:before
{font-weight:bold;
counter-increment:R2;
content:counter(R1) “.” counter(R2) ” “;
}
</style>
<body>
<a href=”#home”>တိုက်ကြီးများအကြောင်း</a>
<a href=”#home”>အာရှတိုက်</a></body>
R2 ဆိုတာက class name ပါ။ class က ထပ်ကာထပ်ကာ ပြန်သုံးလို့ရပါတယ်။ class R1 မှာ R2 ကို reset လုပ်ရပါတယ်။ CSS code တွေကို style tag ထဲမှာရေးချင်ရင်ရေ: မရေးချင်ရင်တော့ external style sheet ကို သုံးရမှာပါ။ Link တွေကိုတော့ body tag ထဲ ထည့်ရေးထားရမှာပါ။ body tag ထဲမှာ R1 ကို reset လုပ်ထား ပါတယ်။ display:block ဆိုတာကတော့ စာပိုဒ်ပုံစံလေး ပေါ်စေချင်လို့ပါ။ text-indent တွေက ကြည့်လို့လှအောင် ရေးထားတာပါ။ <!DOCTYPE html> ကိုမကြေညာ ရင် IE မှာကောင်းကောင်း အလုပ်မလုပ်ပါဘူး။ example file ကို ဒီမှာ ဒေါင်းလို့ရပါတယ်။ before selector, counter increment နဲ့ counter reset အကြောင်းတွေ သိချင်ရင် http://www.w3schools.com မှာသွားရှာ လို့ရပါတယ်။ CSS section မှာပါ။
No comments:
Post a Comment