របៀបលុបរចនាប័ទ្មកម្មវិធីរុករកលំនាំដើមដោយប្រើសន្លឹករចនាប័ទ្មមេមួយ

ទទួលបានការពិតជាមួយនឹងគន្លឹះទាំងនេះ

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

រចនាប័ទ្មកម្មវិធីរុករកលំនាំដើមអាចមានប្រយោជន៍ប៉ុន្តែក្នុងករណីជាច្រើនអ្នករចនាគេហទំព័រចង់ដកចេញរចនាប័ទ្មទាំងនេះដូច្នេះពួកគេអាចចាប់ផ្តើមស្រស់ៗជាមួយរចនាប័ទ្មដែលពួកគេមាន 100% គ្រប់គ្រង។ នេះត្រូវបានធ្វើដោយប្រើអ្វីដែលត្រូវបានគេស្គាល់ថាជា "សន្លឹករចនាប័ទ្មមេ" ។

សន្លឹករចនាប័ទ្មមេគួរតែជាសន្លឹករចនាប័ទ្មដំបូងដែលអ្នកហៅនៅក្នុងឯកសារទាំងអស់របស់អ្នក។ អ្នកប្រើសន្លឹករចនាប័ទ្មមេដើម្បីជម្រះចេញការកំណត់កម្មវិធីរុករកលំនាំដើមដែលអាចបណ្តាលឱ្យមានបញ្ហាក្នុងការរចនាបណ្តាញឆ្លងកាត់បណ្តាញ។ ពេលអ្នកបានជម្រះចេញរចនាប័ទ្មជាមួយសន្លឹករចនាប័ទ្មមេការរចនារបស់អ្នកចាប់ផ្តើមពីកន្លែងដដែលនៅក្នុងកម្មវិធីរុករកទាំងអស់ - ដូចជាផ្ទាំងក្រណាត់ស្អាតសម្រាប់គូរ។

លំនាំដើមសកល

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

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

អ្នកក៏ចង់បង្កើតពុម្ពអក្សរឱ្យត្រឹមត្រូវដែរ។ ត្រូវប្រាកដថាកំណត់ទំហំពុម្ពអក្សរដល់ 100% ឬ 1em ដូច្នេះទំព័ររបស់អ្នកអាចចូលដំណើរការបានប៉ុន្តែទំហំនៅតែមាន។ ហើយសូមប្រាកដថាត្រូវបញ្ចូលបន្ទាត់កម្ពស់។

រាងកាយ {ពុម្ពអក្សរ: 1em / 1.25 Arial, Helvetica, sans-serif; }

ការធ្វើទ្រង់ទ្រាយជាចំណងជើង

ស្លាកចំណងជើងឬបឋមកថា (H1, H2, H3, ។ ល។ ) ជាធម្មតាលំនាំដើមទៅអត្ថបទដិតដែលមានរឹមទំហំធំឬចន្លោះនៅជុំវិញពួកវា។ ដោយការសម្អាតទម្ងន់រឹមនិងចន្លោះអ្នកធានាថាស្លាកទាំងនេះនៅតែមានទំហំធំ (ឬតូចជាង) អត្ថបទនៅជុំវិញពួកគេដោយមិនមានរចនាប័ទ្មបន្ថែម:

h1, h2, h3, h4, h5, h6 {margin: 0; ចន្លោះ: 0; ពុម្ពអក្សរទម្ងន់: ធម្មតា; គ្រួសារពុម្ពអក្សរ: Arial, Helvetica, sans-serif; }

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

ការធ្វើទ្រង់ទ្រាយអត្ថបទធម្មតា

លើសពីចំណងជើង, មានស្លាកអត្ថបទផ្សេងទៀតដែលអ្នកគួរតែប្រាកដថាដើម្បីជម្រះចេញ។ សំណុំមួយដែលមនុស្សជារឿយៗភ្លេចគឺស្លាកក្រឡាតារាង (TH និង TD) និងស្លាកសំណុំបែបបទ (SELECT, TEXTAREA និង INPUT) ។ ប្រសិនបើអ្នកមិនកំណត់ទំហំទាំងនោះដូចគ្នានឹងតួអក្សរនិងអត្ថបទកថាខណ្ឌរបស់អ្នកទេនោះអ្នកប្រហែលជាមិនភ្ញាក់ផ្អើលអំពីរបៀបដែលកម្មវិធីរុករកនឹងបង្ហាញវាទេ។

p, th, td, លី, ឌី, dt, ul, ol, blockquote, q, អក្សរកាត់, abbr, a, បញ្ចូល, ជ្រើស, textarea {គែម: 0; ចន្លោះ: 0; ពុម្ពអក្សរ: ធម្មតាធម្មតាធម្មតា 1em / 1.25 Arial, Helvetica, sans-serif; }

វាក៏ល្អផងដែរក្នុងការផ្តល់សម្រង់ (BLOCKQUOTE និង Q) របស់អ្នក, អក្សរកាត់និងអក្សរកាត់រចនាប័ទ្មបន្ថែមតិចតួច, ដូច្នេះពួកគេឈរចេញបន្តិចបន្តួច:

បិទប្លង់ {រឹម: 1.25em; padding: 1.25em} q {font-style: italic; } អក្សរកាត់, abbr {cursor: help; border-bottom: 1px dashed; }

តំណភ្ជាប់និងរូបភាព

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

a, a: link, a: visited, a: active, a: ដាក់ {ដាក់អក្សរ - ការតុបតែង: គូសបន្ទាត់ពីក្រោម; }

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

img {border: none; }

តារាង

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

តារាង {រឹម: 0; ចន្លោះ: 0; ព្រំដែន: គ្មាន; }

ទម្រង់

ដូចទៅនឹងធាតុផ្សំផ្សេងទៀតដែរអ្នកគួរតែលាតត្រដាងនិងរុំព័ទ្ធជុំវិញទម្រង់របស់អ្នក។ រឿងមួយទៀតដែលខ្ញុំចូលចិត្តធ្វើគឺសរសេរឡើងវិញនូវទំរង់បែបបទថា " Inline " ដូច្នេះវាមិនបន្ថែមចន្លោះបន្ថែមទេដែលអ្នកដាក់ស្លាកនៅក្នុងកូដ។ ដូចគ្នានឹងធាតុអត្ថបទផ្សេងៗខ្ញុំកំណត់ពត៌មានពុម្ពអក្សរសម្រាប់ជម្រើសវាយអក្សរនិងបញ្ចូលខាងលើដូច្នេះវាដូចគ្នានឹងអត្ថបទរបស់ខ្ញុំ។

សំណុំបែបបទ {រឹម: 0; ចន្លោះ: 0; បង្ហាញ: inline; }

វាក៏ជាគំនិតល្អដែរក្នុងការប្តូរទស្សន៍ទ្រនិចសម្រាប់ស្លាករបស់អ្នក។ វាជួយមនុស្សឱ្យឃើញថាស្លាកនេះនឹងធ្វើអ្វីនៅពេលពួកគេចុចលើវា។

ស្លាក {ទស្សន៍ទ្រនិច: ព្រួញ; }

ថ្នាក់ទូទៅ

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

.clear {clear: both; } .flatLeft {float: left; } .FloatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; រឹមឆ្វេង: auto; រឹមខាងស្តាំ: auto; } / * ចងចាំថាត្រូវកំណត់ទទឹង * / .bold {font-weight: bold; } .italic {font-style: italic; } ។ {line -text-decoration: underlined; } ។ គ្មានន្ទាត់ {ទទេឆ្វេង: 0; padding-left: 0; } .nomargin {margin: 0; } ។ ការលែងកែសម្រួល {padding: 0; } .nobullet {list- style: none; list-style-image: none; }

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

សន្លឹករចនាប័ទ្មមេទាំងស្រុង

/ * លំនាំដើមសកល * / html, រាងកាយ {margin: 0px; ចន្លោះ: 0px; ព្រំដែន: 0px; } តួ {ពុម្ពអក្សរ: 1em / 1.25 Arial, Helvetica, sans-serif; } / * ចំណងជើង * / h1, h2, h3, h4, h5, h6 {margin: 0; ចន្លោះ: 0; ពុម្ពអក្សរទម្ងន់: ធម្មតា; គ្រួសារពុម្ពអក្សរ: Arial, Helvetica, sans-serif; } / * រចនាប័ទ្មអត្ថបទ * / p, ទី, td, លីនុស, dd, dt, ul, ol, blockquote, q, អក្សរកាត់, abbr, a, បញ្ចូល, ជ្រើស, textarea {គែម: 0; ចន្លោះ: 0; ពុម្ពអក្សរ: ធម្មតាធម្មតាធម្មតា 1em / 1.25 Arial, Helvetica, sans-serif; } បិទប្លង់ {រឹម: 1.25em; padding: 1.25em} q {font-style: italic; } អក្សរកាត់, abbr {cursor: help; border-bottom: 1px dashed; } តូច {ពុម្ពអក្សរទំហំ: .85em; } ធំ {ទំហំពុម្ពអក្សរ: 1.2 ម; } / * តំណនិងរូបភាព * / a, a: link, a: visited, a: active, a: ដាក់ {អត្ថបទ - តុបតែង: គូសបន្ទាត់ពីក្រោម; } img {ព្រំដែន: គ្មាន; } / * តារាង * / តារាង {margin: 0; ចន្លោះ: 0; ព្រំដែន: គ្មាន; } / * ទម្រង់ * / ទម្រង់ {រឹម: 0; ចន្លោះ: 0; បង្ហាញ: inline; } ស្លាក {ទស្សន៍ទ្រនិច: ទស្សន៍ទ្រនិច; } / * ថ្នាក់ទូទៅ * / .clear {clear: both; } .flatLeft {float: left; } .FloatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; រឹមឆ្វេង: auto; រឹមខាងស្តាំ: auto; } / * ចងចាំថាត្រូវកំណត់ទទឹង * / .bold {font-weight: bold; } .italic {font-style: italic; } ។ {line -text-decoration: underlined; } ។ គ្មានន្ទាត់ {ទទេឆ្វេង: 0; padding-left: 0; } .nomargin {margin: 0; } ។ ការលែងកែសម្រួល {padding: 0; } .nobullet {list- style: none; list-style-image: none; }

អត្ថបទដើមរបស់នាង Jennifer Krynin ។ កែសម្រួលដោយលោក Jeremy Girard នៅថ្ងៃទី 10 ខែមិថុនាឆ្នាំ 17