សង្ខេបមេរៀន CSS ងាយស្រួលរៀន
១. CSS ជាអ្វី?
CSS ជាអក្សរកាត់មកពីពាក្យថា Cascading Style Sheets ត្រូវបានចាត់ទុកថា ជាភាសាពិសេស មូយសម្រាប់លោកអ្នកដែលបានធ្វើការងារទាក់ទងទៅនឹងការរចនា Website។ ហើយម្យ៉ាងវិញទៀត វាជាអ្នកផ្តល់ភាពងាយស្រួលជាច្រើនក្នុងការគ្រប់គ្រង លើ style (ដូចជាៈ font, color, size ល។) និង layout (ដូចជាៈ background, margin, padding ល។) របស់ web pages ទាំងអស់ ក្នុង ពេលតែមួយដែលធ្វើអោយលោកអ្នក ចំណេញពេលវេលាបានយ៉ាងច្រើនក្នុង ការធ្វើ អោយ website មួយឲមានសោភ័ណភាព និង លក្ខណៈរស់រវើក។ ជារួម CSS មានន័យថាជា ការបែងចែក តួនាទី ដាច់ ដោយឡែកនៅក្នុង HTML File មួយរវាង content និង layout របស់ fileនោះ។
សំគាល់ៈ សិក្សា CSS ទាមទារលោកអ្នកត្រូវចេះភាសា HTML ជាមុនសិន។
២. កម្មវិធីដែលអាចសរសេរភាសា CSS និង HTML
លោកអ្នកអាចសរសេរភាសា CSS និង HTML ចំពោះម៉ាស៊ីនកុំព្យូទ័រដែលប្រើ ប្រព័ន្ធដំណើរការ Window ជាមួយនឹងកម្មវិធីដូចជា៖
- Text Editor
- Word Processor
- WordPad
- FrontPage
- Dreamweaver
ដោយឡែកចំពោះម៉ាស៊ីនកុំព្យូទ័រដែលតំណើរការដោយប្រព័ន្ធ Macintosh លោកអ្នក អាចប្រើកម្មវិធី ដូចជា៖
- TeachText
- SimpleText
ប៉ុន្តែជារួមលោកអ្នកនៅតែប្រើប្រាស់ code របស់ CSS និង HTML ដូចគ្នា ហើយបង្ហាញ លទ្ធផល តែ មួយបើទោះបីលោកអ្នកប្រើប្រាស់កម្មវិធីណាមួយដូចដែលបានបង្ហាញខាងលើក៏ដោយ។ គួរគត់ សំគាល់ ផងដែរទៅលើកម្មវីធី Microsoft FrontPage និង Dreamweaver វាជាកម្មវីធី ដែលមាន Interface និង Tools ជាច្រើនមានលក្ខណៈងាយ ស្រួលប្រើប្រាស់សម្រាប លោកអ្នក បង្កើតសរសេរ CSS និង HTML។
២.១ កម្មវិធី Macromedia DreamweaverCSS ជាអក្សរកាត់មកពីពាក្យថា Cascading Style Sheets ត្រូវបានចាត់ទុកថា ជាភាសាពិសេស មូយសម្រាប់លោកអ្នកដែលបានធ្វើការងារទាក់ទងទៅនឹងការរចនា Website។ ហើយម្យ៉ាងវិញទៀត វាជាអ្នកផ្តល់ភាពងាយស្រួលជាច្រើនក្នុងការគ្រប់គ្រង លើ style (ដូចជាៈ font, color, size ល។) និង layout (ដូចជាៈ background, margin, padding ល។) របស់ web pages ទាំងអស់ ក្នុង ពេលតែមួយដែលធ្វើអោយលោកអ្នក ចំណេញពេលវេលាបានយ៉ាងច្រើនក្នុង ការធ្វើ អោយ website មួយឲមានសោភ័ណភាព និង លក្ខណៈរស់រវើក។ ជារួម CSS មានន័យថាជា ការបែងចែក តួនាទី ដាច់ ដោយឡែកនៅក្នុង HTML File មួយរវាង content និង layout របស់ fileនោះ។
សំគាល់ៈ សិក្សា CSS ទាមទារលោកអ្នកត្រូវចេះភាសា HTML ជាមុនសិន។
២. កម្មវិធីដែលអាចសរសេរភាសា CSS និង HTML
លោកអ្នកអាចសរសេរភាសា CSS និង HTML ចំពោះម៉ាស៊ីនកុំព្យូទ័រដែលប្រើ ប្រព័ន្ធដំណើរការ Window ជាមួយនឹងកម្មវិធីដូចជា៖
- Text Editor
- Word Processor
- WordPad
- FrontPage
- Dreamweaver
ដោយឡែកចំពោះម៉ាស៊ីនកុំព្យូទ័រដែលតំណើរការដោយប្រព័ន្ធ Macintosh លោកអ្នក អាចប្រើកម្មវិធី ដូចជា៖
- TeachText
- SimpleText
ប៉ុន្តែជារួមលោកអ្នកនៅតែប្រើប្រាស់ code របស់ CSS និង HTML ដូចគ្នា ហើយបង្ហាញ លទ្ធផល តែ មួយបើទោះបីលោកអ្នកប្រើប្រាស់កម្មវិធីណាមួយដូចដែលបានបង្ហាញខាងលើក៏ដោយ។ គួរគត់ សំគាល់ ផងដែរទៅលើកម្មវីធី Microsoft FrontPage និង Dreamweaver វាជាកម្មវីធី ដែលមាន Interface និង Tools ជាច្រើនមានលក្ខណៈងាយ ស្រួលប្រើប្រាស់សម្រាប លោកអ្នក បង្កើតសរសេរ CSS និង HTML។
Dreamweaver ជាកម្មវីធីដែលលោកអ្នកត្រូវតម្លើងបន្ថែមទៅក្នុងប្រព័ន្ធដំណើរ ការ Window នៅលើម៉ាស៊ីនកុំព្យូទ័ររបស់លោកអ្នក។
២.១.១ ទាញយកកម្មវិធី Macromedia Dreamweaver ពីInternet
លោកអ្នកអាចរកកម្មវីធីនេះបាន តាមរយះ Website (www.google.com.kh) ដោយគ្រាន់តែវាយឃ្លាថា “Download Dreamweaver Torrent” បញ្ចូលទៅកន្លែង ប្រអប់ស្វែងរក រួចហើយសូមចុច button ស្វែងរកនោះជា ការស្រេចដូចបង្ហាញ រូបភាព២.១ខាងក្រោម៖
- បន្ទាប់មកលោកអ្នកត្រូវស្វែងរកប៊ូតុង Download ដែលបាន link ទៅកាន Fileមួយមាន extension (.torrent) ដូចរូបភាព២.១.២ខាងក្រោម៖
- បន្ទាប់មកសូមតំណើការកម្មវីធីមួយឈ្មោះថា Torrent ដូចរូបភាព២.១.៣ខាងក្រោម៖
២.១.២ តំណើការកម្មវិធី Macromedia Dreamweaver បន្ទាប់ពី download កម្មវីធី Dreamweaver ចប់សព្វគ្រប់រួចហើយ សូមលោកអ្នក ធ្វើការតំឡើងកម្មវីធីនោះរួចហើយចូលទៅបើកកម្មវិធីនោះតាមវិធីដូចរូបភាព ២.១.២ ខាងក្រោម៖
ដើម្បីបង្កើត Fileមួយជា CSS សូមលោកអ្នកចុច (Ctrl + N) ដូចបង្ហាញក្នុងរូបភាព ៥ ខាងក្រោម៖
២.២ កម្មវិធី NotePad របស់ Window កម្មវិធី NotePad ជាកម្មវិធីមួយដែលមានស្រាប់ក្រោយពេលលោក អ្នកបាន តម្លើងប្រព័ន្ធ ដំណើរការ Window នៅលើម៉ាស៊ីនកុំព្យូទ័ររបស់អ្នក។ ហើយលោកអ្នក អាចតំណើរការ កម្មវិធីនេះតាមពីររបៀប៖
របៀបទី១ ដូចក្នុងរូបភាព ៦ខាងក្រោម
របៀបទី២ ដូចក្នុងរូបភាព ៧ខាងក្រោមចុច Start > All Programs > Accessories > Notepad ជាការស្រេច
តាមរបៀបទាំងពីរខាងលើលោកអ្នកនឹងបានឃើញកម្មវីធី NotePad រូបភាព៨ ដូចខាងក្រោម៖
៣ CLASS, SELECTOR, PROPERTY, VALUE របស់ CSS ជាអ្វី? Class របស់ CSS គឺជាពុម្ពគំរូមួយសម្រាប់គ្រប់គ្រងលើ background, margin, padding ហើយនឹង ធ្វើការរចនាទៅលើ style (ដូចជាៈfont, color, size ជាដើម) នៃ tag ណាមួយរបស់ HTML យ៉ាងងាយស្រួលសំរាប់ លោកអ្នក។ Class របស់ CSS បានផ្ទុក ទៅដោយ selector, property និង value។ Syntax ឬ ទម្រង់ Class របស់ CSS មាន រូបរាងដូចខាង ក្រោម៖selector ជាទូទៅគឺជា element ឬ tag របស់ HTML ឬមួយជាតំលៃ(value) នៃ attribute របស់ Class ឬក៏ជាតំលៃ(value) នៃ attribute id របស់ tag HTML។
property ជាលក្ខណៈរចនាផ្សេងដូចជា font, color និង size ជាដើម ហើយត្រូវ បានកំណត់ដោយតំលៃច្បាស់លាស់(Value)។
value ជាតំលៃលេខ ឬអក្សរ ឬក៏អក្សរលាយលេខ តែប្រសិន value មានតំលៃ ចូលរួមដោយ space តំម្រូវអោយតំលៃទាំងនោះស្ថិតនៅក្នុង quote (‘ ’) ឬ double quote (“ ”) ជានិច្ច។
កូដ ១.០ បង្ហាញពីរបៀបប្រាស់ syntax របស់ CSS
body {background-color: black;}
body, td, th {color: #333333;}
h1, h2 {color: #000033;}
h3, h4, h5, h6 {color: #006699;}
a{color: #003366;}
៣.១ បញ្ចូល property ច្រើនទៅលើ selector មួយ
លោកអ្នកអាចបញ្ចូល property លើសពីមួយ(ច្រើន) ទៅអោយ selector តែមួយ បានដែរ។ដើម្បីធ្វើដូចនេះបានគឺទាមទារអោយលោកអ្នកត្រូវប្រើ សញ្ញា ; (semicolon) ដើម្បីបញ្ជាក់ពី ការខណ្ឌចែកពី property មួយទៅ property មួយទៀត។
selector {property1:value1; property2:value2;…}
កូដ ១.១ បង្ហាញពីការបញ្ចូល property ច្រើនទៅលើ selector តែមួយ
body {background-color: black; color: #333333;}
ឬ
body{
background-color: black;
color: #333333;
}
៣.២ selector ច្រើនអាចទទួលលក្ខណៈរចនាតែមួយ លោកអ្នកអាចធ្វើអោយ selector ច្រើនអាចទទួលលក្ខណៈរចនាតែមួយបាន។ ប៉ុន្តែសូមលោកអ្នកប្រើនូវសញ្ញា , (comma) ដើម្បី ខណ្ឌចែកពី selector មួយទៅ select មួយទៀត។
Selector1, selector2,… {property1:value1; property2:value2;…}
កូដ ១.២ បង្ហាញពី selector ច្រើនទទួលលក្ខណៈរចនាតែមួយ
body, td, th {color: #333333;}
h1, h2 {color: #000033;}
h3, h4, h5, h6 {color: #006699;}
៣.៣ selector ដើរតួជា value នៃ attribute របស់ classh1, h2 {color: #000033;}
h3, h4, h5, h6 {color: #006699;}
តួយ៉ាងដូចជា ឧទាហរណ៏កូដគំរូក្នុងចំនុចខាងលើ គ្រប់ selector ទាំងអស់ វាគឺជា tag របស់ HTML។ ជាការពិត វាមានលក្ខណៈខុសគ្នារវាងការប្រើ selector ដែលជា tag របស់ HTML ទៅនឹងការប្រើ selector ដែលជាតំលៃ(value) នៃ attribute class របស់ tag។
លក្ខណៈខុសគ្នាត្រង់ថាបើសិនជាលោកអ្នកប្រើ selector ដែលជា tag របស់ HTML នោះមានន័យថា tag នោះដើរតួនាទីជា selector ដោយទទួលឥទ្ធិពលពី CSS គ្រប់ពេល លោកអ្នក បានប្រើវា។ចំណែកការប្រើ select ជាតំលៃ attribute របស់ class គឺវាផ្តល់លក្ខណៈពិសេសមួយ ត្រង់ ថា CSS អាចមានឥទ្ធិពល ទៅលើ tag របស់ HTML បានលុះត្រាតែ tag នោះមានផ្ទុកតំលៃ នៃ attribute របស់ class និងដូចគ្នាទៅនឹង selector ផងដែរ។
ចំពោះការប្រើ selector ជា value នៃ attribute របស់ class មានពីរ syntax ផ្សេងគ្នាដូចខាងក្រោម៖
tag.class-value{property:value;…}
កូដ ១.3 បង្ហាញពី selector ជា value នៃ attribute របស់ class
p.right{text-align: right}
p.center{text-align: center}
<p class=”right”> This phrase is right alignment. </p>
<p class=”center”> This phrase is center alignment. </p>
Syntax
.class-value{property:value;…}
ណាដែល Class-Value របស់វាដូចគ្នាទៅនឹង class ដែលបានបង្កើតនៅក្នុង CSS។
កូដ ១.៤ បង្ហាញពី selector ជា value នៃ attribute របស់ class
<p class=”center”> This phrase is center alignment. </p>
<p class=”center”> This phrase is also center alignment. </p>
៣.៤ selector ជា Value នៃ attribute id
ចំពោះការប្រើ selector ជា value នៃ attribute id គឺមានលក្ខណៈដូចគ្នាទៅនឹង ការប្រើ selector ជា value នៃ attribute class ដូចច្នោះដែរ។ ការប្រើប្រាស់វាមានពីរ syntax ដូចខាងក្រោម៖
Syntax
tag#id-value{property:value;…}
ចំពោះ syntax 1 នេះមានន័យថា CSS នឹងមានឥទ្ធិពលទៅលើ tag HTML ណា ដែលមាន tag និង value នៃ attribute id ដូចគ្នាទៅនឹង tag និង id-value ដែលបាន បង្កើតនៅក្នុង CSS។
កូដ១.៥ បង្ហាញពី selector ជា value នៃ attribute id
p#sytle{text-align: center; color: blue}
<p id=”style”>Content </p>
Syntax
#id-value{property:value;…}
លោកអ្នកក៏អាចយក id-value របស់ tag HTML ទៅប្រើដោយផ្ទាល់នៅក្នុង CSS បានដែរ ដើម្បីកំណត់លក្ខណៈរចនាអោយ tag នោះ។
កូដ១.៦ បង្ហាញពី selector ជា value នៃ attribute id
#sytle{text-align: center; color: blue}
<p id=”style”>Content </p>
៣.៥ tag មួយអាចទទួលយក class របស់ CSS ច្រើន
tag របស់ HTML មួយក៏អាចទទួលយក class របស់ CSS ច្រើនផងដែរ ដោយការប្រើ attribute class របស់ tag HTML នោះទទួលយកលក្ខណៈរចនា ពី class មួយទៅclass មួយទៀតដោយ ប្រើចន្លោះចំហ(space) ដូច syntax ខាងក្រោម៖
Syntax
<tagName class=”selector1 selector2 selector3 …”>
កូដ១.៧ បង្ហាញពី tag មួយអាចទទួលយក class ច្រើន
center{text-align: center}
.green{color: green}
<p class=”center green”> This is multi CSS class.</p>
៤. Comments របស់ សោភ័ណនិច្ច័យ (CSS) Comment គឺជាទូទៅប្រើសម្រាប់សំគាល់ ឬពន្យល់នូវ script/code របស់ លោកអ្នកនៅក្នុងអំឡុងពេលនៃការសរសេរ code ហើយវា មិនត្រូវបានបកប្រែដោយ browser ឡើយ។ វាមានសារៈប្រយោជន៏ក្នុងការជួយ សម្រួលលោកអ្នក អោយចងចាំ ឬរំលឹក script/code ដែលលោកអ្នកបានសរសេរកន្លងមក រឺដើម្បីកែប្រែនូវ code នោះ ឡើងវិញជាដើម។ syntax comment របស់ CSS ត្រូវសរសេរចាប់ផ្តើមដោយ /* និង បញ្ជប់ដោយ */។
Syntax/* your comment */
ឬ
/*
Your comment
*/
កូដ១.៨ បង្ហាញពី comment របស់ CSS
/* Class for body content */
.body_page{
text-align: center;
color: red;
font-family: Time New Roman;
}
<body class=”body_page”>this is body content </body>
មេរៀនទី ២
ទំនាក់ទំនងរវាង CSS និង HTML / XHTML
ការពិតទៅ CSS និង HTML ជាគូរដែលមិនអាចខ្វះគ្នាបាននៅពេល លោកអ្នកសំរេចចិត្តបង្កើត Website មួយ។ ផ្ទុយទៅវិញប្រសិនបើលោកអ្នក មិនប្រើ CSSនោះ លោកអ្នកនឹងជួបការស្មុគស្មាញ នឹងពិបាកគ្រប់គ្រងលើបញ្ហា ពិបាកកំនត់ទំរង់រចនាបទទៅតាមការចង់បាន(style, Layout) មានជាអាទ៌ style សំដៅដល់ លក្ខណៈអក្សរ កំណត់ពណ៌ ជាដើម និងLayout សំដៅដល់ margin ទំរង់ page ទីតាំង Object ជាដើមផងដែរ។ នៅក្នុងមេរៀននេះលោកអ្នក នឹង សិក្សាអំពីមូលបទដូចជាៈ
- ទីតាំងដែលអាចបង្កើត Class របស់ CSS
- របៀបហៅ Class ទៅប្រើនៅក្នុង HTML
១. តើសោភ័ណនិច្ច័យ(CSS)ត្រូវសរសេរនៅទីតាំងណា?- ទីតាំងដែលអាចបង្កើត Class របស់ CSS
- របៀបហៅ Class ទៅប្រើនៅក្នុង HTML
លោកអ្នកបានដឹងពីសារះប្រយោជន៏ និងរូបមន្តនៃរបៀបបង្កើត Class នៅក្នុងមេរៀនទី១រួចមកហើយ ប៉ុន្តែមិនទាន់បានដឹងថាតើលោកអ្នកត្រូវ សរសេរClassនោះ ទៅប្រើនៅទីណាក្នុងHTML នៅឡើយទេ។ ដូចច្នេះត្រង់ ចំនុចនេះ លោកអ្នកនឹងបានដឹង និងសិក្សាពីទីតាំងដែលអាចសរសេរ CSS statement ទាំងនោះ។
១.១ ទីតាំងផ្ទាល់ជាមួយ attribute style របស់ tag (inline style)
លោកអ្នកអាចសរសេរ CSS ដោយផ្ទាល់ជាមួយ tag របស់ HTML បានដោយប្រើ attribute style។ ខាងក្រោមនេះជារូបមន្ត syntax នៃការសរសេរ CSS ជាមួយនឹង attribute style៖
Syntax
<tagName style=”property1:value1;property2:value2,…”>
កូដ២.១ សរសេរ CSS ជាមួយនឹង attribute style
<p style=”color:red; margin-left:20px;”> this inline style 1 </p>
<p>This is paragraph</p>
កូដ២.១ត្រង់បន្ទាប់ទី១ បានសរសេរថា <p style=”color:black;margin-left:20px”> This inline style</p> មានន័យថា tag <p> នឹងទទួលឥទ្ធិពលពីCSS ដោយកំនត់អក្សរ មានពណ៌ក្រហម ហើយតំរឹមខាងឆ្វេងស្មើនឹង 20 pixels។ ដោយឡែកចំណែកបន្ទាត់ ទី២វិញ ដែលបានសរសេរថា <p> This is paragraph</p> គឺមិនបានទទួលឥទ្ធិពល ពី CSS ឡើយ។
សំគាល់ៈ ការសរសេរCSSផ្ទាល់ ដោយប្រើ attribute style មិនសូវផ្តល់ គុណសម្បត្តិ និងប្រយោជន៏ដល់លោកអ្នកនៅឡើយទេ ព្រោះថាឥទ្ធិពលរបស់ CSS មានតែម្តង តែចំពោះtag HTML ដែលបានសរសេរតែប៉ុណ្ណោះ ប៉ុន្តែបើសិនជាលោក អ្នកចង់អោយ tag ផ្សេងទៀតទទួលឥទ្ធិពលដូចគ្នា តម្រូវអោយលោកអ្នកសរសេរឡើង វិញទៅអោយ tag នោះ ដូចបង្ហាញឧទាហរណ៏កូដ២.២ខាងក្រោម៖
<p style=”color: red; margin-left: 20px ;”> This is paragraph</p>
Internal Style Sheet មានឥទ្ធិពលគ្រប់ដណ្តបពេញមួយ HTML Document ដែលមានន័យថាគ្រប់ tag របស់ HTML គឺអាចទទួលឥទ្ធិពលពី Class របស់ CSS ទាំងអស់ដែល បានបង្កើត។ Internal Style Sheet ជាទូទៅត្រូវសរសេរនៅត្រង់ tag <head> របស់ HTML ហើយត្រូវប្រើ tag បើកនិងបិទ ឈ្មោះថា <style>internal style sheet statement </style>។ ទំរង់ Internal Style Sheet មានរូបមន្តដូចខាងក្រោម
Syntax
<HTML>
<Head>
<style type=”text/css”>
Internal Style Sheet Statements…
</style>
</Head>
<Body>
</Body>
</HTML>
ឧទាហរណ៏ លោកអ្នកអាចបង្កើត Page មួយដែលមានឈ្មោះថា Internal Style Sheet.html ដោយប្រើនូវ Internal Style Sheet ដើម្បីកំនត់បាននូវលក្ខណៈដូចរូប ភាពខាងក្រោម
ការវិភាគៈ
ដូចបានបង្ហាញក្នុងរូបភាព៩ដែលបានកំណត់នូវទំរង់និងទ្រង់ទ្រយ អត្ថបទ នៅក្នុងនោះ រួមមានtag <body>ជាកត្តាចំបង់ដែលកំណត់ទំរង់អក្សរជារួមមានឈ្មោះថា Cambria, “Times New Roman”, Arial ។ហើយ tag title<p> សំរាប់កំណត់ពណ៌ និងទំហំជា title នៅក្នុងអត្ថបទ។ ហើយ tag <hr> 1 ជាបន្ទាត់ទី១ tag subtitle <p> សំរាប់កំនត់ពណ៌ និងទំហំជា subtitle នៅក្នុងអត្ថបទ។ ហើយមាន tag content <p> សំរាប់កំនត់លក្ខណៈ អត្ថបទធម្មតាមានជាពណ៌ ទំហំអក្សរ។ ហើយមាន tag sub-content <p> សំរាប់កំណត់ លក្ខណៈអោយអត្ថបទជា sub-content។ និងចុងក្រោយត្រូវបញ្ចប់ដោយបន្ទាប់ទី២ គឺ <hr>2។
ការសរសេរដូដៈ
នៅក្នុងចំនុចសរសេរកូដនេះលោកអ្នកនឹងកាន់តែយល់ច្បាស់អំពីការប្រើប្រាស់ Internal Style Sheet ដែលត្រូវបង្ហាញដូចកូដ២.២ ដូចខាងក្រោម៖
កូដ២.២ របៀបប្រើប្រាស់ Internal Style Sheet
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Inernal Style Sheet</title>
<style type=”text/css”>
<!–
p.title{ font-family: Cambria, “Times New Roman”, Arial;
font-size: 25px;
margin-left:0px;
}
hr{ border:solid; border-color:#FF0000}
.subtitle { font-family: Cambria, “Times New Roman”, Arial;
font-size: 16px;
color:#0000FF
}
.content{ font-family: Cambria, “Times New Roman”, Arial;
font-size: 14px;
margin-left:20px;
}
.subcontent{
font-family: Cambria, “Times New Roman”, Arial;
font-size: 12px;
}
–></style>
</head>
<body>
<p class=”title”>HOW TO USE INTERNAL STYLE SHEET</p>
<hr />
<p class=”subtitle”>THIS IS INTERNAL STYLE SHEET CLASS.</p>
<p class=”content”> We use Internal Style Sheet in the same HTML file document but we place it in head tag of HTML document.In the CSS Rule Definition dialog box, select Type, and then set the style attributes you want. <br /><br />Leave any of the following attributes empty if they are not important to the style:
</p>
<p>
<ol class=”subcontent”>
<li>Font sets the font family (or series of families) for the style. Browsers display text in the first font in the series that is installed on the user’s system. For compatibility with Internet Explorer 3.0, list a Windows font first. The font attribute is supported by both browsers. </li>
<br />
<li>Size defines the size of the text. You can choose a specific size by selecting the number and the unit of measurement, or you can choose a relative size. Pixels as a unit work well to prevent browsers from distorting your text. The size attribute is supported by both browsers.
</li>
<br />
<li>Style specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. The style attribute is supported by both browsers.
</li>
</ol>
</p>
<hr />
</body>
</html>
បកស្រាយកូដៈ
កូដ២.២ខាងលើលោកអ្នកពិតជាបានឃើញ Class របស់ CSS ទាំងអស់ចំនួន ៥ ដែលបានបង្កើត ដើម្បីប្រាស់នៅក្នុងឧទាហរណ៏ខាងលើនេះ។ ការបង្កើត Class ទាំង នេះនៅជាមួយ File HTML តែមួយគឹត្រូវបានហៅថា Internal Style Sheet។ ប៉ុន្តែលោក អ្នកក៏បានឃើញផងដែរ លើភាព ខុសគ្នានៃការបង្កើត selector ហើយនឹងការហៅយកវា ទៅប្រើប្រាស់វិញដែរ។
កូដ២.២ខាងលើលោកអ្នកពិតជាបានឃើញ Class របស់ CSS ទាំងអស់ចំនួន ៥ ដែលបានបង្កើត ដើម្បីប្រាស់នៅក្នុងឧទាហរណ៏ខាងលើនេះ។ ការបង្កើត Class ទាំង នេះនៅជាមួយ File HTML តែមួយគឹត្រូវបានហៅថា Internal Style Sheet។ ប៉ុន្តែលោក អ្នកក៏បានឃើញផងដែរ លើភាព ខុសគ្នានៃការបង្កើត selector ហើយនឹងការហៅយកវា ទៅប្រើប្រាស់វិញដែរ។
- p.title{ font-family: Cambria, “Times New Roman”, Arial; font-size: 25px;margin-left:0px;}
ជា Class មួយមាន selector ឈ្មោះជា tag <p> ដែលមានតំលៃ attribute class របស់ខ្លួនស្មើនឹង title។ ដូចច្នេះ Class នេះទទួលឥទ្ធិពលចំពោះតែ tag <p> ណាដែលមាន attribute class ឈ្មោះថា title ប៉ុណ្ណោះ។ ចំណែក tag ផ្សេង វិញ គឺមិនទទួលឥទ្ធិពលឡើយ។ class នេះបានកំនត់ ប្រភេទអក្សរជាទំរង់ Cambria ឬ Time New Roman ឬ Arial ដែលមានទំហំ ២៥ pixel និងមានគំលាតចេញពីព្រំដែន ខាងឆ្វេងនៃ Page ប្រមាណ ០pixel។ - hr{ border:solid; border-color:#FF0000 }
ជា Class មួយមាន selector ឈ្មោះថា tag <hr> (បន្ទាត់ដេក)។ នៅពេល លោកអ្នកប្រើ tag <hr> វានឹងទទួលឥទ្ធិពលពី Class នេះភ្លាម។ លក្ខណៈរបស់ Class នេះមាន បន្ទាត់ជាទំរង់ solid ហើយនឹងមានពណ៌បន្ទាត់ក្រហម។ - .subtitle { font-family: Cambria, “Times New Roman”, Arial; font-size: 16px;
color:#0000FF } - ជា Class មាន selector ឈ្មោះថា subtitle បានកំនត់លក្ខណៈរចនារបស់ខ្លួនមាន ដូចជា ទំរង់អក្សរជា Cambria ឬ Time New Roman ឬ Arial ទំហំអក្សរ 16pixel និង ពណ៌អក្សរ ខៀវ។
១.៣ នៅក្រៅទីតាំង ឬ External Style Sheet
ការធ្វើ website លោកនឹងត្រូវការ code របស់ CSS ជាច្រើនដើម្បីប្រើប្រាស់ កំនត់នូវទំរង់ រចនាបទ ដែលលោកអ្នកចង់បានមានដូចជា style(font, color, size, …) ឬ Layout( background, margin, padding ,…)។ លោកអ្នកគួរតែជ្រើសរើសវិធីសាស្រ្ត គ្រប់គ្រងលើ Code របស់ CSS អោយបានល្អ និងមានប្រសិទ្ធភាព ដើម្បីជាសវាងនូវ ការសរសេរកូដជ្រាំដែល ខាត់ពេលវេលា និង File អាចមានទំហំធំដែលធ្វើអោយ ល្បឿនតំណើរការអាចកាត់បន្ថយផងដែរ។ ដូចច្នេះ External Style Sheet គឺវីធី សាស្រ្តមួយសម្រាប់ជាដំណោះស្រាយដ៏ល្អសម្រាប់លោកអ្នក។ External Style Sheet គឺជាការបង្កើត File មួយដាច់ដោយឡែកសម្រាប់ផ្ទុកតែ Class របស់ CSS តែប៉ុណ្ណោះ ហើយគ្រប់ HTML File អាចប្រើ Class ទាំងនោះដោយគ្រាន់តែហៅ File (External Style Sheet) យកមក Import តាមរយះtag ឈ្មោះ <link> ដែលលោកអ្នកនឹងយល់នៅ ចំនុចបន្ទាប់នេះ។
ការធ្វើ website លោកនឹងត្រូវការ code របស់ CSS ជាច្រើនដើម្បីប្រើប្រាស់ កំនត់នូវទំរង់ រចនាបទ ដែលលោកអ្នកចង់បានមានដូចជា style(font, color, size, …) ឬ Layout( background, margin, padding ,…)។ លោកអ្នកគួរតែជ្រើសរើសវិធីសាស្រ្ត គ្រប់គ្រងលើ Code របស់ CSS អោយបានល្អ និងមានប្រសិទ្ធភាព ដើម្បីជាសវាងនូវ ការសរសេរកូដជ្រាំដែល ខាត់ពេលវេលា និង File អាចមានទំហំធំដែលធ្វើអោយ ល្បឿនតំណើរការអាចកាត់បន្ថយផងដែរ។ ដូចច្នេះ External Style Sheet គឺវីធី សាស្រ្តមួយសម្រាប់ជាដំណោះស្រាយដ៏ល្អសម្រាប់លោកអ្នក។ External Style Sheet គឺជាការបង្កើត File មួយដាច់ដោយឡែកសម្រាប់ផ្ទុកតែ Class របស់ CSS តែប៉ុណ្ណោះ ហើយគ្រប់ HTML File អាចប្រើ Class ទាំងនោះដោយគ្រាន់តែហៅ File (External Style Sheet) យកមក Import តាមរយះtag ឈ្មោះ <link> ដែលលោកអ្នកនឹងយល់នៅ ចំនុចបន្ទាប់នេះ។
១.៤ របៀបបង្កើត File ជា External Style Sheet ឬ CSS file
ដើម្បីបង្កើត File ជា External Style Sheet ឬ ហៅថា file CSS បានលោកអ្នក អាចប្រើកម្មវិធី Dreamweaver រឺកម្មវិធីផ្សេងទៀតដែលលោកអ្នកអាចសរសេរ Code ឬ Script របស់ HTML បានហើយត្រូវរក្សាទុកឬ Save ដោយកំនត់កន្ទុយ(Extension) File នោះមានទំរង់ .CSS។ ម៉្យាងវិញទៀតការបង្កើត CSS File មិនតំរូវអោយលោក ប្រើប្រាស់និងផ្ទុក tag របស់ HTML ទេ។ ខាងក្រោមនេះជាឧទាហរណ៏នៃការបង្កើត Class របស់ CSS ជាលក្ខណៈ External Style Sheet ដោយប្រើប្រាស់កម្មវិធី Dreamweaver ដោយ Save និងដាក់ឈ្មោះថា class.css។
សូមដំណើរការកម្មវីធី Dreamweaver រួចចុច File > New… ដូចបានបង្ហាញរូបភាព១០ ដូចខាងក្រោម៖
ដើម្បីបង្កើត File ជា External Style Sheet ឬ ហៅថា file CSS បានលោកអ្នក អាចប្រើកម្មវិធី Dreamweaver រឺកម្មវិធីផ្សេងទៀតដែលលោកអ្នកអាចសរសេរ Code ឬ Script របស់ HTML បានហើយត្រូវរក្សាទុកឬ Save ដោយកំនត់កន្ទុយ(Extension) File នោះមានទំរង់ .CSS។ ម៉្យាងវិញទៀតការបង្កើត CSS File មិនតំរូវអោយលោក ប្រើប្រាស់និងផ្ទុក tag របស់ HTML ទេ។ ខាងក្រោមនេះជាឧទាហរណ៏នៃការបង្កើត Class របស់ CSS ជាលក្ខណៈ External Style Sheet ដោយប្រើប្រាស់កម្មវិធី Dreamweaver ដោយ Save និងដាក់ឈ្មោះថា class.css។
សូមដំណើរការកម្មវីធី Dreamweaver រួចចុច File > New… ដូចបានបង្ហាញរូបភាព១០ ដូចខាងក្រោម៖
កូដ២.៣ Class ជាលក្ខណៈ External Style Sheet
១.៥ ហៅ CSS file មកប្រើនៅក្នុង HTML / XHTML នៅត្រង់ចំនុចនេះលោកអ្នកនឹង យល់ពីរបៀបហៅ CSS file មកប្រើនៅក្នុង HTML file បន្ទាប់ពីលោកអ្នកបានបង្កើត Class របស់ CSS មានលក្ខណៈជា External Style Sheet ដូចនៅចំនុច ១.៥។ ជាទូទៅទីតាំងបញ្ចូល(Import) External Sheet Sheet ឬ CSS file ត្រូវសរសេរនៅក្នុងប្លុក tag <head> External Sheet Sheet </head> ហើយដោយប្រើ tag ឈ្មោះថា <link> ដូចនឹងបង្ហាញរូបមន្តខាងក្រោម៖<link rel=”stylesheet” type=”text/css” href=”[url/]filename.css” >
href : ជា attribute សម្រាប់តំរូវអោយលោកអ្នកបញ្ជាក់ពីទីតាំង(path) របស់ CSS file ឬ External Style Sheet របស់លោកអ្នក។
ឧទាហរណ៏ខាងក្រោមនេះនឹងបង្ហាញលោកអ្នកកាន់តែយល់ច្បាស់ពីការបញ្ចូល CSS file ទៅក្នុង HTML file ( index.html ) ដោយសន្មត់ថា៖
- File ទាំងពីរស្ថិតនៅទីតាំង ជាមួយគ្នាដូចរូបភាព ១១ ខាងក្រោម
កូដ២.៥ HTML file (index.html)
File ទាំងពីរស្ថិតនៅទីតាំង ផ្សេងគ្នាដូចរូបភាព ១២ ខាងក្រោម
រូបភាព១២ បង្ហាញពីFile: index.html, class.css ស្ថិតនៅទីតាំងខុសគ្នាប្រសិនបើទីតាំងរបស់ File ទាំងពីរស្ថិតនៅទីតាំងផ្សេងគ្នាលោកអ្នកត្រូវ
ប្រែប្រួលលើទីតាំងត្រង់ attribute href របស់ tag <link> ដូចកូដ២.៦ខាងក្រោម
កូដ២.៦ HTML file (index.html)
មេរៀនទី៣
គ្រប់គ្រងលើអត្ថបទ (Text property)
នៅក្នុងមេរៀនទី៣នេះលោកអ្នកនឹងបានសិក្សារបៀបប្រើប្រាស់ property ជាច្រើនរបស់ CSS ដែលគ្រប់គ្រងចំពោះអត្ថបទ( Text ) នៅក្នុង website របស់លោក អ្នក។ property ដែលនឹងលើក យកមកបកស្រាយមានដូចជា៖១. text-align
២. text-decoration
៣. text-transform
៤. text-indent
៥. word-spacing
៦. letter-spacing
៧. Line-height
៨. Direction
១. text-align
ដើម្បីតំរឹមអត្ថបទ(text)នៅក្នុង web page របស់លោកអ្នកទៅតាមទំរង់រចនា តាមឆ្វេង តាមស្តាំ កណ្តាល ឬតាមឆ្វេងនិងស្តាំ(ទាំងសងខាង) CSS បានផ្តល់ប្រើ property មួយឈ្មោះថា text-align ដែលមានតំលៃ(value) ដូចជា៖
១- left : សម្រាប់តំរឹមខាងឆ្វេង
២- right: សម្រាប់តំរឹមខាងស្តាំ
៣- center: សម្រាប់តំរឹមកណ្តាល
៤- justify : សម្រាប់តំរឹមទាំងសងខាង(ទាំងឆ្វេងនិងស្តាំ)
Syntax
Selector {text-align: value ;}
លោកអ្នកនឹងអាចយល់ពីការប្រើប្រាស់ text-align ដូចបង្ហាញតាមឧទាហរណ៏កូដ ២.៧ ដូចរូបភាពខាងក្រោម៖
កូដ២.៧ បង្ហាញពីការប្រើប្រាស់ text-align ដើម្បីរចនាអោយអត្ថបទ
២. text-decoration ការប្រើប្រាស់ text-decoration គឺមានលក្ខណៈដាក់បន្ទាត់អោយអត្ថបទលោកអ្នក ដូចជាដាក់បន្ទាត់ខាងលើ ឆូតកណ្តាល និង ខាងក្រោម។ វាមានតំលៃ(value) ៤ ដូចខាងក្រោម៖
១- olverline: សម្រាប់ដាក់បន្ទាត់ខាងលើ
២- line-through: សម្រាប់ដាក់បន្ទាត់ឆូតកណ្តាល
៣- underline: សម្រាប់ដាក់បន្ទាត់ខាងក្រោម
៤- blink: សម្រាប់ធ្វើអោយអក្សរឃើញបាត់ៗ
៥- inherit:សម្រាប់ធ្វើអោយអក្សរមានលក្ខណៈដូចទៅ tagមេ(parent element)
៦- none: មិនកំណត់លក្ខណៈអោយអក្សរ
*សំគាល់: blink មិនតំណើរជាមួយ IE, Chrome, Safari។
Syntax
Selector {text-textdecoration: value ;}
ដើម្បីអោយលោកអ្នកកាន់តែយល់ច្បាស់ ឧទាហរណកូដ២.៨ និងបង្ហាញពីការប្រើ ប្រាស់ “text-decoration” ដូចរូបភាពខាងក្រោម៖
កូដ២.៨ បង្ហាញពីការប្រើប្រាស់ text-decoration ដើម្បីរចនាអោយអត្ថបទ
៣. text-transform សម្រាប់កំណត់អោយអក្សររបស់អត្ថបទមានលក្ខណៈ អក្សរធំទាំងអស់(upper) អក្សរតូច ទាំងអស់(lower) ឬ ធំលើតួអក្សរដើមតំបូង (capitalize) ដោយអាស្រ័យទៅលើ តំលៃ(vaue) របស់វាដូចខាងក្រោម៖
១.uppercase សម្រាប់ធ្វើអោយតួអក្សរធំទាំងអស់២.lowercase សម្រាប់ធ្វើអោយតួអក្សរតូចទាំងអស់
៣.capitilize សម្រាប់ធ្វើអោយតួអក្សរតំបូងរបស់ពាក្យទៅជាអក្សរធំ
៤.inherit : ទាញយកលក្ខណៈដូចទៅនឹងលក្ខណៈរបស់ tagមេ(parent element)
៥.none: មិនមានឥទ្ធិពល
Syntax
Selector {text-transform: value ;}
ដើម្បីយល់កាន់តែច្បាស់ កូត២.៩ខាងក្រោមនេះជាឧទាហរណ៏ពីការប្រើប្រាស text-tranform៖
កូដ២.៩បង្ហាញពីការប្រើប្រាស់ text-transform ដើម្បីរចនាអោយអត្ថបទ
រូបភាព១៤បង្ហាញពី លទ្ធផលនៃកូដ ២.៩ ខាងលើtext-indent សម្រាប់កំនត់ប្រវែងនៃការដកឃ្លាដើមបន្ទាត់នៃអត្ថបទ។ តំលៃ(value) អាចគិតតាមប្រភេទរង្វាស់ខ្នាតដូចជាៈpx, pt, em, cm, % ។
សំគាល់: 1cm= 37.79px, 28.34pt, 2.37em។
Syntax
Selector {text-indent: value ;}
កូត៣.០ខាងក្រោមនេះបង្ហាញពីការប្រើ text-indent ដែលសរសេរនៅក្នុង HTML file ឈ្មោះថា “text-indet.html”។
កូដ៣.០បង្ហាញពីការប្រើប្រាស់ text-indent ដើម្បីកំណត់ដកឃ្លាបន្ទាត់
រូបភាព១៥បង្ហាញពី លទ្ធផលនៃកូដ ៣.០៥. word-spacing សម្រាប់កំណត់គំលាតពីពាក្យមួយទៅពាក្យមួយទៀតនៅក្នុងអត្ថបទទៅតាម ប្រវែងនៃតំលៃ(value)របស់វា ដោយអាចកំនត់តាមប្រភេទរង្វាស់ខ្នាតដូចជា px, pt, em, cm, %។
សំគាល់: 1cm= 37.79px, 28.34pt, 2.37em។
Syntax
Selector {word-spacing: value ;}
ឧទាហរណ៏ថាលោកអ្នកមានឃ្លាមួយថា “Studying is never old for years.” ដោយកំណត់ ការដក់ឃ្លាមានប្រវែងដូចខាងក្រោម៖
ក) តំលៃ (value) ស្មើ 10px;
ខ) តំលៃ (value) ស្មើ -10px;
យោងតាមលក្ខ័ណទាំងពីរលោកអ្នកអាចសរសេរកូដ៣.១ដូចរូបភាពខាងក្រោម៖
កូដ៣.១បង្ហាញពីការប្រើប្រាស់ word-spacing ដើម្បីកំណត់ដកឃ្លាពាក្យ និងពាក្យ
៦.letter-spacing letter-spacing ប្រើសម្រាប់កំណត់គំលាតអក្សរមួយទៅអក្សរមួយតាមតំលៃ(value) របស់វាដោយមានប្រភេទរង្វាស់ខ្នាតដូចជាៈ px, pt, em, cm, %។
សំគាល់: 1cm= 37.79px, 28.34pt, 2.37em។
|
Selector {letter-spacing: value ;}
ដើម្បីងាយស្រួលយល់ពីការប្រើប្រាស់ letter-spacing លោកអ្នកអាចពិនិត្យលើកូត ៣.២ ដូចខាងក្រោម៖
កូដ៣.២បង្ហាញពីការប្រើប្រាស់ letter-spacing ដើម្បីកំណត់ដកឃ្លាពីអក្សរ និងអក្សរ
រូបភាព១៧ បង្ហាញពី លទ្ធផលនៃកូដ ៣.២៧. Line-height
Line Height ប្រើសម្រាប់កំណត់គំលាត់ចន្លោះពីចុះបន្ទាត់មួយទៅចុះបន្ទាត់មួយ ទៀតរបស់អត្ថបទ ដែលតំលៃ(value) របស់វាគិតជាចំនួនបន្ទាត់ ឬជាតំលៃដែលមាន ខ្នាតដូចជា px,pt,em, % ជាដើម។
Syntax
Selector {line-height: value ;}
ដ៣.៣ខាងក្រោមបានបង្ហាញពីការប្រើ line-height property ដែលមាន class ពីរគឺ Class ទីមួយឈ្មោះ .line បានកំណត់គំលាត់ចុះបន្ទាត់ទៅមួយចំនួន៣ដង ហើយ class ទីពីរ ឈ្មោះថា customsize. ដោយកំណត់គំលាត់ការចុះបន្ទាត់មួយទៅមួយជា px មានតំលៃ25px។
កូដ៣.៣បង្ហាញពីការប្រើប្រាស់ line-height ដើម្បីកំណត់គំលាតចុះបន្ទាត់
រូបភាព១៨ បង្ហាញពី លទ្ធផលនៃកូដ ៣.៣Direction ប្រើសម្រាប់កំណត់ទីតាំងសរសេរអត្ថបទដោយចេញពីខាងឆ្វេង ឬស្តាំ វាមានតំលៃពីរដូចជា៖
១.ltr សរសេរអត្ថបទចេញពីឆ្វេង
២.rtl សរសេរអត្ថបទចេញពីស្តាំ
Syntax
Selector {direction: value ;}
កូដ៣.៤ខាងក្រោមបានបង្ហាញពីការប្រើ direction ដែលមាន class ចំនួនពីរគឺ .ltr, .rtl។
Post a Comment