មូលដ្ឋានគ្រឹះ CSS

មាតិកា

វិធីបីយ៉ាងក្នុងការបន្ថែម CSS
រចនាសម្ព័ន្ធនៃ Rule
Selector
ការផ្សំ Selector
Pseudo-class
Cascade៖ តើអ្នកណាឈ្នះ?
Inheritance
តុបតែងទំព័រ Profile
សាកល្បងដោយខ្លួនឯង

1. វិធីបីយ៉ាងក្នុងការបន្ថែម CSS

នៅក្នុងជំពូកទី 1 អ្នកបានបន្ថែម CSS នៅក្នុង element <style>។ CSS អាចស្ថិតនៅបីកន្លែង៖

វិធី	រូបរាង	ពេលណាគួរប្រើ
Inline	`<p style="color: red">`	ស្ទើរតែមិនគួរប្រើ — វាប្រើឡើងវិញមិនបាន ហើយពិបាក override
Internal	`<style>` នៅក្នុង `<head>`	ការពិសោធន៍រហ័ស, demo ដែលមាន file តែមួយ
External	`<link rel="stylesheet" href="style.css">`	ស្ទើរតែគ្រប់ពេល

External stylesheet ឈ្នះ ព្រោះ file តែមួយតុបតែងបានគ្រប់ទំព័រ browser cache វាទុក (ដូចក្នុង Caching, CDN និងល្បឿន) ហើយ HTML របស់អ្នកនៅតែផ្តោតលើរចនាសម្ព័ន្ធតែប៉ុណ្ណោះ។ សូមរៀបចំវាឥឡូវនេះ៖ បង្កើត style.css នៅក្នុង folder គម្រោង ផ្លាស់ទី rule ក្នុង <style> របស់អ្នកចូលទៅក្នុងវា ហើយភ្ជាប់វានៅក្នុង <head> នៃ គ្រប់ ទំព័រ៖

<link rel="stylesheet" href="style.css">

2. រចនាសម្ព័ន្ធនៃ Rule

p {
  color: #333333;
  line-height: 1.6;
}

