មេរៀន២ ទំនាក់ទំនងរវាង CSS និង HTML / XHTML

ការពិតទៅ CSS និង HTML ជាគូរដែលមិនអាចខ្វះគ្នាបាននៅពេល លោកអ្នកសំរេចចិត្តបង្កើត Website មួយ​។​ ផ្ទុយទៅវិញ ប្រសិនបើ លោកអ្នក មិនប្រើ CSSនោះ លោកអ្នកនឹងជួបការស្មុគស្មាញ នឹងពិបាក គ្រប់គ្រងលើបញ្ហា ពិបាកកំនត់ទំរង់រចនាបទ ទៅតាមការ ចង់បាន (style, Layout) មានជាអាទ៌ style សំដៅដល់ លក្ខណៈអក្សរ កំណត់ ពណ៌ ជាដើម និងLayout សំដៅដល់ margin ទំរង់ page ទីតាំង Object ជាដើមផងដែរ។ នៅក្នុងមេរៀននេះលោកអ្នក នឹង សិក្សាអំពីមូលបទដូចជាៈ
​- ទីតាំងដែលអាចបង្កើត Class របស់ CSS
- របៀបហៅ Class ទៅប្រើនៅក្នុង HTML

១. តើសោភ័ណនិច្ច័យ​(CSS)​ត្រូវសរសេរនៅទីតាំងណា?
លោកអ្នកបានដឹងពីសារះប្រយោជន៏ និងរូបមន្តនៃរបៀបបង្កើត Class  នៅក្នុងមេរៀនទី១រួចមកហើយ ប៉ុន្តែមិនទាន់បានដឹង ថាតើលោក អ្នកត្រូវ សរសេរClassនោះ ទៅប្រើនៅទីណាក្នុងHTML​ នៅឡើយ ទេ។ ដូចច្នេះត្រង់ ចំនុចនេះ លោកអ្នកនឹងបានដឹង និងសិក្សាពី ទីតាំង ដែលអាចសរសេរ CSS statement ទាំងនោះ។
​១.១ ទីតាំងផ្ទាល់ជាមួយ attribute style របស់ tag (inline style)
លោកអ្នកអាចសរសេរ CSS ដោយផ្ទាល់ជាមួយ tag របស់ HTML បានដោយប្រើ attribute style។ ខាងក្រោមនេះជារូបមន្ត syntax នៃការ សរសេរ CSS ជាមួយនឹង attribute style៖
Syntax

កូដ២.១ សរសេរ CSS ជាមួយនឹង attribute style

this inline style 1

This is paragraph
កូដ២.១ត្រង់បន្ទាប់ទី១ បានសរសេរថា

This inline style

មានន័យថា tag នឹងទទួលឥទ្ធិពលពីCSS  ដោយកំនត់អក្សរ មានពណ៌ក្រហម ហើយតំរឹមខាងឆ្វេងស្មើនឹង 20 pixels។​ ដោយឡែកចំណែកបន្ទាត់ ទី២វិញ ដែលបានសរសេរថា This is paragraph
គឺមិនបានទទួលឥទ្ធិពល ពី CSS ឡើយ។
សំគាល់ៈ ការសរសេរCSSផ្ទាល់ ដោយប្រើ​ attribute style មិនសូវផ្តល់ គុណសម្បត្តិ និងប្រយោជន៏ដល់លោកអ្នកនៅឡើយទេ ព្រោះថាឥទ្ធិពលរបស់ CSS មានតែម្តង តែចំពោះtag HTML ដែល បានសរសេរតែប៉ុណ្ណោះ ប៉ុន្តែបើសិនជាលោក អ្នកចង់អោយ tag ផ្សេងទៀតទទួលឥទ្ធិពលដូចគ្នា តម្រូវអោយលោកអ្នកសរសេរឡើង វិញទៅអោយ tag នោះ ដូចបង្ហាញឧទាហរណ៏កូដ២.២ខាងក្រោម៖

