ទទួលបានដើម្បីដឹងសន្លឹករចនាប័ទ្មល្បាក់ជាមួយនឹងសន្លឹកបៀស៊ីធីនេះ

ទិដ្ឋភាពទូទៅនៃសន្លឹករចនាប័ទ្មល្បែងជាមួយសន្លឹករចនាប័ទ្មគំរូ

នៅពេលដែលអ្នកបង្កើតវេបសាយពីទទេវាឆ្លាតវៃចាប់ផ្តើមជាមួយរចនាប័ទ្មមូលដ្ឋានដែលបានកំណត់។ វាដូចជាការចាប់ផ្តើមជាមួយនឹងផ្ទាំងក្រណាត់ស្អាតនិងជក់ស្រស់។ បញ្ហាមួយក្នុងចំណោមបញ្ហាដំបូងដែលអ្នករចនាគេហទំព័រប្រឈមមុខគឺថា កម្មវិធីអ៊ីនធឺណិត គឺខុសគ្នាទាំងអស់។ ទំហំពុម្ពអក្សរលំនាំដើមគឺខុសគ្នាពីវេទិកាទៅវេទិការគ្រួសារពុម្ពអក្សរលំនាំដើមគឺខុសគ្នាកម្មវិធីរុករកមួយចំនួនកំណត់រឹមនិងចន្លោះនៅលើស្លាករាងកាយខណៈពេលដែលអ្នកផ្សេងទៀតមិននិងដូច្នេះ។ ទទួលបានភាពមិនស៊ីសង្វាក់ទាំងនេះដោយកំណត់រចនាប័ទ្មលំនាំដើមសម្រាប់ទំព័របណ្តាញរបស់អ្នក។

CSS និងសំណុំតួអក្សរ

ដំបូងបង្អស់ត្រូវកំណត់សំណុំតួអក្សរ CSS របស់អ្នកទៅ utf-8 ។ ខណៈពេលដែលភាគច្រើននៃទំព័រដែលអ្នករចនាត្រូវបានសរសេរជាភាសាអង់គ្លេសអាចជាភាសាដែលត្រូវបានបកប្រែសម្រាប់បរិបទភាសានិងវប្បធម៌ខុសៗគ្នា។ នៅពេលដែលពួកគេមាន utf-8 ធ្វើឱ្យដំណើរការងាយស្រួល។ ការកំណត់សំណុំតួអក្សរនៅក្នុង សន្លឹករចនាប័ទ្មខាងក្រៅ នឹងមិនមានអាទិភាពលើ បឋមកថា HTTP នោះទេប៉ុន្តែនៅក្នុងគ្រប់ស្ថានភាពផ្សេងទៀតវានឹង។

វាងាយស្រួលក្នុងការកំណត់សំណុំតួអក្សរ។ សម្រាប់បន្ទាត់ទីមួយនៃឯកសារ CSS សរសេរ:

@charset "utf-8";

វិធីនេះបើអ្នកប្រើតួអក្សរអន្ដរជាតិក្នុងលក្ខណសម្បត្តិមាតិកាឬជាថ្នាក់និងលេខសម្គាល់ឈ្មោះ សន្លឹករចនាប័ទ្ម នឹងនៅតែដំណើរការយ៉ាងត្រឹមត្រូវ។

ធ្វើរចនាប័ទ្មរាងកាយទំព័រ

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

html, body {margin: 0px; ចន្លោះ: 0px; ព្រំដែន: 0px; }

កំណត់ពណ៌ផ្ទៃខាងមុខឬពណ៌លំនាំដើមទៅពណ៌ខ្មៅនិងពណ៌ផ្ទៃខាងក្រោយលំនាំដើមទៅជាពណ៌ស។ ខណៈពេលនេះនឹងមានការផ្លាស់ប្តូរសម្រាប់ការរចនាគេហទំព័រច្រើនបំផុតដោយមានពណ៌ស្តង់ដារទាំងនេះបានកំណត់នៅលើរាងកាយនិង ស្លាក HTML នៅពេលដំបូងធ្វើឱ្យទំព័រងាយស្រួលក្នុងការអាននិងធ្វើការជាមួយ។

