CSS បាន: ការរចនាតារាង។ ឧទាហរណ៍នៃការចុះឈ្មោះ

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

តារាងដែលអាចផ្លាស់ប្តូរស្ទើរតែទាំងអស់។ ការរចនាស្រស់ស្អាតពាក់ព័ន្ធនឹងការប្រើប្រាស់នៃការរចនាជា CSS ព្រំដែនតុ, ផ្ទៃខាងក្រោយតារាង, ផ្ទៃខាងក្រោយក្រឡាគម្លាតរវាងពួកគេនិងច្រើនជាងនេះ។ សូមពិចារណានេះជាមូលដ្ឋានបំផុត។

ស៊ុមតារាង

ជា CSS ការរចនារចនាប័ទ្មតារាងតែងតែពាក់ព័ន្ធនឹងការប្រកួតមួយដែលមានព្រំដែនមួយ (ស៊ុម) ។ តុលំនាំដើមទាំងអស់គឺមិនមែនស៊ុមខ្សវ័ណវង់។ នោះគឺ, វាគឺស្មើនឹង 0 ភិចសែល។ ប៉ុន្តែនេះអាចត្រូវបានកែតម្រូវដោយព្រំដែនអចលនទ្រព្យ។

អ្នកអាចបញ្ជាក់ស៊ុមខាងក្រៅសម្រាប់តារាងទាំងមូល:

តារាង {ព្រំដែន: 3px រឹងខ្មៅ; }

សូមអរគុណដល់បន្ទាត់នេះនៅតុទាំងអស់នៅលើតំបន់បណ្ដាញដែលប្រើរចនាប័ទ្មនេះគឺជាស៊ុមខ្មៅ។ ចំណាំថាព្រំដែនតែនៅលើគែមនេះ, ប៉ុន្តែមិននៅក្នុងតារាង។ សម្រាប់បន្ទាត់ក្រឡានិងស៊ុមដែលបានបញ្ជាក់បើមិនដូច្នេះទេ។

ទី, TD {ព្រំដែន: ខ្មៅរឹង 3px;}

កម្រាស់និងណ៍, អ្នកអាចបញ្ជាក់បានទេ។ រក្សាទុកក្នុងចិត្តថាព្រំដែនមិនត្រូវបានកើនឡើងទ្វេដងនៅពេល splicing កោសិកា។

ពាក្យនេះតំណាងឱ្យការចុះបញ្ជីបន្តរឹង។ អ្នកអាចបញ្ជាក់តម្លៃផ្សេងទៀត។

វាត្រូវបានប្រើជាទូទៅបំផុតស៊ុមរឹង, ដូចដែលវាមើលទៅគួរឱ្យទាក់ទាញកាន់តែច្រើននិងមិនបានយកចិត្តទុកដាក់ពីការបន្លំមាតិកាសំខាន់នៃតំបន់បណ្តាញ។

អចលនទ្រព្យនៅតាមព្រំដែនផងដែរអាចត្រូវបានបញ្ជាក់នៅលើនាវានេះ។ ព្រំដែននេះអាចត្រូវបានកំណត់សម្រាប់តែកំពូលបាតឆ្វេងឬខាងស្ដាំ។ ដោយសារតែនៅក្នុងករណីមួយចំនួនវាមិនមែនជាជម្រើសដែលអាចធ្វើទៅបានជាមួយនឹងស៊ុមសម្រាប់តារាងទាំងមូលនៅពេលតែមួយ។

តារាង {កំពូលព្រំដែន: 1px ក្រហមរឹង; }

ដូច្នេះអ្នកអាចកំណត់ស៊ុមសម្រាប់តារាងតែកំពូលនេះ។ ដូចគ្នានេះដែរដល់ភាគីណាមួយផ្សេងទៀតជំនួសឱ្យការសរសេរគ្រាន់តែកំពូលខាងស្ដាំ, ខាងឆ្វេងឬខាងក្រោម។

បឋមកថាតារាង

បឋមកថាតារាងអាចត្រូវបានបញ្ជាក់ដោយប្រើស្លាក <ចំណងជើង> ។ ស្លាកនេះអាចមាននៅក្នុង CSS ដើម្បីចុះឈ្មោះការជាច្រើននៃលក្ខណៈសម្បត្តិសម្រាប់ការលៃតម្រូវមួយ។ ការរចនាតារាងជា CSS គឺជាការល្អដោយសារតែវាគឺអាចធ្វើបានដើម្បីបត់បែនធាតុវិធីដែលអ្នកចង់បាន។

ចំណងជើងនេះត្រូវបានបង្ហាញនៅក្នុងវិធីដូចគ្នាជាស្ដង់ដារមួយនៅក្នុងសៀវភៅ (ដូចជា "តារាងទី 1") ។

