ប្រើថ្នាក់រចនាប័ទ្មនិងលេខសម្គាល់

ថ្នាក់និងលេខសម្គាល់ជំនួយពង្រីក CSS របស់អ្នក

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

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

អ្នកក៏អាចបង្កើតរចនាប័ទ្មមួយដែលអ្នកអាចអនុវត្តទៅធាតុជាច្រើននៅក្នុងឯកសារដោយមិនចាំបាច់ធ្វើឡើងវិញនូវក្បួនរចនាប័ទ្មសម្រាប់វត្ថុនីមួយៗ។ ដើម្បីសម្រេចបាននូវរចនាប័ទ្មដែលចង់បានអ្នកនឹងប្រើគុណលក្ខណៈរបស់ថ្នាក់និង ID ID ។ គុណលក្ខណៈទាំងនេះគឺជាគុណលក្ខណៈសកលដែលអាចត្រូវបានអនុវត្តទៅស្ទើរតែគ្រប់ ស្លាក HTML ។ មានន័យថាទោះបីជាអ្នកជារចនាប័ទ្មកថាខណ្ឌតំណភ្ជាប់បញ្ជីឬបំណែកណាមួយនៃ HTML នៅក្នុងឯកសាររបស់អ្នកអ្នកអាចប្តូរទៅជាគុណលក្ខណៈថ្នាក់និងលេខសម្គាល់។ ជួយអ្នកឱ្យសម្រេចកិច្ចការនេះ!

អ្នកជ្រើសរើសថ្នាក់

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

p {color: # 0000ff; }
p.alert {color: # ff0000; }

រចនាប័ទ្មទាំងនេះនឹងកំណត់ពណ៌នៃកថាខណ្ឌ ទាំងអស់ ទៅជាពណ៌ខៀវ (# 0000ff) ប៉ុន្តែកថាខណ្ឌណាមួយដែលមានគុណលក្ខណៈថ្នាក់នៃ "ការជូនដំណឹង" នឹងជំនួសដោយរចនាប័ទ្មពណ៌ក្រហម (# ff0000) ។ នេះគឺដោយសារតែគុណលក្ខណៈថ្នាក់មានភាពជាក់លាក់ខ្ពស់ជាងច្បាប់ CSS ដំបូងដែលប្រើឧបករណ៍ជ្រើសរើសស្លាកប៉ុណ្ណោះ។

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

នេះគឺជាវិធីដែលអាចប្រើវានៅក្នុងការសម្គាល់ HTML មួយចំនួន:

កថាខណ្ឌនេះត្រូវបានបង្ហាញជាពណ៌ខៀវដែលជាលំនាំដើមសម្រាប់ទំព័រ។

កថាខណ្ឌនេះក៏មានពណ៌ខៀវផងដែរ។

ហើយកថាខណ្ឌនេះត្រូវបានបង្ហាញជាពណ៌ក្រហមព្រោះថាគុណលក្ខណៈថ្នាក់នឹងសរសេរជាន់លើពណ៌ខៀវស្តង់ដារពីរចនាប័ទ្មឧបករណ៍ជ្រើសធាតុ។

ក្នុងឧទាហរណ៍នោះរចនាប័ទ្ម "p.alert" នឹងអនុវត្តតែចំពោះធាតុកថាខណ្ឌដែលប្រើថ្នាក់ "ប្រុងប្រយ័ត្ន" ប៉ុណ្ណោះ។ ប្រសិនបើអ្នកចង់ប្រើថ្នាក់នោះនៅលើធាតុ HTML ច្រើនអ្នកនឹងលុបធាតុ HTML ចេញពីដំបូងនៃ ការហៅស្ទីល (គ្រាន់តែប្រាកដថាឱ្យចាកចេញពីកំឡុងពេល (។ ) នៅនឹងកន្លែង) ដូចនេះ:

.alert {background-color: # ff0000}

ឥឡូវនេះថ្នាក់នេះអាចប្រើបានចំពោះធាតុណាមួយដែលត្រូវការវា។ បំណែកនៃ HTML របស់អ្នកដែលមានតម្លៃគុណលក្ខណៈថ្នាក់នៃ "ប្រុងប្រយ័ត្ន" នឹងទទួលបានរចនាប័ទ្មនេះ។ នៅក្នុង HTML ខាងក្រោមយើងមានកថាខណ្ឌនិងក្បាលទី 2 ដែលប្រើថ្នាក់ "ប្រុងប្រយ័ត្ន" ។ ទាំងពីរនេះនឹងមានពណ៌ផ្ទៃខាងក្រោយពណ៌ក្រហមផ្អែកលើ CSS ដែលយើងទើបតែបង្ហាញ។

កថាខណ្ឌនេះនឹងត្រូវសរសេរជាពណ៌ក្រហម។

និង h2 នេះក៏នឹងមានពណ៌ក្រហម។

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

ឧបករណ៍ជ្រើសអត្តសញ្ញាណ

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

អ្នកអាចផ្តល់ឱ្យផ្នែកនេះនូវគុណលក្ខណៈ ID នៃ "ព្រឹត្តិការណ៍" ហើយបន្ទាប់មកប្រសិនបើអ្នកចង់គូសបញ្ជាក់ការបែងចែកនោះដែលមានស៊ុមពណ៌ខ្មៅ 1 ភីចសែលអ្នកសរសេរលេខកូដសម្គាល់ដូចនេះ:

# event {ព្រំដែន: 1px រឹង # 000; }

បញ្ហាប្រឈមជាមួយ ជម្រើសលេខសម្គាល់ គឺថាពួកគេមិនអាចធ្វើម្តងទៀតនៅក្នុងឯកសារ HTML បានទេ។ វាត្រូវតែមានតែមួយ (អ្នកអាចប្រើលេខសម្គាល់ដូចគ្នានៅលើទំព័រច្រើននៃវែបសាយត៍របស់អ្នកប៉ុន្តែមានតែម្ដងគត់ក្នុងឯកសារ HTML នីមួយៗ) ។ ដូច្នេះប្រសិនបើអ្នកមានព្រឹត្ដិការណ៍ 3 ដែលអ្នកត្រូវការព្រំដែននេះអ្នកត្រូវផ្តល់ឱ្យពួកគេនូវគុណលក្ខណៈ ID នៃ "event1" "event2" និង "event3" និងរចនាបថនីមួយៗ។ ដូច្នេះវានឹងមានភាពងាយស្រួលជាងមុនក្នុងការប្រើគុណលក្ខណៈថ្នាក់ដែលបានលើកឡើងខាងលើនៃ "ព្រឹត្តិការណ៍" និងរចនាប័ទ្មពួកគេទាំងអស់នៅពេលតែមួយ។

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

តំបន់មួយដែលជាកន្លែងដែលគុណលក្ខណៈលេខសម្គាល់ចូលមកក្នុងការលេងគឺនៅពេលដែលអ្នកចង់បង្កើតទំព័រដែលមានតំណយុថ្កានៅក្នុងតំណ។ ឧទាហរណ៍ប្រសិនបើអ្នកមានគេហទំព័ររចនាប័ទ្ម parallax ដែលផ្ទុកមាតិកាទាំងអស់នៅលើទំព័រតែមួយជាមួយតំណដែល "លោត" ទៅផ្នែកផ្សេងៗនៃទំព័រនោះ។ នេះត្រូវបានធ្វើដោយប្រើគុណលក្ខណៈ ID និងតំណអត្ថបទដែលប្រើតំណយុថ្កាទាំងនេះ។

អ្នកគ្រាន់តែបន្ថែមគុណលក្ខណៈគុណលក្ខណៈដែលមានបន្តដោយនិមិត្តសញ្ញា # ទៅគុណលក្ខណៈ href នៃតំណដូចនេះ:

នេះគឺជាតំណភ្ជាប់

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

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

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