តម្រឹមរូបភាពអត្ថបទនិងធាតុប្លុកនៅពេលបង្កើតគេហទំព័រ
ប្រសិនបើអ្នកកំពុង រៀនពីរបៀបបង្កើតវេបសាយ វិធីសាស្ត្រសាមញ្ញបំផុតមួយដែលអ្នកនឹងត្រូវការគឺជារបៀបដាក់វត្ថុនៅក្នុងបង្អួចកម្មវិធីរុករក។ នេះអាចមានន័យថាការដាក់រូបភាពនៅលើទំព័រឬវាអាចជាអត្ថបទកណ្តាលនៃការបង្ហាញអត្ថបទដូចជាចំណងជើងព័ត៌មានដែលជាផ្នែកនៃការរចនា។
មធ្យោបាយសមស្របក្នុងការសម្រេចបាននូវរូបរាងនៃរូបភាពឬអត្ថបទកណ្តាលឬសូម្បីតែទំព័រវ៉ិបសាយទាំងមូលរបស់អ្នកគឺដោយប្រើ CSS ។ លក្ខណៈសម្បត្តិភាគច្រើនសម្រាប់ការផ្តោតអារម្មណ៍មាននៅក្នុង CSS ចាប់តាំងពីកំណែ 1.0 ហើយពួកគេធ្វើការយ៉ាងល្អជាមួយ CSS3 និង កម្មវិធីរុករកបណ្តាញ សម័យទំនើប។
ដូចជាទិដ្ឋភាពជាច្រើននៃការរចនាតំបន់បណ្ដាញមានវិធីច្រើនដើម្បីប្រើ CSS ទៅធាតុកណ្តាលនៅក្នុងទំព័របណ្ដាញ។ ចូរក្រលេកមើលវិធីផ្សេងគ្នាមួយចំនួនដើម្បីប្រើ CSS ដើម្បីសម្រេចបាននូវរូបភាពដែលមើលឃើញ។
អំពីទិដ្ឋភាពទូទៅនៃការប្រើ CSS ទៅផ្នែកសំខាន់ៗក្នុង HTML
ការផ្តោតអារម្មណ៍ជាមួយ CSS អាចជាឧបសគ្គសម្រាប់អ្នករចនាគេហទំព័រដំបូងពីព្រោះមានវិធីផ្សេងគ្នាជាច្រើនដើម្បីសម្រេចបាននូវរចនាប័ទ្មដែលមើលឃើញមួយនេះ។ ខណៈពេលដែលវិធីសាស្រ្តផ្សេងៗគ្នាអាចជាអ្នកបង្កើតគេហទំព័រដែលល្អ ៗ ឬតាមរដូវដែលដឹងថាមិនមែនបច្ចេកទេសទាំងអស់ធ្វើការលើគ្រប់ធាតុទាំងអស់នោះទេវាអាចជាបញ្ហាប្រឈមខ្លាំងសម្រាប់អ្នកជំនាញខាងអ៊ីនធឺណិតថ្មី ៗ ដោយសារតែវិធីសាស្ត្រធំទូលាយមានន័យថាពួកគេត្រូវដឹងថានៅពេលណាត្រូវប្រើវិធីសាស្រ្តណាមួយ។ អ្វីដែលល្អបំផុតដែលត្រូវធ្វើគឺការយល់ដឹងអំពីវិធីសាស្រ្តមួយចំនួន។ នៅពេលអ្នកចាប់ផ្តើមប្រើវាអ្នកនឹងរៀនវិធីណាដែលល្អបំផុតក្នុងករណីដែលមាន។
នៅកម្រិតខ្ពស់អ្នកអាចប្រើ CSS ទៅ:
- អត្ថបទកណ្តាល
- ដាក់ធាតុកម្រិតប្លុក (ដូចជាផ្នែកមួយ)
- ដាក់រូបភាពមួយ
- ដាក់បញ្ឈរប្លុកឬរូបភាព
កាលពីប៉ុន្មានឆ្នាំមុនអ្នករចនាគេហទំព័រអាចប្រើធាតុកណ្តាលដើម្បីដាក់រូបភាពនិងអត្ថបទប៉ុន្តែ ធាតុ HTML នោះ ត្រូវបានបដិសេធហើយមិនត្រូវបានគាំទ្រនៅក្នុងកម្មវិធីរុករកបណ្តាញទំនើបទេ។ នេះមានន័យថាអ្នកត្រូវជៀសវាងការប្រើធាតុ HTML នេះប្រសិនបើអ្នកចង់ឱ្យទំព័ររបស់អ្នកបង្ហាញបានត្រឹមត្រូវហើយធ្វើតាមស្តង់ដាទំនើប ៗ ! មូលហេតុដែលធាតុនេះត្រូវបានគេបដិសេធគឺនៅក្នុងផ្នែកធំព្រោះគេហទំព័រទំនើបគួរមានការបែកចែករចនាសម័្ពន្ធនិងរចនាប័ទ្មច្បាស់លាស់។ HTML ត្រូវបានប្រើដើម្បីបង្កើតរចនាសម្ព័ន្ធខណៈពេល CSS dictates style ។ ពីព្រោះការដាក់កណ្តាលគឺជាលក្ខណៈដែលមើលឃើញនៃធាតុមួយ (របៀបដែលវាមើលទៅជាជាងអ្វីដែលវា) រចនាប័ទ្មនោះត្រូវបានគ្រប់គ្រងជាមួយ CSS មិនមែន HTML ទេ។ នេះជាមូលហេតុដែលបន្ថែមស្លាក
តម្រឹមអត្ថបទជាមួយ CSS
អ្វីដែលងាយស្រួលបំផុតដើម្បីដាក់កណ្តាលនៅលើគេហទំព័រគឺជាអត្ថបទ។ មានលក្ខណសម្បត្តិរចនាប័ទ្មតែមួយគត់ដែលអ្នកត្រូវដឹងដើម្បីធ្វើដូចនេះ: text-align ។ យករចនាប័ទ្ម CSS ខាងក្រោមឧទាហរណ៍:
p.center {text-align: center; }
ជាមួយបន្ទាត់ CSS នេះគ្រប់កថាខណ្ឌដែលសរសេរជាមួយថ្នាក់កណ្តាលនឹងត្រូវបានដាក់កណ្តាលកណ្តាលនៅក្នុងធាតុមេ។ ឧទាហរណ៍ប្រសិនបើកថាខណ្ឌស្ថិតក្នុងផ្នែកមួយមានន័យថាវាជាកូនចៅនៃការបែងចែកនោះវានឹងត្រូវដាក់កណ្តាលខាងក្នុង
នេះជាឧទាហរណ៍នៃថ្នាក់នេះបានអនុវត្តនៅក្នុងឯកសារ HTML:
អត្ថបទនេះត្រូវបានដាក់កណ្ដាល។
នៅពេលចំនុចកណ្តាលអត្ថបទជាមួយលក្ខណសម្បត្តិអត្ថបទចងចាំថាវានឹងត្រូវបានដាក់កណ្តាលនៅក្នុងធាតុរបស់វាហើយមិនចាំបាច់ផ្តោតនៅក្នុងទំព័រទាំងមូលដោយខ្លួនឯងទេ។ ចងចាំផងដែរថាអត្ថបទយុត្តិធម៌កណ្តាលអាចជាការលំបាកក្នុងការអានមាតិកាប្លុកដ៏ធំមួយដូច្នេះប្រើរចនាប័ទ្មនេះតិចតួចណាស់។ ចំណងជើងនិងប្លុកតូចៗនៃអត្ថបទដូចជាអក្សរអត្ថបទសម្រាប់អត្ថបទឬមាតិកាផ្សេងទៀតជាញឹកញាប់ងាយស្រួលក្នុងការអាននិងល្អនៅពេលផ្តោតអារម្មណ៍ប៉ុន្តែអត្ថបទធំជាងដូចជាអត្ថបទពេញដោយខ្លួនវានឹងពិបាកប្រកួតប្រជែងបើមាតិកាមានកណ្តាលយ៉ាងពេញលេញ។ ត្រឹមត្រូវ។ ចងចាំថា ការអានអាចជាគន្លឹះជានិច្ច នៅពេលនិយាយអំពីអត្ថបទគេហទំព័រ!
ប្លុកកណ្តាលនៃមាតិកាជាមួយ CSS
ប្លុកគឺជាធាតុណាមួយនៅលើទំព័ររបស់អ្នកដែលមានទទឹងដែលបានកំណត់ហើយត្រូវបានបង្កើតឡើងជាធាតុកម្រិតប្លុក។ ជាញឹកញាប់ប្លុកទាំងនេះត្រូវបានបង្កើតដោយប្រើធាតុ HTML
div.center {
រឹម: 0 ស្វ័យប្រវត្តិ
ទទឹង: 80 អឹម
}
ខ្ទង់ CSS នេះសម្រាប់លក្ខណសម្បត្តិរឹមនឹងកំណត់រឹមកំពូលនិងបាតទៅតម្លៃ 0 ខណៈពេលដែលឆ្វេងនិងស្ដាំនឹងប្រើ "ស្វ័យប្រវត្តិ" ។ នេះចាំបាច់យកចន្លោះដែលអាចរកបាននិងបែងចែកវាស្មើៗគ្នារវាងផ្នែកទាំងពីរនៃបង្អួចទិដ្ឋភាពដែលមានប្រសិទ្ធិភាពកណ្តាលធាតុនៅលើទំព័រ។
នៅទីនេះវាត្រូវបានអនុវត្តនៅក្នុង HTML:
ប៉ុន្តែអត្ថបទខាងក្នុងវាត្រូវបានដាក់តម្រឹម។
ដរាបណាប្លុករបស់អ្នកមានទទឹងដែលបានកំណត់វានឹងដាក់ខ្លួនវានៅខាងក្នុងធាតុដែលមាន។ អត្ថបទដែលមាននៅក្នុងប្លុកនោះនឹងមិនត្រូវបានដាក់កណ្តាលនៅក្នុងវានោះទេប៉ុន្តែនឹងត្រូវបានតម្រឹមខាងឆ្វេង។ នេះគឺដោយសារតែអត្ថបទត្រូវបានតម្រឹមខាងឆ្វេងនៅក្នុងលំនាំដើមនៅក្នុងកម្មវិធីរុករកបណ្ដាញ។ ប្រសិនបើអ្នកចង់បានអត្ថបទកណ្តាលផងដែរអ្នកអាចប្រើលក្ខណសម្បត្តិអត្ថបទដែលយើងបានគ្របដណ្តប់ពីមុនដោយភ្ជាប់ជាមួយវិធីសាស្ត្រនេះដើម្បីកណ្តាលផ្នែក។
តម្រឹមរូបភាពជាមួយ CSS
ខណៈពេលដែលកម្មវិធីរុករកច្រើនបំផុតនឹងបង្ហាញរូបភាពដោយកណ្តាលដោយប្រើលក្ខណសម្បត្តិអត្ថបទដូចដែលយើងបានពិនិត្យមើលរួចមកហើយសម្រាប់កថាខណ្ឌវាមិនមែនជាគំនិតល្អទេដែលពឹងផ្អែកលើបច្ចេកទេសនោះព្រោះវាមិនត្រូវបានណែនាំដោយ W3C ។ ដោយសារវាមិនត្រូវបានណែនាំវាតែងតែមានឱកាសដែលកំណែនៃកម្មវិធីរុករកនាពេលអនាគតអាចជ្រើសរើសមិនអើពើវិធីសាស្ត្រនេះ។
ជំនួសឱ្យការប្រើតម្រឹមអត្ថបទតម្រឹមកណ្ដាលរូបភាពអ្នកគួរប្រាប់កម្មវិធីរុករកជាក់លាក់ថារូបភាពជាធាតុកម្រិតប្លុក។ តាមវិធីនេះអ្នកអាចដាក់វាកណ្តាលដូចអ្នកនឹងប្លុកផ្សេងទៀត។ នេះគឺ CSS ដើម្បីធ្វើឱ្យរឿងនេះកើតឡើង:
img.center {
បង្ហាញ: ប្លុក;
រឹមឆ្វេង: auto;
រឹមខាងស្តាំ: auto;
}
ហើយទីនេះគឺជា HTML ដែលសម្រាប់រូបភាពដែលយើងចង់ផ្តោតអារម្មណ៍:
អ្នកក៏អាចមជ្ឈមណ្ឌលវត្ថុដោយប្រើ CSS នៅក្នុងបន្ទាត់ (សូមមើលខាងក្រោម) ប៉ុន្តែវិធីសាស្ត្រនេះមិនត្រូវបានណែនាំទេព្រោះវាបន្ថែមរចនាប័ទ្មដែលមើលឃើញទៅក្នុងការសម្គាល់ HTML របស់អ្នក។ សូមចងចាំថាយើងចង់បំបែករចនាប័ទ្មនិងរចនាប័ទ្មដូច្នេះការបន្ថែមរចនាប័ទ្ម CSS ទៅកូដ HTML របស់អ្នកជាមួយនឹងបំបែកដាច់ដោយឡែកហើយដូច្នេះវាគួរតែត្រូវបានជៀសវាងនៅពេលដែលអាចធ្វើទៅបាន។
ធាតុកណ្តាលបញ្ឈរជាមួយ CSS
ការដាក់វត្ថុគំនូសបញ្ឈរតែងតែពិបាកក្នុងការរចនាគេហទំព័រប៉ុន្តែជាមួយនឹងការចេញផ្សាយម៉ូឌុលប្លង់ប្រអប់បត់បែន CSS ក្នុង CSS3 ឥឡូវនេះមានវិធីមួយដើម្បីធ្វើវា។
តម្រឹមបញ្ឈរធ្វើការស្រដៀងគ្នាទៅនឹងការតម្រឹមផ្ដេកដែលបានគ្របដណ្ដប់ខាងលើ។ លក្ខណសម្បត្តិ CSS ត្រូវបានតម្រឹមបញ្ឈរជាមួយតម្លៃកណ្តាល។
.vcenter {
តម្រឹមបញ្ឈរ: កណ្ដាល
}
ការធ្លាក់ចុះទៅវិធីសាស្រ្តនេះគឺថាមិនមែនគ្រប់កម្មវិធីរុករកទាំងអស់គាំទ្រ CSS FlexBox ទោះបីជាកាន់តែច្រើនឡើង ៗ កំពុងតែចូលមកវិធីថ្មីនេះ CSS! ជាការពិតកម្មវិធីរុករកសម័យទំនើបទាំងអស់នាពេលបច្ចុប្បន្ននេះគាំទ្ររចនាប័ទ្ម CSS នេះ។ នេះមានន័យថាការព្រួយបារម្ភតែមួយគត់របស់អ្នកជាមួយ Flexbox នឹងមានកំណែចាស់ជាងមុន។
ប្រសិនបើអ្នកមានបញ្ហាជាមួយកម្មវិធីរុករកចាស់នោះ W3C ផ្ដល់អនុសាសន៍ឱ្យអ្នកដាក់អត្ថបទបញ្ឈរក្នុងកុងតឺន័រដោយប្រើវិធីដូចខាងក្រោម:
- ដាក់ធាតុដែលត្រូវបានដាក់កណ្តាលនៅក្នុងធាតុដែលមានដូចជា div ។
- កំណត់កម្ពស់អប្បបរមាលើធាតុដែលមាន។
- ប្រកាសថាមានធាតុជាក្រឡាតារាង។
- កំណត់ការតម្រឹមបញ្ឈរទៅ "កណ្ដាល។ "
ឧទាហរណ៍ទីនេះគឺ CSS:
.vcenter {
min-height: 12em;
បង្ហាញ: តារាងតារាង;
តម្រឹមបញ្ឈរ: កណ្ដាល
}
ហើយនៅទីនេះគឺ HTML:
អត្ថបទនេះត្រូវបានដាក់កណ្តាលនៅក្នុងប្រអប់។
ចំណុចកណ្តាលបញ្ឈរនិងកំណែចាស់ជាងរបស់កម្មវិធីរុករកអ៊ិនធឺណិ
មានមធ្យោបាយមួយចំនួនដើម្បីបង្ខំ Internet Explorer (កណ្តាល) ទៅកណ្តាលហើយបន្ទាប់មកប្រើមតិយោបល់មានលក្ខខណ្ឌដើម្បីឱ្យ IE មើលឃើញរចនាប័ទ្មប៉ុន្តែវាមានន័យតិចតួចនិងមិនស្អាត។ ព័ត៌មានល្អគឺថាជាមួយនឹងការសម្រេចចិត្តថ្មីៗនេះរបស់ក្រុមហ៊ុន Microsoft ក្នុងការទម្លាក់ការគាំទ្រសម្រាប់កំណែចាស់ៗរបស់ IE កម្មវិធីរុករកទាំងនោះដែលមិនគាំទ្រគួរតែត្រូវបានចេញដំណើរឆាប់ៗដែលធ្វើឱ្យអ្នករចនាគេហទំព័រកាន់តែងាយស្រួលក្នុងការប្រើវិធីសាស្ត្រប្លង់សម័យទំនើបដូចជា CSS FlexBox ដែលនឹងធ្វើឱ្យប្លង់ CSS ទាំងអស់, មិនមែនគ្រាន់តែជាការផ្តោតអារម្មណ៍, កាន់តែងាយស្រួលសម្រាប់អ្នករចនាបណ្ដាញទាំងអស់។