របៀបប្រើច្រើនថ្នាក់ CSS នៅលើធាតុតែមួយ

អ្នកមិនត្រូវបានកំណត់ចំពោះថ្នាក់ CSS តែមួយគត់ក្នុងមួយធាតុទេ។

សន្លឹករចនាប័ទ្មល្បាក់ (CSS) អនុញ្ញាតឱ្យអ្នកកំណត់រូបរាងធាតុដោយភ្ជាប់ទៅនឹងគុណលក្ខណៈដែលអ្នកអនុវត្តចំពោះធាតុនោះ។ គុណលក្ខណៈទាំងនេះអាចជាលេខសម្គាល់ឬជាថ្នាក់និងដូចគុណលក្ខណៈទាំងអស់ពួកគេបន្ថែមព័ត៌មានមានប្រយោជន៍ដល់ធាតុដែលពួកគេភ្ជាប់។ អាស្រ័យលើគុណលក្ខណៈដែលអ្នកបន្ថែមទៅធាតុមួយអ្នកអាចសរសេរឧបករណ៍ជ្រើស CSS ដើម្បីអនុវត្តរចនាប័ទ្មដែលចាំបាច់ដែលត្រូវការដើម្បីសម្រេចបាននូវរូបរាងនិងអារម្មណ៍សម្រាប់ធាតុនោះនិងវេបសាយទាំងមូល។

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

ថ្នាក់បង្រៀនតែមួយឬច្រើនក្នុង CSS?

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

ប្រសិនបើអ្នកត្រូវការកំណត់ថ្នាក់ច្រើនទៅធាតុមួយអ្នកអាចបន្ថែមថ្នាក់បន្ថែមហើយបំបែកពួកគេដោយដកឃ្លានៅក្នុងគុណលក្ខណៈរបស់អ្នក។

ឧទាហរណ៍កថាខណ្ឌនេះមានបីថ្នាក់:

pullquote featured left "> នេះនឹងជាអត្ថបទនៃកថាខណ្ឌ

នេះកំណត់ថ្នាក់បីដូចខាងក្រោមនៅលើស្លាកកថាខណ្ឌ:

  • Pullquote
  • លក្ខណៈពិសេស
  • ឆ្វេង

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

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

នៅពេលអ្នកមានតម្លៃថ្នាក់របស់អ្នកនៅក្នុង HTML អ្នកអាចចាត់ថ្នាក់ទាំងនេះជាថ្នាក់នៅក្នុង CSS របស់អ្នកហើយអនុវត្តរចនាប័ទ្មដែលអ្នកចង់បន្ថែម។ ឧទាហរណ៍។

។ សន្លឹកកិច្ចការ {... }
។ លក្ខណៈ {... }
p.left {... }

នៅក្នុងឧទាហរណ៍ទាំងនេះការប្រកាស CSS និងគុណតម្លៃនឹងស្ថិតនៅក្នុងដង្កៀបអង្កាញ់ដែលជារបៀបដែលរចនាប័ទ្មទាំងនោះនឹងត្រូវបានអនុវត្តទៅឧបករណ៍ជ្រើសសមស្រប។

ចំណាំ - ប្រសិនបើអ្នក កំណត់ថ្នាក់មួយទៅធាតុជាក់លាក់ (ឧទាហរណ៍ p.left) អ្នកនៅតែអាចប្រើវាជាផ្នែកនៃបញ្ជីថ្នាក់។ ទោះជាយ៉ាងណាត្រូវដឹងថាវានឹងប៉ះពាល់ដល់ធាតុទាំងនោះដែលត្រូវបានបញ្ជាក់នៅក្នុង CSS ។ និយាយម្យ៉ាងទៀតរចនាប័ទ្ម p.left នឹងអនុវត្តតែកថាខណ្ឌជាមួយថ្នាក់នេះចាប់តាំងពីអ្នកជ្រើសរើសរបស់អ្នកត្រូវបានគេនិយាយថាអនុវត្តវាទៅ "កថាខណ្ឌដែលមានតម្លៃថ្នាក់នៃ 'ខាងឆ្វេង'" ។ ផ្ទុយទៅវិញឧបករណ៍ជ្រើសពីរផ្សេងទៀតនៅក្នុងឧទាហរណ៍មិនបានបញ្ជាក់ធាតុជាក់លាក់ទេដូច្នេះពួកគេនឹងអនុវត្តចំពោះធាតុណាមួយដែលប្រើតម្លៃថ្នាក់ទាំងនោះ។

គុណសម្បត្តិនៃថ្នាក់ច្រើន

ថ្នាក់ច្រើនអាចធ្វើឱ្យមានភាពងាយស្រួលក្នុងការបន្ថែមបែបផែនពិសេសទៅធាតុដោយមិនចាំបាច់បង្កើតរចនាប័ទ្មថ្មីមួយសម្រាប់ធាតុនោះ។

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

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

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

ថ្នាក់ច្រើននិក្ខេបបទនិង JavaScript

អត្ថប្រយោជន៍មួយទៀតក្នុងការប្រើប្រាស់ថ្នាក់ច្រើនគឺថាវាផ្តល់ឱ្យអ្នកនូវលទ្ធភាពធ្វើអន្តរកម្មបន្ថែមទៀត។

អ្នកអាចអនុវត្តថ្នាក់ថ្មីទៅធាតុដែលមានស្រាប់ដោយប្រើ JavaScript ដោយមិនចាំបាច់ដកចេញនូវថ្នាក់ដំបូងណាមួយ។ អ្នកក៏អាចប្រើថ្នាក់ដើម្បីកំណត់ និយមន័យនៃធាតុមួយ ។ នេះមានន័យថាអ្នកអាចបន្ថែមលើថ្នាក់បន្ថែមទៀតដើម្បីកំណត់ថាតើធាតុនោះមានន័យយ៉ាងដូចម្តេច។ នេះជារបៀប Microformats ដំណើរការ។

គុណវិបត្តិនៃថ្នាក់ច្រើន

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

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

អ្នកត្រូវដឹងអំពីភាពជាក់លាក់ទោះបីជាគុណលក្ខណៈដែលបានអនុវត្តចំពោះធាតុមួយនោះ!

ដោយប្រើឧបករណ៍ដូចជាឧបករណ៍ Webmaster នៅក្នុង Chrome អ្នកអាចមើលឃើញយ៉ាងងាយស្រួលនូវរបៀបដែលថ្នាក់របស់អ្នកប៉ះពាល់រចនាប័ទ្មរបស់អ្នកហើយជៀសវាងបញ្ហានៃរចនាប័ទ្មនិងគុណលក្ខណៈដែលខុសគ្នា។

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