ការយល់ដឹងពីជំរំ CSS

ប្រើលក្ខណសម្បត្តិព្យុះ CSS ដើម្បីរចនាប្លង់ទំព័របណ្ដាញ

ទ្រព្យសម្បត្តិ CSS គឺជាទ្រព្យសម្បត្តិដ៏សំខាន់បំផុតសម្រាប់ប្លង់។ វាអនុញ្ញាតឱ្យអ្នកដាក់រូបរាងទំព័រវ៉ិបសាយរបស់អ្នកដូចដែលអ្នកចង់ឱ្យពួកគេបង្ហាញប៉ុន្តែដើម្បីប្រើវាអ្នកត្រូវតែយល់អំពីរបៀបដែលវាដំណើរការ។

នៅក្នុងសន្លឹករចនាប័ទ្មលក្ខណសម្បត្តិទូករបស់ CSS មើលទៅដូចនេះ:

.right {float: right; }

នេះប្រាប់កម្មវិធីរុករកថាអ្វីគ្រប់យ៉ាងជាមួយថ្នាក់នៃ "សិទ្ធិ" គួរតែត្រូវបានបណ្តេញទៅខាងស្តាំ។

អ្នកនឹងកំណត់វាដូចនេះ:

class = "right" />

តើអ្នកអាចអណ្តែតជាមួយលក្ខណៈសម្បត្តិអណ្តែត CSS?

អ្នកមិនអាចអណ្តែតរាល់ធាតុនៅលើទំព័រវ៉េប។ អ្នកអាចអណ្តែតធាតុ កម្រិតប្លុក ។ ទាំងនេះគឺជាធាតុដែលផ្ទុកប្លុកនៅលើទំព័រដូចជារូបភាព () កថាខណ្ឌ () ផ្នែក () និងបញ្ជី () ។

ធាតុផ្សេងទៀតដែលប៉ះពាល់អត្ថបទប៉ុន្តែកុំបង្កើតប្រអប់នៅលើទំព័រត្រូវបានគេហៅថា ធាតុក្នុងតួ ហើយមិនអាចត្រូវបានអណ្តែត។ ធាតុទាំងនេះគឺដូចជា span (), break line (), ការសង្កត់ធ្ងន់យ៉ាងខ្លាំង () ឬ italics () ។

តើពួកវាអណ្តែតនៅឯណា?

អ្នកអាចអណ្ដែតធាតុទៅខាងស្តាំឬទៅឆ្វេង។ ធាតុណាមួយដែលធ្វើតាមធាតុដែលអណ្តែតនឹងហូរជុំវិញធាតុដែលអណ្ដែតនៅម្ខាងទៀត។

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

នេះជាធម្មតាមានបន្ទាត់ទីមួយនៃអត្ថបទខាងក្រោមដែលបង្ហាញនៅខាងក្រោមរូបភាព។

តើពួកវានឹងអណ្តែតឆ្ងាយប៉ុនណា?

ធាតុមួយដែលត្រូវបាន អណ្តែត នឹងផ្លាស់ទីទៅខាងឆ្វេងឬខាងស្ដាំនៃធាតុឧបករណ៍ផ្ទុកដូចដែលវាអាចធ្វើបាន។ លទ្ធផលនេះមានស្ថានភាពខុសគ្នាជាច្រើនអាស្រ័យលើរបៀបសរសេរកូដរបស់អ្នក។

ចំពោះឧទាហរណ៏ទាំងនេះខ្ញុំនឹងអណ្តែតធាតុ DIV តូចនៅខាងឆ្វេង:

• ប្រសិនបើធាតុអណ្តែតមិនមានទទឹងដែលបានកំណត់ជាមុនទេវានឹងយកកន្លែងផ្ដេកច្រើនតាមការចាំបាច់និងដែលមានដោយមិនគិតពីអ័ក្ស។ ចំណាំ: កម្មវិធីរុករកខ្លះព្យាយាមដាក់ធាតុនៅក្បែរធាតុដែលថ្លានៅពេលទទឹងមិនត្រូវបានកំណត់ - ជាទូទៅការផ្តល់ធាតុដែលគ្មានធាតុអណ្តែតមានចំនួនតិចតួច។ ដូច្នេះអ្នកគួរតែ កំណត់ទទឹង លើធាតុដែលអណ្តែត។
• ប្រសិនបើធាតុឧបករណ៍ផ្ទុកគឺជាធាតុរបស់ HTML នោះ DIV នឹងត្រូវបានដាក់នៅរឹមខាងឆ្វេងនៃទំព័រ។
• ប្រសិនបើធាតុដាក់ធុងត្រូវបានផ្ទុកដោយវត្ថុផ្សេងទៀតនោះអំបិល DIV នឹងដាក់នៅរឹមខាងឆ្វេងនៃធុង។
• អ្នកអាចដាក់ធាតុ float ហើយវាអាចបណ្តាលឱ្យអណ្តែតបញ្ចប់នៅកន្លែងដែលគួរអោយភ្ញាក់ផ្អើល។ ឧទាហរណ៍ float នេះគឺ DIV អណ្ដែតខាងឆ្វេងនៅខាងស្តាំអណ្ដែត DIV ។
• ធាតុចំហាយនឹងនៅជាប់គ្នាប្រសិនបើមានបន្ទប់នៅក្នុងធុង។ ឧទាហរណ៍កុងតឺន័រនេះមានសមាសភាគ DIV ធំទូលាយ 100px ដែលអណ្តែតនៅក្នុងធុងធំទូលាយ 400px ។

