CSS គឺបង្កើតឡើងដើម្បីរចនាការបង្ហាញរូបរាង្គរបស់ធាតុនៃ HTML។ Styles ជាធម្មតាត្រូវបានគេរក្សាវានៅក្នុង CSS files ដាច់ដោយឡែក( external .css files)។
External style sheets អាចឲ្យអ្នកផ្លាស់ប្តូរ រូបរាង្គនៃទំព័រ នៅក្នុងគេហទំព័រ ដោយគ្រាន់តែកែប្រែនៅក្នុង CSS file តែប៉ុណ្ណោះ។
តើអ្វីជា External Style Sheets?
External style sheet គឺជាការផ្តាច់ Style Sheet ទៅក្នុង File CSS មួយផ្សេងដាច់ដោយឡែក។ វាផ្តល់ភាពងាយស្រួល ដែល HTML Files ជាច្រើនអាចប្រើប្រាស់ CSS file តែមួយ។ ការប្រើប្រាស់ External Style Sheet ផ្តល់អត្ថប្រយោជន៍ជាច្រើន ដូចជាជួយ កាត់បន្ថយកូដក្នុង HTML file ងាយស្រួលក្នុងការកែ Style Sheet តែមួយកន្លែង ។
រាល់ HTML files ទាំងអស់ ភ្ជាប់ទៅកាន់ CSS file ដោយប្រើ <link> tag. <link> tag ត្រូវតែដាក់នៅក្នុង <head></head> ។
មានវិធីបីយ៉ាងដើម្បីបញ្ចូល ការរចនាបន្ថែម (Style) ចូលទៅក្នុង HTML ៖
- External style sheet
- Internal style sheet
- Inline style
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
External style sheet អាចសរសេរឡើងដោយប្រើ Text Editor ផ្សេងៗ។ CSS file មិនត្រូវមាន HTML tag ទេ គឺមានតែរូបមន្ត CSS ប៉ុណ្ណោះ។
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
មិនត្រូវមាន ចន្លោះ(space) នៅចន្លោះរវាង តម្លៃរបស់ Propery និង ខ្នាតរបស់វាទេ ។ (ឧទា. margin-left:20 px). វិធីសរសេរត្រូវគឺ : margin-left:20px;
តើអ្វីជា Internal Style Sheet?
Internal style sheet ត្រូវបានគេប្រើនៅពេលដែល HTML file មួយ ប្រើការរចនាមួយតែឯង។ ដើម្បីសរសេរ Internal Style Sheet គឺត្រូវប្រកាសវានៅចន្លោះ <head></head>ដោយប្រើ <style> tag ។
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
តើអ្វីជា Inline Styles?
Inline style sheet គឺជាការសរសេរ Style Sheet នៅក្នុង HTML tag ។ Style Sheet ដែលសរសេរជា Inline គឺអាចកំណត់ការរចនាបានតែ ប្លុក tag នោះតែប៉ុណ្ណោះ វាមិនការប្រែប្រួលទៅដល់ tag ផ្សេងៗទៀតដែលមានឈ្មោះដូចគ្នានោះទេ។ ដោយការប្រើប្រាស់ style attribute ។
សូមមើលឧទាហរណ៍ខាងក្រោម៖
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>