การสืบทอดใน CSS
บทความนี้อธิบายเรื่องการสืบทอดคุณสมบัติใน CSS
คุณสามารถตรวจสอบคุณสมบัติที่สืบทอดได้และไม่ได้
YouTube Video
HTML สำหรับการแสดงตัวอย่าง
css-inheritance.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Inheritance</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-inheritance.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Inheritance</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Inheritance</h2></header>
19 <article>
20 <h3>Example of Inheritance</h3>
21 <section>
22 <p>
23 Example of P Element.<br>
24 <span>Example of Span Element</span>
25 </p>
26 </section>
27 <div>
28 Example of Div Element
29 </div>
30 <ul>
31 <li>List Item 1</li>
32 <li>List Item 2</li>
33 <li>List Item 3</li>
34 </ul>
35 </article>
36 <article>
37 <h3>all</h3>
38 <section>
39 <h4>Initial</h4>
40 <div class="all-initial">This is an initial element</div>
41 </section>
42 <section>
43 <h4>Inherit</h4>
44 <div class="parent-inherit">
45 <div class="all-inherit">This is an inherited element</div>
46 </div>
47 </section>
48 <section>
49 <h4>Unset All</h4>
50 <div class="parent-unset">
51 <div class="all-unset">This is an unset element</div>
52 </div>
53 </section>
54 <section>
55 <h4>all and !important</h4>
56 <div class="important-style">
57 <div class="all-with-important">
58 This is an initial element with !important
59 </div>
60 </div>
61 </section>
62 </article>
63 </main>
64</body>
65</html>การสืบทอดใน CSS
ใน CSS บางคุณสมบัติจะถูกสืบทอดจากองค์ประกอบของพาเรนต์ไปยังองค์ประกอบของลูกโดยอัตโนมัติ นี่เป็นกลไกที่มีประโยชน์เพราะเมื่อคุณตั้งค่าคุณสมบัติที่เฉพาะเจาะจงแล้ว องค์ประกอบของลูกก็จะมีสไตล์เดียวกันด้วย โดยไม่จำเป็นต้องตั้งค่ามันซ้ำๆ อย่างไรก็ตาม ไม่ใช่ทุกคุณสมบัติที่ถูกสืบทอด; บางคุณสมบัติจะถูกสืบทอดในขณะที่บางคุณสมบัติจะไม่ถูกสืบทอด ยกตัวอย่างเช่น color และ font-family จะถูกสืบทอด แต่คุณสมบัติแบบกล่องเช่น margin และ padding จะไม่ถูกสืบทอด
คุณสมบัติที่ถูกสืบทอด
คุณสมบัติที่สามารถสืบทอดได้นั้นส่วนใหญ่เกี่ยวข้องกับข้อความและฟอนต์
คุณสมบัติที่ถูกสืบทอดโดยทั่วไป
color: สีของข้อความ
1body {
2 color: black;
3}- ในกรณีนี้ องค์ประกอบของลูกทั้งหมดภายใน
bodyจะมีสีข้อความเป็นสีดำ
font-family: ครอบครัวฟอนต์
1body {
2 font-family: "Times New Roman", cursive;
3}- องค์ประกอบของลูกทั้งหมดจะใช้ฟอนต์
Arial
font-size: ขนาดข้อความ
1body {
2 font-size: 16px;
3}- ข้อความทั้งหมดภายใน
bodyจะมีขนาด16pxตามค่าเริ่มต้น
line-height: การเว้นบรรทัด
1p {
2 line-height: 1.5;
3}- ข้อความภายในองค์ประกอบ
<p>จะแสดงผลด้วยความสูงของบรรทัด 1.5 เท่า ซึ่งจะส่งผลต่อองค์ประกอบลูกด้วย
text-align: จัดแนวข้อความ
1div {
2 text-align: center;
3}- ข้อความและองค์ประกอบอินไลน์ภายในองค์ประกอบ
divจะถูกแสดงผลให้อยู่กึ่งกลาง
visibility: การมองเห็นองค์ประกอบ
1div {
2 visibility: hidden;
3}visibilityเป็นคุณสมบัติที่ควบคุมการมองเห็นขององค์ประกอบ เมื่อถูกตั้งค่าให้เป็นแบบซ่อน องค์ประกอบจะมองไม่เห็น- ในกรณีนี้ องค์ประกอบลูกภายใน
divจะถูกซ่อนด้วย
list-style: สไตล์รายการ (ตัวบ่งชี้สำหรับ<ul>และ<ol>)
1ul {
2 list-style: square;
3}- ในกรณีนี้ รายการลิสต์ภายในแท็ก ul จะถูกแสดงด้วยเครื่องหมายสี่เหลี่ยม
ตัวอย่าง:
คุณสมบัติที่ไม่ถูกสืบทอด
คุณสมบัติที่เกี่ยวกับการจัดวางและแบบจำลองกล่องมักจะไม่ถูกสืบทอด คุณสมบัติเหล่านี้จำเป็นต้องถูกตั้งค่าทีละจุดสำหรับแต่ละองค์ประกอบ
คุณสมบัติทั่วไปที่ไม่ถูกสืบทอด
margin,padding: ขอบภายนอกและภายในขององค์ประกอบ
1div {
2 margin: 10px;
3 padding: 20px;
4}- แม้ว่าคุณจะตั้งค่าระยะขอบด้านนอกหรือด้านในสำหรับอิลิเมนต์
divก็จะไม่ส่งผลต่ออิลิเมนต์ลูก
border: ขอบขององค์ประกอบ
1div {
2 border: 1px solid black;
3}- แม้ว่าจะมีการตั้งค่าขอบบนอิลิเมนต์พาเรนต์ ก็จะไม่ส่งผลต่ออิลิเมนต์ลูก
width,height: ความกว้างและความสูงขององค์ประกอบ
1div {
2 width: 100px;
3 height: 50px;
4}- ความกว้างและความสูงของอิลิเมนต์พาเรนต์จะไม่ส่งผลต่ออิลิเมนต์ลูกโดยอัตโนมัติ
background: ลักษณะพื้นหลัง
1body {
2 background-color: lightblue;
3}- สีพื้นหลังที่ตั้งค่าไว้บน
bodyจะไม่ส่งผลต่ออิลิเมนต์ลูกโดยตรง อย่างไรก็ตาม หากอิลิเมนต์ลูกมีพื้นหลังแบบโปร่งใส สีพื้นหลังของอิลิเมนต์พาเรนต์อาจมองเห็นได้ผ่านอิลิเมนต์ลูก
ตัวอย่าง:
การควบคุมการสืบทอด
การสืบทอดสามารถควบคุมได้โดยใช้คำสำคัญ inherit, initial หรือ unset
- ถ้าคุณต้องการเปิดใช้งานการสืบทอด: คุณสามารถบังคับการสืบทอดได้โดยใช้คีย์เวิร์ด
inherit
1div {
2 color: inherit; /* Inherit the color from its parent element */
3}- ถ้าคุณไม่ต้องการการสืบทอด: คุณสามารถรีเซ็ตคุณสมบัติไปยังค่าตั้งต้นได้โดยใช้คีย์เวิร์ด
initialหรือunset
1p {
2 color: initial; /* Reset the color to its initial/default value */
3}ตัวอย่าง:
คุณสมบัติ all
คุณสมบัติ all เป็นคุณสมบัติที่สามารถรีเซ็ตคุณสมบัติ CSS เกือบทั้งหมด รวมถึงคุณสมบัติที่สามารถสืบทอดได้ ให้กับอิลิเมนต์ที่ระบุในครั้งเดียว โดยเฉพาะ คุณสามารถใช้คำสำคัญสามคำต่อไปนี้เพื่อตั้งค่าคุณสมบัติขององค์ประกอบ:
initial: รีเซ็ตคุณสมบัติทั้งหมดกลับไปยังค่าตั้งต้นinherit: สืบทอดคุณสมบัติทั้งหมดจากอิลิเมนต์พาเรนต์unset: สืบทอดคุณสมบัติหากสามารถสืบทอดได้ มิฉะนั้นจะรีเซ็ตกลับไปยังค่าตั้งต้น
all มีประโยชน์มากเมื่อคุณต้องการรีเซ็ตหรือกำหนดคุณสมบัติต่าง ๆ หลายรายการพร้อมกัน แทนการตั้งค่าเฉพาะเจาะจงทีละรายการ
ตัวอย่างของการรีเซ็ตเป็นค่าเริ่มต้น
1.all-initial {
2 all: initial;
3 background-color: lightskyblue;
4}-
เมื่อคุณต้องการรีเซ็ตสไตล์ทั้งหมดที่ตั้งไว้ก่อนหน้านี้สำหรับอิลิเมนต์ที่ระบุและนำกลับไปสู่สภาวะเริ่มต้น ให้ใช้
all: initialแบบนี้ -
ในตัวอย่างนี้ คุณสมบัติทั้งหมดของอิลิเมนต์
<div>ที่มีคลาส.all-initialจะถูกรีเซ็ตเป็นค่าตั้งต้นเริ่มต้นของเบราว์เซอร์
ตัวอย่างการสืบทอด
1.parent-inherit {
2 color: blue;
3 font-size: 20px;
4 border: 1px solid blue;
5}
6
7.all-inherit {
8 all: inherit;
9 background-color: lightskyblue;
10}- การใช้
all: inheritทำให้คุณสมบัติทั้งหมดสืบทอดมาจากอิลิเมนต์พาเรนต์ - ในตัวอย่างนี้ อิลิเมนต์ที่มีคลาส
.all-inheritจะสืบทอดคุณสมบัติทั้งหมด เช่นcolorและfont-sizeจากอิลิเมนต์พาเรนต์
ตัวอย่างการกำหนดค่าเริ่มต้นหรือการสืบทอดตามเงื่อนไข
1.parent-unset {
2 color: blue;
3}
4
5.all-unset {
6 font-weight: bold;
7}
8
9.all-unset {
10 all: unset;
11}- การใช้
all: unsetจะทำให้คุณสมบัติถูกสืบทอดหากสามารถทำได้ มิฉะนั้นจะถูกรีเซ็ตกลับไปยังค่าตั้งต้น - ในกรณีนี้
colorจะถูกสืบทอด ในขณะที่font-weightจะถูกรีเซ็ตกลับไปยังค่าตั้งต้น ซึ่งปกติคือnormal
ความสัมพันธ์กับ Specificity (ลำดับความสำคัญ)
1.all-with-important {
2 color: red !important;
3 background-color: lightskyblue;
4}
5
6.all-with-important {
7 all: initial;
8}-
คุณสมบัติ
allเป็นกลไกการรีเซ็ตที่มีพลัง แต่จะได้รับผลกระทบจากความเฉพาะเจาะจงของ CSS หากอิลิเมนต์เฉพาะมีคำกำหนด(style)ที่เข้มงวด คุณสมบัติallอาจไม่สามารถแทนที่สไตล์เหล่านั้นได้ ตัวอย่างเช่น คุณสมบัติที่กำหนดด้วย!importantจะไม่ได้รับผลกระทบ -
ในตัวอย่างนี้ แม้ว่าคุณจะพยายามรีเซ็ตสไตล์ด้วย
all: initialคุณสมบัติcolorจะไม่ถูกรีเซ็ตเนื่องจากถูกกำหนดด้วยcolor: red !important
องค์ประกอบระดับบล็อกและองค์ประกอบแบบอินไลน์
องค์ประกอบระดับบล็อก
- ตัวอย่าง:
<div>,<p>,<h1>〜<h6>,<ul>,<li>,<section> - ลักษณะเฉพาะ:
- พวกมันมักจะแสดงผลในบรรทัดใหม่เสมอและขยายเพื่อเติมเต็มความกว้างทั้งหมดของอิลิเมนต์พาเรนต์
- ความกว้าง (
width) และความสูง (height) สามารถกำหนดได้อย่างอิสระ - ขอบ (
margin) และระยะห่างภายใน (padding) สามารถกำหนดได้ทุกทิศทางและจะมีผลต่อทุกด้าน
1div {
2 width: 80%; /* Set the width to 80% of its parent element's width */
3 padding: 20px; /* Add a padding of 20 pixels on all sides */
4 margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}องค์ประกอบแบบอินไลน์
- ตัวอย่าง:
<span>,<a>,<strong>,<em>,<img>,<label> - ลักษณะเฉพาะ:
- พวกมันจะปรากฏเคียงข้างกับองค์ประกอบอินไลน์อื่นๆ ในบรรทัดเดียวกัน
- ความกว้าง (
width) และความสูง (height) ไม่สามารถตั้งค่าได้โดยตรง (เว้นแต่จะใช้display: block) - การกำหนดขอบ (
margin) หรือระยะห่างภายใน (padding) ในแนวตั้งมีผลจำกัด (ขอบและระยะห่างภายในในแนวนอนมีผล)
1a {
2 padding: 5px; /* Padding for inline elements */
3 margin-right: 10px; /* Set margin to the right */
4 color: blue;
5}ความแตกต่างระหว่างองค์ประกอบระดับบล็อกกับองค์ประกอบแบบอินไลน์
-
การตั้งค่าความกว้างและความสูง:
- องค์ประกอบระดับบล็อก: สามารถกำหนดความกว้างและความสูงได้
- องค์ประกอบอินไลน์: โดยทั่วไปไม่สามารถกำหนดความกว้างและความสูงได้
-
ระยะขอบและการย่อขยาย:
- องค์ประกอบระดับบล็อก: ขอบและระยะห่างภายในจะถูกนำไปใช้กับทุกด้าน
- องค์ประกอบอินไลน์: ขอบและระยะห่างภายในด้านบนและด้านล่างไม่มีผลหรือมีผลจำกัด
-
วิธีการจัดวางเลย์เอาต์:
- องค์ประกอบระดับบล็อก: จะถูกวางบนบรรทัดใหม่โดยอัตโนมัติ
- องค์ประกอบอินไลน์: จัดเรียงในบรรทัดเดียวกันกับองค์ประกอบอินไลน์อื่นๆ
ดังที่คุณเห็น มีความแตกต่างในวิธีการที่สไตล์ CSS ถูกนำไปใช้กับองค์ประกอบระดับบล็อกและองค์ประกอบอินไลน์ ในองค์ประกอบระดับบล็อก คุณสมบัติ CSS ที่เกี่ยวข้องกับการจัดวางเช่นความกว้าง ความสูง มาร์จิ้น และแพดดิ้งจะถูกนำไปใช้ตามที่ระบุ ในทางกลับกัน สำหรับองค์ประกอบอินไลน์ การตั้งค่าคุณสมบัติ CSS ที่เกี่ยวข้องกับการจัดวาง เช่น ความกว้าง ความสูง ขอบ หรือระยะห่างภายใน อาจไม่มีผลหรือมีผลในลักษณะที่จำกัด
การจัดการ CSS ของอิลิเมนท์ระดับบล็อกและอินไลน์
1span {
2 display: block; /* Display the span element as a block-level element */
3 width: 100px;
4 height: 50px;
5}อย่างไรก็ตาม ด้วยการตั้งค่า display ให้เป็น block หรือ inline-block คุณสามารถปรับแต่งสไตล์ เช่น ความกว้างและความสูงขององค์ประกอบอินไลน์ ให้เหมือนกับเป็นองค์ประกอบระดับบล็อก
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย