បញ្ជី

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

ក្នុង​ការ​រចនា​បញ្ជី យើង​អាច ៖

រចនា​សញ្ញា​សម្គាល់​នៅ​ពី​មុខ​បញ្ជី

ដើម្បី​រចនា​សញ្ញា​សម្គាល់​ដែល​តែង​មាន​នៅ​ពី​មុខ​បញ្ជី ប្រើ list-style-type ។

សញ្ញា​សម្គាល់​សំរាប់ <ul>

តម្លៃ​នៃ list-style-type ដែល​ប្រើ​ជាមួយ <ul>

តម្លៃ រូបរាង
square ការេ
circle រង្វង់
disc ចំណុច
សញ្ញា​សម្គាល់​សំរាប់ <ol>

តម្លៃ​នៃ list-style-type ដែល​ប្រើ​ជាមួយ <ol>

តម្លៃ ប្រភេទ​លេខ
cambodian លេខ​ខ្មែរ
decimal-leading-zero លេខ​ផ្ដើម​ដោយ​លេខសូន្យ
lower-latin អក្សរ​ឡាតាំងតូច
upper-latin អក្សរឡាតាំងធំ
lower-roman អក្សរ​រ៉ូម៉ាំង​តូច
upper-roman អក្សរ​រ៉ូម៉ាំង​ធំ
ul {
    list-style-type: square;
}
ol {
    list-style-type: cambodian;
}
<ul>
    <li>កង់</li>
    <li>ម៉ូតូ</li>
    <li>ឡាន</li>
</ul>
<ol>
    <li>សុខភាព</li>
    <li>ចំណេះដឹង</li>
    <li>ស្មារតី</li>
</ol>

កំណត់​រូប​ជា​សញ្ញា​សម្គាល់​នៅ​ពី​មុខ​បញ្ជី

ដើម្បី​កំណត់​រូប​ជា​សញ្ញា​សម្គាល់​នៅ​ពី​មុខ​បញ្ជី ប្រើ list-style-image ។ តម្លៃ​របស់​វា​ជា​ទីតាំង​រូបភាព ។

ul {
    list-style-image: url("/static/img/16x16/blue-heart.png");
}
<ul>
    <li>កង់</li>
    <li>ម៉ូតូ</li>
    <li>ឡាន</li>
</ul>

ទីតាំង​សញ្ញា​សម្គាល់​នៅ​ពី​មុខ​បញ្ជី

ទីតាំង​សញ្ញា​សម្គាល់​នៅ​ពី​មុខ​បញ្ជី គឺ​កំណត់​ថា​តើ​សញ្ញាសម្គាល់​ទាំងនោះ​ត្រូវ​ស្ថិត​នៅ​ក្នុង​ឬ​ក្រៅ​ទិន្នន័យ​បញ្ជី ។ ដើម្បី​កំណត់​ទីតាំង​សញ្ញា​សម្គាល់​នៅ​ពី​មុខ​បញ្ជី គឺ​ប្រើ list-style-position ។

តម្លៃ​របស់​វា ៖

តម្លៃ អត្ថន័យ
inside សញ្ញា​សម្គាល់​ស្ថិត​នៅ​ក្នុង
outside សញ្ញា​សម្គាល​ស្ថិត​នៅ​ក្រៅ (តម្លៃ​ដើម)
<ul style="list-style-position: outside;">
    <li>កង់</li>
    <li>ម៉ូតូ</li>
    <li>ឡាន</li>
</ul>
<ul style="list-style-position: inside;">
    <li>កង់</li>
    <li>ម៉ូតូ</li>
    <li>ឡាន</li>
</ul>
ul li {
    background-color: pink;
}

រចនា​បញ្ជី​តាម​វិធី​ខ្លី

property ដែល​ទាក់ទង​នឹង​បញ្ជី អាច​សរសេរ​ក្នុង list-style តែ​មួយ​បាន ។ តម្លៃ​របស់​វា​មាន​ទម្រង់ ៖

list-style: សញ្ញា រូបភាព ទីតាំង;

កាល​ណា រូបភាព មាន​បញ្ហា នោះ​វា​នឹង​ដំណើរការ សញ្ញា ។

ul {
    list-style: square url("/static/img/16x16/blue-heart.png") inside;
}
<ul>
    <li>កង់</li>
    <li>ម៉ូតូ</li>
    <li>ឡាន</li>
</ul>
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត