❖ 1. ស្គាល់ដំបូងអំពី CSS

1. CSS គឺជាអ្វី? រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

CSS (Cascading Style Sheets) ជាភាសាសម្រាប់តុបតែងរចនាប័ទ្ម (Style) របស់ទំព័រ HTML ដូចជា ពណ៌ ទំហំ ចន្លោះ និងទីតាំង។ ប្រសិនបើ HTML ជា "គ្រោងឆ្អឹង" របស់ទំព័រ នោះ CSS ជា "សម្លៀកបំពាក់" ដែលធ្វើឲ្យវាមើលទៅស្រស់ស្អាត។

2. របៀបភ្ជាប់ CSS ទៅកាន់ HTML រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

របៀប	កូដឧទាហរណ៍	ការប្រើប្រាស់
Inline	`<p style="color:red;">`	ដាក់ត្រង់ Tag តែមួយ (មិនណែនាំសម្រាប់គម្រោងធំ)
Internal	`<style>...</style>` ក្នុង <head>	សម្រាប់ទំព័រតែមួយ
External	`<link rel="stylesheet" href="style.css">`	ល្អបំផុត អាចប្រើឡើងវិញបានលើទំព័រច្រើន

3. រចនាសម្ព័ន្ធកូដ CSS (Syntax) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

CSS មាន ៣ ផ្នែកចម្បង៖ Selector, Property និង Value។

selector {
  property: value;
}

/* ឧទាហរណ៍ */
p {
  color: blue;
  font-size: 16px;
}

ចំណាំ៖ Comment ក្នុង CSS សរសេរដោយ /* ... */ មិនប្រើ // ដូច JavaScript ទេ។

❖ 2. Selectors ក្នុង CSS

1. Selectors មូលដ្ឋាន រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ប្រភេទ	Syntax	អត្ថន័យ
Universal	`*`	រើសយកគ្រប់ Element ទាំងអស់
Element	`p`	រើសយក Tag ជាក់លាក់ (ឧ. p, h1, div)
Class	`.classname`	រើសយក Element ដែលមាន class នេះ (ប្រើបានច្រើនដង)
ID	`#idname`	រើសយក Element ដែលមាន id នេះ (តែមួយគត់ក្នុងទំព័រ)

2. Selectors ជាក្រុម និងទំនាក់ទំនង រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Syntax	អត្ថន័យ
h1, p	រើសទាំង h1 និង p (Group Selector)
div p	រើស p ណាមួយដែលនៅក្នុង div (Descendant, មិនថាជិតឬឆ្ងាយ)
div > p	រើសតែ p ដែលជា child ផ្ទាល់របស់ div (Child Selector)
h1 + p	រើស p ដែលនៅជាប់បន្ទាប់ពី h1 ភ្លាមៗ (Adjacent Sibling)
h1 ~ p	រើស p ទាំងអស់ដែលនៅក្រោយ h1 (General Sibling)

3. Pseudo-class និង Pseudo-element រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Syntax	អត្ថន័យ
a:hover	ពេលព្រួញកណ្តុរដាក់លើ Element
input:focus	ពេល Element កំពុងត្រូវបានជ្រើសរើស (Cursor នៅក្នុង)
li:first-child	រើសធាតុទីមួយក្នុងក្រុម
li:last-child	រើសធាតុចុងក្រោយក្នុងក្រុម
li:nth-child(2)	រើសធាតុទីតាមលេខកំណត់
p::first-line	រើសបន្ទាត់ដំបូងនៃអត្ថបទ (Pseudo-element)
p::before	បញ្ចូលខ្លឹមសារមុន Element (ត្រូវប្រើជាមួយ content)

❖ 3. ពណ៌ និង ផ្ទៃខាងក្រោយ (Colors & Backgrounds)

1. របៀបកំណត់តម្លៃពណ៌ រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ទម្រង់	ឧទាហរណ៍	ពន្យល់
Named Color	`color: red;`	ឈ្មោះពណ៌ជាភាសាអង់គ្លេស (មានប្រហែល ១៤០ ឈ្មោះ)
HEX	`color: #ff0000;`	តម្លៃលេខ ១៦ (Hexadecimal)ដែលពេញនិយមបំផុត
RGB	`color: rgb(255,0,0);`	Red, Green, Blue (0-255 នីមួយៗ)
RGBA	`color: rgba(255,0,0,0.5);`	RGB បន្ថែម Alpha (តម្លាភាព 0-1)
HSL	`color: hsl(0,100%,50%);`	Hue, Saturation, Lightness

2. Background Properties រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Property	ការប្រើប្រាស់
background-color	កំណត់ពណ៌ផ្ទៃខាងក្រោយ
background-image	ដាក់រូបភាពជាផ្ទៃខាងក្រោយ (ឧ. `url('bg.jpg')`)
background-repeat	ការធ្វើឡើងវិញរបស់រូបភាព (repeat, no-repeat, repeat-x)
background-size	ទំហំរូបភាព (ឧ. cover, contain, 100%)
background-position	ទីតាំងរូបភាព (ឧ. center, top left)

body {
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

❖ 4. ការរចនាអក្សរ (Text & Font Styling)

1. Font Properties រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Property	ការប្រើប្រាស់
font-family	ឈ្មោះពុម្ពអក្សរ (ឧ. `'Arial', sans-serif`)
font-size	ទំហំអក្សរ (ឧ. 16px, 1.2rem)
font-weight	កម្រាស់អក្សរ (normal, bold, 100-900)
font-style	ទ្រង់ទ្រាយ (normal, italic)

2. Text Properties រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Property	ការប្រើប្រាស់
text-align	តម្រឹមអត្ថបទ (left, right, center, justify)
text-decoration	គូសបន្ទាត់ (underline, line-through, none)
text-transform	ប្តូរទ្រង់ទ្រាយអក្សរ (uppercase, lowercase, capitalize)
line-height	កម្ពស់រវាងបន្ទាត់
letter-spacing	គម្លាតរវាងអក្សរនីមួយៗ

ចំណាំ៖ កុំច្រឡំរវាង font-family (ជ្រើសពុម្ពអក្សរ) និង font-size (ជ្រើសទំហំ) ព្រោះជាកំហុសញឹកញាប់សម្រាប់អ្នកចាប់ផ្ដើមរៀន។

❖ 5. គំរូប្រអប់ CSS (The Box Model)

1. Box Model គឺជាអ្វី? រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

រាល់ Element នៅក្នុង HTML ត្រូវបានចាត់ទុកជា "ប្រអប់" មួយដែលមាន ៤ ស្រទាប់តាមលំដាប់ពីក្នុងទៅក្រៅ៖

ស្រទាប់	អត្ថន័យ
Content	ខ្លឹមសារពិត (អត្ថបទ, រូបភាព)
Padding	ចន្លោះរវាង Content និង Border (ចន្លោះខាងក្នុង)
Border	បន្ទាត់ស៊ុមព័ទ្ធជុំវិញ Padding
Margin	ចន្លោះខាងក្រៅ Border (គម្លាតទៅ Element ផ្សេង)

2. Width, Height & Box-sizing រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Property	ការប្រើប្រាស់
width / height	ទទឹង / កម្ពស់នៃ Content
box-sizing: content-box	លំនាំដើម (width រាប់តែ Content មិនរាប់ padding/border)
box-sizing: border-box	width រួមទាំង padding និង border ចូលផង (ងាយគណនាជាង ណែនាំឲ្យប្រើ)

* {
  box-sizing: border-box;
}
.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
}

គន្លឹះ៖ អ្នកអភិវឌ្ឍន៍ភាគច្រើនដាក់ * { box-sizing: border-box; } នៅដើម Project ដើម្បីជៀសវាងបញ្ហាទំហំមិនត្រូវគ្នា។

❖ 6. Display និង Position

1. Display Property រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

