39 KiB

Raw Blame History Unescape Escape

โครงการ Terrarium ตอนที่ 2: แนะนำ CSS

ภาพวาดโดย Tomomi Imura

จำได้ไหมว่า HTML terrarium ของคุณดูเรียบง่ายแค่ไหน? CSS คือสิ่งที่จะเปลี่ยนโครงสร้างธรรมดานั้นให้กลายเป็นสิ่งที่ดูน่าสนใจและสวยงาม

ถ้า HTML เปรียบเสมือนการสร้างโครงบ้าน CSS ก็คือทุกสิ่งที่ทำให้บ้านนั้นรู้สึกเหมือนบ้านจริงๆ - สีของผนัง การจัดวางเฟอร์นิเจอร์ แสงไฟ และการจัดวางห้องให้ไหลลื่นไปด้วยกัน ลองนึกถึงพระราชวังแวร์ซายที่เริ่มต้นจากการเป็นที่พักล่าสัตว์ธรรมดา แต่ด้วยการตกแต่งและการจัดวางที่พิถีพิถัน ทำให้มันกลายเป็นหนึ่งในอาคารที่งดงามที่สุดในโลก

วันนี้เราจะเปลี่ยน terrarium ของคุณจากที่ใช้งานได้ให้กลายเป็นงานที่ดูดี คุณจะได้เรียนรู้วิธีการจัดวางองค์ประกอบอย่างแม่นยำ ทำให้เลย์เอาต์ตอบสนองต่อขนาดหน้าจอที่แตกต่างกัน และสร้างความดึงดูดทางสายตาที่ทำให้เว็บไซต์น่าสนใจ

เมื่อจบบทเรียนนี้ คุณจะเห็นว่าการออกแบบ CSS อย่างมีกลยุทธ์สามารถปรับปรุงโครงการของคุณได้อย่างมากมาย มาเพิ่มสไตล์ให้กับ terrarium ของคุณกันเถอะ

แบบทดสอบก่อนเรียน

เริ่มต้นกับ CSS

CSS มักถูกมองว่าเป็นแค่ "การทำให้สิ่งต่างๆ ดูสวยงาม" แต่จริงๆ แล้วมันมีบทบาทที่กว้างกว่านั้น CSS เปรียบเสมือนผู้กำกับภาพยนตร์ - คุณควบคุมไม่เพียงแค่รูปลักษณ์ของทุกสิ่ง แต่ยังรวมถึงการเคลื่อนไหว การตอบสนองต่อการโต้ตอบ และการปรับตัวให้เข้ากับสถานการณ์ต่างๆ

CSS สมัยใหม่มีความสามารถที่น่าทึ่ง คุณสามารถเขียนโค้ดที่ปรับเลย์เอาต์โดยอัตโนมัติสำหรับโทรศัพท์ แท็บเล็ต และคอมพิวเตอร์เดสก์ท็อป คุณสามารถสร้างแอนิเมชันที่ลื่นไหลซึ่งนำสายตาผู้ใช้ไปยังจุดที่ต้องการได้ ผลลัพธ์ที่ได้จะน่าประทับใจเมื่อทุกอย่างทำงานร่วมกันอย่างลงตัว

💡 เคล็ดลับมือโปร: CSS มีการพัฒนาอย่างต่อเนื่องด้วยฟีเจอร์และความสามารถใหม่ๆ อย่าลืมตรวจสอบ CanIUse.com เพื่อดูการรองรับของเบราว์เซอร์สำหรับฟีเจอร์ CSS ใหม่ๆ ก่อนใช้งานในโครงการจริง

สิ่งที่เราจะทำในบทเรียนนี้:

สร้าง การออกแบบภาพที่สมบูรณ์สำหรับ terrarium ของคุณโดยใช้เทคนิค CSS สมัยใหม่
สำรวจ แนวคิดพื้นฐาน เช่น cascade, inheritance และ CSS selectors
นำไปใช้ กลยุทธ์การจัดวางและการวางตำแหน่งที่ตอบสนอง
สร้าง ภาชนะ terrarium โดยใช้รูปทรงและการออกแบบ CSS

สิ่งที่ต้องเตรียม

คุณควรสร้างโครงสร้าง HTML สำหรับ terrarium ของคุณจากบทเรียนก่อนหน้าและเตรียมพร้อมที่จะเพิ่มสไตล์

📺 แหล่งข้อมูลวิดีโอ: ดูวิดีโอแนะนำที่มีประโยชน์นี้

การตั้งค่าไฟล์ CSS ของคุณ

ก่อนที่เราจะเริ่มเพิ่มสไตล์ เราต้องเชื่อมต่อ CSS กับ HTML ของเรา การเชื่อมต่อนี้จะบอกเบราว์เซอร์ว่าให้ไปที่ไหนเพื่อค้นหาคำสั่งการออกแบบสำหรับ terrarium ของเรา

ในโฟลเดอร์ terrarium ของคุณ สร้างไฟล์ใหม่ชื่อ style.css จากนั้นเชื่อมโยงไฟล์นี้ในส่วน <head> ของเอกสาร HTML:

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

สิ่งที่โค้ดนี้ทำ:

สร้าง การเชื่อมต่อระหว่างไฟล์ HTML และ CSS ของคุณ
บอก เบราว์เซอร์ให้โหลดและใช้สไตล์จาก style.css
ใช้ แอตทริบิวต์ rel="stylesheet" เพื่อระบุว่าเป็นไฟล์ CSS
อ้างอิง เส้นทางไฟล์ด้วย href="./style.css"

ทำความเข้าใจ CSS Cascade

เคยสงสัยไหมว่าทำไม CSS ถึงเรียกว่า "Cascading" Style Sheets? สไตล์จะไหลลงมาเหมือนน้ำตก และบางครั้งก็เกิดการขัดแย้งกัน

ลองนึกถึงโครงสร้างคำสั่งในกองทัพ - คำสั่งทั่วไปอาจบอกว่า "ทหารทุกคนใส่ชุดสีเขียว" แต่คำสั่งเฉพาะสำหรับหน่วยของคุณอาจบอกว่า "ใส่ชุดสีฟ้าสำหรับพิธี" คำสั่งที่เฉพาะเจาะจงมากกว่าจะมีความสำคัญกว่า CSS ก็ใช้ตรรกะเดียวกันนี้ และการเข้าใจลำดับชั้นนี้จะช่วยให้การแก้ไขข้อผิดพลาดง่ายขึ้นมาก

ทดลองกับลำดับความสำคัญของ Cascade

มาลองดูการทำงานของ cascade โดยสร้างความขัดแย้งของสไตล์กันเถอะ ก่อนอื่น เพิ่มสไตล์แบบ inline ในแท็ก <h1> ของคุณ:

<h1 style="color: red">My Terrarium</h1>

สิ่งที่โค้ดนี้ทำ:

ใช้ สีแดงโดยตรงกับองค์ประกอบ <h1> โดยใช้สไตล์แบบ inline
ใช้ แอตทริบิวต์ style เพื่อฝัง CSS โดยตรงใน HTML
สร้าง กฎสไตล์ที่มีลำดับความสำคัญสูงสุดสำหรับองค์ประกอบนี้โดยเฉพาะ

จากนั้นเพิ่มกฎนี้ในไฟล์ style.css ของคุณ:

h1 {
  color: blue;
}

ในโค้ดด้านบน เราได้:

กำหนด กฎ CSS ที่กำหนดเป้าหมายองค์ประกอบ <h1> ทั้งหมด
ตั้งค่า สีข้อความเป็นสีน้ำเงินโดยใช้สไตล์ชีตภายนอก
สร้าง กฎที่มีลำดับความสำคัญต่ำกว่าสไตล์แบบ inline

✅ ตรวจสอบความรู้: สีใดที่แสดงในแอปเว็บของคุณ? ทำไมสีนี้ถึงชนะ? คุณสามารถคิดถึงสถานการณ์ที่คุณอาจต้องการแทนที่สไตล์ได้หรือไม่?

💡 ลำดับความสำคัญของ CSS (จากสูงไปต่ำ):

สไตล์แบบ inline (แอตทริบิวต์ style)

