ឧទាហរណ៍ខាងក្រោមនឹងមិនដំណើរការទេ៖

កថាខណ្ឌនិងនៅក្នុងវា។ ខ្លាញ់ធាតុហើយនៅទីនេះ ទំនោរធាតុ។

នៅទីនេះ ខ្លាញ់និង បានសង្កត់ធ្ងន់ធាតុ, ច្រើនទៀត ទំនោរ.

ឧទាហរណ៍ជាក់ស្តែងបន្ថែមទៀត

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

វាត្រូវបានណែនាំឱ្យបង្កើនរឹមកំពូល (ទ្រព្យសម្បត្តិរឹមកំពូល) ។ ការចូលបន្ទាត់នៃ 30px នឹងធ្វើឱ្យអត្ថបទអាចអានបាន។ ប៉ុន្តែប្រសិនបើស្លាក

មកភ្លាមៗបន្ទាប់ពី

ហើយវាអាចនៅដើមអត្ថបទ ខាងលើការចូលបន្ទាត់ខាងលើស្លាក

នឹងលែងត្រូវការតទៅទៀត។ បញ្ហានេះអាចត្រូវបានដោះស្រាយដោយប្រើឧបករណ៍ជ្រើសរើសធាតុដែលនៅជាប់គ្នា។

នេះ​ជា​កូដ html ដែល​មាន​ឧទាហរណ៍​អំពី​របៀប​ដែល​ឧបករណ៍​ជ្រើស​ធាតុ​នៅ​ជាប់​គ្នា​ដំណើរការ។

សួស្តី!

ក្បាល h2

ក្បាល h2

អត្ថបទនៃកថាខណ្ឌគឺនិយាយអំពីដំណើរផ្សងព្រេងមិនគួរឱ្យជឿ។

ក្បាល h2

អត្ថបទនៃកថាខណ្ឌគឺនិយាយអំពីដំណើរផ្សងព្រេងមិនគួរឱ្យជឿ។

ក្បាល h2

អត្ថបទនៃកថាខណ្ឌគឺនិយាយអំពីដំណើរផ្សងព្រេងមិនគួរឱ្យជឿ។

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

និង

វាក៏គួរអោយកត់សំគាល់ផងដែរថាដើម្បីកាត់បន្ថយការចូលបន្ទាត់វាងាយស្រួលប្រើតម្លៃអវិជ្ជមាន។

សួស្តី!

ក្បាល h2

អត្ថបទនៃកថាខណ្ឌគឺនិយាយអំពីដំណើរផ្សងព្រេងមិនគួរឱ្យជឿ។

ក្បាល h2

អត្ថបទនៃកថាខណ្ឌគឺនិយាយអំពីដំណើរផ្សងព្រេងមិនគួរឱ្យជឿ។

ក្បាល h2

អត្ថបទនៃកថាខណ្ឌគឺនិយាយអំពីដំណើរផ្សងព្រេងមិនគួរឱ្យជឿ។

ក្បាល h2

អត្ថបទនៃកថាខណ្ឌគឺនិយាយអំពីដំណើរផ្សងព្រេងមិនគួរឱ្យជឿ។

ឥឡូវនេះជាឧទាហរណ៍នៃរបៀបប្រើឧបករណ៍ជ្រើសរើសដែលនៅជាប់គ្នា ដើម្បីជ្រើសរើសធាតុទាំងអស់នៃបញ្ជី លើកលែងតែធាតុទីមួយ។

• បញ្ជីធាតុលេខ 1 ។
• បញ្ជីរាយនាមលេខ 2 ។
• បញ្ជីលេខ ៣ ។
• បញ្ជីលេខ ៤ ។

នេះជាអ្វីដែលនឹងកើតឡើងជាលទ្ធផលនៃឧទាហរណ៍នេះ៖

រូបភាពទី 1. ឧទាហរណ៍លេខ 5 នៅកន្លែងធ្វើការ។

ជំរាបសួរអ្នកអានជាទីស្រឡាញ់! យើងបន្តប្រធានបទនៃអ្នកជ្រើសរើស CSS ហើយថ្ងៃនេះខ្ញុំនឹងព្យាយាមពន្យល់ឱ្យច្បាស់អំពីអ្វីដែលពួកគេមាន ឧបករណ៍ជ្រើសរើស CSS ដែលនៅជិតហើយតើវាមានតួនាទីអ្វី? ឧបករណ៍ជ្រើសរើសសកល. ចំណេះដឹងអំពីយន្តការសម្រាប់ការប្រើប្រាស់ឧបករណ៍ CSS គ្រប់ប្រភេទនឹងអនុញ្ញាតឱ្យអ្នកសម្រេចបាននូវខ្លឹមសារដ៏ល្អប្រសើរ និងបង្រួមនៃឯកសារដែលរចនាប័ទ្មធាតុត្រូវបានពិពណ៌នា ដែលជាធាតុផ្សំមួយនៃការផ្សព្វផ្សាយធនធានរបស់អ្នកដោយជោគជ័យ ដូច្នេះក្នុងករណីណាក៏ដោយកុំឱ្យខកខានឱកាសដើម្បី ទទួលបានព័ត៌មានមានប្រយោជន៍អំពីគោលគំនិតនៃឧបករណ៍ជ្រើសរើស និងប្រភេទផ្សេងៗរបស់វា។

