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

Cascading Style Sheets ក្នុងទំរង់កាត់ហៅថា ​ វាផ្តល់នូវការគ្រប់គ្រង ទៅលើ Layout និង​ការរចនាទៅលើគេហទំព័របានយ៉ាងរស់រវើក។ តាមរយៈការប្រើ ប្រាស់ អនុញ្ញាត្តឲយើងធ្វើការតុបតែងនូវអត្ថបទអោយមានការទាក់ទាញយ៉ាង ខ្លាំងដូចជាការដាក់និម្មិត្តសញ្ញា ឬការដាក់ស៊ុមជុំវិញជាដើម គឺវាអាចធ្វើបានដូចទៅ នឹងការតុបតែង នៅក្នុងទស្សនាវដ្តីបង្ហាញម៉ូតល្បីអញ្ចឹង។ ម៉្យាងវិញទៀត ក្រៅពីការ រចនានូវអត្ថបទ យើងក៏អាចធ្វើការរៀបចំរូបភាពទៅតាមទីតាំងដែលចង់បានយ៉ាង ត្រឹមត្រូវ​ ឬក៏អាចបង្កើតនូវកូឡោនជាមួយនឹងផ្ទាំងពាណិជ្ជកម្ម​ ព្រមទាំងអាចដាក់ ពណ៌ដ៏ស្រស់ស្អាត គួបផ្សំជាមួយលក្ខណៈពិសេសជាច្រើនទៅលើអត្ថបទសំរាប់ ភ្ជាប់ទៅកន្លែងណាមួយទៀត នៅពេលដែលយើងយក cursor ទៅដាក់លើកន្លែង នោះ។​ ដូចច្នេះហើយ ស្តាប់ទៅហាក់ដូចជាមានការពិបាក និងស្មុគ ស្មាញមែនទេ?​ តាមការពិត គឺជាឧបករណ៍ដ៏សាមញ្ញ និងងាយស្រួលមួយសំរាប់អ្នកអភិវឌ្ឍន៍គេហទំព័រ។

ដំណើរការនៃ CSS

ប្រសិនណាបើអ្នកប្រើប្រាស់ ម៉ូតនៅក្នុងកម្មវិធីមួយចំនួនដូចជា Microsoft Word ឬ កម្មវិធី  នោះ CSS ដែលប្រើសំរាប់រចនាគេហទំព័រក៏មិន ខុសគ្នាពីការប្រើម៉ូតក្នុងកម្មវិធីទាំងនោះដែរ។ ក្នុងពេលនេះ ម៉ូត (Style) គឺជាក្បួន ច្បាប់មួយសំរាប់ធ្វើការតុបតែងត្រង់ចំនុចណាមួយនៃគេហទំព័រ​ ដូចច្នេះហើយ Style Sheet គឺជាបណ្តុំនៃម៉ូតអស់ទាំងនោះ។ CSS ធ្វើការជាមួយ HTML ប៉ុន្តែ CSS​​ មិន មែនជា  HTML ទេ វាគឺជាភាសាពីរខុសស្រលះពីគ្នា។ HTML ផ្តល់នូវរចនាសម្ពន័្ធ របស់ឯកសារ ដោយរៀបចំនូវព័ត៌មានទៅតាមផ្នែកផ្សេងៗដូចជា សេចក្តីផ្តើម (Header), កថាខណ្ឌ (Paragraphs), បញ្ជី (Lists) ជាដើម​ ប៉ុន្តែ CSS វិញ គឺវាធ្វើការ ដោយផ្ទាល់ (hand-in-hand) ជាមួយកម្មវិធីបើកគេហទំព័រដើម្បីធ្វើអោយ HTML មាន លក្ខណៈស្រស់ស្អាត។

ធម្មតា ម៉ូតគឺជាក្បួនច្បាប់ ឬវិធីដែលប្រាប់ដល់ អោយដឹងថាត្រូវ ជ្រើសរើសនូវ Contents នៃ tag របស់ HTML ឬ XHTML ណាមួយអោយបានច្បាស់ លាស់។ រាល់ Tags នីមួយៗតែងមាននូវផ្ទុកនូវលក្ខណៈសម្បត្តិ​ (Properties)​ របស់ ម៉ូតមួយចំនួន ដែលតំលៃ (Value) របស់វាសំរាប់កំនត់អោយ Broswer ថាតើត្រូវ កំនត់និងធ្វើដូចម្តេចទៅលើ Tags នីមួយៗ។ គេមានក្បួនច្បាប់ក្នុងការកំនត់តំលៃ (Value) ជាក់លាក់ណាមួយទៅអោយ  Properties នីមួយៗរបស់ Tag។