Selector (p) — rule នេះអនុវត្តលើ element មួយណា។
Declaration block ({ … }) — declaration មួយ ឬច្រើន។
Declaration (color: #333333;) — property មួយ និង value របស់វា ដែលបំបែកដោយសញ្ញា colon និងបញ្ចប់ដោយ semicolon។

ដកឃ្លាមិនសំខាន់ទេ ប៉ុន្តែទម្លាប់គឺសរសេរ declaration មួយក្នុងមួយបន្ទាត់។ ប្រសិនបើខ្វះ semicolon ឬ colon browser នឹងបោះបង់ declaration នោះ ហើយពេលខ្លះរួមទាំង declaration បន្ទាប់ផងដែរ។ ប្រសិនបើ style មិនដំណើរការ សូមពិនិត្យសញ្ញាវណ្ណយុត្តិ រួចពិនិត្យ DevTools៖ declaration ដែលមិនត្រឹមត្រូវនឹងមានបន្ទាត់គូសកាត់។

Comment នៅក្នុង CSS ប្រើ /* … */៖

/* Page-wide defaults */

3. Selector

Selector ប្រាប់ថាត្រូវតុបតែងអ្វី។ ប្រភេទមូលដ្ឋាន៖

Selector	ត្រូវនឹង	ឧទាហរណ៍
Type	គ្រប់ element ដែលមានឈ្មោះនោះ	`h2 { … }`
Class	element ដែលមាន class នោះ	`.card { … }`
ID	element តែមួយដែលមាន id នោះ	`#contact { … }`
Universal	អ្វីៗទាំងអស់	`* { … }`
Attribute	element ដែលមាន attribute មួយ	`a[target="_blank"] { … }`

Class គឺជាឧបករណ៍ធ្វើការសំខាន់។ នៅក្នុង HTML អ្នកបន្ថែម class="…" — element មួយអាចមានច្រើន class ដោយបំបែកដោយដកឃ្លា — ហើយនៅក្នុង CSS អ្នកកំណត់គោលដៅវាដោយសញ្ញាចុច៖

<article class="card featured">…</article>

.card {
  border: 1px solid #d6d3d1;
  padding: 16px;
}

.featured {
  border-color: #b45309;
}

សូមប្រើ class ជាជាង ID សម្រាប់ការតុបតែង។ ID មានតែមួយគត់ ដូច្នេះប្រើឡើងវិញមិនបាន ហើយដូចដែលផ្នែកទី 6 បង្ហាញ ពួកវាពិបាក override ជាង។ សូមទុក ID សម្រាប់ fragment link និង form label។ សូមជ្រើសរើសឈ្មោះ class ដែលពណ៌នាថា វាជាអ្វី (.card, .nav-link) មិនមែនថាវាមើលទៅយ៉ាងណា (.red-box) ព្រោះរូបរាងអាចប្តូរបាន។

អ្នកអាចដាក់ selector ជាក្រុមដោយសញ្ញាក្បៀស ដើម្បីចែក rule តែមួយ៖

h1, h2, h3 {
  font-family: Georgia, serif;
}

4. ការផ្សំ Selector

Combinator កំណត់គោលដៅ element តាមទំនាក់ទំនងរបស់វានៅក្នុង tree៖

Selector	ឈ្មោះ	ត្រូវនឹង
`nav a`	Descendant	`<a>` ណាមួយដែលនៅក្នុង `<nav>` ទោះជ្រៅប៉ុនណា
`ul > li`	Child	`<li>` ដែលជា child ផ្ទាល់ របស់ `<ul>`
`h2 + p`	Adjacent sibling	`<p>` ដែលនៅភ្លាមៗបន្ទាប់ពី `<h2>`
`h2 ~ p`	General sibling	គ្រប់ `<p>` ដែលនៅបន្ទាប់ពី `<h2>` ក្នុង parent តែមួយ
`a.button`	Compound	`<a>` ដែលមាន class `button` ផងដែរ

nav a {
  text-decoration: none;
}

.card > h3 {
  margin-top: 0;
}

សូមរក្សា selector ឲ្យខ្លី។ main section article div p span ដំណើរការបាន ប៉ុន្តែផុយស្រួយ — វានឹងខូចភ្លាមៗពេលអ្នករៀបចំ HTML ឡើងវិញ។ ជាទូទៅ ការដាក់ class មួយលើ element ល្អជាង។

5. Pseudo-class

Pseudo-class ត្រូវនឹង element ក្នុង ស្ថានភាព ជាក់លាក់មួយ។ វាសរសេរដោយសញ្ញា colon តែមួយ៖

Pseudo-class	ពេលណា
`:hover`	ទ្រនិចកណ្តុរនៅលើ element
`:focus`	element មាន keyboard focus
`:focus-visible`	Focus ដែលគួរបង្ហាញ (ជាចម្បងពេលប្រើ keyboard)
`:active`	ពេលកំពុងត្រូវបានចុច
`:first-child`, `:last-child`	ទីតាំងក្នុងចំណោម sibling
`:nth-child(2n)`	child គូទាំងអស់
`:not(.x)`	element ដែលមិនត្រូវនឹង `.x`

a:hover {
  color: #b45309;
}

a:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

li:not(:last-child) {
  margin-bottom: 8px;
}

អ្វីក៏ដោយដែលអ្នកធ្វើជាមួយ :hover អ្នកគួរធ្វើជាមួយ :focus-visible ដែរ ដើម្បីឲ្យអ្នកប្រើ keyboard ទទួលបានអនុភាពដូចគ្នា។ ក៏មាន pseudo-element (colon ពីរ) ដូចជា ::before និង ::after ដែលបន្ថែមមាតិកាដែលបង្កើតឡើង និង ::first-line ផងដែរ។

6. Cascade៖ តើអ្នកណាឈ្នះ?

ចុះបើ rule ពីរកំណត់ property ដូចគ្នា លើ element តែមួយ?

p { color: black; }
.intro { color: green; }

Cascade ជាអ្នកសម្រេច។ នោះគឺជាអក្សរ "C" នៅក្នុង CSS។ Browser ពិចារណាតាមលំដាប់ដូចតទៅ៖

Origin និងសារៈសំខាន់។ style របស់អ្នកឈ្នះ style លំនាំដើមរបស់ browser។ (declaration ដែលដាក់ !important ឈ្នះស្ទើរតែអ្វីៗទាំងអស់ — សូមជៀសវាង។)
Specificity។ selector ដែលជាក់លាក់ជាងឈ្នះ selector ដែលជាក់លាក់តិចជាង។
លំដាប់ក្នុង source។ ប្រសិនបើអ្វីៗផ្សេងទៀតស្មើគ្នា rule ចុងក្រោយឈ្នះ។

Specificity គឺជាពិន្ទុដែលគណនាពីផ្នែកនៃ selector ហើយប្រៀបធៀបពីឆ្វេងទៅស្តាំ៖

ផ្នែកនៃ selector	ទម្ងន់
Inline `style=""`	ខ្ពស់បំផុត
ID (`#contact`)	ធ្ងន់
Class, attribute, pseudo-class (`.card`, `:hover`)	មធ្យម
Type, pseudo-element (`p`, `::before`)	ស្រាល

ដូច្នេះ .intro (class មួយ) ឈ្នះ p (type មួយ) ទោះអ្នកសរសេរតាមលំដាប់ណាក៏ដោយ ហើយ #contact p ឈ្នះ .intro។

ដំបូន្មានជាក់ស្តែង៖

សរសេរ selector ឲ្យរាបស្មើ និងផ្អែកលើ class។ ពេលនោះ specificity កម្រជាបញ្ហា ហើយលំដាប់ក្នុង source ធ្វើការងារជំនួស។
ពេល rule មួយមិនដំណើរការ សូម បើក DevTools។ ផ្ទាំង Styles បង្ហាញ declaration ដែលចាញ់ដោយមានបន្ទាត់គូសកាត់ និងប្រាប់ថា rule មួយណាឈ្នះពួកវា។
កុំប្រើ !important។ វាដំណើរការរហូតដល់ពេលអ្នកត្រូវ override វា ពេលនោះអ្នកត្រូវការមួយទៀត។

7. Inheritance

Property ខ្លះ ផ្ទេរចុះក្រោម ពី parent ទៅ child ដោយស្វ័យប្រវត្តិ។ បើកំណត់ color លើ <body> គ្រប់ paragraph នៅខាងក្នុងនឹងទទួលបានពណ៌នោះ លុះត្រាតែមានអ្វីមួយ override វា៖

body {
  font-family: system-ui, sans-serif;
  color: #292524;
}

Property អក្សរ — color, font-family, font-size, line-height, text-align — ត្រូវបាន inherit។ Property នៃ box — margin, padding, border, background — មិនត្រូវបាន inherit ទេ ដែលសមហេតុផល៖ border លើ container មិនគួរគូស border ជុំវិញគ្រប់ child ទេ។

ការកំណត់ typography មូលដ្ឋានលើ body តែម្តងគឺជាទម្លាប់សំខាន់។ វាធ្វើឲ្យអ្នកសរសេរ CSS តិចជាងច្រើន។

អ្នកអាចគ្រប់គ្រង inheritance ដោយផ្ទាល់ជាមួយ value ទាំងនេះ៖

inherit — យកតម្លៃរបស់ parent។
initial — កំណត់ឡើងវិញទៅតម្លៃលំនាំដើមរបស់ property។
unset — inherit ប្រសិនបើជា property ដែល inherit បាន បើមិនដូច្នោះទេ កំណត់ឡើងវិញ។

8. តុបតែងទំព័រ Profile

សូមអនុវត្តអ្វីដែលអ្នកបានរៀន។ បន្ថែមកូដនេះទៅក្នុង style.css៖

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #292524;
  background-color: #fafaf9;
}

