History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

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

ภาพสเก็ตโน้ตโดย Tomomi Imura

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

บทนำ

CSS หรือ Cascading Style Sheets ช่วยแก้ปัญหาสำคัญในงานพัฒนาเว็บไซต์: ทำให้เว็บไซต์ของคุณดูสวยงาม การเพิ่มสไตล์ให้แอปพลิเคชันของคุณทำให้ใช้งานง่ายขึ้นและดูดีขึ้น นอกจากนี้คุณยังสามารถใช้ CSS เพื่อสร้างการออกแบบเว็บไซต์ที่ตอบสนองต่อหน้าจอ (Responsive Web Design - RWD) ซึ่งช่วยให้แอปพลิเคชันของคุณดูดีไม่ว่าจะอยู่บนหน้าจอขนาดใด CSS ไม่ได้มีไว้แค่ทำให้แอปพลิเคชันดูดีเท่านั้น แต่ยังมีสเปคที่รวมถึงแอนิเมชันและการแปลง (transforms) ที่ช่วยให้เกิดการโต้ตอบที่ซับซ้อนในแอปพลิเคชันของคุณ กลุ่มทำงาน CSS (CSS Working Group) ช่วยดูแลสเปค CSS ปัจจุบัน คุณสามารถติดตามงานของพวกเขาได้ที่ เว็บไซต์ของ World Wide Web Consortium

หมายเหตุ CSS เป็นภาษาที่พัฒนาอยู่เสมอ เช่นเดียวกับทุกสิ่งบนเว็บ และไม่ใช่ทุกเบราว์เซอร์ที่รองรับส่วนใหม่ของสเปคเสมอไป ตรวจสอบการใช้งานของคุณโดยปรึกษา CanIUse.com

ในบทเรียนนี้ เราจะเพิ่มสไตล์ให้กับ terrarium ออนไลน์ของเราและเรียนรู้เพิ่มเติมเกี่ยวกับแนวคิด CSS หลายประการ: การไหลของสไตล์ (cascade), การสืบทอด (inheritance), การใช้ตัวเลือก (selectors), การจัดตำแหน่ง (positioning) และการใช้ CSS เพื่อสร้างเลย์เอาต์ ในกระบวนการนี้เราจะจัดเลย์เอาต์ของ terrarium และสร้าง terrarium จริงขึ้นมา

ความรู้พื้นฐานที่ต้องมี

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

ดูวิดีโอ

งานที่ต้องทำ

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

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

การไหลของสไตล์ (The Cascade)

Cascading Style Sheets มีแนวคิดว่าสไตล์จะ 'ไหล' โดยการใช้สไตล์จะถูกกำหนดโดยลำดับความสำคัญ สไตล์ที่กำหนดโดยผู้เขียนเว็บไซต์จะมีความสำคัญมากกว่าสไตล์ที่กำหนดโดยเบราว์เซอร์ สไตล์ที่กำหนด 'inline' จะมีความสำคัญมากกว่าสไตล์ที่กำหนดในไฟล์สไตล์ภายนอก

งานที่ต้องทำ

เพิ่มสไตล์ inline "color: red" ให้กับแท็ก <h1> ของคุณ:

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

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

h1 {
 color: blue;
}

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

การสืบทอด (Inheritance)

สไตล์จะถูกสืบทอดจากสไตล์ของบรรพบุรุษไปยังลูกหลาน ดังนั้นองค์ประกอบที่ซ้อนกันจะสืบทอดสไตล์ของพ่อแม่

งานที่ต้องทำ

ตั้งค่าฟอนต์ของ body ให้เป็นฟอนต์ที่กำหนด และตรวจสอบฟอนต์ขององค์ประกอบที่ซ้อนกัน:

body {
	font-family: helvetica, arial, sans-serif;
}

เปิดคอนโซลของเบราว์เซอร์ไปที่แท็บ 'Elements' และสังเกตฟอนต์ของ H1 มันสืบทอดฟอนต์จาก body ตามที่ระบุในเบราว์เซอร์:

✅ คุณสามารถทำให้องค์ประกอบที่ซ้อนกันสืบทอดคุณสมบัติที่แตกต่างได้หรือไม่?

ตัวเลือก CSS (CSS Selectors)

แท็ก

จนถึงตอนนี้ ไฟล์ style.css ของคุณมีเพียงไม่กี่แท็กที่ถูกสไตล์ และแอปดูแปลกๆ:

body {
	font-family: helvetica, arial, sans-serif;
}

h1 {
	color: #3a241d;
	text-align: center;
}

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

Ids

เพิ่มสไตล์บางอย่างเพื่อจัดเลย์เอาต์ของคอนเทนเนอร์ซ้ายและขวา เนื่องจากมีเพียงคอนเทนเนอร์ซ้ายและขวาเพียงอันเดียวในมาร์กอัป พวกมันจึงถูกกำหนด id เพื่อสไตล์พวกมัน ใช้ #:

#left-container {
	background-color: #eee;
	width: 15%;
	left: 0px;
	top: 0px;
	position: absolute;
	height: 100%;
	padding: 10px;
}

#right-container {
	background-color: #eee;
	width: 15%;
	right: 0px;
	top: 0px;
	position: absolute;
	height: 100%;
	padding: 10px;
}

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

✅ โค้ดนี้ค่อนข้างซ้ำซ้อน ซึ่งไม่เป็นไปตามหลัก "DRY" (Don't Repeat Yourself); คุณสามารถหาวิธีที่ดีกว่าในการสไตล์ id เหล่านี้ได้หรือไม่ เช่น การใช้ id และ class ร่วมกัน? คุณจะต้องเปลี่ยนมาร์กอัปและปรับปรุง CSS:

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

Classes

ในตัวอย่างข้างต้น คุณได้สไตล์องค์ประกอบเฉพาะสองอันบนหน้าจอ หากคุณต้องการให้สไตล์ใช้กับองค์ประกอบหลายอันบนหน้าจอ คุณสามารถใช้ CSS classes ทำเช่นนี้เพื่อจัดเลย์เอาต์พืชในคอนเทนเนอร์ซ้ายและขวา

สังเกตว่าแต่ละพืชในมาร์กอัป HTML มีการผสมผสานระหว่าง id และ class id ที่นี่ถูกใช้โดย JavaScript ที่คุณจะเพิ่มในภายหลังเพื่อจัดการตำแหน่งของพืชใน terrarium อย่างไรก็ตาม class จะให้สไตล์ที่กำหนดกับพืชทั้งหมด

<div class="plant-holder">
	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>

เพิ่มโค้ดต่อไปนี้ในไฟล์ style.css ของคุณ:

.plant-holder {
	position: relative;
	height: 13%;
	left: -10px;
}

.plant {
	position: absolute;
	max-width: 150%;
	max-height: 150%;
	z-index: 2;
}

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

คุณตั้งค่าความสูงของที่วางพืช (plant holder) เป็น 13% ซึ่งเป็นตัวเลขที่ดีเพื่อให้พืชทั้งหมดแสดงในแต่ละคอนเทนเนอร์แนวตั้งโดยไม่ต้องเลื่อน

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

จากนั้นพืชเองถูกกำหนดความกว้างสูงสุด 150% สิ่งนี้ช่วยให้มันปรับขนาดลงเมื่อเบราว์เซอร์ปรับขนาดลง ลองปรับขนาดเบราว์เซอร์ของคุณ พืชจะอยู่ในคอนเทนเนอร์ของพวกมันแต่ปรับขนาดลงให้พอดี

สิ่งที่น่าสังเกตอีกอย่างคือการใช้ z-index ซึ่งควบคุมระดับความสูงสัมพัทธ์ขององค์ประกอบ (เพื่อให้พืชอยู่บนคอนเทนเนอร์และดูเหมือนอยู่ใน terrarium)

✅ ทำไมคุณถึงต้องการทั้งตัวเลือก CSS สำหรับที่วางพืชและพืช?

การจัดตำแหน่ง CSS (CSS Positioning)

การผสมผสานคุณสมบัติการจัดตำแหน่ง (มี static, relative, fixed, absolute และ sticky) อาจซับซ้อนเล็กน้อย แต่เมื่อทำอย่างถูกต้องจะช่วยให้คุณควบคุมองค์ประกอบบนหน้าเว็บได้ดี

องค์ประกอบที่จัดตำแหน่งแบบ absolute จะถูกจัดตำแหน่งตามบรรพบุรุษที่ถูกจัดตำแหน่งที่ใกล้ที่สุด และหากไม่มี จะถูกจัดตำแหน่งตามเอกสารหลัก

องค์ประกอบที่จัดตำแหน่งแบบ relative จะถูกจัดตำแหน่งตามคำสั่ง CSS เพื่อปรับตำแหน่งของมันออกจากตำแหน่งเริ่มต้น

ในตัวอย่างของเรา plant-holder เป็นองค์ประกอบที่จัดตำแหน่งแบบ relative ซึ่งถูกจัดตำแหน่งภายในคอนเทนเนอร์ที่จัดตำแหน่งแบบ absolute พฤติกรรมที่ได้คือคอนเทนเนอร์ด้านข้างถูกตรึงไว้ทางซ้ายและขวา และ plant-holder ถูกซ้อนกัน ปรับตัวเองภายในคอนเทนเนอร์ด้านข้าง ให้พื้นที่สำหรับพืชที่จะวางในแถวแนวตั้ง

พืชเองก็มีการจัดตำแหน่งแบบ absolute ซึ่งจำเป็นสำหรับการทำให้มันลากได้ ซึ่งคุณจะได้เรียนรู้ในบทเรียนถัดไป

✅ ลองเปลี่ยนประเภทของการจัดตำแหน่งของคอนเทนเนอร์ด้านข้างและ plant-holder ดูว่าเกิดอะไรขึ้น?

เลย์เอาต์ CSS (CSS Layouts)

ตอนนี้คุณจะใช้สิ่งที่คุณเรียนรู้เพื่อสร้าง terrarium ทั้งหมดโดยใช้ CSS!

ก่อนอื่น สไตล์ลูกของ div .terrarium ให้เป็นสี่เหลี่ยมมุมโค้งโดยใช้ 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;
}

