พอดแคสต์ CSS - 005: การรับค่า
สมมติว่าคุณเพิ่งเขียน CSS ไปเพื่อทำให้องค์ประกอบดูเหมือนปุ่ม
<a href="http://example.com" class="my-button">I am a button link</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
จากนั้นคุณเพิ่มเอลิเมนต์ของลิงก์ลงในบทความของเนื้อหา
ซึ่งมีค่า class
เป็น .my-button
แต่กลับมีปัญหา
ข้อความดังกล่าวไม่ใช่สีที่คุณคาดหวังไว้ เกิดขึ้นได้อย่างไร
พร็อพเพอร์ตี้ CSS บางรายการจะรับค่าหากคุณไม่ระบุค่า
ในกรณีของปุ่มนี้ ปุ่มจะรับ color
มาจาก CSS นี้
article a {
color: maroon;
}
ในบทเรียนนี้ คุณจะได้เรียนรู้ว่าทำไมจึงเป็นเช่นนั้นและ การรับช่วงค่าเป็นฟีเจอร์ที่มีประสิทธิภาพซึ่งช่วยให้เขียน CSS น้อยลงได้อย่างไร
โฟลว์การรับค่า
มาดูวิธีการทำงานของการรับช่วง โดยใช้ข้อมูลโค้ด HTML นี้
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
องค์ประกอบรูท (<html>
) จะไม่รับค่าสิ่งใดเลยเนื่องจากเป็นองค์ประกอบแรกในเอกสาร
เพิ่ม CSS ลงในองค์ประกอบ HTML
แล้วระบบจะเริ่มแบ่งเอกสารลง
html {
color: lightslategray;
}
องค์ประกอบอื่นๆ จะรับค่าพร็อพเพอร์ตี้ color
โดยค่าเริ่มต้น
องค์ประกอบ html
มี color: lightslategray
ดังนั้น
องค์ประกอบทั้งหมดที่รับค่าสีได้จะมีสี lightslategray
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
เฉพาะ <p>
เท่านั้นที่จะมีข้อความตัวเอียงเนื่องจากเป็นองค์ประกอบที่ฝังอยู่ลึกที่สุด
การรับค่าจะเลื่อนลงไปด้านล่างเท่านั้น และจะไม่ส่งไปที่องค์ประกอบระดับบนสุด
พร็อพเพอร์ตี้ใดที่จะรับค่ามาโดยค่าเริ่มต้น
คุณสมบัติ CSS บางอย่างไม่ได้รับค่ามาโดยค่าเริ่มต้น แต่มีจำนวนมากที่เป็นเช่นนั้น เพื่อเป็นข้อมูลอ้างอิง ต่อไปนี้คือรายการพร็อพเพอร์ตี้ทั้งหมดที่รับค่ามาโดยค่าเริ่มต้น ซึ่งนำมาจากการอ้างอิง W3 ของพร็อพเพอร์ตี้ CSS ทั้งหมด
- แอซิมัท
- border-collapse
- border-spacing
- ด้านคำบรรยาย
- สี [color]
- เคอร์เซอร์
- direction
- เซลล์ว่าง
- ชุดแบบอักษร
- font-size
- font-style
- font-variant
- font-weight
- แบบอักษร
- ระยะห่างระหว่างตัวอักษร
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- เด็กกำพร้า
- คำกล่าว
- text-align
- text-indent
- การเปลี่ยนรูปแบบข้อความ
- การเปิดเผย
- white-space
- แม่ม่าย
- word-spacing
การสืบทอดค่าทำงานอย่างไร
องค์ประกอบ HTML ทุกรายการจะมีพร็อพเพอร์ตี้ CSS ทุกรายการที่กำหนดไว้โดยค่าเริ่มต้นด้วยค่าเริ่มต้น ค่าเริ่มต้นเป็นพร็อพเพอร์ตี้ที่ไม่รับค่ามาและจะแสดงเป็นค่าเริ่มต้นหากการต่อเรียงคำนวณค่าสำหรับองค์ประกอบนั้นไม่สำเร็จ
พร็อพเพอร์ตี้ที่สามารถรับค่าแบบ Cascade ลงได้ และองค์ประกอบย่อยจะได้รับค่าที่คำนวณแล้วซึ่งแสดงค่าของรายการระดับบน
ซึ่งหมายความว่าหากระดับบนสุดที่ตั้งค่า font-weight
เป็น bold
องค์ประกอบย่อยทั้งหมดจะเป็นตัวหนา เว้นแต่มีการตั้งค่า font-weight
เป็นค่าอื่น หรือสไตล์ชีต User Agent มีค่าสำหรับ font-weight
สำหรับองค์ประกอบดังกล่าว
วิธีรับค่าและควบคุมการรับช่วงมาอย่างชัดเจน
การรับช่วงค่าอาจมีผลต่อองค์ประกอบในรูปแบบที่ไม่คาดคิด CSS จึงมีเครื่องมือที่ช่วยในเรื่องนี้ได้
คีย์เวิร์ด inherit
คุณสามารถกําหนดให้พร็อพเพอร์ตี้ใดก็ได้รับค่าที่คำนวณมาจากระดับบนสุดของพร็อพเพอร์ตี้นั้นด้วยคีย์เวิร์ด inherit
วิธีที่มีประโยชน์ในการใช้คีย์เวิร์ดนี้คือการสร้างข้อยกเว้น
strong {
font-weight: 900;
}
ข้อมูลโค้ด CSS นี้ตั้งค่าองค์ประกอบ <strong>
ทั้งหมดให้มี font-weight
เป็น 900
แทนค่า bold
เริ่มต้น ซึ่งเทียบเท่ากับ font-weight: 700
.my-component {
font-weight: 500;
}
ชั้นเรียน .my-component
จะตั้งค่า font-weight
เป็น 500
แทน
หากต้องการทําให้องค์ประกอบ <strong>
ภายใน .my-component
เพิ่ม font-weight: 500
ด้วย ให้ทําดังนี้
.my-component strong {
font-weight: inherit;
}
ตอนนี้องค์ประกอบ <strong>
ภายใน .my-component
จะมี font-weight
เป็น 500
คุณตั้งค่านี้ได้อย่างชัดแจ้ง แต่หากคุณใช้ inherit
และ CSS ของการเปลี่ยนแปลง .my-component
ในอนาคต คุณรับประกันได้ว่า <strong>
ของคุณจะได้รับการอัปเดตล่าสุดโดยอัตโนมัติ
คีย์เวิร์ด initial
การรับช่วงค่าอาจทำให้เกิดปัญหากับองค์ประกอบของคุณ และ initial
มีตัวเลือกการรีเซ็ตที่มีประสิทธิภาพให้กับคุณ
คุณได้เรียนรู้ไว้ก่อนหน้านี้ว่าพร็อพเพอร์ตี้ทุกรายการมีค่าเริ่มต้นใน CSS
คีย์เวิร์ด initial
จะตั้งค่าพร็อพเพอร์ตี้กลับไปเป็นค่าเริ่มต้นดังกล่าว
aside strong {
font-weight: initial;
}
ข้อมูลโค้ดนี้จะนําน้ำหนักตัวหนาออกจากองค์ประกอบ <strong>
ทั้งหมดภายในองค์ประกอบ <aside>
และทําให้มีน้ำหนักปกติ ซึ่งเป็นค่าเริ่มต้นแทน
คีย์เวิร์ด unset
พร็อพเพอร์ตี้ unset
จะทํางานต่างออกไปหากมีการรับช่วงพร็อพเพอร์ตี้โดยค่าเริ่มต้นหรือไม่
หากมีการรับค่าพร็อพเพอร์ตี้โดยค่าเริ่มต้น คีย์เวิร์ด unset
จะเหมือนกับ inherit
หากพร็อพเพอร์ตี้ไม่ได้รับค่ามาโดยค่าเริ่มต้น คีย์เวิร์ด unset
จะเท่ากับ initial
การจำว่าพร็อพเพอร์ตี้ CSS ใดที่รับช่วงมาโดยค่าเริ่มต้นอาจเป็นเรื่องยาก unset
จะมีประโยชน์ในบริบทดังกล่าว
ตัวอย่างเช่น color
รับค่าเดิมมาโดยค่าเริ่มต้น
แต่ margin
ไม่ใช่ค่า ดังนั้นคุณสามารถเขียนดังนี้
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
}
/* The p needs to be reset in asides, so you can use unset */
aside p {
margin: unset;
color: unset;
}
ตอนนี้ระบบได้นำ margin
ออกแล้วและ color
จะเปลี่ยนกลับไปเป็นค่าที่คำนวณมาซึ่งรับค่ามา
คุณสามารถใช้ค่า unset
กับพร็อพเพอร์ตี้ all
ได้เช่นกัน
กลับไปที่ตัวอย่างด้านบน
จะเกิดอะไรขึ้นหากสไตล์ p
ส่วนกลางได้รับพร็อพเพอร์ตี้เพิ่มเติมเล็กน้อย
เฉพาะกฎที่ตั้งค่าไว้สำหรับ margin
และ color
เท่านั้นที่จะมีผล
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}
ถ้าคุณเปลี่ยนกฎ aside p
เป็น all: unset
แทน ไม่ว่าระบบจะใช้รูปแบบส่วนกลางใดกับ p
ในอนาคต ระบบก็จะยกเลิกการตั้งค่าเสมอ
aside p {
margin: unset;
color: unset;
all: unset;
}
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการสืบทอดพันธุกรรม
พร็อพเพอร์ตี้ใดต่อไปนี้ที่รับช่วงมาได้
animation
font-size
color
text-align
line-height
ค่าใดมีลักษณะการทำงานเหมือน inherit
เว้นแต่จะไม่มีสิ่งใดให้สืบทอด จากนั้นจะทำงานเหมือนกับ initial
reset
unset
superset