ចំណុចសំខាន់ៗនៃការប្រើប្រាស់ CSS (២)

Style Syntax: គឺជាទំរង់ ឬក្បួននៃការសរសេរ Style ដែលអ្នកអភិវឌ្ឍន៍គេហទំព័រតែងតែប្រើប្រាស់។

មូលដ្ឋានគ្រឺះនៃការបង្កើត Style Syntax:

Selector គឺជាការកំណត់ឈ្មោះសម្រាប់ហៅយកក្នុង HTML Tag ។

Property គឺជាឈ្មោះរបស់ម៉ូតនីមួយៗដូចជា color, font-family ។

Value គឺជាតម្លៃរបស់ Property ។ ឧទាហរណ៍ color: blue

ប្រភេទនៃ Selector

នៅក្នុង Selector មាន ១០ប្រភេទ ខ្ញុំនឹងបង្ហាញប្រភេទនីមួយៗដូចខាងក្រោម៖

1. HTML Tag Selector

ប្រើ HTML Tag  Selector ដើម្បីកំនត់នូវម៉ូតជាក់លាក់ណាមួយទៅអោយ HTML tag ដែលប្រើប្រាស់ក្នុងគេហទំព័រ។ ឧទាហរណ៍ ប្រសិនបើចង់ដាក់គ្រប់ ចំនងជើងកំរិត២ (header level 2) មានពណ៌ក្រហមនោះគេសរសេរ៖ h2 {color: red;} ដូចច្នេះ គ្រប់ចំនងជើងកំរិត២ នឹងមានពណ៌ក្រហម លុះត្រាតែមានការប្រកាសនូវម៉ូតថ្មីដែលជាន់ពីលើម៉ូតនេះទើបមានការផ្លាស់ប្តូរ ។

ឧទាហរណ៍ៈ

span {

color: #FF00FF;

}

body {

background-color:#CCCCCC;

}

2. Class Selector

ប្រសិនណាបើអ្នកមិនចង់អោយគ្រប់ tag បង្ហាញនូវម៉ូតដូចៗគ្នា នោះអ្នក នឹងត្រូវការនូវ “Free agent selectors” ដែលគ្រប់ HTML tag អាចហៅវាមកប្រើបាន នោះគឺ​ class selectors ។ នៅពេលណាដែលអ្នកចង់បង្កើត Class selector មួយ អ្នក ត្រូវដាក់សញ្ញាចុច “.” នៅពីមុខឈ្មោះរបស់ Selector ដើម្បីប្រាប់អោយ Browser ដឹងថានោះគឺជា Class selector។

/* —   —–*/ គឺជា Comment របស់ CSS ។ Comment គឺជាការពន្យល់អធិប្បាយកូដ ឬការបិទកូដមិនអោយដំណើរការ

ឧទាហរណ៍ៈ  .hilight {

/* . is class selector */

background-color: #FF00FF;

}

3. ID Selector

តាមការពិត ID Selector ក៏មិនខុសពី Class Selector នោះដែរគ្រាន់តែក្បួន ក្នុងការសរសេរដើម្បីបង្កើតវាខុសគ្នា។ ID Selector ចាប់ផ្តើម ដោយប្រើសញ្ញា # ក្នុង ការប្រកាសវា។

ឧទាហរណ៍ៈ

#header {

color: #FFFF00;

}

ការប្រើ ID Selector ជាមួយនិង HTML tag គឺគ្រាន់តែសរសេរបន្ថែម ID attribute និងឈ្មោះរបស់ ID selector នោះទៅក្នុង HTML tag ដោយមិនចាំបាច់ប្រើ សញ្ញា # នៅពីមុខខាងមុខឈ្មោះទៀតទេ។

ឧទារហណ៍ៈ <div id=”header”>Chapter I…</div>

ជាធម្មតា ID Selector គេប្រើនៅក្នុងការកំនត់ផ្នែកភាគច្រើននៃគេហទំព័រ ដូច ជា Header, Content, footer ឬជាមួយផ្នែកណាមួយរបស់ Content ឬ Modules ដូចជា Search, Navigation, Advertisement ព្រមទាំងសំរាប់ប្រើជាមួយធាតុណាមួយដែល ប្រើជាមួយ JavaScript ជាដើម។

បញ្ជាក់ៈ យោងតាម W3C បានបញ្ជាក់ថាការប្រើប្រាស់ ID Selector គឺមិនអាចហៅឈ្មោះ ID Selector ជាន់គ្នាបានទេ។

ឧទាហរណ៍ៈ

<style type=”text/css”>

#container {

color: #FF00FF;

}

</style>

<div id=”container”>Hello</div>

<div id=”container”>Hi</div>

ការប្រើប្រាស់ div ទាំងលើនេះគឺមិនអាចប្រើប្រាស់ឈ្មោះរបស់ ID Selector ជាន់គ្នាបានទេ។ យើងអាចប្រើប្រាស់ Add on របស់ Mozilla Firefox ដែលមាន ឈ្មោះ «HTML Validator» ដើម្បីត្រួតពិនិត្យកំហុសនៃការសរសេរកូដ។

សូមរង់ចាំអាន និងស្វែងយល់មេរៀនបន្ទាប់ទៀត ។ សូមអរគុណ !

មេរៀន​មុន

• ចំណុចសំខាន់ៗនៃការប្រើប្រាស់ CSS