មេរៀន៣ គ្រប់គ្រងលើអត្ថបទ (Text property)

នៅក្នុងមេរៀនទី៣នេះលោកអ្នកនឹងបានសិក្សារបៀបប្រើប្រាស់ property ជាច្រើនរបស់ CSS ដែលគ្រប់គ្រងចំពោះអត្ថបទ( Text ) នៅក្នុង website របស់លោក អ្នក។ property ដែលនឹងលើក យកមកបកស្រាយមានដូចជា៖
១. text-align
២. text-decoration
៣. text-transform
៤. text-indent
៥. word-spacing
៦. letter-spacing
៧. Line-height
៨. Direction
១. text-align
ដើម្បីតំរឹមអត្ថបទ(text)នៅក្នុង web page របស់លោកអ្នក ទៅតាម ទំរង់រចនា​ តាមឆ្វេង តាមស្តាំ កណ្តាល ឬតាមឆ្វេង និងស្តាំ(ទាំង សង ខាង) CSS បានផ្តល់ប្រើ property មួយឈ្មោះថា text-align ដែល មាន តំលៃ(value) ដូចជា៖
​          ១- left : សម្រាប់តំរឹមខាងឆ្វេង
២- right: សម្រាប់តំរឹមខាងស្តាំ
​          ៣- center: សម្រាប់តំរឹមកណ្តាល
​៤- justify : សម្រាប់តំរឹមទាំងសងខាង(ទាំងឆ្វេងនិងស្តាំ)
Syntax
Selector {text-align: value ;}
លោកអ្នកនឹងអាចយល់ពីការប្រើប្រាស់ text-align ដូចបង្ហាញ តាម ឧទាហរណ៏កូដ ២.៧ ដូចរូបភាពខាងក្រោម៖
កូដ២.៧ បង្ហាញពីការប្រើប្រាស់ text-align ដើម្បីរចនាអោយអត្ថបទ
២. text-decoration
​        ការប្រើប្រាស់ text-decoration គឺមានលក្ខណៈដាក់បន្ទាត់ អោយ អត្ថបទលោកអ្នក​ ដូចជាដាក់បន្ទាត់ខាងលើ ឆូតកណ្តាល​ និង ខាង ក្រោម។ វាមានតំលៃ(value) ៤​ ដូចខាងក្រោម៖
១- olverline: សម្រាប់ដាក់បន្ទាត់ខាងលើ
​            ២- line-through: សម្រាប់ដាក់បន្ទាត់ឆូតកណ្តាល
​            ៣- underline: សម្រាប់ដាក់បន្ទាត់ខាងក្រោម
​            ៤- blink: សម្រាប់ធ្វើអោយអក្សរឃើញបាត់ៗ
៥- inherit:សម្រាប់ធ្វើអោយអក្សរមានលក្ខណៈដូច​ទៅ​ tag​មេ(parent element)
៦- none: មិនកំណត់លក្ខណៈអោយអក្សរ
*សំគាល់: blink មិនតំណើរជាមួយ IE, Chrome, Safari។
 Syntax
Selector {text-textdecoration: value ;}
ដើម្បីអោយលោកអ្នកកាន់តែយល់ច្បាស់ ឧទាហរណកូដ២.៨ និងបង្ហាញពីការប្រើ ប្រាស់ “text-decoration” ដូចរូបភាពខាងក្រោម៖
កូដ២.៨ បង្ហាញពីការប្រើប្រាស់ text-decoration ដើម្បីរចនាអោយអត្ថបទ
៣. text-transform

​        សម្រាប់កំណត់អោយអក្សររបស់អត្ថបទមានលក្ខណៈ អក្សរធំទាំង អស់(upper) អក្សរតូច ទាំងអស់(lower) ឬ ធំលើតួអក្សរដើមតំបូង (capitalize) ដោយអាស្រ័យទៅលើ តំលៃ(vaue) របស់វាដូច ខាងក្រោម៖

​១.uppercase សម្រាប់ធ្វើអោយតួអក្សរធំទាំងអស់
២.lowercase សម្រាប់ធ្វើអោយតួអក្សរតូចទាំងអស់
​៣.capitilize សម្រាប់ធ្វើអោយតួអក្សរតំបូងរបស់ពាក្យទៅជាអក្សរធំ
៤.inherit : ទាញយកលក្ខណៈដូចទៅនឹងលក្ខណៈរបស់ tagមេ(parent element)
៥.none: មិនមានឥទ្ធិពល
Syntax
Selector {text-transform: value ;}
ដើម្បីយល់កាន់តែច្បាស់ កូត២.៩ខាងក្រោមនេះជាឧទាហរណ៏ពីការប្រើប្រាស text-tranform៖
កូដ២.៩បង្ហាញពីការប្រើប្រាស់ text-transform ដើម្បីរចនាអោយអត្ថបទ
រូបភាព១៤បង្ហាញពី លទ្ធផលនៃកូដ ២.៩ ខាងលើ
text-indent សម្រាប់កំនត់ប្រវែងនៃការដកឃ្លាដើមបន្ទាត់នៃអត្ថបទ។ តំលៃ(value) អាចគិតតាមប្រភេទរង្វាស់ខ្នាតដូចជាៈ​px, pt, em, cm, % ។
សំគាល់:  1cm= 37.79px, 28.34pt, 2.37em។
Syntax
Selector {text-indent: value ;}
កូត៣.០ខាងក្រោមនេះបង្ហាញពីការប្រើ text-indent ដែលសរសេរនៅក្នុង HTML file ឈ្មោះថា​ “text-indet.html”។
កូដ៣.០បង្ហាញពីការប្រើប្រាស់ text-indent ដើម្បីកំណត់ដកឃ្លាបន្ទាត់
រូបភាព១៥បង្ហាញពី លទ្ធផលនៃកូដ ៣.០
៥. word-spacing សម្រាប់កំណត់គំលាតពីពាក្យមួយទៅពាក្យមួយទៀតនៅក្នុងអត្ថបទទៅតាម ប្រវែងនៃតំលៃ(value)របស់វា ដោយអាចកំនត់តាមប្រភេទរង្វាស់ខ្នាតដូចជា px, pt, em, cm, %។
​            សំគាល់:  1cm= 37.79px, 28.34pt, 2.37em។
Syntax
Selector {word-spacing: value ;}
ឧទាហរណ៏ថាលោកអ្នកមានឃ្លាមួយថា “Studying is never old for years.” ដោយកំណត់ ការដក់ឃ្លាមានប្រវែងដូចខាងក្រោម៖
​            ក) តំលៃ (value) ស្មើ 10px;
ខ) តំលៃ (value) ស្មើ -10px;
យោងតាមលក្ខ័ណទាំងពីរលោកអ្នកអាចសរសេរកូដ៣.១ដូចរូបភាពខាងក្រោម៖
កូដ៣.១បង្ហាញពីការប្រើប្រាស់ word-spacing ដើម្បីកំណត់ដកឃ្លាពាក្យ និងពាក្យ
៦.letter-spacing
​          letter-spacing ប្រើសម្រាប់កំណត់គំលាតអក្សរមួយទៅអក្សរមួយតាមតំលៃ​(value) របស់វា​ដោយមានប្រភេទរង្វាស់ខ្នាតដូចជាៈ px, pt, em, cm, %។
សំគាល់:  1cm= 37.79px, 28.34pt, 2.37em។

កូដ៣.២បង្ហាញពីការប្រើប្រាស់ letter-spacing ដើម្បីកំណត់ដកឃ្លាពីអក្សរ និងអក្សរ

Syntax
Selector {letter-spacing: value ;}
ដើម្បីងាយស្រួលយល់ពីការប្រើប្រាស់ letter-spacing លោកអ្នក អាចពិនិត្យលើកូត ៣.២ ដូចខាងក្រោម៖

កូដ៣.២បង្ហាញពីការប្រើប្រាស់ letter-spacing ដើម្បីកំណត់ ដកឃ្លា ពីអក្សរ និងអក្សរ
រូបភាព១៧ បង្ហាញពី លទ្ធផលនៃកូដ ៣.២
៧. Line-height
Line Height  ប្រើសម្រាប់កំណត់គំលាត់ចន្លោះពីចុះបន្ទាត់មួយទៅចុះបន្ទាត់មួយ ទៀតរបស់អត្ថបទ ដែលតំលៃ(value) របស់វាគិតជាចំនួនបន្ទាត់ ឬជាតំលៃដែលមាន ខ្នាតដូចជា px,pt,em, % ជាដើម។
Syntax
Selector {line-height: value ;}
ដ៣.៣ខាងក្រោមបានបង្ហាញពីការប្រើ line-height property ដែលមាន class ពីរគឺ Class ទីមួយឈ្មោះ​ .line បានកំណត់គំលាត់ ចុះបន្ទាត់ទៅមួយចំនួន៣ដង ហើយ class ទីពីរ ឈ្មោះថា​ customsize. ដោយកំណត់គំលាត់ការចុះបន្ទាត់មួយទៅមួយជា px មានតំលៃ​​25px។
កូដ៣.៣បង្ហាញពីការប្រើប្រាស់ line-height ដើម្បីកំណត់គំលាតចុះបន្ទាត់
រូបភាព១៨ បង្ហាញពី លទ្ធផលនៃកូដ ៣.៣
Direction ប្រើសម្រាប់កំណត់ទីតាំងសរសេរអត្ថបទដោយចេញពីខាងឆ្វេង ឬស្តាំ វាមានតំលៃពីរដូចជា៖
១.​ltr សរសេរអត្ថបទចេញពីឆ្វេង
២.rtl សរសេរអត្ថបទចេញពីស្តាំ
Syntax
Selector {direction: value ;}
កូដ៣.៤ខាងក្រោមបានបង្ហាញពីការប្រើ direction ដែលមាន class ចំនួនពីរ​គឺ .ltr, .rtl។