This is paragraph

Internal Style Sheet មានឥទ្ធិពលគ្រប់ដណ្តបពេញមួយ HTML Document ដែលមានន័យថាគ្រប់ tag របស់ HTML គឺអាចទទួល ឥទ្ធិពលពី Class របស់ CSS ទាំងអស់ដែល បានបង្កើត។ Internal Style Sheet ជាទូទៅត្រូវសរសេរនៅត្រង់ tag របស់​​ HTML​ ហើយត្រូវប្រើ tag​ បើកនិងបិទ ឈ្មោះថា​ ។​ ទំរង់ Internal Style Sheet មានរូបមន្តដូចខាងក្រោម
Syntax



               


ឧទាហរណ៏ លោកអ្នកអាចបង្កើត Page មួយដែលមានឈ្មោះថា​ Internal Style Sheet.html ដោយប្រើនូវ Internal Style Sheet ដើម្បីកំនត់បាននូវលក្ខណៈដូចរូប ភាពខាងក្រោម
ការវិភាគៈ
​          ដូចបានបង្ហាញក្នុងរូបភាព៩ដែលបានកំណត់នូវទំរង់និងទ្រង់ទ្រយ អត្ថបទ នៅក្នុងនោះ រួមមានtag ជាកត្តាចំបង់ ដែលកំណត់ ទំរង់អក្សរជារួមមានឈ្មោះថា Cambria, “Times New Roman”, Arial ។ហើយ tag title សំរាប់កំណត់ពណ៌ និងទំហំជា title នៅក្នុងអត្ថបទ។ ហើយ tag

---

1 ជាបន្ទាត់ទី១ tag subtitle សំរាប់កំនត់ពណ៌ និងទំហំជា subtitle នៅក្នុងអត្ថបទ។ ហើយមាន tag content សំរាប់ កំនត់លក្ខណៈ អត្ថបទធម្មតាមានជាពណ៌ ទំហំអក្សរ។ ហើយមាន tag sub-content សំរាប់កំណត់ លក្ខណៈអោយអត្ថបទជា sub-content។​​ និងចុងក្រោយត្រូវបញ្ចប់ដោយបន្ទាប់ទី២ គឺ

---

2។
ការសរសេរដូដៈ
​        នៅក្នុងចំនុចសរសេរកូដនេះលោកអ្នកនឹងកាន់តែយល់ច្បាស់អំពីការប្រើប្រាស់ Internal Style Sheet ដែលត្រូវបង្ហាញដូចកូដ២.២ ដូចខាងក្រោម៖
កូដ២.២ របៀបប្រើប្រាស់ Internal Style Sheet

class=”title”

>HOW TO USE INTERNAL STYLE SHEET

---

class=”subtitle”

>THIS IS INTERNAL STYLE SHEET CLASS.

class=”content”

> We use Internal Style Sheet in the same HTML file document but we place it in head tag of HTML document.In the CSS Rule Definition dialog box, select Type, and then set the style attributes you want.

Leave any of the following attributes empty if they are not important to the style:

class=”subcontent”

>

Font sets the font family (or series of families) for the style. Browsers display text in the first font in the series that is installed on the user’s system. For compatibility with Internet Explorer 3.0, list a Windows font first. The font attribute is supported by both browsers.                     

Size defines the size of the text. You can choose a specific size by selecting the number and the unit of measurement, or you can choose a relative size. Pixels as a unit work well to prevent browsers from distorting your text. The size attribute is supported by both browsers.

Style specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. The style attribute is supported by both browsers.

---

បកស្រាយកូដៈ
​        កូដ២.២ខាងលើលោកអ្នកពិតជាបានឃើញ Class របស់ CSS ទាំងអស់ ចំនួន ៥ ដែលបានបង្កើត ដើម្បីប្រាស់នៅក្នុង ឧទាហរណ៏ ខាងលើនេះ។ ការបង្កើត Class ទាំង នេះ​នៅជាមួយ File HTML តែមួយ គឹត្រូវបានហៅថា Internal Style Sheet។ ប៉ុន្តែលោក អ្នកក៏ បានឃើញផងដែរ លើភាព ខុសគ្នានៃការបង្កើត selector ហើយនឹង ការ ហៅយកវា ទៅប្រើប្រាស់វិញដែរ។

