តំណភ្ជាប់គឺមានជាទូទៅនៅលើគេហទំព័រប៉ុន្តែអ្នករចនាគេហទំព័រជាច្រើនមិនដឹងពីអំណាចដែលពួកគេមានជាមួយ CSS ដើម្បីរៀបចំនិងគ្រប់គ្រងតំណភ្ជាប់របស់ពួកគេឱ្យមានប្រសិទ្ធភាព។ អ្នកអាចកំណត់តំណដែលមានដំណើរទស្សនកិច្ចបានដាក់និងសកម្ម។ អ្នកក៏អាចធ្វើការជាមួយស៊ុមនិងផ្ទៃខាងក្រោយដើម្បីផ្តល់តំណភ្ជាប់ pizzaz របស់អ្នកបន្ថែមទៀតឬធ្វើឱ្យពួកគេមើលទៅដូចជាប៊ូតុងឬរូបភាព។
អ្នករចនាគេហទំព័រភាគច្រើនចាប់ផ្តើមដោយកំណត់រចនាប័ទ្មមួយនៅលើស្លាក "មួយ":
{ពណ៌: ក្រហម; }វានឹងធ្វើ រចនាប័ទ្មគ្រប់ទិដ្ឋភាពទាំងអស់នៃតំណ (ដាក់កន្ទុយ, ចូលនិងសកម្ម) ។ ដើម្បីរចនាសមា្ភារៈនីមួយៗដាច់ដោយឡែកអ្នកត្រូវប្រើ link pseudo-classes ។
ភ្ជាប់ថ្នាក់សន្មត
មានបួនប្រភេទមូលដ្ឋានគ្រឹះនៃតំណ pseudo-classes ដែលអ្នកអាចកំណត់:
- : តំណ - នេះជារចនាប័ទ្មលំនាំដើមសម្រាប់តំណ
- : បានទៅ - បន្ទាប់ពីតំណត្រូវបានចុច
- : ដាក់កណ្តុរ - ដូចជាកណ្តុរមួយត្រូវបានទប់ស្កាត់លើតំណ (មុនចុច)
- : សកម្ម - ស្តាំដូចតំណត្រូវបានចុច
ដើម្បីកំណត់តំណ pseudo-class សូមប្រើវាជាមួយស្លាកក្នុង ឧបករណ៍ជ្រើស CSS របស់ អ្នក ។ ដូច្នេះដើម្បីផ្លាស់ប្តូរពណ៌ដែលបានទៅទស្សនារបស់អ្នកទាំងអស់ទៅកាន់ពណ៌ប្រផេះសូមសរសេរ:
a: visited {color: gray; }ប្រសិនបើអ្នករចនាម៉ូដមួយតំណ pseudo-class, វាជាគំនិតល្អក្នុងការរចនាម៉ូដទាំងអស់។ វិធីនោះអ្នកនឹងមិនត្រូវបានភ្ញាក់ផ្អើលដោយលទ្ធផលក្រៅប្រទេស។ ដូច្នេះប្រសិនបើអ្នកគ្រាន់តែចង់ផ្លាស់ប្តូរពណ៌ដែលបានទៅទស្សនាទៅជាពណ៌ប្រផេះខណៈពេលដែលលក្ខណសម្បត្តិក្លែងក្លាយទាំងអស់នៃតំណរបស់អ្នកនៅតែមានពណ៌ខ្មៅអ្នកនឹងសរសេរថា:
a: link, a: hover, a: active {color: black; } a: visited {color: gray; }ផ្លាស់ប្តូរពណ៌តំណ
វិធីពេញនិយមបំផុតចំពោះតំណភ្ជាប់រចនាប័ទ្មគឺដើម្បីផ្លាស់ប្តូរពណ៌នៅពេលដែលកណ្តុរនៅពីលើវា:
មួយ {ពណ៌: # 00f; } a: hover {color: # 0f0; }ប៉ុន្តែកុំភ្លេចថាអ្នកអាចប៉ះពាល់ដល់របៀបដែលតំណមើលទៅដូចដែលពួកគេកំពុងចុចលើវាដោយ: property active:
មួយ {ពណ៌: # 00f; } មួយ: សកម្ម {ពណ៌: # f00; }ឬរបៀបដែលតំណនេះមើលទៅបន្ទាប់ពីអ្នកបានទស្សនាវាដោយ: លក្ខណៈសម្បត្តិដែលបានទៅទស្សនា:
មួយ {ពណ៌: # 00f; } a: visited {color: # f0f; }ដើម្បីដាក់វាទាំងអស់រួមគ្នា:
មួយ {ពណ៌: # 00f; } a: visited {color: # f0f; } a: hover {color: # 0f0; } មួយ: សកម្ម {ពណ៌: # f00; }ដាក់ផ្ទៃខាងក្រោយលើតំណដើម្បីបន្ថែមរូបតំណាងឬចំណុច
អ្នកអាចដាក់ផ្ទៃខាងក្រោយលើតំណដូចនៅក្នុងអត្ថបទស្ទ្រីមផ្ទៃខាងក្រោយប៉ុន្តែដោយការលេងជាមួយផ្ទៃខាងក្រោយបន្តិចអ្នកអាចបង្កើតតំណដែលមានរូបតំណាងភ្ជាប់។ ជ្រើសរើសរូបតំណាងតូចប្រហែល 15px ដោយ 15px លើកលែងតែអត្ថបទរបស់អ្នកធំជាង។ ដាក់ផ្ទៃខាងក្រោយទៅផ្នែកម្ខាងនៃតំណហើយកំណត់ជម្រើសម្តងទៀតដើម្បីមិនធ្វើម្តងទៀត។ បន្ទាប់មក padd តំណដូច្នេះអត្ថបទនៅក្នុងតំណត្រូវបានផ្លាស់ប្តូរឆ្ងាយរហូតទៅដល់ខាងឆ្វេងឬស្តាំដើម្បីមើលរូបតំណាង។
{padding: 0 2px 1px 15px; ផ្ទៃខាងក្រោយ: #fff url (ball.gif) center left no-repeat; ពណ៌: # c00; }នៅពេលដែលអ្នកបានទទួលរូបតំណាងរបស់អ្នកអ្នកអាចកំណត់រូបភាពខុសៗគ្នាដូចជារូបតំណាងដាក់កណ្តុរសកម្មនិងបានចូលរបស់អ្នកដើម្បីធ្វើឱ្យតំណផ្លាស់ប្តូរ:
{padding: 0 2px 1px 15px; ផ្ទៃខាងក្រោយ: #fff url (ball.gif) center left no-repeat; ពណ៌: # c00; } a: hover {background: #fff url (ball2.gif) center left no-repeat; } a: active {background: #fff url (ball3.gif) left center no-repeat; }ធ្វើឱ្យតំណភ្ជាប់របស់អ្នកមើលទៅដូចប៊ូតុង
ប៊ូតុងមានប្រជាប្រិយភាពខ្លាំងណាស់ប៉ុន្តែរហូតមកដល់ពេលដែល CSS មានអ្នកត្រូវបង្កើតប៊ូតុង ដោយប្រើរូបភាព ដែលធ្វើឱ្យទំព័ររបស់អ្នកត្រូវការរយៈពេលយូរ។ សំណាងល្អមានរចនាប័ទ្មស៊ុមមួយដែលអាចជួយអ្នកបង្កើតប្រសិទ្ធិភាពដូចប៊ូតុងយ៉ាងងាយស្រួលជាមួយ CSS ។
{border: 4px outset; ចន្លោះ: 2px; ការតុបតែងអត្ថបទ: គ្មាន; } a: active {border: 4px inset; }ចំណាំ, នៅពេលអ្នកដាក់ពណ៌នៅដើមដំបូងនិងរចនាប័ទ្មបញ្ចូល, កម្មវិធីរុករកនឹងមិនទំនងជាបង្ហាញវាដូចដែលអ្នករំពឹងទុកនោះទេ។ ដូច្នេះ, នៅទីនេះជាប៊ូតុង fancier ជាមួយព្រំដែនពណ៌:
{border-style: solid; ទទឹងស៊ុម: 1px 4px 4px 1px; ការតុបតែងអត្ថបទ: គ្មាន; ចន្លោះ: 4px; border-color: # 69f # 00f # 00f # 69f; }ហើយអ្នកអាចជះឥទ្ធិពលលើការដាក់ទ្រនិចកន្សោមនិងរចនាប័ទ្មសកម្មនៃតំណប៊ូតុងផងដែរគ្រាន់តែប្រើក្លែងក្លាយទាំងនោះប៉ុណ្ណោះ:
a: link {border-style: solid; ទទឹងស៊ុម: 1px 4px 4px 1px; ការតុបតែងអត្ថបទ: គ្មាន; ចន្លោះ: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }