ការយល់ដឹងពីការផ្លាស់ប្តូរសំខាន់ៗចំពោះ CSS3
ភាពខុសគ្នាធំបំផុតរវាង CSS2 និង CSS3 គឺថា CSS3 ត្រូវបានបំបែកជាផ្នែកខុសៗគ្នាដែលហៅថាម៉ូឌុល។ ម៉ូឌុលនីមួយៗទាំងនេះកំពុងបង្កើតវិធីរបស់ខ្លួនតាមរយៈ W3C នៅក្នុងដំណាក់កាលផ្សេងៗគ្នានៃដំណើរការអនុសាសន៍។ ដំណើរការនេះបានធ្វើឱ្យវាកាន់តែងាយស្រួលសម្រាប់ផ្នែកផ្សេងៗនៃ CSS3 ដែលត្រូវបានទទួលយកនិងអនុវត្តនៅក្នុងកម្មវិធីរុករកដោយក្រុមហ៊ុនផលិតផ្សេងគ្នា។
ប្រសិនបើអ្នកប្រៀបធៀបដំណើរការនេះទៅនឹងអ្វីដែលបានកើតឡើងជាមួយ CSS2 ដែលជាកន្លែងដែលអ្វីគ្រប់យ៉ាងត្រូវបានដាក់ស្នើជាឯកសារតែមួយដែលមានព័ត៌មាន សន្លឹករចនាប័ទ្ម ទាំងអស់នៅក្នុងវាអ្នកចាប់ផ្តើមឃើញអត្ថប្រយោជន៍នៃការបំបែកអនុសាសន៍ឡើងទៅជាបំណែកតូចៗ។ ដោយសារតែម៉ូឌុលនីមួយ ៗ ត្រូវបានដំណើរការជាលក្ខណៈបុគ្គលយើងមានជួរនៃការគាំទ្រកម្មវិធីរុករកកាន់តែច្រើនសម្រាប់ម៉ូឌុល CSS3 ។
ដូចនឹងការបញ្ជាក់ថ្មីនិងការផ្លាស់ប្តូរណាមួយត្រូវប្រាកដថាអ្នកសាកល្បងទំព័រ CSS3 របស់អ្នកយ៉ាងហ្មត់ចត់នៅក្នុងកម្មវិធីរុករកនិងប្រព័ន្ធប្រតិបត្តិការច្រើនតាមដែលអ្នកអាចធ្វើបាន។ ចងចាំថាគោលដៅគឺមិនមែនដើម្បីបង្កើតគេហទំព័រដែលមើលទៅដូចគ្នានៅក្នុងកម្មវិធីរុករកនីមួយៗនោះទេប៉ុន្តែដើម្បីធានាថារចនាប័ទ្មណាមួយដែលអ្នកប្រើរួមទាំងរចនាប័ទ្ម CSS3 មើលទៅល្អនៅក្នុងកម្មវិធីរុករកដែលគាំទ្រពួកវាហើយថាវាត្រលប់មកវិញដោយរលូនចំពោះកម្មវិធីរុករកចាស់ៗដែល កុំ។
ឧបករណ៍ជ្រើសរើស CSS3 ថ្មី
CSS3 ផ្តល់នូវវិធីថ្មីមួយដែលអ្នកអាចសរសេរក្បួន CSS ជាមួយអ្នកជ្រើសរើស CSS ថ្មីក៏ដូចជាឧបករណ៍បន្សំថ្មីនិងធាតុ pseudo-elements ថ្មីមួយចំនួន។
ឧបករណ៍ជ្រើសគុណលក្ខណៈថ្មី 3:
- គុណលក្ខណៈចាប់ផ្តើមផ្គូផ្គង ធាតុ ជាក់លាក់ [foo ^ = "bar"] ធាតុមានគុណលក្ខណៈដែលគេហៅថា foo ដែលចាប់ផ្តើមជាមួយ "bar" ឧ។
- គុណលក្ខណៈបញ្ចប់ការផ្គូផ្គង ធាតុ ជាក់លាក់ [foo $ = "bar"] ធាតុមានគុណលក្ខណៈដែលហៅថា foo ដែលបញ្ចប់ដោយ "bar" ឧ។
- គុណលក្ខណៈមាន ធាតុ ផ្គូផ្គង [foo * = "bar"] ធាតុមានគុណលក្ខណៈដែលហៅថា foo ដែលមានខ្សែ "bar" ឧទាហរណ៍។
16 pseudo-classes ថ្មី:
- : root
- ធាតុ root នៃឯកសារ។ ក្នុង HTML នេះគឺតែងតែ។
- : កូនទីប្រាំ (n)
- ប្រើវាដើម្បីផ្គូរផ្គងធាតុកូនពិតប្រាកដឬប្រើអថេរដើម្បីទទួលបានការផ្គូផ្គងជំនួស។
- : ន - កូនចុងក្រោយ (n)
- ផ្គូផ្គងធាតុកុមារពិតប្រាកដដែលរាប់ពីចុងក្រោយ។
- : n-of-type (n)
- ផ្គូផ្គងធាតុបងធំដែលមានឈ្មោះដូចគ្នាមុនពេលវានៅក្នុងមែកធាងឯកសារ។
- : ទីចុងក្រោយនៃប្រភេទ (n)
- ផ្គូផ្គងធាតុបងធំដែលមានឈ្មោះដូចគ្នានឹងរាប់ពីបាត។
- :កូនពៅ
- ផ្គូផ្គងធាតុកូនចុងក្រោយនៃឪពុកម្តាយ។
- : ដំបូងនៃប្រភេទ
- ផ្គូផ្គងធាតុបងធំទីមួយនៃប្រភេទនោះ។
- : ចុងក្រោយនៃប្រភេទ
- ផ្គូផ្គងធាតុបង្រួបបង្រួមចុងក្រោយនៃប្រភេទនោះ។
- : មានតែកូន
- ផ្គូផ្គងធាតុដែលជាកូនតែមួយគត់របស់ឪពុកម្តាយរបស់វា។
- : តែប៉ុណ្ណោះនៃប្រភេទ
- ផ្គូផ្គងធាតុដែលជាប្រភេទតែមួយគត់នៃប្រភេទរបស់វា។
- : ទទេ
- ផ្គូផ្គងធាតុដែលគ្មានកូន (រួមទាំងថ្នាំងអត្ថបទ) ។
- :គោលដៅ
- ផ្គូផ្គងធាតុដែលជាគោលដៅរបស់ URI យោង។
- : បានបើក
- ផ្គូផ្គងធាតុនៅពេលវាត្រូវបានបើក។
- : បិទ
- ផ្គូផ្គងធាតុនៅពេលវាត្រូវបានបិទ។
- : បានគូសធីក
- ផ្គូផ្គងធាតុនៅពេលវាត្រូវបានគូសធីក (ប៊ូតុងមូលឬប្រអប់ធីក) ។
- : មិនមែន (s បាន)
- ផ្គូផ្គងនៅពេលធាតុមិនស៊ីគ្នាជាមួយ ឧបករណ៍ជ្រើស ធម្មតា។
ឧបករណ៍បន្សំថ្មីមួយ:
- elementA ~ elementB
- ផ្គូផ្គងនៅពេលដែលធាតុ B អនុវត្តតាមកន្លែងណាមួយបន្ទាប់ពី elementA មិនចាំបាច់ភ្លាម។
លក្ខណៈសម្បត្តិថ្មី
CSS3 ក៏បានបង្ហាញពីលក្ខណៈសម្បត្តិ CSS មួយចំនួន។ លក្ខណៈសម្បត្តិជាច្រើនក្នុងចំណោមលក្ខណៈសម្បត្តិទាំងនេះគឺបង្កើតរចនាប័ទ្មដែលមើលឃើញដែលទំនងជាភ្ជាប់ជាមួយកម្មវិធីក្រាហ្វិកដូចជាកម្មវិធី Photoshop ។ ទាំងនេះមួយចំនួនដូចជាស៊ុមកាំឬស្រមោលស្រមោលបាននៅជុំវិញចាប់តាំងពីការណែនាំបើ CSS3 ។ អ្នកផ្សេងទៀត, ដូចជា flexbox ឬសូម្បី CSS ក្រឡាចត្រង្គគឺជារចនាប័ទ្មថ្មីដែលត្រូវបានគេចាត់ទុកថាជាញឹកញាប់បន្ថែម CSS3 ។
នៅក្នុង CSS3 គំរូប្រអប់មិនបានផ្លាស់ប្តូរទេ។ ប៉ុន្តែមានរចនាប័ទ្មរចនាប័ទ្មថ្មីដែលអាចជួយអ្នករចនាប័ទ្មផ្ទៃខាងក្រោយនិងស៊ុមនៃប្រអប់របស់អ្នក។
ផ្ទៃខាងក្រោយច្រើនខ្ញុំម៉ាយ
ដោយប្រើរចនាប័ទ្មផ្ទៃខាងក្រោយទីតាំងផ្ទៃខាងក្រោយនិងរចនាប័ទ្មផ្ទៃខាងក្រោយអ្នកអាចបញ្ជាក់រូបភាពផ្ទៃខាងក្រោយជាច្រើនដែលត្រូវដាក់ស្រទាប់លើគ្នាក្នុងប្រអប់។ រូបភាពទីមួយគឺជាស្រទាប់ដែលជិតបំផុតជាមួយអ្នកប្រើដែលមានរូបរាងដូចខាងក្រោម។ ប្រសិនបើមានពណ៌ផ្ទៃខាងក្រោយវាត្រូវបានគូរនៅខាងក្រោមស្រទាប់រូបភាពទាំងអស់។
លក្ខណៈសម្បត្តិរចនាប័ទ្មផ្ទៃខាងក្រោយ
វាក៏មានលក្ខណសម្បត្តិផ្ទៃខាងក្រោយថ្មីៗមួយចំនួនផងដែរនៅក្នុង CSS3 ។
- ផ្ទៃខាងក្រោយ - ឃ្លីប
- លក្ខណសម្បត្តិនេះកំណត់របៀបកែសម្រួលរូបភាពផ្ទៃខាងក្រោយ។ លំនាំដើមគឺប្រអប់ស៊ុមប៉ុន្តែវាអាចត្រូវបានផ្លាស់ប្តូរទៅជាប្រអប់អត្ថបទឬប្រអប់មាតិកា។
- ផ្ទៃខាងក្រោយ - ដើម
- លក្ខណសម្បត្តិនេះកំណត់ថាតើផ្ទៃខាងក្រោយគួរតែជាកន្លែងនៅក្នុងប្រអប់អត្ថបទប្រអប់ប្រអប់ឬប្រអប់មាតិកា។
- ទំហំផ្ទៃខាងក្រោយ
- លក្ខណសម្បត្តិនេះអនុញ្ញាតឱ្យអ្នកបង្ហាញពីទំហំនៃរូបភាពផ្ទៃខាងក្រោយ។ វាអនុញ្ញាតឱ្យអ្នកពង្រីករូបភាពតូចៗឱ្យសមនឹងទំព័រ។
ការផ្លាស់ប្តូរលក្ខណៈសម្បត្តិរចនាប័ទ្មផ្ទៃខាងក្រោយដែលមានស្រាប់
វាក៏មានការផ្លាស់ប្តូរមួយចំនួនចំពោះលក្ខណសម្បត្តិរចនាប័ទ្មផ្ទៃខាងក្រោយដែលមានស្រាប់:
- ផ្ទៃខាងក្រោយ - ម្តងទៀត
- មានតំលៃថ្មីពីរសម្រាប់ទ្រព្យសម្បត្តិនេះ: ចន្លោះនិងរង្វង់។ ចន្លោះដកឃ្លារូបភាពក្រឡាដែលរាបស្មើនៅក្នុងប្រអប់ដោយមិនត្រូវបានខ្ទាស់។ រង្វង់កំណត់រូបភាពផ្ទៃខាងក្រោយឡើងវិញដូច្នេះវានឹងធ្វើក្រឡាមុំគ្រប់ចំនួននៅក្នុងប្រអប់។
- background-attachment
- តម្លៃថ្មី "មូលដ្ឋាន" ត្រូវបានបន្ថែមដូច្នេះផ្ទៃខាងក្រោយនឹងរមូរជាមួយមាតិការបស់ធាតុនៅពេលធាតុនោះមានរបាររមូរមួយ។
- ផ្ទៃខាងក្រោយ
- លក្ខណសម្បត្តិស្ដង់ដារផ្ទៃខាងក្រោយបន្ថែមលក្ខណៈសម្បត្តិទំហំនិងដើម។
លក្ខណៈស៊ុម CSS3
នៅក្នុងស៊ុម CSS3 អាចជារចនាប័ទ្មដែលយើងប្រើដើម្បី (រឹង, ទ្វេ, ដាច់ ៗ ។ ល។ ) ឬពួកវាអាចជារូបភាព។ បូក CSS3 នាំមកនូវសមត្ថភាពក្នុងការបង្កើតជ្រុងមូល។ រូបភាពស៊ុមគឺគួរអោយចាប់អារម្មណ៍ព្រោះអ្នកបង្កើតរូបភាពនៃស៊ុមទាំងបួនហើយបន្ទាប់មកប្រាប់ CSS អំពីរបៀបអនុវត្តរូបភាពនោះទៅស៊ុមរបស់អ្នក។
លក្ខណសម្បត្តិរចនាប័ទ្មស៊ុមថ្មី
មានលក្ខណៈសម្បត្តិស៊ុមថ្មីមួយចំនួននៅក្នុង CSS3:
- កាំស៊ុម
- ស៊ុមស៊ុមខាងលើស្តាំកាំ ស៊ុមបាតខាងក្រោមស្តាំកាំ ស៊ុមបាតខាងឆ្វេងនិងខាងឆ្វេង ស៊ុមព្រំដែន - កំពូលឆ្វេង
- លក្ខណៈសម្បត្តិទាំងនេះអនុញ្ញាតឱ្យអ្នកបង្កើតជ្រុងមូលនៅលើស៊ុមរបស់អ្នក។
- border-image-source
- បញ្ជាក់ឯកសារប្រភពរូបភាពដែលត្រូវបានប្រើជំនួសរចនាប័ទ្មស៊ុមដែលបានកំណត់រួច។
- border-image-slice
- តំណាងឱ្យការលៃតម្រូវខាងក្នុងពីគែមរូបភាពស៊ុម
- border-image-width
- កំណត់តម្លៃនៃទទឹងសម្រាប់រូបភាពស៊ុមរបស់អ្នក។
- border-image-outset
- បញ្ជាក់ទំហំដែលផ្ទៃរូបភាពស៊ុមពង្រីកលើសប្រអប់ស៊ុម។
- border-image-stretch
- កំណត់វិធីដែលផ្នែកនិងផ្នែកពាក់កណ្តាលនៃរូបភាពស៊ុមគួរត្រូវបានក្រឡាក្បឿងឬធ្វើមាត្រដ្ឋាន។
- border-image
- លក្ខណសម្បត្តិស្តង់ដារសម្រាប់លក្ខណសម្បត្តិរូបភាពស៊ុមទាំងអស់។
លក្ខណសម្បត្តិ CSS3 បន្ថែមទាក់ទងនឹងស៊ុមនិងផ្ទៃខាងក្រោយ
នៅពេលប្រអប់ត្រូវបានបំបែកនៅការបំបែកទំព័រមួយការបំបែកជួរឈរសម្រាប់ការបំបែកបន្ទាត់ (សម្រាប់ធាតុក្នុងបន្ទាត់) លក្ខណសម្បត្តិការតុបតែងប្រអប់ - កំណត់របៀបដែលប្រអប់ថ្មីត្រូវបានរុំដោយស៊ុមនិងចន្លោះ។ ផ្ទៃខាងក្រោយអាចត្រូវបានបែងចែករវាងប្រអប់ដែលខូចច្រើនដោយប្រើលក្ខណសម្បត្តិនេះ។
វាក៏មានលក្ខណៈស្រមោលប្រអប់ស្រមោលដែលអាចត្រូវបានប្រើដើម្បីបន្ថែមស្រមោលទៅធាតុប្រអប់។
ជាមួយនឹង CSS3 អ្នកអាចបង្កើតទំព័របណ្ដាញដោយងាយស្រួលដោយមានជួរឈរច្រើនដោយគ្មានតារាងឬរចនាសម្ព័ន្ធស្លាកលំអិត។ អ្នកគ្រាន់តែប្រាប់កម្មវិធីរុករកថាតើមានចំនួនជួរឈរដែលធាតុរបស់រាងកាយគួរមាននិងរបៀបដែលពួកវាគួរមាន។ បូកអ្នកអាចបន្ថែមស៊ុម (ច្បាប់) ពណ៌ផ្ទៃខាងក្រោយដែលមានកម្ពស់ជួរឈរនិងអត្ថបទរបស់អ្នកនឹងហូរកាត់ជួរឈរទាំងអស់ដោយស្វ័យប្រវត្តិ។
ជួរឈរ CSS3 - កំណត់ចំនួននិងទទឹងជួរឈរ
មាន លក្ខណៈសម្បត្តិ ថ្មីបីដែលអនុញ្ញាតឱ្យអ្នកកំណត់ចំនួននិងទទឹងនៃជួរឈររបស់អ្នក:
- ទទឹងជួរឈរ
- កំណត់ទទឹងជួរឈររបស់អ្នកគួរ។ កម្មវិធីអ៊ីនធឺណិតនឹងហូរអត្ថបទដើម្បីបំពេញចន្លោះដែលមានជួរឈរធំទូលាយ។
- រាប់ជួរឈរ
- កំណត់ចំនួនជួរឈរនៅលើទំព័រ។ បន្ទាប់មកកម្មវិធីរុករកនឹងបង្កើតជួរឈរដែលមានទំហំគ្រប់គ្រាន់ដើម្បីឱ្យសមនឹងទំហំប៉ុន្តែមានតែលេខដែលអ្នកបញ្ជាក់ប៉ុណ្ណោះ។
- ជួរឈរ
- លក្ខណសម្បត្តិចាសដែលអ្នកអាចកំណត់ទទឹងឬលេខ (ឬទាំងពីរប៉ុន្តែវាកម្រណាស់) ។
គម្លាតជួរដេក CSS3
ចន្លោះនិងក្បួនត្រូវបានដាក់នៅចន្លោះជួរឈរក្នុងសេណារីយ៉ូ multicolumn ដូចគ្នា។ ចន្លោះប្រហោងនឹងរុញជួរឈរចេញដាច់ពីគ្នាប៉ុន្តែច្បាប់មិនត្រូវដកចេញទេ។ ប្រសិនបើក្បួនជួរឈរធំជាងគម្លាតវានឹងត្រួតលើជួរឈរដែលនៅជាប់គ្នា។ មានលក្ខណសម្បត្តិថ្មីចំនួនប្រាំសម្រាប់ច្បាប់ជួរឈរនិងគម្លាត:
- ជួរឈរគម្លាត
- កំណត់ទទឹងនៃចន្លោះរវាងជួរឈរ។
- ជួរឈរ - ច្បាប់ពណ៌
- កំណត់ពណ៌ច្បាប់។
- រចនាប័ទ្មបន្ទាត់ - ក្បួន
- កំណត់រចនាប័ទ្មនៃក្បួន (រឹងទុតទ្វេ។ ល។ ) ។
- ជួរឈរ - ច្បាប់ទទឹង
- កំណត់ទទឹងនៃក្បួន។
- ជួរឈរ - ច្បាប់
- លក្ខណសម្បត្តិស្ដង់ដាកំណត់គ្រប់លក្ខណសម្បត្តិក្បួនជួរទាំងបី។
សម្រាកជួរឈរ CSS3 ផ្តាច់ជួរឈរនិងបំពេញជួរឈរ
ការបំបែកជួរឈរ ប្រើជម្រើស CSS2 ដូចគ្នាដែលត្រូវបានប្រើដើម្បីកំណត់ការបំបែកនៅក្នុងមាតិការ paged ប៉ុន្តែជាមួយលក្ខណៈសម្បត្តិថ្មីបីគឺ: បំបែកមុន ពេលសម្រាក និង បំបែកនៅខាងក្នុង ។
ដូចជាមានតារាងអ្នកអាចកំណត់ធាតុដើម្បីពង្រីកជួរឈរជាមួយលក្ខណសម្បត្តិជួរដេក។ នេះអនុញ្ញាតឱ្យអ្នកបង្កើតចំណងជើងដែលគ្របដណ្ដប់ច្រើនជួរដូចកាសែត។
បំពេញជួរឈរសម្រេចចិត្តថាតើមានមាតិកាប៉ុន្មាននៅក្នុងជួរឈរនីមួយៗ។ ជួរឈរមានតុល្យភាពព្យាយាមដាក់ចំនួនមាតិកាដូចគ្នានៅក្នុងជួរឈរនីមួយៗនៅពេលដែលស្វ័យប្រវត្តិហូរមាតិកានៅក្នុងរហូតដល់ជួរឈរពេញហើយបន្ទាប់មកទៅខ្ទង់បន្ទាប់។
លក្ខណៈពិសេសបន្ថែមទៀតនៅក្នុង CSS3 ដែលមិនរួមបញ្ចូលក្នុង CSS2
មានលក្ខណៈពិសេសបន្ថែមជាច្រើននៅក្នុង CSS3 ដែលមិនមាននៅក្នុង CSS2 រួមទាំង:
- ម៉ូឌុលប្លង់គំរូ CSS និងម៉ូឌុលទីតាំង CSS3 : បង្កើតក្រឡាចត្រង្គជាមួយ CSS ។
- ម៉ូឌុលអត្ថបទ CSS3 : អត្ថបទគ្រោងនិងសូម្បីតែបង្កើតស្រមោលស្រមោលដោយប្រើ CSS ។
- ម៉ូឌុលពណ៌ CSS3 : ឥឡូវនេះជាមួយភាពស្រអាប់។
- ការផ្លាស់ប្តូរគំរូប្រអប់ : រួមទាំងលក្ខណសម្បត្តិ marquee ដែលដើរតួនាទីដូចជាស្លាក IE ។
- ម៉ូឌុលចំណុចប្រទាក់អ្នកប្រើ CSS3 : ផ្តល់ឱ្យអ្នកនូវទស្សន៍ទ្រនិចថ្មីការឆ្លើយតបទៅនឹងសកម្មភាពវាលដែលត្រូវការនិងសូម្បីតែ ប្តូរទំហំធាតុ ។
- សំណួរប្រព័ន្ធផ្សព្វផ្សាយ : សំណួរ ប្រព័ន្ធផ្សព្វផ្សាយអនុញ្ញាតឱ្យអ្នកកាន់តែមានភាពបត់បែននៅពេលកំណត់របៀបដែលសន្លឹករចនាប័ទ្មគួរតែត្រូវបានប្រើ។ ឧទាហរណ៍អ្នកអាចកំណត់សន្លឹករចនាប័ទ្មដែលមានតែសម្រាប់ឧបករណ៍យួរដៃដែលមានទិដ្ឋភាពធំជាង 20 អ៊ី។
- ម៉ូឌុល Ruby CSS3 : ផ្តល់ការគាំទ្រសម្រាប់ភាសាដែលប្រើអត្ថបទ Ruby ដើម្បីសរសេរឯកសារ។
- ម៉ូឌុល Paged Media របស់ CSS3 : សម្រាប់ការគាំទ្រកាន់តែច្រើនសម្រាប់ប្រព័ន្ធផ្សព្វផ្សាយដែលមាន paged (ក្រដាសថ្លា។ ល។ ) ។
- មាតិកាដែលបានបង្កើត : បឋមកថា រត់និងបាតកថាលេខយោងនិងមាតិកាផ្សេងទៀតដែលត្រូវបានបង្កើតជាកម្មវិធីពិសេសសម្រាប់ប្រព័ន្ធផ្សព្វផ្សាយដែលមាន paged ។
- ម៉ូឌែលនិយាយ CSS3 : ការផ្លាស់ប្តូរ CSS របស់ aural ។