a {
  color: #b45309;
}

a:hover {
  color: #7c2d12;
}

a:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

nav ul {
  list-style: none;
}

nav a {
  text-decoration: none;
  font-weight: 600;
}

.card {
  border: 1px solid #d6d3d1;
  background-color: #ffffff;
}

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #d6d3d1;
}

បន្ទាប់មកបន្ថែម class="card" ទៅ <article> នៃគម្រោងនីមួយៗ។ ការដកឃ្លា (spacing) ខ្វះដោយចេតនា៖ ជំពូកបន្ទាប់នឹងពន្យល់។

9. សាកល្បងដោយខ្លួនឯង

ភ្ជាប់ stylesheet។ ពិនិត្យថាទំព័រទាំងពីរប្រើ style.css។ កែពណ៌មួយ ហើយមើលទំព័រទាំងពីរផ្លាស់ប្តូរ។
ការប្រកួត specificity។ បន្ថែម .card h3 { color: green; } និង h3 { color: red; }។ មួយណាឈ្នះ? ប្តូរលំដាប់ — តើវាផ្លាស់ប្តូរទេ? ពិនិត្យ DevTools ដើម្បីមើល rule ដែលមានបន្ទាត់គូសកាត់។
អនុវត្ត selector។ សរសេរ rule មួយសម្រាប់នីមួយៗ៖ គ្រប់ <a> នៅក្នុង <footer>, គ្រប់ <li> ដែលជា child ផ្ទាល់នៃ nav ul និងគ្រប់ link ខាងក្រៅ (a[href^="https"])។
Hover និង focus។ តុបតែង button:hover និង button:focus-visible លើ form។ សាកល្បងជាមួយកណ្តុរ និងជាមួយ key Tab។
លេងជាមួយ inheritance។ ផ្លាស់ទី color ពី body ទៅ main — តើអ្វីឈប់មានពណ៌? ហេតុអ្វី?

បន្ទាប់ទៀត គឺគំនិតសំខាន់បំផុតនៅក្នុង CSS៖ រាល់ element គឺជា box ហើយការយល់ពី box នោះអនុញ្ញាតឲ្យអ្នកគ្រប់គ្រងការដកឃ្លា និងទំហំ។

មូលដ្ឋានគ្រឹះ CSS

ទិញកាហ្វេជូនខ្ញុំ