នៅពេលដែលយើងចង់បង្កើតទ្រង់ទ្រាយនៃទំព័រណាមួយ យើងចាំបាច់ត្រូវប្រើប្រាស់ភាសា HTML ដែលនៅក្នុងនោះមាន element មួយចំនួន ដែលអាចត្រូវយកទៅប្រើសម្រាប់បង្កើតផ្នែកផ្សេងៗនៃទំព័រ។ ក៏ប៉ុន្តែ ភាសា HTML នេះមិនអនុញ្ញាតឲ្យយើងអាចរចនាទំព័រ ឲ្យទៅជាលក្ខណៈណាមួយ ដែលយើងចង់បាន បានឡើយ។ ហើយដើម្បីធ្វើការរចនាទំព័រផ្សេងៗ យើងចាំបាច់ត្រូវតែប្រើប្រាស់ភាសាមួយទៀត ដែលជាភាសាប្រើសម្រាប់រចនាទំព័រ។
សេចក្តីណែនាំអំពី CSS
CSS គឺជាភាសាដែលរៀបរាប់អំពីរចនាបថនៃឯកសារ HTML មួយ។ CSS ដែលជាអក្សរកាត់មកពីពាក្យថា Cascading Style Sheets។ CSS បានរៀបរាប់អំពីរបៀបដែលធាតុរបស់ HTML ត្រូវបានបង្ហាញនៅលើអេក្រង់, ក្រដាស, ឬនៅក្នុងប្រព័ន្ធផ្សព្វផ្សាយផ្សេងទៀត។ CSS បានរក្សាទុកការងារជាច្រើន។ វាអាចគ្រប់គ្រងប្លង់នៃទំព័របណ្ដាញទាំងអស់ជាច្រើននៅពេលតែមួយ។
ហេតុអ្វីបានជាប្រើ CSS?
CSS ត្រូវបានប្រើដើម្បីកំណត់រចនាបថសម្រាប់ទំព័របណ្ដាញរបស់អ្នករួមទាំងការរចនាប្លង់និងការប្រែប្រួលក្នុងការបង្ហាញសម្រាប់ឧបករណ៍ផ្សេងគ្នានិងទំហំអេក្រង់។
ឧទាហរណ៍ បើសិនជាយើងចង់ឲ្យអក្សរនៅក្នុងកថាខ័ណ្ឌណាមួយ មានលក្ខណៈជាអក្សរឆ្លាក់ និងមានពណ៌ក្រហម យើងត្រូវធ្វើដូចខាងក្រោមនេះ៖
នៅបន្ទាត់ទី 7 ដែលសរសេរថា style=”font-family:Khmer OS Muol;color:red; គឺជាការយក attribute ឈ្មោះ style មកប្រើដើម្បីកែឃ្លានៅក្នុង element <p>…</p> ឲ្យទៅជាអក្សរឆ្លាក់ ដោយប្រើប្រាស់ពុម្ពអក្សរ Khmer OS Muol និងកែពណ៌របស់ឃ្លានោះ ឲ្យទៅជាពណ៌ក្រហមវិញ។ នោះយើងនឹងបានលទ្ធផលដូចខាងក្រោម៖
ដូចនេះយើងឃើញថា ដើម្បីរចនា element content នៅក្នុង element ណាមួយ យើងចាំបាច់ត្រូវប្រើប្រាស់ attribute ឈ្មោះ style នៅក្នុង element នោះ ដោយផ្តល់តម្លៃសម្រាប់ attribute នោះ នូវលក្ខណៈទាំងឡាយណាដែលយើងចង់បាន។
ក៏ប៉ុន្តែការធ្វើរបៀបនេះ គឺសម្រាប់តែ element <p>…</p> ដែលនៅក្នុងនោះមានឃ្លាថា «សូមស្វាគមន៍មកកាន់ Techfree!» តែប៉ុណ្ណោះ គឺថាយើងមិនអាចកែប្រែលក្ខណៈរបស់ element <p>…</p> នៅកន្លែងផ្សេងទៀតបានឡើយ។ ហើយបើយើងចង់ឲ្យអក្សរនៅក្នុង element <p>…</p> ដទៃទៀត ត្រូវកែប្រែដែរនោះ យើងត្រូវធ្វើដូចខាងក្រោមនេះ៖
នៅបន្ទាត់ 6 ការសរសេរថា p{font-family:Khmer OS Muol;color:blue;} គឺជាការប្រើប្រាស់ភាសា CSS នៅក្នុង element <style>…</style> ដើម្បីធ្វើឲ្យតួអក្សរដែលមានក្នុងគ្រប់ element <p>…</p> ទាំងឡាយ មានលក្ខណៈជាអក្សរឆ្លាក់ដែលជាអក្សរ Khmer OS Muol និងមានពណ៌ក្រហម។នោះយើងនឹងបានលទ្ធផលដូចខាងក្រោម៖
ដូចនេះយើងសង្កេតឃើញថា ដើម្បីរចនា element content នៅក្នុងគ្រប់ element ដែលមានប្រភេទដូចគ្នា យើងចាំបាច់ត្រូវតែប្រើប្រាស់ភាសា CSS នៅក្នុង element <style>…</style> ដែលខ្លួនវាផ្ទាល់អាចត្រូវនៅក្នុង element <head>…</head> ។
ជាទូទៅ ភាសា CSS មានទម្រង់ដូចខាងក្រោមនេះ៖
ផ្នែកនៅខាងដើម ដែលមានអក្សរ p នៅក្នុងនោះ ជាទូទៅគឺជាឈ្មោះរបស់ element ដែលត្រូវយកមកកែប្រែ។ ហើយផ្នែកដែលមានឈ្មោះរបស់ element នៅក្នុងនោះ ត្រូវហៅថា selector ។ ផ្នែកបន្ទាប់មកទៀត គឺជាសញ្ញ { } ដែលនៅក្នុងនោះ មានឈ្មោះមួយចំនួន ភ្ជាប់គ្នាពីរៗ ដោយសញ្ញចុចពីរ (:) ។ ឈ្មោះដែលជាប់គ្នាពីរៗនោះ ត្រូវហៅថា declaration ដែលនៅក្នុងនោះ ឈ្មោះនៅខាងឆ្វេង ត្រូវហៅថា property និងឈ្មោះនៅខាងស្តាំ ត្រូវហៅថា value ។ដើម្បីជួយសម្រួលដល់ការអាន យើងអាចសរសេរភាសា CSS តាមបែបម៉្យាងទៀត ដូចខាងក្រោមនេះ៖
ម៉្យាងទៀត នៅក្នុងភាសា CSS បើយើងចង់កំណត់ការពន្យល់ផ្សេងៗ ស្តីពីការប្រើប្រាស់ declaration យើងត្រូវសរសេរកំណត់ការពន្យល់របស់យើងនៅក្នុងសញ្ញា /* */ នេះ។ សូមមើលឧទាហរណ៍ខាងក្រោម៖
នៅបន្ទាត់ទី 7 និងទី 9 គឺការសរសេរការកំណត់ពន្យល់ដែលយើងចង់សរសេរ។