ពណ៌

ប្រភេទ​ពណ៌​ដែល​អាច​ប្រើ​ក្នុង​កូដ CSS មាន ៖

ឈ្មោះ​នៃ​ពណ៌

ឈ្មោះ​នៃ​ពណ៌ គឺ​ជា​ពាក្យ​សាមញ្ញ​ដែល​យើង​តែង​ប្រើ​សំរាប់​ហៅ​ពណ៌​ដូចជា ក្រហម ខៀវ បៃតង ខ្មៅ ស ... ។ ក្នុង​ការ​ប្រើប្រាស់​គឺ​ត្រូវ​សរសេរ​វា​ជា​ភាសាអង់គ្លេស ។

ពណ៌​ខ្មៅ គឺ black ។

p {
    color: red;
}
<h2>អំពី KHODE</h2>
<p>ស្វាគមន៍​មក​កាន់ KHODE ។</p>
<p>ឥត​គិត​ថ្លៃ សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
<p>សូម​ជួយ​ចែក​រំលែក ។</p>

ឈ្មោះ​នៃ​ពណ៌​ដែល​អាច​ប្រើ​បាន មាន​នៅ​ក្នុង​ទំព័រ​នេះ ។

ក្នុង​ករណី​ពណ៌​ដែល​អ្នក​ចង់​ប្រើ មិន​មាន​ជា​ឈ្មោះ​នៃ​ពណ៌ អ្នក​ត្រូវ​ប្រើ​ប្រភេទ​ពណ៌​ផ្សេង​ជំនួស​វិញ ។

HEX color

HEX color គឺ​ជា​តម្លៃ​តំណាង​ឲ្យ​ពណ៌​នីមួយៗ ដែល​ប្រើប្រាស់​លេខ​ក្នុង​របាប់​គោល​១៦ ចំនួន​៦​ខ្ទង់ ។ ពាក្យ​ពេញ​នៃ HEX គឺ hexadecimal ។

ពណ៌​ខៀវ គឺ #0000FF ។

#kh {
    background-color: #0000ff;
    color: white;
}
<h2>អំពី KHODE</h2>
<p>ស្វាគមន៍​មក​កាន់ KHODE ។</p>
<p id="kh">ឥត​គិត​ថ្លៃ សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
<p>សូម​ជួយ​ចែក​រំលែក ។</p>

RGB color

RGB color ក៏​ជា​តម្លៃ​ដែល​តំណាង​ឲ្យ​ពណ៌​នីមួយៗ​ដែរ ។ ពាក្យ​ពេញ​នៃ RGB គឺ Red Green Blue ។

រចនាសម្ព័ន្ធ​នៃ RGB color
  • ផ្ដើម​ដោយ​អក្សរ "rgb" ។
  • សញ្ញា "()" ។
  • នៅ​ក្នុង "()" ត្រូវ​សរសេរ​៣​លេខ ដែល​លេខ​នីមួយៗ​មាន​តម្លៃ​ពី ០ ដល់ ២៥៥ និង​ត្រូវផ្ដាច់​គ្នា​ដោយ​សញ្ញា ","
    • លេខ​ទី​១ តំណាង​ឲ្យ​ពណ៌​ក្រហម
    • លេខ​ទី​២ តំណាង​ឲ្យ​ពណ៌​បៃតង
    • លេខ​ទី​៣ តំណាង​ឲ្យ​ពណ៌​ខៀវ ។

ពណ៌​ទឹកក្រូច គឺ rgb(255, 165, 0) ។

.info {
    background-color: rgb(0, 128, 0);
    color: rgb(200, 0, 0);
}
<h2>អំពី KHODE</h2>
<p>ស្វាគមន៍​មក​កាន់ KHODE ។</p>
<p class="info">ឥត​គិត​ថ្លៃ សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
<p class="info">សូម​ជួយ​ចែក​រំលែក ។</p>

RGBA color

RGBA color មាន​៣​តម្លៃដំបូង​ដូច RGB ដែរ តែ​វា​មាន​លើស​មួយ​តម្លៃ​ទៀត​គឺ A ។ ពាក្យ​ពេញ​នៃ RGBA គឺ Red Green Blue Alpha ។ Alpha មាន​តម្លៃ​ពី ០ ដល់ ១ ដែល​បង្ហាញ​ពី​ភាព​ដែល​អាច​មើល​ឃើញ​ពណ៌​នោះ ។

#a {
    background: rgba(128, 0, 128, 0.5);
    height: 50%;
    width: 50%;
    position: absolute;
    top: 5%;
    left: 10px;
}
<h2>អំពី KHODE</h2>
<p>ក្នុង CSS មាន​កូដ​ជាច្រើន បាន​កំណត់​ទៅលើ id a តែ​មិន​បាច់​ខ្វល់​ទេ អ្នក​ទាំងអស់​គ្នា​ផ្ដោត​សំខាន់​តែ​លើ background-color property បាន​ហើយ ។ (សាក​ប្ដូរ​តម្លៃ alpha)</p>
<div id="a"></div>

HSL color

HSL color ​ជា​តម្លៃ​ពណ៌​មួយ​ប្រភេទ​ទៀត ដែល​អាច​ប្រើ​ក្នុង CSS ។ ពាក្យ​ពេញ​នៃ HSL គឺ Hue Saturation Lightness ។

រចនាសម្ព័ន្ធ HSL color
  • ផ្ដើម​ដោយ​អក្សរ "hsl" ។
  • សញ្ញា "()" ។
  • នៅ​ក្នុង "()" សរសេរ​៣​លេខ ដែល​លេខ​នីមួយៗ​ត្រូវ​ផ្ដាច់​គ្នា​ដោយ​សញ្ញា ","
    • លេខ​ទី​១ តំណាង​ឲ្យ Hue មាន​តម្លៃ​ពី ០ ដល់ ៣៦០ ។
    • លេខ​ទី​២ តំណាង​ឲ្យ Saturation មាន​តម្លៃ​ពី ០% ដល់ ១០០% ។
    • លេខ​ទី​៣ តំណាង​ឲ្យ Lightness មាន​តម្លៃ​ពី ០% ដល់ ១០០% ។
.info {
    background: hsl(124, 100%, 45%);
}
<h2>អំពី KHODE</h2>
<p>ស្វាគមន៍​មក​កាន់ KHODE ។</p>
<p class="info">ឥត​គិត​ថ្លៃ សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
<p class="info">សូម​ជួយ​ចែក​រំលែក ។</p>

HSLA color

HSLA color មាន​៣​តម្លៃដំបូង​ដូច HSL ដែរ តែ​វា​មាន​លើស​មួយ​តម្លៃ​ទៀត​គឺ A ។ ពាក្យ​ពេញ​នៃ HSLA គឺ Hue Saturation Lightness Alpha ។ Alpha មាន​តម្លៃ​ពី ០ ដល់ ១ ដែល​បង្ហាញ​ពី​ភាព​ដែល​អាច​មើល​ឃើញ​ពណ៌​នោះ ។

#a {
    height: 100px;
    width: 100px;
    background-color: hsla(45, 70%, 44%, 0.75);
    position: absolute;
    top: 0;
    left: 0;
}
<h2>អំពី KHODE</h2>
<p>ស្វាគមន៍​មក​កាន់ KHODE ។</p>
<p>ឥត​គិត​ថ្លៃ សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
<p>សូម​ជួយ​ចែក​រំលែក ។</p>
<div id="a"></div>
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត