ការពិតទៅ 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 ហើយនឹង ការ ហៅយកវា ទៅប្រើប្រាស់វិញដែរ។
p.title{ font-family: Cambria, “Times New Roman”, Arial; font-size: 25px;margin-left:0px;} កូដ២.២ខាងលើលោកអ្នកពិតជាបានឃើញ Class របស់ CSS ទាំងអស់ ចំនួន ៥ ដែលបានបង្កើត ដើម្បីប្រាស់នៅក្នុង ឧទាហរណ៏ ខាងលើនេះ។ ការបង្កើត Class ទាំង នេះនៅជាមួយ File HTML តែមួយ គឹត្រូវបានហៅថា Internal Style Sheet។ ប៉ុន្តែលោក អ្នកក៏ បានឃើញផងដែរ លើភាព ខុសគ្នានៃការបង្កើត selector ហើយនឹង ការ ហៅយកវា ទៅប្រើប្រាស់វិញដែរ។
ជា 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)
0 comments:
Post a Comment