ដាក់ទាក់ទង - វាគឺជាអ្វី? រៀបរាប់លំអិត

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

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

CSS ជាអ្វី?

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

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

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

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

តើទ្រព្យសម្បត្តិទីតាំងនេះ?

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

តើអ្វីទៅជាតម្លៃអាចអចលនទ្រព្យទីតាំង?

ទ្រព្យសម្បត្ដិរបស់យើងអាចទទួលយកតម្លៃផ្សេងគ្នាជាច្រើន, មានតែប្រាំ។ ខាងក្រោមនេះជាសេចក្តីណែនាំនៃការគ្នាគឺ:

• ទីតាំងមរតក។ លក្ខណៈពិសេសនេះអនុញ្ញាតឱ្យអ្នកចម្លងទិន្នន័យនៅលើទីតាំងនៃធាតុដែលជាឪពុកម្តាយមួយ។ ឧទាហរណ៍ប្រសិនបើអ្នកមាន div ដែលមានទីតាំងទាក់ទងជាមួយបានបញ្ជាក់មួយ, បន្ទាប់មកចូលទៅក្នុងវាជាមួយនឹងតម្លៃមរតកឯកសារ IMG នឹងត្រូវបានកំណត់ដើម្បីទាក់ទង។
• ដាក់ឋិតិវន្ត។ តម្លៃនេះត្រូវបានផ្ដល់ទៅឱ្យធាតុទាំងអស់ដោយស្វ័យប្រវត្តិទេលុះត្រាតែបានបញ្ជាក់ទៀតទេ។ ធាតុនេះសមនឹងចូលទៅក្នុងទីតាំងដូចដែលបានរៀបរាប់នៅក្នុងកូដនិងមិនមានសម្រាប់ភាពខុសគ្នានៃ "ជរ" មួយដែលអនុញ្ញាតឱ្យផ្លាស់ប្តូរទីតាំងរបស់ខ្លួន។
• ទីតាំងដាច់ខាត។ ដោយតម្លៃនេះអចលនទ្រព្យទីតាំងគឺត្រូវបានប្រើជាញឹកញាប់នៅក្នុងករណីដែលជាកន្លែងដែលវាគឺជាការចាំបាច់ដើម្បីបង្កើតជាធាតុ "អណ្តែត" ។ ជាមួយនឹងតម្លៃដែលបានផ្ដល់នៃធាតុអចលនទ្រព្យគឺជា«មើលមិនឃើញ "សម្រាប់សមាសភាគផ្សេងទៀតនៃទំព័រ។ នោះគឺពួកគេត្រូវបានរៀបចំដូចជាប្រសិនបើធាតុដាច់ខាតរបស់យើងមិនមានទេ។ ខ្លួនគាត់ផ្ទាល់នឹងតែងតែមាននៅក្នុងកន្លែងដោយមិនគិតពីរបៀបឆ្ងាយបានរមូរទំព័រ។
• ទីតាំងថេរ។ ក្នុងវិធីជាច្រើន, តម្លៃនេះគឺស្រដៀងគ្នាទៅនឹងមុនមួយ, ទោះជាយ៉ាងណាខណៈពេលដែលធាតុដាច់ខាតនេះត្រូវបានគេចងទៅមេ, ថេរប្រើតែកូអរដោនេនៃជ្រុងខាងឆ្វេងនៃអេក្រង់កម្មវិធីរុករកនេះមិនអើពើនឹងការនៅសល់នៃធាតុដែលដើរមុនវាបាន។
• ជាចុងក្រោយ, ដាក់ទាក់ទង។ នេះអនុញ្ញាតឱ្យធាតុប្រភេទតម្លៃកំណត់ទីតាំងទាក់ទងទៅនឹងផ្សេងទៀតដែលអាចមានប្រយោជន៍សម្រាប់ការបង្កើតការសម្របសម្រួលមួយដែលសម្គាល់ហៅថានៅក្នុង "កៅស៊ូ" ជារឿងធម្មតា។ ជាមួយនឹងការអចលនទ្រព្យនេះធាតុនេះនឹង "ជំរុញ" ផ្សេងទៀត, ដោយគ្មានការបាត់បង់សមត្ថភាពក្នុងការផ្លាស់ប្តូរទីតាំងរបស់ខ្លួននៅលើទំព័រនេះ។