ជាឧទាហរណ៍ភាគច្រើននៃ Tag តែងតែមានផ្ទុកនូវ Color property ឬក៏ fonts, line spacing, margins, borders, sound volume, voice ជាដើម។

ជំនាន់នៃ CSS

CSS មានពីរជំនាន់ គឺ CSS 2 និង CSS 3  ។  CSS 2 ជាជំនាន់ដែលត្រូវបានជាទូទៅនៅក្នុងគេហទំព័រ រីឯ CSS 3 ជាជំនាន់ថ្មីដែលបង្កើតមកដើម្បីបន្តែមនៃការបង្កើតរូបភាពមានចលនានៅក្នុងគេហទំព័រ (Animation) ដោយពុំចាំបាច់ប្រើ JavaScript, ឬ Adobe Flash នោះឡើយ ។ ចំពោះមេរៀនយើងអាចសិស្សដោយខ្លួនបានតាមរយៈគេហទំព័រ http://www.w3schools.com

ប្រភេទនៃ CSS

CSS មាន​ ៣ ប្រភេទ គឺៈ

Inline style: គឺជាការសរសេរកូដ CSS ដោយផ្ទាល់ជាមួយ HTML Tag ដោយប្រើ Style attribute សម្រាប់កំណត់ Property របស់ Style ។

ខាងក្រោមនេះជា Inline Style Syntax:

<p style=”font-family: sans-serif; color: #3366CC; “>

this is inline style.

</p>

ដូចដែលបានឃើញចំពោះការប្រើនូវ Inline style គឺមិនចំាបាច់ប្រើប្រាស់នូវ Selectors ទេ​ ហើយអ្វីដែលយើងត្រូវការនោះ គឺការប្រកាសនៅក្នុង។ Attribute style គឺប្រើដើម្បីដាក់ម៉ូតទៅអោយ Element ណាមួយ។

Inline styles មានគុណវិប្បត្តិមួយ គឺគេមិនអាចយកវាមកប្រើឡើងវិញម្តងទៀតទេ។ ឧទាហរណ៍ៈ ប្រសិនណាជាយើងចង់ដាក់នូវម៉ូតខាងលើ ឡើងវិញទៅ អោយ p tag​​​ ផ្សេងទៀត នោះត្រូវសរសេរនូវម៉ូតទាំងនោះឡើងវិញនៅក្នុង p tag នោះ។​ ម្ល៉ោះហើយការប្រើនូវប្រភេទ Inline Style នេះវាធ្វើអោយមានការពិបាកក្នុង ការអាន និងកែនូវកូដនោះ។

Embedded Style: គឺជាការសេរសេរ CSS ដោយខ្ចប់នៅក្នុង Selector ណាមួយរួចហៅមកប្រើនៅក្នុង HTML Tag ។ រីឯការសរសេរ Embedded style គឺសរសេរនៅក្នុង សរសេរនៅចន្លោះ tag បិទ និងបើក <style>​ ។

ខាងក្រោមនេះជា Embedded Style syntax

 

 

 

 

 

External Style: គឺជាប្រភេទឯកសារមួយ ដែលសំរាប់ផ្ទុកនូវក្រុមនៃ ម៉ូត ហើយគេរក្សាវាទុកនៅទីតាំងដោយឡែកពីទីតាំងរបស់គេហទំព័រ​និងមានចុងកន្ទុយឯកសារជា .css ឧទាហរណ៍ style.css។ គ្រប់គេហទំព័រអាចធ្វើការហៅនូវ គ្រប់ម៉ូតទាំងអស់ដែលបានផ្ទុកនៅក្នុងឯកសារ CSS នោះហើយប្រសិនណាមាន ការផ្លាស់ប្តូរម៉ូតដែលបានផ្ទុកនៅក្នុងឯកសារ CSS នោះគ្រប់គេហទំព័រដែលបាន ហៅម៉ូតនោះ មកប្រើក៏មានការផ្លាស់ប្តួរទៅតាមនោះដែរ។

External Style ចែកចេញជាពីរ គឺ Link tag និង @Import ។

ខាងក្រោមនេះជា Syntax របស់ Link tag

ខាងក្រោមនេះជា Syntax របស់ @import

ឧទាហរណ៍ៈ

<style type=”text/css”>

@import url(mystyle.css);

</style>

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