My Terrarium
``` **สิ่งที่โค้ดนี้ทำ:** - **ใช้** สีแดงโดยตรงกับองค์ประกอบ `` โดยใช้สไตล์แบบ inline
- **ใช้** แอตทริบิวต์ `style` เพื่อฝัง CSS โดยตรงใน HTML
- **สร้าง** กฎสไตล์ที่มีลำดับความสำคัญสูงสุดสำหรับองค์ประกอบนี้โดยเฉพาะ
จากนั้นเพิ่มกฎนี้ในไฟล์ `style.css` ของคุณ:
```css
h1 {
color: blue;
}
```
**ในโค้ดด้านบน เราได้:**
- **กำหนด** กฎ CSS ที่กำหนดเป้าหมายองค์ประกอบ `` ทั้งหมด
- **ตั้งค่า** สีข้อความเป็นสีน้ำเงินโดยใช้สไตล์ชีตภายนอก
- **สร้าง** กฎที่มีลำดับความสำคัญต่ำกว่าสไตล์แบบ inline
✅ **ตรวจสอบความรู้**: สีใดที่แสดงในแอปเว็บของคุณ? ทำไมสีนี้ถึงชนะ? คุณสามารถคิดถึงสถานการณ์ที่คุณอาจต้องการแทนที่สไตล์ได้หรือไม่?
> 💡 **ลำดับความสำคัญของ CSS (จากสูงไปต่ำ):**
> 1. **สไตล์แบบ inline** (แอตทริบิวต์ style)
> 2. **IDs** (#myId)
> 3. **Classes** (.myClass) และแอตทริบิวต์
> 4. **ตัวเลือกองค์ประกอบ** (h1, div, p)
> 5. **ค่าเริ่มต้นของเบราว์เซอร์**
## การทำงานของ CSS Inheritance
CSS inheritance ทำงานเหมือนพันธุกรรม - องค์ประกอบจะรับคุณสมบัติบางอย่างจากองค์ประกอบแม่ของมัน หากคุณตั้งค่าฟอนต์ในองค์ประกอบ body ข้อความทั้งหมดภายในจะใช้ฟอนต์เดียวกันโดยอัตโนมัติ มันคล้ายกับลักษณะใบหน้าที่โดดเด่นของครอบครัวที่ส่งต่อกันมาหลายรุ่นโดยไม่ต้องระบุสำหรับแต่ละบุคคล
อย่างไรก็ตาม ไม่ใช่ทุกอย่างที่ได้รับการสืบทอด สไตล์ข้อความ เช่น ฟอนต์และสีจะได้รับการสืบทอด แต่คุณสมบัติการจัดวาง เช่น ระยะขอบและเส้นขอบจะไม่ได้รับการสืบทอด เช่นเดียวกับที่ลูกอาจได้รับลักษณะทางกายภาพแต่ไม่ใช่รสนิยมการแต่งตัวของพ่อแม่
### สังเกตการสืบทอดฟอนต์
มาดูการสืบทอดโดยตั้งค่าฟอนต์ในองค์ประกอบ ``:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
**การทำงานของโค้ดนี้:**
- **ตั้งค่า** ฟอนต์สำหรับทั้งหน้าโดยกำหนดเป้าหมายองค์ประกอบ ``
- **ใช้** ฟอนต์สำรองเพื่อความเข้ากันได้ของเบราว์เซอร์ที่ดีขึ้น
- **ใช้** ฟอนต์ระบบที่ทันสมัยซึ่งดูดีในระบบปฏิบัติการต่างๆ
- **ทำให้**องค์ประกอบลูกทั้งหมดรับฟอนต์นี้โดยอัตโนมัติ เว้นแต่จะถูกแทนที่โดยเฉพาะ
เปิดเครื่องมือพัฒนาเบราว์เซอร์ของคุณ (F12) ไปที่แท็บ Elements และตรวจสอบองค์ประกอบ `` ของคุณ คุณจะเห็นว่ามันรับฟอนต์จาก body:
✅ **ทดลอง**: ลองตั้งค่าคุณสมบัติที่สามารถสืบทอดได้อื่นๆ ใน `` เช่น `color`, `line-height` หรือ `text-align` จะเกิดอะไรขึ้นกับหัวข้อและองค์ประกอบอื่นๆ ของคุณ?
> 📝 **คุณสมบัติที่สามารถสืบทอดได้**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **คุณสมบัติที่ไม่สามารถสืบทอดได้**: `margin`, `padding`, `border`, `width`, `height`, `position`
## การใช้ CSS Selectors อย่างเชี่ยวชาญ
CSS selectors คือวิธีการกำหนดเป้าหมายองค์ประกอบเฉพาะเพื่อการออกแบบ พวกมันทำงานเหมือนการให้คำแนะนำที่แม่นยำ - แทนที่จะพูดว่า "บ้าน" คุณอาจพูดว่า "บ้านสีฟ้าที่มีประตูสีแดงบนถนนเมเปิล"
CSS มีวิธีการต่างๆ ในการกำหนดเป้าหมาย และการเลือก selector ที่เหมาะสมก็เหมือนการเลือกเครื่องมือที่เหมาะสมสำหรับงาน บางครั้งคุณต้องการออกแบบประตูทุกบานในละแวกนั้น และบางครั้งแค่ประตูบานเดียว
### Element Selectors (Tags)
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;
}
```
**การทำงานของสไตล์เหล่านี้:**
- **ตั้งค่า** การพิมพ์ที่สม่ำเสมอทั่วทั้งหน้าโดยใช้ selector `body`
- **ลบ** ระยะขอบและการเว้นระยะห่างเริ่มต้นของเบราว์เซอร์เพื่อการควบคุมที่ดีขึ้น
- **ออกแบบ** องค์ประกอบหัวข้อทั้งหมดด้วยสี การจัดตำแหน่ง และการเว้นระยะห่าง
- **ใช้** หน่วย `rem` สำหรับขนาดฟอนต์ที่ปรับขยายได้และเข้าถึงได้
ในขณะที่ element selectors ทำงานได้ดีสำหรับการออกแบบทั่วไป คุณจะต้องใช้ selectors ที่เฉพาะเจาะจงมากขึ้นเพื่อออกแบบส่วนประกอบเฉพาะ เช่น พืชใน terrarium ของคุณ
### ID Selectors สำหรับองค์ประกอบเฉพาะ
ID selectors ใช้สัญลักษณ์ `#` และกำหนดเป้าหมายองค์ประกอบที่มีแอตทริบิวต์ `id` เฉพาะ เนื่องจาก ID ต้องไม่ซ้ำกันในหน้า จึงเหมาะสำหรับการออกแบบองค์ประกอบเฉพาะ เช่น ภาชนะพืชด้านซ้ายและขวาใน terrarium ของเรา
มาสร้างสไตล์สำหรับภาชนะด้านข้างของ 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` (viewport height) สำหรับความสูงที่ตอบสนองและปรับให้เข้ากับขนาดหน้าจอ
- **ใช้** `box-sizing: border-box` เพื่อให้ padding รวมอยู่ในความกว้างทั้งหมด
- **ลบ** หน่วย `px` ที่ไม่จำเป็นออกจากค่าศูนย์เพื่อให้โค้ดสะอาดขึ้น
- **ตั้งค่า** สีพื้นหลังที่นุ่มนวลซึ่งดูสบายตากว่าสีเทาเข้ม
✅ **ความท้าทายด้านคุณภาพโค้ด**: สังเกตว่า CSS นี้ละเมิดหลักการ DRY (Don't Repeat Yourself) คุณสามารถปรับปรุงโค้ดโดยใช้ทั้ง ID และ class ได้หรือไม่?
**วิธีการปรับปรุง:**
```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 ใช้สัญลักษณ์ `.` และเหมาะเมื่อคุณต้องการใช้สไตล์เดียวกันกับองค์ประกอบหลายๆ ตัว ต่างจาก ID classes สามารถนำกลับมาใช้ใหม่ได้ทั่วทั้ง HTML ของคุณ ทำให้เหมาะสำหรับรูปแบบการออกแบบที่สม่ำเสมอ
ใน terrarium ของเรา พืชแต่ละต้นต้องการสไตล์ที่คล้ายกัน แต่ยังต้องการการจัดตำแหน่งเฉพาะ เราจะใช้ class สำหรับสไตล์ที่ใช้ร่วมกันและ ID สำหรับการจัดตำแหน่งเฉพาะ
**นี่คือโครงสร้าง 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 เพื่อสร้างบริบทการจัดตำแหน่ง
- **ตั้งค่า** plant holder แต่ละตัวให้มีความสูง 13% เพื่อให้พืชทั้งหมดพอดีในแนวตั้งโดยไม่ต้องเลื่อน
- **เลื่อน** holder ไปทางซ้ายเล็กน้อยเพื่อให้พืชอยู่ตรงกลางภายในภาชนะ
- **อนุญาต** ให้พืชปรับขนาดได้ด้วยคุณสมบัติ `max-width` และ `max-height`
- **ใช้** `z-index` เพื่อวางพืชเหนือองค์ประกอบอื่นๆ ใน terrarium
- **เพิ่ม** เอฟเฟกต์ hover ที่ละเอียดอ่อนด้วย CSS transitions เพื่อการโต้ตอบที่ดีขึ้น
✅ **คิดวิเคราะห์**: ทำไมเราต้องใช้ทั้ง `.plant-holder` และ `.plant` selectors? จะเกิดอะไรขึ้นถ้าเราพยายามใช้แค่ตัวเดียว?
> 💡 **รูปแบบการออกแบบ**: ภาชนะ (`.plant-holder`) ควบคุมเลย์เอาต์และการจัดตำแหน่ง ในขณะที่เนื้อหา (`.plant`) ควบคุมรูปลักษณ์และการปรับขนาด การแยกส่วนนี้ทำให้โค้ดดูแลรักษาและยืดหยุ่นได้ง่ายขึ้น
## การทำความเข้าใจการจัดตำแหน่ง CSS
การจัดตำแหน่ง CSS เปรียบเสมือนการเป็นผู้กำกับเวทีสำหรับการแสดง - คุณกำหนดว่าแต่ละนักแสดงจะยืนอยู่ที่ไหนและเคลื่อนไหวอย่างไรบนเวที นักแสดงบางคนอาจอยู่ในตำแหน่งปกติ ในขณะที่บางคนต้องการการจัดตำแหน่งเฉพาะเพื่อสร้างความโดดเด่น
เมื่อคุณเข้าใจการจัดตำแหน่งแล้ว ความท้าทายในการจัดเลย์เอาต์หลายๆ อย่างจะกลายเป็นเรื่องง่ายขึ้น ต้องการแถบนำทางที่อยู่ด้านบนขณะที่ผู้ใช้เลื่อนหน้าจอใช่ไหม? การจัดตำแหน่งช่วยได้ ต้องการ tooltip ที่ปรากฏในตำแหน่งเฉพาะใช่ไหม? นั่นก็เป็นหน้าที่ของการจัดตำแหน่งเช่นกัน
### ค่าการจัดตำแหน่งทั้งห้า
| ค่า Position | พฤติกรรม | กรณีการใช้งาน |
|---------------|-----------|----------------|
| `static` | การจัดวางเริ่มต้น ไม่สนใจ top/left/right/bottom | เลย์เอาต์เอกสารปกติ |
| `relative` | จัดตำแหน่งตามตำแหน่งปกติ | การปรับเล็กน้อย สร้างบริบทการจัดตำแหน่ง |
| `absolute` | จัดตำแหน่งตาม ancestor ที่มีการจัดตำแหน่ง | การวางตำแหน่งที่แม่นยำ การซ้อนทับ |
| `fixed` | จัดตำแหน่งตาม viewport | แถบนำทาง องค์ประกอบลอย |
| `sticky` | สลับระหว่าง relative
มาสร้างโหลเทอร์ราเรียมทีละส่วนกันเถอะ แต่ละส่วนจะใช้การกำหนดตำแหน่งแบบสัมบูรณ์และการปรับขนาดด้วยเปอร์เซ็นต์เพื่อการออกแบบที่ตอบสนอง:
```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;
}
```
**ทำความเข้าใจการสร้างเทอร์ราเรียม:**
- **ใช้** ขนาดที่อิงตามเปอร์เซ็นต์เพื่อการปรับขนาดที่ตอบสนองต่อทุกขนาดหน้าจอ
- **กำหนดตำแหน่ง** องค์ประกอบแบบสัมบูรณ์เพื่อจัดเรียงและวางซ้อนกันอย่างแม่นยำ
- **ปรับใช้** ค่า opacity ต่างๆ เพื่อสร้างเอฟเฟกต์ความโปร่งใสของแก้ว
- **ใช้** `z-index` เพื่อจัดลำดับชั้นให้องค์ประกอบของพืชอยู่ภายในโหล
- **เพิ่ม** เงาแบบกล่องและมุมโค้งที่ละเอียดอ่อนเพื่อให้ดูสมจริงยิ่งขึ้น
### การออกแบบที่ตอบสนองด้วยเปอร์เซ็นต์
สังเกตว่าขนาดทั้งหมดใช้เปอร์เซ็นต์แทนค่าพิกเซลที่ตายตัว:
**เหตุผลที่สำคัญ:**
- **ช่วยให้** เทอร์ราเรียมปรับขนาดได้อย่างสัดส่วนบนหน้าจอทุกขนาด
- **รักษา** ความสัมพันธ์ทางภาพระหว่างส่วนประกอบของโหล
- **มอบ** ประสบการณ์ที่สม่ำเสมอจากโทรศัพท์มือถือไปจนถึงจอคอมพิวเตอร์ขนาดใหญ่
- **ทำให้** การออกแบบปรับตัวได้โดยไม่ทำให้เลย์เอาต์เสียหาย
### หน่วย CSS ในการใช้งาน
เราใช้หน่วย `rem` สำหรับมุมโค้ง (border-radius) ซึ่งปรับขนาดตามขนาดฟอนต์ของราก (root font size) เพื่อสร้างการออกแบบที่เข้าถึงได้มากขึ้นและเคารพการตั้งค่าฟอนต์ของผู้ใช้ เรียนรู้เพิ่มเติมเกี่ยวกับ [หน่วย CSS แบบสัมพัทธ์](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ในเอกสารสเปคอย่างเป็นทางการ
✅ **การทดลองทางภาพ**: ลองปรับค่าเหล่านี้และสังเกตผลลัพธ์:
- เปลี่ยนค่า opacity ของโหลจาก 0.5 เป็น 0.8 – สิ่งนี้ส่งผลต่อรูปลักษณ์ของแก้วอย่างไร?
- ปรับสีดินจาก `#3a241d` เป็น `#8B4513` – ผลกระทบทางภาพเป็นอย่างไร?
- เปลี่ยนค่า `z-index` ของดินเป็น 2 – สิ่งนี้ส่งผลต่อการจัดลำดับชั้นอย่างไร?
---
## ความท้าทาย GitHub Copilot Agent 🚀
ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้:
**คำอธิบาย:** สร้าง CSS animation ที่ทำให้พืชในเทอร์ราเรียมแกว่งไปมาเบาๆ เพื่อจำลองเอฟเฟกต์ลมธรรมชาติ สิ่งนี้จะช่วยให้คุณฝึกการใช้ CSS animations, transforms และ keyframes พร้อมทั้งเพิ่มความน่าสนใจให้กับเทอร์ราเรียมของคุณ
**คำสั่ง:** เพิ่ม CSS keyframe animations เพื่อทำให้พืชในเทอร์ราเรียมแกว่งเบาๆ จากด้านหนึ่งไปอีกด้านหนึ่ง สร้างแอนิเมชันการแกว่งที่หมุนพืชแต่ละต้นเล็กน้อย (2-3 องศา) ซ้ายและขวา โดยมีระยะเวลา 3-4 วินาที และนำไปใช้กับคลาส `.plant` ให้แน่ใจว่าแอนิเมชันวนซ้ำอย่างไม่มีที่สิ้นสุดและมีฟังก์ชัน easing เพื่อการเคลื่อนไหวที่ดูเป็นธรรมชาติ
เรียนรู้เพิ่มเติมเกี่ยวกับ [โหมด Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่
## 🚀 ความท้าทาย: เพิ่มการสะท้อนของแก้ว
พร้อมที่จะเพิ่มความสมจริงให้กับเทอร์ราเรียมของคุณด้วยการสะท้อนของแก้วหรือยัง? เทคนิคนี้จะเพิ่มความลึกและความสมจริงให้กับการออกแบบ
คุณจะสร้างไฮไลต์ที่ละเอียดอ่อนเพื่อจำลองแสงที่สะท้อนจากพื้นผิวแก้ว วิธีนี้คล้ายกับที่จิตรกรยุคเรอเนซองส์อย่าง Jan van Eyck ใช้แสงและการสะท้อนเพื่อทำให้แก้วที่วาดดูมีมิติสามมิติ นี่คือสิ่งที่คุณต้องการ:
**ความท้าทายของคุณ:**
- **สร้าง** รูปทรงวงรีสีขาวหรือสีอ่อนสำหรับการสะท้อนของแก้ว
- **วางตำแหน่ง** รูปทรงเหล่านี้อย่างมีกลยุทธ์ทางด้านซ้ายของโหล
- **ปรับใช้** ค่า opacity และเอฟเฟกต์เบลอที่เหมาะสมเพื่อการสะท้อนแสงที่สมจริง
- **ใช้** `border-radius` เพื่อสร้างรูปทรงที่ดูเป็นธรรมชาติคล้ายฟองอากาศ
- **ทดลอง** ใช้ gradients หรือ box-shadows เพื่อเพิ่มความสมจริง
## แบบทดสอบหลังการบรรยาย
[แบบทดสอบหลังการบรรยาย](https://ff-quizzes.netlify.app/web/quiz/18)
## ขยายความรู้ CSS ของคุณ
CSS อาจดูซับซ้อนในตอนแรก แต่การเข้าใจแนวคิดหลักเหล่านี้จะช่วยสร้างพื้นฐานที่แข็งแกร่งสำหรับเทคนิคขั้นสูง
**พื้นที่การเรียนรู้ CSS ถัดไปของคุณ:**
- **Flexbox** - ช่วยให้ง่ายต่อการจัดตำแหน่งและการกระจายองค์ประกอบ
- **CSS Grid** - มอบเครื่องมือที่ทรงพลังสำหรับการสร้างเลย์เอาต์ที่ซับซ้อน
- **CSS Variables** - ลดการทำซ้ำและปรับปรุงการดูแลรักษา
- **การออกแบบที่ตอบสนอง** - ทำให้เว็บไซต์ทำงานได้ดีในขนาดหน้าจอที่แตกต่างกัน
### แหล่งเรียนรู้แบบโต้ตอบ
ฝึกฝนแนวคิดเหล่านี้ด้วยเกมที่สนุกและมีส่วนร่วม:
- 🐸 [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)
## งานที่ได้รับมอบหมาย
[CSS Refactoring](assignment.md)
---
**ข้อจำกัดความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้
` ของคุณ คุณจะเห็นว่ามันรับฟอนต์จาก body:
✅ **ทดลอง**: ลองตั้งค่าคุณสมบัติที่สามารถสืบทอดได้อื่นๆ ใน `` เช่น `color`, `line-height` หรือ `text-align` จะเกิดอะไรขึ้นกับหัวข้อและองค์ประกอบอื่นๆ ของคุณ?
> 📝 **คุณสมบัติที่สามารถสืบทอดได้**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **คุณสมบัติที่ไม่สามารถสืบทอดได้**: `margin`, `padding`, `border`, `width`, `height`, `position`
## การใช้ CSS Selectors อย่างเชี่ยวชาญ
CSS selectors คือวิธีการกำหนดเป้าหมายองค์ประกอบเฉพาะเพื่อการออกแบบ พวกมันทำงานเหมือนการให้คำแนะนำที่แม่นยำ - แทนที่จะพูดว่า "บ้าน" คุณอาจพูดว่า "บ้านสีฟ้าที่มีประตูสีแดงบนถนนเมเปิล"
CSS มีวิธีการต่างๆ ในการกำหนดเป้าหมาย และการเลือก selector ที่เหมาะสมก็เหมือนการเลือกเครื่องมือที่เหมาะสมสำหรับงาน บางครั้งคุณต้องการออกแบบประตูทุกบานในละแวกนั้น และบางครั้งแค่ประตูบานเดียว
### Element Selectors (Tags)
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;
}
```
**การทำงานของสไตล์เหล่านี้:**
- **ตั้งค่า** การพิมพ์ที่สม่ำเสมอทั่วทั้งหน้าโดยใช้ selector `body`
- **ลบ** ระยะขอบและการเว้นระยะห่างเริ่มต้นของเบราว์เซอร์เพื่อการควบคุมที่ดีขึ้น
- **ออกแบบ** องค์ประกอบหัวข้อทั้งหมดด้วยสี การจัดตำแหน่ง และการเว้นระยะห่าง
- **ใช้** หน่วย `rem` สำหรับขนาดฟอนต์ที่ปรับขยายได้และเข้าถึงได้
ในขณะที่ element selectors ทำงานได้ดีสำหรับการออกแบบทั่วไป คุณจะต้องใช้ selectors ที่เฉพาะเจาะจงมากขึ้นเพื่อออกแบบส่วนประกอบเฉพาะ เช่น พืชใน terrarium ของคุณ
### ID Selectors สำหรับองค์ประกอบเฉพาะ
ID selectors ใช้สัญลักษณ์ `#` และกำหนดเป้าหมายองค์ประกอบที่มีแอตทริบิวต์ `id` เฉพาะ เนื่องจาก ID ต้องไม่ซ้ำกันในหน้า จึงเหมาะสำหรับการออกแบบองค์ประกอบเฉพาะ เช่น ภาชนะพืชด้านซ้ายและขวาใน terrarium ของเรา
มาสร้างสไตล์สำหรับภาชนะด้านข้างของ 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` (viewport height) สำหรับความสูงที่ตอบสนองและปรับให้เข้ากับขนาดหน้าจอ
- **ใช้** `box-sizing: border-box` เพื่อให้ padding รวมอยู่ในความกว้างทั้งหมด
- **ลบ** หน่วย `px` ที่ไม่จำเป็นออกจากค่าศูนย์เพื่อให้โค้ดสะอาดขึ้น
- **ตั้งค่า** สีพื้นหลังที่นุ่มนวลซึ่งดูสบายตากว่าสีเทาเข้ม
✅ **ความท้าทายด้านคุณภาพโค้ด**: สังเกตว่า CSS นี้ละเมิดหลักการ DRY (Don't Repeat Yourself) คุณสามารถปรับปรุงโค้ดโดยใช้ทั้ง ID และ class ได้หรือไม่?
**วิธีการปรับปรุง:**
```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 ใช้สัญลักษณ์ `.` และเหมาะเมื่อคุณต้องการใช้สไตล์เดียวกันกับองค์ประกอบหลายๆ ตัว ต่างจาก ID classes สามารถนำกลับมาใช้ใหม่ได้ทั่วทั้ง HTML ของคุณ ทำให้เหมาะสำหรับรูปแบบการออกแบบที่สม่ำเสมอ
ใน terrarium ของเรา พืชแต่ละต้นต้องการสไตล์ที่คล้ายกัน แต่ยังต้องการการจัดตำแหน่งเฉพาะ เราจะใช้ class สำหรับสไตล์ที่ใช้ร่วมกันและ ID สำหรับการจัดตำแหน่งเฉพาะ
**นี่คือโครงสร้าง 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 เพื่อสร้างบริบทการจัดตำแหน่ง
- **ตั้งค่า** plant holder แต่ละตัวให้มีความสูง 13% เพื่อให้พืชทั้งหมดพอดีในแนวตั้งโดยไม่ต้องเลื่อน
- **เลื่อน** holder ไปทางซ้ายเล็กน้อยเพื่อให้พืชอยู่ตรงกลางภายในภาชนะ
- **อนุญาต** ให้พืชปรับขนาดได้ด้วยคุณสมบัติ `max-width` และ `max-height`
- **ใช้** `z-index` เพื่อวางพืชเหนือองค์ประกอบอื่นๆ ใน terrarium
- **เพิ่ม** เอฟเฟกต์ hover ที่ละเอียดอ่อนด้วย CSS transitions เพื่อการโต้ตอบที่ดีขึ้น
✅ **คิดวิเคราะห์**: ทำไมเราต้องใช้ทั้ง `.plant-holder` และ `.plant` selectors? จะเกิดอะไรขึ้นถ้าเราพยายามใช้แค่ตัวเดียว?
> 💡 **รูปแบบการออกแบบ**: ภาชนะ (`.plant-holder`) ควบคุมเลย์เอาต์และการจัดตำแหน่ง ในขณะที่เนื้อหา (`.plant`) ควบคุมรูปลักษณ์และการปรับขนาด การแยกส่วนนี้ทำให้โค้ดดูแลรักษาและยืดหยุ่นได้ง่ายขึ้น
## การทำความเข้าใจการจัดตำแหน่ง CSS
การจัดตำแหน่ง CSS เปรียบเสมือนการเป็นผู้กำกับเวทีสำหรับการแสดง - คุณกำหนดว่าแต่ละนักแสดงจะยืนอยู่ที่ไหนและเคลื่อนไหวอย่างไรบนเวที นักแสดงบางคนอาจอยู่ในตำแหน่งปกติ ในขณะที่บางคนต้องการการจัดตำแหน่งเฉพาะเพื่อสร้างความโดดเด่น
เมื่อคุณเข้าใจการจัดตำแหน่งแล้ว ความท้าทายในการจัดเลย์เอาต์หลายๆ อย่างจะกลายเป็นเรื่องง่ายขึ้น ต้องการแถบนำทางที่อยู่ด้านบนขณะที่ผู้ใช้เลื่อนหน้าจอใช่ไหม? การจัดตำแหน่งช่วยได้ ต้องการ tooltip ที่ปรากฏในตำแหน่งเฉพาะใช่ไหม? นั่นก็เป็นหน้าที่ของการจัดตำแหน่งเช่นกัน
### ค่าการจัดตำแหน่งทั้งห้า
| ค่า Position | พฤติกรรม | กรณีการใช้งาน |
|---------------|-----------|----------------|
| `static` | การจัดวางเริ่มต้น ไม่สนใจ top/left/right/bottom | เลย์เอาต์เอกสารปกติ |
| `relative` | จัดตำแหน่งตามตำแหน่งปกติ | การปรับเล็กน้อย สร้างบริบทการจัดตำแหน่ง |
| `absolute` | จัดตำแหน่งตาม ancestor ที่มีการจัดตำแหน่ง | การวางตำแหน่งที่แม่นยำ การซ้อนทับ |
| `fixed` | จัดตำแหน่งตาม viewport | แถบนำทาง องค์ประกอบลอย |
| `sticky` | สลับระหว่าง relative
มาสร้างโหลเทอร์ราเรียมทีละส่วนกันเถอะ แต่ละส่วนจะใช้การกำหนดตำแหน่งแบบสัมบูรณ์และการปรับขนาดด้วยเปอร์เซ็นต์เพื่อการออกแบบที่ตอบสนอง:
```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;
}
```
**ทำความเข้าใจการสร้างเทอร์ราเรียม:**
- **ใช้** ขนาดที่อิงตามเปอร์เซ็นต์เพื่อการปรับขนาดที่ตอบสนองต่อทุกขนาดหน้าจอ
- **กำหนดตำแหน่ง** องค์ประกอบแบบสัมบูรณ์เพื่อจัดเรียงและวางซ้อนกันอย่างแม่นยำ
- **ปรับใช้** ค่า opacity ต่างๆ เพื่อสร้างเอฟเฟกต์ความโปร่งใสของแก้ว
- **ใช้** `z-index` เพื่อจัดลำดับชั้นให้องค์ประกอบของพืชอยู่ภายในโหล
- **เพิ่ม** เงาแบบกล่องและมุมโค้งที่ละเอียดอ่อนเพื่อให้ดูสมจริงยิ่งขึ้น
### การออกแบบที่ตอบสนองด้วยเปอร์เซ็นต์
สังเกตว่าขนาดทั้งหมดใช้เปอร์เซ็นต์แทนค่าพิกเซลที่ตายตัว:
**เหตุผลที่สำคัญ:**
- **ช่วยให้** เทอร์ราเรียมปรับขนาดได้อย่างสัดส่วนบนหน้าจอทุกขนาด
- **รักษา** ความสัมพันธ์ทางภาพระหว่างส่วนประกอบของโหล
- **มอบ** ประสบการณ์ที่สม่ำเสมอจากโทรศัพท์มือถือไปจนถึงจอคอมพิวเตอร์ขนาดใหญ่
- **ทำให้** การออกแบบปรับตัวได้โดยไม่ทำให้เลย์เอาต์เสียหาย
### หน่วย CSS ในการใช้งาน
เราใช้หน่วย `rem` สำหรับมุมโค้ง (border-radius) ซึ่งปรับขนาดตามขนาดฟอนต์ของราก (root font size) เพื่อสร้างการออกแบบที่เข้าถึงได้มากขึ้นและเคารพการตั้งค่าฟอนต์ของผู้ใช้ เรียนรู้เพิ่มเติมเกี่ยวกับ [หน่วย CSS แบบสัมพัทธ์](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ในเอกสารสเปคอย่างเป็นทางการ
✅ **การทดลองทางภาพ**: ลองปรับค่าเหล่านี้และสังเกตผลลัพธ์:
- เปลี่ยนค่า opacity ของโหลจาก 0.5 เป็น 0.8 – สิ่งนี้ส่งผลต่อรูปลักษณ์ของแก้วอย่างไร?
- ปรับสีดินจาก `#3a241d` เป็น `#8B4513` – ผลกระทบทางภาพเป็นอย่างไร?
- เปลี่ยนค่า `z-index` ของดินเป็น 2 – สิ่งนี้ส่งผลต่อการจัดลำดับชั้นอย่างไร?
---
## ความท้าทาย GitHub Copilot Agent 🚀
ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้:
**คำอธิบาย:** สร้าง CSS animation ที่ทำให้พืชในเทอร์ราเรียมแกว่งไปมาเบาๆ เพื่อจำลองเอฟเฟกต์ลมธรรมชาติ สิ่งนี้จะช่วยให้คุณฝึกการใช้ CSS animations, transforms และ keyframes พร้อมทั้งเพิ่มความน่าสนใจให้กับเทอร์ราเรียมของคุณ
**คำสั่ง:** เพิ่ม CSS keyframe animations เพื่อทำให้พืชในเทอร์ราเรียมแกว่งเบาๆ จากด้านหนึ่งไปอีกด้านหนึ่ง สร้างแอนิเมชันการแกว่งที่หมุนพืชแต่ละต้นเล็กน้อย (2-3 องศา) ซ้ายและขวา โดยมีระยะเวลา 3-4 วินาที และนำไปใช้กับคลาส `.plant` ให้แน่ใจว่าแอนิเมชันวนซ้ำอย่างไม่มีที่สิ้นสุดและมีฟังก์ชัน easing เพื่อการเคลื่อนไหวที่ดูเป็นธรรมชาติ
เรียนรู้เพิ่มเติมเกี่ยวกับ [โหมด Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่
## 🚀 ความท้าทาย: เพิ่มการสะท้อนของแก้ว
พร้อมที่จะเพิ่มความสมจริงให้กับเทอร์ราเรียมของคุณด้วยการสะท้อนของแก้วหรือยัง? เทคนิคนี้จะเพิ่มความลึกและความสมจริงให้กับการออกแบบ
คุณจะสร้างไฮไลต์ที่ละเอียดอ่อนเพื่อจำลองแสงที่สะท้อนจากพื้นผิวแก้ว วิธีนี้คล้ายกับที่จิตรกรยุคเรอเนซองส์อย่าง Jan van Eyck ใช้แสงและการสะท้อนเพื่อทำให้แก้วที่วาดดูมีมิติสามมิติ นี่คือสิ่งที่คุณต้องการ:
**ความท้าทายของคุณ:**
- **สร้าง** รูปทรงวงรีสีขาวหรือสีอ่อนสำหรับการสะท้อนของแก้ว
- **วางตำแหน่ง** รูปทรงเหล่านี้อย่างมีกลยุทธ์ทางด้านซ้ายของโหล
- **ปรับใช้** ค่า opacity และเอฟเฟกต์เบลอที่เหมาะสมเพื่อการสะท้อนแสงที่สมจริง
- **ใช้** `border-radius` เพื่อสร้างรูปทรงที่ดูเป็นธรรมชาติคล้ายฟองอากาศ
- **ทดลอง** ใช้ gradients หรือ box-shadows เพื่อเพิ่มความสมจริง
## แบบทดสอบหลังการบรรยาย
[แบบทดสอบหลังการบรรยาย](https://ff-quizzes.netlify.app/web/quiz/18)
## ขยายความรู้ CSS ของคุณ
CSS อาจดูซับซ้อนในตอนแรก แต่การเข้าใจแนวคิดหลักเหล่านี้จะช่วยสร้างพื้นฐานที่แข็งแกร่งสำหรับเทคนิคขั้นสูง
**พื้นที่การเรียนรู้ CSS ถัดไปของคุณ:**
- **Flexbox** - ช่วยให้ง่ายต่อการจัดตำแหน่งและการกระจายองค์ประกอบ
- **CSS Grid** - มอบเครื่องมือที่ทรงพลังสำหรับการสร้างเลย์เอาต์ที่ซับซ้อน
- **CSS Variables** - ลดการทำซ้ำและปรับปรุงการดูแลรักษา
- **การออกแบบที่ตอบสนอง** - ทำให้เว็บไซต์ทำงานได้ดีในขนาดหน้าจอที่แตกต่างกัน
### แหล่งเรียนรู้แบบโต้ตอบ
ฝึกฝนแนวคิดเหล่านี้ด้วยเกมที่สนุกและมีส่วนร่วม:
- 🐸 [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)
## งานที่ได้รับมอบหมาย
[CSS Refactoring](assignment.md)
---
**ข้อจำกัดความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้