ធ្វើការជាមួយទីតាំងនៅក្នុងកម្មវិធីរុករកផ្សេងគ្នា

មិនមានកម្មវិធីរុករកទាំងអស់គឺមានឆបគ្នាស្មើភាពគ្នា។ ខណៈពេលដែលកម្មវិធីជំនួសបំផុតសម្រាប់ការស្វែងអ៊ីនធឺណិដោយគ្មានការរអាក់រអួលណាមួយបានដឹងថាតម្លៃនៃទីតាំងគឺជាការពិតពិត, "រ៉ាំរ៉ៃពិសេស»កម្មវិធី Internet Explorer បានចាត់ទុកទ្រព្យអាស្រ័យលើកំណែរបស់ខ្លួន។

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

នៅសល់របស់អ្នកសង្កេតការណ៍យ៉ាងស្ងាមស្ងាត់ដោះស្រាយជាវិជ្ជមានជាមួយនឹងកំណែដំបូងដោយមានករណីលើកលែងនៃការល្ខោនដែលបានទទួលការគាំទ្រពីលក្ខណៈសម្បត្តិនេះនៅក្នុងការប្រែប្រួលរបស់ខ្លួន 4 បោះពុម្ភផ្សាយនៅក្នុងពាក់កណ្តាលទសវត្សរ៍ទី 90 នេះ។

ធ្វើការជាមួយទីតាំងក្នុង Javascript

នៅក្នុងការពិត, រឿងរ៉ាវនៃរបៀបធ្វើការជាមួយនឹងអចលនទ្រព្យនៅ Javascript នៅក្នុងទីតាំងដែលត្រូវបាននោះយើងបានរួមបញ្ចូលសម្រាប់តែប្រយោជន៍នៃការអនុវត្តច្បាប់នេះ។ ដោយសារតែទ្រព្យសម្បត្តិនេះមិនមានតួអក្សរពិសេសណាមួយនៅក្នុងពានរង្វាន់នេះអ្នកអាចប្រើ JS ដោយគ្មានការផ្លាស់ប្តូរណាមួយ, ឧទាហរណ៍ដើម្បីកំណត់ទីតាំង div ត្រូវប្រែប្រួល, គួរតែរួមបញ្ចូលបន្ទាត់មួយដូចនេះ: div.style.position = 'សាច់ញាតិ។

ដូចដែលអ្នកអាចឃើញវាជាការសាមញ្ញណាស់។

ហេតុអ្វីបានជាទីតាំងសគុណទាក់ទងការយកចិត្តទុកដាក់ពិសេស?

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

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

នៅពេលដែលអ្នកគួរតែប្រើទីតាំងទាក់ទង?

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

ទាំងនេះ "ល្បិច" ត្រូវបានអនុវត្តតាមរយៈការអនុញ្ញាត JavaScript គឺជា, ឬប្រសិនបើអ្នកមានបំណងសម្រាប់ការដាក់រីកចម្រើនតាមរយៈលក្ខណៈសម្បត្តិរបស់ CSS3 ដែលអនុញ្ញាតឱ្យអ្នកលៃតម្រូវការផ្លាស់ប្តូររង្វិលនៅក្នុងតម្លៃនៃអថេរណាមួយ។

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

ឧទាហរណ៍នៃការប្រើចំណាត់ថ្នាក់ទាក់ទង

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

