ដាក់ក្រុមជ្រើសរើស CSS ច្រើន

ក្រុមជ្រើសរើស CSS ច្រើនដើម្បីបង្កើនល្បឿនផ្ទុក

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

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

ជ្រើសរើសក្រុម

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

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

ជាទូទៅល្បឿនផ្ទុកខាងលើជាមធ្យមមានតិចជាង 3 វិនាទី។ 3 ទៅ 7 វិនាទីគឺអំពីមធ្យមនិងច្រើនជាង 7 វិនាទីគឺយឺតពេក។ លេខទាបទាំងនេះមានន័យថាដើម្បីសម្រេចវាជាមួយគេហទំព័ររបស់អ្នកអ្នកត្រូវតែធ្វើអ្វីគ្រប់យ៉ាងដែលអ្នកអាចធ្វើបាន! នេះជាមូលហេតុដែលអ្នកអាចជួយរក្សាវែបសាយត៍របស់អ្នកឱ្យលឿនតាមរយៈការប្រើ CSS ដែលជាក្រុម។

វិធីជ្រើសរើសក្រុម CSS Selectors

ដាក់ក្រុមតម្រង CSS រួមគ្នានៅក្នុងសន្លឹករចនាប័ទ្មរបស់អ្នកអ្នក ប្រើសញ្ញាក្បៀសដើម្បីបំបែកឧបករណ៍ជ្រើសរើសជាក្រុម នៅក្នុងរចនាប័ទ្ម។ នៅក្នុងឧទាហរណ៍ខាងក្រោមរចនាប័ទ្មប៉ះពាល់ដល់ធាតុ p និង div:

div, p {color: # f00; }

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

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

p.red, #sub {color: # f00; }

ដូច្នេះរចនាប័ទ្មនេះអនុវត្តទៅកថាខណ្ឌណាមួយជាមួយគុណលក្ខណៈថ្នាក់នៃ "ក្រហម" និងធាតុណាមួយ (ដោយសារតែយើងមិនបានបញ្ជាក់ប្រភេទណាមួយ) ដែលមានគុណលក្ខណៈ ID នៃ "អនុ" ។

អ្នកអាចដាក់លេខរៀងនៃចំនួនជ្រើសរើសរួមគ្នាបានរួមបញ្ចូលទាំងឧបករណ៍ជ្រើសរើសដែលមានតែពាក្យនិងឧបករណ៍ជ្រើសចំរៀក។ ឧទាហរណ៏នេះរួមបញ្ចូលទាំងបួនជម្រើសផ្សេងគ្នា:

p, .red, #sub, div a: link {color: # f00; }

ដូច្នេះក្បួន CSS នេះនឹងអនុវត្តដូចខាងក្រោម:

• ធាតុកថាខណ្ឌណាមួយ
• ធាតុណាមួយដែលមានថ្នាក់នៃ "ក្រហម"
• ធាតុណាមួយដែលមានលេខសម្គាល់ "អនុ"
• "តំណ" ថ្នាក់ក្លែងក្លាយនៃធាតុយុថ្កាដែលជាឌីនសង់នៃផ្នែកមួយ។

ឧបករណ៍ជ្រើសចុងក្រោយដែលជាឧបករណ៍ជ្រើសរើសបរិវេណ។ អ្នកអាចឃើញវាត្រូវបានបញ្ចូលគ្នាយ៉ាងងាយស្រួលជាមួយនឹងឧបករណ៍ជ្រើសរើសផ្សេងទៀតនៅក្នុងក្បួន CSS នេះ។ ជាមួយច្បាប់នោះយើងកំពុងកំណត់ពណ៌ # f00 (ដែលមានពណ៌ក្រហម) នៅលើឧបករណ៍ជ្រើសទាំង 4 នេះដែលល្អជាងដើម្បីជ្រើសរើសឧបករណ៍ជ្រើស 4 ដាច់ដោយឡែកដើម្បីសម្រេចបានលទ្ធផលដូចគ្នា។

អត្ថប្រយោជន៍មួយទៀតនៃការបែងចែកជាក្រុមគឺថាប្រសិនបើអ្នកត្រូវការផ្លាស់ប្តូរអ្នកអាចកែសម្រួលក្បួន CSS តែមួយគត់ជំនួសឱ្យលេខច្រើន។ នេះមានន័យថាវិធីសាស្រ្តនេះជួយសន្សំសំចៃទំងន់ទំព័រនិងពេលវេលារបស់អ្នកដើម្បីថែរក្សាវែបសាយត៍នាពេលអនាគត។

កម្មវិធីជ្រើសរើសណាមួយអាចត្រូវបានដាក់ជាក្រុម

ដូចដែលអ្នកអាចមើលឃើញពីឧទាហរណ៍ខាងលើអ្នកជ្រើសរើសសុពលភាពណាមួយអាចដាក់នៅក្នុងក្រុមហើយធាតុទាំងអស់នៅក្នុងឯកសារដែលផ្គូផ្គងនឹងធាតុដែលបានដាក់ជាក្រុមនឹងមានរចនាប័ទ្មដូចគ្នាដោយផ្អែកលើលក្ខណសម្បត្តិរចនាប័ទ្មនោះ។

មនុស្សខ្លះចូលចិត្តរាយធាតុដែលបានដាក់ជាក្រុមលើបន្ទាត់ដាច់ដោយឡែកសម្រាប់ភាពច្បាស់លាស់នៅក្នុងកូដ។ រូបរាងនៅលើវេបសាយនិងល្បឿនផ្ទុកនៅតែដដែល។ ឧទាហរណ៍អ្នកអាចផ្សំរចនាប័ទ្មដែលបំបែកដោយសញ្ញាក្បៀសទៅក្នុងលក្ខណសម្បត្តិរចនាប័ទ្មមួយក្នុងបន្ទាត់មួយនៃកូដ:

ទី, td, p.red, div # firstred {color: red; }

ឬអ្នកអាចរាយរចនាប័ទ្មនៅលើបន្ទាត់នីមួយៗដើម្បីភាពច្បាស់លាស់:

ទី,
td,
p.red,
div # firstred
{
ពណ៌: ក្រហម;
}

វិធីសាស្រ្តដែលអ្នកប្រើដើម្បីដាក់ជាក្រុមជំរើស CSS ជាច្រើនបង្កើនល្បឿនគេហទំព័ររបស់អ្នកនិងធ្វើឱ្យវាកាន់តែងាយស្រួលក្នុងការគ្រប់គ្រងរចនាប័ទ្មរយៈពេលវែង។

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