រចនាប័ទ្មនិងប្លង់ដែលមើលឃើញរបស់វេបសាយមួយត្រូវបានសរសេរដោយ CSS ឬសន្លឹករចនាប័ទ្មល្បាក់។ ទាំងនេះគឺជាឯកសារដែលបង្កើតរូបមន្ត HTML របស់ទំព័របណ្តាញ, ផ្តល់នូវកម្មវិធីរុករកបណ្ដាញជាមួយសេចក្តីណែនាំអំពីរបៀបបង្ហាញទំព័រដែលបណ្តាលមកពីការសម្គាល់នោះ។ CSS គ្រប់គ្រងប្លង់របស់ទំព័រក៏ដូចជាពណ៌រូបភាពរូបភាព ផ្ទៃតុ និងច្រើនទៀត។
ប្រសិនបើអ្នកក្រឡេកមើលឯកសារ CSS អ្នកនឹងឃើញវាដូចគ្នានឹងភាសាសរសេរកូដឬសរសេរកូដឯកសារទាំងនេះមានវាក្យសម្ព័ន្ធជាក់លាក់ចំពោះពួកគេ។ សន្លឹករចនាប័ទ្មនីមួយៗត្រូវបានបង្កើតឡើងដោយច្បាប់ CSS មួយចំនួន។ ក្បួនទាំងនេះនៅពេលដែលត្រូវបានគេយកមកពេញគឺជាអ្វីដែលរចនាប័ទ្មគេហទំព័រ។
ផ្នែកខ្លះនៃច្បាប់ CSS
ក្បួន CSS ត្រូវបានបង្កើតឡើងដោយផ្នែកពីរផ្សេងគ្នា - ឧបករណ៍ជ្រើសនិងការប្រកាស។ ឧបករណ៍ជ្រើសកំណត់អ្វីដែលត្រូវបានតែងនៅលើទំព័រហើយការប្រកាសគឺជារបៀបដែលវាត្រូវបានតែង។ ឧទាហរណ៍:
p {
ពណ៌: # 000;
}
នេះគឺជាច្បាប់ CSS ។ ផ្នែក ជ្រើសរើស គឺ "p" ដែលជាឧបករណ៍ជ្រើសធាតុសម្រាប់ "កថាខណ្ឌ" ។ ដូច្នេះវានឹងជ្រើសរាល់កថាខណ្ឌទាំងអស់នៅក្នុងវែបសាយត៍មួយហើយផ្តល់ឱ្យពួកគេនូវរចនាប័ទ្មនេះ (លុះត្រាតែមានកថាខណ្ឌដែលត្រូវបានតម្រង់ទិសដៅដោយរចនាបថជាក់លាក់ច្រើនជាងនៅកន្លែងផ្សេងទៀតនៅក្នុងឯកសារ CSS របស់អ្នក) ។
ផ្នែកនៃច្បាប់ដែលចែងថា "ពណ៌: # 000;" គឺជាអ្វីដែលគេស្គាល់ថាជាសេចក្តីប្រកាស។ ការប្រកាសនោះមានពីរបំណែក - ទ្រព្យសម្បត្តិនិងតម្លៃ។
ទ្រព្យសម្បត្តិគឺជាបំណែក "ពណ៌" នៃសេចក្តីប្រកាសនេះ។ វាកំណត់ថាទិដ្ឋភាពណាមួយនៃឧបករណ៍ជ្រើសរើសនឹងត្រូវបានផ្លាស់ប្តូរដោយភ្នែក។
តម្លៃគឺជាអ្វីដែលលក្ខណសម្បត្តិ CSS ដែលបានជ្រើសនឹងត្រូវបានផ្លាស់ប្តូរ។ ក្នុងឧទាហរណ៍របស់យើងយើងកំពុងប្រើតម្លៃ hex នៃ # 000 ដែលជា CSS shorthand សម្រាប់ "black" ។
ដូច្នេះដោយប្រើក្បួន CSS នេះទំព័ររបស់យើងនឹងមានកថាខណ្ឌដែលបង្ហាញជាពណ៌ពុម្ពអក្សរខ្មៅ។
មូលដ្ឋានគ្រឹះ CSS
នៅពេលអ្នកសរសេរលក្ខណសម្បត្តិ CSS អ្នកមិនអាចបង្កើតវាតាមតែអ្នកយល់បានទេ។ ឧទាហរណ៍វត្ថុ "ពណ៌" គឺជាលក្ខណសម្បត្តិ CSS ពិតប្រាកដដូច្នេះអ្នកអាចប្រើវាបាន។ លក្ខណសម្បត្តិនេះគឺជាអ្វីដែលកំណត់ពណ៌អត្ថបទនៃធាតុមួយ។ ប្រសិនបើអ្នកព្យាយាមប្រើ "ពណ៌អត្ថបទ" ឬ "ពណ៌ពុម្ពអក្សរ" ជាលក្ខណសម្បត្តិ CSS វានឹងបរាជ័យពីព្រោះវាមិនមែនជាផ្នែកពិតនៃភាសា CSS ។
ឧទហរណ៍មួយទៀតគឺលក្ខណសម្បត្តិ "ផ្ទៃខាងក្រោយ - រូបភាព" ។ លក្ខណសម្បត្តិនេះកំណត់រូបភាពដែលអាចប្រើសម្រាប់ផ្ទៃខាងក្រោយដូចនេះ:
.logo {
background-image: url (/images/company-logo.png);
}
ប្រសិនបើអ្នកព្យាយាមប្រើ "រូបភាពផ្ទៃខាងក្រោយ" ឬ "ផ្ទៃខាងក្រោយក្រាហ្វិក" ជាទ្រព្យមួយពួកវានឹងបរាជ័យព្រោះម្ដងហើយម្ដងទៀតទាំងនេះមិនមែនជាលក្ខណៈ CSS ពិតប្រាកដទេ។
លក្ខណៈសម្បត្តិ CSS ខ្លះ
មានលក្ខណៈសម្បត្តិ CSS មួយចំនួនដែលអ្នកអាចប្រើដើម្បីរចនាវែបសាយត៍។ ឧទាហរណ៍ខ្លះគឺ:
- ស៊ុម (រួមទាំងរចនាប័ទ្មស៊ុមពណ៌ស៊ុមនិងស៊ុមទទឹង)
- រុំ (រួមទាំងចន្លោះនៅខាងលើ - ខាងស្ដាំ - ខាងស្ដាំ - ចន្លោះខាងចុង - និងខាងឆ្វេង)
- រឹម (រួមទាំងរឹមកំពូលរឹមស្តាំរឹមបាតនិងរឹមឆ្វេង)
- គ្រួសារពុម្ពអក្សរ
- ទំហំអក្សរ
- ពណ៌ផ្ទៃខាងក្រោយ
- ទទឹង
- កម្ពស់
លក្ខណសម្បត្តិ CSS ទាំងនេះគឺជាវិធីដ៏ល្អដែលត្រូវប្រើជាឧទាហរណ៍ព្រោះវាសុទ្ធតែមានភាពស្មុគស្មាញនិងសូម្បីតែអ្នកមិនដឹង CSS អ្នកប្រហែលជាទាយអ្វីដែលពួកគេធ្វើដោយផ្អែកលើឈ្មោះរបស់ពួកគេ។
មានលក្ខណៈសម្បត្តិ CSS ផ្សេងទៀតដែលអ្នកនឹងជួបប្រទះផងដែរដែលមិនច្បាស់ថាតើពួកគេធ្វើការដោយផ្អែកលើឈ្មោះរបស់ពួកគេ:
- អណ្ដែត
- ជម្រះ
- Overflow
- អត្ថបទ - ប្រែក្លាយ
- Z-index
នៅពេលអ្នកចូលកាន់តែជ្រៅទៅក្នុងការរចនាបណ្តាញអ្នកនឹងជួបប្រទះ (និងប្រើ) លក្ខណៈសម្បត្តិទាំងអស់នេះនិងច្រើនទៀត!
លក្ខណៈសម្បត្តិត្រូវការ
រាល់ពេលដែលអ្នកប្រើលក្ខណសម្បត្តិអ្នកត្រូវតែផ្តល់តម្លៃអោយវា - ហើយលក្ខណសម្បត្តិមួយចំនួនអាចទទួលយកបានតែតម្លៃជាក់លាក់ប៉ុណ្ណោះ។
នៅក្នុងឧទាហរណ៍ដំបូងរបស់យើងនៃលក្ខណសម្បត្តិ "ពណ៌" យើងត្រូវប្រើតម្លៃពណ៌។ វាអាចជា តម្លៃគោលដប់ប្រាំមួយតម្លៃ RGBA ឬក៏ ពាក្យគន្លឹះពណ៌ ។ ទោះជាយ៉ាងណាក៏ដោយតម្លៃទាំងនោះនឹងមានប្រសិទ្ធភាពប្រសិនបើអ្នកប្រើពាក្យថា "អាប់អួក" ជាមួយទ្រព្យសម្បត្តិនេះវានឹងមិនធ្វើអ្វីដោយសារតែជាការពិពណ៌នាដូចពាក្យនោះទេវាមិនមែនជាតម្លៃដែលទទួលស្គាល់ក្នុង CSS ។
ឧទាហរណ៏ទីពីររបស់យើងនៃ "រូបភាពផ្ទៃខាងក្រោយ" តម្រូវឱ្យមានរូបភាពផ្លូវមួយដែលត្រូវបានប្រើដើម្បី ទៅយករូបភាពពិតប្រាកដ ពីឯកសាររបស់តំបន់បណ្ដាញរបស់អ្នក។ នេះជាតម្លៃ / វាក្យសម្ពន្ធដែលត្រូវបានទាមទារ។
លក្ខណៈសម្បត្តិ CSS ទាំងអស់មានតម្លៃដែលពួកគេរំពឹងទុក។ ឧទាហរណ៍:
- ពណ៌ស៊ុមរំពឹងថានឹងមានតម្លៃពណ៌
- ទំហំស៊ុមរំពឹងថាមានតម្លៃដូចជាភីចសែលឬភាគរយ
- រចនាប័ទ្មស៊ុមរំពឹងថាមួយនៃរចនាប័ទ្មបម្រុងដែលត្រូវបានប្រើសម្រាប់ទ្រព្យសម្បត្តិនេះដូចជា "រឹង"
ប្រសិនបើអ្នកចូលទៅកាន់បញ្ជីនៃលក្ខណសម្បត្តិ CSS អ្នកនឹងដឹងថាពួកគេម្នាក់ៗមានតម្លៃជាក់លាក់ដែលពួកគេនឹងប្រើដើម្បីបង្កើតរចនាប័ទ្មដែលពួកគេមានបំណង។
កែសម្រួលដោយលោក Jeremy Girard