ចូរចាប់ផ្តើមជាមួយ "រត់ចេញ" បន្ទាត់។ ឧបមាថាអ្នកមានតម្រូវការចាំបាច់សម្រាប់ធាតុដែលនឹង "ការធ្វើដំណើរ" ដោយសារតែគែមឆ្វេងនៃអេក្រង់និងយឺតផ្លាស់ទីវាទៅផ្នែកខាងស្ដាំមួយ។ ដើម្បីអនុវត្តបែបនេះជា "យន្តការ" គួរតែកំណត់ទីតាំង: ទាក់ទង; ខាងឆ្វេង: -100px, ដែលជាកន្លែងដែល -100 - ចំនួនប្រហាក់ប្រហែលនៃភីកសែលនេះ constituting ទទឹងប្លុក។ រចនាប័ទ្មនេះនឹងអនុញ្ញាតឱ្យអ្នកលាក់ឯកតានៅខាងក្រៅនៃអេក្រង់, ដាក់វានៅក្នុង "ចាប់ផ្តើមនៅទីតាំង" ។ ឥឡូវនេះអ្នកអាចប្រើស្គ្រីបដែលនឹងបង្កើនការគ្រប់មិល្លីវិនាទីចំនួនបានចាកចេញតម្លៃអចលនទ្រព្យក្នុងមួយឯកតាដែលវែងដូចដែលវាមិនក្លាយទៅជាស្មើទៅនឹងទទឹងរបស់បង្អួចកម្មវិធីរុករកដកទទឹងនៃធាតុនេះ។ លទ្ធផលគឺជាឯកតាដែលបានមកចេញពីគែមខាងឆ្វេងនេះ rolled នៅទូទាំងអេក្រង់និង "ចត" នៅក្នុងដៃខាងស្តាំរបស់គាត់។

ឧទាហរណ៍មួយទៀតអនុញ្ញាតឱ្យអ្នកបង្កើតធាតុ "ទាក់ទង-ដាច់ខាត" ។ ឧទាហរណ៍អ្នកអាចបញ្ចូលដាច់ខាតខាងក្នុងមួយផ្សេងទៀតដែលមានទាក់ទងទីតាំង។ ជាលទ្ធផលយើងមានប្លុក "សាច់ញាតិ" ដែលមិនមានទំហំដែលដាច់ខាតត្រូវបានចារឹក, ឥឡូវនេះគឺអាចបង្ហាញខ្លួនវានៅទីតាំងឯករាជ្យនៃធាតុមុន។

ជាធម្មតានៅពេលដែលប្រើកំហុសទីតាំងដែលទាក់ទង

នេះជាកំហុសទូទៅបំផុតនៅពេលដែលប្រើទាក់ទងទីតាំងនោះគឺថាអ្នករចនាបណ្ដាញជាច្រើនដែលភ្លេចអំពីសមត្ថភាពដើម្បីកក់កន្លែងមួយនៅក្នុងអង្គភាពដែលអាចមាននៅគ្រប់ទីកន្លែង។ ឧទាហរណ៍ប្រសិនបើអ្នកមានធំដោយស្មើភាព, បានដាក់នៅខាងក្រៅនៃអេក្រង់និងមានទីតាំងទាក់ទង, នៅក្នុងកន្លែងរបស់វានឹងក្លាយជា gaping "រន្ធ" ។ ទោះយ៉ាងណាពេលខ្លះសូម្បីតែលក្ខណៈសម្បត្តិនេះត្រូវបានបង្កើតឱ្យមានការពិបាកខ្លាំងមួយចំនួនអាចត្រូវបានប្រើសម្រាប់ការល្អ, ឧទាហរណ៍, ការបង្កើតជាផលប៉ះពាល់គួរឱ្យចាប់អារម្មណ៍របស់ "ខ្លួនឯងដំឡើង-" នៃតំបន់បណ្តាញ, ដែលជាកន្លែងដែលទាំងអស់នៃប្លុករបស់វាត្រូវបានដាក់ជាបន្តបន្ទាប់នៅក្នុងទីតាំងកំពូល: 0; ខាងឆ្វេង: 0; អាវ។ អ៊ី។ ទីតាំងដើមរបស់ខ្លួន។