មេរៀនទី២: សង្ខេប Syntax CSS

មេរៀនទី២: មេរៀនសង្ខេប Syntax  CSS 

មេរៀន១: សញ្ញាមូលដ្ឋាន CSS

បង្រៀនដោយលោកគ្រូ: ទាវ ឈុនណន
ព្រឹទ្ធបរុស មហាវិទ្យាល័យ វិទ្យាសាស្រ្ត និង បច្ចេកវិទ្យា
នៃ សាកលវិទ្យាល័យកម្ពុជា
Tel: 077778647-070778647-0977778647
Yahoo, Skype, google: chhunnan

. 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 Dreamweaver

Dreamweaver ជាកម្មវីធីដែលលោកអ្នកត្រូវតម្លើងបន្ថែមទៅក្នុងប្រព័ន្ធដំណើរ ការ Window នៅលើម៉ាស៊ីនកុំព្យូទ័ររបស់លោកអ្នក។
២.១.១​ ទាញយកកម្មវិធី Macromedia Dreamweaver ពីInternet
​          លោកអ្នកអាចរកកម្មវីធីនេះបាន តាមរយះ Website​​​ (www.google.com.kh) ដោយគ្រាន់តែវាយឃ្លាថា “Download Dreamweaver Torrent” បញ្ចូលទៅកន្លែង ប្រអប់ស្វែងរក​ រួចហើយសូមចុច button ស្វែងរកនោះជា ការស្រេចដូចបង្ហាញ រូបភាព២.១ខាងក្រោម៖
a– បន្ទាប់មកលោកអ្នកត្រូវស្វែងរកប៊ូតុង Download ដែលបាន link ទៅកាន Fileមួយមាន extension (.torrent) ដូចរូបភាព២.១.២​ខាងក្រោម៖

a– បន្ទាប់មកសូមតំណើការកម្មវីធីមួយឈ្មោះថា Torrent ដូចរូបភាព២.១.៣ខាងក្រោម៖

a២.១.២​ តំណើការកម្មវិធី Macromedia Dreamweaver
​    
បន្ទាប់ពី download កម្មវីធី Dreamweaver ចប់សព្វគ្រប់រួចហើយ សូមលោកអ្នក ធ្វើការតំឡើងកម្មវីធីនោះ រួចហើយចូលទៅ បើកកម្មវិធី នោះតាមវិធីដូចរូបភាព ២.១.២ ខាងក្រោម៖
aដើម្បីបង្កើត Fileមួយជា CSS សូមលោកអ្នកចុច​ (Ctrl + N) ដូចបង្ហាញ ក្នុងរូបភាព ៥ ខាងក្រោម៖

a២.២​ កម្មវិធី NotePadរបស់ Window  

កម្មវិធី NotePad ជាកម្មវិធីមួយដែលមានស្រាប់ក្រោយពេលលោក អ្នកបាន តម្លើងប្រព័ន្ធ ដំណើរការ Window នៅលើម៉ាស៊ីនកុំព្យូទ័រ របស់អ្នក។ ហើយលោកអ្នក អាចតំណើរការ កម្មវិធីនេះតាមពីររបៀប៖

របៀបទី១ ដូចក្នុងរូបភាព ៦ខាងក្រោម

aរបៀបទី២ ដូចក្នុងរូបភាព ៧ខាងក្រោម

ចុច Start > All Programs > Accessories > Notepad​ ជាការស្រេច

aតាមរបៀបទាំងពីរខាងលើលោកអ្នកនឹងបានឃើញកម្មវីធី NotePad រូបភាព៨ ដូចខាងក្រោម៖

a៣​ 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 {property:value}

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 របស់ class
​          តួយ៉ាងដូចជា ឧទាហរណ៏កូដគំរូក្នុងចំនុច​ខាង​លើ គ្រប់ 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>

មេរៀន 2

ទំនាក់ទំនងរវាង CSS និង HTML / XHTML

ការពិតទៅ CSS និង HTML ជាគូរដែលមិនអាចខ្វះគ្នាបាននៅពេល លោកអ្នកសំរេចចិត្តបង្កើត Website មួយ​។​ ផ្ទុយទៅវិញ ប្រសិនបើ លោកអ្នក មិនប្រើ CSSនោះ លោកអ្នកនឹងជួបការស្មុគស្មាញ នឹងពិបាក គ្រប់គ្រងលើបញ្ហា ពិបាកកំនត់ទំរង់រចនាបទ ទៅតាមការ ចង់បាន (style, Layout) មានជាអាទ៌ style សំដៅដល់ លក្ខណៈអក្សរ កំណត់ ពណ៌ ជាដើម និងLayout សំដៅដល់ margin ទំរង់ page ទីតាំង Object ជាដើមផងដែរ។ នៅក្នុងមេរៀននេះលោកអ្នក នឹង សិក្សាអំពីមូលបទដូចជាៈ
​- ទីតាំងដែលអាចបង្កើត Class របស់ CSS
– របៀបហៅ Class ទៅប្រើនៅក្នុង HTML

. តើសោភ័ណនិច្ច័យ​(CSS)​ត្រូវសរសេរនៅទីតាំងណា?

លោកអ្នកបានដឹងពីសារះប្រយោជន៏ និងរូបមន្តនៃរបៀបបង្កើត 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 ហើយនឹង ការ ហៅយកវា ទៅប្រើប្រាស់វិញដែរ។

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 និង ពណ៌អក្សរ ខៀវ។

Internal Style sheet មានលក្ខណៈល្អជាង Inline Style ត្រង់ថា ឥទ្ធិពល របស់អាច គ្របដណ្តប់ ពេញមួយ HTML Document មាន ន័យថាគ្រប់ Tag របស់ HTML គឺអាច ទទួលឥទ្ធិពលពី Class របស់ CSS ទាំងអស់ដែលលោកអ្នកបានបង្កើត។

១.៣​​ នៅក្រៅទីតាំង ឬ 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> ដែលលោកអ្នកនឹងយល់​នៅ ចំនុចបន្ទាប់នេះ។

១.៤ របៀបបង្កើត 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… ដូចបានបង្ហាញរូបភាព១០ ដូចខាងក្រោម៖

aកូដ២.៣ Class ជាលក្ខណៈ External Style Sheet

a១.៥ ហៅ 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> ដូចនឹងបង្ហាញរូបមន្តខាងក្រោម៖

Syntax

<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 ទាំងពីរស្ថិតនៅទីតាំង ជាមួយគ្នាដូចរូបភាព ១១ ខាងក្រោម
  • a

កូដ២.៤ CSS file (class.css)

aកូដ២.៥ HTML file (index.html)

aFile ទាំងពីរស្ថិតនៅទីតាំង ផ្សេងគ្នាដូចរូបភាព ១២​ ខាងក្រោម

aរូបភាព១២ បង្ហាញពីFile: index.html, class.css ស្ថិតនៅទីតាំងខុសគ្នា

ប្រសិនបើទីតាំងរបស់ File ទាំងពីរស្ថិតនៅទីតាំងផ្សេងគ្នាលោកអ្នកត្រូវ

ប្រែប្រួលលើទីតាំងត្រង់ attribute href  របស់ tag <link> ដូចកូដ២.៦​ខាងក្រោម

កូដ២.៦ HTML file (index.html)

a

