ตัวเลือก: เลือกสิ่งที่จะกำหนดรูปแบบ
กำหนดเป้าหมายองค์ประกอบตามแอตทริบิวต์ และใช้ตัวเลือกสากลอย่างมีประสิทธิภาพ
ตัวเลือก: เลือกสิ่งที่จะกำหนดรูปแบบ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 3 บทเรียน
เลือกเป้าหมายของคุณ
ก่อนจัดสไตล์ คุณต้องชี้ไปยังสิ่งที่ต้องการจัดสไตล์เสียก่อน นั่นคือหน้าที่ของตัวเลือก บทเรียนนี้จะช่วยให้คุณเข้าใจอย่างกระจ่างแน่นอน ✨
เหมือนการชี้ด้วยนิ้ว
ตัวเลือกก็เหมือนการที่คุณชี้แล้วพูดว่า «สิ่งนี้ ตรงนี้เลย» ง่ายเพียงเท่านี้ ไม่จำเป็นต้องท่องจำ
จัดสไตล์ด้วยแท็ก
ตัวเลือกที่ง่ายที่สุดใช้ชื่อแท็ก เขียน «p» แล้วคุณจะเลือกย่อหน้าทุกย่อหน้าในหน้าพร้อมกัน
<p>All paragraphs turn red.</p>
จัดสไตล์ด้วยคลาส
ต้องการจัดสไตล์ให้เฉพาะบางองค์ประกอบหรือคะ กำหนดคลาสให้กับองค์ประกอบเหล่านั้น แล้วเลือกคลาสด้วยจุด เช่น .note ยืดหยุ่นมาก
<p class="note">This note is orange.</p>
คลาสนำกลับมาใช้ซ้ำได้
ส่วนที่ดีที่สุดคือ คลาสหนึ่งคลาสสามารถใช้ซ้ำกับองค์ประกอบได้หลายรายการ จัดสไตล์ครั้งเดียว แล้วนำไปใช้ได้ทุกที่ ช่วยประหยัดเวลาได้มาก ⏱️
จัดสไตล์ด้วยรหัสประจำตัว
ต้องการองค์ประกอบพิเศษเพียงรายการเดียวหรือคะ กำหนดรหัสประจำตัวให้ แล้วเลือกด้วยเครื่องหมายแฮช เช่น #header รหัสประจำตัวมีไว้สำหรับสิ่งที่ไม่ซ้ำกัน
<h1 id="header">Page Header</h1>
จุดกับแฮช
เคล็ดลับจำง่าย ๆ คือ จุดใช้สำหรับหลายรายการ (คลาส) ส่วนแฮชใช้สำหรับรายการเดียว (รหัสประจำตัว) ชื่อแท็กไม่ต้องใช้สัญลักษณ์ใดเลย
เหมือนป้ายชื่อ
ลองนึกว่าคลาสเป็นป้ายชื่อกลุ่ม และรหัสประจำตัวเป็นป้าย VIP เพียงใบเดียว ตัวเลือกมีหน้าที่อ่านป้ายชื่อเหล่านั้น 🏷️
ผสมผสานให้เหมาะสม
หน้าเว็บจริงจะผสมแท็ก คลาส และรหัสประจำตัวเพื่อจัดสไตล์ให้ตรงกับสิ่งที่ต้องการ ตอนนี้คุณรู้จักทั้งสามอย่างแล้ว 🙌
คุณทำได้แล้ว!
ตอนนี้คุณบอกได้แล้วว่า CSS คืออะไร อ่านกฎได้ และเลือกเป้าหมายด้วยตัวเลือกได้ นี่คือพื้นฐาน CSS ที่แท้จริง ภูมิใจในตัวคุณมากค่ะ 🎉
ตรวจสอบอย่างรวดเร็ว
ตรวจสอบครั้งสุดท้าย คุณใช้สัญลักษณ์ใดเพื่อเลือกคลาสใน CSS
คำถามที่พบบ่อย
บทเรียน “ตัวเลือก: เลือกสิ่งที่จะกำหนดรูปแบบ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวเลือก: เลือกสิ่งที่จะกำหนดรูปแบบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวเลือก: เลือกสิ่งที่จะกำหนดรูปแบบ”
กำหนดเป้าหมายองค์ประกอบตามแอตทริบิวต์ และใช้ตัวเลือกสากลอย่างมีประสิทธิภาพ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน
บทเรียน “ตัวเลือก: เลือกสิ่งที่จะกำหนดรูปแบบ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- CSS คืออะไร
- CSS ทำให้หน้าเว็บมีชีวิตชีวาอย่างไร
- ตัวเลือก: เลือกสิ่งที่จะกำหนดรูปแบบ