អ្នកថែមទាំងអាចប្រើអ័ក្សដើម្បីបង្កើតប្លង់រូបថត។ អ្នកដាក់រូបភាពតូចៗនីមួយៗ (វាដំណើរការល្អបំផុតនៅពេលដែលទំហំទាំងនោះមានទំហំដូចគ្នា) ក្នុង DIV ជាមួយចំណងជើងនិងអណ្ដែតធាតុ DIV នៅក្នុងធុង។

គ្មានបញ្ហាថាតើបង្អួចកម្មវិធីរុករកមានទំហំប៉ុនណានោះទេរូបភាពតូចៗនឹងមានភាពស្មើគ្នា។

បិទបណ្តែតទឹក

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

ច្បាស់: ឆ្វេង;
ច្បាស់លាស់: ត្រឹមត្រូវ;
ច្បាស់លាស់: ទាំងពីរ;

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

លេងជាមួយនឹងតម្លៃច្បាស់លាស់នៃធាតុផ្សេងគ្នានៅក្នុងឯកសាររបស់អ្នកដើម្បីទទួលបានបែបផែនប្លង់ផ្សេងៗ។

ប្លង់អណ្តែតមួយដែលគួរឱ្យចាប់អារម្មណ៍បំផុតគឺស៊េរីនៃរូបភាពចុះក្រោមជួរឈរខាងស្តាំឬខាងឆ្វេងនៅក្បែរកថាខណ្ឌនៃអត្ថបទ។ បើទោះបីជាអត្ថបទមិនវែងឆ្ងាយដើម្បីរមូររូបភាពអតីតកាលក៏ដោយអ្នកអាចប្រើរូបភាពច្បាស់នៅលើរូបភាពទាំងអស់ដើម្បីប្រាកដថាវាលេចឡើងក្នុងជួរឈរមិនមែនជារូបភាពនៅពីមុខរូបភាពមុនទេ។

HTML (repeat paragraph នេះ):

វាត្រូវបានធ្វើឡើងដោយស្វ័យប្រវត្តិដើម្បីធ្វើឱ្យមានការចាប់អារម្មណ៍ជាថ្មីម្តងទៀតនៅក្នុងការពិសោធន៏។ Cupidatat មិនមែនជាអ្នកប្រណាំងប្រជែងដែលជាអ្នកធ្វើការងារនិងអ្នកដទៃ។

CSS (ដើម្បីអណ្តែតរូបភាពនៅខាងឆ្វេង):

img.float {float: left;
ច្បាស់: ឆ្វេង;
រឹម: 5px;
}

ហើយទៅខាងស្ដាំ:

img.float {float: right;
ច្បាស់លាស់: ត្រឹមត្រូវ;
រឹម: 5px;
}

ប្រើ Floats សម្រាប់ប្លង់

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

• រចនាប្លង់ (នៅលើក្រដាសឬឧបករណ៍ក្រាហ្វិកឬនៅក្នុងក្បាលរបស់ខ្ញុំ) ។
• កំណត់កន្លែងដែលបែងចែកទំព័រនឹងមាន។
• កំណត់ទទឹងនៃកុងតឺន័រផ្សេងៗនិងធាតុនៅក្នុងខ្លួន។
• អ្វីគ្រប់យ៉ាងអណ្ដែត។ សូម្បីតែធាតុឧបករណ៍ផ្ទុកខាងក្រៅត្រូវបានអណ្តែតទៅខាងឆ្វេងដូច្នេះខ្ញុំដឹងពីកន្លែងដែលវានឹងទាក់ទងទៅនឹងច្រកទិដ្ឋភាពកម្មវិធីរុករក។

ដរាបណាអ្នកដឹងពីទទឹង (ភាគរយគឺល្អ) នៃផ្នែកប្លង់របស់អ្នកអ្នកអាចប្រើលក្ខណសម្បត្តិអ័ក្សដើម្បីដាក់ពួកវានៅលើទំព័រ។ ហើយរឿងដ៏ល្អនោះគឺអ្នកមិនចាំបាច់ព្រួយបារម្ភច្រើនអំពីគំរូប្រអប់ដែលខុសពីកម្មវិធី Internet Explorer ឬ Firefox ទេ។