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频道。