តម្លៃ	អត្ថន័យ
block	កាន់កាប់ទទឹងពេញមួយបន្ទាត់ (ឧ. div, p, h1)
inline	កាន់កាប់ត្រឹមតែទំហំខ្លឹមសារ ដាក់ជាប់គ្នាបាន (ឧ. span, a)
inline-block	ដូច inline តែកំណត់ width/height បានដូច block
none	លាក់ Element ចេញពីទំព័រទាំងស្រុង
flex / grid	ប្រើសម្រាប់ Layout ទំនើប (មើលមេរៀនទី៧ និង ៨)

2. Position Property រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

តម្លៃ	អត្ថន័យ
static	លំនាំដើម (នៅតាមលំដាប់ធម្មតានៃ HTML)
relative	ផ្លាស់ទីពីទីតាំងដើមរបស់វា ដោយប្រើ top/left/right/bottom
absolute	ចេញពីលំហូរធម្មតា កំណត់ទីតាំងទាក់ទងទៅ parent ដែលមាន position ជា relative
fixed	ជាប់ជានិច្ចទាក់ទងទៅ Browser Window (មិនរើរពេល Scroll)
sticky	ចម្រុះរវាង relative និង fixed៖ ជាប់នៅពេល Scroll ដល់ចំណុចកំណត់

.navbar {
  position: sticky;
  top: 0;
  background: white;
}

❖ 7. Flexbox

1. Flexbox គឺជាអ្វី? រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Flexbox ជាប្រព័ន្ធ Layout ១ ជួរ (1-dimensional) ដែលធ្វើឲ្យការតម្រឹមធាតុនៅចំកណ្តាល ឬចែកចាយគម្លាតស្មើគ្នាធ្វើទៅបានយ៉ាងងាយស្រួល ដោយចាប់ផ្ដើមពី display: flex; នៅលើ Parent Container។

2. Properties របស់ Container (Parent) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Property	ការប្រើប្រាស់
display: flex	បើកដំណើរការ Flexbox លើ Element នេះ
flex-direction	ទិសដៅតម្រៀប (row, column, row-reverse)
justify-content	តម្រឹមតាមអ័ក្សសំខាន់ (center, space-between, space-around)
align-items	តម្រឹមតាមអ័ក្សឆ្លង (center, flex-start, flex-end, stretch)
flex-wrap	អនុញ្ញាតឲ្យធាតុរុំចុះបន្ទាត់ថ្មី ពេលមិនអាចដាក់ក្នុងមួយជួរបាន
gap	គម្លាតរវាងធាតុនីមួយៗក្នុង Flex Container

3. Properties របស់ Item (Child) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Property	ការប្រើប្រាស់
flex-grow	កំណត់ថាតើធាតុនេះគួរពង្រីកយកទំហំទំនេរប៉ុន្មានប្រៀបធៀបនឹងធាតុផ្សេង
flex-shrink	កំណត់ថាតើធាតុនេះគួរតូចចុះប៉ុន្មានពេលទំហំមិនគ្រប់គ្រាន់
align-self	Override align-items សម្រាប់ធាតុនេះតែម្នាក់ឯង

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

❖ 8. CSS Grid

1. Grid គឺជាអ្វី? ខុសពី Flexbox ត្រង់ណា? រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

CSS Grid ជាប្រព័ន្ធ Layout ២ ជួរ (2-dimensional) ដែលត្រួតត្រាបានទាំងជួរដេក (row) និងជួរឈរ (column) ក្នុងពេលតែមួយ ខុសពី Flexbox ដែលត្រួតត្រាបានតែមួយទិសដៅ។ ល្អសម្រាប់ Layout ទំព័រទាំងមូល (ឧ. header, sidebar, main, footer)។

2. Properties របស់ Container រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Property	ការប្រើប្រាស់
display: grid	បើកដំណើរការ Grid លើ Element នេះ
grid-template-columns	កំណត់ចំនួន និងទំហំជួរឈរ (ឧ. `1fr 1fr 1fr`)
grid-template-rows	កំណត់ចំនួន និងកម្ពស់ជួរដេក
gap	គម្លាតរវាង Cell (row-gap និង column-gap ដាច់ដោយឡែកក៏បាន)
grid-template-areas	កំណត់ Layout ដោយដាក់ឈ្មោះ (ធ្វើឲ្យកូដងាយអានជាង)

3. ឯកតា `fr` និងឧទាហរណ៍ជាក់ស្តែង រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

fr (fraction unit) តំណាងឲ្យចំណែកនៃទំហំទំនេរដែលនៅសល់ដែលជាឯកតាពិសេសសម្រាប់ Grid។

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-areas:
    "sidebar main"
    "sidebar footer";
  gap: 20px;
}
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

❖ 9. ខ្នាតវាស់ និង CSS Variables

1. ខ្នាតវាស់ដាច់ខាត (Absolute) និងទាក់ទង (Relative) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ឯកតា	ប្រភេទ	ន័យ
px	Absolute	Pixel (ទំហំថេរ មិនប្រែប្រួលតាមអ្វីទាំងអស់)
%	Relative	ភាគរយធៀបនឹង Parent Element
em	Relative	ធៀបនឹង font-size របស់ Parent
rem	Relative	ធៀបនឹង font-size របស់ Root (html)ដែលស្ថិរភាពជាង em
vw / vh	Relative	ភាគរយនៃទទឹង/កម្ពស់ Viewport (អេក្រង់)

គន្លឹះ៖ សម្រាប់ font-size គេច្រើនណែនាំឲ្យប្រើ rem ព្រោះស្ថិរភាព មិនរងឥទ្ធិពលពី Parent ច្រើនកម្រិត (Nested)។

2. CSS Variables (Custom Properties) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

CSS Variables អនុញ្ញាតឲ្យកំណត់តម្លៃម្ដង ហើយប្រើឡើងវិញបានច្រើនកន្លែង ធ្វើឲ្យកែប្រែពណ៌/ទំហំទាំងអស់ក្នុងគម្រោងបានងាយស្រួល។

:root {
  --primary-color: #3457D5;
  --spacing: 16px;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

❖ 10. ការរចនាឆ្លើយតប (Responsive Design)

1. Responsive Design គឺជាអ្វី? រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Responsive Design ជាបច្ចេកទេសរចនាគេហទំព័រឲ្យសម្របទៅតាមទំហំអេក្រង់ខុសៗគ្នា (ទូរស័ព្ទ, Tablet, កុំព្យូទ័រ) ដោយស្វ័យប្រវត្តិ។

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ចំណាំ៖ Meta tag នេះចាំបាច់ត្រូវដាក់ក្នុង <head> ជានិច្ច បើមិនដូច្នេះទេ Media Query នឹងមិនដំណើរការត្រឹមត្រូវទេនៅលើទូរស័ព្ទ។

2. Media Queries រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Media Query អនុញ្ញាតឲ្យដាក់ CSS ខុសគ្នាទៅតាមលក្ខខណ្ឌ ដូចជាទទឹងអេក្រង់។

/* លំនាំដើមសម្រាប់ទូរស័ព្ទ (Mobile First) */
.container {
  flex-direction: column;
}

/* ពេលអេក្រង់ធំជាង 768px (Tablet/Desktop) */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

Breakpoint ទូទៅ	ប្រភេទឧបករណ៍
< 600px	ទូរស័ព្ទ (Mobile)
600px – 1024px	Tablet
> 1024px	កុំព្យូទ័រតុ (Desktop)

❖ 11. Transition, Transform & Animation

1. Transition (ចលនារលូន) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Transition ធ្វើឲ្យការផ្លាស់ប្តូររបស់ Property មួយ (ឧ. ពេល hover) កើតឡើងបន្តិចម្ដងៗ ជំនួសឲ្យការផ្លាស់ប្តូរភ្លាមៗ។

.button {
  background: blue;
  transition: background 0.3s ease;
}
.button:hover {
  background: darkblue;
}

2. Transform (ការបំប្លែងរូបរាង) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Function	អត្ថន័យ
translate(x, y)	ផ្លាស់ទីតាមអ័ក្ស X និង Y
scale(n)	ពង្រីក/បង្រួញទំហំ
rotate(deg)	បង្វិលតាមមុំដែលកំណត់
skew(deg)	ធ្វើឲ្យឆៀង

3. Animation & @keyframes រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Animation អនុញ្ញាតឲ្យកំណត់ចលនាស្មុគស្មាញច្រើនជំហាន ដោយប្រើ @keyframes កំណត់ស្ថានភាពនីមួយៗតាមភាគរយពេលវេលា។

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.icon {
  animation: bounce 1s infinite;
}

លំហាត់អនុវត្ត

បង្កើតកាតមួយប្រើ Box Model (padding, border, border-radius) និង box-shadow។
ប្រើ Flexbox រៀបចំកាតបី ឲ្យនៅចំកណ្តាលទំព័រ ជាមួយគម្លាតស្មើគ្នា។
ប្រើ Grid បង្កើត Layout ២ ជួរឈរ (Sidebar + Main Content)។
ប្រើ Media Query ធ្វើឲ្យ Layout ផ្លាស់ពី row ទៅ column ពេលអេក្រង់តូចជាង 600px។
បន្ថែម Transition ពេល Hover លើប៊ូតុង ឲ្យប្តូរពណ៌បន្តិចម្ដងៗ។
សាកល្បងប្រើ CSS Variables កំណត់ពណ៌ចម្បងម្ដង ហើយប្រើឡើងវិញលើធាតុច្រើន។

❖ 1. ស្គាល់ដំបូងអំពី CSS

1. CSS គឺជាអ្វី? រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. របៀបភ្ជាប់ CSS ទៅកាន់ HTML រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

3. រចនាសម្ព័ន្ធកូដ CSS (Syntax) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

❖ 2. Selectors ក្នុង CSS

1. Selectors មូលដ្ឋាន រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. Selectors ជាក្រុម និងទំនាក់ទំនង រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

3. Pseudo-class និង Pseudo-element រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

❖ 3. ពណ៌ និង ផ្ទៃខាងក្រោយ (Colors & Backgrounds)

1. របៀបកំណត់តម្លៃពណ៌ រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. Background Properties រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

❖ 4. ការរចនាអក្សរ (Text & Font Styling)

1. Font Properties រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. Text Properties រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

❖ 5. គំរូប្រអប់ CSS (The Box Model)

1. Box Model គឺជាអ្វី? រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. Width, Height & Box-sizing រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

❖ 6. Display និង Position

1. Display Property រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. Position Property រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

❖ 7. Flexbox

1. Flexbox គឺជាអ្វី? រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. Properties របស់ Container (Parent) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

3. Properties របស់ Item (Child) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

❖ 8. CSS Grid

1. Grid គឺជាអ្វី? ខុសពី Flexbox ត្រង់ណា? រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. Properties របស់ Container រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

3. ឯកតា fr និងឧទាហរណ៍ជាក់ស្តែង រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

❖ 9. ខ្នាតវាស់ និង CSS Variables

1. ខ្នាតវាស់ដាច់ខាត (Absolute) និងទាក់ទង (Relative) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. CSS Variables (Custom Properties) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

❖ 10. ការរចនាឆ្លើយតប (Responsive Design)

1. Responsive Design គឺជាអ្វី? រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. Media Queries រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

❖ 11. Transition, Transform & Animation

1. Transition (ចលនារលូន) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

2. Transform (ការបំប្លែងរូបរាង) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

3. Animation & @keyframes រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

លំហាត់អនុវត្ត

3. ឯកតា `fr` និងឧទាហរណ៍ជាក់ស្តែង រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី