CSS: สี ขนาด และการจัดวาง
ใช้ใน Challenge Day 1
CSS (Cascading Style Sheets) บอกเบราว์เซอร์ว่าแต่ละส่วนของ HTML หน้าตาเป็นอย่างไร: สี ฟอนต์ ระยะห่าง และการจัดเรียงบนจอทุกขนาด
At a glance
| Item | Details |
|---|---|
| ไฟล์ | style.css เชื่อมกับ HTML ด้วย <link rel="stylesheet" href="style.css" /> |
| หน่วยพื้นฐาน | กฎ (rule): selector + property: value |
| จัดวาง | Flexbox และ Grid |
| รองรับมือถือ | @media (responsive) |
| ลองแก้สด | Inspect → แท็บ Styles แก้ค่าแล้วเห็นผลทันที |
Syntax
กฎ 1 ข้อ: selector เลือกว่าจะแต่งอะไร แล้วใส่ property: value ในปีกกา
/* selector { property: value; } */
body {
font-family: system-ui, sans-serif;
margin: 0;
background: #fafafa;
}| Selector | เลือกอะไร | ตัวอย่าง |
|---|---|---|
p | ทุกแท็ก <p> | p { color: gray; } |
.card | ทุก element ที่มี class="card" | .card { padding: 16px; } |
#name | element ที่มี id="name" (มีได้ตัวเดียว) | #name { color: red; } |
header img | img ที่อยู่ใน header | header img { width: 96px; } |
a:hover | ตอนเอาเมาส์ชี้ | a:hover { text-decoration: underline; } |
Box model
ทุก element คือกล่อง: content อยู่ในสุด ล้อมด้วย padding (ระยะใน) border (เส้นขอบ) และ margin (ระยะนอก)
.card {
padding: 16px; /* ระยะจากขอบถึงเนื้อหา */
border: 1px solid #eaeaea; /* เส้นขอบ */
border-radius: 12px; /* มุมโค้ง */
margin-bottom: 24px; /* ระยะห่างจากกล่องถัดไป */
}Layout: Flexbox
Flexbox จัดของในกล่องให้เรียงเป็นแถวหรือคอลัมน์ และจัดกึ่งกลางได้ง่าย
header {
display: flex;
flex-direction: column; /* row = เรียงแนวนอน, column = แนวตั้ง */
align-items: center; /* จัดกึ่งกลางแกนขวาง */
justify-content: center; /* จัดกึ่งกลางแกนหลัก */
gap: 12px; /* ระยะห่างระหว่างลูก */
}Responsive
เริ่มเขียนสำหรับจอมือถือก่อน แล้วใช้ @media เปลี่ยนเมื่อจอกว้างขึ้น
.projects { display: grid; gap: 16px; }
@media (min-width: 768px) {
.projects { grid-template-columns: 1fr 1fr; } /* จอใหญ่: 2 คอลัมน์ */
}| Property | ใช้ทำอะไร |
|---|---|
color / background | สีตัวอักษร / สีพื้น |
font-size / font-weight | ขนาด / ความหนาตัวอักษร |
width / max-width | ความกว้าง / กว้างสุดไม่เกิน |
display: grid | จัดเป็นตาราง |
ฝึกต่อ
เว็บสำหรับลงมือทำ
ลงมือทำ · w3schools.comW3Schools CSS selector, box model, flexboxลงมือทำ · flexboxfroggy.comFlexbox Froggy เกมฝึก Flexbox 24 ด่านลงมือทำ · flukeout.github.ioCSS Diner เกมฝึก selectorเอกสาร · developer.mozilla.orgMDN: CSS เอกสารอ้างอิงฉบับเต็ม
วิดีโอเรียนเอง
Next steps
- JavaScript: ทำให้หน้าเว็บตอบสนองการกด
CS ChallengeLast updated Oct 2026