ជ្រើស CSS ។ ប្រភេទនៃការជ្រើសរើស

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

វាក្យសម្ព័ន្ធគឺមានដូចខាងក្រោម: បង្ហាញចំណុចមួយ ( "។ ") តាមពីក្រោយដោយសរសេរឈ្មោះរបស់ថ្នាក់នេះ។ ដើម្បីគ្រប់គ្រងអង្គភាពដំបូងប្រើសំណង់ .red ។ ទីពីរ - ខៀវនិងដូច្នេះនៅលើ។

សារៈសំខាន់! វាត្រូវបានផ្ដល់អនុសាសន៍ឱ្យប្រើតម្លៃមានន័យគុណលក្ខណៈថ្នាក់។ វាត្រូវបានគេចាត់ទុកថាសំណុំបែបបទដែលអាក្រក់ក្នុងការប្រើការសរសេរតាមសូរស័ព្ទ (ឧ krasiviy-blok) ឬបន្សំអក្សរចៃដន្យ / លេខ (ojfh834871) ។ ក្នុងកូដនេះ, អ្នកត្រូវបានចងដើម្បីទទួលបានការយល់ច្រឡំ, មិនឱ្យនិយាយពីការលំបាកដែលនឹងប្រឈមមុខនឹងអ្នកដែលនឹងត្រូវបានចូលរួមនៅក្នុងគម្រោងនេះបន្ទាប់ពីអ្នក។ ជម្រើសល្អបំផុត - ការប្រើវិធីសាស្រ្តណាមួយដូចជាការ Bem ។

អត្ថប្រយោជន៍ - មានភាពបត់បែនខ្ពស់។

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

ជ្រើសលេខសម្គាល់

អំពីកំណែនេះ coders គំនិតនិងការសរសេរកម្មវិធីគឺមានភាពមិនច្បាស់។ CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. ការបង្រៀន CSS បានខ្លះមិនបានផ្តល់អនុសាសន៍ឱ្យប្រើប្រាស់នៃលេខសម្គាល់នេះដោយសារតែនៅក្នុងកម្មវិធីមិនត្រឹមត្រូវដែលពួកគេអាចបង្កឱ្យមានបញ្ហាជាមួយនឹងមរតក។ ទោះជាយ៉ាងណាអ្នកជំនាញជាច្រើនមានយ៉ាងសកម្មរៀបចំឱ្យពួកគេនៅទូទាំងប្លង់។ អ្នកសម្រេចចិត្ត។ # »), затем имя блока. វាក្យសម្ព័ន្ធគឺមានដូចខាងក្រោម: ទីសំគាល់ផោន ( ""), បន្ទាប់មកឈ្មោះរបស់ប្លុកនេះ។ #red. ឧទាហរណ៍ #red ។

отличается от класса по нескольким параметрам. លេខសម្គាល់គឺខុសគ្នាពីថ្នាក់នៅក្នុងវិធីជាច្រើន។ ID. ដំបូងទំព័រមិនអាចមានលេខសម្គាល់ដូចគ្នាទាំងពីរនេះ។ ពួកគេត្រូវបានផ្ដល់ឈ្មោះតែមួយគត់។ ទីពីរដូចជ្រើសមួយដែលមានអាទិភាពខ្ពស់ជាង។ red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. នេះមានន័យថាប្រសិនបើអ្នកបញ្ជាក់ថ្នាក់អង្គភាពក្រហមនិងបញ្ជាក់ក្នុងតារាងជា CSS ក្រហម ផ្ទៃខាងក្រោយ, ហើយបន្ទាប់មកផ្ដល់ទៅឱ្យវាមានលេខសម្គាល់ដូចគ្នានេះដែរហើយបញ្ជាក់ណ៍ខៀវខៀវអង្គភាពនឹងបើកខៀវ។

អត្ថប្រយោជន៍ - អ្នកអាចត្រួតពិនិត្យធាតុជាក់លាក់, មិនអើពើរចនាប័ទ្មនៃស្លាកនិងថ្នាក់។

ID и class. គុណវិបត្តិ - ងាយស្រួលក្នុងការទទួលបានបាត់បង់នៅមួយចំនួនធំនៃ ID និងថ្នាក់។

សារៈសំខាន់! ID вам, в общем-то, не нужны. ប្រសិនបើអ្នកកំពុងប្រើវិធីសាស្រ្ត Bem (ឬ analogues របស់វា), លេខសម្គាល់ដល់អ្នកជាទូទៅមិនត្រូវបានត្រូវការជាចាំបាច់។ បច្ចេកទេសនេះគឺទាក់ទងនឹងការប្រើប្រាស់នៃថ្នាក់តែមួយគត់ប្លង់ដែលងាយស្រួលជាងនេះច្រើន។

