ខ្មែរ អាយធី សំរាប់ អ្នក ធ្វើបដិវត្តមិនប្រើប្រាស់ ព្យាង្គតំរួត ពីក្រោម ព្យញ្ជនៈ ម្ , ឧទាហរ សម្រាប់ ត្រូវតែ ជា សំរាប់!! សង្ឃឹម ទស្សនាករ នឹង ទទួលបាន រាល់ចំណេះ ខំព្យូរើ លំអិត/ល្អៗ ពី ខ្មែរ អាយធី សំរាប់ អ្នក!!

រៀនទាន់ចិត្តដោយខ្លួនឯង ភាសាវ៉ែប XHTML និង CSS ៖ (ភាគ២) CSS2

តពី រៀនទាន់ចិត្តដោយខ្លួនឯង ភាសាវ៉ែប XHTML និង CSS ៖ (ភាគ១) XHTML

ខ - ប្រើប្រាស់ភាសាវ៉ែប CSS2
CSS ជាពាក្យកាត់នៃ Cascading Style Sheets មានន័យភាសាខ្មែរថា សន្លឹករចនាបថដោយល្បាក់។ វាជា ទំព័រ ដែលបាន ត្រូវតែងរំលេច(design) ហើយមានឥទ្ធិពល លើគ្រប់ទំព័រវ៉ែប។
 CSS ជាភាសារចនាបថ(style language) សំរាប់កំណត់ ការបង្ហាញចេញរាងរៅ (defines layout) នៃឯកសារ HTML ព្រោះ HTML មិនមានលទ្ធភាពតែងរំលេច(design) ការបង្ហាញចេញរាងរៅ(layout) អត្ថបទ លើវ៉ែបសៃថ៍ទេ។ ម៉្លោះហើយ CSS នឹងជួយផ្តល់ នូវជំរើសដ៏ល្អឥតខ្ចោះ (sophistic) ជាច្រើន ដល់វ៉េបសៃថ៍ ជាពិសេសដូចជា តែងរំលេចក្រមអក្សរ ពណ៌គែម បន្ទាត់ កំពស់ បន្ទា រូបភាព ផ្ទៃខាក្រោយ ទីតាំងអក្សរ និង នៅមានច្រើន ហូរហែរទៀត។ លើសពីហ្នឹង CSS អាចឆបជាមួយ គ្រប់ឧបកររាវរក (browser) ដូចជា កញ្ជ្រោងភ្លើង, អិនរើណែតអិចក្សផ្លរើ, សឺផារី(Safari), អាបប៉ឺរើ(Opera) ...ល.. ។ ទំព័រវ៉ែបសៃថ៍ របស់អ្នក ច្បាស់ជា នឹងមានសំរស់ជាងមុន ដោយសារ CSS ។
រលឹកថា គេប្រើប្រាស់ HTML សំរាប់ដាក់ខ្លឹមសារ លើទំព័រវ៉ែប រីឯប្រើប្រាស់ CSS សំរាប់ដាក់សំរស់ អោយខ្លឹមសារ មានស្រាប់ លើទំព័រវ៉ែប។

ខ១ - ប្រៀបធៀប ប្រជុំបច្ចេកស័ព្ទ(terminology) នៃ ភាសា XHTML និង ភាសា CSS2



វិធាន(rules) ប្រើប្រាស់ ក្នុង XHTML និង CSSមានចំនួនច្រើនណាស់ ប៉ុន្តែអ្នកមិនចាំបាច់ ទន្ទេញចាំមាត់ទាំងអស់ទេ ព្រោះផ្នែកជំនួយស្មារតី នឹងត្រៀមខ្លួនជួយអ្នកជានិច្ច (សូម្បី ខ្មែរអាយធីសំរាប់អ្នក ក៏ត្រូវការផ្នែកជំនួយស្មារតីនោះដែរ)។ អ្វីដែលត្រូវចងចាំនោះ គឺមូលដ្ឋានគ្រឹះ សំរាប់ប្រើប្រាស់ CSS ព្រោះវាជាគន្លឹះ ដើម្បីពង្រីកបំរើប្រាស់ CSS ទៅតាមប្រាជ្ញាឆ្នៃប្រឌិតរបស់អ្នក។


បញ្ជាក់៖

  • មុននឹងស្វែងយល់ប្រើប្រាស់ CSS អ្នកត្រូវមានចំណេះខ្លះអំពី (X)HTML ។ បើអ្នកមិន មានចំណេះអំពី (X)HTML ខ្លះទេ ចូរចុចទីនេះ ដើម្បីស្វែងយល់វា។
  • អ្នកគួរប្រើប្រាស់តែផ្នែកទន់សាមញ្ញ Nvu និង Notepad បានហើយ ដើម្បីអនុវត្ត CSS
ខ២ - ការប្រើប្រាស់ ប្រជុំបច្ចេកស័ព្ទ(Terminology) CSS
រូបខាងលើ បានបង្ហាញទ្រង់ទ្រាយ នៃរចនាសម្ពន្ធ នៃប្រជុំបច្ចេកស័ព្ទ CSS ប៉ុន្តែអ្វីដែល អ្នកចង់ដឹងបន្តទៀតនោះ គឺថា តើត្រូវប្រើប្រាស់វា របៀបមេច?
មិនអាចប្រើប្រាស់ CSS ដាច់តែឯងបានទេ បើមិនមានភាសា XHTMLសំរាប់ CSS ជ្រក មានន័យថា គេសរសេរ វិធាន(rules) របស់ CSS ដាក់នៅចន្លោះ ប្លាកដើរជាគូ ឈ្មោះ​ <style> រួចដាក់បា្លក <style>វិធាន</style> ដែលមានវិធានខាងក្នុងនោះ ទៅក្នុងទំព័រ XHTML ឬ គេបង្កើតឯកសារ CSS នៅក្រៅទំព័រ XHTML។
-តើត្រូវដាក់ពាក្យសម្ព័ន្ធរបស់ CSS (CSS Syntax) របៀបមេច ហើយនៅត្រង់ណា?
ដើម្បីឆ្លើយតបចំងល់នេះ អ្នកត្រូវយល់ដឹង អំពីទំរង់នៃពាក្យសម្ព័ន្ធCSS ( CSS Syntax), ទីតាំងនៃពាក្យសម្ព័ន្ធនោះ, វិធីប្រើប្រាស់រចនាបថ CSS (CSS style) Style rules = វិធាននៃរចនាបថ

ខ២.១ - វិធីសរសេរវិធាន(rules) នានា អោយ រចនាបថ (Style)
 វិធាន(rules) ជាគោលការ ឬ ជាវិន័យ សំរាប់គោរពតាម ដើម្បីពណ៌នាអំពី មួយឬច្រើនធាតុ អោយវាបង្ហាញ ចេញមក។ ដើម្បីប្រើប្រាស់ CSS, អ្នកត្រូវស្គាល់អោយបានច្បាស់ អំពីវិធានក្នុង CSS(CSS rules)។ វិធាននីមួយៗ នឹងជ្រើសរើសមួយធាតុ(an element) ហើយប្រកាស(declare) ការបង្ហាញចេញមក របស់វា។

selector {property : value;}

ជាធម្មតា វិធាន(rules) ក្នុង CSS មានទំរង់៖

selector {property : value;} ជា វិធាន (rules)

ក្នុងនោះ ៖

-selector ជាឧបករជំរើស, ជាធាតុនៃ (X)HTML

-{property : value;} ជាសេចក្តីប្រកាស(declaration) ក្នុងនោះ property ជាលក្ខណះ និង value ជាតំលៃ នៃលក្ខណះ

ដូច្នេះ វិធាន មានទំរង់៖ ឧបករជំរើស { លក្ខណះ: តំលៃ; }

ឧទាហរ៖

១ វិធាន ក្នុងនោះមាន ១ សេចក្តីប្រកាស

១ វិធាន ក្នុងនោះមាន ២ សេចក្តីប្រកាស

មាន ៣ វិធាន មានសេចក្តីប្រកាស ដូចគ្នា

គំរូ

b { color : red;}

h3 {
 font-family: Arial;
 color: blue;
 }

b {color: red;}
 h1 {color: red;}
 h2 {color: red;}

ឬ

b, h1, h2 {color: red;}

ពន្យល់

ក្នុងនោះ៖

b : bold(អក្សរដិត)

color (ពណ៌អក្សរ): red(ក្រហម)

មានន័័យថា គ្រប់អក្សរដិត ត្រូវមាន ពណ៌ក្រហម

ក្នុងនោះ៖

h3: header3(ចំណងជើងកំរិត៣)

font-family(ក្រុមក្រមអក្សរ): Arial

color (ពណ៌អក្សរ): blue (ខៀវ)

មានន័័យថា គ្រប់ចំណងជើងកំរិត ៣ ត្រូវប្រើប្រាស់ក្រមអក្សរ Arial និងព៌ណ ខៀវ
ក្នុងនោះ៖
b : bold(អក្សរដិត)
h1: header3(ចំណងជើងកំរិត៣)
h2: header2(ចំណងជើងកំរិត២)

color (ពណ៌អក្សរ): red(ក្រហម)

បើ b, h1, h2 មានសេចក្តីប្រកាស {color: red;} ដូចគ្នា អ្នកអាច ដាក់ឧបករជំរើសទាំងនោះ ជា ក្រុម (grouped selectors)៖
b, h1, h2 {color: red;}

ជារួម, ឧបករជំរើស(selector) អាចមាន ១សេចក្តីប្រកាស ឬ ច្រើនសេចក្តីប្រកាស៖

ឧបករជំរើស មានមួយសេចក្តីប្រកាស ៖

selector {property : value;}

ក្នុងនោះ ៖

-selector ជាឧបករជំរើស,

-{property : value;}

ក្នុងនោះមាន property ជាលក្ខណះ និង value ជាតំលៃ នៃលក្ខណះ

ឧបករជំរើស មានច្រើន សេចក្តីប្រកាស (ឬ មួយគំនរប្រកាស) ៖

selector {

property1 : value1;

property2 : value2;

property3 : value3;

}

ក្នុងនោះ ៖

ប្រកាសនីមួយៗ ឃ្លាតគ្នាដោយសញ្ញា ចុចក្បៀស (semicolon) ;

ខ២.២ - ដាក់ CSS2 នៅត្រង់ណា?
 សន្លឹករចនាបថ(style sheet) ជា មួយប្រអប់ឯកសារ(a file) ក្នុងនោះមាន ច្រើនវិធានរចនាបថ (style rulers) ដែលអ្នក បានសរសេរវា។ ប្រអប់ឯកសារ CSS (CSS file) ត្រូវតែមានកន្ទុយ .css ខុសពីប្រអប់ឯកសារ XHTML (XHTML file) ដែលមានកន្ទុយ .html។ ខ្លឹមសារក្នុងប្រអប់ឯកសារ CSS ត្រូវបានសរសេរបង្ហាញ នូវអ្វីដែលវ៉ែបសៃថ៍ ត្រូវការ៖ ពណ៌ និងក្រមអក្សរនៃអត្ថបទ, ទំហំចំណងជើង, ទីតាំងនៃមែនញាវ, ពណ៌ និង រូបភាពផ្ទៃខាងក្រោយ, ... និងច្រើនទៀត។ រីឯ "សន្លឹករចនាបថដោយល្បាក់" (CSS: Cascading Style Sheets) ជា ។
 គេអាចសរសេរភាសា CSS នៅ ៣ ទីតាំងផ្សេងៗគ្នា មានអានុភាព(powerful)ខុសៗគ្នា លើទំព័រវ៉េប។ ៣ ទីតាំងនោះគឺ៖
  • ដាក់ពាក្យសម្ព័ន្ធ CSS ក្នុងប្រអប់ឯកសារ CSS (CSS file) ឬហៅថា សន្លឹករចនាបថខាងក្រៅ (External Style Sheets)។
  • ដាក់ពាក្យសម្ព័ន្ធ CSS ក្នុងទំព័រ(X)HTML នៅត្រង់ចន្លោះប្លាក
    ឬហៅថា សន្លឹករចនាបថបង្កប់ (Embedded Style Sheets) ។
  • ដាក់ពាក្យសម្ព័ន្ធ CSS ក្នុងប្លាកបើក ឬហៅថា រចនាបថក្នុងប្លាកបើក (Inline Styles) ។
បញ្ជាក់៖
  • សន្លឹករចនាបថខាងក្រៅ ត្រូវបានប្រើប្រាស់ញឹកញាប់បំផុត ព្រោះវាសំរួលនិងសំរាល ដល់ការអភិបាលវ៉ែប
  • រចនាបថក្នុងប្លាកបើក មិនត្រូវបានប្រើប្រាស់ប៉ុន្មានទេ ព្រោះវាធ្វើអោយស្មុគ្រស្មាញ ដល់ការអភិបាលវ៉ែប(Web Administration) ប៉ុន្តែ ក៏មិនអាចអត់វាបាន ក្នុងករណីចាំបាច់ខ្លះ។
ខ២២a-សន្លឹករចនាបថខាងក្រៅ (External Style Sheets)
នៅមានត

2 វិចារ:

  1. Anonymous says
    January 23, 2008 at 10:23 PM  

    ខ្ញុំអានច្រើនដងហើយតែមិនយល់សោះ។ខ្ញុំចង់ដាក់រូបនៅ
    ជ្រុងម្ខាងនៃប្លក់ តើធ្វើដូចម្តេចទៅ?ដូចជាដាក់រូបទង់ជាតិ
    ឬម្ចាស់ប្លក់ជាដើម៕


    Anonymous says
    August 14, 2008 at 2:42 AM  

    ខ្ញុំឃើញគេធ្វើមានគេធ្វើការសរសេរខ្លះដែរ នៅ
    http://readcenter.sitebooth.com
    និយាយអំពី​ HTML


ដាក់ចំណាំ និង ចែករំលែក