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。 -
在此範例中，帶有
.all-initial類的<div>元素的所有屬性都被重設為瀏覽器的預設初始值。
繼承的示例
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。
與特殊性（優先級）的關係
1.all-with-important {
2 color: red !important;
3 background-color: lightskyblue;
4}
5
6.all-with-important {
7 all: initial;
8}-
all屬性是一種強大的重設機制，但它會受到CSS特異性的影響。如果特定元素有較高優先級的樣式規範，all屬性可能無法覆蓋這些樣式。例如，用!important指定的屬性無法被影響。 -
在此範例中，即使您試圖使用
all: initial重設樣式，由於color: red !important的設定，color屬性不會被重設。
塊級元素和行內元素
塊級元素
- 範例:
<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，可以像區塊元素一樣調整行內元素的寬度和高度樣式。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。