ជ្រើសសកល

{}. វាក្យសម្ព័ន្ធ: សញ្ញាតារាបាល់ទាត់របស់ក្លិប ( "*") និងដង្កៀបពោលគឺ {*} ...

ប្រើដើម្បីកំណត់គុណលក្ខណៈមួយចំនួននៅពេលដែលធាតុទាំងអស់នៃទំព័រ។ នៅពេលនេះអាចមានប្រយោជន៍? box-sizing: border-box. ឧទាហរណ៍ប្រសិនបើអ្នកចង់កំណត់លក្ខណសម្បត្តិទំព័រការប្ដូរទំហំប្រអប់: ព្រំដែនប្រអប់។ div *{}. អាចមិនត្រឹមតែត្រូវបានប្រើដើម្បីគ្រប់គ្រងសមាសភាគទាំងអស់នៃឯកសារនេះទេប៉ុន្តែថែមទាំងដើម្បីត្រួតពិនិត្យកូនចៅទាំងអស់នៃប្លុកដែលបានបញ្ជាក់ឧទាហរណ៍ div * {} ។

អត្ថប្រយោជន៍ - អ្នកអាចត្រួតពិនិត្យមួយចំនួនធំនៃធាតុនៅពេលតែមួយ។

គុណវិបត្តិ - មិនគ្រប់គ្រាន់ទេជម្រើសដែលអាចបត់បែនបាន។ លើសពីនេះទៀតការប្រើប្រាស់ឧបករណ៍ជ្រើសនេះក្នុងករណីមួយចំនួនថយចុះការងារទំព័រ។

ដោយគុណលក្ខណៈ

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

បញ្ចូល [ប្រភេទ = 'អត្ថបទ'] {}

ជ្រើសការនេះនឹងជ្រើសគុណលក្ខណៈទាំងអស់ជាមួយនឹងប្រភេទនៃអត្ថបទបញ្ចូល។

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

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

បញ្ចូល [កន្លែងដាក់ = "បញ្ចូលឈ្មោះ"] {} ឬបញ្ចូល [កន្លែងដាក់ = "បញ្ចូលពាក្យសម្ងាត់"]

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

[ចំណងជើង * = "Kaspiysk"]

CSS ដែលនឹងជ្រើសរើសធាតុទាំងអស់នៅក្នុងចំណងជើងដែលមាននិមិត្តសញ្ញានៃ "កាសព្យែន", ឧ។ អ៊ីហើយ "កាសព្យែន" និង "កាសព្យែន" ។

អ្នកអាចជ្រើសស្លាកដែលចាប់ផ្តើមជាមួយគុណលក្ខណៈតួអក្សរជាក់លាក់មួយ:

[ចំណងជើង ^ = "តួអក្សរដែលអ្នកចង់"] {}

ឬបញ្ឈប់ពួកគេ:

[ចំណងជើង $ = "តួអក្សរស្ដាំ"] {} ។

អត្ថប្រយោជន៍ - មានភាពបត់បែនអតិបរមា។ អ្នកអាចជ្រើសធាតុដែលមានស្រាប់ដោយមិនចាំបាច់មានទំព័រជាមួយនឹងថ្នាក់នេះ messing ។

គុណវិបត្តិ - ត្រូវបានប្រើដែលទាក់ទងកម្រមានតែនៅក្នុងករណីជាក់លាក់។ អ្នករចនាបណ្ដាញជាច្រើនចូលចិត្តវិធីសាស្រ្ត, ចាប់តាំងពីថ្នាក់ចំណុចនេះគឺមានភាពងាយស្រួលជាងដើម្បីរៀបចំឱ្យមានជាច្រើន ដង្កៀប និងសញ្ញា "ស្មើ" ។ លើសពីនេះទៀតការជ្រើសរើសទាំងនេះមិនធ្វើការនៅក្នុងកំណែកម្មវិធីរុករកអ៊ីនធឺណិត 7 និងខាងក្រោម។ ទោះជាយ៉ាងណាដែលឥឡូវនេះត្រូវការកម្មវិធី Internet Explorer ចាស់?

ការជ្រើសរើសការព៍ pseudo ថ្នាក់

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

