# ការតុបតែងកម្មវិធីធនាគាររបស់អ្នកជាមួយ CSS ទំនើប

## ទិដ្ឋភាពគម្រោង

បម្លែងកម្មវិធីធនាគារដំណើរការរបស់អ្នកឱ្យក្លាយជាកម្មវិធីវែបមានរូបរាងទាក់ទាញ និងមានរូបរាងវិជ្ជាជីវៈដោយប្រើបច្ចេកវិទ្យា CSS ទំនើប។ អ្នកនឹងបង្កើតប្រព័ន្ធរចនាប័ទ្មឯកសណ្ឋានដែលបង្កើនបទពិសោធន៍អ្នកប្រើខណៈពេលរក្សាគោលការណ៍ចូលដំណើរការ និងរចនាបទឆ្លាតវៃឆ្លើយតប។

ការតែងនេះជាការតស៊ូឱ្យអ្នកអនុវត្តលំនាំរចនាវែបទំនើប អនុវត្តអត្តសញ្ញាណវិស្វកម្មមួយដែលមានភាពរួមបញ្ចូល និងបង្កើតចំណុចប្រទះដែលអ្នកប្រើនឹងងាយស្រួលរួមទាំងទាក់ទាញ។

## សេចក្តីណែនាំ

### ជំហានទី 1៖ រៀបចំស្ទីលស៊ីត

**បង្កើតមូលដ្ឋាន CSS របស់អ្នក៖**

1. **បង្កើត** ឯកសារថ្មីឈ្មោះ `styles.css` នៅក្នុងថតគម្រោងរបស់អ្នក
2. **ភ្ជាប់** ស្ទីលស៊ីតទៅក្នុងឯកសារ `index.html` របស់អ្នក៖
   ```html
   <link rel="stylesheet" href="styles.css">
   ```
3. **ចាប់ផ្តើម** ជាមួយការកំណត់ឲ្យ CSS ទទួលស្គាល់ថ្មី និងតម្លៃលំនឹងទំនើប៖
   ```css
   /* Modern CSS reset and base styles */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
     color: #333;
   }
   ```

### ជំហានទី 2៖ តម្រូវការប្រព័ន្ធរចនា

**អនុវត្តធាតុរចនាដ៏សំខាន់ទាំងនេះ៖**

#### ពណ៌
- **ពណ៌សំខាន់**៖ ជ្រើសរើសពណ៌វិជ្ជាជីវៈសម្រាប់ប៊ូតុង និងការរិះគន់
- **ពណ៌គូសមហេតុ**៖ ពណ៌បន្ថែមសម្រាប់លក្ខណៈផ្សេងៗ និងសកម្មភាពរង
- **ពណ៌អថេរ**៖ ពណ៌ស្មើរសម្រាប់អក្សរ ស្រទាប់ព្រំ និងផ្ទៃខាងក្រោយ
- **ពណ៌ជោគជ័យ/កំហុស**៖ ពណ៌បៃតងសម្រាប់ស្ថានភាពជោគជ័យ ពណ៌ក្រហមសម្រាប់កំហុស

#### ផ្នែកអក្សរ
- **លំដាប់ក្បាល**៖ ផ្សាញ់បំបែកច្បាស់ចន្លោះ H1, H2, និង H3
- **អត្ថបទខ្លី**៖ ទំហំអក្សរអាចអានបាន (យ៉ាងតិច 16px) និងកម្ពស់បន្ទាត់សមរម្យ
- **ស្លាកបែបបោះពុម្ព**៖ រចនាអក្សរតាមសមត្ថភាព និងច្បាស់លាស់

#### ទីតាំង និងចម្ងាយរវាងធាតុ
- **ចម្ងាយស្របគ្នា**៖ ប្រើវិមាត្រចម្ងាយ (8px, 16px, 24px, 32px)
- **ប្រព័ន្ធប្លង់ប្រអប់**៖ រៀបចំប្លង់សម្រាប់ទម្រង់ និងផ្នែកមាតិកា
- **រចនាបទឆ្លាតវៃឆ្លើយតប**៖ ប្រើវិធីសាស្រ្តមុនសម្រាប់ឧបករណ៍ចល័តជាមួយចំណុចលំហូរ

### ជំហានទី 3៖ ការតុបតែងធាតុផ្សំពិសេស

**តុបតែងធាតុផ្សព្វផ្សាយទាំងនេះ៖**

#### ទម្រង់
- **ប្រអប់បញ្ចូល**៖ ស្រទាប់ព្រំវិជ្ជាជីវៈ, ស្ថានភាពផ្តោត និងរចនាអ្នកបញ្ជាក់ត្រឹមត្រូវ
- **ប៊ូតុង**៖ ប្រតិកម្មពេលកាក់, ស្ថានភាពពុំដំណើរការ, និងសញ្ញាតម្លើង
- **ស្លាក**៖ ទីតាំងច្បាស់និងសញ្ញាបញ្ជាក់វាលចាំបាច់
- **សារ​កំហុស**៖ រចនាកំហុសដែលមើលឃើញបាន និងសារជួយបង្ហាញ

#### ការរុករក
- **ក្បាល**៖ តំបន់រុករកស្អាត និងមានម៉ាកពាណិជ្ជកម្ម
- **តំណភ្ជាប់**៖ ស្ថានភាពកាក់ច្បាស់ និងសញ្ញាសកម្ម
- **រូបតំណាង/ចំណងជើង**៖ ធាតុម៉ាកពាណិជ្ជកម្មដ៏រឹងមាំ

#### ផ្នែកមាតិកា
- **ផ្នែក**៖ ការបំបែកជាថ្នាក់ទាក់ទាញរវាងផ្នែកផ្សេងៗ
- **កាត**៖ ប្រសិនបើប្រើប្លង់កាត រួមបញ្ចូលរន្ធញ័រនិងស្រទាប់ព្រំ
- **ផ្ទៃខាងក្រោយ**៖ ការប្រើប្រាស់គន្លងពណ៌សនិងផ្ទៃខាងក្រោយស្រទន់

### ជំហានទី 4៖ លក្ខណៈពិសេសបន្ថែម (ជាជម្រើស)

**ពិចារណាអនុវត្តលក្ខណៈពិសេសដ៏កម្រិតខ្ពស់ទាំងនេះ៖**
- **របៀបងងឹត**៖ ប្ដូររវាងរបៀបស្រាលនិងងងឹត
- **អនុវត្តន៍ចលនា**៖ ប្រតិកម្មស្រទន់និងចលនាតូចៗ
- **ស្ថានភាពផ្ទុក**៖ មតិយោបល់វីស្វកម្មក្នុងអំឡុងពេលបញ្ជាទម្រង់
- **រូបភាពឆ្លើយតប**៖ រូបភាពបានបង្កើតគ្រប់គ្រាន់សម្រាប់ទំហំអេក្រង់ខុសគ្នា

## ឧទាហរណ៍ការបង្ហាញរចនា

**លក្ខណៈលេចធ្លោនៃកម្មវិធីធនាគារទំនើប៖**
- **រចនាស្អាត និងទំនេរទីតាំងខាងស** ជាមួយដំណើរការទូលំទូលាយ
- **ម៉ាស៊ីនពណ៌វិជ្ជាជីវៈ** (ពណ៌ខៀវ បៃតង ឬពណ៌ស្មើរស្ទាត់)
- **លំដាប់បង្ហាញច្បាស់** ជាមួយប៊ូតុងហៅដំណើរការដែលច្បាស់លាស់
- **អត្រាការប្រៀបធៀបច្បាស់លាស់** ដែលគោរពតាមគោលការណ៍ WCAG
- **ប្លង់ឆ្លាតវៃឆ្លើយតបនៅលើទូរស័ព្ទ** ដែលមានប្រសិទ្ធភាពលើឧបករណ៍ទាំងអស់

## តម្រូវការបច្ចេកទេស

### ការរៀបចំ CSS
```css
/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */
```

### តម្រូវការចូលដំណើរការ
- **ការប្រៀបធៀបពណ៌**៖ បញ្ជាក់អត្រាអតិភាពតែលើស 4.5:1 សម្រាប់អត្ថបទធម្មតា
- **សញ្ញាផ្តោត**៖ សញ្ញាផ្តោតដែលមើលឃើញសម្រាប់ការរុករកជាមួយក្តារចុច
- **ស្លាកទម្រង់**៖ ជា​រួមបញ្ចូលដោយសមស្របជាមួយបញ្ចូល
- **រចនាបទឆ្លាតវៃឆ្លើយតប**៖ អាចប្រើបានលើអេក្រង់ពី 320px ដល់ 1920px

## វិធានការវាយតម្លៃ

| ការវាស់បណ្តុះ | ល្អឧត្តម (A) | ល្អប្រសើរ (B) | កំពុងអភិវឌ្ឍ (C) | ត្រូវការកែប្រែ (F) |
|----------|---------------|----------------|----------------|----------------------|
| **ប្រព័ន្ធរចនា** | អនុវត្តប្រព័ន្ធរចនាដ៏ទូលំទូលាយជាមួយពណ៌ សតិវិជ្ជា និងចម្ងាយស្តេីរត្រួតពិនិត្យ | ប្រើស្ទីលមួយដែលមានលំនាំច្បាស់ និងលំដាប់វិស្វករ | រៀបចំស្ទីលមូលដ្ឋានជាមួយខ្សែប្លង់មិនជាប់គ្នា ឬអវត្តមានធាតុរចនា | ស្ទីលតិច និងមានជម្រើសរចនាផ្សេងគ្នា មិនសមរម្យ |
| **បទពិសោធន៍អ្នកប្រើ** | បង្កើតចំណុចប្រទះអាជីពដែលងាយយល់ និងទាក់ទាញ | ផ្ដល់បទពិសោធន៍ល្អជាមួយការរុករកច្បាស់ និងមាតិកាអាចអានបាន | ប្រើបានមូលដ្ឋាន ជាមួយកំណែទម្រង់ត្រូវការកែលម្អ | បទពិសោធន៍អាក្រក់ ងាយស្រួលត្រូវរុករក ឬអានបាន |
| **ការអនុវត្តបច្ចេកទេស** | ប្រើបច្ចេកវិទ្យា CSS ទំនើប ជាស្ថាបត្យកម្មកូដបានល្អ និងអនុវត្តបានត្រឹមត្រូវ | អនុវត្ត CSS បានល្អជាមួយរៀបចំបានល្អ និងបច្ចេកវិទ្យាសមរម្យ | CSS ដំណើរការបានត្រឹមត្រូវ ប៉ុន្តែខ្វះរៀបចំឬបច្ចេកវិទ្យាទំនើប | អនុវត្ត CSS មិនបានល្អ មានបញ្ហាបច្ចេកទេស ឬមិនគាំទ្រតាមកម្មវិធីរុករក |
| **រចនាបទឆ្លាតវៃឆ្លើយតប** | រចនាបទឆ្លាតវៃឆ្លើយតបពេញលេញ ធ្វើការ​បានល្អលើទំហំឧបករណ៍ទាំងអស់ | មានការឆ្លើយតបល្អជាមួយបញ្ហាតិចតួចលើខ្លះទំហំអេក្រង់ | អនុវត្តឆ្លើយតបមូលដ្ឋាន ជាមួយបញ្ហាប្លង់ខ្លះ | មិនឆ្លើយតប ឬមានបញ្ហារុករកកាន់តែដាច់ខាតលើទូរស័ព្ទ |
| **ចូលដំណើរការ** | គោរពតាមសេចក្ដីណែនាំ WCAG ជាមួយការរុករកក្តារចុចល្អ និងគាំទ្រអានអេក្រង់ | អនុវត្តការចូលដំណើរការល្អ ជាមួយការប្រៀបធៀប និងសញ្ញាផ្តោតត្រឹមត្រូវ | ពិចារណាអំពីការចូលដំណើរការមូលដ្ឋាន ជាមួយធាតុខ្វះ | ចូលដំណើរការមិនល្អ ពិបាកសម្រាប់អ្នកមានពិការភាព |

## សេចក្តីណែនាំដាក់ស្នើ

**រួមបញ្ចូលក្នុងការដាក់ស្នើរបស់អ្នក៖**
- **styles.css**៖ ស្ទីលស៊ីតរបស់អ្នកដល់ពេញលេញ
- **HTML បានកែប្រែ**៖ ការផ្លាស់ប្តូរអ្វីៗក្នុង HTML របស់អ្នក
- **រូបថតអេក្រង់**៖ រូបភាពបង្ហាញរចនារបស់អ្នកលើកុំព្យូទ័រ និងទូរស័ព្ទ
- **README**៖ សេចក្តីពិពណ៌នាខ្លីអំពីជម្រើសរចនារបស់អ្នក និងម៉ាស៊ីនពណ៌

**ពិន្ទុបូសសម្រាប់៖**
- **គុណលក្ខណៈ CSS** សម្រាប់ការរក្សាទុកសមត្ថភាពកែប្រែ
- **លក្ខណៈពិសេស CSS ខ្ពស់** ដូចជា Grid, Flexbox, ឬចលនាផ្ទៃ CSS
- **ការពិចារណាពិសេស** ដូចជាការបង្កើត CSS បែបប្រសើរនឹងទំហំឯកសារតិចបំផុត
- **ការធ្វើតេស្តរវាងកម្មវិធីរុករក** ដើម្បីធានាការគាំទ្រចំពោះកម្មវិធីរុករកខុសៗគ្នា

> 💡 **ទំនុកចិត្តឯកទេស**៖ ចាប់ផ្តើមជាមួយរចនាបទទូរស័ព្ទ ជាមុនបំផុត បន្ទាប់មកបង្កើនសម្រាប់អេក្រង់ធំ។ វិធីសាស្រ្តមុនទូរស័ព្ទនេះធានាថាកម្មវិធីរបស់អ្នកដំណើរការល្អលើឧបករណ៍ទាំងអស់ និងទទួលបានការអភិវឌ្ឍវែបទំនើបល្អបំផុត។

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ការបដិសេធ**៖  
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលយើងខិតខំផ្ដល់ភាពត្រឹមត្រូវ សូមកត់សម្គាល់ថា ការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមដែលមានភាសាទីតាំងដើមគួរត្រូវបានរក្សាទុកជាមូលដ្ឋានដែលមានសិទ្ធិអនុញ្ញាត។ សម្រាប់ព័ត៌មានសំខាន់ៗ ការបកប្រែដោយមនុស្សជំនាញត្រូវបានផ្ដល់អនុសាសន៍។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការយល់ក្នុងចិត្តខុសពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។
<!-- CO-OP TRANSLATOR DISCLAIMER END -->