របៀបដែលមរតក CSS ធ្វើការក្នុងឯកសារគេហទំព័រ

ផ្នែកដ៏សំខាន់មួយនៃការរចនារចនាប័ទ្មវេបសាយដែលមាន CSS គឺជាការយល់ដឹងអំពីគំនិតនៃមរតក។

មរតក CSS ត្រូវបានកំណត់ដោយស្វ័យប្រវត្តិដោយរចនាប័ទ្មនៃទ្រព្យដែលកំពុងត្រូវបានប្រើ។ នៅពេលដែលអ្នកក្រឡេកមើលលក្ខណសម្បត្តិរចនាប័ទ្មផ្ទៃខាងក្រោយពណ៌អ្នកនឹងឃើញផ្នែកមួយមានចំណងជើងថា "មរតក" ។ ប្រសិនបើអ្នកដូចជាអ្នករចនាគេហទំព័រភាគច្រើនអ្នកមិនអើពើផ្នែកនោះទេប៉ុន្តែវាមានគោលបំណង។

តើអ្វីទៅជាមរតក CSS?

ធាតុនីមួយៗនៅក្នុង ឯកសារ HTML គឺជាផ្នែកនៃមែកធាងហើយធាតុទាំងអស់លើកលែងតែធាតុ ដំបូងមានធាតុមេដែលដាក់វា។ អ្វីដែលរចនាប័ទ្មត្រូវបានអនុវត្តទៅធាតុមេដែលអាចត្រូវបានអនុវត្តទៅធាតុដែលបានព័ទ្ធក្នុងវាប្រសិនបើលក្ខណសម្បត្តិគឺជាអ្នកដែលអាចទទួលមរតក។

ឧទាហរណ៍លេខកូដ HTML ខាងក្រោមមានស្លាក H1 ដែលភ្ជាប់ស្លាក EM:

នេះគឺជាចំណងជើង ធំ

ធាតុ EM ជាកូននៃធាតុ H1 និងរចនាប័ទ្មណាមួយនៅលើ H1 ដែលត្រូវបានទទួលមរតកនឹងត្រូវបានបញ្ជូនទៅអត្ថបទអេ EM ផងដែរ។ ឧទាហរណ៍:

h1 {ទំហំពុម្ពអក្សរ: 2em; }

ដោយសារលក្ខណសម្បត្តិទំហំពុម្ពអក្សរត្រូវបានទទួលមរតកអត្ថបទដែលនិយាយថា "ធំ" (ដែលជាឯកសារភ្ជាប់នៅក្នុងស្លាកអេ EM) នឹងមានទំហំដូចគ្នានឹងសល់របស់ H1 ។ នេះដោយសារតែវាបានទទួលនូវតម្លៃដែលកំណត់ក្នុងលក្ខណសម្បត្តិ CSS ។

របៀបប្រើមរតក CSS

មធ្យោបាយងាយស្រួលបំផុតដើម្បីប្រើវាគឺដើម្បីស្គាល់ លក្ខណៈសម្បត្តិ CSS ដែលមានហើយមិនត្រូវបានទទួលមរតក។ ប្រសិនបើលក្ខណសម្បត្តិត្រូវបានទទួលមរតកនោះអ្នកដឹងថាតម្លៃនឹងនៅដូចគ្នាចំពោះគ្រប់ធាតុកូននៅក្នុងឯកសារ។

មធ្យោបាយដ៏ល្អបំផុតក្នុងការប្រើនេះគឺដើម្បីកំណត់រចនាប័ទ្មមូលដ្ឋានរបស់អ្នកនៅលើធាតុកម្រិតខ្ពស់ដូចជា BODY ។ ប្រសិនបើអ្នកកំណត់ គ្រួសារពុម្ពអក្សរ របស់អ្នកលើទ្រព្យសម្បត្តិរបស់រាងកាយបន្ទាប់មកអរគុណដល់មរតកឯកសារទាំងអស់នឹងរក្សាទុកពុម្ពអក្សរដែលដូចគ្នា។ នេះនឹងបង្កើតឡើងសម្រាប់សន្លឹករចនាប័ទ្មតូចដែលងាយស្រួលគ្រប់គ្រងព្រោះមានរចនាប័ទ្មទូទៅតិចជាង។ ឧទាហរណ៍:

រាងកាយ {ពុម្ពអក្សរគ្រួសារ: Arial, sans-serif; }

ប្រើតម្លៃរចនាប័ទ្មមរតក

រាល់ទ្រព្យសម្បត្តិ CSS រួមបញ្ចូលតម្លៃ "មរតក" ជាជម្រើសដែលអាចធ្វើទៅបាន។ នេះប្រាប់កម្មវិធីរុករកបណ្ដាញថាសូម្បីតែទ្រព្យសម្បត្តិដែលមិនធម្មតាត្រូវបានទទួលមរតកក៏ដោយវាគួរតែមានតម្លៃដូចគ្នានឹងមេ។ ប្រសិនបើអ្នកកំណត់រចនាប័ទ្មដូចជារឹមដែលមិនត្រូវបានទទួលមរតកអ្នកអាចប្រើតម្លៃមរតកលើលក្ខណសម្បត្តិបន្តបន្ទាប់ដើម្បីផ្តល់ឱ្យពួកគេនូវរឹមដូចគ្នាដូចមេ។ ឧទាហរណ៍:

រាងកាយ {margin: 1em; } p {margin: inheritance; }

មរតកប្រើតម្លៃដែលបានគណនា

នេះមានសារៈសំខាន់សម្រាប់ តម្លៃដែលបាន ទទួល ដូចគ្នានឹងទំហំពុម្ពអក្សរ ដែលប្រើប្រវែង។ តម្លៃដែលបានគណនាគឺជាតម្លៃដែលទាក់ទងនឹងតម្លៃមួយចំនួននៅលើទំព័របណ្តាញ។

ប្រសិនបើអ្នកកំណត់ទំហំពុម្ពអក្សរ 1em នៅលើធាតុ BODY របស់អ្នកនោះទំព័រទាំងមូលរបស់អ្នកនឹងមិនមានទំហំតែ 1em ទេ។ នេះគឺដោយសារធាតុដូចជាក្បាល (H1-H6) និង ធាតុ ផ្សេងទៀត (កម្មវិធីរុករកមួយចំនួនគណនាលក្ខណសម្បត្តិតារាងខុសគ្នា) មានទំហំទាក់ទងនៅក្នុងកម្មវិធីរុករកបណ្តាញ។ នៅក្នុងអវត្តមាននៃពត៌មានទំហំពុម្ពអក្សរផ្សេងទៀតកម្មវិធីរុករកបណ្តាញនឹងតែងតែធ្វើឱ្យ H1 ចំណងជើងអត្ថបទធំជាងគេនៅលើទំព័របន្ទាប់ដោយ H2 និងដូច្នេះនៅលើ។ នៅពេលអ្នកកំណត់ធាតុផ្សំខ្លួនរបស់អ្នកទៅទំហំពុម្ពអក្សរជាក់លាក់នោះនោះត្រូវបានប្រើជាទំហំពុម្ពអក្សរ«មធ្យម»ហើយធាតុចំណងជើងត្រូវបានគណនាពីនោះ។

ចំណាំអំពីមរតកនិងលក្ខណៈសម្បត្តិផ្ទៃខាងក្រោយ

មានរចនាប័ទ្មមួយចំនួនដែលត្រូវបានចុះបញ្ជីមិនត្រូវបានទទួលឥទ្ធិពលពី CSS 2 លើ W3C ប៉ុន្តែកម្មវិធីរុករកបណ្តាញនៅតែទទួលបានតម្លៃ។ ឧទាហរណ៍ប្រសិនបើអ្នកសរសេរ HTML និង CSS ខាងក្រោម:

<រចនាប័ទ្មប្រភេទ = "text / css"> h1 {background-color: yellow; }

នេះជាចំណងជើង ធំ

ពាក្យថា "ធំ" នៅតែមានផ្ទៃខាងក្រោយពណ៌លឿងបើទោះបីជាលក្ខណសម្បត្តិពណ៌ផ្ទៃខាងក្រោយមិនត្រូវបានគេទទួលមរតកក៏ដោយ។ នេះដោយសារតែតម្លៃដំបូងនៃលក្ខណសម្បត្តិផ្ទៃខាងក្រោយគឺ "តម្លាភាព" ។ ដូច្នេះអ្នកមិនឃើញពណ៌ផ្ទៃខាងក្រោយនៅលើ ទេប៉ុន្តែពណ៌នោះចាំងពីមេ

។