p.title{  font-family: Cambria, “Times New Roman”, Arial; ​font-size: 25px;​margin-left:0px;}
ជា Class មួយមាន selector ឈ្មោះជា​ tag ដែលមានតំលៃ​ attribute class របស់ខ្លួនស្មើនឹង title។ ដូចច្នេះ Class នេះទទួល ឥទ្ធិពលចំពោះតែ tag ណាដែលមាន attribute class ឈ្មោះថា​ title ប៉ុណ្ណោះ។ ចំណែក tag ផ្សេង វិញ គឺមិនទទួលឥទ្ធិពលឡើយ។ class នេះបានកំនត់ ប្រភេទអក្សរជាទំរង់​ Cambria ឬ  Time New Roman ឬ Arial ដែលមានទំហំ ២៥ pixel និងមានគំលាតចេញ ពីព្រំ ដែន ខាងឆ្វេងនៃ Page ប្រមាណ ០pixel។

• hr{ border:solid; border-color:#FF0000 }
  ​​ជា Class មួយមាន selector ឈ្មោះថា tag

  ---

  (បន្ទាត់ដេក)។ នៅពេល លោកអ្នកប្រើ tag

  ---

  វានឹងទទួលឥទ្ធិពលពី Class នេះភ្លាម។ លក្ខណៈរបស់ Class នេះមាន បន្ទាត់ជាទំរង់ solid ហើយនឹងមានពណ៌បន្ទាត់ក្រហម។
• .subtitle { font-family: Cambria, “Times New Roman”, Arial; font-size: 16px;
  color:#0000FF​​​ }
• ជា Class មាន selector ឈ្មោះថា subtitle បានកំនត់លក្ខណៈរចនារបស់ខ្លួនមាន ដូចជា ទំរង់អក្សរជា ​ Cambria ឬ  Time New Roman ឬ Arial  ទំហំអក្សរ 16pixel និង ពណ៌អក្សរ ខៀវ។

Internal Style sheet មានលក្ខណៈល្អជាង Inline Style ត្រង់ថា ឥទ្ធិពល របស់អាច គ្របដណ្តប់ ពេញមួយ HTML Document មាន ន័យថាគ្រប់ Tag របស់ HTML គឺអាច ទទួលឥទ្ធិពលពី Class របស់ CSS ទាំងអស់ដែលលោកអ្នកបានបង្កើត។

១.៣​​ នៅក្រៅទីតាំង ឬ External Style Sheet
​          ការធ្វើ website លោកនឹងត្រូវការ code របស់ CSS ជាច្រើនដើម្បី ប្រើប្រាស់ កំនត់នូវទំរង់ រចនាបទ ដែលលោកអ្នកចង់បានមានដូចជា style(font, color, size, …) ឬ Layout( background, margin, padding ,…)។ លោកអ្នកគួរតែជ្រើសរើសវិធីសាស្រ្ត គ្រប់គ្រងលើ Code របស់ CSS អោយបានល្អ និងមានប្រសិទ្ធភាព ដើម្បីជាសវាងនូវ​ ការសរសេរកូដជ្រាំដែល ខាត់ពេលវេលា និង File អាចមានទំហំធំ ដែលធ្វើអោយ ល្បឿនតំណើរការអាចកាត់ បន្ថយផងដែរ។ ដូចច្នេះ External Style Sheet គឺវីធី សាស្រ្តមួយសម្រាប់ជា ដំណោះស្រាយ ដ៏ល្អសម្រាប់លោកអ្នក។ External Style Sheet គឺជាការបង្កើត File មួយដាច់ដោយឡែកសម្រាប់ផ្ទុកតែ Class របស់ CSS តែប៉ុណ្ណោះ ហើយគ្រប់ HTML File អាចប្រើ Class ទាំងនោះដោយគ្រាន់តែហៅ File (External Style Sheet) យកមក Import តាមរយះtag ឈ្មោះ ដែលលោកអ្នកនឹងយល់​នៅ ចំនុចបន្ទាប់នេះ។

១.៤ របៀបបង្កើត File ជា External Style Sheet ឬ CSS file
ដើម្បីបង្កើត File ជា External Style Sheet ឬ ហៅថា file CSS បានលោកអ្នក អាចប្រើកម្មវិធី Dreamweaver រឺកម្មវិធីផ្សេងទៀតដែល លោកអ្នកអាចសរសេរ Code ឬ Script របស់ HTML បានហើយត្រូវ រក្សា ទុកឬ Save ដោយកំនត់កន្ទុយ(Extension) File នោះមានទំរង់ .CSS។ ម៉្យាងវិញទៀតការបង្កើត CSS File មិនតំរូវអោយលោក ប្រើប្រាស់​និងផ្ទុក tag  របស់ HTML ទេ។ ខាងក្រោមនេះជាឧទាហរណ៏នៃការបង្កើត Class របស់ CSS ជាលក្ខណៈ External Style Sheet ដោយប្រើប្រាស់កម្មវិធី Dreamweaver ដោយ Save និងដាក់ឈ្មោះថា class.css។
​សូមដំណើរការកម្មវីធី Dreamweaver រួចចុច File > New… ដូចបានបង្ហាញរូបភាព១០ ដូចខាងក្រោម៖

កូដ២.៣ Class ជាលក្ខណៈ External Style Sheet

១.៥ ហៅ CSS file មកប្រើនៅក្នុង HTML / XHTML នៅត្រង់ចំនុចនេះលោកអ្នកនឹង យល់ពីរបៀបហៅ  CSS file មកប្រើ នៅ ក្នុង HTML file បន្ទាប់ពីលោកអ្នកបានបង្កើត Class របស់ CSS មានលក្ខណៈជា External Style Sheet ដូចនៅចំនុច ១.៥។ ជាទូទៅ ទីតាំងបញ្ចូល(Import) External Sheet Sheet ឬ CSS file ត្រូវ សរសេរ នៅក្នុងប្លុក tag External Sheet Sheet ហើយដោយប្រើ tag ឈ្មោះថា ដូចនឹងបង្ហាញរូបមន្តខាងក្រោម៖

Syntax

href : ជា attribute សម្រាប់តំរូវអោយលោកអ្នកបញ្ជាក់ពីទីតាំង(path) របស់ CSS file ឬ External Style Sheet របស់លោកអ្នក។
ឧទាហរណ៏ខាងក្រោមនេះនឹងបង្ហាញលោកអ្នកកាន់តែយល់ច្បាស់ពីការបញ្ចូល CSS file ទៅក្នុង HTML file ( index.html ) ដោយសន្មត់ថា៖

• File ទាំងពីរស្ថិតនៅទីតាំង ជាមួយគ្នាដូចរូបភាព ១១ ខាងក្រោម
• 

កូដ២.៤ CSS file (class.css)
កូដ២.៥ HTML file (index.html)
File ទាំងពីរស្ថិតនៅទីតាំង ផ្សេងគ្នាដូចរូបភាព ១២​ ខាងក្រោម
រូបភាព១២ បង្ហាញពីFile: index.html, class.css ស្ថិតនៅទីតាំងខុសគ្នា
ប្រសិនបើទីតាំងរបស់ File ទាំងពីរស្ថិតនៅទីតាំងផ្សេងគ្នាលោកអ្នកត្រូវ
ប្រែប្រួលលើទីតាំងត្រង់ attribute href  របស់ tag ដូចកូដ២.៦​ខាងក្រោម
កូដ២.៦ HTML file (index.html)