0Pricing
CSS Academy · บทเรียน

การสืบทอดและคุณสมบัติ all

ทำความเข้าใจกฎการสืบทอดของ CSS และใช้คุณสมบัติ all เพื่อรีเซ็ตรูปแบบที่สืบทอดมา

การสืบทอดและคุณสมบัติ all เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

การสืบทอดคืออะไร

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

คุณสมบัติที่สืบทอด

โดยทั่วไปคุณสมบัติด้านตัวอักษรและข้อความจะสืบทอด:

  • font-family, font-size, font-weight, font-style
  • color
  • line-height
  • letter-spacing
  • text-align
  • visibility
  • คุณสมบัติกำหนดเองของ CSS

คุณสมบัติที่ไม่สืบทอด

โดยทั่วไป NOT สืบทอด: คุณสมบัติของโมเดลกล่องและการจัดวาง:

  • margin, padding, border
  • width, height
  • background
  • display, position
  • box-shadow, transform

คีย์เวิร์ด inherit

บังคับการสืบทอดอย่างชัดเจนด้วยคีย์เวิร์ด inherit ซึ่งมีประโยชน์กับองค์ประกอบฟอร์มที่โดยค่าเริ่มต้นไม่สืบทอดแบบอักษร:

<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
  <input type="text" placeholder="Inherits font/color" />
  <button>Button inherits too</button>
  <textarea>Inherits</textarea>
  <select><option>Option A</option></select>
</div>

คีย์เวิร์ด initial

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

<div style="font-size: 30px; color: tomato;">
  <p>Normal text inherits large tomato-colored style from its parent.</p>
  <p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>

คีย์เวิร์ด unset

unset จะขึ้นอยู่กับบริบท:

  • สำหรับคุณสมบัติที่สืบทอด: จะทำงานเหมือน inherit
  • สำหรับคุณสมบัติที่ไม่สืบทอด: จะทำงานเหมือน initial

โดยผลลัพธ์คือการ "ล้าง" คุณสมบัติให้กลับสู่สถานะตามธรรมชาติ

<div style="color: tomato;">
  <p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
  <p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>

คีย์เวิร์ด revert

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

<div style="color: tomato; font-family: Georgia, serif;">
  Ancestor style is tomato serif text.
  <div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>

พร็อพเพอร์ตี all

พร็อพเพอร์ตี all เป็นรูปแบบย่อที่ใช้คีย์เวิร์ดกับ พร็อพเพอร์ตี CSS ทุกตัว พร้อมกัน ยกเว้น direction และ unicode-bidi

<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
  <div class="isolated-widget">all: initial — resets everything to spec defaults</div>
  <div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>

การใช้ all: initial ในทางปฏิบัติ

ใช้ all: initial เมื่อต้องการสร้างคอมโพเนนต์ที่แยกออกจากส่วนอื่นโดยสมบูรณ์ และไม่รับผลจากสไตล์ส่วนกลางหรือสไตล์ขององค์ประกอบแม่:

<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
  Page context — large serif tomato text
  <div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>

รูปแบบ all: unset

ลบสไตล์ปุ่มของเบราว์เซอร์เพื่อสร้างปุ่มแบบกำหนดเอง โดยไม่จำเป็นต้องทราบพร็อพเพอร์ตีที่เกี่ยวข้องทั้งหมด:

<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>

การสืบทอดและพร็อพเพอร์ตีแบบกำหนดเอง

พร็อพเพอร์ตีแบบกำหนดเองของ CSS จะสืบทอดโดยค่าเริ่มต้น นี่คือสิ่งที่ทำให้พร็อพเพอร์ตีเหล่านี้ทรงพลัง — ตัวแปรที่กำหนดไว้บน :root จะพร้อมใช้งานทุกที่ ใช้ @property { inherits: false } เพื่อทำให้พร็อพเพอร์ตีแบบกำหนดเองไม่สืบทอด

ตรวจสอบอย่างรวดเร็ว

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

สรุปทบทวน

พร็อพเพอร์ตีที่สืบทอดจะส่งค่าต่อไปยังองค์ประกอบลูก ส่วนพร็อพเพอร์ตีที่ไม่สืบทอดจะไม่ทำเช่นนั้น คีย์เวิร์ด inherit, initial, unset และ revert ช่วยให้ควบคุมได้อย่างชัดเจน พร็อพเพอร์ตี all จะรีเซ็ตพร็อพเพอร์ตีทุกตัวพร้อมกัน จึงเหมาะอย่างยิ่งกับคอมโพเนนต์ที่แยกออกจากส่วนอื่นและองค์ประกอบฟอร์มแบบกำหนดเอง

คำถามที่พบบ่อย

บทเรียน “การสืบทอดและคุณสมบัติ all” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสืบทอดและคุณสมบัติ all” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสืบทอดและคุณสมบัติ all”

ทำความเข้าใจกฎการสืบทอดของ CSS และใช้คุณสมบัติ all เพื่อรีเซ็ตรูปแบบที่สืบทอดมา คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

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

บทเรียน “การสืบทอดและคุณสมบัติ all” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การคำนวณความจำเพาะ: สไตล์อินไลน์ ID คลาส องค์ประกอบ
  2. คาสเคด: แหล่งที่มาและลำดับ
  3. !important: เมื่อใดและเหตุใดจึงไม่ควรใช้
  4. การสืบทอดและคุณสมบัติ all
← กลับไปที่ CSS Academy