មួក CSS ដំបូង

រៀនពីរបៀបបង្កើតគម្របដំបូងបង្អែកស្អាតដោយប្រើ CSS និងរូបភាព

រៀនពីរបៀបប្រើ CSS ដើម្បីបង្កើតមួកដំបូងស្រមោលសម្រាប់កថាខណ្ឌរបស់អ្នក។ មានបច្ចេកទេសជំនួសរូបភាពសាមញ្ញមួយដើម្បីប្រើរូបភាពក្រាហ្វិកសម្រាប់គម្របដំបូងរបស់អ្នក។

រចនាប័ទ្មមូលដ្ឋាននៃមួកដំបូង

មានរចនាប័ទ្មមូលដ្ឋានចំនួនបីនៃអក្សរដំបូងនៅក្នុងឯកសារ:

• បានលើកឡើង - ជារឿងធម្មតាបំផុតដែលអក្សរទីមួយមានទំហំធំនិងនៅលើបន្ទាត់ដូចគ្នានឹងអត្ថបទបច្ចុប្បន្ន។
• បានធ្លាក់ចុះ - ជារឿងធម្មតាផងដែរ, ដែលជាកន្លែងដែលអក្សរដំបូងគឺធំជាងមុននិងបានធ្លាក់ចុះនៅខាងក្រោមបន្ទាត់ដំបូងនៃអត្ថបទ។ អត្ថបទខាងក្រោមបន្ទាប់មកអណ្តែតជុំវិញវា។
• នៅជិត - ដែលអក្សរទីមួយស្ថិតនៅក្នុងជួរឈរមួយនៅក្បែរអត្ថបទដែលនៅសល់។ នេះគឺជារឿងធម្មតានៅក្នុងការបោះពុម្ពជាងការរចនាបណ្តាញ។

មួកដំបូងឬមួកទម្លាក់គឺស៊ាំណាស់។ ពួកវាគឺជាវិធីដ៏ល្អមួយដើម្បីស្លៀកពាក់ខោអាវដែលវែងនិងគួរឱ្យធុញទ្រាន់។ ហើយជាមួយលក្ខណសម្បត្តិ CSS: អក្សរទីមួយអ្នកអាចកំណត់យ៉ាងងាយស្រួលពីរបៀបបង្កើតអក្សរដំបូងរបស់អ្នក។

បង្កើតមួកដំបូង

អ្វីទាំងអស់ដែលអ្នកត្រូវធ្វើដើម្បីបង្កើតអក្សរធំដំបូងគឺធ្វើឱ្យអក្សរទីមួយនៃកថាខណ្ឌរបស់អ្នកមានទំហំធំជាងមុនជាមួយធាតុ pseudo-element ដំបូង:

p: អក្សរទីមួយ {font-size: 3em; }

ប៉ុន្តែ កម្មវិធីរុករក ជាច្រើនមើលឃើញថាអក្សរទីមួយមានទំហំធំជាងអត្ថបទដែលនៅសល់នៅលើបន្ទាត់ដូច្នេះពួកគេធ្វើឱ្យឈានមុខគេស្មើនឹងអ្វីដែលនឹងធ្វើឱ្យបានត្រឹមត្រូវសម្រាប់តួអក្សរទីមួយនោះមិនមែនជាបន្ទាត់ដែលនៅសល់នោះទេ។ សំណាងល្អវាងាយស្រួលក្នុងការជួសជុលដោយធាតុ pseudo-line ដំបូងនិងលក្ខណសម្បត្តិបន្ទាត់កម្ពស់:

p: អក្សរទីមួយ {font-size: 3em; } p: បន្ទាត់ទី 1 {line-height: 1em; }

លេងជាមួយកម្ពស់បន្ទាត់នៅក្នុងឯកសាររបស់អ្នករហូតដល់អ្នករកទំហំត្រឹមត្រូវសម្រាប់អត្ថបទរបស់អ្នក។

លេងជាមួយក្បាលដំបូងរបស់អ្នក

នៅពេលដែលអ្នកយល់ពីរបៀបបង្កើតមួកដំបូងអ្នកអាចស្លៀកពាក់ខោអាវក្នុងសំលៀកបំពាក់ទំនើបដើម្បីធ្វើឱ្យវាលេចធ្លោ។ លេងជាមួយពណ៌ពណ៌ផ្ទៃខាងក្រោយស៊ុមឬអ្វីដែលធ្វើឱ្យអ្នកស្រមើស្រមៃ។ រចនាប័ទ្មសាមញ្ញគឺដើម្បីបញ្ច្រាសពណ៌នៃពុម្ពអក្សរនិងពណ៌ផ្ទៃខាងក្រោយរបស់អ្នកសម្រាប់អក្សរទីមួយ:

p: អក្សរដំបូង {ទំហំពុម្ពអក្សរ: 300%; background-color: # 000; ពណ៌: #fff; } p: បន្ទាត់ទី 1 {បន្ទាត់កំពស់: 100%; }

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

p: អក្សរដំបូង {ទំហំពុម្ពអក្សរ: 300%; background-color: # 000; ពណ៌: #fff; } p: បន្ទាត់ទី 1 {បន្ទាត់កំពស់: 100%; } p {text-indent: 45% ; }

មួកដើមជាប់គ្នាគឺពិបាកជាមួយ CSS

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

p {text-indent: -2.5em; រឹមឆ្វេង: 3em; } p: អក្សរទីមួយ {font-size: 3em; } p: បន្ទាត់ទី 1 {បន្ទាត់កំពស់: 100%; }

ទទួលបានមួកដំបូងស្រស់ស្អាត

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

p: អក្សរទីមួយ {font-size: 3em; គ្រួសារពុម្ពអក្សរ: "ស្គ្រីប Edwardian ITC", "Brush Script MT", cursive; } p: បន្ទាត់ទី 1 {បន្ទាត់កំពស់: 100%; }

ហើយតាមធម្មតាអ្នកអាចដាក់ការស្នើទាំងអស់នេះជាមួយគ្នាដើម្បីបង្កើតទំរង់ដំបូងដែលផ្សាយពាណិជ្ជកម្មរចនាប័ទ្មទៅកថាខណ្ឌរបស់អ្នក។

ប្រើក្រាហ្វិកបឋម

ប្រសិនបើអ្នកនៅតែមិនចូលចិត្តមួកដំបូងរបស់អ្នកមើលលើទំព័រអ្នកអាចប្រើក្រាហ្វិកដើម្បីទទួលបានលទ្ធផលពិតប្រាកដដែលអ្នកកំពុងស្វែងរក។ ប៉ុន្តែមុនពេលអ្នកសំរេចចិត្តផ្លាស់ទីត្រង់ទៅក្រាហ្វិកអ្នកគួរតែដឹងអំពីគុណវិបត្តិនៃវិធីសាស្រ្តនេះ:

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

ដំបូងអ្នកត្រូវបង្កើតក្រាហ្វិកនៃអក្សរទីមួយ។ ខ្ញុំបានប្រើកម្មវិធី Photoshop ដើម្បីបង្កើត L អក្សរជាមួយពុម្ពអក្សរ "Edwardian Script ITC" ។ ខ្ញុំបានធ្វើឱ្យវាមានទំហំធំ - ទំហំ 300 សង់ទីម៉ែត្រ។ បន្ទាប់មកខ្ញុំបានច្រឹបរូបភាពចុះក្រោមនៅទីអប្បបរមានៅជុំវិញលិខិតនោះហើយបានកត់សម្គាល់ទំហំនិងកម្ពស់របស់រូបភាព។

បន្ទាប់មកខ្ញុំបង្កើតថ្នាក់ "capL" សម្រាប់កថាខណ្ឌខ្ញុំ។ នេះគឺជាកន្លែងដែលខ្ញុំកំណត់អ្វីដែលរូបភាពប្រើ, ការនាំមុខ (បន្ទាត់កម្ពស់), និងច្រើនទៀត។

អ្នកត្រូវប្រើទទឹងនិងកម្ពស់រូបភាពដើម្បីកំណត់អត្ថបទចូលបន្ទាត់និងចន្លោះពីកំពូល។ សម្រាប់រូបភាព L របស់ខ្ញុំខ្ញុំត្រូវការការចូលបន្ទាត់ 95px និងចន្លោះ 72px ។

p.capL {បន្ទាត់កំពស់: 1em; background-image: url (capL.gif); background-repeat: no-repeat; អត្ថបទចូលបន្ទាត់: 95px; padding-top: 72px; }

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

span.initial {display: none; }

ហើយក្រាហ្វិកបន្ទាប់មកបង្ហាញត្រឹមត្រូវ។ អ្នកអាចលេងជាមួយការចូលបន្ទាត់អត្ថបទនៅលើកថាខណ្ឌដើម្បីឱ្យអត្ថបទវាយអត្ថបទយ៉ាងត្រឹមត្រូវទៅតាមអក្សរប៉ុន្តែអ្នកចង់ឱ្យវាបង្ហាញ។