ប្រភេទនៃការជ្រើសនេះត្រូវបានប្រើយ៉ាងសកម្មនៅក្នុងប្លង់សម័យទំនើប, ដោយសារតែអរគុណទៅវាអ្នកអាចធ្វើឱ្យទំព័រ«បន្តផ្ទាល់»ដោយមិនមានការប្រើប្រាស់ JavaScript នេះ។ ឧទាហរណ៍អ្នកចង់ធ្វើឱ្យប្រាកដថានៅពេលដែលអ្នកដាក់នៅលើប៊ូតុងនេះជាមួយនឹងថ្នាក់នៃការណ៍របស់ខ្លួនដែលបានផ្លាស់ប្តូរ btn នេះ។ ដើម្បីធ្វើដូចនេះយើងប្រើរចនាសម្ព័ន្ធដូចខាងក្រោម:

.btn: ពេលដាក់ {

ផ្ទៃខាងក្រោយ-color: ក្រហម;

}

ភាពស្រស់ស្អាតអាចត្រូវបានបញ្ជាក់នៅក្នុងលក្ខណៈសម្បត្តិជាមូលដ្ឋាននៃប៊ូតុងអចលនទ្រព្យការផ្លាស់ប្តូរ, ឧទាហរណ៍ 0.5s - នៅក្នុងករណីនេះប៊ូតុងនឹងមិន blush ភ្លាម, ហើយនៅក្នុងពាក់កណ្តាលលើកទីពីរមួយ។

គុណសម្បត្តិ - ត្រូវបានគេប្រើយ៉ាងទូលំទូលាយសម្រាប់ "រស់ឡើងវិញ" នៃទំព័រ។ ងាយស្រួលក្នុងការប្រើ។

គុណវិបត្តិ - ពួកគេមិនមាន។ នេះគឺជាឧបករណ៍ងាយស្រួលពិត។ ទោះជាយ៉ាងណា, អ្នករចនាបណ្ដាញដែលគ្មានបទពិសោធអាចទទួលបានបាត់បង់សម្បូរបែបនៃការព៍ pseudo ថ្នាក់នេះទេ។ បញ្ហានេះត្រូវបានដោះស្រាយការសិក្សានិងការអនុវត្តន៍។

ព៍ pseudo ជ្រើសរើស-

«ការព៍ pseudo "- ទាំងនេះគឺជាផ្នែកនៃទំព័រដែលមានមិនមែនក្នុង HTML, ប៉ុន្តែពួកគេនៅតែអាចត្រូវបានគ្រប់គ្រង។ អ្នកមិនយល់? វាជាការងាយស្រួលច្រើនជាងវាហាក់បីដូចជា។ ឧទាហរណ៍អ្នកចង់ធ្វើឱ្យអក្សរធំដំបូងក្នុងខ្សែអក្សរធំនិងក្រហមចាកចេញពីអត្ថបទតូចនិងខ្មៅផ្សេងទៀត។ ជាការពិតណាស់, វាអាចត្រូវបានសន្និដ្ឋានលិខិតនៅក្នុងរយៈពេលជាក់លាក់មួយដោយមានថ្នាក់មួយនោះទេប៉ុន្តែវាជារយៈពេលយូរនិងគួរឱ្យធុញ។ វាគឺជាការងាយស្រួលក្នុងការជ្រើសកថាខណ្ឌទាំងមូលនិងប្រើការព៍ pseudo :: ដំបូងលិខិត។ វាបានផ្តល់នូវឱកាសមួយដើម្បីត្រួតពិនិត្យរូបរាងនៃអក្សរដំបូងនេះ។

មានជាការពិតមួយចំនួនធំនៃការព៍ pseudo ធាតុ-មាន។ រាយពួកគេនៅក្នុងអត្ថបទតែមួយទំនងជាមិនទទួលបានជោគជ័យ។ អ្នកអាចរកឃើញពដែលពាក់ព័ន្ធនៅក្នុងម៉ាស៊ីនស្វែងរកដែលអ្នកចូលចិត្ត។

អត្ថប្រយោជន៍ - ផ្តល់នូវភាពបត់បែនក្នុងការប្ដូរតាមបំណងរូបរាងនៃទំព័រនេះ។

គុណវិបត្តិ - ថ្មីដើម្បីឱ្យពួកគេជាញឹកញាប់យល់ច្រឡំ។ ការជ្រើសរើសជាច្រើននៃប្រភេទនេះនៃការងារតែមួយគត់នៅក្នុងកម្មវិធីរុករកជាក់លាក់។

ដើម្បីសង្ខេប

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