© Khmer Angkor Academy - sophearithput168

Khmer Angkor Academy Logo

ទីតាំង​សរសេរ CSS

វិធី​សាស្ត្រ ៣ យ៉ាង​ក្នុង​ការ​សរសេរ CSS

មាន ៣​កន្លែង ដែល​អាច​សរសេរ CSS បាន៖

  1. Inline CSS: នៅ​ក្នុង​ធាតុ​តាម​រយៈ style attribute
  2. Internal CSS: នៅ​ក្នុង <style> tag
  3. External CSS: នៅ​ក្នុង​ឯកសារ​ដាច់​ដោយ​ឡែក .css

១. Inline CSS - នៅ​ក្នុង​ធាតុ

Inline CSS គឺ​ការ​សរសេរ CSS ដោយ​ផ្ទាល់​នៅ​ក្នុង​ធាតុ HTML តាម​រយៈ style attribute ។

រចនាសម្ព័ន្ធ

<tag style="property: value; property: value;">មាតិកា</tag>

ឧទាហរណ៍

លក្ខណៈ Inline CSS:
  • ✓ ងាយ​ស្រួល​សរសេរ​លឿន​សម្រាប់​ធាតុ​តែ​មួយ
  • ✓ មាន​អាទិភាព​ខ្ពស់​បំផុត
  • ✗ មិន​អាច​ប្រើ​ឡើង​វិញ​បាន
  • ✗ កូដ​រញ៉េរញ៉ៃ ពិបាក​ថែទាំ
  • ✗ មិន​សាកសម​សម្រាប់​គេហទំព័រ​ធំ

២. Internal CSS - នៅ​ក្នុង <style>

Internal CSS គឺ​ការ​សរសេរ​កូដ CSS នៅ​ក្នុង <style> tag ដែល​ត្រូវ​សរសេរ​នៅ​ក្នុង <head> ។

រចនាសម្ព័ន្ធ

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            selector {
                property: value;
            }
        </style>
    </head>
    <body>
        មាតិកា​នៅ​ទីនេះ
    </body>
</html>

ឧទាហរណ៍​ពេញលេញ

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            h2 {
                color: #2c3e50;
                text-align: center;
            }
            p {
                color: blue;
                font-size: 18px;
                line-height: 1.6;
            }
            #special {
                color: green;
                background: #f0f0f0;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <h2>អំពី Khmer Angkor Academy</h2>
        <p>ស្វាគមន៍​មក​កាន់ Khmer Angkor Academy ។</p>
        <p>ឥត​គិត​ថ្លៃ សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តន៍ ។</p>
        <p id="special">សូម​ជួយ​ចែក​រំលែក ។</p>
    </body>
</html>
លក្ខណៈ Internal CSS:
  • ✓ រចនា​ទាំង​ទំព័រ​ក្នុង​ឯកសារ​តែ​មួយ
  • ✓ ងាយ​ស្រួល​សម្រាប់​ទំព័រ​តូច
  • ✓ មិន​ត្រូវការ​ឯកសារ​បន្ថែម
  • ✗ មិន​អាច​ប្រើ​សម្រាប់​ទំព័រ​ជា​ច្រើន
  • ✗ កូដ HTML និង CSS លាយ​គ្នា

៣. External CSS - នៅ​ក្នុង​ឯកសារ​ដាច់​ដោយ​ឡែក

External CSS គឺ​ការ​សរសេរ CSS នៅ​ក្នុង​ឯកសារ​ដាច់​ដោយ​ឡែក ហើយ​ភ្ជាប់​វា​ទៅ HTML ។ នេះ​ជា​វិធី​ល្អ​បំផុត និង​ត្រូវ​បាន​ប្រើ​ច្រើន​បំផុត ។

ជំហាន​ទី ១: បង្កើត​ឯកសារ CSS

បង្កើត​ឯកសារ​ឈ្មោះ style.css ហើយ​សរសេរ​កូដ CSS ៖

/* ឯកសារ: style.css */

h2 {
    color: #2c3e50;
    text-align: center;
}

p {
    color: blue;
    font-size: 18px;
}

#special {
    color: green;
    background: #f0f0f0;
    padding: 10px;
}

ជំហាន​ទី ២: ភ្ជាប់​ឯកសារ CSS ទៅ HTML

ប្រើ <link> tag នៅ​ក្នុង <head> ៖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <h2>អំពី Khmer Angkor Academy</h2>
        <p>ស្វាគមន៍​មក​កាន់ Khmer Angkor Academy ។</p>
        <p id="special">សូម​ជួយ​ចែក​រំលែក ។</p>
    </body>
</html>

ពន្យល់​អំពី <link> tag

Attribute តម្លៃ ពន្យល់
rel stylesheet ប្រាប់​អំពី​ទំនាក់ទំនង​ជា​ឯកសារ​រចនា​ទម្រង់
type text/css ប្រាប់​អំពី​ប្រភេទ​នៃ​ឯកសារ (អាច​លុប​បាន​ក្នុង HTML5)
href css/style.css ទីតាំង​នៃ​ឯកសារ CSS

ឧទាហរណ៍​ទីតាំង​ឯកសារ

<!-- ឯកសារ CSS នៅ​ថត​ដូច​គ្នា -->
<link rel="stylesheet" href="style.css">

