My Terrarium
``` **สิ่งที่โค้ดนี้ทำ:** - **ใช้** สีแดงโดยตรงกับองค์ประกอบ `` ผ่านสไตล์แบบ inline
- **ใช้** แอตทริบิวต์ `style` เพื่อฝัง CSS ลงไปใน HTML โดยตรง
- **สร้าง** กฎสไตล์ที่มีลำดับความสำคัญสูงสุดสำหรับองค์ประกอบนี้
ถัดไป เพิ่มกฎนี้ในไฟล์ `style.css` ของคุณ:
```css
h1 {
color: blue;
}
```
**ในโค้ดข้างต้นเราได้:**
- **กำหนด** กฎ CSS ที่กำหนดเป้าหมายทุกองค์ประกอบ ``
- **ตั้งค่า** สีข้อความเป็นสีน้ำเงินโดยใช้สไตล์ชีตภายนอก
- **สร้าง** กฎที่มีลำดับความสำคัญต่ำกว่าแบบ inline
✅ **ตรวจสอบความเข้าใจ**: สีไหนจะแสดงในเว็บแอปของคุณ? ทำไมสีนี้ถึงได้แสดง? คุณคิดถึงสถานการณ์ไหนบ้างที่ต้องการเขียนทับสไตล์ก่อนหน้า?
```mermaid
flowchart TD
A["เบราว์เซอร์พบองค์ประกอบ h1"] --> B{"ตรวจสอบสไตล์แบบอินไลน์"}
B -->|พบ| C["style='color: red'"]
B -->|ไม่มี| D{"ตรวจสอบกฎของ ID"}
C --> E["ใช้สีแดง (1000 คะแนน)"]
D -->|พบ| F["#heading { color: green }"]
D -->|ไม่มี| G{"ตรวจสอบกฎของคลาส"}
F --> H["ใช้สีเขียว (100 คะแนน)"]
G -->|พบ| I[".title { color: blue }"]
G -->|ไม่มี| J{"ตรวจสอบกฎขององค์ประกอบ"}
I --> K["ใช้สีน้ำเงิน (10 คะแนน)"]
J -->|พบ| L["h1 { color: purple }"]
J -->|ไม่มี| M["ใช้ค่าเริ่มต้นของเบราว์เซอร์"]
L --> N["ใช้สีม่วง (1 คะแนน)"]
style C fill:#ff6b6b
style F fill:#51cf66
style I fill:#339af0
style L fill:#9775fa
```
> 💡 **ลำดับความสำคัญของ CSS (จากสูงไปต่ำ):**
> 1. **สไตล์แบบ inline** (แอตทริบิวต์ style)
> 2. **ไอดี** (#myId)
> 3. **คลาส** (.myClass) และแอตทริบิวต์
> 4. **ตัวเลือกองค์ประกอบ** (h1, div, p)
> 5. **ค่าปริยายของบราวเซอร์**
## การสืบทอด (Inheritance) ของ CSS ในการใช้งาน
CSS inheritance ทำงานเหมือนพันธุกรรม - องค์ประกอบจะสืบทอดคุณสมบัติบางอย่างจากองค์ประกอบพ่อแม่ ถ้าคุณตั้งค่าฟอนต์บนองค์ประกอบ body ทุกข้อความข้างในจะใช้ฟอนต์นั้นโดยอัตโนมัติ เหมือนกับว่าใบหน้ารูปขากรรไกรโดดเด่นของตระกูล Habsburg ปรากฏผ่านหลายชั่วคนโดยไม่ได้ถูกกำหนดเฉพาะสำหรับแต่ละคน
อย่างไรก็ตาม ไม่ใช่ทุกอย่างที่จะถูกสืบทอด สไตล์ข้อความอย่างฟอนต์และสีจะสืบทอด แต่คุณสมบัติเลย์เอาต์ เช่น margin และ border จะไม่สืบทอด เหมือนเด็กๆ อาจสืบทอดลักษณะทางกายภาพ แต่ไม่ได้สืบทอดรสนิยมแฟชั่นของพ่อแม่
### สังเกตการสืบทอดฟอนต์
มาลองดู inheritance ในการทำงานโดยตั้งค่าฟอนต์แฟมิลี่บนองค์ประกอบ ``:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
**แยกย่อยสิ่งที่เกิดขึ้นที่นี่:**
- **ตั้งค่า** ฟอนต์แฟมิลี่สำหรับทั้งหน้าโดยกำหนดที่ ``
- **ใช้** ฟอนต์สแตกที่มีตัวเลือก fallback เพื่อความเข้ากันได้กับบราวเซอร์ต่างๆ
- **ใช้** ฟอนต์ระบบสมัยใหม่ที่ดูดีในระบบปฏิบัติการต่างกัน
- **รับรองว่า** ทุกองค์ประกอบลูกจะสืบทอดฟอนต์นี้ ยกเว้นถูกเขียนทับเฉพาะเจาะจง
เปิดเครื่องมือสำหรับนักพัฒนาในบราวเซอร์ของคุณ (F12) ไปที่แท็บ Elements แล้วตรวจสอบองค์ประกอบ `` คุณจะเห็นว่ามันได้รับการสืบทอดฟอนต์จาก body:
✅ **เวลาทดลอง**: ลองตั้งค่าคุณสมบัติที่สืบทอดได้อื่นๆ บน `` เช่น `color`, `line-height`, หรือ `text-align` ดูสิว่า heading และองค์ประกอบอื่นๆ จะเปลี่ยนอย่างไร
> 📝 **คุณสมบัติที่สืบทอดได้ประกอบด้วย**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **คุณสมบัติที่ไม่สืบทอดได้ประกอบด้วย**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **ตรวจสอบความเข้าใจ**
**ความเข้าใจพื้นฐาน CSS**: ก่อนจะไปถึง selectors ให้แน่ใจว่าคุณสามารถ:
- ✅ อธิบายความแตกต่างระหว่าง cascade กับ inheritance ได้
- ✅ ทำนายได้ว่า สไตล์ไหนจะชนะในกรณีขัดแย้งของ specificity
- ✅ ระบุได้ว่าคุณสมบัติไหนถูกสืบทอดจากองค์ประกอบพ่อแม่
- ✅ เชื่อมต่อไฟล์ CSS กับ HTML ได้อย่างถูกต้อง
**ทดสอบด่วน**: ถ้าคุณมีสไตล์เหล่านี้ สีของ `` ที่อยู่ภายใน `` จะเป็นสีอะไร?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*คำตอบ: สีแดง (element selector เล็งตรงที่ h1)*
## ชำนาญการใช้ CSS Selectors
CSS selectors คือวิธีที่คุณกำหนดเป้าหมายองค์ประกอบเฉพาะเพื่อกำหนดสไตล์ เหมือนกับการบอกทิศทางที่เจาะจง - แทนที่จะบอกว่า "บ้าน" คุณอาจจะบอกว่า "บ้านสีฟ้าที่มีประตูสีแดงบนถนน Maple"
CSS มีหลายวิธีที่จะระบุเป้าหมายอย่างเฉพาะเจาะจง และการเลือก selector ที่เหมาะสมก็เหมือนกับการเลือกเครื่องมือที่ถูกต้องสำหรับงาน บางครั้งคุณต้องการสไตล์ประตูทุกบานในย่านนี้ และบางครั้งแค่ประตูเดียวเท่านั้น
### Element Selectors (แท็ก)
Element selectors เล็งไปที่องค์ประกอบ HTML ตามชื่อแท็ก เหมาะสำหรับการตั้งค่าสไตล์พื้นฐานที่ใช้ทั่วหน้า:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**เข้าใจสไตล์เหล่านี้ว่า:**
- **ตั้งค่า** Typography ที่สม่ำเสมอทั่วทั้งหน้าโดยใช้ตัวเลือก `body`
- **ลบ** margin และ padding ของบราวเซอร์ที่ตั้งไว้โดยปริยายเพื่อควบคุมได้ดีขึ้น
- **กำหนดสไตล์** ให้กับทุกองค์ประกอบหัวเรื่องด้วยสี การจัดตำแหน่ง และระยะห่าง
- **ใช้** หน่วย `rem` เพื่อขนาดฟอนต์ที่ปรับขยายได้และเข้าถึงได้ง่าย
แม้ว่า element selectors จะเหมาะกับการสไตล์ทั่วไป แต่คุณต้องการ selectors ที่เฉพาะเจาะจงมากขึ้นเพื่อสไตล์ชิ้นส่วนแต่ละชิ้น เช่น ต้นไม้ใน Terrarium ของคุณ
### ID Selectors สำหรับองค์ประกอบเฉพาะ
ID selectors ใช้เครื่องหมาย `#` และเล็งไปที่องค์ประกอบที่มีแอตทริบิวต์ `id` เฉพาะเจาะจง เนื่องจากไอดีต้องไม่ซ้ำกันในหน้า จึงเหมาะสำหรับการสไตล์องค์ประกอบพิเศษเฉพาะ เช่น ภาชนะตนนไม้ฝั่งซ้ายและขวาของเรา
มาสร้างสไตล์สำหรับคอนเทนเนอร์ด้านข้างของ Terrarium ที่จะวางต้นไม้:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**โค้ดนี้ทำอะไรได้บ้าง:**
- **จัดวาง** คอนเทนเนอร์ที่ขอบซ้ายและขวาสุดโดยใช้ตำแหน่ง `absolute`
- **ใช้** หน่วย `vh` (ความสูงของหน้าจอ) เพื่อให้ความสูงตอบสนองตามขนาดหน้าจอ
- **ใช้** `box-sizing: border-box` เพื่อให้ padding รวมอยู่ในความกว้างทั้งหมด
- **ตัด** หน่วย `px` ออกจากค่าเป็นศูนย์เพื่อให้โค้ดดูสะอาดขึ้น
- **กำหนด** สีพื้นหลังที่อ่อนโยน เพื่อความสบายตากว่าการใช้สีเทาจัด
✅ **ความท้าทายเรื่องคุณภาพโค้ด**: สังเกตว่าภาษา CSS นี้ละเมิดหลักการ DRY (อย่าทำซ้ำตัวเอง) คุณสามารถปรับปรุงโค้ดนี้โดยใช้ทั้ง ID และคลาสได้หรือไม่?
**วิธีการปรับปรุง:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Class Selectors สำหรับสไตล์ที่นำกลับมาใช้ได้
Class selectors ใช้สัญลักษณ์ `.` และเหมาะกับกรณีที่ต้องการใช้สไตล์เดียวกันกับองค์ประกอบหลายชิ้น ต่างจากไอดีที่ไม่ซ้ำกัน คลาสสามารถใช้ซ้ำใน HTML ได้ ทำให้เหมาะกับแพตเทิร์นการสไตล์ที่สม่ำเสมอ
ใน Terrarium ของเรา แต่ละต้นไม้ต้องการสไตล์คล้ายกันแต่ต้องการตำแหน่งที่แตกต่าง เราจะใช้คลาสสำหรับสไตล์ที่ใช้ร่วมกัน และไอดีสำหรับตำแหน่งเฉพาะ
**นี่คือโครงสร้าง HTML ของแต่ละต้นไม้:**
```html
```
**อธิบายองค์ประกอบหลัก:**
- **ใช้** `class="plant-holder"` สำหรับสไตล์ภาชนะที่สอดคล้องกันทั่วทุกต้นไม้
- **ใช้** `class="plant"` สำหรับการสไตล์ภาพและพฤติกรรมร่วมกัน
- **มี** `id="plant1"` เฉพาะเพื่อการตั้งตำแหน่งและการโต้ตอบกับ JavaScript
- **มี** ข้อความ alt ที่อธิบายสำหรับการเข้าถึงผู้ใช้ที่ใช้ screen reader
ตอนนี้เพิ่มสไตล์เหล่านี้ในไฟล์ `style.css` ของคุณ:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**แยกย่อยสไตล์เหล่านี้:**
- **สร้าง** ตำแหน่งแบบ relative ให้กับ plant-holder เพื่อกำหนด context การจัดตำแหน่ง
- **ตั้ง** ความสูง plant-holder แต่ละอันที่ 13% เพื่อให้ต้นไม้ทั้งหมดพอดีแนวตั้งโดยไม่ต้องเลื่อน
- **เลื่อน** holder ไปทางซ้ายเล็กน้อยเพื่อจัดตำแหน่งต้นไม้ให้อยู่กึ่งกลางในภาชนะ
- **อนุญาต** ให้ต้นไม้ยืดขนาดตามหน้าจอด้วย `max-width` และ `max-height`
- **ใช้** `z-index` เพื่อให้ต้นไม้ซ้อนอยู่เหนือองค์ประกอบอื่นใน Terrarium
- **เพิ่ม** เอฟเฟกต์ hover เล็กๆ ด้วยการเปลี่ยนแปลง CSS ที่นุ่มนวลเพื่อการโต้ตอบที่ดีขึ้น
✅ **คิดวิเคราะห์**: ทำไมเราถึงต้องใช้ทั้ง `.plant-holder` และ `.plant`? จะเกิดอะไรขึ้นถ้าเราใช้แค่ตัวเดียว?
> 💡 **แพตเทิร์นการออกแบบ**: ภาชนะ (`.plant-holder`) ควบคุมเลย์เอาต์และการจัดตำแหน่ง ในขณะที่เนื้อหา (`.plant`) ควบคุมรูปลักษณ์และการปรับขนาด การแยกหน้าที่แบบนี้ทำให้โค้ดดูแลรักษาและปรับเปลี่ยนได้ง่ายขึ้น
## ทำความเข้าใจการจัดตำแหน่งของ CSS
การจัดตำแหน่ง CSS ก็เหมือนผู้กำกับเวทีละคร - คุณกำหนดตำแหน่งให้นักแสดงทุกคนยืนและเคลื่อนที่ไปรอบๆ เวที นักแสดงบางคนทำตามการจัดวางปกติ ในขณะที่บางคนต้องตำแหน่งเฉพาะเพื่อเอฟเฟกต์ที่น่าสนใจ
เมื่อคุณเข้าใจการจัดตำแหน่งแล้ว ปัญหาเลย์เอาต์หลายอย่างก็จะจัดการได้ง่าย ต้องการแถบนำทางที่อยู่บนสุดแม้ผู้ใช้เลื่อนหน้าจอ? การจัดตำแหน่งช่วยได้ ต้องการ tooltip ที่แสดงในตำแหน่งเฉพาะ? นั่นก็การจัดตำแหน่ง
### ค่าการจัดตำแหน่งทั้งห้า
```mermaid
quadrantChart
title กลยุทธ์ตำแหน่ง CSS
x-axis การไหลของเอกสาร --> เอาออกจากการไหล
y-axis ตำแหน่งคงที่ --> ควบคุมอย่างแม่นยำ
quadrant-1 สมบูรณ์แบบ
quadrant-2 ติดแน่น
quadrant-3 คงที่
quadrant-4 แปะแน่น
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| ค่าการจัดตำแหน่ง | พฤติกรรม | กรณีใช้งาน |
|----------------|----------|----------|
| `static` | ไหลตามปกติ ไม่สนใจ top/left/right/bottom | เลย์เอาต์เอกสารตามปกติ |
| `relative` | จัดตำแหน่งสัมพันธ์กับตำแหน่งปกติ | ปรับแต่งเล็กน้อย สร้าง context การจัดตำแหน่ง |
| `absolute` | จัดตำแหน่งสัมพันธ์กับบรรพบุรุษที่ถูกจัดตำแหน่ง | วางตำแหน่งแม่นยำ ซ้อนทับ |
| `fixed` | จัดตำแหน่งสัมพันธ์กับ viewport | แถบนำทาง ส่วนลอย |
| `sticky` | สลับระหว่าง relative และ fixed ตามการเลื่อน | หัวเรื่องที่ยึดติดขณะเลื่อน |
### การจัดตำแหน่งใน Terrarium ของเรา
Terrarium ของเราใช้การผสมผสานของชนิดการจัดตำแหน่งอย่างเป็นกลยุทธ์เพื่อสร้างเลย์เอาต์ที่ต้องการ:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**เข้าใจกลยุทธ์การจัดตำแหน่ง:**
- **คอนเทนเนอร์ตำแหน่ง absolute** ถูกดึงออกจากฟลูว์ปกติของเอกสารและติดกับขอบหน้าจอ
- **plant-holder ตำแหน่ง relative** สร้าง context การจัดตำแหน่งในขณะที่ยังอยู่ในฟลูว์เอกสาร
- **ต้นไม้ตำแหน่ง absolute** สามารถวางตำแหน่งได้อย่างแม่นยำภายใน plant-holder ที่ relative
- **การผสมผสานนี้** ช่วยให้ต้นไม้ซ้อนแนวตั้งได้ในขณะที่ยังจัดตำแหน่งได้แต่ละต้นอย่างอิสระ
> 🎯 **ทำไมจึงสำคัญ**: องค์ประกอบ `plant` ต้องการตำแหน่งแบบ absolute เพื่อให้สามารถลากย้ายได้ในบทเรียนถัดไป การจัดตำแหน่งแบบ absolute จะดึงออกจากเลย์เอาต์ปกติ ทำให้การลากวางทำงานได้
✅ **เวลาทดลอง**: ลองเปลี่ยนค่าการจัดตำแหน่งและสังเกตผลลัพธ์:
- จะเกิดอะไรขึ้นถ้าคุณเปลี่ยน `.container` จาก `absolute` เป็น `relative`?
- เลย์เอาต์จะเปลี่ยนอย่างไรหาก `.plant-holder` ใช้ `absolute` แทน `relative`?
- จะเกิดอะไรขึ้นเมื่อคุณเปลี่ยน `.plant` เป็นตำแหน่ง `relative`?
### 🔄 **การตรวจสอบความเข้าใจ**
**ความชำนาญเกี่ยวกับ CSS Positioning**: หยุดเพื่อตรวจสอบความเข้าใจของคุณ:
- ✅ คุณอธิบายได้ไหมว่าทำไมต้นไม้จึงต้องใช้ตำแหน่งแบบ absolute สำหรับการลากและวาง?
- ✅ คุณเข้าใจไหมว่าภาชนะแบบ relative สร้างบริบทการจัดตำแหน่งอย่างไร?
- ✅ ทำไมกล่องด้านข้างจึงใช้ตำแหน่ง absolute?
- ✅ จะเกิดอะไรขึ้นถ้าคุณลบคำประกาศตำแหน่งทั้งหมดออกไป?
**การเชื่อมโยงกับโลกจริง**: คิดว่า CSS positioning คล้ายกับเลย์เอาต์ในโลกจริงอย่างไร:
- **Static**: หนังสือบนชั้นวาง (ลำดับธรรมชาติ)
- **Relative**: ขยับหนังสือเล็กน้อยแต่ยังคงตำแหน่งไว้
- **Absolute**: การวางที่คั่นหนังสือที่หน้าหนังสือที่แน่นอน
- **Fixed**: โน้ตเหนียวที่ยังคงมองเห็นได้ขณะที่คุณพลิกหน้า
## การสร้างเทอราเรียมด้วย CSS
ตอนนี้เราจะสร้างโหลแก้วโดยใช้ CSS เท่านั้น – ไม่ต้องใช้รูปภาพหรือซอฟต์แวร์กราฟิก
การสร้างแก้วที่ดูสมจริง, เงา และเอฟเฟกต์ลึกซึ้งโดยใช้ตำแหน่งและความโปร่งใสแสดงถึงศักยภาพทางภาพของ CSS เทคนิคนี้สะท้อนให้เห็นถึงวิธีที่สถาปนิกในยุค Bauhaus ใช้รูปทรงเรขาคณิตง่ายๆ เพื่อสร้างโครงสร้างที่ซับซ้อนและงดงาม เมื่อคุณเข้าใจหลักการเหล่านี้แล้ว คุณจะรู้เทคนิค CSS ที่อยู่เบื้องหลังการออกแบบเว็บหลายๆ แบบ
```mermaid
flowchart LR
A[ฝาปิดโหล] --> E[เทอร์ราเรียมสมบูรณ์]
B[ผนังโหล] --> E
C[ชั้นดิน] --> E
D[ก้นโหล] --> E
F[เอฟเฟกต์กระจก] --> E
A1["ความกว้าง 50%
ความสูง 5%
ตำแหน่งบนสุด"] --> A
B1["ความกว้าง 60%
ความสูง 80%
มุมโค้งมน
ความทึบแสง 0.5"] --> B
C1["ความกว้าง 60%
ความสูง 5%
สีน้ำตาลเข้ม
ชั้นล่าง"] --> C
D1["ความกว้าง 50%
ความสูง 1%
ตำแหน่งล่างสุด"] --> D
F1["เงาเบาๆ
ความโปร่งใส
ชั้นซ้อน Z-index"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### การสร้างส่วนประกอบโหลแก้ว
เรามาสร้างโหลเทอราเรียมทีละชิ้น ทุกชิ้นใช้ตำแหน่ง absolute และการกำหนดขนาดเป็นเปอร์เซ็นต์เพื่อรองรับการแสดงผลที่ตอบสนอง:
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**การทำความเข้าใจการสร้างเทอราเรียม:**
- **ใช้** ขนาดที่ตั้งเป็นเปอร์เซ็นต์เพื่อให้ขยายได้ตามขนาดหน้าจอ
- **จัดตำแหน่ง** องค์ประกอบแบบ absolute เพื่อวางซ้อนและจัดแนวได้อย่างแม่นยำ
- **ใช้** ค่า opacity ต่าง ๆ เพื่อสร้างเอฟเฟกต์ความโปร่งใสของแก้ว
- **ตั้งค่า** `z-index` เพื่อการวางซ้อนให้ต้นไม้ปรากฏภายในโหล
- **เพิ่ม** เงากล่องและความโค้งของขอบที่ละเอียดเพื่อให้ดูสมจริงมากขึ้น
### การออกแบบตอบสนองด้วยเปอร์เซ็นต์
สังเกตว่าทุกขนาดใช้เปอร์เซ็นต์แทนค่าพิกเซลที่ตายตัว:
**เหตุผลที่สำคัญ:**
- **ทำให้** เทอราเรียมปรับขนาดตามสัดส่วนบนหน้าจอทุกขนาด
- **รักษา** ความสัมพันธ์ทางภาพระหว่างส่วนประกอบโหลแก้ว
- **ให้** ประสบการณ์ที่สอดคล้องกันตั้งแต่โทรศัพท์มือถือจนถึงจอมอนิเตอร์ใหญ่
- **อนุญาต** ให้การออกแบบปรับเปลี่ยนได้โดยไม่ทำให้เลย์เอาต์เสียหาย
### หน่วย CSS ในการปฏิบัติ
เราใช้หน่วย `rem` สำหรับ border-radius ซึ่งปรับตามขนาดฟอนต์ราก นี่ช่วยสร้างการออกแบบที่เข้าถึงง่ายขึ้นและเคารพการตั้งค่าฟอนต์ของผู้ใช้ เรียนรู้เพิ่มเติมเกี่ยวกับ [หน่วยสัมพัทธ์ CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ในข้อกำหนดอย่างเป็นทางการ
✅ **ทดลองปรับแต่งด้วยสายตา**: ลองแก้ไขค่าต่างๆ และสังเกตผลลัพธ์:
- เปลี่ยนความทึบของโหลจาก 0.5 เป็น 0.8 – สิ่งนี้มีผลต่อการปรากฏของแก้วอย่างไร?
- ปรับสีดินจาก `#3a241d` เป็น `#8B4513` – มีผลกระทบทางภาพอย่างไร?
- เปลี่ยน `z-index` ของดินเป็น 2 – จะเกิดอะไรขึ้นกับการวางซ้อน?
### 🔄 **การตรวจสอบความเข้าใจ**
**ความเข้าใจการออกแบบด้วย CSS**: ยืนยันความเข้าใจด้านการออกแบบด้วย CSS:
- ✅ ขนาดแบบเปอร์เซ็นต์ช่วยสร้างการออกแบบตอบสนองได้อย่างไร?
- ✅ ทำไม opacity ถึงช่วยสร้างเอฟเฟกต์ความโปร่งใสของแก้ว?
- ✅ บทบาทของ z-index ในการวางซ้อนองค์ประกอบคืออะไร?
- ✅ ค่าของ border-radius ช่วยสร้างรูปร่างโหลอย่างไร?
**หลักการออกแบบ**: สังเกตว่าเราสร้างภาพซับซ้อนจากรูปทรงง่ายๆ:
1. **สี่เหลี่ยมผืนผ้า** → **สี่เหลี่ยมมุมโค้ง** → **ส่วนประกอบโหล**
2. **สีแบนๆ** → **opacity** → **เอฟเฟกต์แก้ว**
3. **องค์ประกอบเดี่ยว** → **การวางซ้อนเป็นชั้นๆ** → **ลักษณะ 3 มิติ**
---
## ความท้าทาย GitHub Copilot Agent 🚀
ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้ให้สำเร็จ:
**คำอธิบาย:** สร้างอนิเมชัน CSS ให้ต้นไม้ในเทอราเรียมหวิวไปมาช้าๆ เสมือนลมพัดเบาๆ ซึ่งจะช่วยฝึกทักษะการสร้างอนิเมชัน CSS, การแปลงรูป และ keyframes พร้อมเพิ่มความสวยงามให้เทอราเรียมของคุณ
**คำสั่ง:** เพิ่ม keyframe animation CSS เพื่อทำให้ต้นไม้ในเทอราเรียมหวิวช้าๆ ซ้ายขวา สร้างอนิเมชันการโยกที่หมุนต้นไม้เล็กน้อย (2-3 องศา) ซ้ายและขวา ใช้ความยาวเวลา 3-4 วินาที และใช้กับคลาส `.plant` ให้อนิเมชันวนลูปไม่รู้จบและมี easing function เพื่อการเคลื่อนไหวที่เป็นธรรมชาติ
เรียนรู้เพิ่มเติมเกี่ยวกับ [โหมด agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่
## 🚀 ความท้าทาย: การเพิ่มแสงสะท้อนบนแก้ว
พร้อมหรือยังที่จะเพิ่มแสงสะท้อนที่สมจริงบนโหลเทอราเรียม? เทคนิคนี้จะเพิ่มความลึกและความสมจริงให้กับการออกแบบ
คุณจะสร้างไฮไลต์สีขาวหรือสีอ่อนในรูปวงรีเล็กๆ ที่สะท้อนแสงเสมือนจริง วางตำแหน่งอย่างเหมาะสมทางด้านซ้ายของโหล ใช้ความโปร่งใสและเบลอให้เหมาะสมเพื่อสร้างแสงสะท้อนที่สมจริง ใช้ `border-radius` เพื่อสร้างรูปฟองออร์แกนิก และลองใช้กราเดียนต์หรือกล่องเงาเพื่อเพิ่มความสมจริงยิ่งขึ้น
## แบบทดสอบหลังเรียน
[แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/quiz/18)
## ขยายความรู้ CSS ของคุณ
CSS อาจดูซับซ้อนในตอนแรก แต่ความเข้าใจหลักการเหล่านี้จะเป็นพื้นฐานที่มั่นคงสำหรับเทคนิคขั้นสูง
**หัวข้อ CSS ต่อไปที่คุณควรเรียนรู้:**
- **Flexbox** – ช่วยจัดแนวและกระจายองค์ประกอบให้เรียบง่ายขึ้น
- **CSS Grid** – ให้เครื่องมือทรงพลังสำหรับสร้างเลย์เอาต์ซับซ้อน
- **CSS Variables** – ลดการซ้ำซ้อนและเพิ่มความง่ายในการบำรุงรักษา
- **Responsive design** – ทำให้เว็บไซต์ใช้งานได้ดีในขนาดหน้าจอแตกต่างกัน
### แหล่งเรียนรู้เชิงโต้ตอบ
ฝึกฝนแนวคิดเหล่านี้ด้วยเกมสนุกๆ:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) – ฝึก Flexbox ผ่านความท้าทายสนุกๆ
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) – เรียน CSS Grid ด้วยการปลูกแครอทเสมือน
- 🎯 [CSS Battle](https://cssbattle.dev/) – ทดสอบทักษะ CSS ของคุณด้วยความท้าทายการเขียนโค้ด
### เรียนรู้อื่นๆ
สำหรับพื้นฐาน CSS อย่างสมบูรณ์ ให้ทำโมดูล Microsoft Learn นี้: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **สิ่งที่คุณทำได้ใน 5 นาทีถัดไป**
- [ ] เปิด DevTools และตรวจสอบสไตล์ CSS บนเว็บไซต์ใดก็ได้ผ่านแผง Elements
- [ ] สร้างไฟล์ CSS ง่ายๆ และเชื่อมโยงกับหน้า HTML
- [ ] ลองเปลี่ยนสีโดยใช้วิธีต่างๆ: hex, RGB, และชื่อสี
- [ ] ฝึกฝนกล่องโมเดล (box model) โดยเพิ่ม padding และ margin ให้กับ div
### 🎯 **สิ่งที่คุณทำได้ในชั่วโมงนี้**
- [ ] ทำแบบทดสอบหลังเรียนและทบทวนพื้นฐาน CSS
- [ ] แต่งหน้าเว็บ HTML ของคุณด้วยฟอนต์ สี และระยะห่าง
- [ ] สร้างเลย์เอาต์ง่ายๆ ด้วย flexbox หรือ grid
- [ ] ทดลองใช้ CSS transitions เพื่อเอฟเฟกต์ที่ลื่นไหล
- [ ] ฝึกทำ responsive design ด้วย media queries
### 📅 **การผจญภัยใน CSS เป็นเวลา 1 สัปดาห์**
- [ ] ทำงานมอบหมายการแต่งเทอราเรียมด้วยความคิดสร้างสรรค์
- [ ] เชี่ยวชาญ CSS Grid โดยสร้างเลย์เอาต์แกลเลอรีรูปภาพ
- [ ] เรียนรู้ CSS animations เพื่อเพิ่มชีวิตชีวาให้การออกแบบ
- [ ] สำรวจ CSS preprocessors เช่น Sass หรือ Less
- [ ] ศึกษาหลักการออกแบบและประยุกต์ใช้กับ CSS ของคุณ
- [ ] วิเคราะห์และสร้างสรรค์การออกแบบที่น่าสนใจที่คุณเจอออนไลน์
### 🌟 **ชำนาญการออกแบบ CSS ภายใน 1 เดือน**
- [ ] สร้างระบบการออกแบบเว็บไซต์ตอบสนองครบวงจร
- [ ] เรียนรู้ CSS-in-JS หรือเฟรมเวิร์กแบบ utility-first อย่าง Tailwind
- [ ] มีส่วนร่วมในโปรเจกต์โอเพนซอร์สด้วยการปรับปรุง CSS
- [ ] เชี่ยวชาญแนวคิด CSS ขั้นสูงเช่น CSS custom properties และ containment
- [ ] สร้างไลบรารีคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ด้วย CSS แบบโมดูลาร์
- [ ] เป็นพี่เลี้ยงผู้เรียน CSS คนอื่นและแบ่งปันความรู้ด้านการออกแบบ
## 🎯 ไทม์ไลน์ความชำนาญ CSS ของคุณ
```mermaid
timeline
title ความก้าวหน้าในการเรียนรู้ CSS
section พื้นฐาน (10 นาที)
การเชื่อมต่อไฟล์: การเชื่อม CSS กับ HTML
: เข้าใจกฎการซ้อนทับ
: เรียนรู้พื้นฐานการสืบทอด
section ตัวเลือก (15 นาที)
การกำหนดเป้าหมายองค์ประกอบ: ตัวเลือกองค์ประกอบ
: รูปแบบคลาส
: ความเฉพาะเจาะจงของ ID
: ตัวเชื่อม
section กล่องโมเดล (20 นาที)
พื้นฐานเค้าโครง: ขอบเขตและระยะขอบ
: คุณสมบัติของกรอบขอบ
: การกำหนดขนาดเนื้อหา
: พฤติกรรม box-sizing
section การจัดตำแหน่ง (25 นาที)
การวางองค์ประกอบ: แบบคงที่กับแบบสัมพันธ์
: การจัดตำแหน่งแบบสัมบูรณ์
: การจัดชั้น z-index
: หน่วยตอบสนอง
section การออกแบบภาพ (30 นาที)
ความชำนาญการตกแต่ง: สีและความโปร่งใส
: เงาและเอฟเฟกต์
: การเปลี่ยนสถานะ
: คุณสมบัติการเปลี่ยนรูป
section การออกแบบตอบสนอง (45 นาที)
การรองรับหลายอุปกรณ์: คำสั่ง media queries
: เค้าโครงยืดหยุ่น
: แนวทาง mobile-first
: การปรับแต่ง viewport
section เทคนิคขั้นสูง (1 สัปดาห์)
CSS สมัยใหม่: เค้าโครง Flexbox
: ระบบ CSS Grid
: คุณสมบัติที่กำหนดเอง
: แอนิเมชัน keyframes
section ทักษะมืออาชีพ (1 เดือน)
สถาปัตยกรรม CSS: รูปแบบคอมโพเนนต์
: โค้ดที่ดูแลรักษาได้
: การเพิ่มประสิทธิภาพ
: ความเข้ากันได้ข้ามเบราว์เซอร์
```
### 🛠️ สรุปชุดเครื่องมือ CSS ของคุณ
หลังจากเรียนจบบทเรียนนี้ คุณจะมี:
- **ความเข้าใจเรขาคณิตแบบ Cascade**: วิธีการที่สไตล์สืบทอดและแทนที่กัน
- **ความชำนาญในการเลือก (Selector Mastery)**: การกำหนดเป้าหมายอย่างแม่นยำด้วยองค์ประกอบ คลาส และ ID
- **ทักษะการจัดตำแหน่ง**: การวางและซ้อนส่วนประกอบอย่างมียุทธศาสตร์
- **การออกแบบด้วยการมองเห็น**: สร้างเอฟเฟกต์แก้ว เงา และความโปร่งใส
- **เทคนิคตอบสนอง**: เลย์เอาต์ที่ตั้งด้วยเปอร์เซ็นต์ซึ่งปรับให้เข้ากับหน้าจอใดก็ได้
- **การจัดการโค้ด**: โครงสร้าง CSS ที่สะอาดและดูแลรักษาง่าย
- **แนวปฏิบัติสมัยใหม่**: ใช้หน่วยสัมพัทธ์และแบบแผนการออกแบบที่เข้าถึงได้
**ขั้นตอนถัดไป**: เทอราเรียมของคุณตอนนี้มีทั้งโครงสร้าง (HTML) และสไตล์ (CSS) บทเรียนสุดท้ายจะเพิ่มความโต้ตอบด้วย JavaScript!
## งานมอบหมาย
[CSS Refactoring](assignment.md)
---
**ข้อจำกัดความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้ความถูกต้องสูงสุด โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถูกถือเป็นแหล่งข้อมูลที่มีอำนาจสำหรับข้อมูลดังกล่าว สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้การแปลโดยมนุษย์มืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่อาจเกิดขึ้นจากการใช้การแปลนี้
` คุณจะเห็นว่ามันได้รับการสืบทอดฟอนต์จาก body:
✅ **เวลาทดลอง**: ลองตั้งค่าคุณสมบัติที่สืบทอดได้อื่นๆ บน `` เช่น `color`, `line-height`, หรือ `text-align` ดูสิว่า heading และองค์ประกอบอื่นๆ จะเปลี่ยนอย่างไร
> 📝 **คุณสมบัติที่สืบทอดได้ประกอบด้วย**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **คุณสมบัติที่ไม่สืบทอดได้ประกอบด้วย**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **ตรวจสอบความเข้าใจ**
**ความเข้าใจพื้นฐาน CSS**: ก่อนจะไปถึง selectors ให้แน่ใจว่าคุณสามารถ:
- ✅ อธิบายความแตกต่างระหว่าง cascade กับ inheritance ได้
- ✅ ทำนายได้ว่า สไตล์ไหนจะชนะในกรณีขัดแย้งของ specificity
- ✅ ระบุได้ว่าคุณสมบัติไหนถูกสืบทอดจากองค์ประกอบพ่อแม่
- ✅ เชื่อมต่อไฟล์ CSS กับ HTML ได้อย่างถูกต้อง
**ทดสอบด่วน**: ถ้าคุณมีสไตล์เหล่านี้ สีของ `` ที่อยู่ภายใน `` จะเป็นสีอะไร?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*คำตอบ: สีแดง (element selector เล็งตรงที่ h1)*
## ชำนาญการใช้ CSS Selectors
CSS selectors คือวิธีที่คุณกำหนดเป้าหมายองค์ประกอบเฉพาะเพื่อกำหนดสไตล์ เหมือนกับการบอกทิศทางที่เจาะจง - แทนที่จะบอกว่า "บ้าน" คุณอาจจะบอกว่า "บ้านสีฟ้าที่มีประตูสีแดงบนถนน Maple"
CSS มีหลายวิธีที่จะระบุเป้าหมายอย่างเฉพาะเจาะจง และการเลือก selector ที่เหมาะสมก็เหมือนกับการเลือกเครื่องมือที่ถูกต้องสำหรับงาน บางครั้งคุณต้องการสไตล์ประตูทุกบานในย่านนี้ และบางครั้งแค่ประตูเดียวเท่านั้น
### Element Selectors (แท็ก)
Element selectors เล็งไปที่องค์ประกอบ HTML ตามชื่อแท็ก เหมาะสำหรับการตั้งค่าสไตล์พื้นฐานที่ใช้ทั่วหน้า:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**เข้าใจสไตล์เหล่านี้ว่า:**
- **ตั้งค่า** Typography ที่สม่ำเสมอทั่วทั้งหน้าโดยใช้ตัวเลือก `body`
- **ลบ** margin และ padding ของบราวเซอร์ที่ตั้งไว้โดยปริยายเพื่อควบคุมได้ดีขึ้น
- **กำหนดสไตล์** ให้กับทุกองค์ประกอบหัวเรื่องด้วยสี การจัดตำแหน่ง และระยะห่าง
- **ใช้** หน่วย `rem` เพื่อขนาดฟอนต์ที่ปรับขยายได้และเข้าถึงได้ง่าย
แม้ว่า element selectors จะเหมาะกับการสไตล์ทั่วไป แต่คุณต้องการ selectors ที่เฉพาะเจาะจงมากขึ้นเพื่อสไตล์ชิ้นส่วนแต่ละชิ้น เช่น ต้นไม้ใน Terrarium ของคุณ
### ID Selectors สำหรับองค์ประกอบเฉพาะ
ID selectors ใช้เครื่องหมาย `#` และเล็งไปที่องค์ประกอบที่มีแอตทริบิวต์ `id` เฉพาะเจาะจง เนื่องจากไอดีต้องไม่ซ้ำกันในหน้า จึงเหมาะสำหรับการสไตล์องค์ประกอบพิเศษเฉพาะ เช่น ภาชนะตนนไม้ฝั่งซ้ายและขวาของเรา
มาสร้างสไตล์สำหรับคอนเทนเนอร์ด้านข้างของ Terrarium ที่จะวางต้นไม้:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**โค้ดนี้ทำอะไรได้บ้าง:**
- **จัดวาง** คอนเทนเนอร์ที่ขอบซ้ายและขวาสุดโดยใช้ตำแหน่ง `absolute`
- **ใช้** หน่วย `vh` (ความสูงของหน้าจอ) เพื่อให้ความสูงตอบสนองตามขนาดหน้าจอ
- **ใช้** `box-sizing: border-box` เพื่อให้ padding รวมอยู่ในความกว้างทั้งหมด
- **ตัด** หน่วย `px` ออกจากค่าเป็นศูนย์เพื่อให้โค้ดดูสะอาดขึ้น
- **กำหนด** สีพื้นหลังที่อ่อนโยน เพื่อความสบายตากว่าการใช้สีเทาจัด
✅ **ความท้าทายเรื่องคุณภาพโค้ด**: สังเกตว่าภาษา CSS นี้ละเมิดหลักการ DRY (อย่าทำซ้ำตัวเอง) คุณสามารถปรับปรุงโค้ดนี้โดยใช้ทั้ง ID และคลาสได้หรือไม่?
**วิธีการปรับปรุง:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Class Selectors สำหรับสไตล์ที่นำกลับมาใช้ได้
Class selectors ใช้สัญลักษณ์ `.` และเหมาะกับกรณีที่ต้องการใช้สไตล์เดียวกันกับองค์ประกอบหลายชิ้น ต่างจากไอดีที่ไม่ซ้ำกัน คลาสสามารถใช้ซ้ำใน HTML ได้ ทำให้เหมาะกับแพตเทิร์นการสไตล์ที่สม่ำเสมอ
ใน Terrarium ของเรา แต่ละต้นไม้ต้องการสไตล์คล้ายกันแต่ต้องการตำแหน่งที่แตกต่าง เราจะใช้คลาสสำหรับสไตล์ที่ใช้ร่วมกัน และไอดีสำหรับตำแหน่งเฉพาะ
**นี่คือโครงสร้าง HTML ของแต่ละต้นไม้:**
```html
```
**อธิบายองค์ประกอบหลัก:**
- **ใช้** `class="plant-holder"` สำหรับสไตล์ภาชนะที่สอดคล้องกันทั่วทุกต้นไม้
- **ใช้** `class="plant"` สำหรับการสไตล์ภาพและพฤติกรรมร่วมกัน
- **มี** `id="plant1"` เฉพาะเพื่อการตั้งตำแหน่งและการโต้ตอบกับ JavaScript
- **มี** ข้อความ alt ที่อธิบายสำหรับการเข้าถึงผู้ใช้ที่ใช้ screen reader
ตอนนี้เพิ่มสไตล์เหล่านี้ในไฟล์ `style.css` ของคุณ:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**แยกย่อยสไตล์เหล่านี้:**
- **สร้าง** ตำแหน่งแบบ relative ให้กับ plant-holder เพื่อกำหนด context การจัดตำแหน่ง
- **ตั้ง** ความสูง plant-holder แต่ละอันที่ 13% เพื่อให้ต้นไม้ทั้งหมดพอดีแนวตั้งโดยไม่ต้องเลื่อน
- **เลื่อน** holder ไปทางซ้ายเล็กน้อยเพื่อจัดตำแหน่งต้นไม้ให้อยู่กึ่งกลางในภาชนะ
- **อนุญาต** ให้ต้นไม้ยืดขนาดตามหน้าจอด้วย `max-width` และ `max-height`
- **ใช้** `z-index` เพื่อให้ต้นไม้ซ้อนอยู่เหนือองค์ประกอบอื่นใน Terrarium
- **เพิ่ม** เอฟเฟกต์ hover เล็กๆ ด้วยการเปลี่ยนแปลง CSS ที่นุ่มนวลเพื่อการโต้ตอบที่ดีขึ้น
✅ **คิดวิเคราะห์**: ทำไมเราถึงต้องใช้ทั้ง `.plant-holder` และ `.plant`? จะเกิดอะไรขึ้นถ้าเราใช้แค่ตัวเดียว?
> 💡 **แพตเทิร์นการออกแบบ**: ภาชนะ (`.plant-holder`) ควบคุมเลย์เอาต์และการจัดตำแหน่ง ในขณะที่เนื้อหา (`.plant`) ควบคุมรูปลักษณ์และการปรับขนาด การแยกหน้าที่แบบนี้ทำให้โค้ดดูแลรักษาและปรับเปลี่ยนได้ง่ายขึ้น
## ทำความเข้าใจการจัดตำแหน่งของ CSS
การจัดตำแหน่ง CSS ก็เหมือนผู้กำกับเวทีละคร - คุณกำหนดตำแหน่งให้นักแสดงทุกคนยืนและเคลื่อนที่ไปรอบๆ เวที นักแสดงบางคนทำตามการจัดวางปกติ ในขณะที่บางคนต้องตำแหน่งเฉพาะเพื่อเอฟเฟกต์ที่น่าสนใจ
เมื่อคุณเข้าใจการจัดตำแหน่งแล้ว ปัญหาเลย์เอาต์หลายอย่างก็จะจัดการได้ง่าย ต้องการแถบนำทางที่อยู่บนสุดแม้ผู้ใช้เลื่อนหน้าจอ? การจัดตำแหน่งช่วยได้ ต้องการ tooltip ที่แสดงในตำแหน่งเฉพาะ? นั่นก็การจัดตำแหน่ง
### ค่าการจัดตำแหน่งทั้งห้า
```mermaid
quadrantChart
title กลยุทธ์ตำแหน่ง CSS
x-axis การไหลของเอกสาร --> เอาออกจากการไหล
y-axis ตำแหน่งคงที่ --> ควบคุมอย่างแม่นยำ
quadrant-1 สมบูรณ์แบบ
quadrant-2 ติดแน่น
quadrant-3 คงที่
quadrant-4 แปะแน่น
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| ค่าการจัดตำแหน่ง | พฤติกรรม | กรณีใช้งาน |
|----------------|----------|----------|
| `static` | ไหลตามปกติ ไม่สนใจ top/left/right/bottom | เลย์เอาต์เอกสารตามปกติ |
| `relative` | จัดตำแหน่งสัมพันธ์กับตำแหน่งปกติ | ปรับแต่งเล็กน้อย สร้าง context การจัดตำแหน่ง |
| `absolute` | จัดตำแหน่งสัมพันธ์กับบรรพบุรุษที่ถูกจัดตำแหน่ง | วางตำแหน่งแม่นยำ ซ้อนทับ |
| `fixed` | จัดตำแหน่งสัมพันธ์กับ viewport | แถบนำทาง ส่วนลอย |
| `sticky` | สลับระหว่าง relative และ fixed ตามการเลื่อน | หัวเรื่องที่ยึดติดขณะเลื่อน |
### การจัดตำแหน่งใน Terrarium ของเรา
Terrarium ของเราใช้การผสมผสานของชนิดการจัดตำแหน่งอย่างเป็นกลยุทธ์เพื่อสร้างเลย์เอาต์ที่ต้องการ:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**เข้าใจกลยุทธ์การจัดตำแหน่ง:**
- **คอนเทนเนอร์ตำแหน่ง absolute** ถูกดึงออกจากฟลูว์ปกติของเอกสารและติดกับขอบหน้าจอ
- **plant-holder ตำแหน่ง relative** สร้าง context การจัดตำแหน่งในขณะที่ยังอยู่ในฟลูว์เอกสาร
- **ต้นไม้ตำแหน่ง absolute** สามารถวางตำแหน่งได้อย่างแม่นยำภายใน plant-holder ที่ relative
- **การผสมผสานนี้** ช่วยให้ต้นไม้ซ้อนแนวตั้งได้ในขณะที่ยังจัดตำแหน่งได้แต่ละต้นอย่างอิสระ
> 🎯 **ทำไมจึงสำคัญ**: องค์ประกอบ `plant` ต้องการตำแหน่งแบบ absolute เพื่อให้สามารถลากย้ายได้ในบทเรียนถัดไป การจัดตำแหน่งแบบ absolute จะดึงออกจากเลย์เอาต์ปกติ ทำให้การลากวางทำงานได้
✅ **เวลาทดลอง**: ลองเปลี่ยนค่าการจัดตำแหน่งและสังเกตผลลัพธ์:
- จะเกิดอะไรขึ้นถ้าคุณเปลี่ยน `.container` จาก `absolute` เป็น `relative`?
- เลย์เอาต์จะเปลี่ยนอย่างไรหาก `.plant-holder` ใช้ `absolute` แทน `relative`?
- จะเกิดอะไรขึ้นเมื่อคุณเปลี่ยน `.plant` เป็นตำแหน่ง `relative`?
### 🔄 **การตรวจสอบความเข้าใจ**
**ความชำนาญเกี่ยวกับ CSS Positioning**: หยุดเพื่อตรวจสอบความเข้าใจของคุณ:
- ✅ คุณอธิบายได้ไหมว่าทำไมต้นไม้จึงต้องใช้ตำแหน่งแบบ absolute สำหรับการลากและวาง?
- ✅ คุณเข้าใจไหมว่าภาชนะแบบ relative สร้างบริบทการจัดตำแหน่งอย่างไร?
- ✅ ทำไมกล่องด้านข้างจึงใช้ตำแหน่ง absolute?
- ✅ จะเกิดอะไรขึ้นถ้าคุณลบคำประกาศตำแหน่งทั้งหมดออกไป?
**การเชื่อมโยงกับโลกจริง**: คิดว่า CSS positioning คล้ายกับเลย์เอาต์ในโลกจริงอย่างไร:
- **Static**: หนังสือบนชั้นวาง (ลำดับธรรมชาติ)
- **Relative**: ขยับหนังสือเล็กน้อยแต่ยังคงตำแหน่งไว้
- **Absolute**: การวางที่คั่นหนังสือที่หน้าหนังสือที่แน่นอน
- **Fixed**: โน้ตเหนียวที่ยังคงมองเห็นได้ขณะที่คุณพลิกหน้า
## การสร้างเทอราเรียมด้วย CSS
ตอนนี้เราจะสร้างโหลแก้วโดยใช้ CSS เท่านั้น – ไม่ต้องใช้รูปภาพหรือซอฟต์แวร์กราฟิก
การสร้างแก้วที่ดูสมจริง, เงา และเอฟเฟกต์ลึกซึ้งโดยใช้ตำแหน่งและความโปร่งใสแสดงถึงศักยภาพทางภาพของ CSS เทคนิคนี้สะท้อนให้เห็นถึงวิธีที่สถาปนิกในยุค Bauhaus ใช้รูปทรงเรขาคณิตง่ายๆ เพื่อสร้างโครงสร้างที่ซับซ้อนและงดงาม เมื่อคุณเข้าใจหลักการเหล่านี้แล้ว คุณจะรู้เทคนิค CSS ที่อยู่เบื้องหลังการออกแบบเว็บหลายๆ แบบ
```mermaid
flowchart LR
A[ฝาปิดโหล] --> E[เทอร์ราเรียมสมบูรณ์]
B[ผนังโหล] --> E
C[ชั้นดิน] --> E
D[ก้นโหล] --> E
F[เอฟเฟกต์กระจก] --> E
A1["ความกว้าง 50%
ความสูง 5%
ตำแหน่งบนสุด"] --> A
B1["ความกว้าง 60%
ความสูง 80%
มุมโค้งมน
ความทึบแสง 0.5"] --> B
C1["ความกว้าง 60%
ความสูง 5%
สีน้ำตาลเข้ม
ชั้นล่าง"] --> C
D1["ความกว้าง 50%
ความสูง 1%
ตำแหน่งล่างสุด"] --> D
F1["เงาเบาๆ
ความโปร่งใส
ชั้นซ้อน Z-index"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### การสร้างส่วนประกอบโหลแก้ว
เรามาสร้างโหลเทอราเรียมทีละชิ้น ทุกชิ้นใช้ตำแหน่ง absolute และการกำหนดขนาดเป็นเปอร์เซ็นต์เพื่อรองรับการแสดงผลที่ตอบสนอง:
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**การทำความเข้าใจการสร้างเทอราเรียม:**
- **ใช้** ขนาดที่ตั้งเป็นเปอร์เซ็นต์เพื่อให้ขยายได้ตามขนาดหน้าจอ
- **จัดตำแหน่ง** องค์ประกอบแบบ absolute เพื่อวางซ้อนและจัดแนวได้อย่างแม่นยำ
- **ใช้** ค่า opacity ต่าง ๆ เพื่อสร้างเอฟเฟกต์ความโปร่งใสของแก้ว
- **ตั้งค่า** `z-index` เพื่อการวางซ้อนให้ต้นไม้ปรากฏภายในโหล
- **เพิ่ม** เงากล่องและความโค้งของขอบที่ละเอียดเพื่อให้ดูสมจริงมากขึ้น
### การออกแบบตอบสนองด้วยเปอร์เซ็นต์
สังเกตว่าทุกขนาดใช้เปอร์เซ็นต์แทนค่าพิกเซลที่ตายตัว:
**เหตุผลที่สำคัญ:**
- **ทำให้** เทอราเรียมปรับขนาดตามสัดส่วนบนหน้าจอทุกขนาด
- **รักษา** ความสัมพันธ์ทางภาพระหว่างส่วนประกอบโหลแก้ว
- **ให้** ประสบการณ์ที่สอดคล้องกันตั้งแต่โทรศัพท์มือถือจนถึงจอมอนิเตอร์ใหญ่
- **อนุญาต** ให้การออกแบบปรับเปลี่ยนได้โดยไม่ทำให้เลย์เอาต์เสียหาย
### หน่วย CSS ในการปฏิบัติ
เราใช้หน่วย `rem` สำหรับ border-radius ซึ่งปรับตามขนาดฟอนต์ราก นี่ช่วยสร้างการออกแบบที่เข้าถึงง่ายขึ้นและเคารพการตั้งค่าฟอนต์ของผู้ใช้ เรียนรู้เพิ่มเติมเกี่ยวกับ [หน่วยสัมพัทธ์ CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ในข้อกำหนดอย่างเป็นทางการ
✅ **ทดลองปรับแต่งด้วยสายตา**: ลองแก้ไขค่าต่างๆ และสังเกตผลลัพธ์:
- เปลี่ยนความทึบของโหลจาก 0.5 เป็น 0.8 – สิ่งนี้มีผลต่อการปรากฏของแก้วอย่างไร?
- ปรับสีดินจาก `#3a241d` เป็น `#8B4513` – มีผลกระทบทางภาพอย่างไร?
- เปลี่ยน `z-index` ของดินเป็น 2 – จะเกิดอะไรขึ้นกับการวางซ้อน?
### 🔄 **การตรวจสอบความเข้าใจ**
**ความเข้าใจการออกแบบด้วย CSS**: ยืนยันความเข้าใจด้านการออกแบบด้วย CSS:
- ✅ ขนาดแบบเปอร์เซ็นต์ช่วยสร้างการออกแบบตอบสนองได้อย่างไร?
- ✅ ทำไม opacity ถึงช่วยสร้างเอฟเฟกต์ความโปร่งใสของแก้ว?
- ✅ บทบาทของ z-index ในการวางซ้อนองค์ประกอบคืออะไร?
- ✅ ค่าของ border-radius ช่วยสร้างรูปร่างโหลอย่างไร?
**หลักการออกแบบ**: สังเกตว่าเราสร้างภาพซับซ้อนจากรูปทรงง่ายๆ:
1. **สี่เหลี่ยมผืนผ้า** → **สี่เหลี่ยมมุมโค้ง** → **ส่วนประกอบโหล**
2. **สีแบนๆ** → **opacity** → **เอฟเฟกต์แก้ว**
3. **องค์ประกอบเดี่ยว** → **การวางซ้อนเป็นชั้นๆ** → **ลักษณะ 3 มิติ**
---
## ความท้าทาย GitHub Copilot Agent 🚀
ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้ให้สำเร็จ:
**คำอธิบาย:** สร้างอนิเมชัน CSS ให้ต้นไม้ในเทอราเรียมหวิวไปมาช้าๆ เสมือนลมพัดเบาๆ ซึ่งจะช่วยฝึกทักษะการสร้างอนิเมชัน CSS, การแปลงรูป และ keyframes พร้อมเพิ่มความสวยงามให้เทอราเรียมของคุณ
**คำสั่ง:** เพิ่ม keyframe animation CSS เพื่อทำให้ต้นไม้ในเทอราเรียมหวิวช้าๆ ซ้ายขวา สร้างอนิเมชันการโยกที่หมุนต้นไม้เล็กน้อย (2-3 องศา) ซ้ายและขวา ใช้ความยาวเวลา 3-4 วินาที และใช้กับคลาส `.plant` ให้อนิเมชันวนลูปไม่รู้จบและมี easing function เพื่อการเคลื่อนไหวที่เป็นธรรมชาติ
เรียนรู้เพิ่มเติมเกี่ยวกับ [โหมด agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่
## 🚀 ความท้าทาย: การเพิ่มแสงสะท้อนบนแก้ว
พร้อมหรือยังที่จะเพิ่มแสงสะท้อนที่สมจริงบนโหลเทอราเรียม? เทคนิคนี้จะเพิ่มความลึกและความสมจริงให้กับการออกแบบ
คุณจะสร้างไฮไลต์สีขาวหรือสีอ่อนในรูปวงรีเล็กๆ ที่สะท้อนแสงเสมือนจริง วางตำแหน่งอย่างเหมาะสมทางด้านซ้ายของโหล ใช้ความโปร่งใสและเบลอให้เหมาะสมเพื่อสร้างแสงสะท้อนที่สมจริง ใช้ `border-radius` เพื่อสร้างรูปฟองออร์แกนิก และลองใช้กราเดียนต์หรือกล่องเงาเพื่อเพิ่มความสมจริงยิ่งขึ้น
## แบบทดสอบหลังเรียน
[แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/quiz/18)
## ขยายความรู้ CSS ของคุณ
CSS อาจดูซับซ้อนในตอนแรก แต่ความเข้าใจหลักการเหล่านี้จะเป็นพื้นฐานที่มั่นคงสำหรับเทคนิคขั้นสูง
**หัวข้อ CSS ต่อไปที่คุณควรเรียนรู้:**
- **Flexbox** – ช่วยจัดแนวและกระจายองค์ประกอบให้เรียบง่ายขึ้น
- **CSS Grid** – ให้เครื่องมือทรงพลังสำหรับสร้างเลย์เอาต์ซับซ้อน
- **CSS Variables** – ลดการซ้ำซ้อนและเพิ่มความง่ายในการบำรุงรักษา
- **Responsive design** – ทำให้เว็บไซต์ใช้งานได้ดีในขนาดหน้าจอแตกต่างกัน
### แหล่งเรียนรู้เชิงโต้ตอบ
ฝึกฝนแนวคิดเหล่านี้ด้วยเกมสนุกๆ:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) – ฝึก Flexbox ผ่านความท้าทายสนุกๆ
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) – เรียน CSS Grid ด้วยการปลูกแครอทเสมือน
- 🎯 [CSS Battle](https://cssbattle.dev/) – ทดสอบทักษะ CSS ของคุณด้วยความท้าทายการเขียนโค้ด
### เรียนรู้อื่นๆ
สำหรับพื้นฐาน CSS อย่างสมบูรณ์ ให้ทำโมดูล Microsoft Learn นี้: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **สิ่งที่คุณทำได้ใน 5 นาทีถัดไป**
- [ ] เปิด DevTools และตรวจสอบสไตล์ CSS บนเว็บไซต์ใดก็ได้ผ่านแผง Elements
- [ ] สร้างไฟล์ CSS ง่ายๆ และเชื่อมโยงกับหน้า HTML
- [ ] ลองเปลี่ยนสีโดยใช้วิธีต่างๆ: hex, RGB, และชื่อสี
- [ ] ฝึกฝนกล่องโมเดล (box model) โดยเพิ่ม padding และ margin ให้กับ div
### 🎯 **สิ่งที่คุณทำได้ในชั่วโมงนี้**
- [ ] ทำแบบทดสอบหลังเรียนและทบทวนพื้นฐาน CSS
- [ ] แต่งหน้าเว็บ HTML ของคุณด้วยฟอนต์ สี และระยะห่าง
- [ ] สร้างเลย์เอาต์ง่ายๆ ด้วย flexbox หรือ grid
- [ ] ทดลองใช้ CSS transitions เพื่อเอฟเฟกต์ที่ลื่นไหล
- [ ] ฝึกทำ responsive design ด้วย media queries
### 📅 **การผจญภัยใน CSS เป็นเวลา 1 สัปดาห์**
- [ ] ทำงานมอบหมายการแต่งเทอราเรียมด้วยความคิดสร้างสรรค์
- [ ] เชี่ยวชาญ CSS Grid โดยสร้างเลย์เอาต์แกลเลอรีรูปภาพ
- [ ] เรียนรู้ CSS animations เพื่อเพิ่มชีวิตชีวาให้การออกแบบ
- [ ] สำรวจ CSS preprocessors เช่น Sass หรือ Less
- [ ] ศึกษาหลักการออกแบบและประยุกต์ใช้กับ CSS ของคุณ
- [ ] วิเคราะห์และสร้างสรรค์การออกแบบที่น่าสนใจที่คุณเจอออนไลน์
### 🌟 **ชำนาญการออกแบบ CSS ภายใน 1 เดือน**
- [ ] สร้างระบบการออกแบบเว็บไซต์ตอบสนองครบวงจร
- [ ] เรียนรู้ CSS-in-JS หรือเฟรมเวิร์กแบบ utility-first อย่าง Tailwind
- [ ] มีส่วนร่วมในโปรเจกต์โอเพนซอร์สด้วยการปรับปรุง CSS
- [ ] เชี่ยวชาญแนวคิด CSS ขั้นสูงเช่น CSS custom properties และ containment
- [ ] สร้างไลบรารีคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ด้วย CSS แบบโมดูลาร์
- [ ] เป็นพี่เลี้ยงผู้เรียน CSS คนอื่นและแบ่งปันความรู้ด้านการออกแบบ
## 🎯 ไทม์ไลน์ความชำนาญ CSS ของคุณ
```mermaid
timeline
title ความก้าวหน้าในการเรียนรู้ CSS
section พื้นฐาน (10 นาที)
การเชื่อมต่อไฟล์: การเชื่อม CSS กับ HTML
: เข้าใจกฎการซ้อนทับ
: เรียนรู้พื้นฐานการสืบทอด
section ตัวเลือก (15 นาที)
การกำหนดเป้าหมายองค์ประกอบ: ตัวเลือกองค์ประกอบ
: รูปแบบคลาส
: ความเฉพาะเจาะจงของ ID
: ตัวเชื่อม
section กล่องโมเดล (20 นาที)
พื้นฐานเค้าโครง: ขอบเขตและระยะขอบ
: คุณสมบัติของกรอบขอบ
: การกำหนดขนาดเนื้อหา
: พฤติกรรม box-sizing
section การจัดตำแหน่ง (25 นาที)
การวางองค์ประกอบ: แบบคงที่กับแบบสัมพันธ์
: การจัดตำแหน่งแบบสัมบูรณ์
: การจัดชั้น z-index
: หน่วยตอบสนอง
section การออกแบบภาพ (30 นาที)
ความชำนาญการตกแต่ง: สีและความโปร่งใส
: เงาและเอฟเฟกต์
: การเปลี่ยนสถานะ
: คุณสมบัติการเปลี่ยนรูป
section การออกแบบตอบสนอง (45 นาที)
การรองรับหลายอุปกรณ์: คำสั่ง media queries
: เค้าโครงยืดหยุ่น
: แนวทาง mobile-first
: การปรับแต่ง viewport
section เทคนิคขั้นสูง (1 สัปดาห์)
CSS สมัยใหม่: เค้าโครง Flexbox
: ระบบ CSS Grid
: คุณสมบัติที่กำหนดเอง
: แอนิเมชัน keyframes
section ทักษะมืออาชีพ (1 เดือน)
สถาปัตยกรรม CSS: รูปแบบคอมโพเนนต์
: โค้ดที่ดูแลรักษาได้
: การเพิ่มประสิทธิภาพ
: ความเข้ากันได้ข้ามเบราว์เซอร์
```
### 🛠️ สรุปชุดเครื่องมือ CSS ของคุณ
หลังจากเรียนจบบทเรียนนี้ คุณจะมี:
- **ความเข้าใจเรขาคณิตแบบ Cascade**: วิธีการที่สไตล์สืบทอดและแทนที่กัน
- **ความชำนาญในการเลือก (Selector Mastery)**: การกำหนดเป้าหมายอย่างแม่นยำด้วยองค์ประกอบ คลาส และ ID
- **ทักษะการจัดตำแหน่ง**: การวางและซ้อนส่วนประกอบอย่างมียุทธศาสตร์
- **การออกแบบด้วยการมองเห็น**: สร้างเอฟเฟกต์แก้ว เงา และความโปร่งใส
- **เทคนิคตอบสนอง**: เลย์เอาต์ที่ตั้งด้วยเปอร์เซ็นต์ซึ่งปรับให้เข้ากับหน้าจอใดก็ได้
- **การจัดการโค้ด**: โครงสร้าง CSS ที่สะอาดและดูแลรักษาง่าย
- **แนวปฏิบัติสมัยใหม่**: ใช้หน่วยสัมพัทธ์และแบบแผนการออกแบบที่เข้าถึงได้
**ขั้นตอนถัดไป**: เทอราเรียมของคุณตอนนี้มีทั้งโครงสร้าง (HTML) และสไตล์ (CSS) บทเรียนสุดท้ายจะเพิ่มความโต้ตอบด้วย JavaScript!
## งานมอบหมาย
[CSS Refactoring](assignment.md)
---
**ข้อจำกัดความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้ความถูกต้องสูงสุด โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถูกถือเป็นแหล่งข้อมูลที่มีอำนาจสำหรับข้อมูลดังกล่าว สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้การแปลโดยมนุษย์มืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่อาจเกิดขึ้นจากการใช้การแปลนี้
` จะเป็นสีอะไร?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*คำตอบ: สีแดง (element selector เล็งตรงที่ h1)*
## ชำนาญการใช้ CSS Selectors
CSS selectors คือวิธีที่คุณกำหนดเป้าหมายองค์ประกอบเฉพาะเพื่อกำหนดสไตล์ เหมือนกับการบอกทิศทางที่เจาะจง - แทนที่จะบอกว่า "บ้าน" คุณอาจจะบอกว่า "บ้านสีฟ้าที่มีประตูสีแดงบนถนน Maple"
CSS มีหลายวิธีที่จะระบุเป้าหมายอย่างเฉพาะเจาะจง และการเลือก selector ที่เหมาะสมก็เหมือนกับการเลือกเครื่องมือที่ถูกต้องสำหรับงาน บางครั้งคุณต้องการสไตล์ประตูทุกบานในย่านนี้ และบางครั้งแค่ประตูเดียวเท่านั้น
### Element Selectors (แท็ก)
Element selectors เล็งไปที่องค์ประกอบ HTML ตามชื่อแท็ก เหมาะสำหรับการตั้งค่าสไตล์พื้นฐานที่ใช้ทั่วหน้า:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**เข้าใจสไตล์เหล่านี้ว่า:**
- **ตั้งค่า** Typography ที่สม่ำเสมอทั่วทั้งหน้าโดยใช้ตัวเลือก `body`
- **ลบ** margin และ padding ของบราวเซอร์ที่ตั้งไว้โดยปริยายเพื่อควบคุมได้ดีขึ้น
- **กำหนดสไตล์** ให้กับทุกองค์ประกอบหัวเรื่องด้วยสี การจัดตำแหน่ง และระยะห่าง
- **ใช้** หน่วย `rem` เพื่อขนาดฟอนต์ที่ปรับขยายได้และเข้าถึงได้ง่าย
แม้ว่า element selectors จะเหมาะกับการสไตล์ทั่วไป แต่คุณต้องการ selectors ที่เฉพาะเจาะจงมากขึ้นเพื่อสไตล์ชิ้นส่วนแต่ละชิ้น เช่น ต้นไม้ใน Terrarium ของคุณ
### ID Selectors สำหรับองค์ประกอบเฉพาะ
ID selectors ใช้เครื่องหมาย `#` และเล็งไปที่องค์ประกอบที่มีแอตทริบิวต์ `id` เฉพาะเจาะจง เนื่องจากไอดีต้องไม่ซ้ำกันในหน้า จึงเหมาะสำหรับการสไตล์องค์ประกอบพิเศษเฉพาะ เช่น ภาชนะตนนไม้ฝั่งซ้ายและขวาของเรา
มาสร้างสไตล์สำหรับคอนเทนเนอร์ด้านข้างของ Terrarium ที่จะวางต้นไม้:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**โค้ดนี้ทำอะไรได้บ้าง:**
- **จัดวาง** คอนเทนเนอร์ที่ขอบซ้ายและขวาสุดโดยใช้ตำแหน่ง `absolute`
- **ใช้** หน่วย `vh` (ความสูงของหน้าจอ) เพื่อให้ความสูงตอบสนองตามขนาดหน้าจอ
- **ใช้** `box-sizing: border-box` เพื่อให้ padding รวมอยู่ในความกว้างทั้งหมด
- **ตัด** หน่วย `px` ออกจากค่าเป็นศูนย์เพื่อให้โค้ดดูสะอาดขึ้น
- **กำหนด** สีพื้นหลังที่อ่อนโยน เพื่อความสบายตากว่าการใช้สีเทาจัด
✅ **ความท้าทายเรื่องคุณภาพโค้ด**: สังเกตว่าภาษา CSS นี้ละเมิดหลักการ DRY (อย่าทำซ้ำตัวเอง) คุณสามารถปรับปรุงโค้ดนี้โดยใช้ทั้ง ID และคลาสได้หรือไม่?
**วิธีการปรับปรุง:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Class Selectors สำหรับสไตล์ที่นำกลับมาใช้ได้
Class selectors ใช้สัญลักษณ์ `.` และเหมาะกับกรณีที่ต้องการใช้สไตล์เดียวกันกับองค์ประกอบหลายชิ้น ต่างจากไอดีที่ไม่ซ้ำกัน คลาสสามารถใช้ซ้ำใน HTML ได้ ทำให้เหมาะกับแพตเทิร์นการสไตล์ที่สม่ำเสมอ
ใน Terrarium ของเรา แต่ละต้นไม้ต้องการสไตล์คล้ายกันแต่ต้องการตำแหน่งที่แตกต่าง เราจะใช้คลาสสำหรับสไตล์ที่ใช้ร่วมกัน และไอดีสำหรับตำแหน่งเฉพาะ
**นี่คือโครงสร้าง HTML ของแต่ละต้นไม้:**
```html
```
**อธิบายองค์ประกอบหลัก:**
- **ใช้** `class="plant-holder"` สำหรับสไตล์ภาชนะที่สอดคล้องกันทั่วทุกต้นไม้
- **ใช้** `class="plant"` สำหรับการสไตล์ภาพและพฤติกรรมร่วมกัน
- **มี** `id="plant1"` เฉพาะเพื่อการตั้งตำแหน่งและการโต้ตอบกับ JavaScript
- **มี** ข้อความ alt ที่อธิบายสำหรับการเข้าถึงผู้ใช้ที่ใช้ screen reader
ตอนนี้เพิ่มสไตล์เหล่านี้ในไฟล์ `style.css` ของคุณ:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**แยกย่อยสไตล์เหล่านี้:**
- **สร้าง** ตำแหน่งแบบ relative ให้กับ plant-holder เพื่อกำหนด context การจัดตำแหน่ง
- **ตั้ง** ความสูง plant-holder แต่ละอันที่ 13% เพื่อให้ต้นไม้ทั้งหมดพอดีแนวตั้งโดยไม่ต้องเลื่อน
- **เลื่อน** holder ไปทางซ้ายเล็กน้อยเพื่อจัดตำแหน่งต้นไม้ให้อยู่กึ่งกลางในภาชนะ
- **อนุญาต** ให้ต้นไม้ยืดขนาดตามหน้าจอด้วย `max-width` และ `max-height`
- **ใช้** `z-index` เพื่อให้ต้นไม้ซ้อนอยู่เหนือองค์ประกอบอื่นใน Terrarium
- **เพิ่ม** เอฟเฟกต์ hover เล็กๆ ด้วยการเปลี่ยนแปลง CSS ที่นุ่มนวลเพื่อการโต้ตอบที่ดีขึ้น
✅ **คิดวิเคราะห์**: ทำไมเราถึงต้องใช้ทั้ง `.plant-holder` และ `.plant`? จะเกิดอะไรขึ้นถ้าเราใช้แค่ตัวเดียว?
> 💡 **แพตเทิร์นการออกแบบ**: ภาชนะ (`.plant-holder`) ควบคุมเลย์เอาต์และการจัดตำแหน่ง ในขณะที่เนื้อหา (`.plant`) ควบคุมรูปลักษณ์และการปรับขนาด การแยกหน้าที่แบบนี้ทำให้โค้ดดูแลรักษาและปรับเปลี่ยนได้ง่ายขึ้น
## ทำความเข้าใจการจัดตำแหน่งของ CSS
การจัดตำแหน่ง CSS ก็เหมือนผู้กำกับเวทีละคร - คุณกำหนดตำแหน่งให้นักแสดงทุกคนยืนและเคลื่อนที่ไปรอบๆ เวที นักแสดงบางคนทำตามการจัดวางปกติ ในขณะที่บางคนต้องตำแหน่งเฉพาะเพื่อเอฟเฟกต์ที่น่าสนใจ
เมื่อคุณเข้าใจการจัดตำแหน่งแล้ว ปัญหาเลย์เอาต์หลายอย่างก็จะจัดการได้ง่าย ต้องการแถบนำทางที่อยู่บนสุดแม้ผู้ใช้เลื่อนหน้าจอ? การจัดตำแหน่งช่วยได้ ต้องการ tooltip ที่แสดงในตำแหน่งเฉพาะ? นั่นก็การจัดตำแหน่ง
### ค่าการจัดตำแหน่งทั้งห้า
```mermaid
quadrantChart
title กลยุทธ์ตำแหน่ง CSS
x-axis การไหลของเอกสาร --> เอาออกจากการไหล
y-axis ตำแหน่งคงที่ --> ควบคุมอย่างแม่นยำ
quadrant-1 สมบูรณ์แบบ
quadrant-2 ติดแน่น
quadrant-3 คงที่
quadrant-4 แปะแน่น
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| ค่าการจัดตำแหน่ง | พฤติกรรม | กรณีใช้งาน |
|----------------|----------|----------|
| `static` | ไหลตามปกติ ไม่สนใจ top/left/right/bottom | เลย์เอาต์เอกสารตามปกติ |
| `relative` | จัดตำแหน่งสัมพันธ์กับตำแหน่งปกติ | ปรับแต่งเล็กน้อย สร้าง context การจัดตำแหน่ง |
| `absolute` | จัดตำแหน่งสัมพันธ์กับบรรพบุรุษที่ถูกจัดตำแหน่ง | วางตำแหน่งแม่นยำ ซ้อนทับ |
| `fixed` | จัดตำแหน่งสัมพันธ์กับ viewport | แถบนำทาง ส่วนลอย |
| `sticky` | สลับระหว่าง relative และ fixed ตามการเลื่อน | หัวเรื่องที่ยึดติดขณะเลื่อน |
### การจัดตำแหน่งใน Terrarium ของเรา
Terrarium ของเราใช้การผสมผสานของชนิดการจัดตำแหน่งอย่างเป็นกลยุทธ์เพื่อสร้างเลย์เอาต์ที่ต้องการ:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**เข้าใจกลยุทธ์การจัดตำแหน่ง:**
- **คอนเทนเนอร์ตำแหน่ง absolute** ถูกดึงออกจากฟลูว์ปกติของเอกสารและติดกับขอบหน้าจอ
- **plant-holder ตำแหน่ง relative** สร้าง context การจัดตำแหน่งในขณะที่ยังอยู่ในฟลูว์เอกสาร
- **ต้นไม้ตำแหน่ง absolute** สามารถวางตำแหน่งได้อย่างแม่นยำภายใน plant-holder ที่ relative
- **การผสมผสานนี้** ช่วยให้ต้นไม้ซ้อนแนวตั้งได้ในขณะที่ยังจัดตำแหน่งได้แต่ละต้นอย่างอิสระ
> 🎯 **ทำไมจึงสำคัญ**: องค์ประกอบ `plant` ต้องการตำแหน่งแบบ absolute เพื่อให้สามารถลากย้ายได้ในบทเรียนถัดไป การจัดตำแหน่งแบบ absolute จะดึงออกจากเลย์เอาต์ปกติ ทำให้การลากวางทำงานได้
✅ **เวลาทดลอง**: ลองเปลี่ยนค่าการจัดตำแหน่งและสังเกตผลลัพธ์:
- จะเกิดอะไรขึ้นถ้าคุณเปลี่ยน `.container` จาก `absolute` เป็น `relative`?
- เลย์เอาต์จะเปลี่ยนอย่างไรหาก `.plant-holder` ใช้ `absolute` แทน `relative`?
- จะเกิดอะไรขึ้นเมื่อคุณเปลี่ยน `.plant` เป็นตำแหน่ง `relative`?
### 🔄 **การตรวจสอบความเข้าใจ**
**ความชำนาญเกี่ยวกับ CSS Positioning**: หยุดเพื่อตรวจสอบความเข้าใจของคุณ:
- ✅ คุณอธิบายได้ไหมว่าทำไมต้นไม้จึงต้องใช้ตำแหน่งแบบ absolute สำหรับการลากและวาง?
- ✅ คุณเข้าใจไหมว่าภาชนะแบบ relative สร้างบริบทการจัดตำแหน่งอย่างไร?
- ✅ ทำไมกล่องด้านข้างจึงใช้ตำแหน่ง absolute?
- ✅ จะเกิดอะไรขึ้นถ้าคุณลบคำประกาศตำแหน่งทั้งหมดออกไป?
**การเชื่อมโยงกับโลกจริง**: คิดว่า CSS positioning คล้ายกับเลย์เอาต์ในโลกจริงอย่างไร:
- **Static**: หนังสือบนชั้นวาง (ลำดับธรรมชาติ)
- **Relative**: ขยับหนังสือเล็กน้อยแต่ยังคงตำแหน่งไว้
- **Absolute**: การวางที่คั่นหนังสือที่หน้าหนังสือที่แน่นอน
- **Fixed**: โน้ตเหนียวที่ยังคงมองเห็นได้ขณะที่คุณพลิกหน้า
## การสร้างเทอราเรียมด้วย CSS
ตอนนี้เราจะสร้างโหลแก้วโดยใช้ CSS เท่านั้น – ไม่ต้องใช้รูปภาพหรือซอฟต์แวร์กราฟิก
การสร้างแก้วที่ดูสมจริง, เงา และเอฟเฟกต์ลึกซึ้งโดยใช้ตำแหน่งและความโปร่งใสแสดงถึงศักยภาพทางภาพของ CSS เทคนิคนี้สะท้อนให้เห็นถึงวิธีที่สถาปนิกในยุค Bauhaus ใช้รูปทรงเรขาคณิตง่ายๆ เพื่อสร้างโครงสร้างที่ซับซ้อนและงดงาม เมื่อคุณเข้าใจหลักการเหล่านี้แล้ว คุณจะรู้เทคนิค CSS ที่อยู่เบื้องหลังการออกแบบเว็บหลายๆ แบบ
```mermaid
flowchart LR
A[ฝาปิดโหล] --> E[เทอร์ราเรียมสมบูรณ์]
B[ผนังโหล] --> E
C[ชั้นดิน] --> E
D[ก้นโหล] --> E
F[เอฟเฟกต์กระจก] --> E
A1["ความกว้าง 50%
ความสูง 5%
ตำแหน่งบนสุด"] --> A B1["ความกว้าง 60%
ความสูง 80%
มุมโค้งมน
ความทึบแสง 0.5"] --> B C1["ความกว้าง 60%
ความสูง 5%
สีน้ำตาลเข้ม
ชั้นล่าง"] --> C D1["ความกว้าง 50%
ความสูง 1%
ตำแหน่งล่างสุด"] --> D F1["เงาเบาๆ
ความโปร่งใส
ชั้นซ้อน Z-index"] --> F style E fill:#d1e1df,stroke:#3a241d style A fill:#e8f5e8 style B fill:#e8f5e8 style C fill:#8B4513 style D fill:#e8f5e8 ``` ### การสร้างส่วนประกอบโหลแก้ว เรามาสร้างโหลเทอราเรียมทีละชิ้น ทุกชิ้นใช้ตำแหน่ง absolute และการกำหนดขนาดเป็นเปอร์เซ็นต์เพื่อรองรับการแสดงผลที่ตอบสนอง: ```css .jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); } .jar-top { width: 50%; height: 5%; background: #d1e1df; position: absolute; bottom: 80.5%; left: 25%; opacity: 0.7; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; } .jar-bottom { width: 50%; height: 1%; background: #d1e1df; position: absolute; bottom: 0; left: 25%; opacity: 0.7; border-radius: 0 0 0.5rem 0.5rem; } .dirt { width: 60%; height: 5%; background: #3a241d; position: absolute; border-radius: 0 0 1rem 1rem; bottom: 1%; left: 20%; opacity: 0.7; z-index: -1; } ``` **การทำความเข้าใจการสร้างเทอราเรียม:** - **ใช้** ขนาดที่ตั้งเป็นเปอร์เซ็นต์เพื่อให้ขยายได้ตามขนาดหน้าจอ - **จัดตำแหน่ง** องค์ประกอบแบบ absolute เพื่อวางซ้อนและจัดแนวได้อย่างแม่นยำ - **ใช้** ค่า opacity ต่าง ๆ เพื่อสร้างเอฟเฟกต์ความโปร่งใสของแก้ว - **ตั้งค่า** `z-index` เพื่อการวางซ้อนให้ต้นไม้ปรากฏภายในโหล - **เพิ่ม** เงากล่องและความโค้งของขอบที่ละเอียดเพื่อให้ดูสมจริงมากขึ้น ### การออกแบบตอบสนองด้วยเปอร์เซ็นต์ สังเกตว่าทุกขนาดใช้เปอร์เซ็นต์แทนค่าพิกเซลที่ตายตัว: **เหตุผลที่สำคัญ:** - **ทำให้** เทอราเรียมปรับขนาดตามสัดส่วนบนหน้าจอทุกขนาด - **รักษา** ความสัมพันธ์ทางภาพระหว่างส่วนประกอบโหลแก้ว - **ให้** ประสบการณ์ที่สอดคล้องกันตั้งแต่โทรศัพท์มือถือจนถึงจอมอนิเตอร์ใหญ่ - **อนุญาต** ให้การออกแบบปรับเปลี่ยนได้โดยไม่ทำให้เลย์เอาต์เสียหาย ### หน่วย CSS ในการปฏิบัติ เราใช้หน่วย `rem` สำหรับ border-radius ซึ่งปรับตามขนาดฟอนต์ราก นี่ช่วยสร้างการออกแบบที่เข้าถึงง่ายขึ้นและเคารพการตั้งค่าฟอนต์ของผู้ใช้ เรียนรู้เพิ่มเติมเกี่ยวกับ [หน่วยสัมพัทธ์ CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ในข้อกำหนดอย่างเป็นทางการ ✅ **ทดลองปรับแต่งด้วยสายตา**: ลองแก้ไขค่าต่างๆ และสังเกตผลลัพธ์: - เปลี่ยนความทึบของโหลจาก 0.5 เป็น 0.8 – สิ่งนี้มีผลต่อการปรากฏของแก้วอย่างไร? - ปรับสีดินจาก `#3a241d` เป็น `#8B4513` – มีผลกระทบทางภาพอย่างไร? - เปลี่ยน `z-index` ของดินเป็น 2 – จะเกิดอะไรขึ้นกับการวางซ้อน? ### 🔄 **การตรวจสอบความเข้าใจ** **ความเข้าใจการออกแบบด้วย CSS**: ยืนยันความเข้าใจด้านการออกแบบด้วย CSS: - ✅ ขนาดแบบเปอร์เซ็นต์ช่วยสร้างการออกแบบตอบสนองได้อย่างไร? - ✅ ทำไม opacity ถึงช่วยสร้างเอฟเฟกต์ความโปร่งใสของแก้ว? - ✅ บทบาทของ z-index ในการวางซ้อนองค์ประกอบคืออะไร? - ✅ ค่าของ border-radius ช่วยสร้างรูปร่างโหลอย่างไร? **หลักการออกแบบ**: สังเกตว่าเราสร้างภาพซับซ้อนจากรูปทรงง่ายๆ: 1. **สี่เหลี่ยมผืนผ้า** → **สี่เหลี่ยมมุมโค้ง** → **ส่วนประกอบโหล** 2. **สีแบนๆ** → **opacity** → **เอฟเฟกต์แก้ว** 3. **องค์ประกอบเดี่ยว** → **การวางซ้อนเป็นชั้นๆ** → **ลักษณะ 3 มิติ** --- ## ความท้าทาย GitHub Copilot Agent 🚀 ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้ให้สำเร็จ: **คำอธิบาย:** สร้างอนิเมชัน CSS ให้ต้นไม้ในเทอราเรียมหวิวไปมาช้าๆ เสมือนลมพัดเบาๆ ซึ่งจะช่วยฝึกทักษะการสร้างอนิเมชัน CSS, การแปลงรูป และ keyframes พร้อมเพิ่มความสวยงามให้เทอราเรียมของคุณ **คำสั่ง:** เพิ่ม keyframe animation CSS เพื่อทำให้ต้นไม้ในเทอราเรียมหวิวช้าๆ ซ้ายขวา สร้างอนิเมชันการโยกที่หมุนต้นไม้เล็กน้อย (2-3 องศา) ซ้ายและขวา ใช้ความยาวเวลา 3-4 วินาที และใช้กับคลาส `.plant` ให้อนิเมชันวนลูปไม่รู้จบและมี easing function เพื่อการเคลื่อนไหวที่เป็นธรรมชาติ เรียนรู้เพิ่มเติมเกี่ยวกับ [โหมด agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่ ## 🚀 ความท้าทาย: การเพิ่มแสงสะท้อนบนแก้ว พร้อมหรือยังที่จะเพิ่มแสงสะท้อนที่สมจริงบนโหลเทอราเรียม? เทคนิคนี้จะเพิ่มความลึกและความสมจริงให้กับการออกแบบ คุณจะสร้างไฮไลต์สีขาวหรือสีอ่อนในรูปวงรีเล็กๆ ที่สะท้อนแสงเสมือนจริง วางตำแหน่งอย่างเหมาะสมทางด้านซ้ายของโหล ใช้ความโปร่งใสและเบลอให้เหมาะสมเพื่อสร้างแสงสะท้อนที่สมจริง ใช้ `border-radius` เพื่อสร้างรูปฟองออร์แกนิก และลองใช้กราเดียนต์หรือกล่องเงาเพื่อเพิ่มความสมจริงยิ่งขึ้น ## แบบทดสอบหลังเรียน [แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/quiz/18) ## ขยายความรู้ CSS ของคุณ CSS อาจดูซับซ้อนในตอนแรก แต่ความเข้าใจหลักการเหล่านี้จะเป็นพื้นฐานที่มั่นคงสำหรับเทคนิคขั้นสูง **หัวข้อ CSS ต่อไปที่คุณควรเรียนรู้:** - **Flexbox** – ช่วยจัดแนวและกระจายองค์ประกอบให้เรียบง่ายขึ้น - **CSS Grid** – ให้เครื่องมือทรงพลังสำหรับสร้างเลย์เอาต์ซับซ้อน - **CSS Variables** – ลดการซ้ำซ้อนและเพิ่มความง่ายในการบำรุงรักษา - **Responsive design** – ทำให้เว็บไซต์ใช้งานได้ดีในขนาดหน้าจอแตกต่างกัน ### แหล่งเรียนรู้เชิงโต้ตอบ ฝึกฝนแนวคิดเหล่านี้ด้วยเกมสนุกๆ: - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) – ฝึก Flexbox ผ่านความท้าทายสนุกๆ - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) – เรียน CSS Grid ด้วยการปลูกแครอทเสมือน - 🎯 [CSS Battle](https://cssbattle.dev/) – ทดสอบทักษะ CSS ของคุณด้วยความท้าทายการเขียนโค้ด ### เรียนรู้อื่นๆ สำหรับพื้นฐาน CSS อย่างสมบูรณ์ ให้ทำโมดูล Microsoft Learn นี้: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) ### ⚡ **สิ่งที่คุณทำได้ใน 5 นาทีถัดไป** - [ ] เปิด DevTools และตรวจสอบสไตล์ CSS บนเว็บไซต์ใดก็ได้ผ่านแผง Elements - [ ] สร้างไฟล์ CSS ง่ายๆ และเชื่อมโยงกับหน้า HTML - [ ] ลองเปลี่ยนสีโดยใช้วิธีต่างๆ: hex, RGB, และชื่อสี - [ ] ฝึกฝนกล่องโมเดล (box model) โดยเพิ่ม padding และ margin ให้กับ div ### 🎯 **สิ่งที่คุณทำได้ในชั่วโมงนี้** - [ ] ทำแบบทดสอบหลังเรียนและทบทวนพื้นฐาน CSS - [ ] แต่งหน้าเว็บ HTML ของคุณด้วยฟอนต์ สี และระยะห่าง - [ ] สร้างเลย์เอาต์ง่ายๆ ด้วย flexbox หรือ grid - [ ] ทดลองใช้ CSS transitions เพื่อเอฟเฟกต์ที่ลื่นไหล - [ ] ฝึกทำ responsive design ด้วย media queries ### 📅 **การผจญภัยใน CSS เป็นเวลา 1 สัปดาห์** - [ ] ทำงานมอบหมายการแต่งเทอราเรียมด้วยความคิดสร้างสรรค์ - [ ] เชี่ยวชาญ CSS Grid โดยสร้างเลย์เอาต์แกลเลอรีรูปภาพ - [ ] เรียนรู้ CSS animations เพื่อเพิ่มชีวิตชีวาให้การออกแบบ - [ ] สำรวจ CSS preprocessors เช่น Sass หรือ Less - [ ] ศึกษาหลักการออกแบบและประยุกต์ใช้กับ CSS ของคุณ - [ ] วิเคราะห์และสร้างสรรค์การออกแบบที่น่าสนใจที่คุณเจอออนไลน์ ### 🌟 **ชำนาญการออกแบบ CSS ภายใน 1 เดือน** - [ ] สร้างระบบการออกแบบเว็บไซต์ตอบสนองครบวงจร - [ ] เรียนรู้ CSS-in-JS หรือเฟรมเวิร์กแบบ utility-first อย่าง Tailwind - [ ] มีส่วนร่วมในโปรเจกต์โอเพนซอร์สด้วยการปรับปรุง CSS - [ ] เชี่ยวชาญแนวคิด CSS ขั้นสูงเช่น CSS custom properties และ containment - [ ] สร้างไลบรารีคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ด้วย CSS แบบโมดูลาร์ - [ ] เป็นพี่เลี้ยงผู้เรียน CSS คนอื่นและแบ่งปันความรู้ด้านการออกแบบ ## 🎯 ไทม์ไลน์ความชำนาญ CSS ของคุณ ```mermaid timeline title ความก้าวหน้าในการเรียนรู้ CSS section พื้นฐาน (10 นาที) การเชื่อมต่อไฟล์: การเชื่อม CSS กับ HTML : เข้าใจกฎการซ้อนทับ : เรียนรู้พื้นฐานการสืบทอด section ตัวเลือก (15 นาที) การกำหนดเป้าหมายองค์ประกอบ: ตัวเลือกองค์ประกอบ : รูปแบบคลาส : ความเฉพาะเจาะจงของ ID : ตัวเชื่อม section กล่องโมเดล (20 นาที) พื้นฐานเค้าโครง: ขอบเขตและระยะขอบ : คุณสมบัติของกรอบขอบ : การกำหนดขนาดเนื้อหา : พฤติกรรม box-sizing section การจัดตำแหน่ง (25 นาที) การวางองค์ประกอบ: แบบคงที่กับแบบสัมพันธ์ : การจัดตำแหน่งแบบสัมบูรณ์ : การจัดชั้น z-index : หน่วยตอบสนอง section การออกแบบภาพ (30 นาที) ความชำนาญการตกแต่ง: สีและความโปร่งใส : เงาและเอฟเฟกต์ : การเปลี่ยนสถานะ : คุณสมบัติการเปลี่ยนรูป section การออกแบบตอบสนอง (45 นาที) การรองรับหลายอุปกรณ์: คำสั่ง media queries : เค้าโครงยืดหยุ่น : แนวทาง mobile-first : การปรับแต่ง viewport section เทคนิคขั้นสูง (1 สัปดาห์) CSS สมัยใหม่: เค้าโครง Flexbox : ระบบ CSS Grid : คุณสมบัติที่กำหนดเอง : แอนิเมชัน keyframes section ทักษะมืออาชีพ (1 เดือน) สถาปัตยกรรม CSS: รูปแบบคอมโพเนนต์ : โค้ดที่ดูแลรักษาได้ : การเพิ่มประสิทธิภาพ : ความเข้ากันได้ข้ามเบราว์เซอร์ ``` ### 🛠️ สรุปชุดเครื่องมือ CSS ของคุณ หลังจากเรียนจบบทเรียนนี้ คุณจะมี: - **ความเข้าใจเรขาคณิตแบบ Cascade**: วิธีการที่สไตล์สืบทอดและแทนที่กัน - **ความชำนาญในการเลือก (Selector Mastery)**: การกำหนดเป้าหมายอย่างแม่นยำด้วยองค์ประกอบ คลาส และ ID - **ทักษะการจัดตำแหน่ง**: การวางและซ้อนส่วนประกอบอย่างมียุทธศาสตร์ - **การออกแบบด้วยการมองเห็น**: สร้างเอฟเฟกต์แก้ว เงา และความโปร่งใส - **เทคนิคตอบสนอง**: เลย์เอาต์ที่ตั้งด้วยเปอร์เซ็นต์ซึ่งปรับให้เข้ากับหน้าจอใดก็ได้ - **การจัดการโค้ด**: โครงสร้าง CSS ที่สะอาดและดูแลรักษาง่าย - **แนวปฏิบัติสมัยใหม่**: ใช้หน่วยสัมพัทธ์และแบบแผนการออกแบบที่เข้าถึงได้ **ขั้นตอนถัดไป**: เทอราเรียมของคุณตอนนี้มีทั้งโครงสร้าง (HTML) และสไตล์ (CSS) บทเรียนสุดท้ายจะเพิ่มความโต้ตอบด้วย JavaScript! ## งานมอบหมาย [CSS Refactoring](assignment.md) --- **ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้ความถูกต้องสูงสุด โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถูกถือเป็นแหล่งข้อมูลที่มีอำนาจสำหรับข้อมูลดังกล่าว สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้การแปลโดยมนุษย์มืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่อาจเกิดขึ้นจากการใช้การแปลนี้
ความสูง 5%
ตำแหน่งบนสุด"] --> A B1["ความกว้าง 60%
ความสูง 80%
มุมโค้งมน
ความทึบแสง 0.5"] --> B C1["ความกว้าง 60%
ความสูง 5%
สีน้ำตาลเข้ม
ชั้นล่าง"] --> C D1["ความกว้าง 50%
ความสูง 1%
ตำแหน่งล่างสุด"] --> D F1["เงาเบาๆ
ความโปร่งใส
ชั้นซ้อน Z-index"] --> F style E fill:#d1e1df,stroke:#3a241d style A fill:#e8f5e8 style B fill:#e8f5e8 style C fill:#8B4513 style D fill:#e8f5e8 ``` ### การสร้างส่วนประกอบโหลแก้ว เรามาสร้างโหลเทอราเรียมทีละชิ้น ทุกชิ้นใช้ตำแหน่ง absolute และการกำหนดขนาดเป็นเปอร์เซ็นต์เพื่อรองรับการแสดงผลที่ตอบสนอง: ```css .jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); } .jar-top { width: 50%; height: 5%; background: #d1e1df; position: absolute; bottom: 80.5%; left: 25%; opacity: 0.7; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; } .jar-bottom { width: 50%; height: 1%; background: #d1e1df; position: absolute; bottom: 0; left: 25%; opacity: 0.7; border-radius: 0 0 0.5rem 0.5rem; } .dirt { width: 60%; height: 5%; background: #3a241d; position: absolute; border-radius: 0 0 1rem 1rem; bottom: 1%; left: 20%; opacity: 0.7; z-index: -1; } ``` **การทำความเข้าใจการสร้างเทอราเรียม:** - **ใช้** ขนาดที่ตั้งเป็นเปอร์เซ็นต์เพื่อให้ขยายได้ตามขนาดหน้าจอ - **จัดตำแหน่ง** องค์ประกอบแบบ absolute เพื่อวางซ้อนและจัดแนวได้อย่างแม่นยำ - **ใช้** ค่า opacity ต่าง ๆ เพื่อสร้างเอฟเฟกต์ความโปร่งใสของแก้ว - **ตั้งค่า** `z-index` เพื่อการวางซ้อนให้ต้นไม้ปรากฏภายในโหล - **เพิ่ม** เงากล่องและความโค้งของขอบที่ละเอียดเพื่อให้ดูสมจริงมากขึ้น ### การออกแบบตอบสนองด้วยเปอร์เซ็นต์ สังเกตว่าทุกขนาดใช้เปอร์เซ็นต์แทนค่าพิกเซลที่ตายตัว: **เหตุผลที่สำคัญ:** - **ทำให้** เทอราเรียมปรับขนาดตามสัดส่วนบนหน้าจอทุกขนาด - **รักษา** ความสัมพันธ์ทางภาพระหว่างส่วนประกอบโหลแก้ว - **ให้** ประสบการณ์ที่สอดคล้องกันตั้งแต่โทรศัพท์มือถือจนถึงจอมอนิเตอร์ใหญ่ - **อนุญาต** ให้การออกแบบปรับเปลี่ยนได้โดยไม่ทำให้เลย์เอาต์เสียหาย ### หน่วย CSS ในการปฏิบัติ เราใช้หน่วย `rem` สำหรับ border-radius ซึ่งปรับตามขนาดฟอนต์ราก นี่ช่วยสร้างการออกแบบที่เข้าถึงง่ายขึ้นและเคารพการตั้งค่าฟอนต์ของผู้ใช้ เรียนรู้เพิ่มเติมเกี่ยวกับ [หน่วยสัมพัทธ์ CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ในข้อกำหนดอย่างเป็นทางการ ✅ **ทดลองปรับแต่งด้วยสายตา**: ลองแก้ไขค่าต่างๆ และสังเกตผลลัพธ์: - เปลี่ยนความทึบของโหลจาก 0.5 เป็น 0.8 – สิ่งนี้มีผลต่อการปรากฏของแก้วอย่างไร? - ปรับสีดินจาก `#3a241d` เป็น `#8B4513` – มีผลกระทบทางภาพอย่างไร? - เปลี่ยน `z-index` ของดินเป็น 2 – จะเกิดอะไรขึ้นกับการวางซ้อน? ### 🔄 **การตรวจสอบความเข้าใจ** **ความเข้าใจการออกแบบด้วย CSS**: ยืนยันความเข้าใจด้านการออกแบบด้วย CSS: - ✅ ขนาดแบบเปอร์เซ็นต์ช่วยสร้างการออกแบบตอบสนองได้อย่างไร? - ✅ ทำไม opacity ถึงช่วยสร้างเอฟเฟกต์ความโปร่งใสของแก้ว? - ✅ บทบาทของ z-index ในการวางซ้อนองค์ประกอบคืออะไร? - ✅ ค่าของ border-radius ช่วยสร้างรูปร่างโหลอย่างไร? **หลักการออกแบบ**: สังเกตว่าเราสร้างภาพซับซ้อนจากรูปทรงง่ายๆ: 1. **สี่เหลี่ยมผืนผ้า** → **สี่เหลี่ยมมุมโค้ง** → **ส่วนประกอบโหล** 2. **สีแบนๆ** → **opacity** → **เอฟเฟกต์แก้ว** 3. **องค์ประกอบเดี่ยว** → **การวางซ้อนเป็นชั้นๆ** → **ลักษณะ 3 มิติ** --- ## ความท้าทาย GitHub Copilot Agent 🚀 ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้ให้สำเร็จ: **คำอธิบาย:** สร้างอนิเมชัน CSS ให้ต้นไม้ในเทอราเรียมหวิวไปมาช้าๆ เสมือนลมพัดเบาๆ ซึ่งจะช่วยฝึกทักษะการสร้างอนิเมชัน CSS, การแปลงรูป และ keyframes พร้อมเพิ่มความสวยงามให้เทอราเรียมของคุณ **คำสั่ง:** เพิ่ม keyframe animation CSS เพื่อทำให้ต้นไม้ในเทอราเรียมหวิวช้าๆ ซ้ายขวา สร้างอนิเมชันการโยกที่หมุนต้นไม้เล็กน้อย (2-3 องศา) ซ้ายและขวา ใช้ความยาวเวลา 3-4 วินาที และใช้กับคลาส `.plant` ให้อนิเมชันวนลูปไม่รู้จบและมี easing function เพื่อการเคลื่อนไหวที่เป็นธรรมชาติ เรียนรู้เพิ่มเติมเกี่ยวกับ [โหมด agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่ ## 🚀 ความท้าทาย: การเพิ่มแสงสะท้อนบนแก้ว พร้อมหรือยังที่จะเพิ่มแสงสะท้อนที่สมจริงบนโหลเทอราเรียม? เทคนิคนี้จะเพิ่มความลึกและความสมจริงให้กับการออกแบบ คุณจะสร้างไฮไลต์สีขาวหรือสีอ่อนในรูปวงรีเล็กๆ ที่สะท้อนแสงเสมือนจริง วางตำแหน่งอย่างเหมาะสมทางด้านซ้ายของโหล ใช้ความโปร่งใสและเบลอให้เหมาะสมเพื่อสร้างแสงสะท้อนที่สมจริง ใช้ `border-radius` เพื่อสร้างรูปฟองออร์แกนิก และลองใช้กราเดียนต์หรือกล่องเงาเพื่อเพิ่มความสมจริงยิ่งขึ้น ## แบบทดสอบหลังเรียน [แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/quiz/18) ## ขยายความรู้ CSS ของคุณ CSS อาจดูซับซ้อนในตอนแรก แต่ความเข้าใจหลักการเหล่านี้จะเป็นพื้นฐานที่มั่นคงสำหรับเทคนิคขั้นสูง **หัวข้อ CSS ต่อไปที่คุณควรเรียนรู้:** - **Flexbox** – ช่วยจัดแนวและกระจายองค์ประกอบให้เรียบง่ายขึ้น - **CSS Grid** – ให้เครื่องมือทรงพลังสำหรับสร้างเลย์เอาต์ซับซ้อน - **CSS Variables** – ลดการซ้ำซ้อนและเพิ่มความง่ายในการบำรุงรักษา - **Responsive design** – ทำให้เว็บไซต์ใช้งานได้ดีในขนาดหน้าจอแตกต่างกัน ### แหล่งเรียนรู้เชิงโต้ตอบ ฝึกฝนแนวคิดเหล่านี้ด้วยเกมสนุกๆ: - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) – ฝึก Flexbox ผ่านความท้าทายสนุกๆ - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) – เรียน CSS Grid ด้วยการปลูกแครอทเสมือน - 🎯 [CSS Battle](https://cssbattle.dev/) – ทดสอบทักษะ CSS ของคุณด้วยความท้าทายการเขียนโค้ด ### เรียนรู้อื่นๆ สำหรับพื้นฐาน CSS อย่างสมบูรณ์ ให้ทำโมดูล Microsoft Learn นี้: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) ### ⚡ **สิ่งที่คุณทำได้ใน 5 นาทีถัดไป** - [ ] เปิด DevTools และตรวจสอบสไตล์ CSS บนเว็บไซต์ใดก็ได้ผ่านแผง Elements - [ ] สร้างไฟล์ CSS ง่ายๆ และเชื่อมโยงกับหน้า HTML - [ ] ลองเปลี่ยนสีโดยใช้วิธีต่างๆ: hex, RGB, และชื่อสี - [ ] ฝึกฝนกล่องโมเดล (box model) โดยเพิ่ม padding และ margin ให้กับ div ### 🎯 **สิ่งที่คุณทำได้ในชั่วโมงนี้** - [ ] ทำแบบทดสอบหลังเรียนและทบทวนพื้นฐาน CSS - [ ] แต่งหน้าเว็บ HTML ของคุณด้วยฟอนต์ สี และระยะห่าง - [ ] สร้างเลย์เอาต์ง่ายๆ ด้วย flexbox หรือ grid - [ ] ทดลองใช้ CSS transitions เพื่อเอฟเฟกต์ที่ลื่นไหล - [ ] ฝึกทำ responsive design ด้วย media queries ### 📅 **การผจญภัยใน CSS เป็นเวลา 1 สัปดาห์** - [ ] ทำงานมอบหมายการแต่งเทอราเรียมด้วยความคิดสร้างสรรค์ - [ ] เชี่ยวชาญ CSS Grid โดยสร้างเลย์เอาต์แกลเลอรีรูปภาพ - [ ] เรียนรู้ CSS animations เพื่อเพิ่มชีวิตชีวาให้การออกแบบ - [ ] สำรวจ CSS preprocessors เช่น Sass หรือ Less - [ ] ศึกษาหลักการออกแบบและประยุกต์ใช้กับ CSS ของคุณ - [ ] วิเคราะห์และสร้างสรรค์การออกแบบที่น่าสนใจที่คุณเจอออนไลน์ ### 🌟 **ชำนาญการออกแบบ CSS ภายใน 1 เดือน** - [ ] สร้างระบบการออกแบบเว็บไซต์ตอบสนองครบวงจร - [ ] เรียนรู้ CSS-in-JS หรือเฟรมเวิร์กแบบ utility-first อย่าง Tailwind - [ ] มีส่วนร่วมในโปรเจกต์โอเพนซอร์สด้วยการปรับปรุง CSS - [ ] เชี่ยวชาญแนวคิด CSS ขั้นสูงเช่น CSS custom properties และ containment - [ ] สร้างไลบรารีคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ด้วย CSS แบบโมดูลาร์ - [ ] เป็นพี่เลี้ยงผู้เรียน CSS คนอื่นและแบ่งปันความรู้ด้านการออกแบบ ## 🎯 ไทม์ไลน์ความชำนาญ CSS ของคุณ ```mermaid timeline title ความก้าวหน้าในการเรียนรู้ CSS section พื้นฐาน (10 นาที) การเชื่อมต่อไฟล์: การเชื่อม CSS กับ HTML : เข้าใจกฎการซ้อนทับ : เรียนรู้พื้นฐานการสืบทอด section ตัวเลือก (15 นาที) การกำหนดเป้าหมายองค์ประกอบ: ตัวเลือกองค์ประกอบ : รูปแบบคลาส : ความเฉพาะเจาะจงของ ID : ตัวเชื่อม section กล่องโมเดล (20 นาที) พื้นฐานเค้าโครง: ขอบเขตและระยะขอบ : คุณสมบัติของกรอบขอบ : การกำหนดขนาดเนื้อหา : พฤติกรรม box-sizing section การจัดตำแหน่ง (25 นาที) การวางองค์ประกอบ: แบบคงที่กับแบบสัมพันธ์ : การจัดตำแหน่งแบบสัมบูรณ์ : การจัดชั้น z-index : หน่วยตอบสนอง section การออกแบบภาพ (30 นาที) ความชำนาญการตกแต่ง: สีและความโปร่งใส : เงาและเอฟเฟกต์ : การเปลี่ยนสถานะ : คุณสมบัติการเปลี่ยนรูป section การออกแบบตอบสนอง (45 นาที) การรองรับหลายอุปกรณ์: คำสั่ง media queries : เค้าโครงยืดหยุ่น : แนวทาง mobile-first : การปรับแต่ง viewport section เทคนิคขั้นสูง (1 สัปดาห์) CSS สมัยใหม่: เค้าโครง Flexbox : ระบบ CSS Grid : คุณสมบัติที่กำหนดเอง : แอนิเมชัน keyframes section ทักษะมืออาชีพ (1 เดือน) สถาปัตยกรรม CSS: รูปแบบคอมโพเนนต์ : โค้ดที่ดูแลรักษาได้ : การเพิ่มประสิทธิภาพ : ความเข้ากันได้ข้ามเบราว์เซอร์ ``` ### 🛠️ สรุปชุดเครื่องมือ CSS ของคุณ หลังจากเรียนจบบทเรียนนี้ คุณจะมี: - **ความเข้าใจเรขาคณิตแบบ Cascade**: วิธีการที่สไตล์สืบทอดและแทนที่กัน - **ความชำนาญในการเลือก (Selector Mastery)**: การกำหนดเป้าหมายอย่างแม่นยำด้วยองค์ประกอบ คลาส และ ID - **ทักษะการจัดตำแหน่ง**: การวางและซ้อนส่วนประกอบอย่างมียุทธศาสตร์ - **การออกแบบด้วยการมองเห็น**: สร้างเอฟเฟกต์แก้ว เงา และความโปร่งใส - **เทคนิคตอบสนอง**: เลย์เอาต์ที่ตั้งด้วยเปอร์เซ็นต์ซึ่งปรับให้เข้ากับหน้าจอใดก็ได้ - **การจัดการโค้ด**: โครงสร้าง CSS ที่สะอาดและดูแลรักษาง่าย - **แนวปฏิบัติสมัยใหม่**: ใช้หน่วยสัมพัทธ์และแบบแผนการออกแบบที่เข้าถึงได้ **ขั้นตอนถัดไป**: เทอราเรียมของคุณตอนนี้มีทั้งโครงสร้าง (HTML) และสไตล์ (CSS) บทเรียนสุดท้ายจะเพิ่มความโต้ตอบด้วย JavaScript! ## งานมอบหมาย [CSS Refactoring](assignment.md) --- **ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้ความถูกต้องสูงสุด โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถูกถือเป็นแหล่งข้อมูลที่มีอำนาจสำหรับข้อมูลดังกล่าว สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้การแปลโดยมนุษย์มืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่อาจเกิดขึ้นจากการใช้การแปลนี้