តើអ្វីទៅជាគនសម្រាប់អ្នកជ្រើសរើស CSS?

ហេតុអ្វីបានជាសញ្ញាក្បៀសសាមញ្ញជួយសម្រួលកូដកម្ម

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

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

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

សញ្ញាក្បៀសនិង CSS

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

ឧទាហរណ៍សូមមើល CSS មួយចំនួនខាងក្រោម។

ដំបូង {ពណ៌: ក្រហម; }
td {ពណ៌: ក្រហម; }
p.red {color: red; }
div # firstred {color: red; }

ជាមួយវាក្យសម្ព័ន្ធនេះអ្នកកំពុងនិយាយថាអ្នកចង់ស្លាក ទី , ស្លាក td , ស្លាកកថាខណ្ឌជាមួយពណ៌ក្រហមនិងស្លាក div ជាមួយលេខសម្គាល់ដំបូងទាំងអស់ដើម្បីឱ្យមានពណ៌រចនាប័ទ្មពណ៌ក្រហម។

នេះគឺ CSS ដែលអាចទទួលយកបានយ៉ាងល្អឥតខ្ចោះប៉ុន្តែមានគុណវិបត្តិពីរយ៉ាងក្នុងការសរសេរវាតាមវិធីនេះ:

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

ការប្រើក្បៀសដើម្បីជ្រើសរើសអ្នកបំបែក

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

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

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

មិនត្រឹមតែវិធីសាស្រ្តនេះធ្វើឱ្យមានភាពជឿនលឿន, ឯកសារ CSS ស្អាត, វាក៏ធ្វើឱ្យបច្ចុប្បន្នភាពនាពេលអនាគតកាន់តែងាយស្រួល។ ឥឡូវនេះប្រសិនបើអ្នកចង់ផ្លាស់ប្តូរពណ៌ពីក្រហមទៅខៀវអ្នកគ្រាន់តែធ្វើការផ្លាស់ប្តូរទីតាំងមួយជំនួសឱ្យច្បាប់ដើមនៃរចនាប័ទ្ម 4 ដែលយើងមាន! គិតអំពីការសន្សំសំចៃពេលវេលាទាំងនេះនៅលើឯកសារ CSS ទាំងមូលហើយអ្នកអាចមើលឃើញពីរបៀបដែលវានឹងសន្សំសំចៃពេលវេលានិងទីធ្លារបស់អ្នកក្នុងរយៈពេលវែង!

វាក្យសម្ពន្ធវាក្យសម្ពន្ធ

មនុស្សមួយចំនួនជ្រើសរើសដើម្បីបង្កើត CSS ឱ្យកាន់តែច្បាស់តាមរយៈការបែងចែកឧបករណ៍ជ្រើសរើសនីមួយៗនៅលើបន្ទាត់ផ្ទាល់ខ្លួនរបស់វាជំនួសឱ្យការសរសេរវាទាំងអស់នៅលើបន្ទាត់មួយដូចខាងលើ។ នេះជារបៀបដែលនឹងត្រូវបានធ្វើ:

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

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

ដោយប្រើសញ្ញាក្បៀសរវាងអ្នកជ្រើសរើសរបស់អ្នកអ្នកបង្កើតសន្លឹករចនាប័ទ្មដែលកាន់តែងាយស្រួលជាងមុនដែលងាយស្រួលក្នុងការធ្វើបច្ចុប្បន្នភាពនាពេលអនាគតហើយវាងាយស្រួលក្នុងការអាននៅថ្ងៃនេះ!

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