.jar-top {
	width: 50%;
	height: 5%;
	background: #d1e1df;
	position: absolute;
	bottom: 80.5%;
	left: 25%;
	opacity: 0.7;
	z-index: 1;
}

.jar-bottom {
	width: 50%;
	height: 1%;
	background: #d1e1df;
	position: absolute;
	bottom: 0%;
	left: 25%;
	opacity: 0.7;
}

.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 อยู่ตรงกลางและตรึงไว้ที่ด้านล่างของหน้าจอ

เรายังใช้ rem สำหรับ border-radius ซึ่งเป็นความยาวที่สัมพันธ์กับฟอนต์ อ่านเพิ่มเติมเกี่ยวกับการวัดแบบสัมพันธ์นี้ใน สเปค CSS

✅ ลองเปลี่ยนสีและความทึบของโถและดิน ดูว่าเกิดอะไรขึ้น? ทำไม?

🚀ความท้าทาย

เพิ่ม 'ฟอง' เงาสะท้อนที่ด้านล่างซ้ายของโถเพื่อให้ดูเหมือนกระจกมากขึ้น คุณจะสไตล์ .jar-glossy-long และ .jar-glossy-short ให้ดูเหมือนเงาสะท้อน นี่คือลักษณะที่ควรเป็น:

เพื่อทำแบบทดสอบหลังเรียน ให้ผ่านโมดูล Learn นี้: เพิ่มสไตล์ให้แอป HTML ของคุณด้วย CSS

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตนเอง

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

การบ้าน

การปรับปรุง CSS

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