ធ្វើរចនាប័ទ្មបង្កើត Notepad Web Page ជាមួយ CSS

01 នៃ 10

បង្កើតសន្លឹករចនាប័ទ្ម CSS

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

1. ជ្រើសឯកសារ> ថ្មីនៅក្នុង Notepad ដើម្បីទទួលបានបង្អួចទទេ
2. រក្សាទុកឯកសារជា CSS ដោយចុចឯកសារ <រក្សាទុកជា ...
3. រុករកទៅថត my_website នៅលើដ្រាយវ៍រឹងរបស់អ្នក
4. ផ្លាស់ប្តូរ "រក្សាទុកជាប្រភេទ:" ទៅជា "ឯកសារទាំងអស់"
5. ដាក់ឈ្មោះឯកសារ "styles.css" របស់អ្នក (សូមបិទសញ្ញាសម្រង់) ហើយចុច Save

02 នៃ 10

ភ្ជាប់សន្លឹករចនាប័ទ្ម CSS ទៅ HTML របស់អ្នក

នៅពេលដែលអ្នកបានទទួលសន្លឹករចនាប័ទ្មសម្រាប់គេហទំព័ររបស់អ្នកអ្នកនឹងត្រូវភ្ជាប់វាទៅទំព័របណ្តាញដោយខ្លួនឯង។ ដើម្បីធ្វើដូចនេះអ្នកប្រើស្លាកតំណ។ ដាក់ស្លាកតំណខាងក្រោមនៅកន្លែងណាមួយនៅក្នុងស្លាក នៃឯកសារ pets.htm របស់អ្នក:

03 នៃ 10

កែរឹមទំព័រ

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

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

html, body {
រឹម: 0px
ចន្លោះ: 0px;
ព្រំដែន: 0px;
ឆ្វេង: 0px;
កំពូល: 0px;
}

04 នៃ 10

ការផ្លាស់ប្តូរពុម្ពអក្សរនៅលើទំព័រ

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

ជាធម្មតាអ្នកនឹងផ្លាស់ប្តូរពុម្ពអក្សរនៅលើកថាខណ្ឌឬជួនកាលនៅលើឯកសារទាំងអស់ដោយខ្លួនវាផ្ទាល់។ សម្រាប់គេហទំព័រនេះយើងនឹងកំណត់ពុម្ពអក្សរនៅកម្រិតបឋមកថានិងកថាខណ្ឌ។ បន្ថែមខាងក្រោមទៅកាន់ឯកសាររចនាប័ទ្ម styles.css របស់អ្នក:

p, li {
ពុម្ពអក្សរ: 1em Arial, Helvetica, sans-serif;
}
h1 {
ពុម្ពអក្សរ: 2em Arial, Helvetica, sans-serif;
}
h2 {
ពុម្ពអក្សរ: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
ពុម្ពអក្សរ: 1.25em Arial, Helvetica, sans-serif;
}

ខ្ញុំចាប់ផ្តើមជាមួយ 1em ជាទំហំគោលរបស់ខ្ញុំសម្រាប់កថាខណ្ឌនិងធាតុបញ្ជីហើយបន្ទាប់មកប្រើវាដើម្បីកំណត់ទំហំសម្រាប់ចំណងជើងរបស់ខ្ញុំ។ ខ្ញុំមិនរំពឹងថានឹងប្រើចំណងជើងជ្រៅជាងហ 4 ទេប៉ុន្តែប្រសិនបើអ្នកមានគម្រោងអ្នកនឹងចង់រចនាវាផងដែរ។

05 នៃ 10

ធ្វើឱ្យតំណភ្ជាប់របស់អ្នកកាន់តែគួរឱ្យចាប់អារម្មណ៍

ពណ៌លំនាំដើមសម្រាប់តំណភ្ជាប់មានពណ៌ខៀវនិងស្វាយសម្រាប់តំណដែលមិនបានមើលនិងទស្សនា។ ខណៈពេលនេះជាស្តង់ដារវាប្រហែលមិនសមនឹងគ្រោងពណ៌នៃទំព័ររបស់អ្នកដូច្នេះសូមផ្លាស់ប្តូរវា។ នៅក្នុងឯកសាររចនាប័ទ្ម styles.css របស់អ្នកបន្ថែមដូចខាងក្រោម:

a: link {
គ្រួសារពុម្ពអក្សរ: Arial, Helvetica, sans-serif;
ពណ៌: # FF9900;
អត្ថបទ - តុបតែង: គូសបន្ទាត់ពីក្រោម;
}
a: បានចូលមើល {
ពណ៌: # FFCC66;
}
a: hover {
ផ្ទៃខាងក្រោយ: #FFFFCC;
font-weight: bold;
}

ខ្ញុំបានបង្កើតរចនាប័ទ្មតំណបីមួយ: តំណជាលំនាំដើមមួយ: បានចូលមើលនៅពេលដែលវាត្រូវបានគេមើលឃើញខ្ញុំផ្លាស់ប្តូរពណ៌និងមួយ: ដាក់។ ជាមួយនឹង: ដាក់កណ្តុរខ្ញុំមានតំណភ្ជាប់ពណ៌ផ្ទៃខាងក្រោយហើយបញ្ចូលដិតដើម្បីបញ្ជាក់ថាវាជាតំណដែលត្រូវចុច។

06 នៃ 10

ធ្វើរចនាប័ទ្មផ្នែករុករក

ចាប់តាំងពីយើងដាក់ការរុករក (id = "nav") ផ្នែកជាលើកដំបូងនៅក្នុង HTML, សូមឱ្យរចនាប័ទ្មវាជាលើកដំបូង។ យើងត្រូវបង្ហាញថាវាមានទំហំធំប៉ុនណានិងដាក់រឹមធំជាងនៅខាងស្ដាំដូច្នេះអត្ថបទដើមនឹងមិនប៉ះទង្គិចវាទេ។ ខ្ញុំក៏បានដាក់ស៊ុមនៅជុំវិញវា។

បន្ថែម CSS ទៅឯកសារ CSS.css របស់អ្នក:

#nav {
ទទឹង: 225 ភីក;
រឹមស្តាំ: 15px;
ព្រំដែន: មធ្យមរឹង # 000000;
}
#nav li {
list-style: none;
}
។ ប្រដាប់ក្មេងលេង {
ទំហំពុម្ពអក្សរ: .75em;
ច្បាស់លាស់: ទាំងពីរ;
ទទឹង: 100%;
text- align: center;
}

លក្ខណសម្បត្តិរចនាប័ទ្មបញ្ជីបង្កើតបញ្ជីក្នុងផ្នែករុករកដើម្បីមិនមានចំណុចឬលេខនិងហ្វាយ័រស្ទូឌីយោនៃផ្នែកសិទ្ធិអ្នកនិពន្ធត្រូវមានទំហំតូចនិងនៅចំកណ្តាល។

07 នៃ 10

កំណត់ទីតាំងមេ

ដោយដាក់ទីតាំងចម្បងរបស់អ្នកដោយទីតាំងដាច់ខាតអ្នកអាចប្រាកដថាវានឹងស្ថិតនៅកន្លែងដែលអ្នកចង់ឱ្យវានៅលើគេហទំព័ររបស់អ្នក។ ខ្ញុំបានបង្កើតអុីនធឺរ 800px ធំទូលាយដើម្បីភ្ជាប់ទៅនឹងអេក្រង់ធំ ៗ ប៉ុន្តែប្រសិនបើអ្នកមានម៉ូនីទ័រតូចអ្នកប្រហែលជាចង់ធ្វើឱ្យកាន់តែតូច។

ដាក់ដូចខាងក្រោមនៅក្នុងឯកសារ styles.css របស់អ្នក:

# មរ {
ទទឹង: 800px;
កំពូល: 0px;
ទីតាំង: ដាច់ខាត
ឆ្វេង: 250px;
}

08 នៃ 10

សម្រាកកថាខណ្ឌរបស់អ្នក

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

ដាក់ដូចខាងក្រោមនៅក្នុងឯកសារ styles.css របស់អ្នក:

.topline {
border-top: solid # FFCC00;
}

ខ្ញុំបានសម្រេចចិត្តធ្វើវាជាថ្នាក់មួយដែលគេហៅថា "ជួរមុខ" ជាជាងគ្រាន់តែកំណត់កថាខណ្ឌទាំងអស់តាមរបៀបនោះ។ វិធីនេះប្រសិនបើខ្ញុំសម្រេចចិត្តថាខ្ញុំចង់មានកថាខណ្ឌមួយដោយគ្មានបន្ទាត់ពណ៌លឿងកំពូលខ្ញុំអាចទុកចោល class = "topline" នៅក្នុងស្លាកកថាខណ្ឌហើយវានឹងមិនមានស៊ុមខាងលើទេ។

09 នៃ 10

រចនាប័ទ្មរូបភាព

ជាទូទៅរូបភាពមានស៊ុមនៅជុំវិញពួកវាវាមិនតែងតែអាចមើលឃើញទេលុះត្រាតែរូបភាពជាតំណប៉ុន្តែខ្ញុំចូលចិត្តមានថ្នាក់នៅក្នុង CSS stylesheet របស់ខ្ញុំដែលបិទស៊ុមដោយស្វ័យប្រវត្តិ។ សម្រាប់សន្លឹករចនាប័ទ្មនេះខ្ញុំបានបង្កើតថ្នាក់ "noborder" ហើយភាគច្រើននៃរូបភាពនៅក្នុងឯកសារគឺជាផ្នែកនៃថ្នាក់នេះ។

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

ដាក់ដូចខាងក្រោមនៅក្នុងឯកសារ styles.css របស់អ្នក:

#main img {
float: left;
រឹមស្តាំ: 5px;
រឹមខាងក្រោម: 15px;
}
។ មិនប្រើ {
ព្រំដែន: 0px គ្មាន;
}

ដូចដែលអ្នកបានឃើញរួចហើយក៏មានលក្ខណសម្បត្តិរឹមដែលបានកំណត់នៅលើរូបភាពដើម្បីប្រាកដថាពួកវាមិនត្រូវបានបែកខ្ទេចខ្ទីប្រឆាំងនឹងអត្ថបទអណ្តែតដែលនៅក្បែរពួកវាក្នុងកថាខណ្ឌ។

10 នៃ 10

ឥឡូវនេះចូរមើលទំព័រដែលអ្នកបានបញ្ចប់

នៅពេលដែលអ្នកបានរក្សាទុក CSS របស់អ្នកអ្នកអាចផ្ទុកទំព័រ pets.htm ឡើងវិញនៅក្នុងកម្មវិធីរុករកបណ្តាញរបស់អ្នក។ ទំព័ររបស់អ្នកគួរមានរូបរាងប្រហាក់ប្រហែលនឹងរូបភាពដែលបានបង្ហាញនៅក្នុងរូបភាពនេះជាមួយនឹងការតម្រឹមរូបភាពនិងការរុករកយ៉ាងត្រឹមត្រូវនៅផ្នែកខាងឆ្វេងនៃទំព័រ។

ធ្វើតាមជំហានដូចគ្នាទាំងនេះសម្រាប់រាល់ទំព័រខាងក្នុងសម្រាប់ទំព័រនេះ។ អ្នកចង់មានទំព័រមួយសម្រាប់គ្រប់ទំព័រក្នុងការស្វែងរករបស់អ្នក។