បញ្ជី

ប្រភេទ​បញ្ជី​នៅ​ក្នុង HTML

មាន​បញ្ជី​ពីរ​ប្រភេទ​នៅ​ក្នុង HTML:

• Unordered List (ul) - បញ្ជី​គ្មាន​លំដាប់​លំដោយ ប្រើ​សញ្ញា​សម្គាល់ (bullet)
• Ordered List (ol) - បញ្ជី​មាន​លំដាប់​លំដោយ ប្រើ​លេខ​ឬ​អក្សរ

រចនា​សញ្ញា​សម្គាល់​នៅ​ពី​មុខ​បញ្ជី (List Style Type)

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

សំរាប់​បញ្ជី​គ្មាន​លំដាប់​លំដោយ (Unordered List)

• disc - ចំណុច​ពេញ (លំនាំដើម)
• circle - រង្វង់​ទទេ
• square - ការេ
• none - គ្មាន​សញ្ញា​សម្គាល់

សំរាប់​បញ្ជី​មាន​លំដាប់​លំដោយ (Ordered List)

• decimal - លេខ​ធម្មតា 1, 2, 3 (លំនាំដើម)
• decimal-leading-zero - លេខ​ផ្តើម​ដោយ​លេខសូន្យ 01, 02, 03
• cambodian - លេខ​ខ្មែរ ១, ២, ៣
• lower-alpha / lower-latin - អក្សរ​ឡាតាំង​តូច a, b, c
• upper-alpha / upper-latin - អក្សរ​ឡាតាំង​ធំ A, B, C
• lower-roman - អក្សរ​រ៉ូម៉ាំង​តូច i, ii, iii
• upper-roman - អក្សរ​រ៉ូម៉ាំង​ធំ I, II, III
• lower-greek - អក្សរ​ក្រិក​តូច α, β, γ

កំណត់​រូប​ជា​សញ្ញា​សម្គាល់ (List Style Image)

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

ក្នុង​ករណី​ដែល​រូបភាព​មិន​អាច​ផ្ទុក​បាន browser នឹង​ប្រើ​តម្លៃ​របស់ list-style-type ជំនួស។

ការប្រើ​រូបភាព​ផ្ទាល់ខ្លួន (Custom Icons)

វិធី​ល្អ​ជាង​គឺ​ប្រើ ::before pseudo-element ជាមួយ background-image:

ទីតាំង​សញ្ញា​សម្គាល់ (List Style Position)

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

• outside - សញ្ញា​សម្គាល់​នៅ​ខាង​ក្រៅ (លំនាំដើម)
• inside - សញ្ញា​សម្គាល់​នៅ​ខាង​ក្នុង

ប្រើ outside សំរាប់​ការ​រចនា​ធម្មតា ហើយ inside នៅ​ពេល​ដែល​ចង់​ឲ្យ​សញ្ញា​សម្គាល់​ជា​ផ្នែក​នៃ​អត្ថបទ។

រចនា​បញ្ជី​តាម​វិធី​ខ្លី (List Style Shorthand)

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

រចនាសម្ព័ន្ធ (Syntax)

list-style: [type] [position] [image];

លុប​សញ្ញា​សម្គាល់​បញ្ជី (Remove List Markers)

ដើម្បី​លុប​សញ្ញា​សម្គាល់​ទាំង​ស្រុង ប្រើ list-style: none;:

នេះ​ប្រើ​ច្រើន​សំរាប់​បង្កើត​ navigation menu និង​បញ្ជី​ដែល​រចនា​ផ្ទាល់​ខ្លួន។

បញ្ជី​ដែល​មាន​ច្រើន​កម្រិត (Nested Lists)

អ្នក​អាច​កំណត់​រចនាបទ​ផ្សេងៗ​គ្នា​សំរាប់​បញ្ជី​នីមួយៗ​នៅ​ក្នុង​បញ្ជី​ដែល​មាន​ច្រើន​កម្រិត:

ការ​កំណត់​លេខ​ចាប់​ផ្តើម (Start Attribute)

សំរាប់​បញ្ជី​មាន​លំដាប់​លំដោយ អ្នក​អាច​កំណត់​លេខ​ចាប់​ផ្តើម​ដោយ​ប្រើ start attribute នៅ HTML ឬ counter-reset នៅ CSS:

ប្រើ HTML Attribute

ប្រើ CSS Counters

ឧទាហរណ៍​ជាក់ស្តែង (Practical Examples)

1. បញ្ជី​ទំនើប​ដែល​មាន​រចនាបទ (Styled Modern List)

2. បញ្ជី​ជំហាន​ដែល​មាន​លេខ (Step-by-Step List)

3. Navigation Menu (បញ្ជី​អនុសញ្ញា)

4. បញ្ជី​ពិន្ទុ (Feature List with Icons)

ការ​អនុវត្ត​ល្អ​បំផុត (Best Practices)