ប្រសិនបើអ្នកចងចាំ និងធ្វើតាមការបោះពុម្ពផ្សាយដោយប្រុងប្រយ័ត្ន នោះអ្នកជ្រើសរើសប្រភេទជាច្រើនត្រូវបានពិចារណារួចហើយ។ ; . ជា​ថ្មី​ម្តង​ទៀត ខ្ញុំ​សូម​ដាស់តឿន​អ្នក​កុំ​ឲ្យ​ធ្វេស​ប្រហែស​ក្នុង​ការ​សិក្សា​មូលដ្ឋាន​គ្រឹះ​នៃ CSS ព្រោះ​វា​នឹង​ផ្តល់​អត្ថប្រយោជន៍​ច្រើន​ដល់​អ្នក​នា​ពេល​អនាគត។

ឧបករណ៍ជ្រើសរើសជាសកល

ឥឡូវនេះ ចូរយើងផ្លាស់ទីដោយផ្ទាល់ទៅខ្លឹមសារនៃការបោះពុម្ពផ្សាយថ្ងៃនេះ។ សម្រាប់ឧបករណ៍ជ្រើសរើសជាសកល វាសាមញ្ញណាស់ ដូច្នេះខ្ញុំនឹងមិនរស់នៅលើវាយូរទេ។ វាក្យសម្ព័ន្ធសម្រាប់ការសរសេរច្បាប់ CSS ដែលប្រើឧបករណ៍ជ្រើសរើសជាសកលមានដូចខាងក្រោម៖

នៅទីនេះ "*" ប្រតិបត្តិករមានន័យថាយើងមានឧបករណ៍ជ្រើសរើសជាសកល។ វាត្រូវបានប្រើនៅពេលដែលវាចាំបាច់ដើម្បីកំណត់រចនាប័ទ្មតែមួយសម្រាប់ធាតុទាំងអស់នៅលើទំព័របណ្តាញ។ ជួនកាលឧបករណ៍ជ្រើសរើសសកលមិនចាំបាច់ទេ។ ឧទាហរណ៍ ធាតុ .*class និង .class គឺដូចគ្នាបេះបិទទាំងស្រុងនៅក្នុងករណីទាំងនេះ។ ឥឡូវនេះសម្រាប់ឧទាហរណ៍មួយ។ ជាធម្មតា ធម្មតាបំផុតគឺកំណត់ពុម្ពអក្សរដែលស្របគ្នា ទំហំ និងពណ៌ និងការដាក់អត្ថបទធម្មតានៅលើប្លក់ ឬទំព័រគេហទំព័រ។

* ( font-family: Tahoma, Arial, Helvetica, sans-serif; /* ពុម្ពអក្សរអក្សរ */ color: #646464; /* ពណ៌អត្ថបទ */ font-size: 75%; // ទំហំអត្ថបទ */ text-align: ខាងឆ្វេង / * ទីតាំងអត្ថបទ */)

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

ឧបករណ៍ជ្រើសរើស CSS ដែលនៅជាប់គ្នា។

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

ឥឡូវ​យក​កថាខណ្ឌ​នៃ​អត្ថបទ​ដែល​កំណត់​ដោយ​ស្លាក p ដែល​នឹង​រួម​បញ្ចូល​ទាំង b, i និង​ស្លាក​ធំ​ជា​ធាតុ​កុមារ ដោយ​កំណត់​ការ​ធ្វើ​ទ្រង់ទ្រាយ​នៃ​អត្ថបទ​រៀង​គ្នា ដិត ទ្រេត និង​ពុម្ពអក្សរ​ធំ៖

កថាខណ្ឌនេះប្រើ ស្លាក ខ, ស្លាក i, ស្លាកធំ.

ហើយដោយប្រើឧបករណ៍កែសម្រួល CSS និង HTML ដែលត្រូវបានបង្កើតឡើងនៅក្នុងកំណែចុងក្រោយបំផុតនៃកម្មវិធីរុករកពេញនិយមទាំងអស់ (,) ហើយដែលជា analogue នៃកម្មវិធីជំនួយកម្មវិធីរុករកតាមអ៊ីនធឺណិត Firefox ដ៏ល្បីល្បាញ () យើងនឹងបញ្ចូលកថាខណ្ឌនេះគ្រប់ទីកន្លែងនៅលើទំព័របណ្តាញណាមួយ (ខ្ញុំ ធ្វើវាត្រឹមត្រូវនៅលើទំព័រនៃអត្ថបទមុន កថាខណ្ឌទីមួយ)។ ជាឧទាហរណ៍ ឧបករណ៍នេះនៅក្នុង Chrome ត្រូវបានហៅដោយគ្រាន់តែចុចគ្រាប់ចុច F12។ វាអាចត្រូវបានប្រើសម្រាប់ការពង្រឹងជាក់ស្តែងនៃសម្ភារៈនៅក្នុងផ្នែក "HTML Basics" និង "CSS Tutorial" ។ ដូច្នេះ ខ្ញុំ​បញ្ចូល​អត្ថបទ​មួយ​ជា​កថាខណ្ឌ​ទីមួយ៖

កថាខណ្ឌនេះនឹងត្រូវបានពិសោធន៍ ហើយដោយប្រើឧទាហរណ៍របស់វា យើងនឹងពិចារណាកម្មវិធី ឧបករណ៍ជ្រើសរើសដែលនៅជាប់គ្នា។. ដូចដែលខ្ញុំបាននិយាយ ស្លាក b, i និងធំគឺជាកូននៃស្លាកកថាខណ្ឌ p ព្រោះវាទាំងអស់ដោយផ្ទាល់នៅក្នុងកុងតឺន័រ p ។ នៅទីនេះស្លាកដែលនៅជាប់គ្នាគឺ b និង i ក៏ដូចជា i និងធំ។ ឥឡូវនេះ ចូរយើងអនុវត្តច្បាប់ CSS សម្រាប់អ្នកជ្រើសរើសដែលនៅជាប់គ្នា៖

B+i (ពណ៌៖ ក្រហម;) i+ ធំ (ពណ៌៖ បៃតង;)

បន្ទាប់ពីរចនាប័ទ្មទាំងនេះត្រូវបានអនុវត្ត កថាខណ្ឌនឹងមើលទៅដូចនេះ៖

នេះជាការពិតសម្រាប់ស្លាកគេហទំព័រទាំងអស់ដែលមាន b, i និងធាតុធំ។ ជាងនេះទៅទៀត b និង i, i និង big ត្រូវតែនៅជិតសម្រាប់បន្សំផ្សេងទៀត ច្បាប់ CSS នេះនឹងមិនដំណើរការទេ។ ខ្ញុំ​គិត​ថា​ឥឡូវ​នេះ​វា​ច្បាស់​ហើយ​ចំពោះ​អ្នក​ពី​របៀប​ដែល​អ្នក​ជ្រើសរើស​នៅ​ជាប់​គ្នា​ត្រូវ​បាន​ប្រើ​ពេល​សរសេរ​ឬ​កែសម្រួល​ឯកសារ CSS ។ កំណត់ចំណាំសំខាន់មួយទៀត៖ ប្រសិនបើអ្នកបានកត់សម្គាល់ ក្នុងករណីនៃធាតុជាប់គ្នា រចនាប័ទ្មដែលបានបញ្ជាក់ត្រូវបានអនុវត្តតែចំពោះធាតុទីពីរប៉ុណ្ណោះ។

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

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

H3 (ទំហំអក្សរ៖ 1.7em; /* ទំហំពុម្ពអក្សរ */ text-align: center; /* ការដាក់អត្ថបទ */ font-weight: normal; /* Normal text weight */ font-family: Tahoma, Arial, Helvetica, sans-serif; /* រចនាប័ទ្មពុម្ពអក្សរ */ color: #646464 /* ពណ៌អត្ថបទ */ )

ដើម្បីរំលេចចំណងជើងនៃចំណាំ ឬលេខយោង ចូរកំណត់ថ្នាក់ពិសេសមួយ និយាយថាដាក់៖

H3.put (ពណ៌៖ ក្រហម; /* ពណ៌​អត្ថបទ */ រឹម​ឆ្វេង៖ 5px; /* ទ្រនាប់​ខាង​ឆ្វេង */ margin-top: 0.5em; /* top padding */ padding: 10px; //* រឹម​ជុំវិញ​អត្ថបទ */ តម្រឹមអត្ថបទ៖ ឆ្វេង /* ទីតាំងអត្ថបទ */)

ឥឡូវនេះ ចូរយើងប្រើឧបករណ៍ជ្រើសរើសដែលនៅជាប់គ្នា ដើម្បីបង្កើតរចនាប័ទ្មពិសេសមួយសម្រាប់កថាខណ្ឌលេខយោង កថាខណ្ឌនេះនឹងត្រូវបានដាក់ដោយផ្ទាល់នៅខាងក្រោមចំណងជើងជាមួយនឹងរចនាប័ទ្ម "h3.put"៖

H3.put+p (ផ្ទៃខាងក្រោយ៖ #ffefd5; /* ពណ៌ផ្ទៃខាងក្រោយ */ margin-left: 15px; /* បន្ទះខាងឆ្វេង */ margin-right: 120px; /* padding ខាងស្ដាំ */ margin-top: 0.5em; //* ទ្រនាប់ខាងលើ */ ទ្រនាប់៖ 5px; /* រឹមជុំវិញអត្ថបទ */ )

ជាថ្មីម្តងទៀតដោយប្រើឧបករណ៍កែសម្រួល Google Chrome ដែលខ្ញុំបានធ្វើឱ្យអ្នកភ្ញាក់ផ្អើល (ប៉ុន្តែវាមានតម្លៃវា) យើងបញ្ចូលចំណងជើងសម្រាប់លេខយោងដោយមិនភ្លេចដាក់ថ្នាក់ដាក់សម្រាប់វា:

យកចិត្តទុកដាក់!

បន្ទាប់មកយើងសរសេរអត្ថបទនៃលេខយោងខ្លួនឯង៖

សមា្ភារៈដែលបានបង្ហាញនៅក្នុងការបោះពុម្ពនេះគឺមានសារៈសំខាន់ខ្លាំងណាស់នៅក្នុងលក្ខខណ្ឌនៃការរៀនមូលដ្ឋានគ្រឹះនៃ CSS (សន្លឹករចនាប័ទ្មល្បាក់)

.

បន្ទាប់ពីចលនាទាំងអស់នេះ យើងទទួលបានកថាខណ្ឌលេខយោងខាងក្រោមនៅលើទំព័របណ្តាញ (ខ្ញុំសូមរំលឹកអ្នកថាខ្ញុំបានបញ្ចូលកថាខណ្ឌនេះនៅចុងបញ្ចប់នៃអត្ថបទមុនរបស់ខ្ញុំអំពីឧបករណ៍ជ្រើសរើសកុមារ និងបរិបទ):

ឥឡូវនេះនៅលើប្លក់ ឬគេហទំព័រ នៅពេលអ្នកភ្ជាប់ថ្នាក់ "ដាក់" ទៅស្លាក h3 ណាមួយ លេខយោងបែបនេះនឹងបង្ហាញនៅលើទំព័របណ្តាញ។ លើសពីនេះទៅទៀត មានតែកថាខណ្ឌទី 1 បន្ទាប់ពីស្លាក h3 ដែលមាន "class="put" នឹងត្រូវបានធ្វើទ្រង់ទ្រាយតាមរបៀបពិសេស។ ប៉ុន្តែនោះជាអ្វីដែលយើងចង់បាន មែនទេ?

ជាមួយនេះ ខ្ញុំសូមបញ្ចប់សៀវភៅដៃថ្ងៃនេះ ដែលក្បួនដោះស្រាយសម្រាប់ប្រើឧបករណ៍ជ្រើសរើសដែលនៅជាប់គ្នា និងជាសកលត្រូវបានផ្តល់ឱ្យ។ ខ្ញុំ​សង្ឃឹម​ថា​អត្ថបទ​នេះ​នឹង​លើក​ទឹក​ចិត្ត​អ្នក​អ្នក​អាន​ជា​ទី​ស្រឡាញ់​ដើម្បី​ជាវ

ជំរាបសួរអ្នកអានជាទីស្រឡាញ់។ នៅក្នុងអត្ថបទមុន យើងបានសិក្សាជាចម្បងនូវលក្ខណៈរចនាប័ទ្ម CSS ។ វាមានច្រើនណាស់។ ខ្លះកំណត់ប៉ារ៉ាម៉ែត្រពុម្ពអក្សរ ខ្លះទៀតជាប៉ារ៉ាម៉ែត្រផ្ទៃខាងក្រោយ ហើយខ្លះទៀតកំណត់ប៉ារ៉ាម៉ែត្រសម្រាប់ការចូលបន្ទាត់ និងស៊ុម។

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

អ្នកផ្សំនៅក្នុង CSS (ឧបករណ៍ជ្រើសរើសកូន និងបរិបទ)

អ្នកផ្សំគឺជាប្រភេទឧបករណ៍ជ្រើសរើស CSS ដែលចងច្បាប់រចនាប័ទ្មទៅនឹងធាតុគេហទំព័រដោយផ្អែកលើទីតាំងរបស់វាទាក់ទងទៅនឹងធាតុផ្សេងទៀត។

និមិត្តសញ្ញាផ្សំដំបូង បូក(+) ឬ ឧបករណ៍ជ្រើសរើសនៅជាប់. បូកត្រូវបានកំណត់រវាងឧបករណ៍ជ្រើសរើសពីរ៖

<селектор 1> + <селектор 2> { <стиль> }

រចនាប័ទ្មក្នុងករណីនេះត្រូវបានអនុវត្តទៅ អ្នកជ្រើសរើស 2ប៉ុន្តែប្រសិនបើវានៅជាប់នឹង អ្នកជ្រើសរើស ១ហើយមកភ្លាមៗបន្ទាប់ពីវា។ តោះមើលឧទាហរណ៍៖

ខ្លាំង + ខ្ញុំ (

}
...

នេះគឺជាអត្ថបទធម្មតា។ នេះគឺជាអត្ថបទដិត, អត្ថបទធម្មតា, អត្ថបទក្រហម

នេះគឺជាអត្ថបទធម្មតា។ នេះគឺជាអត្ថបទដិត, អត្ថបទធម្មតា, ហើយនេះគឺជាអត្ថបទធម្មតា។.

លទ្ធផល៖

រចនាប័ទ្មដែលបានពិពណ៌នានៅក្នុងឧទាហរណ៍នឹងត្រូវបានអនុវត្តតែចំពោះអត្ថបទដំបូងដែលរុំព័ទ្ធក្នុងស្លាក , ដោយសារតែ វាមកភ្លាមៗបន្ទាប់ពីស្លាក .

ឧបករណ៍ផ្សំ tilde(~) ក៏អនុវត្តចំពោះឧបករណ៍ជ្រើសរើសដែលនៅជាប់គ្នាផងដែរ ប៉ុន្តែពេលនេះអាចមានធាតុផ្សេងទៀតរវាងពួកវា។ ក្នុងករណីនេះ អ្នកជ្រើសរើសទាំងពីរត្រូវតែដាក់នៅក្នុងស្លាកមេដូចគ្នា៖

<селектор 1> ~ <селектор 2> { <стиль> }

រចនាប័ទ្មនឹងត្រូវបានអនុវត្តទៅ អ្នកជ្រើសរើស 2ដែលគួរអនុវត្តតាម អ្នកជ្រើសរើស ១. ពិចារណាឧទាហរណ៍មួយ៖

ខ្លាំង ~ ខ្ញុំ (
ពណ៌: ក្រហម; /* ពណ៌​អត្ថបទ​ក្រហម */
}
...

នេះគឺជាអត្ថបទធម្មតា។ នេះគឺជាអត្ថបទដិត, អត្ថបទធម្មតា, អត្ថបទក្រហមច្បាប់​អ្នក​ជ្រើសរើស​នៅ​ជាប់​បាន​អនុវត្ត​ចំពោះ​វា។

នេះគឺជាអត្ថបទធម្មតា។ នេះគឺជាអត្ថបទដិត, អត្ថបទធម្មតា, ហើយនេះគឺជាអត្ថបទពណ៌ក្រហម.

លទ្ធផល៖

ដូចដែលអ្នកអាចឃើញនៅពេលនេះ ច្បាប់រចនាប័ទ្មដំណើរការសម្រាប់អត្ថបទទាំងពីរដែលរុំព័ទ្ធក្នុងស្លាក បើទោះបីជាការពិតដែលថានៅក្នុងករណីទីពីររវាងស្លាក និង មានតម្លៃស្លាក .

ឧបករណ៍ផ្សំ > សំដៅទៅ អ្នកជ្រើសរើសកុមារ. អនុញ្ញាត​ឱ្យ​អ្នក​ចង​រចនាប័ទ្ម CSS ទៅ​ធាតុ​ទំព័រ​បណ្ដាញ​ដែល​ត្រូវ​បាន​ដាក់​ដោយ​ផ្ទាល់​ក្នុង​ធាតុ​ផ្សេង​ទៀត៖

<селектор 1> > <селектор 2> { <стиль> }

រចនាប័ទ្មនឹងត្រូវបានភ្ជាប់ទៅ អ្នកជ្រើសរើស 2ដែល​ត្រូវ​បាន​គេ​ដាក់​នៅ​ក្នុង​ អ្នកជ្រើសរើស ១.

div > ខ្លាំង (

}
...

នេះគឺជាអត្ថបទធម្មតា។ នេះគឺជាអក្សរទ្រេតដិត.

នេះគឺជាអត្ថបទធម្មតា។ ហើយនេះគឺជាអត្ថបទដិតធម្មតា។.

ហើយលទ្ធផល៖

ដូចដែលអ្នកអាចឃើញនៅក្នុងរូបភាព ច្បាប់រចនាប័ទ្មប៉ះពាល់តែស្លាកដំបូងប៉ុណ្ណោះ។ ដែលត្រូវបានបង្កប់ដោយផ្ទាល់នៅក្នុងស្លាក

. និងមេភ្លាមៗនៃស្លាកទីពីរ គឺជាស្លាកមួយ។

ដូច្នេះច្បាប់មិនអនុវត្តចំពោះគាត់ទេ។

បន្ទាប់យើងនឹងមើល ឧបករណ៍ជ្រើសរើសបរិបទ<пробел> . វាអនុញ្ញាតឱ្យអ្នកចងរចនាប័ទ្ម CSS ទៅនឹងធាតុដែលដាក់នៅក្នុងធាតុផ្សេងទៀត ហើយវាអាចមានកម្រិតណាមួយនៃការដាក់សំបុក៖

<селектор 1> <селектор 2> { <стиль> }

រចនាប័ទ្មនឹងត្រូវបានអនុវត្តទៅ អ្នកជ្រើសរើស 2ប្រសិនបើវាត្រូវបានដាក់នៅក្នុង អ្នកជ្រើសរើស ១.

សូមក្រឡេកមើលឧទាហរណ៍មុន តែនៅពេលពិពណ៌នាអំពីច្បាប់ CSS យើងប្រើឧបករណ៍ជ្រើសរើសបរិបទ៖

div ខ្លាំង (
រចនាប័ទ្មពុម្ពអក្សរ៖ ទ្រេត /* ទ្រេត */
}
...

នេះគឺជាអត្ថបទធម្មតា។ នេះគឺជាអក្សរទ្រេតដិត.

នេះគឺជាអត្ថបទធម្មតា។ ហើយនេះក៏ជាអក្សរដិតទ្រេតផងដែរ។.

អត្ថបទធម្មតា និង គ្រាន់តែអត្ថបទដិត

លទ្ធផល៖

ដូចដែលអ្នកបានឃើញហើយ លើកនេះច្បាប់បានប៉ះពាល់ដល់ស្លាកទាំងពីរ សូម្បីតែមួយដែលត្រូវបានសំបុកនៅក្នុងធុងមួយ។

និងក្នុងកថាខណ្ឌមួយ។

. ដើម្បីដាក់ស្លាក ដែលត្រូវបានចងភ្ជាប់យ៉ាងសាមញ្ញក្នុងកថាខណ្ឌមួយ។

ច្បាប់ css មិនដំណើរការទាល់តែសោះ។

អ្នកជ្រើសរើសតាមគុណលក្ខណៈស្លាក

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

1. ឧបករណ៍ជ្រើសគុណលក្ខណៈសាមញ្ញ

មើលទៅដូច៖

<селектор>[<имя атрибута тега>] { <стиль> }

ហើយចងរចនាប័ទ្មទៅធាតុទាំងនោះដែលគុណលក្ខណៈដែលបានបញ្ជាក់ត្រូវបានបន្ថែម។ ឧទាហរណ៍៖

ខ្លាំង (
ពណ៌: ក្រហម;
}
...

រថយន្តនេះគឺជាម៉ូទ័រមេកានិចដែលមិនមានដាន រថយន្តផ្លូវយ៉ាងហោចណាស់ 4 កង់។

លទ្ធផល៖

នៅក្នុងរូបភាពអ្នកអាចមើលឃើញថាច្បាប់ css (ពណ៌អត្ថបទពណ៌ក្រហម) ត្រូវបានអនុវត្តចំពោះធាតុ ខ្លាំងដែលគុណលក្ខណៈត្រូវបានបន្ថែម ចំណងជើង.

2. ឧបករណ៍ជ្រើសគុណលក្ខណៈជាមួយនឹងតម្លៃ

វាក្យសម្ព័ន្ធសម្រាប់អ្នកជ្រើសរើសនេះមានដូចខាងក្រោម៖

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

ចង រចនាប័ទ្មដល់ធាតុដែលស្លាកមានគុណលក្ខណៈជាមួយនឹងការបញ្ជាក់ ឈ្មោះនិង អត្ថន័យ. ឧទាហរណ៍៖

ក(
ពណ៌: ក្រហម;
ទំហំពុម្ពអក្សរ៖ ១៥០%;
}
...
.ru" target="_blank">តំណភ្ជាប់ក្នុងវិនដូថ្មី។

លទ្ធផល៖

ដូចដែលអ្នកអាចឃើញធាតុទាំងពីរនៃប្រភេទតំណខ្ពស់មានគុណលក្ខណៈ គោលដៅប៉ុន្តែច្បាប់ css ដែលពង្រីកអត្ថបទតំណមួយដងកន្លះ និងប្តូរពណ៌របស់វាទៅជាក្រហម ត្រូវបានអនុវត្តចំពោះស្លាក លក្ខណៈរបស់វា។ គោលដៅបញ្ហា "_ទទេ".

3. មួយនៃតម្លៃគុណលក្ខណៈជាច្រើន។

តម្លៃគុណលក្ខណៈមួយចំនួនអាចត្រូវបានបំបែកដោយដកឃ្លា ដូចជាឈ្មោះថ្នាក់។ ដើម្បីកំណត់ច្បាប់រចនាប័ទ្មនៅពេលដែលតម្លៃដែលត្រូវការមាននៅក្នុងបញ្ជីតម្លៃគុណលក្ខណៈ សូមប្រើឧបករណ៍ជ្រើសរើសខាងក្រោម៖

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

រចនាប័ទ្មត្រូវបានអនុវត្តប្រសិនបើគុណលក្ខណៈមានតម្លៃដែលត្រូវការ ឬជាផ្នែកមួយនៃបញ្ជីតម្លៃដែលបំបែកដោយដកឃ្លា។ ឧទាហរណ៍៖

{
ពណ៌: ក្រហម;
ទំហំពុម្ពអក្សរ៖ ១៥០%;
}
...

ទូរស័ព្ទរបស់យើង៖ 777-77-77

អាសយដ្ឋានរបស់យើង៖ ទីក្រុងម៉ូស្គូ សុវត្តិកា ៥

អ្នកនឹងទទួលបានលទ្ធផលដូចខាងក្រោម៖

ច្បាប់​អនុវត្ត​ចំពោះ​ធាតុ​ដែល​តម្លៃ​គុណលក្ខណៈ​រួម​មាន៖ ថ្នាក់មានអត្ថន័យមួយ។ ទូរស័ព្ទ.

4. សហសញ្ញានៅក្នុងតម្លៃគុណលក្ខណៈ

សហសញ្ញាត្រូវបានអនុញ្ញាតក្នុងការកំណត់អត្តសញ្ញាណ និងតម្លៃថ្នាក់។ ដើម្បីចងរចនាប័ទ្មទៅនឹងធាតុដែលតម្លៃគុណលក្ខណៈអាចមានសហសញ្ញា អ្នកអាចប្រើសំណង់ខាងក្រោម៖

[attribute|="value"] (រចនាប័ទ្ម)
ឧបករណ៍ជ្រើសរើស[attribute|="value"] (រចនាប័ទ្ម)

រចនាប័ទ្ម​ត្រូវ​បាន​អនុវត្ត​ចំពោះ​ធាតុ​ដែល​តម្លៃ​គុណលក្ខណៈ​ចាប់ផ្តើម​ដោយ​តម្លៃ​ដែល​បាន​បញ្ជាក់​តាម​ពីក្រោយ​ដោយ​សហសញ្ញា។ ឧទាហរណ៍៖

{
ពណ៌: ក្រហម;
ទំហំពុម្ពអក្សរ៖ ១៥០%;
}
...

• ចំណុចទី 1


• ចំណុច ២


• ចំណុចទី 3


• ចំណុចទី 4

លទ្ធផល៖

ក្នុងឧទាហរណ៍ ច្បាប់រចនាប័ទ្មអនុវត្តតែចំពោះធាតុបញ្ជីទាំងនោះដែលឈ្មោះថ្នាក់ចាប់ផ្តើមដោយតម្លៃ "ម៉ឺនុយ-".

5. តម្លៃគុណលក្ខណៈចាប់ផ្តើមដោយអត្ថបទជាក់លាក់

ឧបករណ៍ជ្រើសរើសនេះកំណត់រចនាប័ទ្មសម្រាប់ធាតុមួយ ប្រសិនបើតម្លៃគុណលក្ខណៈស្លាកចាប់ផ្តើមដោយតម្លៃជាក់លាក់មួយ។ វាអាចមានជម្រើសពីរ៖

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

ក្នុងករណីដំបូង រចនាប័ទ្មអនុវត្តចំពោះធាតុទាំងអស់ដែលស្លាកមានគុណលក្ខណៈជាមួយការបញ្ជាក់ ឈ្មោះនិងតម្លៃដែលចាប់ផ្តើមជាមួយនឹងការបញ្ជាក់ ខ្សែអក្សររង. ក្នុងករណីទី 2 រឿងដូចគ្នាមានតែចំពោះធាតុជាក់លាក់ដែលបានបញ្ជាក់នៅក្នុង ឧបករណ៍ជ្រើសរើសចម្បង. ឧទាហរណ៍៖

ក(
ពណ៌: បៃតង;
font-weight:bold;
}
...

លទ្ធផល៖

ឧទាហរណ៍បង្ហាញពីរបៀបបង្ហាញតំណខាងក្រៅ និងតំណខាងក្នុងខុសគ្នា។ តំណភ្ជាប់ខាងក្រៅតែងតែចាប់ផ្តើមដោយខ្សែអក្សរ "http://"។ ដូច្នេះ នៅក្នុងឧបករណ៍ជ្រើសរើស យើងបង្ហាញថារចនាប័ទ្មនឹងត្រូវបានអនុវត្តតែចំពោះតំណភ្ជាប់ដែលមានគុណលក្ខណៈប៉ុណ្ណោះ។ hrefចាប់ផ្តើមដោយអត្ថន័យ http://.

6. តម្លៃគុណលក្ខណៈបញ្ចប់ដោយអត្ថបទជាក់លាក់

ចងរចនាប័ទ្មទៅនឹងធាតុដែលតម្លៃគុណលក្ខណៈបញ្ចប់ដោយអត្ថបទដែលបានបញ្ជាក់។ មានវាក្យសម្ព័ន្ធដូចខាងក្រោមៈ

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

ក្នុងករណីដំបូង រចនាប័ទ្មអនុវត្តចំពោះធាតុទាំងអស់ដែលមាន គុណលក្ខណៈជាមួយនឹងការបញ្ជាក់ ឈ្មោះហើយ​មាន​អត្ថន័យ​បញ្ចប់​ដោយ​ការ​បញ្ជាក់ ខ្សែអក្សររង. ក្នុងករណីទី 2 រឿងដូចគ្នាមានតែចំពោះអ្វីដែលបានបង្ហាញ អ្នកជ្រើសរើស. ជាឧទាហរណ៍ ក្នុងវិធីនេះ ទម្រង់រូបភាពក្រាហ្វិចផ្សេងៗគ្នាអាចបង្ហាញខុសៗគ្នា។ ឧទាហរណ៍៖

IMG (
ស៊ុម: 5px ក្រហមរឹង;
}
...

រូបភាព GIF

ទម្រង់រូបភាព png

លទ្ធផល៖

ក្នុងឧទាហរណ៍ រូបភាពទាំងអស់ដែលមានផ្នែកបន្ថែម gif នឹងត្រូវបានបង្ហាញជាមួយនឹងស៊ុមពណ៌ក្រហមក្រាស់ប្រាំភីកសែល។

7. តម្លៃគុណលក្ខណៈមានខ្សែអក្សរដែលបានបញ្ជាក់

ឧបករណ៍ជ្រើសរើសនេះភ្ជាប់រចនាប័ទ្មទៅនឹងស្លាកដែលតម្លៃគុណលក្ខណៈមានអត្ថបទជាក់លាក់។ វាក្យសម្ពន្ធ៖

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

រចនាប័ទ្មភ្ជាប់ទៅនឹងធាតុដែលមាន គុណលក្ខណៈជាមួយនឹងឈ្មោះដែលបានបញ្ជាក់ និងតម្លៃរបស់វាមានបញ្ជាក់ ខ្សែអក្សររង. ឧទាហរណ៍៖

IMG (
ស៊ុម: 5px ក្រហមរឹង;
}
...

រូបភាពពីថតវិចិត្រសាល

រូបភាពពីថតផ្សេងទៀត។

លទ្ធផល៖

ក្នុងឧទាហរណ៍ រចនាប័ទ្មត្រូវបានអនុវត្តចំពោះរូបភាពដែលផ្ទុកពីថតឯកសារ "វិចិត្រសាល".

នោះហើយជាទាំងអស់អំពីឧបករណ៍ជ្រើសរើសគុណលក្ខណៈ។ វិធីទាំងអស់ខាងលើអាចផ្សំជាមួយគ្នាបាន៖

អ្នកជ្រើសរើស[attribute1="value1"][attribute2="value2"] (រចនាប័ទ្ម)

លើសពីនេះទៀត ខ្ញុំសូមរំលឹកអ្នកអំពីអ្នកជ្រើសរើស CSS ពិសេស៖

• ដោយប្រើនិមិត្តសញ្ញា "+" និង "~" ត្រូវបានបង្កើតឡើង;
• the ">" និមិត្តសញ្ញាចងរចនាប័ទ្ម css ទៅ ក្រុមហ៊ុនបុត្រសម្ព័ន្ធស្លាក;
• និមិត្តសញ្ញា<пробел>បង្កើតឧបករណ៍ជ្រើសរើសបរិបទ។

នៅក្នុងអត្ថបទនាពេលអនាគត យើងក៏នឹងពិនិត្យមើលធាតុ pseudo-element និង pseudo-classs ដែលផ្តល់នូវឧបករណ៍គ្រប់គ្រងរចនាប័ទ្មដ៏មានឥទ្ធិពល។

អស់ហើយ ជួបគ្នាម្តងទៀត។