មេរៀន៣

 គ្រប់គ្រងលើអត្ថបទ (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 ដូចបង្ហាញ តាម ឧទាហរណ៏កូដ ២.៧ ដូចរូបភាពខាងក្រោម៖

aកូដ២.៧ បង្ហាញពីការប្រើប្រាស់ text-align ដើម្បីរចនាអោយអត្ថបទ

a២. 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” ដូចរូបភាពខាងក្រោម៖

aកូដ២.៨ បង្ហាញពីការប្រើប្រាស់ text-decoration ដើម្បីរចនាអោយអត្ថបទ

a៣. text-transform

​        សម្រាប់កំណត់អោយអក្សររបស់អត្ថបទមានលក្ខណៈ អក្សរធំទាំង អស់(upper) អក្សរតូច ទាំងអស់(lower) ឬ ធំលើតួអក្សរដើមតំបូង (capitalize) ដោយអាស្រ័យទៅលើ តំលៃ(vaue) របស់វាដូច ខាងក្រោម៖

​១.uppercase សម្រាប់ធ្វើអោយតួអក្សរធំទាំងអស់
២.lowercase សម្រាប់ធ្វើអោយតួអក្សរតូចទាំងអស់
​៣.capitilize សម្រាប់ធ្វើអោយតួអក្សរតំបូងរបស់ពាក្យទៅជាអក្សរធំ
៤.inherit : ទាញយកលក្ខណៈដូចទៅនឹងលក្ខណៈរបស់ tagមេ(parent element)
៥.none: មិនមានឥទ្ធិពល

Syntax

Selector {text-transform: value ;}

ដើម្បីយល់កាន់តែច្បាស់ កូត២.៩ខាងក្រោមនេះជាឧទាហរណ៏ពីការប្រើប្រាស text-tranform៖

aកូដ២.៩បង្ហាញពីការប្រើប្រាស់ text-transform ដើម្បីរចនាអោយអត្ថបទ

aរូបភាព១៤បង្ហាញពី លទ្ធផលនៃកូដ ២.៩ ខាងលើ

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”។

aកូដ៣.០បង្ហាញពីការប្រើប្រាស់ text-indent ដើម្បីកំណត់ដកឃ្លាបន្ទាត់

aរូបភាព១៥បង្ហាញពី លទ្ធផលនៃកូដ ៣.០

៥. 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;
យោងតាមលក្ខ័ណទាំងពីរលោកអ្នកអាចសរសេរកូដ៣.១ដូចរូបភាពខាងក្រោម៖
aកូដ៣.១បង្ហាញពីការប្រើប្រាស់ word-spacing ដើម្បីកំណត់ដកឃ្លាពាក្យ និងពាក្យ

a៦.letter-spacing
​          letter-spacing ប្រើសម្រាប់កំណត់គំលាតអក្សរមួយទៅអក្សរមួយតាមតំលៃ​(value) របស់វា​ដោយមានប្រភេទរង្វាស់ខ្នាតដូចជាៈ px, pt, em, cm, %។

សំគាល់:  1cm= 37.79px, 28.34pt, 2.37em។

កូដ៣.២បង្ហាញពីការប្រើប្រាស់ letter-spacing ដើម្បីកំណត់ដកឃ្លាពីអក្សរ និងអក្សរ

Syntax

Selector {letter-spacing: value ;}

ដើម្បីងាយស្រួលយល់ពីការប្រើប្រាស់ letter-spacing លោកអ្នក អាចពិនិត្យលើកូត ៣.២ ដូចខាងក្រោម៖

a

កូដ៣.២បង្ហាញពីការប្រើប្រាស់ letter-spacing ដើម្បីកំណត់ ដកឃ្លា ពីអក្សរ និងអក្សរ

aរូបភាព១៧ បង្ហាញពី លទ្ធផលនៃកូដ ៣.២

៧. Line-height

Line Height  ប្រើសម្រាប់កំណត់គំលាត់ចន្លោះពីចុះបន្ទាត់មួយទៅចុះបន្ទាត់មួយ ទៀតរបស់អត្ថបទ ដែលតំលៃ(value) របស់វាគិតជាចំនួនបន្ទាត់ ឬជាតំលៃដែលមាន ខ្នាតដូចជា px,pt,em, % ជាដើម។

Syntax

Selector {line-height: value ;}

ដ៣.៣ខាងក្រោមបានបង្ហាញពីការប្រើ line-height property ដែលមាន class ពីរគឺ Class ទីមួយឈ្មោះ​ .line បានកំណត់គំលាត់ ចុះបន្ទាត់ទៅមួយចំនួន៣ដង ហើយ class ទីពីរ ឈ្មោះថា​ customsize. ដោយកំណត់គំលាត់ការចុះបន្ទាត់មួយទៅមួយជា px មានតំលៃ​​25px។

aកូដ៣.៣បង្ហាញពីការប្រើប្រាស់ line-height ដើម្បីកំណត់គំលាតចុះបន្ទាត់

aរូបភាព១៨ បង្ហាញពី លទ្ធផលនៃកូដ ៣.៣

Direction ប្រើសម្រាប់កំណត់ទីតាំងសរសេរអត្ថបទដោយចេញពីខាងឆ្វេង ឬស្តាំ វាមានតំលៃពីរដូចជា៖

១.​ltr សរសេរអត្ថបទចេញពីឆ្វេង
២.rtl សរសេរអត្ថបទចេញពីស្តាំ

Syntax

Selector {direction: value ;}

កូដ៣.៤ខាងក្រោមបានបង្ហាញពីការប្រើ direction ដែលមាន class ចំនួនពីរ​គឺ .ltr, .rtl។

aa