IDs (#myId)

Classes (.myClass) และแอตทริบิวต์

ตัวเลือกองค์ประกอบ (h1, div, p)

ค่าเริ่มต้นของเบราว์เซอร์

การทำงานของ CSS Inheritance

CSS inheritance ทำงานเหมือนพันธุกรรม - องค์ประกอบจะรับคุณสมบัติบางอย่างจากองค์ประกอบแม่ของมัน หากคุณตั้งค่าฟอนต์ในองค์ประกอบ body ข้อความทั้งหมดภายในจะใช้ฟอนต์เดียวกันโดยอัตโนมัติ มันคล้ายกับลักษณะใบหน้าที่โดดเด่นของครอบครัวที่ส่งต่อกันมาหลายรุ่นโดยไม่ต้องระบุสำหรับแต่ละบุคคล

อย่างไรก็ตาม ไม่ใช่ทุกอย่างที่ได้รับการสืบทอด สไตล์ข้อความ เช่น ฟอนต์และสีจะได้รับการสืบทอด แต่คุณสมบัติการจัดวาง เช่น ระยะขอบและเส้นขอบจะไม่ได้รับการสืบทอด เช่นเดียวกับที่ลูกอาจได้รับลักษณะทางกายภาพแต่ไม่ใช่รสนิยมการแต่งตัวของพ่อแม่

สังเกตการสืบทอดฟอนต์

มาดูการสืบทอดโดยตั้งค่าฟอนต์ในองค์ประกอบ <body>:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

การทำงานของโค้ดนี้:

ตั้งค่า ฟอนต์สำหรับทั้งหน้าโดยกำหนดเป้าหมายองค์ประกอบ <body>
ใช้ ฟอนต์สำรองเพื่อความเข้ากันได้ของเบราว์เซอร์ที่ดีขึ้น
ใช้ ฟอนต์ระบบที่ทันสมัยซึ่งดูดีในระบบปฏิบัติการต่างๆ
ทำให้องค์ประกอบลูกทั้งหมดรับฟอนต์นี้โดยอัตโนมัติ เว้นแต่จะถูกแทนที่โดยเฉพาะ

เปิดเครื่องมือพัฒนาเบราว์เซอร์ของคุณ (F12) ไปที่แท็บ Elements และตรวจสอบองค์ประกอบ <h1> ของคุณ คุณจะเห็นว่ามันรับฟอนต์จาก body:

✅ ทดลอง: ลองตั้งค่าคุณสมบัติที่สามารถสืบทอดได้อื่นๆ ใน <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 โดยใช้ชื่อแท็ก เหมาะสำหรับการตั้งค่าสไตล์พื้นฐานที่ใช้ทั่วทั้งหน้า:

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 ที่พืชจะอยู่กันเถอะ:

#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 ได้หรือไม่?

วิธีการปรับปรุง:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.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 สำหรับพืชแต่ละต้น:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.th.png" />
</div>

องค์ประกอบสำคัญที่อธิบาย:

ใช้ class="plant-holder" สำหรับการออกแบบภาชนะที่สม่ำเสมอในพืชทั้งหมด
ใช้ class="plant" สำหรับการออกแบบและพฤติกรรมของภาพที่ใช้ร่วมกัน
รวม id="plant1" ที่ไม่ซ้ำกันสำหรับการจัดตำแหน่งเฉพาะและการโต้ตอบ JavaScript
ให้ ข้อความ alt ที่อธิบายเพื่อการเข้าถึงสำหรับ screen reader

ตอนนี้เพิ่มสไตล์เหล่านี้ในไฟล์ style.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
มาสร้างโหลเทอร์ราเรียมทีละส่วนกันเถอะ แต่ละส่วนจะใช้การกำหนดตำแหน่งแบบสัมบูรณ์และการปรับขนาดด้วยเปอร์เซ็นต์เพื่อการออกแบบที่ตอบสนอง:

.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 แบบสัมพัทธ์ ในเอกสารสเปคอย่างเป็นทางการ

✅ การทดลองทางภาพ: ลองปรับค่าเหล่านี้และสังเกตผลลัพธ์:

เปลี่ยนค่า 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 ที่นี่

🚀 ความท้าทาย: เพิ่มการสะท้อนของแก้ว

พร้อมที่จะเพิ่มความสมจริงให้กับเทอร์ราเรียมของคุณด้วยการสะท้อนของแก้วหรือยัง? เทคนิคนี้จะเพิ่มความลึกและความสมจริงให้กับการออกแบบ

คุณจะสร้างไฮไลต์ที่ละเอียดอ่อนเพื่อจำลองแสงที่สะท้อนจากพื้นผิวแก้ว วิธีนี้คล้ายกับที่จิตรกรยุคเรอเนซองส์อย่าง Jan van Eyck ใช้แสงและการสะท้อนเพื่อทำให้แก้วที่วาดดูมีมิติสามมิติ นี่คือสิ่งที่คุณต้องการ:

ความท้าทายของคุณ:

สร้าง รูปทรงวงรีสีขาวหรือสีอ่อนสำหรับการสะท้อนของแก้ว
วางตำแหน่ง รูปทรงเหล่านี้อย่างมีกลยุทธ์ทางด้านซ้ายของโหล
ปรับใช้ ค่า opacity และเอฟเฟกต์เบลอที่เหมาะสมเพื่อการสะท้อนแสงที่สมจริง
ใช้ border-radius เพื่อสร้างรูปทรงที่ดูเป็นธรรมชาติคล้ายฟองอากาศ
ทดลอง ใช้ gradients หรือ box-shadows เพื่อเพิ่มความสมจริง

แบบทดสอบหลังการบรรยาย

ขยายความรู้ CSS ของคุณ

CSS อาจดูซับซ้อนในตอนแรก แต่การเข้าใจแนวคิดหลักเหล่านี้จะช่วยสร้างพื้นฐานที่แข็งแกร่งสำหรับเทคนิคขั้นสูง

พื้นที่การเรียนรู้ CSS ถัดไปของคุณ:

Flexbox - ช่วยให้ง่ายต่อการจัดตำแหน่งและการกระจายองค์ประกอบ
CSS Grid - มอบเครื่องมือที่ทรงพลังสำหรับการสร้างเลย์เอาต์ที่ซับซ้อน
CSS Variables - ลดการทำซ้ำและปรับปรุงการดูแลรักษา
การออกแบบที่ตอบสนอง - ทำให้เว็บไซต์ทำงานได้ดีในขนาดหน้าจอที่แตกต่างกัน

แหล่งเรียนรู้แบบโต้ตอบ

ฝึกฝนแนวคิดเหล่านี้ด้วยเกมที่สนุกและมีส่วนร่วม:

🐸 Flexbox Froggy - เรียนรู้ Flexbox ผ่านความท้าทายที่สนุกสนาน
🌱 Grid Garden - เรียนรู้ CSS Grid โดยการปลูกแครอทเสมือนจริง
🎯 CSS Battle - ทดสอบทักษะ CSS ของคุณด้วยความท้าทายการเขียนโค้ด

การเรียนรู้เพิ่มเติม

สำหรับพื้นฐาน CSS ที่ครอบคลุม ให้ทำโมดูล Microsoft Learn นี้ให้เสร็จ: Style your HTML app with CSS

งานที่ได้รับมอบหมาย

CSS Refactoring

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้

39 KiB Raw Blame History Unescape Escape

โครงการ Terrarium ตอนที่ 2: แนะนำ CSS

แบบทดสอบก่อนเรียน

เริ่มต้นกับ CSS

สิ่งที่ต้องเตรียม

การตั้งค่าไฟล์ CSS ของคุณ

ทำความเข้าใจ CSS Cascade

ทดลองกับลำดับความสำคัญของ Cascade

การทำงานของ CSS Inheritance

สังเกตการสืบทอดฟอนต์

การใช้ CSS Selectors อย่างเชี่ยวชาญ

Element Selectors (Tags)

ID Selectors สำหรับองค์ประกอบเฉพาะ

Class Selectors สำหรับสไตล์ที่นำกลับมาใช้ใหม่

การทำความเข้าใจการจัดตำแหน่ง CSS

ค่าการจัดตำแหน่งทั้งห้า

การออกแบบที่ตอบสนองด้วยเปอร์เซ็นต์

หน่วย CSS ในการใช้งาน

ความท้าทาย GitHub Copilot Agent 🚀

🚀 ความท้าทาย: เพิ่มการสะท้อนของแก้ว

แบบทดสอบหลังการบรรยาย

ขยายความรู้ CSS ของคุณ

แหล่งเรียนรู้แบบโต้ตอบ

การเรียนรู้เพิ่มเติม

งานที่ได้รับมอบหมาย

39 KiB

Raw Blame History Unescape Escape