រចនាសម្ព័ន្ធ
រចនាសម្ព័ន្ធមូលដ្ឋានរបស់ CSS
CSS Rule គឺមាន ២ ផ្នែកសំខាន់ ៖
- Selector: ប្រើសម្រាប់ជ្រើសរើសធាតុ HTML ដែលចង់រចនា
- Declaration Block: ផ្នែកកំណត់លក្ខណៈរចនាដែលនៅក្នុង
{}
selector {
property: value;
}
រចនាសម្ព័ន្ធលម្អិត:
- Selector: ជ្រើសរើសធាតុ (ឧ. h1, .class, #id)
- { }: សញ្ញាដាក់កូដរចនាក្នុងនេះ
- Property: លក្ខណៈដែលចង់កំណត់ (ឧ. color, font-size)
- : សញ្ញាពីរចំណុចបំបែក property និង value
- Value: តម្លៃរបស់ property
- ; សញ្ញាបញ្ចប់មួយសេចក្តីថ្លែងការណ៍
Selector - ជ្រើសរើសធាតុ
Selector ប្រើសម្រាប់ចាប់យកធាតុណាមួយមករចនា ។ ដើម្បីរចនាលើធាតុមួយ ដំបូងត្រូវចាប់វាជាមុនសិន ។
ឧទាហរណ៍ការប្រើ Selector
ប្រភេទ Selector ទាំង ៣
| ចាប់យកទៅតាម... | របៀបសរសេរ | ឧទាហរណ៍ |
|---|---|---|
| ឈ្មោះធាតុ | ឈ្មោះធាតុ | ចាប់ <h2> ត្រូវសរសេរ h2 |
| ឈ្មោះថ្នាក់ | .ឈ្មោះថ្នាក់ | ចាប់ <p class="a"> ត្រូវសរសេរ .a |
| ឈ្មោះអត្តសញ្ញាណ | #ឈ្មោះអត្តសញ្ញាណ | ចាប់ <p id="b"> ត្រូវសរសេរ #b |
ចំណាំ: Selector នៅមានច្រើនជាងនេះទៀត ដូចជា Attribute Selector, Pseudo-class, Pseudo-element ។ នេះជាទំព័រមេរៀន Selector ពេញលេញ ។
Property និង Value - កំណត់លក្ខណៈ
Property ប្រើសម្រាប់កំណត់លក្ខណៈទៅឲ្យអ្វីដែលចាប់មក ។ Property ត្រូវសរសេរនៅក្នុង {} ដែលនៅបន្ទាប់ពី selector ។
ឧទាហរណ៍ការប្រើ Property
រចនាសម្ព័ន្ធ Property
- ដំបូងសរសេរឈ្មោះ Property
- សញ្ញា
:(ចំណុចពីរ) - តម្លៃនៃ Property
- សញ្ញា
;ដើម្បីបញ្ចប់
selector {
property-name: value;
property-name: value;
}
/* ឧទាហរណ៍ */
p {
color: blue;
font-size: 16px;
margin: 10px;
}
ប្រភេទ Property ទូទៅ
CSS Property មានរាប់រយ ប៉ុន្តែអាចបែងចែកជាប្រភេទដូចខាងក្រោម ៖
១. រចនាអក្សរ
២. រចនាពណ៌ និងផ្ទៃខាងក្រោយ
៣. គម្លាត និងទំហំ
៤. គែម និងម៉ូម
Comments - មតិយោបល់
Comment គឺជាអត្ថបទដែលមិនត្រូវបានប្រតិបត្តិ ។ វាប្រើសម្រាប់ពន្យល់អំពីកូដ ។
/* នេះជា Comment មួយជួរ */
/*
នេះជា Comment
ច្រើនជួរ
*/
h1 {
color: blue; /* កំណត់ពណ៌អក្សរឲ្យខៀវ */
font-size: 24px;
}
/* ខាងក្រោមជារចនាសម្រាប់កថាខណ្ឌ */
p {
color: gray;
}
ប្រើប្រាស់ Comment យ៉ាងណាឲ្យល្អ?
- ពន្យល់កូដស្មុគស្មាញ
- បិទកូដជាបណ្តោះអាសន្នដោយមិនលុបចោល
- បង្កើតចំណាំសម្រាប់ខ្លួនឯង ឬសម្រាប់អ្នកដទៃ
- បែងចែកផ្នែកនៃកូដធំៗ
កំហុសដែលជួបញឹកញាប់
១. ភ្លេចសញ្ញាបញ្ចប់ ;
/* កំហុស */
p {
color: red
font-size: 16px
}
/* ត្រឹមត្រូវ */
p {
color: red;
font-size: 16px;
}
២. ភ្លេចសញ្ញា {}
/* កំហុស */
p
color: red;
/* ត្រឹមត្រូវ */
p {
color: red;
}
៣. ភ្លេចសញ្ញា : រវាង property និង value
/* កំហុស */
p {
color red;
}
/* ត្រឹមត្រូវ */
p {
color: red;
}
៤. ប្រើ = ជំនួស :
/* កំហុស */
p {
color = red;
}
/* ត្រឹមត្រូវ */
p {
color: red;
}
ជំនួយ: កុំភ័យបើមានកំហុស! កម្មវិធីរុករកនឹងរំលងកូដកំហុស ហើយនៅតែបង្ហាញកូដត្រឹមត្រូវដទៃទៀត ។
សេចក្តីសន្និដ្ឋាន
រចនាសម្ព័ន្ធ CSS មាន ២ ផ្នែកសំខាន់ ៖
- Selector: ជ្រើសរើសធាតុ HTML (Element, Class, ID)
- Properties: កំណត់លក្ខណៈរចនា (ពណ៌, ទំហំ, គម្លាត, ជាដើម)
គន្លឹះសម្រាប់ការសរសេរ CSS ឲ្យល្អ ៖
- តែងតែប្រើ
;បញ្ចប់គ្រប់ property - ប្រើការតម្រៀមកូដឲ្យបានល្អ ដើម្បីសម្រួលអាន
- ប្រើ Comment ពន្យល់កូដស្មុគស្មាញ
- សរសេរកូដឲ្យមានភាពជាប់លាប់ និងរៀបរយ
ជំហានបន្ទាប់: ក្នុងមេរៀនបន្ទាប់ យើងនឹងរៀនអំពីទីតាំងដែលអាចសរសេរ CSS (Inline, Internal, External) ។