អត្ថបទ
ពណ៌អត្ថបទ
ដើម្បីកំណត់ពណ៌អក្សរ គឺប្រើ color property ។ តម្លៃរបស់វាគឺជាពណ៌ ។
អ្នកអាចប្រើពណ៌ជា hex, rgb, rgba, hsl, hsla ឬឈ្មោះពណ៌ ។
ការតម្រៀបអត្ថបទ
ដើម្បីតម្រៀបអត្ថបទ គឺប្រើ text-align property ។ តម្លៃរបស់វាមាន ៖
left- តម្រៀបទៅឆ្វេង (លំនាំដើម)right- តម្រៀបទៅស្ដាំcenter- តម្រៀបកណ្ដាលjustify- តម្រៀបពេញទាំង២ជ្រុង
text-align-last
text-align-last property គឺសំរាប់តម្រៀបបន្ទាត់ចុងក្រោយនៃអត្ថបទ ។
លម្អអត្ថបទ (Text Decoration)
ដើម្បីលម្អអត្ថបទ គឺប្រើ text-decoration property ។ តម្លៃរបស់វាមាន ៖
none- គ្មានការលម្អunderline- បន្ទាត់ពីក្រោមoverline- បន្ទាត់ពីលើline-through- បន្ទាត់កាត់កណ្ដាល
Text Decoration Style
អ្នកអាចកំណត់ស្ទាយបន្ទាត់លម្អ ៖
Text Decoration Color
បំប្លែងអត្ថបទ (Text Transform)
បំប្លែងអត្ថបទភាសាអង់គ្លេស ប្លែងទៅជាអក្សរធំ តូច ឬផ្សេងទៀត ។ ដើម្បីបំប្លែងអត្ថបទ គឺប្រើ text-transform property ។
uppercase- អក្សរធំទាំងអស់lowercase- អក្សរតូចទាំងអស់capitalize- អក្សរធំពាក្យដំបូងnone- លំនាំដើម
Text Shadow (ស្រមោលអត្ថបទ)
ដើម្បីបង្កើតស្រមោលឲ្យអត្ថបទ គឺប្រើ text-shadow property ។
ទម្រង់ ៖ text-shadow: [offset-x] [offset-y] [blur-radius] [color];
Text Shadow Effects
គម្លាតអត្ថបទ
| Property | បម្រើបម្រាស់ |
|---|---|
| text-indent | កំណត់ប្រវែងគម្លាតនៃការចូលបន្ទាត់ |
| letter-spacing | កំណត់ប្រវែងគម្លាតរវាងតួអក្សរនីមួយៗ |
| word-spacing | កំណត់ប្រវែងគម្លាតពាក្យនីមួយៗ |
| line-height | កំណត់ប្រវែងគម្លាតបន្ទាត់នីមួយៗ |
Text Indent
កំណត់គម្លាតចូលបន្ទាត់ដំបូង ។
Letter Spacing
កំណត់គម្លាតរវាងអក្សរនីមួយៗ ។
Word Spacing
កំណត់គម្លាតរវាងពាក្យនីមួយៗ ។
Line Height
កំណត់កម្ពស់បន្ទាត់ ឬគម្លាតរវាងបន្ទាត់ ។ ជាទូទៅ គេប្រើ 1.5 ឬ 1.6 សំរាប់ការអានងាយ ។
property មួយចំនួនខាងលើបង្ហាញមិនសូវប្រក្រតីទេ ក្នុងករណីអត្ថបទជាភាសាខ្មែរ ។
White Space
white-space property កំណត់របៀបដែលអត្ថបទចុះបន្ទាត់ និងគម្លាតស ។
normal- ចុះបន្ទាត់ស្វ័យប្រវត្តិ (លំនាំដើម)nowrap- មិនចុះបន្ទាត់ស្វ័យប្រវត្តិpre- រក្សាគម្លាត និងការចុះបន្ទាត់pre-wrap- រក្សាគម្លាត ប៉ុន្តែចុះបន្ទាត់ស្វ័យប្រវត្តិpre-line- ចុះបន្ទាត់ស្វ័យប្រវត្តិ រក្សាការចុះបន្ទាត់
Word Break & Word Wrap
កំណត់របៀបកាត់ពាក្យពេលដល់ចុងបន្ទាត់ ។
word-break
word-wrap / overflow-wrap
Text Overflow
text-overflow property កំណត់លក្ខណៈនៅពេលដែលអត្ថបទសរសេរលើសចេញពីប្រអប់ ។
clip- កាត់អត្ថបទ (លំនាំដើម)ellipsis- បង្ហាញ ... នៅចុង
Vertical Align
vertical-align property កំណត់ការតម្រៀបបញ្ឈរនៃ inline ឬ inline-block elements ។
baseline- តម្រៀបតាមបន្ទាត់មូលដ្ឋាន (លំនាំដើម)top- តម្រៀបទៅខាងលើmiddle- តម្រៀបកណ្ដាលbottom- តម្រៀបទៅខាងក្រោមsub- ដូច subscriptsuper- ដូច superscript
ករណីប្រើប្រាស់ជាក់ស្ដែង
1. Heading Styles
2. Quote Block
3. Badge & Tag
4. Truncated Text
គន្លឹះសំរាប់ការប្រើអត្ថបទ
- ប្រើ
line-height: 1.5-1.6សំរាប់ការអានងាយស្រួល - ប្រើ
letter-spacingសំរាប់ការបង្កើនភាពច្បាស់លាស់នៃចំណងជើង - ប្រើ
text-overflow: ellipsisសំរាប់អត្ថបទវែងក្នុងកាត - ប្រើ
text-shadowដោយប្រុងប្រយ័ត្ន ដើម្បីមិនឲ្យពិបាកអាន - ចៀសវាងការប្រើ
text-transform: uppercaseលើអត្ថបទវែង - ប្រើ
word-wrap: break-wordសំរាប់ទប់ស្កាត់ពាក្យវែងពេក