html, body {color: # 000; ផ្ទៃខាងក្រោយ: #fff; }

រចនាប័ទ្មពុម្ពអក្សរលំនាំដើម

ទំហំពុម្ពអក្សរនិងគ្រួសារពុម្ពអក្សរគឺជាអ្វីដែលជៀសមិនរួចនឹងផ្លាស់ប្តូរពេលដែលការរចនាធ្វើឡើងប៉ុន្តែចាប់ផ្តើមជាមួយទំហំពុម្ពអក្សរលំនាំដើមនៃ 1 em និងគ្រួសារពុម្ពអក្សរលំនាំដើម Arial, Geneva ឬពុម្ពអក្សរ sans-serif ផ្សេងទៀត។ ការប្រើប្រាស់ ems រក្សាទុកទំព័រដែលអាចចូលដំណើរការបានតាមតែអាចធ្វើទៅបានហើយពុម្ពអក្សរ Sans-serif អាចមើលឃើញច្បាស់នៅលើអេក្រង់។

html, body, p, th, td, li, dd, dt {ពុម្ពអក្សរ: 1em Arial, Helvetica, sans-serif; }

វាអាចមានកន្លែងផ្សេងទៀតដែលអ្នកអាចរកឃើញអត្ថបទប៉ុន្តែ p , td , td , លីនុស , dd និង dt គឺជាការចាប់ផ្តើមដ៏ល្អសម្រាប់ការកំណត់ពុម្ពអក្សរមូលដ្ឋាន។ រួមបញ្ចូលទាំង HTML និង រូបរាង គ្រាន់តែក្នុងករណីប៉ុន្តែកម្មវិធីរុករកជាច្រើនបដិសេធជម្រើសពុម្ពអក្សរប្រសិនបើអ្នកគ្រាន់តែកំណត់ពុម្ពអក្សររបស់អ្នកសម្រាប់ HTML ឬតួ។

ចំណងជើង

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

h1, h2, h3, h4, h5, h6 {គ្រួសារពុម្ពអក្សរ: Arial, Helvetica, sans-serif; } h1 {ទំហំពុម្ពអក្សរ: 2em; } h2 {ទំហំពុម្ពអក្សរ: 1.5em; } h3 {ទំហំពុម្ពអក្សរ: 1.2 ម; } h4 {ទំហំពុម្ពអក្សរ: 1.0em; } h5 {ទំហំពុម្ពអក្សរ: 0.9em; } h6 {ទំហំពុម្ពអក្សរ: 0.8em; }

កុំភ្លេចតំណ

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

ដើម្បីកំណត់ តំណ នៅក្នុងស្រមោលពណ៌ខៀវ, កំណត់:

• តំណភ្ជាប់ ជាពណ៌ខៀវ
• តំណភ្ជាប់បានមើលឃើញ ជាពណ៌ខៀវងងឹត
• ដាក់តំណភ្ជាប់ព្រិល ដូចពណ៌ខៀវ
• តំណសកម្ម ជាពណ៌ខៀវភ្លឺសូម្បីតែ

ដូចដែលបានបង្ហាញនៅក្នុងឧទាហរណ៍នេះ:

a: link {color: # 00f; } a: visited {color: # 009; } a: hover {color: # 06f; } មួយ: សកម្ម {ពណ៌: # 0cf; } តាមរយៈការបង្កើតនូវតំណភ្ជាប់ជាមួយនឹងពណ៌ចម្រុះដែលមានភាពស្មើគ្នាដោយយុត្តិធម៌វាធានាថាខ្ញុំនឹងមិនភ្លេចនូវថ្នាក់ណាមួយទេហើយវាធ្វើឱ្យពួកគេមិនសូវស្រាលខ្លាំងជាងពណ៌ខៀវក្រហមនិងស្វាយលំនាំដើម។

សន្លឹករចនាប័ទ្មពេញ

នេះជាសន្លឹករចនាប័ទ្មពេញលេញ:

@charset "utf-8"; html, body {margin: 0px; ចន្លោះ: 0px; ព្រំដែន: 0px; ពណ៌: # 000; ផ្ទៃខាងក្រោយ: #fff; } html, body, p, th, td, li, dd, dt {ពុម្ពអក្សរ: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {ពុម្ពអក្សរគ្រួសារ: Arial, Helvetica, sans-serif; } h1 {ទំហំពុម្ពអក្សរ: 2em; } h2 {ទំហំពុម្ពអក្សរ: 1.5em; } h3 {ទំហំពុម្ពអក្សរ: 1.2 ម; } h4 {ទំហំពុម្ពអក្សរ: 1.0em; } h5 {ទំហំពុម្ពអក្សរ: 0.9em; } h6 {ទំហំពុម្ពអក្សរ: 0.8em; } មួយ: link {color: # 00f; } a: visited {color: # 009; } a: hover {color: # 06f; } មួយ: សកម្ម {ពណ៌: # 0cf; }