មេរៀនទី២: មេរៀនសង្ខេប Syntax CSS មេរៀន១: សញ្ញាមូលដ្ឋាន CSS


. CSS ជាអ្វី?
CSS ជាអក្សរកាត់មកពីពាក្យថា Cascading Style Sheets ត្រូវបាន ចាត់ ទុកថា ជាភាសាពិសេស មូយសម្រាប់លោកអ្នកដែល បានធ្វើការ ងារទាក់ទងទៅនឹងការរចនា Website។ ហើយម្យ៉ាងវិញទៀត វាជាអ្នកផ្តល់ភាពងាយស្រួលជាច្រើនក្នុងការគ្រប់គ្រង លើ style (​ដូចជាៈ font, color, size ល។)​ និង layout (ដូចជាៈ background, margin, padding ល។) របស់ web pages ទាំងអស់ ក្នុង ពេលតែមួយ ដែលធ្វើអោយលោកអ្នក ចំណេញពេលវេលាបានយ៉ាងច្រើនក្នុង ការធ្វើ អោយ website មួយឲមានសោភ័ណភាព និង លក្ខណៈ រស់ រវើក។ ជារួម CSS មានន័យថាជា ការបែងចែក តួនាទី ដាច់ ដោយឡែក​នៅក្នុង HTML File មួយរវាង content​​ និង layout របស់ fileនោះ។
សំគាល់ៈ សិក្សា CSS ទាមទារលោកអ្នកត្រូវចេះភាសា HTML ជាមុនសិន។
២.​ កម្មវិធីដែលអាចសរសេរភាសា CSS និង HTML
​          លោកអ្នកអាចសរសេរភាសា CSS និង HTML ចំពោះម៉ាស៊ីន កុំព្យូទ័រដែលប្រើ ប្រព័ន្ធដំណើរការ Window ជាមួយនឹងកម្មវិធីដូចជា៖
- Text Editor
- Word Processor
- WordPad
-  FrontPage
- Dreamweaver
ដោយឡែកចំពោះម៉ាស៊ីនកុំព្យូទ័រដែលតំណើរការដោយប្រព័ន្ធ Macintosh លោកអ្នក អាចប្រើកម្មវិធី ដូចជា៖
​- TeachText
- SimpleText
ប៉ុន្តែជារួមលោកអ្នកនៅតែប្រើប្រាស់ code របស់ CSS និង HTML ដូចគ្នា ហើយបង្ហាញ លទ្ធផល តែ មួយបើទោះបីលោកអ្នកប្រើ ប្រាស់ កម្មវិធីណាមួយដូចដែលបានបង្ហាញខាងលើក៏ដោយ។ គួរគត់ សំគាល់ ផងដែរទៅលើកម្មវីធី Microsoft FrontPage និង Dreamweaver វាជាកម្មវីធី ដែលមាន Interface និង Tools ជាច្រើនមានលក្ខណៈងាយ ស្រួលប្រើប្រាស់សម្រាប លោកអ្នក បង្កើតសរសេរ CSS និង HTML។
២.១​ កម្មវិធី Macromedia Dreamweaver
Dreamweaver ជាកម្មវីធីដែលលោកអ្នកត្រូវតម្លើងបន្ថែមទៅក្នុងប្រព័ន្ធដំណើរ ការ Window នៅលើម៉ាស៊ីនកុំព្យូទ័ររបស់លោកអ្នក។
២.១.១​ ទាញយកកម្មវិធី Macromedia Dreamweaver ពីInternet
​          លោកអ្នកអាចរកកម្មវីធីនេះបាន តាមរយះ Website​​​ (www.google.com.kh) ដោយគ្រាន់តែវាយឃ្លាថា “Download Dreamweaver Torrent” បញ្ចូលទៅកន្លែង ប្រអប់ស្វែងរក​ រួចហើយសូមចុច button ស្វែងរកនោះជា ការស្រេចដូចបង្ហាញ រូបភាព២.១ខាងក្រោម៖
a- បន្ទាប់មកលោកអ្នកត្រូវស្វែងរកប៊ូតុង Download ដែលបាន link ទៅកាន Fileមួយមាន extension (.torrent) ដូចរូបភាព២.១.២​ខាងក្រោម៖
a- បន្ទាប់មកសូមតំណើការកម្មវីធីមួយឈ្មោះថា Torrent ដូចរូបភាព២.១.៣ខាងក្រោម៖
a២.១.២​ តំណើការកម្មវិធី Macromedia Dreamweaver
​    
បន្ទាប់ពី download កម្មវីធី Dreamweaver ចប់សព្វគ្រប់រួចហើយ សូមលោកអ្នក ធ្វើការតំឡើងកម្មវីធីនោះ រួចហើយចូលទៅ បើកកម្មវិធី នោះតាមវិធីដូចរូបភាព ២.១.២ ខាងក្រោម៖
aដើម្បីបង្កើត Fileមួយជា CSS សូមលោកអ្នកចុច​ (Ctrl + N) ដូចបង្ហាញ ក្នុងរូបភាព ៥ ខាងក្រោម៖
a២.២​ កម្មវិធី NotePadរបស់ Window  
កម្មវិធី NotePad ជាកម្មវិធីមួយដែលមានស្រាប់ក្រោយពេលលោក អ្នកបាន តម្លើងប្រព័ន្ធ ដំណើរការ Window នៅលើម៉ាស៊ីនកុំព្យូទ័រ របស់អ្នក។ ហើយលោកអ្នក អាចតំណើរការ កម្មវិធីនេះតាមពីររបៀប៖
របៀបទី១ ដូចក្នុងរូបភាព ៦ខាងក្រោម
aរបៀបទី២ ដូចក្នុងរូបភាព ៧ខាងក្រោម
ចុច Start > All Programs > Accessories > Notepad​ ជាការស្រេច
aតាមរបៀបទាំងពីរខាងលើលោកអ្នកនឹងបានឃើញកម្មវីធី NotePad រូបភាព៨ ដូចខាងក្រោម៖
a៣​ CLASS, SELECTOR, PROPERTY, VALUE របស់ CSS ជាអ្វី? Class របស់ CSS គឺជាពុម្ពគំរូមួយសម្រាប់គ្រប់គ្រងលើ background, margin, padding ហើយនឹង ធ្វើការរចនាទៅលើ style (ដូចជាៈ​font, color, size ជាដើម)​​ នៃ tag ណាមួយរបស់ HTML យ៉ាងងាយស្រួលសំរាប់ លោកអ្នក។ Class របស់ CSS បានផ្ទុក ទៅដោយ selector, property និង​​ value។ Syntax ឬ ទម្រង់​ Class របស់ CSS មាន រូបរាងដូចខាង ក្រោម៖
selector {property:value}
selector ជាទូទៅគឺជា element ឬ tag របស់ HTML ឬមួយជាតំលៃ(value) នៃ attribute របស់ Class ឬក៏ជា​តំលៃ(value) នៃ attribute id ​របស់ tag HTML។
​          property ជាលក្ខណៈរចនាផ្សេងដូចជា font, color និង​ size ជាដើម ហើយត្រូវ បានកំណត់ដោយតំលៃច្បាស់លាស់(Value)។
​          value ជាតំលៃលេខ ឬអក្សរ ឬក៏អក្សរលាយលេខ តែប្រសិន value មានតំលៃ ចូលរួមដោយ space តំម្រូវអោយតំលៃទាំងនោះស្ថិតនៅក្នុង quote (‘ ’) ឬ double quote (“ ”) ជានិច្ច។
កូដ ១.០ បង្ហាញពីរបៀបប្រាស់ syntax របស់ CSS
body {background-color: black;}
body, td, th {color: #333333;}
h1, h2 {color: #000033;}
h3, h4, h5, h6 {color: #006699;}
a{color: #003366;}

៣.១ បញ្ចូល property ច្រើនទៅលើ selector មួយ
លោកអ្នកអាចបញ្ចូល property លើសពីមួយ(ច្រើន) ទៅអោយ selector តែមួយ បានដែរ។ដើម្បីធ្វើដូចនេះបានគឺទាមទារអោយលោកអ្នកត្រូវប្រើ សញ្ញា ; (semicolon) ដើម្បីបញ្ជាក់ពី ការខណ្ឌចែកពី property មួយទៅ property មួយទៀត។
selector {property1:value1; property2:value2;…}
កូដ ១.១ បង្ហាញពីការបញ្ចូល property ច្រើនទៅលើ selector តែមួយ
body {background-color: black; color: #333333;}

 body{
background-color: black;
color: #333333;
}

៣.២ selector ច្រើនអាចទទួលលក្ខណៈរចនាតែមួយ លោកអ្នកអាចធ្វើអោយ selector ច្រើនអាចទទួលលក្ខណៈ រចនាតែមួយបាន។ ប៉ុន្តែសូមលោកអ្នកប្រើនូវសញ្ញា , (comma) ដើម្បី ខណ្ឌចែកពី​ selector មួយទៅ select មួយទៀត។
Selector1, selector2,… {property1:value1; property2:value2;…}
កូដ ១.២ បង្ហាញពី selector ច្រើនទទួលលក្ខណៈរចនាតែមួយ
body, td, th {color: #333333;}
h1, h2 {color: #000033;}
h3, h4, h5, h6 {color: #006699;}
៣.៣ selector ដើរតួជា value នៃ attribute របស់ class
​          តួយ៉ាងដូចជា ឧទាហរណ៏កូដគំរូក្នុងចំនុច​ខាង​លើ គ្រប់ selector ទាំងអស់ វាគឺជា tag របស់ HTML។ ជាការពិត វាមានលក្ខណៈ ខុសគ្នារវាងការប្រើ selector ដែលជា tag របស់ HTML ទៅនឹងការប្រើ selector ដែលជាតំលៃ(value) នៃ attribute class របស់ tag។
​          លក្ខណៈខុសគ្នាត្រង់ថាបើសិនជាលោកអ្នកប្រើ selector ដែលជា tag របស់ HTML នោះមានន័យថា tag នោះដើរតួនាទីជា selector ដោយទទួលឥទ្ធិពលពី CSS គ្រប់ពេល លោកអ្នក បានប្រើវា។ចំណែកការប្រើ select ជាតំលៃ attribute របស់ class គឺវាផ្តល់ លក្ខណៈ ពិសេសមួយ ត្រង់ ថា CSS អាចមានឥទ្ធិពល ទៅលើ tag របស់ HTML បានលុះត្រាតែ tag នោះមានផ្ទុកតំលៃ នៃ attribute របស់ class និងដូចគ្នាទៅនឹង selector​ ផងដែរ។
​          ចំពោះការប្រើ selector ជា value នៃ​ attribute របស់ class មានពីរ syntax ផ្សេងគ្នាដូចខាងក្រោម៖
tag.class-value{property:value;…}
កូដ ១.3 បង្ហាញពី selector ជា value នៃ attribute របស់​ class
p.right{text-align: right}
p.center{text-align: center}


This phrase is right alignment.

This phrase is center alignment.

Syntax
.class-value{property:value;…}
ណាដែល Class-Value របស់វាដូចគ្នាទៅនឹង class ដែលបានបង្កើតនៅក្នុង CSS។
កូដ ១.៤ បង្ហាញពី selector ជា value នៃ attribute របស់​ class

This phrase is center alignment.

This phrase is also center alignment.

៣.៤ selector ជា Value នៃ attribute id
ចំពោះការប្រើ selector ជា value នៃ​ attribute id គឺមានលក្ខណៈ ដូចគ្នាទៅនឹង ការប្រើ selector ជា value នៃ​ attribute class ដូចច្នោះដែរ។ ការប្រើប្រាស់វាមានពីរ syntax ដូចខាងក្រោម៖
Syntax
tag#id-value{property:value;…}
ចំពោះ syntax 1​ នេះមានន័យថា​ CSS នឹងមានឥទ្ធិពលទៅលើ tag HTML ណា ដែលមាន tag និង value នៃ attribute id ដូចគ្នាទៅនឹង tag និង id-value ដែលបាន បង្កើតនៅក្នុង CSS។
កូដ១.៥ បង្ហាញពី selector ជា​ value នៃ attribute id
p#sytle{text-align: center; color: blue}

Content

Syntax
#id-value{property:value;…}
លោកអ្នកក៏អាចយក id-value របស់ tag HTML ទៅប្រើដោយ ផ្ទាល់នៅក្នុង CSS បានដែរ ដើម្បីកំណត់លក្ខណៈរចនាអោយ tag នោះ។
កូដ១.៦ បង្ហាញពី selector ជា​ value នៃ attribute id
#sytle{text-align: center; color: blue}

Content

៣.៥ tag មួយអាចទទួលយក class របស់ CSS ច្រើន
​        tag របស់ HTML មួយក៏អាចទទួលយក class របស់ CSS ច្រើន ផងដែរ ដោយការប្រើ​ attribute class របស់ tag HTML នោះទទួល យកលក្ខណៈរចនា ពី class មួយទៅclass មួយទៀតដោយ ប្រើចន្លោះ ចំហ(space) ដូច syntax ខាងក្រោម៖
Syntax

កូដ១.៧ បង្ហាញពី tag មួយអាចទទួលយក class ច្រើន
center{text-align: center}
.green{color: green}

This is multi CSS class.

៤. Comments របស់ សោភ័ណនិច្ច័យ (CSS) Comment គឺជាទូទៅប្រើសម្រាប់សំគាល់ ឬពន្យល់នូវ script/code​ របស់ លោកអ្នក នៅក្នុងអំឡុងពេលនៃការសរសេរ code ហើយវា មិនត្រូវបានបកប្រែដោយ browser ឡើយ។ វាមានសារៈ ប្រយោជន៏ ក្នុង ការ ជួយ សម្រួលលោកអ្នក អោយចងចាំ ឬរំលឹក script/code ដែលលោកអ្នកបានសរសេរកន្លងមក​ រឺដើម្បីកែប្រែនូវ code នោះ ឡើងវិញជាដើម។ syntax comment របស់ CSS ត្រូវសរសេរចាប់ផ្តើមដោយ /* និង បញ្ជប់ដោយ */។
Syntax
/* your comment */

/*
Your comment
*/

កូដ១.៨ បង្ហាញពី comment របស់ CSS
/* Class for body content */
.body_page{
text-align: center;
color: red;
font-family: Time New Roman;
}

this is body content