អ្នកអាចបញ្ជាក់ទីតាំងនៃផ្នែកខាងចំណងជើងចំណងជើងនិងទ្រព្យសម្បត្តិ (កំពូលឬបាត) នេះ។ aligning ខាងឆ្វេងឬស្ដាំត្រូវបានកំណត់ដោយលក្ខណសម្បត្តិតម្រឹមអត្ថបទ។

តុផ្ទៃខាងក្រោយ

ផ្ទៃខាងក្រោយនៃតារាងនេះអាចត្រូវបានណ៍ឬលំនាំណាមួយ។ កំណត់ផ្ទៃខាងក្រោយ color ណ៍អចលនទ្រព្យ-។ ឈ្មោះនៃលក្ខណៈសម្បត្តិស្របយ៉ាងពេញលេញជាមួយនឹងការប្រើក្នុងការនិយាយស្តី។ វាសម្របសម្រួលរក្សាទុកជាច្រើនដង។

ប៍ននេះអាចត្រូវបានបញ្ជាក់ជាឈ្មោះនិងបានអ៊ិនកូដផ្សេងគ្នា។ លើសពីនេះទៀតអ្នកអាចបញ្ជាក់ដូចខាងក្រោម:

• តម្លាភាព - តម្លាភាព។
• បានទទួល - ណ៍គឺដូចគ្នាថាការនៃធាតុមេ។
• ដំបូង - លំនាំដើម។

ជម្រើសដោយតម្លាភាពអាចត្រូវបានប្រើនៅក្នុងករណីទាំងនោះដែលជាកន្លែងដែលតុទាំងអស់នៅក្នុងអត្ថបទនៅក្នុងឯកសារ CSS ដែលត្រូវបានធ្វើឡើងនៅក្នុងណ៍មួយប៉ុន្តែនៅក្នុងករណីនេះមានតម្រូវការទេ។

លើសពីនេះទៀតផ្ទៃខាងក្រោយនេះអាចនឹងមានរូបភាពមួយ។ ដើម្បីធ្វើដូចនេះនៅក្នុងរចនាប័ទ្មចេញវេជ្ជបញ្ជាអចលនទ្រព្យផ្ទៃខាងក្រោយរូបភាពនោះ។ ផ្លូវនេះគឺមានដូចនេះ:

url ( 'URL')

ផ្លូវទៅកាន់ឯកសារដែលអាចមានទាំងការទាក់ទងឬពេញលេញ។

បំពេញភាពស្មុគស្មាញបន្ថែមទៀតអាចត្រូវបានធ្វើរួចជាមួយជម្រាលមួយ:

• លីនេអ៊ែរ-ជម្រាល ();
• មូល-ជម្រាល ();
• ធ្វើឡើងវិញលីនេអ៊ែរ-ជម្រាល () និងការធ្វើឡើងវិញ-មូល-ជម្រាល () - ជម្រាលម្តងហើយម្តងទៀត។

កោសិកាផ្ទៃខាងក្រោយ

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

ក្នុងការបន្ថែមទៅជម្មើសជំនួស, ហើយអ្នកអាចបញ្ជាក់ចំនួនជួរឈរជាក់លាក់មួយឬជួរដេក។ ឧទាហរណ៍ដូចនេះ:

• TR: ទី n-កុមារ (សូម្បីតែ) { ... } - បញ្ជាក់ត្របាញ់;
• TR: ទី n-កុមារ (1) { ... } - ការបង្ហាញនៃលក្ខណៈសម្បត្តិនៃជួរដេកពិសេសមួយ;
• TD: ទី n-កុមារ (សូម្បីតែ) { ... } - ការបង្ហាញនៃជំនួសជួរឈរមួយ;
• TD: ទី n-កុមារ (1) { ... } - ការបង្ហាញនៃលក្ខណៈសម្បត្តិនៃជួរឈរជាក់លាក់មួយនេះ។

ក្រៅពីលំដាប់និងលេខអាចត្រូវបានបញ្ជាក់ - ដំបូង (TD: ជាលើកដំបូងដែលកូន) ឬចុង (TD: ចុងក្រោយកូន) ។

គម្លាតរវាងកោសិកានេះ

នៅក្នុង CSS, ការរចនាតារាងដែលអនុញ្ញាតឱ្យអ្នកដើម្បីយកចន្លោះរវាងក្រឡា។ តាមលំនាំដើមដែលពួកគេមាន។ ឧទាហរណ៍ប្រសិនបើអ្នកកំណត់ស៊ុមនៅក្នុងតារាងនេះដោយគ្មានការកំណត់ចម្ងាយរវាងព្រំដែននេះវានឹងមានលទ្ធផលនេះនៅទីនេះ។

យល់ព្រម, វាមើលទៅមិនស្រស់ស្អាតខ្លាំងណាស់ហើយវាមិនមែនងាយស្រួលក្នុងការអាន។ អ្នកប្រើនឹងមានការប៉ះពាល់នៅក្នុងភ្នែកដោយសារតែការនេះ។ យកគម្លាតនេះអាចមានដោយសរសេរគ្រាន់តែបន្ទាត់នៅក្នុងរចនាប័ទ្មតារាងមួយ:

ព្រំដែន-ដួលរលំ: ការដួលរលំ

ប៉ុន្តែវាកើតឡើងដែលថាចម្ងាយ, នៅលើផ្ទុយមកវិញគួរត្រូវបានបង្កើន។ លើសពីនេះទៀតទំហំនៃគម្លាតនេះអាចត្រូវបានបញ្ជាក់ថាជាការរវាងជួរឈរនិងរវាងបន្ទាត់។ ដើម្បីបង្ហាញថាតម្លៃ (ជំនួសឱ្យដួលរលំ):

ព្រំដែន-ដួលរលំ: ដោយឡែកពីគ្នា

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

ព្រំដែនចន្លោះ: 20px ។

ប្រសិនបើអ្នកចង់បញ្ជាក់ចម្ងាយផ្សេងគ្នារវាងជួរដេកនិងជួរឈរនោះវាបានបង្ហាញពីរឿងពីរ:

ព្រំដែនចន្លោះ: 10px20px ។

ភាពខុសគ្នានៅក្នុងកម្មវិធីរុករកនេះ

រក្សាទុកក្នុងចិត្តថានៅក្នុងតារាងជា CSS ការរចនាអាចមើលទៅខុសគ្នា, អាស្រ័យលើកម្មវិធីរុករក។ អាក្រក់ជាពិសេសគឺករណីកំណែចាស់ជាងនេះ, ដែលបង្កើតថ្មីនៅក្នុង CSS មិនត្រូវបានគាំទ្រ។

ខាងលើនេះគឺជាឧទាហរណ៍នៃកម្រាស់ស៊ុមទៅតម្លៃឌីជីថលមួយ។

សម្រាប់ឧទាហរណ៍នេះកម្រាស់នៃស៊ុមសម្រាប់ថេរនេះ។

រចនាប័ទ្មស៊ុមផងដែរខុសគ្នាយ៉ាងខ្លាំង។

ដូច្នេះការអភិវឌ្ឍតែងតែឃើញលទ្ធផលនៅក្នុងកម្មវិធីរុករកផ្សេងគ្នា។

នៅក្នុង CSS តារាងដែលបានផ្ដល់អនុសាសន៍ឱ្យពិនិត្យមើលការរចនាប្រភេទនៃកម្មវិធីរុករក។ ជាពិសេសបញ្ហាធំត្រូវបានគេប្រើដើម្បីជាការដល់អ្នកប្រើកំណែចាស់ជាងរបស់កម្មវិធី Internet Explorer ។

អ្នកអភិវឌ្ឍន៍កម្រិតខ្ពស់ណាស់អាចអាស្រ័យលើកម្មវិធីរុករកដើម្បីភ្ជាប់ឯកសារ CSS ខុសគ្នាទាំងស្រុង។ ហើយមាននរណាម្នាក់បានធ្វើឱ្យធីកក្នុងគ្នាឬរចនាប័ទ្មពិសេសមួយចំនួន (ថ្នាក់) ។

បញ្ហាភាគច្រើនកើតឡើងពីស្រមោល។

ជា CSS: ឧទាហរណ៍ទ្រង់ទ្រាយតារាង

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

យើងផ្តល់ឧទាហរណ៍មួយចំនួននៃតារាងនានា។ រូបភាពខាងលើបង្ហាញការប្រើប្រាស់នៃការលំអៀងនិងលេងជាមួយនឹងផ្ទៃខាងក្រោយនិងព្រំដែន។

មនុស្សជាច្រើននឹងក្លាយជាគួរឱ្យចាប់អារម្មណ៍នៃការរចនាឧទាហរណ៍យ៉ាងស្រស់ស្អាតដែលនឹងមិនបានកាត់បន្ថយអ្នកប្រើប្រាស់ភ្នែក។ តំណាងនេះគឺសមរម្យស្ទើរតែគ្រប់ស្ថានភាព។

គែមរាងមូលអាចត្រូវបានធ្វើ។ វាមើលទៅស្រស់ស្អាតណាស់។

សេចក្តីសន្និដ្ឋាន

ដូចដែលអ្នកអាចមើលឃើញ, សម្រាប់រូបរាងនៃតារាងក្នុង CSS បានមានឧបករណ៍ជាច្រើនមាន។ ប៉ារ៉ាម៉ែត្រនីមួយគឺជាចំនួនទឹកប្រាក់យ៉ាងច្រើននៃជម្រើសតម្លៃ។ ប្រសិនបើអ្នកប្រើវាទាំងអស់នៅពេលតែមួយអ្នកអាចបង្កើតស្នាដៃ។ ជាពិសេសប្រសិនបើអ្នកធ្វើ ការរចនាសម្របសម្រួល សម្រាប់កម្មវិធីរុករកទាំងអស់។

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

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