CSS စာရင်းများ
အစီအစဥ်မရှိသောစာရင်းများ-
- ကော်ဖီ
- လက်ဖက်ရည်
- Coke
- ကော်ဖီ
- လက်ဖက်ရည်
- Coke
မှာယူထားသောစာရင်းများ-
- ကော်ဖီ
- လက်ဖက်ရည်
- Coke
- ကော်ဖီ
- လက်ဖက်ရည်
- Coke
HTML Lists နှင့် CSS List Properties
HTML တွင်၊ စာရင်း၏အဓိကအမျိုးအစားနှစ်မျိုးရှိသည်။
- unordered lists (<ul>) - စာရင်းအရာများကို ကျည်ဆန်များဖြင့် အမှတ်အသားပြုထားသည်။
- မှာယူထားသောစာရင်းများ (<ol>) - စာရင်းအရာများကို နံပါတ် သို့မဟုတ် စာလုံးများဖြင့် အမှတ်အသားပြုထားသည်။
CSS စာရင်းဂုဏ်သတ္တိများက သင့်အား ခွင့်ပြုသည်-
- မှာယူထားသောစာရင်းများအတွက် မတူညီသောစာရင်းအမှတ်အသားများကို သတ်မှတ်ပါ။
- အစီအစဥ်မတင်ထားသောစာရင်းများအတွက် မတူညီသောစာရင်းအမှတ်အသားများကို သတ်မှတ်ပါ။
- ပုံတစ်ပုံကို စာရင်းအကြောင်းအရာ အမှတ်အသားအဖြစ် သတ်မှတ်ပါ။
- စာရင်းများတွင် နောက်ခံအရောင်များ ပေါင်းထည့်ကာ အကြောင်းအရာများကို စာရင်းပြုစုပါ။
ကွဲပြားခြားနားသောစာရင်းအမှတ်အသားများ
ပိုင်ဆိုင်မှု သည် list-style-type
စာရင်းအကြောင်းအရာ အမှတ်အသား အမျိုးအစားကို သတ်မှတ်သည်။
အောက်ဖော်ပြပါ ဥပမာသည် ရနိုင်သောစာရင်းပါ အကြောင်းအရာ အမှတ်အသားအချို့ကို ပြသသည်-
ဥပမာ
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
မှတ်ချက်- အချို့တန်ဖိုးများသည် မှာယူထားသောစာရင်းများအတွက်ဖြစ်ပြီး အချို့မှာ မှာယူထားသောစာရင်းများအတွက်ဖြစ်သည်။
စာရင်းအမှတ်အသားအဖြစ် ပုံတစ်ပုံ
ပိုင်ဆိုင်မှု သည် list-style-image
ပုံတစ်ပုံကို စာရင်းအကြောင်းအရာ အမှတ်အသားအဖြစ် သတ်မှတ်သည်-
ဥပမာ
ul
{
list-style-image: url('sqpurple.gif');
}
List Item အမှတ်အသားများကို နေရာချပါ။
ပိုင်ဆိုင်မှုသည် စာရင်း-ပစ္စည်း အမှတ်အသားများ (ကျည်ဆန်အမှတ်များ) ၏ list-style-position
အနေအထားကို သတ်မှတ်သည်။
"စာရင်းပုံစံ-အနေအထား- အပြင်ဘက်;" ကျည်ဆန်အမှတ်များသည် စာရင်းအကြောင်းအရာ၏ အပြင်ဘက်တွင် ရှိနေမည်ဟု ဆိုလိုသည်။ စာရင်းအကြောင်းအရာတစ်ခုစီ၏ အစသည် ဒေါင်လိုက် ချိန်ညှိမည်ဖြစ်သည်။ ၎င်းသည် မူရင်းဖြစ်သည်-
- ကော်ဖီ - လှော်ထားတဲ့ ကော်ဖီစေ့နဲ့ ပြင်ဆင်ထားတဲ့ ဖျော်ရည်...
- လက်ဖက်ရည်
- Coke
"စာရင်းပုံစံ-အနေအထား- အတွင်းပိုင်း၊" ဆိုလိုသည်မှာ ကျည်ဆံအမှတ်များသည် စာရင်းအကြောင်းအရာအတွင်း၌ ရှိနေမည်ဖြစ်သည်။ စာရင်းပါ အကြောင်းအရာ၏ တစ်စိတ်တစ်ပိုင်းဖြစ်သောကြောင့်၊ ၎င်းသည် စာသား၏တစ်စိတ်တစ်ပိုင်းဖြစ်မည်ဖြစ်ပြီး အစတွင် စာသားကို တွန်းပါ-
- ကော်ဖီ - လှော်ထားတဲ့ ကော်ဖီစေ့နဲ့ ပြင်ဆင်ထားတဲ့ ဖျော်ရည်...
- လက်ဖက်ရည်
- Coke
ဥပမာ
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
မူရင်းဆက်တင်များကို ဖယ်ရှားပါ။
အမှတ်အသားများ list-style-type:none
/ကျည်ဆန်များကို ဖယ်ရှားရန် ပိုင်ဆိုင်မှုကိုလည်း အသုံးပြုနိုင်သည်။ စာရင်းတွင် default margin နှင့် padding ပါရှိသည်ကို သတိပြုပါ။ ၎င်းကိုဖယ်ရှားရန် <ul> သို့မဟုတ် <ol> သို့ margin:0
ပေါင်း ထည့်ပါ-padding:0
ဥပမာ
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
စာရင်း - အတိုကောက် ပိုင်ဆိုင်မှု
list-style
ပိုင်ဆိုင်မှုသည် လက်တိုပစ္စည်းဖြစ်သည် ။ ကြေငြာချက်တစ်ခုတွင် စာရင်းဂုဏ်သတ္တိအားလုံးကို သတ်မှတ်ရန် ၎င်းကိုအသုံးပြုသည်-
ဥပမာ
ul
{
list-style: square inside url("sqpurple.gif");
}
အတိုကောက် ပိုင်ဆိုင်မှုကို အသုံးပြုသောအခါ၊ ပစ္စည်းတန်ဖိုးများ၏ အစီအစဥ်များမှာ-
list-style-type
(စာရင်းပုံစံ-ပုံတစ်ပုံကို သတ်မှတ်ထားပါက၊ အကြောင်းတစ်ခုခုကြောင့် ပုံအား မပြသနိုင်ပါက ဤပိုင်ဆိုင်မှုတန်ဖိုးကို ပြသပါမည်)list-style-position
(စာရင်း-အကြောင်းအရာ အမှတ်အသားများသည် အကြောင်းအရာစီးဆင်းမှုအတွင်း သို့မဟုတ် အပြင်ဘက်တွင် ပေါ်လာသင့်သည်ရှိမရှိကို သတ်မှတ်သည်)list-style-image
(ပုံတစ်ပုံကို စာရင်းအကြောင်းအရာ အမှတ်အသားအဖြစ် သတ်မှတ်သည်)
အထက်ဖော်ပြပါ ပိုင်ဆိုင်မှုတန်ဖိုးများထဲမှ တစ်ခု ပျောက်ဆုံးနေပါက၊ ပျောက်ဆုံးနေသည့် ပိုင်ဆိုင်မှုအတွက် မူရင်းတန်ဖိုးကို ထည့်သွင်းပေးမည် ဖြစ်ပါ သည်။
အရောင်များဖြင့် စတိုင်လ်ကျခြင်းစာရင်း
၎င်းတို့ကို အနည်းငယ်ပို၍ စိတ်ဝင်စားစရာကောင်းစေရန် အရောင်များဖြင့် စတိုင်လ်စာရင်းများကို ပြုလုပ်နိုင်သည်။
<ol> သို့မဟုတ် <ul> တဂ်သို့ ထည့်လိုက်သည့်အရာသည် စာရင်းတစ်ခုလုံးကို သက်ရောက်မှုရှိပြီး <li> တက်ဂ်တွင် ထည့်သွင်းထားသော ဂုဏ်သတ္တိများသည် တစ်ဦးချင်းစာရင်းအရာများကို အကျိုးသက်ရောက်လိမ့်မည်-
ဥပမာ
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
margin: 5px;
}
ရလဒ်:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
နောက်ထပ် ဥပမာများ
ဤဥပမာသည် အနီရောင်ဘယ်ဘက်ဘောင်ဖြင့် စာရင်းတစ်ခုဖန်တီးပုံကို သရုပ်ပြသည်။
ဤဥပမာသည် ကျည်ဆံမပါဘဲ နယ်နိမိတ်ထားသောစာရင်းကို ဖန်တီးနည်းကို သရုပ်ပြသည်။
အားလုံး ဤဥပမာသည် CSS ရှိ မတူညီသောစာရင်း-ပစ္စည်း အမှတ်အသားများကို သရုပ်ပြသည်။
CSS List Properties အားလုံး
Property | Description |
---|---|
list-style | Sets all the properties for a list in one declaration |
list-style-image | Specifies an image as the list-item marker |
list-style-position | Specifies the position of the list-item markers (bullet points) |
list-style-type | Specifies the type of list-item marker |