<!-- ឯកសារ CSS នៅ​ក្នុង​ថត css -->
<link rel="stylesheet" href="css/style.css">

<!-- ឯកសារ CSS នៅ​ថត​មេ -->
<link rel="stylesheet" href="../style.css">

<!-- ភ្ជាប់​ច្រើន​ឯកសារ -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
លក្ខណៈ External CSS:
  • ✓ អាច​ប្រើ​សម្រាប់​ទំព័រ​ច្រើន
  • ✓ កូដ​ស្អាត មាន​ការ​រៀបចំ​ល្អ
  • ✓ ងាយ​ស្រួល​ថែទាំ
  • ✓ Browser cache ធ្វើ​ឲ្យ​ផ្ទុក​លឿន
  • ✓ ជា​វិធី​ល្អ​បំផុត​សម្រាប់​គេហទំព័រ​ពិត
  • ✗ ត្រូវការ​ HTTP request បន្ថែម

ការ​ប្រៀបធៀប​វិធី​សាស្ត្រ​ទាំង ៣

លក្ខណៈ Inline CSS Internal CSS External CSS
ទីតាំង ក្នុង​ធាតុ <style> tag ឯកសារ .css
ប្រើ​ឡើងវិញ មិន​បាន ក្នុង​ទំព័រ​តែ​មួយ បាន​ច្រើន​ទំព័រ
ការ​ថែទាំ ពិបាក មធ្យម ងាយ
ល្អ​សម្រាប់ តេស្ត​លឿន ទំព័រ​តូច គេហទំព័រ​ពិត
អាទិភាព ខ្ពស់​បំផុត មធ្យម ទាប​បំផុត

CSS Specificity - អាទិភាព​នៃ CSS

នៅ​ពេល​មាន CSS ច្រើន​កន្លែង​ចង់​រចនា​ធាតុ​ដូច​គ្នា កម្មវិធី​រុករក​នឹង​ប្រើ​តាម​លំដាប់​អាទិភាព​ខាង​ក្រោម ៖

លំដាប់​អាទិភាព (ពី​ខ្ពស់​ទៅ​ទាប)

  1. Inline CSS - អាទិភាព​ខ្ពស់​បំផុត (ព្រោះ​សរសេរ​នៅ​ក្នុង​ធាតុ​ដោយ​ផ្ទាល់)
  2. Internal/External CSS - អាស្រ័យ​លើ​លំដាប់​ដែល​សរសេរ (មួយ​ណា​នៅ​ក្រោម​ជាង មាន​អាទិភាព​ជាង)

ឧទាហរណ៍​អាទិភាព

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css"> <!-- ដំបូង -->
        <style>
            p { color: blue; } <!-- ក្រោយ​ជាង = មាន​អាទិភាព​ជាង -->
        </style>
    </head>
    <body>
        <!-- ខ្ពស់​បំផុត = inline style -->
        <p style="color: red;">ពណ៌​ក្រហម (Inline)</p>
    </body>
</html>

ចំណាំ: កូដ​ដែល​សរសេរ​នៅ​ក្រោម​គេ​បំផុត គឺ​មាន​អាទិភាព​ខ្ពស់​ជាង​គេ ដូច​ទឹក​ធ្លាក់​ពី​លើ​មក (Cascading) ។

ណែនាំ​អំពី​ការ​ប្រើប្រាស់

គួរ​ប្រើ External CSS នៅ​ពេល​ណា?

  • កំពុង​បង្កើត​គេហទំព័រ​ពិត​ប្រាកដ
  • មាន​ច្រើន​ទំព័រ ចង់​រចនា​ដូច​គ្នា
  • ចង់​ឲ្យ​កូដ​ងាយ​ស្រួល​ថែទាំ
  • ធ្វើ​ការ​ជា​ក្រុម

គួរ​ប្រើ Internal CSS នៅ​ពេល​ណា?

  • ទំព័រ​តែ​មួយ​គត់
  • រចនា​ពិសេស​សម្រាប់​តែ​ទំព័រ​នោះ
  • កំពុង​សាកល្បង​លឿន

គួរ​ប្រើ Inline CSS នៅ​ពេល​ណា?

  • ចង់​តេស្ត​លឿន​ៗ
  • បដិសេធ CSS ផ្សេង​ទៀត (override)
  • ធាតុ​តែ​មួយ​គត់ មាន​រចនា​ពិសេស

សេចក្តី​សន្និដ្ឋាន

មាន ៣ វិធី​សរសេរ CSS ៖

  • Inline CSS: ក្នុង​ធាតុ - លឿន តែ​មិន​ល្អ​សម្រាប់​គេហទំព័រ​ធំ
  • Internal CSS: ក្នុង <style> - ល្អ​សម្រាប់​ទំព័រ​តូច
  • External CSS: ឯកសារ .css - ល្អ​បំផុត សម្រាប់​គេហទំព័រ​ពិត
ណែនាំ: ប្រើ External CSS សម្រាប់​គេហទំព័រ​ពិត​ប្រាកដ ព្រោះ​ងាយ​ស្រួល​ថែទាំ ប្រើ​ឡើង​វិញ​បាន និង​មាន​ភាព​រៀបរយ​ល្អ ។
មេរៀនមុន
រចនា​សម្ព័ន្ធ
មេរៀនបន្ទាប់
អំពី Selector